npm - @pagopa/io-app-design-system - Versions diffs - 3.1.0 → 4.0.0 - Mend

@pagopa/io-app-design-system 3.1.0 → 4.0.0

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 (228) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/alert/Alert.tsx CHANGED Viewed

@@ -29,9 +29,8 @@ import { IOAlertSpacing } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { VSpacer } from "../spacer";
-import { ButtonText } from "../typography";
+import { Body, ButtonText } from "../typography";
 import { H4 } from "../typography/H4";
-import { Label } from "../typography/Label";
 const iconSize: IOIconSizeScale = 24;
@@ -197,14 +196,14 @@ export const Alert = React.forwardRef<View, AlertType>(
               <VSpacer size={8} />
             </>
           )}
-          <Label
+          <Body
             color={mapVariantStates[variant].foreground}
             weight={"Regular"}
             accessibilityRole="text"
             onTextLayout={onTextLayout}
           >
             {content}
-          </Label>
+          </Body>
           {action && (
             <>
               <VSpacer size={8} />

package/src/components/alert/AlertEdgeToEdge.tsx CHANGED Viewed

@@ -33,7 +33,7 @@ import { IOStyles } from "../../core/IOStyles";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import { Label } from "../typography/Label";
+import { Body } from "../typography";
 const iconSize: IOIconSizeScale = 24;
@@ -161,7 +161,7 @@ export const AlertEdgeToEdge = ({
         />
       </View>
       <View style={IOStyles.flex}>
-        <Label
+        <Body
           color={mapVariantStates[variant].foreground}
           weight={"Regular"}
           accessibilityRole="text"
@@ -182,7 +182,7 @@ export const AlertEdgeToEdge = ({
               {` ${action}`}
             </Text>
           )}
-        </Label>
+        </Body>
       </View>
     </>
   );

package/src/components/banner/Banner.tsx CHANGED Viewed

@@ -33,7 +33,7 @@ import {
   PictogramBleed
 } from "../pictograms";
 import { VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 /* Styles */
 const colorTitle: IOColors = "blueIO-850";
@@ -157,7 +157,7 @@ export const Banner = ({
   onClose,
   accessibilityHint,
   accessibilityLabel,
-  testID,
+  testID
 }: Banner) => {
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
@@ -197,7 +197,9 @@ export const Banner = ({
   /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action
    if they are present. */
-  const fallbackAccessibilityLabel = [title, content, action].filter(Boolean).join(" ");
+  const fallbackAccessibilityLabel = [title, content, action]
+    .filter(Boolean)
+    .join(" ");
   const renderMainBlock = () => (
     <>
@@ -219,9 +221,9 @@ export const Banner = ({
         )}
         {content && (
           <>
-            <LabelSmall color={colorContent} weight={"Regular"}>
+            <BodySmall color={colorContent} weight={"Regular"}>
               {content}
-            </LabelSmall>
+            </BodySmall>
             {action && <VSpacer size={8} />}
           </>
         )}

package/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap CHANGED Viewed

@@ -82,7 +82,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
             {
               "color": "#031344",
               "fontFamily": "Titillio",
-              "fontSize": 18,
+              "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "600",
               "lineHeight": 24,
@@ -546,7 +546,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
                     "fontFamily": "Titillium Sans Pro",
                     "fontSize": 16,
                     "fontStyle": "normal",
-                    "fontWeight": "700",
+                    "fontWeight": "600",
                     "lineHeight": undefined,
                   },
                   {

package/src/components/buttons/ButtonLink.tsx CHANGED Viewed

@@ -238,7 +238,7 @@ export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
             font={isExperimental ? "Titillio" : "TitilliumSansPro"}
-            weight={isExperimental ? "Semibold" : "Bold"}
+            weight={"Semibold"}
             size={buttonTextFontSize}
             style={
               disabled

package/src/components/buttons/ButtonOutline.tsx CHANGED Viewed

@@ -375,7 +375,7 @@ export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
           )}
           <AnimatedIOText
             font={isExperimental ? "Titillio" : "TitilliumSansPro"}
-            weight={isExperimental ? "Semibold" : "Bold"}
+            weight={"Semibold"}
             size={buttonTextFontSize}
             accessible={false}
             accessibilityElementsHidden

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap CHANGED Viewed

@@ -805,7 +805,7 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
             "fontFamily": "Titillium Sans Pro",
             "fontSize": 16,
             "fontStyle": "normal",
-            "fontWeight": "700",
+            "fontWeight": "600",
             "lineHeight": undefined,
           },
           {
@@ -911,7 +911,7 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
             "fontFamily": "Titillium Sans Pro",
             "fontSize": 16,
             "fontStyle": "normal",
-            "fontWeight": "700",
+            "fontWeight": "600",
             "lineHeight": undefined,
           },
           [
@@ -1031,7 +1031,7 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
               "fontFamily": "Titillium Sans Pro",
               "fontSize": 16,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "600",
               "lineHeight": 20,
             },
             {

package/src/components/featureInfo/FeatureInfo.tsx CHANGED Viewed

@@ -1,14 +1,13 @@
 import React, { ReactNode } from "react";
 import { GestureResponderEvent, View } from "react-native";
 import {
-  Body,
+  BodySmall,
   HSpacer,
   IOIconSizeScale,
   IOIcons,
   IOPictogramSizeScale,
   IOPictograms,
   Icon,
-  Label,
   Pictogram,
   VSpacer
 } from "../../components";
@@ -44,9 +43,9 @@ const DEFAULT_PICTOGRAM_SIZE: IOPictogramSizeScale = 48;
 const renderNode = (body: FeatureInfoProps["body"]) => {
   if (typeof body === "string") {
     return (
-      <Body color="grey-700" testID="infoScreenBody">
+      <BodySmall color="grey-700" testID="infoScreenBody">
         {body}
-      </Body>
+      </BodySmall>
     );
   }
@@ -75,7 +74,8 @@ export const FeatureInfo = ({
           This verbose code could be deleted once we got "gap"
           property support */}
           {body && <VSpacer size={4} />}
-          <Label
+          <BodySmall
+            weight="Semibold"
             asLink
             onPress={action.onPress}
             accessible
@@ -83,7 +83,7 @@ export const FeatureInfo = ({
             accessibilityElementsHidden={false}
           >
             {action.label}
-          </Label>
+          </BodySmall>
         </>
       )}
     </View>

package/src/components/layout/HeaderFirstLevel.tsx CHANGED Viewed

@@ -126,6 +126,7 @@ export const HeaderFirstLevel = ({
       <View style={styles.headerInner}>
         <View ref={titleRef} accessible accessibilityRole="header">
           <H3
+            weight="Bold"
             style={{ flexShrink: 1 }}
             numberOfLines={1}
             color={

package/src/components/listitems/ListItemCheckbox.tsx CHANGED Viewed

@@ -24,7 +24,7 @@ import {
 import { AnimatedCheckbox } from "../checkbox/AnimatedCheckbox";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 type Props = {
   value: string;
@@ -188,9 +188,9 @@ export const ListItemCheckbox = ({
               <VSpacer
                 size={IOSelectionListItemVisualParams.descriptionMargin}
               />
-              <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+              <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
                 {description}
-              </LabelSmall>
+              </BodySmall>
             </View>
           )}
         </Animated.View>

package/src/components/listitems/ListItemInfo.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import { ButtonLink, IconButton } from "../buttons";
 import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 type ButtonLinkActionProps = {
   type: "buttonLink";
@@ -84,9 +84,9 @@ export const ListItemInfo = ({
   const itemInfoTextComponent = useMemo(
     () => (
       <View accessible={Platform.OS === "ios"}>
-        <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+        <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
           {label}
-        </LabelSmall>
+        </BodySmall>
         {typeof value === "string" ? (
           <H6 color={theme["textBody-default"]} numberOfLines={numberOfLines}>
             {value}

package/src/components/listitems/ListItemInfoCopy.tsx CHANGED Viewed

@@ -22,7 +22,7 @@ import {
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { H6, LabelSmall } from "../typography";
+import { BodySmall, H6 } from "../typography";
 export type ListItemInfoCopy = WithTestID<{
   label: string;
@@ -69,9 +69,9 @@ export const ListItemInfoCopy = ({
   const listItemInfoCopyContent = (
     <>
-      <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+      <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
         {label}
-      </LabelSmall>
+      </BodySmall>
       {/* Let developer using a custom component (e.g: skeleton) */}
       {typeof value === "string" ? (
         <H6 color={foregroundColor} numberOfLines={numberOfLines}>

package/src/components/listitems/ListItemNav.tsx CHANGED Viewed

@@ -33,7 +33,7 @@ import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { HSpacer, VSpacer } from "../spacer";
-import { Caption, H6, LabelSmall } from "../typography";
+import { Caption, H6, BodySmall } from "../typography";
 type ListItemTopElementProps =
   | {
@@ -161,9 +161,9 @@ export const ListItemNav = ({
       {description && (
         <>
           {typeof description === "string" ? (
-            <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+            <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
               {description}
-            </LabelSmall>
+            </BodySmall>
           ) : (
             description
           )}

package/src/components/listitems/ListItemNavAlert.tsx CHANGED Viewed

@@ -22,7 +22,7 @@ import {
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Icon } from "../icons";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 export type ListItemNavAlert = WithTestID<{
   value: string | React.ReactNode;
@@ -82,9 +82,9 @@ export const ListItemNavAlert = ({
       {description && (
         <>
           {typeof description === "string" ? (
-            <LabelSmall weight="Semibold" color={theme.errorText}>
+            <BodySmall weight="Semibold" color={theme.errorText}>
               {description}
-            </LabelSmall>
+            </BodySmall>
           ) : (
             description
           )}

package/src/components/listitems/ListItemRadio.tsx CHANGED Viewed

@@ -27,7 +27,7 @@ import { IOIcons, Icon } from "../icons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 type ListItemRadioGraphicProps =
   | { icon?: never; paymentLogo: IOLogoPaymentType; uri?: never }
@@ -287,9 +287,9 @@ export const ListItemRadio = ({
               <VSpacer
                 size={IOSelectionListItemVisualParams.descriptionMargin}
               />
-              <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+              <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
                 {description}
-              </LabelSmall>
+              </BodySmall>
             </View>
           )}
         </Animated.View>

package/src/components/listitems/ListItemRadioWithAmount.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ import { IOColors, useIOTheme } from "../../core";
 import { Icon } from "../icons";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 import { PressableListItemBase } from "./PressableListItemsBase";
 export type ListItemRadioWithAmountProps = {
@@ -55,22 +55,22 @@ export const ListItemRadioWithAmount = ({
       }}
     >
       <View style={{ flexShrink: 1 }}>
-        <LabelSmall
+        <BodySmall
           weight="Semibold"
           numberOfLines={1}
           color={theme["textBody-default"]}
         >
           {label}
-        </LabelSmall>
+        </BodySmall>
         {isSuggested && (
           <>
             <VSpacer size={4} />
             <View style={styles.rowCenter}>
               <Icon name="sparkles" size={16} color={suggestColor} />
               <HSpacer size={4} />
-              <LabelSmall weight="Regular" color={suggestColor}>
+              <BodySmall weight="Regular" color={suggestColor}>
                 {suggestReason}
-              </LabelSmall>
+              </BodySmall>
             </View>
           </>
         )}

package/src/components/listitems/ListItemSwitch.tsx CHANGED Viewed

@@ -1,18 +1,18 @@
 import React, { useMemo } from "react";
 import { GestureResponderEvent, Platform, Switch, View } from "react-native";
-import { WithTestID } from "../../utils/types";
 import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
   useIOTheme
 } from "../../core";
+import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { HSpacer, VSpacer } from "../spacer";
 import { NativeSwitch } from "../switch/NativeSwitch";
-import { H6, LabelMini, LabelSmall } from "../typography";
+import { BodySmall, H6, LabelMini } from "../typography";
 type PartialProps = WithTestID<{
   label: string;
@@ -178,9 +178,9 @@ export const ListItemSwitch = React.memo(
         {description && (
           <>
             <VSpacer size={IOSelectionListItemVisualParams.descriptionMargin} />
-            <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+            <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
               {description}
-            </LabelSmall>
+            </BodySmall>
           </>
         )}
         {action && (

package/src/components/listitems/ListItemTransaction.tsx CHANGED Viewed

@@ -21,7 +21,7 @@ import { IOIconSizeScale, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
 import { VSpacer } from "../spacer";
 import { HStack } from "../stack";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 import {
   PressableBaseProps,
   PressableListItemBase
@@ -146,16 +146,16 @@ export const ListItemTransaction = ({
           </View>
         )}
         <View style={{ flexShrink: 1 }}>
-          <LabelSmall
+          <BodySmall
             numberOfLines={numberOfLines}
             color={theme["textBody-default"]}
             weight="Semibold"
           >
             {title}
-          </LabelSmall>
-          <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+          </BodySmall>
+          <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
             {subtitle}
-          </LabelSmall>
+          </BodySmall>
         </View>
       </HStack>
       <HStack style={{ alignItems: "center" }}>

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap CHANGED Viewed

@@ -262,7 +262,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -384,7 +384,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -551,7 +551,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -780,7 +780,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -1082,7 +1082,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -1366,7 +1366,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -1774,7 +1774,7 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
                 "fontFamily": "Titillium Sans Pro",
                 "fontSize": 16,
                 "fontStyle": "normal",
-                "fontWeight": "700",
+                "fontWeight": "600",
                 "lineHeight": 20,
               },
             ]

package/src/components/modules/ModuleAttachment.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ import { Badge } from "../badge";
 import { Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { HStack, VStack } from "../stack";
-import { Label } from "../typography";
+import { Body } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
@@ -66,13 +66,13 @@ const ModuleAttachmentContent = ({
         space={4}
         style={{ alignItems: "flex-start", flexShrink: 1, flexGrow: 1 }}
       >
-        <Label
+        <Body
           weight="Semibold"
           numberOfLines={2}
           color={theme["interactiveElem-default"]}
         >
           {title}
-        </Label>
+        </Body>
         <Badge text={format.toUpperCase()} variant="default" />
       </VStack>
       <IconOrActivityIndicatorComponent />

package/src/components/modules/ModuleCheckout.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ import {
 import { ButtonLink } from "../buttons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { HStack, VStack } from "../stack";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
@@ -70,9 +70,9 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
       <View style={{ flexGrow: 1, flexShrink: 1 }}>
         <H6 color={theme["textBody-default"]}>{title}</H6>
         {subtitle && (
-          <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+          <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
             {subtitle}
-          </LabelSmall>
+          </BodySmall>
         )}
       </View>
     </HStack>

package/src/components/modules/ModuleCredential.tsx CHANGED Viewed

@@ -20,7 +20,7 @@ import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { HStack } from "../stack/Stack";
-import { LabelSmall } from "../typography";
+import { BodySmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import {
   PressableModuleBase,
@@ -89,7 +89,7 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
         {/* Graphical assets */}
         {iconComponent ?? imageComponent}
-        <LabelSmall
+        <BodySmall
           color={theme["interactiveElem-default"]}
           weight="Semibold"
           numberOfLines={2}
@@ -97,7 +97,7 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
           style={{ flexShrink: 1 }}
         >
           {label}
-        </LabelSmall>
+        </BodySmall>
       </HStack>
       <View style={IOStyles.row}>
         {badge ? (

package/src/components/modules/ModuleNavigation.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { HStack, VStack } from "../stack";
-import { Chip, LabelSmall } from "../typography";
+import { LabelMini, BodySmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import {
   PressableModuleBase,
@@ -79,7 +79,7 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
           {iconComponent ?? imageComponent}
           <View style={{ flexShrink: 1 }}>
-            <LabelSmall
+            <BodySmall
               color={theme["interactiveElem-default"]}
               weight="Semibold"
               numberOfLines={2}
@@ -87,9 +87,11 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
               style={{ flexShrink: 1 }}
             >
               {title}
-            </LabelSmall>
+            </BodySmall>
             {subtitle && (
-              <Chip color={theme["textBody-tertiary"]}>{subtitle}</Chip>
+              <LabelMini weight="Regular" color={theme["textBody-tertiary"]}>
+                {subtitle}
+              </LabelMini>
             )}
           </View>
         </HStack>