@pagopa/io-app-design-system 1.2.0 → 1.3.1

package/src/components/spacer/Spacer.tsx

@@ -5,12 +5,12 @@ import { hexToRgba, IOColors, IOSpacer } from "../../core";
 export type SpacerOrientation = "vertical" | "horizontal";
 
 type BaseSpacerProps = {
-    orientation: SpacerOrientation;
-    size: IOSpacer;
+  orientation: SpacerOrientation;
+  size: IOSpacer;
 };
 
 type SpacerProps = {
-    size?: IOSpacer;
+  size?: IOSpacer;
 };
 
 const DEFAULT_SIZE = 16;
@@ -25,19 +25,22 @@ Native `Spacer` component
 @param {IOSpacer} size
  */
 const Spacer = ({ orientation, size }: BaseSpacerProps) => {
-    const style = React.useMemo(() => ({
-        ...(orientation === "vertical" && {
-            height: size
-        }),
-        ...(orientation === "horizontal" && {
-            width: size
-        }),
-        ...((debugMode as boolean) && {
-            backgroundColor: debugBg
-        })
-    }), [orientation, size]);
-
-    return <View style={style} />;
+  const style = React.useMemo(
+    () => ({
+      ...(orientation === "vertical" && {
+        height: size
+      }),
+      ...(orientation === "horizontal" && {
+        width: size
+      }),
+      ...((debugMode as boolean) && {
+        backgroundColor: debugBg
+      })
+    }),
+    [orientation, size]
+  );
+
+  return <View style={style} />;
 };
 
 /**
@@ -45,12 +48,12 @@ Horizontal spacer component
 @param {IOSpacer} size
  */
 export const HSpacer = ({ size = DEFAULT_SIZE }: SpacerProps) => (
-    <Spacer orientation={"horizontal"} size={size} />
+  <Spacer orientation={"horizontal"} size={size} />
 );
 /**
 Vertical spacer component
 @param {IOSpacer} size
  */
 export const VSpacer = ({ size = DEFAULT_SIZE }: SpacerProps) => (
-    <Spacer orientation={"vertical"} size={size} />
+  <Spacer orientation={"vertical"} size={size} />
 );

package/src/components/spacer/index.tsx

@@ -1 +1 @@
-export * from "./Spacer";
+export * from "./Spacer";

package/src/components/typography/Body.tsx

@@ -5,14 +5,14 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type PartialAllowedColors = Extract<
-    IOColors,
-    "bluegreyDark" | "white" | "blue" | "bluegrey" | "bluegreyLight"
+  IOColors,
+  "bluegreyDark" | "white" | "blue" | "bluegrey" | "bluegreyLight"
 >;
 type AllowedColors = PartialAllowedColors | IOTheme["textBody-default"];
 type AllowedWeight = IOFontWeight | "Regular" | "SemiBold";
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 const fontName: FontFamily = "TitilliumWeb";
@@ -28,10 +28,10 @@ export const bodyDefaultWeight: AllowedWeight = "Regular";
  * @constructor
  */
 export const Body: React.FunctionComponent<OwnProps> = props =>
-    useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: bodyDefaultWeight,
-        defaultColor: bodyDefaultColor,
-        font: fontName,
-        fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight }
-    });
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: bodyDefaultWeight,
+    defaultColor: bodyDefaultColor,
+    font: fontName,
+    fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight }
+  });

package/src/components/typography/Factory.tsx

