@pagopa/io-app-design-system 5.3.3 → 5.3.5

package/lib/typescript/components/textInput/TextInputBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputBase.d.ts","sourceRoot":"","sources":["../../../../src/components/textInput/TextInputBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,SAAS,EAMV,MAAM,OAAO,CAAC;AAoBf,OAAO,EACL,QAAQ,EAKT,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,gBAAgB,EAAuB,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAmB,OAAO,EAAQ,MAAM,UAAU,CAAC;AAI1D,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAEhE,KAAK,cAAc,GAAG,UAAU,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,QAAQ,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC,CAAC;AAsIH,eAAO,MAAM,aAAa,GAAI,+OAoB3B,cAAc,sBAiUhB,CAAC"}
+{"version":3,"file":"TextInputBase.d.ts","sourceRoot":"","sources":["../../../../src/components/textInput/TextInputBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,SAAS,EAMV,MAAM,OAAO,CAAC;AAqBf,OAAO,EACL,QAAQ,EAKT,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,gBAAgB,EAAuB,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAmB,OAAO,EAAQ,MAAM,UAAU,CAAC;AAI1D,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAEhE,KAAK,cAAc,GAAG,UAAU,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC,CAAC,EAAE,MAAM,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,QAAQ,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC,CAAC;AAiJH,eAAO,MAAM,aAAa,GAAI,kRAqB3B,cAAc,sBA+UhB,CAAC"}

package/lib/typescript/components/textInput/TextInputValidation.d.ts

@@ -18,6 +18,7 @@ export declare const TextInputValidation: React.ForwardRefExoticComponent<Omit<{
     icon?: IOIcons;
     rightElement?: React.ReactNode;
     counterLimit?: number;
+    accessibilityAnnounceLimitReached?: string;
     bottomMessage?: string;
     bottomMessageColor?: IOColors;
     disabled?: boolean;

package/lib/typescript/components/textInput/TextInputValidation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputValidation.d.ts","sourceRoot":"","sources":["../../../../src/components/textInput/TextInputValidation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAM/C,OAAO,EAAmB,OAAO,EAAQ,MAAM,UAAU,CAAC;AAG1D,MAAM,MAAM,qBAAqB,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAAC;AAsC/E,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;IAhC9B;;;;OAIG;gBACS,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,qBAAqB;IAC9D;;OAEG;kBACW,MAAM;IACpB;;OAEG;qBACc,QAAQ,GAAG,YAAY;IACxC;;OAEG;8BACuB,MAAM;qDA+IjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"TextInputValidation.d.ts","sourceRoot":"","sources":["../../../../src/components/textInput/TextInputValidation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAM/C,OAAO,EAAmB,OAAO,EAAQ,MAAM,UAAU,CAAC;AAG1D,MAAM,MAAM,qBAAqB,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAAC;AAsC/E,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;IAhC9B;;;;OAIG;gBACS,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,qBAAqB;IAC9D;;OAEG;kBACW,MAAM;IACpB;;OAEG;qBACc,QAAQ,GAAG,YAAY;IACxC;;OAEG;8BACuB,MAAM;qDA+IjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -145,7 +145,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-danger", "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", "otpInputBorder-default", "otpInputBorder-error", "switch-background-off", "switch-background-on", "switch-thumb-color", "selection-border-off", "selection-background-on", "selection-tick", "divider-header", "divider-default", "divider-bottomBar", "pdfViewer-background", "skeleton-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"];
+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-danger", "buttonText-disabled", "listItem-pressed", "textHeading-default", "textHeading-secondary", "textHeading-tertiary", "textBody-default", "textBody-secondary", "textBody-tertiary", "cardBorder-default", "textInputBorder-default", "stepper-default", "icon-default", "icon-decorative", "textInputBorder-default", "textInputLabel-default", "textInputValue-default", "textInputValue-disabled", "otpInputBorder-default", "otpInputBorder-error", "switch-background-off", "switch-background-on", "switch-thumb-color", "selection-border-off", "selection-background-on", "selection-tick", "divider-header", "divider-default", "divider-bottomBar", "pdfViewer-background", "skeleton-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DnB,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,GACjC,YAAY,gBAAgB,KAC3B,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAGhD,CAAC;AAMF,eAAO,MAAM,eAAe;;;;;;;;;;;;CAY1B,CAAC;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;CAgBxB,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,8xCAmEL,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,OAiE1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OA+DzB,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,GAAI,SAAS,UAAU,EAAE,UAAS,MAAU,WAQjE,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DnB,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,GACjC,YAAY,gBAAgB,KAC3B,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAGhD,CAAC;AAMF,eAAO,MAAM,eAAe;;;;;;;;;;;;CAY1B,CAAC;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;CAgBxB,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,izCAmEL,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,OAkE1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OAgEzB,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,GAAI,SAAS,UAAU,EAAE,UAAS,MAAU,WAQjE,CAAC"}

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

@@ -154,7 +154,7 @@ interface IOListItemVisualParams {
 export declare const IOListItemVisualParams: IOListItemVisualParams;
 export declare const IOListItemStyles: {
     listItem: {
-        paddingVertical: 56 | 16 | 4 | 6 | 20 | 12 | 28 | 32 | 8 | 24 | 48 | 40 | 64 | 72 | 80 | 96;
+        paddingVertical: 16 | 4 | 6 | 20 | 12 | 28 | 32 | 8 | 24 | 48 | 40 | 56 | 64 | 72 | 80 | 96;
         paddingHorizontal: 16 | 32 | 8 | 24 | 48;
         marginHorizontal: number;
     };
@@ -196,7 +196,7 @@ interface IOSelectionListItemVisualParams {
 export declare const IOSelectionListItemVisualParams: IOSelectionListItemVisualParams;
 export declare const IOSelectionListItemStyles: {
     listItem: {
-        paddingVertical: 56 | 16 | 4 | 6 | 20 | 12 | 28 | 32 | 8 | 24 | 48 | 40 | 64 | 72 | 80 | 96;
+        paddingVertical: 16 | 4 | 6 | 20 | 12 | 28 | 32 | 8 | 24 | 48 | 40 | 56 | 64 | 72 | 80 | 96;
         paddingHorizontal: 16 | 32 | 8 | 24 | 48;
         marginHorizontal: number;
     };

package/lib/typescript/hooks/useAccordionAnimation.d.ts

@@ -34,6 +34,7 @@ export declare const useAccordionAnimation: ({ defaultExpanded }?: Params) => {
     bodyInnerStyle: {
         position: "absolute";
         padding: 16;
+        width: "100%";
         paddingTop: number;
     };
 };

package/lib/typescript/hooks/useAccordionAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAccordionAnimation.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAccordionAnimation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAUlE,KAAK,MAAM,GAAG;IACZ,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,sBAEnC,MAAW;;IAwDV;;OAEG;;IAEH;;OAEG;;;;;;IAEH;;OAEG;0BArCK,iBAAiB;IAuCzB;;OAEG;;;;;;IAEH;;OAEG;;;;;;CAGN,CAAC"}
+{"version":3,"file":"useAccordionAnimation.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAccordionAnimation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAUlE,KAAK,MAAM,GAAG;IACZ,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,sBAEnC,MAAW;;IAwDV;;OAEG;;IAEH;;OAEG;;;;;;IAEH;;OAEG;0BArCK,iBAAiB;IAuCzB;;OAEG;;;;;;IAEH;;OAEG;;;;;;;CAGN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "5.3.3",
+  "version": "5.3.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/banner/Banner.tsx

@@ -29,7 +29,7 @@ import { BodySmall, buttonTextFontSize, H6, IOText } from "../typography";
 
 /* Styles */
 const sizePictogram: IOPictogramSizeScale = 80;
-const closeButtonDistanceFromEdge: number = 6;
+const closeButtonDistanceFromEdge: number = 10;
 const closeButtonOpacity = 0.6;
 const bannerPadding = IOBannerBigSpacing;
 

package/src/components/claimsSelector/__test__/__snapshots__/ClaimsSelector.test.tsx.snap

@@ -174,6 +174,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (controlled) 1`] = `
             "padding": 16,
             "paddingTop": 0,
             "position": "absolute",
+            "width": "100%",
           },
           {
             "width": "100%",
@@ -703,6 +704,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (uncontrolled) 1`] = `
             "padding": 16,
             "paddingTop": 0,
             "position": "absolute",
+            "width": "100%",
           },
           {
             "width": "100%",
@@ -1163,6 +1165,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (unselectable items) 1`] = `
             "padding": 16,
             "paddingTop": 0,
             "position": "absolute",
+            "width": "100%",
           },
           {
             "width": "100%",

package/src/components/listitems/ListItemHeader.tsx

@@ -3,8 +3,10 @@ import { View } from "react-native";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
+  IOSelectionListItemVisualParams,
   IOSpacingScale,
   IOStyles,
+  IOVisualCostants,
   useIOTheme
 } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
@@ -12,7 +14,8 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { ButtonLink, IconButton } from "../buttons";
 import { IOIcons, Icon } from "../icons";
-import { H6 } from "../typography";
+import { BodySmall, H6 } from "../typography";
+import { VSpacer } from "../spacer";
 
 type ButtonLinkActionProps = {
   type: "buttonLink";
@@ -45,18 +48,20 @@ export type ListItemHeader = WithTestID<{
   label: string;
   numberOfLines?: number;
   endElement?: EndElementProps;
+  description?: string;
   // Accessibility
   accessibilityLabel?: string;
 }> &
   IconProps;
 
-const iconMargin: IOSpacingScale = 8;
+const iconMargin: IOSpacingScale = IOVisualCostants.iconMargin;
 
 export const ListItemHeader = ({
   label,
   iconName,
   iconColor,
   endElement,
+  description,
   accessibilityLabel,
   testID
 }: ListItemHeader) => {
@@ -123,6 +128,14 @@ export const ListItemHeader = ({
           </View>
         )}
       </View>
+      {description && (
+        <View>
+          <VSpacer size={IOSelectionListItemVisualParams.descriptionMargin} />
+          <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
+            {description}
+          </BodySmall>
+        </View>
+      )}
     </View>
   );
 };

package/src/components/searchInput/SearchInput.tsx

@@ -48,11 +48,7 @@ import {
 const inputPaddingHorizontal: IOSpacingScale = 12;
 const inputPaddingClearButton: IOSpacingScale = 8;
 const inputRadius: number = 8;
-const inputBgColorDefault: ColorValue = IOColors["grey-50"];
-const inputBgColorFocused: ColorValue = IOColors["grey-100"];
-const inputColorPlaceholder: ColorValue = IOColors["grey-700"];
 const iconMargin: IOSpacingScale = 8;
-const iconColor: IOColors = "grey-700";
 const iconSize: IOIconSizeScale = 16;
 const iconCloseSize: IOIconSizeScale = 24;
 const inputFontSizePlaceholder: IOFontSize = 14;
@@ -126,6 +122,14 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
     const theme = useIOTheme();
     const inputCaretColor = IOColors[theme["interactiveElem-default"]];
 
+    const inputBgColorDefault: ColorValue =
+      IOColors[theme["appBackground-secondary"]];
+    const inputBgColorFocused: ColorValue =
+      IOColors[theme["appBackground-tertiary"]];
+    const inputColorPlaceholder: ColorValue =
+      IOColors[theme["textBody-tertiary"]];
+    const iconColor: IOColors = theme["textBody-tertiary"];
+
     /* Widths used for the transition:
        - `SearchInput` entire width
        - `Cancel` button */
@@ -258,6 +262,7 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
             accessibilityLabel={accessibilityLabel}
             style={[
               {
+                color: IOColors[theme["textBody-default"]],
                 ...makeFontStyleObject(
                   inputFontSizePlaceholder,
                   newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",

package/src/components/stepper/Stepper.tsx

@@ -1,40 +1,47 @@
 import * as React from "react";
-import { Dimensions, LayoutChangeEvent, View } from "react-native";
-import { IOColors, IOSpacer, IOStyles, IOVisualCostants } from "../../core";
+import { ColorValue, View } from "react-native";
+import {
+  IOColors,
+  IOSpacer,
+  IOStyles,
+  IOVisualCostants,
+  useIOTheme
+} from "../../core";
 
 type StepperProps = {
   steps: number;
   currentStep: number;
 };
-const STEPPER_SPACE: IOSpacer = 4;
-
-const colorMap: Record<string, IOColors> = {
-  active: "blueIO-500"
-};
 
 export const Stepper = ({ steps, currentStep }: StepperProps) => {
-  const [stepWidth, setStepWidth] = React.useState(
-    Dimensions.get("window").width / steps
-  );
-  const onLayout = (e: LayoutChangeEvent) => {
-    setStepWidth(e.nativeEvent.layout.width / steps);
+  const theme = useIOTheme();
+
+  const STEPPER_SPACE: IOSpacer = 4;
+
+  const colorMap: Record<string, ColorValue> = {
+    default: IOColors[theme["stepper-default"]],
+    active: IOColors[theme["interactiveElem-default"]]
   };
 
   return (
     <View style={{ paddingHorizontal: IOVisualCostants.appMarginDefault }}>
       <View
-        onLayout={onLayout}
-        style={[IOStyles.flex, IOStyles.rowSpaceBetween]}
+        style={[
+          IOStyles.flex,
+          IOStyles.rowSpaceBetween,
+          { gap: STEPPER_SPACE }
+        ]}
       >
         {[...Array(steps)].map((_, i) => (
           <View
             key={i}
             style={{
               borderRadius: 2,
+              borderCurve: "continuous",
               borderBottomColor:
-                IOColors[i > currentStep - 1 ? "grey-200" : colorMap.active],
+                i > currentStep - 1 ? colorMap.default : colorMap.active,
               borderBottomWidth: 2,
-              width: stepWidth - STEPPER_SPACE
+              flex: 1
             }}
           />
         ))}

package/src/components/textInput/TextInputBase.tsx

@@ -8,6 +8,7 @@ import React, {
   useState
 } from "react";
 import {
+  AccessibilityInfo,
   ColorValue,
   LayoutChangeEvent,
   Platform,
@@ -55,6 +56,7 @@ type InputTextProps = WithTestID<{
   icon?: IOIcons;
   rightElement?: ReactNode;
   counterLimit?: number;
+  accessibilityAnnounceLimitReached?: string;
   bottomMessage?: string;
   bottomMessageColor?: IOColors;
   disabled?: boolean;
@@ -125,6 +127,7 @@ type InputTextHelperRow = Pick<
   | "bottomMessage"
   | "bottomMessageColor"
   | "inputType"
+  | "textInputProps"
 >;
 
 const HelperRow = ({
@@ -132,7 +135,8 @@ const HelperRow = ({
   counterLimit,
   bottomMessage,
   bottomMessageColor,
-  inputType
+  inputType,
+  textInputProps
 }: InputTextHelperRow) => {
   const theme = useIOTheme();
 
@@ -142,6 +146,13 @@ const HelperRow = ({
     [inputType, value]
   );
 
+  const helperAccessibilityLabel = useMemo(() => {
+    if (textInputProps?.keyboardType === "numeric") {
+      return `${value.split("").join(" ")}, ${valueCount} / ${counterLimit}`;
+    }
+    return `${value}, ${valueCount}`;
+  }, [value, valueCount, counterLimit, textInputProps]);
+
   const bottomMessageColorDefault: IOColors = theme["textBody-tertiary"];
   const bottomMessageColorValue =
     bottomMessageColor ?? bottomMessageColorDefault;
@@ -188,7 +199,9 @@ const HelperRow = ({
       )}
       {counterLimit && (
         <BodySmall
+          accessibilityLiveRegion="polite"
           weight="Regular"
+          accessibilityLabel={helperAccessibilityLabel}
           color={bottomMessageColorValue}
         >{`${valueCount} / ${counterLimit}`}</BodySmall>
       )}
@@ -209,6 +222,7 @@ export const TextInputBase = ({
   icon,
   rightElement,
   counterLimit,
+  accessibilityAnnounceLimitReached,
   bottomMessage,
   bottomMessageColor,
   onBlur,
@@ -328,6 +342,18 @@ export const TextInputBase = ({
       const actualTextLength =
         inputType !== "default" ? text.replace(/\s/g, "").length : text.length;
 
+      // Notify the user when the limit is reached
+      // This is only for iOS, as Android handles it via accessibilityLiveRegion
+      if (
+        counterLimit &&
+        actualTextLength >= counterLimit &&
+        accessibilityAnnounceLimitReached &&
+        Platform.OS === "ios"
+      ) {
+        AccessibilityInfo.announceForAccessibility(
+          accessibilityAnnounceLimitReached
+        );
+      }
       if (counterLimit && actualTextLength > counterLimit) {
         return;
       }
@@ -340,7 +366,7 @@ export const TextInputBase = ({
         onChangeText(text);
       }
     },
-    [counterLimit, onChangeText, inputType]
+    [counterLimit, onChangeText, inputType, accessibilityAnnounceLimitReached]
   );
 
   const onBlurHandler = useCallback(() => {
@@ -434,6 +460,7 @@ export const TextInputBase = ({
           accessibilityState={{ disabled }}
           accessibilityLabel={accessibilityLabel ?? placeholder}
           accessibilityHint={accessibilityHint}
+          accessibilityLiveRegion="polite"
           selectionColor={IOColors[theme["interactiveElem-default"]]} // Caret on iOS
           cursorColor={IOColors[theme["interactiveElem-default"]]} // Caret Android
           maxLength={adjustedMaxLength}
@@ -533,6 +560,7 @@ export const TextInputBase = ({
           bottomMessageColor={bottomMessageColor}
           counterLimit={counterLimit}
           inputType={inputType}
+          textInputProps={textInputProps}
         />
       )}
     </>

package/src/core/IOColors.ts

@@ -227,6 +227,7 @@ const themeKeys = [
   // Design System related
   "cardBorder-default",
   "textInputBorder-default",
+  "stepper-default",
   "icon-default",
   "icon-decorative",
   // Inputs
@@ -254,7 +255,6 @@ const themeKeys = [
   "tab-item-foreground-default",
   "tab-item-foreground-selected",
   "tab-item-background-selected",
-
   // Status
   "errorIcon",
   "errorText",
@@ -300,6 +300,7 @@ export const IOThemeLight: IOTheme = {
   // Design System related
   "cardBorder-default": "grey-100",
   "icon-default": "grey-650",
+  "stepper-default": "grey-200",
   "icon-decorative": "grey-300",
   // Inputs
   "textInputBorder-default": "grey-200",
@@ -368,6 +369,7 @@ export const IOThemeDark: IOTheme = {
   "cardBorder-default": "grey-850",
   "icon-default": "grey-450",
   "icon-decorative": "grey-650",
+  "stepper-default": "grey-700",
   // Inputs
   "textInputBorder-default": "grey-850",
   "textInputLabel-default": "grey-450",

package/src/hooks/useAccordionAnimation.tsx

@@ -101,6 +101,7 @@ const styles = StyleSheet.create({
   accordionBodyContainer: {
     position: "absolute",
     padding: accordionBodySpacing,
+    width: "100%",
     paddingTop: 0
   }
 });