@pagopa/io-app-design-system 1.41.0 → 2.0.0-0

package/src/components/searchInput/SearchInput.tsx

@@ -36,7 +36,7 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
+import { IOFontSize, makeFontStyleObject } from "../../utils/fonts";
 import { ButtonLink } from "../buttons";
 import { IOIconSizeScale, Icon } from "../icons";
 
@@ -51,7 +51,7 @@ const iconMargin: IOSpacingScale = 8;
 const iconColor: IOColors = "grey-700";
 const iconSize: IOIconSizeScale = 16;
 const iconCloseSize: IOIconSizeScale = 24;
-const inputFontSizePlaceholder: number = 14;
+const inputFontSizePlaceholder: IOFontSize = 14;
 const cancelButtonMargin: IOSpacingScale = 16;
 const inputTransitionDuration: number = 250;
 const inputHeightIOS: number = 36;
@@ -324,12 +324,20 @@ const styles = StyleSheet.create({
     marginRight: iconMargin
   },
   placeholder: {
-    fontSize: inputFontSizePlaceholder,
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
+    ...makeFontStyleObject(
+      inputFontSizePlaceholder,
+      "ReadexPro",
+      undefined,
+      "Regular"
+    )
   },
   placeholderLegacy: {
-    fontSize: inputFontSizePlaceholder,
-    ...makeFontStyleObject("Regular", false, "TitilliumSansPro")
+    ...makeFontStyleObject(
+      inputFontSizePlaceholder,
+      "TitilliumSansPro",
+      undefined,
+      "Regular"
+    )
   },
   cancelButton: {
     position: "absolute",

package/src/components/switch/SwitchLabel.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 import { useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import { IOColors, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { Pressable, View } from "react-native";
+import { useIOTheme } from "../../core";
 import { IOStyles } from "../../core/IOStyles";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { HSpacer } from "../spacer/Spacer";
 import { H6 } from "../typography/H6";
 import { AnimatedSwitch } from "./AnimatedSwitch";
@@ -23,17 +22,6 @@ type OwnProps = Props &
   Pick<React.ComponentProps<typeof AnimatedSwitch>, "disabled" | "checked"> &
   Pick<React.ComponentProps<typeof Pressable>, "onPress">;
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const styles = StyleSheet.create({
-  legacyTextValue: {
-    fontSize: 16,
-    lineHeight: 24,
-    color: IOColors.bluegreyDark,
-    flexShrink: 1,
-    ...makeFontStyleObject("Semibold", undefined, "TitilliumSansPro")
-  }
-});
-
 /**
  * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox}
  * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
@@ -47,24 +35,8 @@ export const SwitchLabel = ({
   disabled,
   onValueChange
 }: OwnProps) => {
-  const [toggleValue, setToggleValue] = useState(checked ?? false);
   const theme = useIOTheme();
-
-  const { isExperimental } = useIOExperimentalDesign();
-  const switchLabelText = (
-    <H6 style={{ flexShrink: 1 }} color={theme["textBody-default"]}>
-      {label}
-    </H6>
-  );
-
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacySwitchlabelText = (
-    <Text style={styles.legacyTextValue}>{label}</Text>
-  );
-
-  const switchLabelTextComponent = isExperimental
-    ? switchLabelText
-    : legacySwitchlabelText;
+  const [toggleValue, setToggleValue] = useState(checked ?? false);
 
   const toggleCheckbox = () => {
     triggerHaptic("impactLight");
@@ -99,7 +71,9 @@ export const SwitchLabel = ({
           <AnimatedSwitch checked={checked ?? toggleValue} />
         </View>
         <HSpacer size={8} />
-        {switchLabelTextComponent}
+        <H6 style={{ flexShrink: 1 }} color={theme["textBody-default"]}>
+          {label}
+        </H6>
       </View>
     </Pressable>
   );

package/src/components/tabs/TabItem.tsx

@@ -20,7 +20,7 @@ import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressPro
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
-import { LabelHeader } from "../typography/LabelHeader";
+import { LabelSmall } from "../typography";
 
 type ColorMode = "light" | "dark";
 
@@ -257,7 +257,9 @@ const TabItem = ({
             <HSpacer size={4} />
           </>
         )}
-        <LabelHeader color={foregroundColor}>{label}</LabelHeader>
+        <LabelSmall weight="Semibold" color={foregroundColor}>
+          {label}
+        </LabelSmall>
       </Animated.View>
     </Pressable>
   );

package/src/components/tag/Tag.tsx

@@ -1,16 +1,21 @@
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import React from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
-import { IOColors, IOTagRadius, useIOExperimentalDesign } from "../../core";
+import { Platform, StyleSheet, View } from "react-native";
+import {
+  IOColors,
+  IOTagRadius,
+  useIOExperimentalDesign,
+  useIOTheme
+} from "../../core";
 import {
   IOSpacingScale,
   IOTagHSpacing,
   IOTagVSpacing
 } from "../../core/IOSpacing";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
+import { IOText } from "../typography";
 
 type VariantProps = {
   iconColor: IOColors;
@@ -74,21 +79,6 @@ const styles = StyleSheet.create({
   },
   spacer: {
     width: IOTagIconMargin
-  },
-  label: {
-    fontSize: 12,
-    lineHeight: 16,
-    alignSelf: "center",
-    textTransform: "uppercase",
-    color: IOColors["grey-700"],
-    flexShrink: 1
-  },
-  labelFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  },
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  legacyLabelFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
   }
 });
 
@@ -151,6 +141,7 @@ export const Tag = ({
   customIconProps,
   iconAccessibilityLabel
 }: Tag) => {
+  const theme = useIOTheme();
   const { isExperimental } = useIOExperimentalDesign();
 
   const variantProps = getVariantProps(variant, customIconProps);
@@ -177,16 +168,23 @@ export const Tag = ({
       )}
       {variantProps && text && <View style={styles.spacer} />}
       {text && (
-        <Text
+        <IOText
+          font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+          weight={isExperimental ? "Regular" : "Semibold"}
+          size={12}
+          lineHeight={16}
+          color={theme["textBody-tertiary"]}
           numberOfLines={1}
           ellipsizeMode="tail"
-          style={[
-            styles.label,
-            isExperimental ? styles.labelFont : styles.legacyLabelFont
-          ]}
+          style={{
+            alignSelf: "center",
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            flexShrink: 1
+          }}
         >
           {text}
-        </Text>
+        </IOText>
       )}
     </View>
   );

package/src/components/textInput/TextInputBase.tsx

@@ -26,7 +26,7 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
+import { IOFontSize, makeFontStyleObject } from "../../utils/fonts";
 import { RNTextInputProps, getInputPropsByType } from "../../utils/textInput";
 import { InputType, WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
@@ -62,7 +62,7 @@ const inputPaddingVertical: IOSpacingScale = 8;
 const inputRadius: number = 8;
 const inputTransitionDuration: number = 250;
 const inputLabelScaleFactor: number = 0.75; /* 16pt becomes 12pt */
-const inputLabelFontSize: number = 16;
+const inputLabelFontSize: IOFontSize = 16;
 const inputDisabledOpacity: number = 0.5;
 const inputRightElementMargin: IOSpacingScale = 8;
 const iconColor: IOColors = "grey-300";
@@ -99,7 +99,6 @@ const styles = StyleSheet.create({
     Android where the text input scrolls, if the user apply some
     gestures on it with keyboard open */
     paddingVertical: 0,
-    fontSize: 16,
     marginTop: inputMarginTop,
     height: "100%",
     /* Slightly move the input on the left on Android
@@ -107,11 +106,21 @@ const styles = StyleSheet.create({
     ...(Platform.OS === "android" && { marginLeft: -4 })
   },
   textInputStyleFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
+    ...makeFontStyleObject(
+      inputLabelFontSize,
+      "ReadexPro",
+      undefined,
+      "Regular"
+    )
   },
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
   textInputStyleLegacyFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
+    ...makeFontStyleObject(
+      inputLabelFontSize,
+      "TitilliumSansPro",
+      undefined,
+      "Semibold"
+    )
   },
   textInputLabelWrapper: {
     position: "absolute",
@@ -122,9 +131,13 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   textInputLabel: {
-    ...makeFontStyleObject("Regular", false, "TitilliumSansPro"),
-    color: inputLabelColor,
-    fontSize: inputLabelFontSize
+    ...makeFontStyleObject(
+      inputLabelFontSize,
+      "TitilliumSansPro",
+      undefined,
+      "Regular"
+    ),
+    color: inputLabelColor
   }
 });
 

package/src/components/typography/BaseTypography.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from "react";
-import { StyleProp, Text, TextStyle, View } from "react-native";
+import { Text, TextStyle, View } from "react-native";
 import { IOColors } from "../../core/IOColors";
 import {
   IOFontFamily,
+  IOFontSize,
   IOFontWeight,
   makeFontStyleObject
 } from "../../utils/fonts";
@@ -19,7 +20,7 @@ type BaseTypographyProps = {
 };
 
 type OwnProps = BaseTypographyProps & {
-  fontStyle?: StyleProp<TextStyle>;
+  fontStyle?: TextStyle;
 } & React.ComponentPropsWithRef<typeof Text>;
 
 /**
@@ -41,13 +42,21 @@ const calculateTextStyle = (
  * used to calculate at runtime the platform-dependent styles.
  * This component shouldn't be used in the application but only to compose others `Typography elements`.
  * @param props
+ * @deprecated Use {@link IOText} instead
  * @constructor
  */
 export const BaseTypography = React.forwardRef<View, OwnProps>((props, ref) => {
   const fontStyle = useMemo(
     () =>
-      calculateTextStyle(props.color, props.weight, props.isItalic, props.font),
-    [props.color, props.weight, props.isItalic, props.font]
+      calculateTextStyle(
+        props.color,
+        props.fontStyle?.fontSize as IOFontSize,
+        props.font,
+        props.fontStyle?.lineHeight,
+        props.weight,
+        props.isItalic ? "italic" : "normal"
+      ),
+    [props.color, props.fontStyle, props.font, props.weight, props.isItalic]
   );
 
   const style = props.style

package/src/components/typography/Body.tsx

@@ -1,50 +1,55 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
+import { useIOTheme } from "../../core";
+import { IOFontWeight } from "../../utils/fonts";
 import {
-  IOColors,
-  IOTheme,
-  IOVisualCostants,
-  useIOExperimentalDesign
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+  IOText,
+  IOTextProps,
+  TypographicStyleAsLinkProps,
+  TypographicStyleProps
+} from "./IOText";
 
-type PartialAllowedColors = Extract<
-  IOColors,
-  "bluegreyDark" | "white" | "blue" | "bluegrey" | "bluegreyLight"
->;
-type AllowedColors = PartialAllowedColors | IOTheme["textBody-default"];
-type AllowedWeight = IOFontWeight | "Regular" | "Semibold";
-
-type BodyProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const fontName: FontFamily = "TitilliumSansPro";
+type BodyStyleProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+} & TypographicStyleAsLinkProps;
 
 export const bodyFontSize = 16;
 export const bodyLineHeight = 24;
-export const bodyDefaultColor: AllowedColors = "bluegrey";
-export const bodyDefaultWeight: AllowedWeight = "Regular";
 
 /**
  * `Body` typographic style
  */
-export const Body = React.forwardRef<View, BodyProps>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const Body = forwardRef<View, BodyStyleProps>(
+  (
+    { weight: customWeight, color: customColor, asLink, ...props },
+    ref?: ForwardedRef<View>
+  ) => {
+    const theme = useIOTheme();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const defaultColor = asLink
+      ? theme["interactiveElem-default"]
+      : theme["textBody-tertiary"];
+
+    const BodyProps: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "body" /* iOS only */,
-      defaultWeight: bodyDefaultWeight,
-      defaultColor: bodyDefaultColor,
-      font: fontName,
-      fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "body", // iOS only
+      font: "TitilliumSansPro",
+      weight: customWeight ?? "Regular",
+      size: bodyFontSize,
+      lineHeight: bodyLineHeight,
+      color: customColor ?? defaultColor,
+      ...(asLink
+        ? {
+            accessibilityRole: "link",
+            textStyle: { textDecorationLine: "underline" }
+          }
+        : {})
+    };
+
+    return (
+      <IOText ref={ref} {...BodyProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/BodyMonospace.tsx

@@ -1,46 +1,33 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import {
-  IOVisualCostants,
-  useIOExperimentalDesign,
-  type IOColors
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-
-type AllowedColors = Extract<IOColors, "bluegreyDark" | "bluegrey">;
-type AllowedWeight = Extract<IOFontWeight, "Medium">;
-
-type BodyMonospaceProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const fontName: FontFamily = "DMMono";
-const fontSize = 16;
-const lineHeight = 24;
-const monospaceDefaultWeight = "Medium";
-const monospaceDefaultcolor = "bluegrey";
+import { useIOTheme } from "../../core";
+import { bodyFontSize, bodyLineHeight } from "./Body";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
 /**
  * `BodyMonospace` typographic style
  */
-export const BodyMonospace = React.forwardRef<View, BodyMonospaceProps>(
-  (props, ref) => {
-    const { isExperimental } = useIOExperimentalDesign();
+export const BodyMonospace = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+
+    const BodyProps: IOTextProps = {
+      ...props,
+      dynamicTypeRamp: "body", // iOS only
+      font: "DMMono",
+      weight: "Medium",
+      size: bodyFontSize,
+      lineHeight: bodyLineHeight,
+      color: customColor ?? theme["textBody-tertiary"],
+      textStyle: {
+        letterSpacing: 0.5
+      }
+    };
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>(
-      {
-        ...props,
-        allowFontScaling: isExperimental,
-        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-        dynamicTypeRamp: "body" /* iOS only */,
-        defaultWeight: monospaceDefaultWeight,
-        defaultColor: monospaceDefaultcolor,
-        font: fontName,
-        fontStyle: { fontSize, lineHeight }
-      },
-      ref
+    return (
+      <IOText ref={ref} {...BodyProps}>
+        {props.children}
+      </IOText>
     );
   }
 );

package/src/components/typography/ButtonText.tsx

@@ -1,51 +1,41 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
+import { useIOExperimentalDesign } from "../../core";
 import { IOColors } from "../../core/IOColors";
-import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-export type ButtonTextAllowedColors = IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Regular" | "Bold">;
-
-type ButtonTextProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, ButtonTextAllowedColors>
->;
-
-export const buttonTextFontSize = 16;
+export const buttonTextFontSize: IOFontSize = 16;
 /* Needed to render `ButtonOutline` and`ButtonLink` because they use
 `AnimatedText` for color transition through Reanimated */
-const buttonTextDefaultColor: ButtonTextAllowedColors = "white";
-const buttonTextFontName: IOFontFamily = "ReadexPro";
-const buttonTextDefaultWeight: AllowedWeight = "Regular";
+const defaultColor: IOColors = "white";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyTextFontName: IOFontFamily = "TitilliumSansPro";
-const legacyTextDefaultWeight: AllowedWeight = "Bold";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Bold";
 
 /**
  * `ButtonText` typographic style
  */
-export const ButtonText = React.forwardRef<View, ButtonTextProps>(
-  (props, ref) => {
+export const ButtonText = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const { isExperimental } = useIOExperimentalDesign();
 
-    return useTypographyFactory<AllowedWeight, ButtonTextAllowedColors>(
-      {
-        ...props,
-        allowFontScaling: isExperimental,
-        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-        defaultWeight: isExperimental
-          ? buttonTextDefaultWeight
-          : legacyTextDefaultWeight,
-        defaultColor: buttonTextDefaultColor,
-        font: isExperimental ? buttonTextFontName : legacyTextFontName,
-        fontStyle: {
-          fontSize: buttonTextFontSize
-        }
-      },
-      ref
+    const ButtonTextProps: IOTextProps = {
+      ...props,
+      font: isExperimental ? fontName : legacyFontName,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: buttonTextFontSize,
+      lineHeight: 20,
+      color: customColor ?? defaultColor
+    };
+
+    return (
+      <IOText ref={ref} {...ButtonTextProps}>
+        {props.children}
+      </IOText>
     );
   }
 );

package/src/components/typography/Caption.tsx

@@ -1,45 +1,43 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
+const defaultColor: keyof IOTheme = "textBody-default";
 
-type CaptionProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const captionFontSize = 12;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+export const captionFontSize: IOFontSize = 12;
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
 
 /**
  * `Caption` typographic style
  */
-export const Caption = React.forwardRef<View, CaptionProps>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const Caption = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const CaptionProps: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "caption1" /* iOS only */,
-      defaultWeight,
-      defaultColor,
-      font: isExperimental ? font : legacyFont,
-      fontStyle: {
-        fontSize: captionFontSize,
-        textTransform: "uppercase"
+      dynamicTypeRamp: "caption1", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      size: captionFontSize,
+      weight: fontWeight,
+      color: customColor ?? theme[defaultColor],
+      textStyle: {
+        textTransform: "uppercase",
+        letterSpacing: 0.5
       }
-    },
-    ref
-  );
-});
+    };
+
+    return (
+      <IOText ref={ref} {...CaptionProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);