@@ -4,9 +4,9 @@ import { IOFontWeight } from "../../utils/fonts";
 import { XOR } from "../../utils/types";
 import { BaseTypography } from "./BaseTypography";
 import {
-    calculateWeightColor,
-    RequiredTypographyProps,
-    TypographyProps
+  calculateWeightColor,
+  RequiredTypographyProps,
+  TypographyProps
 } from "./common";
 
 /**
@@ -14,8 +14,8 @@ import {
  * that will be used when the fields weight and color will be undefined.
  */
 type DefaultArgumentProps<WeightPropsType, ColorsPropsType> = {
-    defaultWeight: WeightPropsType;
-    defaultColor: ColorsPropsType;
+  defaultWeight: WeightPropsType;
+  defaultColor: ColorsPropsType;
 };
 
 /**
@@ -23,18 +23,18 @@ type DefaultArgumentProps<WeightPropsType, ColorsPropsType> = {
  * weight and color, thus allowing to implement more sophisticated strategies.
  */
 type DefaultFactoryProps<WeightPropsType, ColorsPropsType> = {
-    weightColorFactory: (
-        weight?: WeightPropsType,
-        color?: ColorsPropsType
-    ) => RequiredTypographyProps<WeightPropsType, ColorsPropsType>;
+  weightColorFactory: (
+    weight?: WeightPropsType,
+    color?: ColorsPropsType
+  ) => RequiredTypographyProps<WeightPropsType, ColorsPropsType>;
 };
 
 /**
  * Only one type of default props strategy is allowed
  */
 type DefaultProps<WeightPropsType, ColorsPropsType> = XOR<
-    DefaultArgumentProps<WeightPropsType, ColorsPropsType>,
-    DefaultFactoryProps<WeightPropsType, ColorsPropsType>
+  DefaultArgumentProps<WeightPropsType, ColorsPropsType>,
+  DefaultFactoryProps<WeightPropsType, ColorsPropsType>
 >;
 
 /**
@@ -44,25 +44,25 @@ type DefaultProps<WeightPropsType, ColorsPropsType> = XOR<
  * - The default {@link TypographyProps}
  */
 type FactoryProps<WeightPropsType, ColorsPropsType> = TypographyProps<
-    WeightPropsType,
-    ColorsPropsType
+  WeightPropsType,
+  ColorsPropsType
 > &
-    DefaultProps<WeightPropsType, ColorsPropsType> &
-    Omit<React.ComponentProps<typeof BaseTypography>, "weight" | "color">;
+  DefaultProps<WeightPropsType, ColorsPropsType> &
+  Omit<React.ComponentProps<typeof BaseTypography>, "weight" | "color">;
 
 /**
  * Calculate if the props is of type {@link DefaultFactoryProps}
  * @param props
  */
 function isDefaultFactoryProps<WeightPropsType, ColorsPropsType>(
-    props:
-        | DefaultFactoryProps<WeightPropsType, ColorsPropsType>
-        | DefaultArgumentProps<WeightPropsType, ColorsPropsType>
+  props:
+    | DefaultFactoryProps<WeightPropsType, ColorsPropsType>
+    | DefaultArgumentProps<WeightPropsType, ColorsPropsType>
 ): props is DefaultFactoryProps<WeightPropsType, ColorsPropsType> {
-    return (
-        (props as DefaultFactoryProps<WeightPropsType, ColorsPropsType>)
-            .weightColorFactory !== undefined
-    );
+  return (
+    (props as DefaultFactoryProps<WeightPropsType, ColorsPropsType>)
+      .weightColorFactory !== undefined
+  );
 }
 
 /**
@@ -72,22 +72,22 @@ function isDefaultFactoryProps<WeightPropsType, ColorsPropsType>(
  * @param props
  */
 export function useTypographyFactory<
-    WeightPropsType extends IOFontWeight,
-    ColorsPropsType extends IOColors
+  WeightPropsType extends IOFontWeight,
+  ColorsPropsType extends IOColors
 >(props: FactoryProps<WeightPropsType, ColorsPropsType>) {
-    // Use different strategy to calculate the default values, based on DefaultProps
-    const { weight, color } = useMemo(
-        () =>
-            isDefaultFactoryProps(props)
-                ? props.weightColorFactory(props.weight, props.color)
-                : calculateWeightColor(
-                    props.defaultWeight,
-                    props.defaultColor,
-                    props.weight,
-                    props.color
-                ),
-        [props]
-    );
+  // Use different strategy to calculate the default values, based on DefaultProps
+  const { weight, color } = useMemo(
+    () =>
+      isDefaultFactoryProps(props)
+        ? props.weightColorFactory(props.weight, props.color)
+        : calculateWeightColor(
+            props.defaultWeight,
+            props.defaultColor,
+            props.weight,
+            props.color
+          ),
+    [props]
+  );
 
-    return <BaseTypography weight={weight} color={color} {...props} />;
+  return <BaseTypography weight={weight} color={color} {...props} />;
 }

