@pagopa/io-app-design-system 4.5.4 → 4.5.5

package/lib/typescript/components/typography/markdown/MdH1.d.ts

@@ -8,6 +8,6 @@ export declare const MdH1: React.ForwardRefExoticComponent<Omit<IOTextProps, "st
     textStyle?: import("../IOText").IOTextStyle | undefined;
     style?: import("../IOText").IOTextStyle | undefined;
 } & {
-    color?: "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-300" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-500" | "blue-50" | undefined;
+    color?: "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-300" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-500" | "blue-50" | undefined;
 } & React.RefAttributes<View>>;
 //# sourceMappingURL=MdH1.d.ts.map

package/lib/typescript/components/typography/markdown/MdH2.d.ts

@@ -8,6 +8,6 @@ export declare const MdH2: React.ForwardRefExoticComponent<Omit<IOTextProps, "st
     textStyle?: import("../IOText").IOTextStyle | undefined;
     style?: import("../IOText").IOTextStyle | undefined;
 } & {
-    color?: "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-300" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-500" | "blue-50" | undefined;
+    color?: "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-300" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-500" | "blue-50" | undefined;
 } & React.RefAttributes<View>>;
 //# sourceMappingURL=MdH2.d.ts.map

package/lib/typescript/components/typography/markdown/MdH3.d.ts

@@ -8,6 +8,6 @@ export declare const MdH3: React.ForwardRefExoticComponent<Omit<IOTextProps, "st
     textStyle?: import("../IOText").IOTextStyle | undefined;
     style?: import("../IOText").IOTextStyle | undefined;
 } & {
-    color?: "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-300" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-500" | "blue-50" | undefined;
+    color?: "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-300" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-500" | "blue-50" | undefined;
 } & React.RefAttributes<View>>;
 //# sourceMappingURL=MdH3.d.ts.map

package/lib/typescript/core/IOColors.d.ts

@@ -16,7 +16,6 @@ export declare const IOColors: {
     "blueIO-600": string;
     "blueIO-500": string;
     "blueIO-400": string;
-    "blueIO-450": string;
     "blueIO-200": string;
     "blueIO-150": string;
     "blueIO-100": string;
@@ -105,7 +104,6 @@ export declare const IOColorsTints: {
     "blueIO-850": string;
     "blueIO-600": string;
     "blueIO-500": string;
-    "blueIO-450": string;
     "blueIO-200": string;
     "blueIO-150": string;
     "blueIO-100": string;
@@ -151,7 +149,7 @@ export declare const IOColorsExtra: {
     "blueItalia-50": string;
 };
 export type IOColorsExtra = keyof typeof IOColorsExtra;
-declare const themeKeys: readonly ["appBackground-primary", "appBackground-secondary", "appBackground-tertiary", "appBackground-accent", "interactiveElem-default", "interactiveElem-pressed", "interactiveElem-disabled", "interactiveOutline-disabled", "neutralButton-default", "neutralButton-pressed", "neutralButton-disabled", "buttonText-default", "buttonText-disabled", "listItem-pressed", "textHeading-default", "textHeading-secondary", "textHeading-tertiary", "textBody-default", "textBody-secondary", "textBody-tertiary", "cardBorder-default", "textInputBorder-default", "icon-default", "icon-decorative", "textInputBorder-default", "textInputLabel-default", "textInputValue-default", "textInputValue-disabled", "divider-header", "divider-default", "divider-bottomBar", "pdfViewer-background", "errorIcon", "errorText", "successIcon", "successText", "warningIcon", "infoIcon", "pictogram-hands", "pictogram-tint-main", "pictogram-tint-secondary", "pictogram-tint-tertiary"];
+declare const themeKeys: readonly ["appBackground-primary", "appBackground-secondary", "appBackground-tertiary", "appBackground-accent", "interactiveElem-default", "interactiveElem-pressed", "interactiveElem-disabled", "interactiveOutline-disabled", "neutralButton-default", "neutralButton-pressed", "neutralButton-disabled", "buttonText-default", "buttonText-disabled", "listItem-pressed", "textHeading-default", "textHeading-secondary", "textHeading-tertiary", "textBody-default", "textBody-secondary", "textBody-tertiary", "cardBorder-default", "textInputBorder-default", "icon-default", "icon-decorative", "textInputBorder-default", "textInputLabel-default", "textInputValue-default", "textInputValue-disabled", "divider-header", "divider-default", "divider-bottomBar", "pdfViewer-background", "tab-item-border-default", "tab-item-foreground-default", "tab-item-foreground-selected", "tab-item-background-selected", "errorIcon", "errorText", "successIcon", "successText", "warningIcon", "infoIcon", "pictogram-hands", "pictogram-tint-main", "pictogram-tint-secondary", "pictogram-tint-tertiary"];
 export type IOTheme = {
     [K in (typeof themeKeys)[number]]: IOColors;
 };

package/lib/typescript/core/IOColors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IOColors.d.ts","sourceRoot":"","sources":["../../../src/core/IOColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,cAAc,MAAM,8BAA8B,CAAC;AAyB/D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DnB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAE7C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAgB3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,eACrB,gBAAgB,KAC3B,eAAe,qBAAqB,CAAC,CAAC,QAAQ,CAGhD,CAAC;AAYF,eAAO,MAAM,cAAc;;;;CAI1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAExD,eAAO,MAAM,eAAe;;;;;;;;;;;CAW1B,CAAC;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAexB,CAAC;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAEvD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;CAqBzB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,cAAc,CAAC;AAEzD,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAC5C,cAAc,EACd,WAAW,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CACzD,CAAC;AACF,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAC5C,cAAc,EACd,WAAW,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CACzD,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;CAMzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAMvD,QAAA,MAAM,SAAS,07BAkDL,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG;KACnB,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,QAAQ;CAC5C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAiD1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAKhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OA+CzB,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;CAiBrC,CAAC;AAEH,MAAM,MAAM,0BAA0B,GACpC,MAAM,OAAO,0BAA0B,CAAC;AAE1C,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,WAAW,CAAC,0BAA0B,CAAC,EACvC,cAAc,CAkBf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,MAAM,OAAO,yBAAyB,CAAC;AAM/E;;;;GAIG;AAEH,eAAO,MAAM,SAAS,YAAa,UAAU,YAAW,MAAM,WAQ7D,CAAC"}
+{"version":3,"file":"IOColors.d.ts","sourceRoot":"","sources":["../../../src/core/IOColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,cAAc,MAAM,8BAA8B,CAAC;AAyB/D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DnB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAE7C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAgB3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,eACrB,gBAAgB,KAC3B,eAAe,qBAAqB,CAAC,CAAC,QAAQ,CAGhD,CAAC;AAYF,eAAO,MAAM,cAAc;;;;CAI1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAExD,eAAO,MAAM,eAAe;;;;;;;;;;;CAW1B,CAAC;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;CAcxB,CAAC;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAEvD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;CAqBzB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,cAAc,CAAC;AAEzD,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAC5C,cAAc,EACd,WAAW,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CACzD,CAAC;AACF,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAC5C,cAAc,EACd,WAAW,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CACzD,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;CAMzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAMvD,QAAA,MAAM,SAAS,ojCAwDL,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG;KACnB,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,QAAQ;CAC5C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAsD1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAKhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OAoDzB,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;CAiBrC,CAAC;AAEH,MAAM,MAAM,0BAA0B,GACpC,MAAM,OAAO,0BAA0B,CAAC;AAE1C,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,WAAW,CAAC,0BAA0B,CAAC,EACvC,cAAc,CAkBf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,MAAM,OAAO,yBAAyB,CAAC;AAM/E;;;;GAIG;AAEH,eAAO,MAAM,SAAS,YAAa,UAAU,YAAW,MAAM,WAQ7D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "4.5.4",
+  "version": "4.5.5",
   "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/layout/HeaderSecondLevel.tsx

@@ -78,6 +78,9 @@ type CommonProps = WithTestID<{
   variant?: "neutral" | "contrast";
   backgroundColor?: string;
   ignoreSafeAreaMargin?: boolean;
+  // Prevents screen readers from focusing on the title when other elements are focused
+  // (e.g. when an input text is throwing an error)
+  ignoreAccessibilityCheck?: boolean;
 }>;
 
 interface Base extends CommonProps {
@@ -151,7 +154,8 @@ export const HeaderSecondLevel = ({
   testID,
   firstAction,
   secondAction,
-  thirdAction
+  thirdAction,
+  ignoreAccessibilityCheck = false
 }: HeaderSecondLevel) => {
   const scrollOffset = useScrollViewOffset(
     (animatedRef as AnimatedRef<Animated.ScrollView>) ||
@@ -299,7 +303,9 @@ export const HeaderSecondLevel = ({
           ref={titleRef}
           accessibilityElementsHidden={!isTitleAccessible}
           importantForAccessibility={
-            isTitleAccessible ? "yes" : "no-hide-descendants"
+            isTitleAccessible && !ignoreAccessibilityCheck
+              ? "yes"
+              : "no-hide-descendants"
           }
           accessible={isTitleAccessible}
           accessibilityLabel={title}

package/src/components/tabs/TabItem.tsx

@@ -1,27 +1,29 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
-  SharedValue,
   interpolateColor,
   useAnimatedStyle,
   useDerivedValue,
   useReducedMotion,
-  useSharedValue,
   withSpring
 } from "react-native-reanimated";
 import {
   IOColors,
   IOSpringValues,
   hexToRgba,
-  useIOExperimentalDesign
+  useIOExperimentalDesign,
+  useIOTheme
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { BodySmall } from "../typography";
+import { IOText } from "../typography";
 
 type ColorMode = "light" | "dark";
 
+type TabItemState = "default" | "selected" | "disabled";
+
 export type TabItem = WithTestID<{
   label: string;
   color?: ColorMode;
@@ -42,12 +44,10 @@ type ColorStates = {
   border: {
     default: string;
     selected: string;
-    disabled: string;
   };
   background: {
     default: string;
     selected: string;
-    pressed: string;
   };
   foreground: {
     default: IOColors;
@@ -56,42 +56,7 @@ type ColorStates = {
   };
 };
 
-const mapColorStates: Record<NonNullable<TabItem["color"]>, ColorStates> = {
-  light: {
-    border: {
-      default: IOColors["grey-300"],
-      selected: IOColors["blueIO-500"],
-      disabled: IOColors["grey-300"]
-    },
-    background: {
-      default: IOColors.white,
-      selected: IOColors["blueIO-50"],
-      pressed: IOColors.white
-    },
-    foreground: {
-      default: "black",
-      selected: "blueIO-500",
-      disabled: "grey-700"
-    }
-  },
-  dark: {
-    border: {
-      default: hexToRgba(IOColors.white, 0),
-      selected: IOColors.white,
-      disabled: hexToRgba(IOColors.white, 0.5)
-    },
-    background: {
-      default: hexToRgba(IOColors.white, 0),
-      selected: IOColors.white,
-      pressed: IOColors.white
-    },
-    foreground: {
-      default: "white",
-      selected: "black",
-      disabled: "white"
-    }
-  }
-};
+const DISABLED_OPACITY = 0.5;
 
 const mapLegacyColorStates: Record<
   NonNullable<TabItem["color"]>,
@@ -99,14 +64,12 @@ const mapLegacyColorStates: Record<
 > = {
   light: {
     border: {
-      default: IOColors["grey-300"],
-      selected: IOColors["blue-500"],
-      disabled: hexToRgba(IOColors.white)
+      default: IOColors["grey-450"],
+      selected: IOColors["blue-500"]
     },
     background: {
       default: IOColors.white,
-      selected: hexToRgba(IOColors["blue-500"], 0.1),
-      pressed: IOColors.white
+      selected: hexToRgba(IOColors["blue-500"], 0.1)
     },
     foreground: {
       default: "black",
@@ -117,13 +80,11 @@ const mapLegacyColorStates: Record<
   dark: {
     border: {
       default: hexToRgba(IOColors.white, 0),
-      selected: IOColors.white,
-      disabled: hexToRgba(IOColors.white, 0.5)
+      selected: IOColors.white
     },
     background: {
-      default: "#ffffff00",
-      selected: IOColors.white,
-      pressed: IOColors.white
+      default: hexToRgba(IOColors.white, 0.1),
+      selected: IOColors.white
     },
     foreground: {
       default: "white",
@@ -146,77 +107,113 @@ const TabItem = ({
   icon,
   iconSelected
 }: TabItem) => {
-  const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
-    useScaleAnimation();
+  const { onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("medium");
+  const theme = useIOTheme();
   const reducedMotion = useReducedMotion();
 
   const { isExperimental } = useIOExperimentalDesign();
-  const colors = useMemo(
-    () =>
-      isExperimental ? mapColorStates[color] : mapLegacyColorStates[color],
-    [isExperimental, color]
-  );
 
-  const foregroundColor = useMemo(
-    () =>
-      colors.foreground[
-        selected ? "selected" : disabled ? "disabled" : "default"
-      ],
-    [colors.foreground, selected, disabled]
+  const mapColorStates: Record<
+    NonNullable<TabItem["color"]>,
+    ColorStates
+  > = useMemo(
+    () => ({
+      light: {
+        border: {
+          default: IOColors[theme["tab-item-border-default"]],
+          selected: hexToRgba(
+            IOColors[theme["tab-item-foreground-selected"]],
+            0.5
+          )
+        },
+        background: {
+          default: hexToRgba(
+            IOColors[theme["tab-item-background-selected"]],
+            0
+          ),
+          selected: hexToRgba(
+            IOColors[theme["tab-item-background-selected"]],
+            0.25
+          ),
+          pressed: IOColors[theme["appBackground-primary"]]
+        },
+        foreground: {
+          default: theme["tab-item-foreground-default"],
+          selected: theme["tab-item-foreground-selected"],
+          disabled: "grey-700"
+        }
+      },
+      dark: {
+        border: {
+          default: hexToRgba(IOColors.white, 0),
+          selected: IOColors.white
+        },
+        background: {
+          default: hexToRgba(IOColors.white, 0.1),
+          selected: IOColors.white,
+          pressed: IOColors.white
+        },
+        foreground: {
+          default: "white",
+          selected: "black",
+          disabled: "white"
+        }
+      }
+    }),
+    [theme]
   );
 
-  const borderColor = useMemo(
+  const colors = useMemo(
     () =>
-      colors.border[selected ? "selected" : disabled ? "disabled" : "default"],
-    [colors.border, selected, disabled]
+      isExperimental ? mapColorStates[color] : mapLegacyColorStates[color],
+    [isExperimental, mapColorStates, color]
   );
 
-  const opaquePressedBackgroundColor = hexToRgba(
-    colors.background.pressed,
-    0.1
-  );
+  const itemState: TabItemState = selected
+    ? "selected"
+    : disabled
+    ? "disabled"
+    : "default";
 
-  const isSelected: SharedValue<number> = useSharedValue(0);
-  const progressSelected = useDerivedValue(() =>
-    withSpring(isSelected.value, IOSpringValues.selection)
+  const foregroundColor = useMemo(
+    () => colors.foreground[itemState],
+    [colors.foreground, itemState]
   );
 
-  useEffect(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isSelected.value = selected ? 1 : 0;
-  }, [isSelected, selected]);
+  const selectedStateTransition = useDerivedValue(() =>
+    withSpring(selected ? 1 : 0, IOSpringValues.selection)
+  );
 
   // Interpolate animation values from `pressed` values
-  const animatedStyle = useAnimatedStyle(() => {
-    // Link color states to the pressed states
-    const pressedBackgroundColor = interpolateColor(
-      progress.value,
-      [0, 1],
-      [colors.background.default, opaquePressedBackgroundColor]
-    );
-
-    const selectedBackgroundColor = interpolateColor(
-      progressSelected.value,
-      [0, 1],
-      [opaquePressedBackgroundColor, colors.background.selected]
-    );
-
-    const selectedBorderColor = interpolateColor(
-      progressSelected.value,
-      [0, 1],
-      [colors.border.default, colors.border.selected]
-    );
-
-    return {
-      backgroundColor: selected
-        ? selectedBackgroundColor
-        : pressedBackgroundColor,
-      borderColor: selected ? selectedBorderColor : borderColor
-    };
-  }, [progress, progressSelected, selected]);
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      backgroundColor: interpolateColor(
+        selectedStateTransition.value,
+        [0, 1],
+        [colors.background.default, colors.background.selected]
+      ),
+      borderColor: interpolateColor(
+        selectedStateTransition.value,
+        [0, 1],
+        [colors.border.default, colors.border.selected]
+      )
+    }),
+    [selectedStateTransition]
+  );
 
   const activeIcon = selected ? iconSelected ?? icon : icon;
 
+  const handleOnPress = useCallback(
+    (event: GestureResponderEvent) => {
+      if (onPress) {
+        ReactNativeHapticFeedback.trigger("impactLight");
+        onPress(event);
+      }
+    },
+    [onPress]
+  );
+
   return (
     <Pressable
       accessibilityLabel={accessibilityLabel}
@@ -224,7 +221,7 @@ const TabItem = ({
       accessibilityRole={"button"}
       accessibilityState={{ selected }}
       testID={testID}
-      onPress={onPress}
+      onPress={handleOnPress}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       accessible={true}
@@ -234,18 +231,23 @@ const TabItem = ({
         style={[
           styles.container,
           { columnGap: 4 },
-          !reducedMotion && scaleAnimatedStyle,
+          !disabled && !reducedMotion && scaleAnimatedStyle,
           animatedStyle,
           fullWidth && styles.fullWidth,
-          disabled && styles.disabled
+          disabled && { opacity: DISABLED_OPACITY }
         ]}
       >
         {activeIcon && (
           <Icon name={activeIcon} color={foregroundColor} size={16} />
         )}
-        <BodySmall weight="Semibold" color={foregroundColor}>
+        <IOText
+          size={14}
+          font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+          weight="Semibold"
+          color={foregroundColor}
+        >
           {label}
-        </BodySmall>
+        </IOText>
       </Animated.View>
     </Pressable>
   );
@@ -265,8 +267,7 @@ const styles = StyleSheet.create({
   },
   fullWidth: {
     alignSelf: "auto"
-  },
-  disabled: { opacity: 0.5 }
+  }
 });
 
 export { TabItem };

package/src/components/textInput/TextInputValidation.tsx

@@ -86,12 +86,12 @@ export const TextInputValidation = ({
   }, [onFocus]);
 
   const labelError = useMemo(
-    () => (!isValid && errMessage ? errMessage : bottomMessage),
+    () => (isValid === false && errMessage ? errMessage : bottomMessage),
     [isValid, errMessage, bottomMessage]
   );
 
   const labelErrorColor: IOColors | undefined = useMemo(
-    () => (!isValid && errMessage ? theme.errorText : undefined),
+    () => (isValid === false && errMessage ? theme.errorText : undefined),
     [isValid, errMessage, theme.errorText]
   );
 

package/src/core/IOColors.ts

@@ -40,7 +40,6 @@ export const IOColors = asIOColors({
   "blueIO-600": "#0932B6",
   "blueIO-500": "#0B3EE3",
   "blueIO-400": "#3C65E9",
-  "blueIO-450": "#2351E6" /* Dark mode */,
   "blueIO-200": "#9DB2F4",
   "blueIO-150": "#B6C5F7",
   "blueIO-100": "#CED8F9",
@@ -153,7 +152,6 @@ export const IOColorsTints = asIOColors({
   "blueIO-850": IOColors["blueIO-850"],
   "blueIO-600": IOColors["blueIO-600"],
   "blueIO-500": IOColors["blueIO-500"],
-  "blueIO-450": IOColors["blueIO-450"],
   "blueIO-200": IOColors["blueIO-200"],
   "blueIO-150": IOColors["blueIO-150"],
   "blueIO-100": IOColors["blueIO-100"],
@@ -253,6 +251,12 @@ const themeKeys = [
   "divider-default",
   "divider-bottomBar",
   "pdfViewer-background",
+  // Tab Item
+  "tab-item-border-default",
+  "tab-item-foreground-default",
+  "tab-item-foreground-selected",
+  "tab-item-background-selected",
+
   // Status
   "errorIcon",
   "errorText",
@@ -308,6 +312,11 @@ export const IOThemeLight: IOTheme = {
   "divider-default": "grey-200",
   "divider-bottomBar": "grey-200",
   "pdfViewer-background": "grey-700",
+  // Tab Item
+  "tab-item-border-default": "grey-300",
+  "tab-item-foreground-default": "black",
+  "tab-item-foreground-selected": "blueIO-500",
+  "tab-item-background-selected": "blueIO-200",
   // Status
   errorIcon: "error-600",
   errorText: "error-600",
@@ -335,7 +344,7 @@ export const IOThemeDark: IOTheme = {
   "appBackground-primary": "black",
   "appBackground-secondary": "grey-850",
   "appBackground-tertiary": "grey-700",
-  "interactiveElem-default": "blueIO-450",
+  "interactiveElem-default": "blueIO-400",
   "interactiveElem-pressed": "blueIO-500",
   "interactiveElem-disabled": "grey-700",
   "interactiveOutline-disabled": "grey-450",
@@ -361,6 +370,11 @@ export const IOThemeDark: IOTheme = {
   "textInputLabel-default": "grey-450",
   "textInputValue-default": "white",
   "textInputValue-disabled": "grey-100",
+  // Tab Item
+  "tab-item-border-default": "grey-700",
+  "tab-item-foreground-default": "grey-200",
+  "tab-item-foreground-selected": "blueIO-200",
+  "tab-item-background-selected": "blueIO-400",
   // Layout
   "divider-header": "grey-850",
   "divider-default": "grey-850",