package/src/components/typography/H1.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import {
-    IOColors,
-    IOColorsStatusForeground,
-    IOTheme
+  IOColors,
+  IOColorsStatusForeground,
+  IOTheme
 } from "../../core/IOColors";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type PartialAllowedColors = Extract<
-    IOColors,
-    "bluegreyDark" | "white" | "blue"
+  IOColors,
+  "bluegreyDark" | "white" | "blue"
 >;
 type AllowedColors =
-    | PartialAllowedColors
-    | IOColorsStatusForeground
-    | IOTheme["textHeading-default"];
+  | PartialAllowedColors
+  | IOColorsStatusForeground
+  | IOTheme["textHeading-default"];
 type AllowedWeight = Extract<IOFontWeight, "Bold">;
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 export const h1FontSize = 26;
@@ -33,13 +33,13 @@ export const h1DefaultWeight: AllowedWeight = "Bold";
  * @param props
  * @constructor
  */
-export const H1: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: h1DefaultWeight,
-        defaultColor: h1DefaultColor,
-        font: fontName,
-        fontStyle: { fontSize: h1FontSize, lineHeight: h1LineHeight }
-    });
-};
+export const H1: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "TitilliumWeb";
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: h1DefaultWeight,
+    defaultColor: h1DefaultColor,
+    font: fontName,
+    fontStyle: { fontSize: h1FontSize, lineHeight: h1LineHeight }
+  });
+};

package/src/components/typography/H2.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import {
-    IOColors,
-    IOColorsStatusForeground,
-    IOTheme
+  IOColors,
+  IOColorsStatusForeground,
+  IOTheme
 } from "../../core/IOColors";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type PartialAllowedColors = Extract<
-    IOColors,
-    "bluegreyDark" | "white" | "blue" | "bluegrey"
+  IOColors,
+  "bluegreyDark" | "white" | "blue" | "bluegrey"
 >;
 type AllowedColors =
-    | PartialAllowedColors
-    | IOColorsStatusForeground
-    | IOTheme["textHeading-default"];
+  | PartialAllowedColors
+  | IOColorsStatusForeground
+  | IOTheme["textHeading-default"];
 type AllowedWeight = Extract<IOFontWeight, "Bold" | "SemiBold">;
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 export const h2FontSize = 20;
@@ -33,13 +33,13 @@ export const h2DefaultWeight: AllowedWeight = "Bold";
  * @param props
  * @constructor
  */
-export const H2: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: h2DefaultWeight,
-        defaultColor: h2DefaultColor,
-        font: fontName,
-        fontStyle: { fontSize: h2FontSize, lineHeight: h2LineHeight }
-    });
-};
+export const H2: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "TitilliumWeb";
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: h2DefaultWeight,
+    defaultColor: h2DefaultColor,
+    font: fontName,
+    fontStyle: { fontSize: h2FontSize, lineHeight: h2LineHeight }
+  });
+};

package/src/components/typography/H4.tsx

@@ -8,7 +8,7 @@ type AllowedColors = IOColorsStatusForeground | IOTheme["textHeading-default"];
 type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 /* Common typographic styles */
@@ -22,16 +22,16 @@ export const h4LineHeight = 24;
  * @constructor
  */
 export const H4: React.FC<OwnProps> = props => {
-    /* New typographic styles */
-    const font: FontFamily = "ReadexPro";
-    const defaultColor: AllowedColors = "black";
-    const defaultWeight: AllowedWeight = "Regular";
+  /* New typographic styles */
+  const font: FontFamily = "ReadexPro";
+  const defaultColor: AllowedColors = "black";
+  const defaultWeight: AllowedWeight = "Regular";
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight,
-        defaultColor,
-        font,
-        fontStyle: { fontSize: h4FontSize, lineHeight: h4LineHeight }
-    });
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: { fontSize: h4FontSize, lineHeight: h4LineHeight }
+  });
 };

package/src/components/typography/H5.tsx

@@ -6,20 +6,20 @@ import { ExternalTypographyProps } from "./common";
 
 // these colors are allowed only when the weight is SemiBold
 type AllowedSemiBoldColors = Extract<
-    IOColors,
-    "bluegreyDark" | "bluegrey" | "bluegreyLight" | "blue" | "white" | "red"
+  IOColors,
+  "bluegreyDark" | "bluegrey" | "bluegreyLight" | "blue" | "white" | "red"
 >;
 
 // when the weight is bold, only the white color is allowed
 type AllowedRegularColors = Extract<
-    IOColors,
-    | "bluegreyDark"
-    | "bluegrey"
-    | "bluegreyLight"
-    | "blue"
-    | "white"
-    | "red"
-    | "grey"
+  IOColors,
+  | "bluegreyDark"
+  | "bluegrey"
+  | "bluegreyLight"
+  | "blue"
+  | "white"
+  | "red"
+  | "grey"
 >;
 
 // all the possible colors
@@ -30,14 +30,14 @@ type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
 
 // these are the properties allowed only if weight is undefined or SemiBold
 type SemiBoldProps = {
-    weight?: Extract<IOFontWeight, "SemiBold">;
-    color?: AllowedSemiBoldColors;
+  weight?: Extract<IOFontWeight, "SemiBold">;
+  color?: AllowedSemiBoldColors;
 };
 
 // these are the properties allowed only if weight is Bold
 type RegularProps = {
-    weight: Extract<IOFontWeight, "Regular">;
-    color?: AllowedRegularColors;
+  weight: Extract<IOFontWeight, "Regular">;
+  color?: AllowedRegularColors;
 };
 
 type BoldKindProps = SemiBoldProps | RegularProps;
@@ -54,13 +54,13 @@ export const h5DefaultWeight: AllowedWeight = "SemiBold";
  * @param props
  * @constructor
  */
-export const H5: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: h5DefaultWeight,
-        defaultColor: h5DefaultColor,
-        font: fontName,
-        fontStyle: { fontSize: h5FontSize }
-    });
-};
+export const H5: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "TitilliumWeb";
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: h5DefaultWeight,
+    defaultColor: h5DefaultColor,
+    font: fontName,
+    fontStyle: { fontSize: h5FontSize }
+  });
+};

package/src/components/typography/H6.tsx

@@ -9,7 +9,7 @@ type AllowedColors = IOTheme["textBody-default"] | "blueIO-850";
 type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 export const h6FontSize = 16;
@@ -23,13 +23,13 @@ export const h6DefaultWeight: AllowedWeight = "Regular";
  * @param props
  * @constructor
  */
-export const H6: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "ReadexPro";
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: h6DefaultWeight,
-        defaultColor: h6DefaultColor,
-        font: fontName,
-        fontStyle: { fontSize: h6FontSize, lineHeight: h6LineHeight }
-    });
+export const H6: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "ReadexPro";
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: h6DefaultWeight,
+    defaultColor: h6DefaultColor,
+    font: fontName,
+    fontStyle: { fontSize: h6FontSize, lineHeight: h6LineHeight }
+  });
 };

package/src/components/typography/Label.tsx

@@ -5,13 +5,13 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type PartialAllowedColors = Extract<
-    IOColors,
-    "blue" | "bluegrey" | "bluegreyDark" | "white" | "red"
+  IOColors,
+  "blue" | "bluegrey" | "bluegreyDark" | "white" | "red"
 >;
 type AllowedColors = PartialAllowedColors | IOColorsStatusForeground;
 type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 /**
@@ -20,17 +20,17 @@ type OwnProps = ExternalTypographyProps<
  * @param props`
  * @constructor
  */
-export const Label: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    const fontSize = 16;
-    const labelDefaultWeight = "Bold";
-    const labelDefaultcolor = "blue";
+export const Label: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "TitilliumWeb";
+  const fontSize = 16;
+  const labelDefaultWeight = "Bold";
+  const labelDefaultcolor = "blue";
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: labelDefaultWeight,
-        defaultColor: labelDefaultcolor,
-        font: fontName,
-        fontStyle: { fontSize }
-    });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: labelDefaultWeight,
+    defaultColor: labelDefaultcolor,
+    font: fontName,
+    fontStyle: { fontSize }
+  });
+};

package/src/components/typography/LabelSmall.tsx

@@ -5,24 +5,23 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type PartialAllowedColors = Extract<
-    IOColors,
-    | "blue"
-    | "bluegrey"
-    | "red"
-    | "white"
-    | "bluegreyDark"
-    | "grey-700"
-    | "grey-200"
+  IOColors,
+  | "blue"
+  | "bluegrey"
+  | "red"
+  | "white"
+  | "bluegreyDark"
+  | "grey-700"
+  | "grey-200"
 >;
 type AllowedColors = PartialAllowedColors | IOTheme["textBody-tertiary"];
 type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
 type FontSize = "regular" | "small";
 type AllowedFontSize = { fontSize?: FontSize };
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 > &
-    AllowedFontSize;
-
+  AllowedFontSize;
 
 /**
  * Typography component to render `LabelSmall` text with font size {@link fontSize} and fontFamily {@link fontName}.
@@ -30,21 +29,21 @@ type OwnProps = ExternalTypographyProps<
  * @param props`
  * @constructor
  */
-export const LabelSmall: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    const fontSizeMapping: Record<FontSize, number> = { regular: 14, small: 12 };
-    const labelDefaultWeight = "Bold";
-    const labelDefaultcolor = "blue";
+export const LabelSmall: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "TitilliumWeb";
+  const fontSizeMapping: Record<FontSize, number> = { regular: 14, small: 12 };
+  const labelDefaultWeight = "Bold";
+  const labelDefaultcolor = "blue";
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: labelDefaultWeight,
-        defaultColor:labelDefaultcolor,
-        font: fontName,
-        fontStyle: {
-            fontSize: props.fontSize
-                ? fontSizeMapping[props.fontSize]
-                : fontSizeMapping.regular
-        }
-    });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: labelDefaultWeight,
+    defaultColor: labelDefaultcolor,
+    font: fontName,
+    fontStyle: {
+      fontSize: props.fontSize
+        ? fontSizeMapping[props.fontSize]
+        : fontSizeMapping.regular
+    }
+  });
+};

package/src/components/typography/Monospace.tsx

@@ -8,7 +8,7 @@ type AllowedColors = Extract<IOColors, "bluegreyDark" | "bluegrey">;
 type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold" | "Bold">;
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 /**
@@ -17,18 +17,18 @@ type OwnProps = ExternalTypographyProps<
  * @param props`
  * @constructor
  */
-export const Monospace: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "RobotoMono";
-    const fontSize = 16;
+export const Monospace: React.FC<OwnProps> = props => {
+  const fontName: FontFamily = "RobotoMono";
+  const fontSize = 16;
 
-    const monospaceDefaultWeight = "Regular";
-    const monospaceDefaultcolor = "bluegrey";
+  const monospaceDefaultWeight = "Regular";
+  const monospaceDefaultcolor = "bluegrey";
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        defaultWeight: monospaceDefaultWeight,
-        defaultColor: monospaceDefaultcolor,
-        font: fontName,
-        fontStyle: { fontSize }
-    });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: monospaceDefaultWeight,
+    defaultColor: monospaceDefaultcolor,
+    font: fontName,
+    fontStyle: { fontSize }
+  });
+};