@pagopa/io-app-design-system 1.17.2 → 1.19.0

package/lib/typescript/components/radio/RadioButtonLabel.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Pressable } from "react-native";
+import { AnimatedRadio } from "./AnimatedRadio";
+type Props = {
+    label: string;
+    onValueChange?: (newValue: boolean) => void;
+};
+type OwnProps = Props & Pick<React.ComponentProps<typeof AnimatedRadio>, "disabled" | "checked"> & Pick<React.ComponentProps<typeof Pressable>, "onPress">;
+/**
+ * A radio button with the automatic state management that uses a {@link AnimatedRadio}
+ * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
+ *
+ * @param props
+ * @constructor
+ */
+export declare const RadioButtonLabel: ({ label, checked, disabled, onValueChange }: OwnProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=RadioButtonLabel.d.ts.map

package/lib/typescript/components/radio/RadioButtonLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/RadioButtonLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAQ,MAAM,cAAc,CAAC;AAK/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IAEd,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C,CAAC;AAMF,KAAK,QAAQ,GAAG,KAAK,GACnB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,GACxE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC;AAE1D;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,gDAK1B,QAAQ,sBAqCV,CAAC"}

package/lib/typescript/components/radio/RadioGroup.d.ts

@@ -1,5 +1,5 @@
 import React, { ComponentProps } from "react";
-import { ListItemRadio } from "../listitems/ListItemRadio";
+import { ListItemRadio } from "../listitems";
 export type RadioItem<T> = {
     id: T;
     value: string;
@@ -8,16 +8,29 @@ export type RadioItem<T> = {
     startImage?: ComponentProps<typeof ListItemRadio>["startImage"];
     loadingProps?: ComponentProps<typeof ListItemRadio>["loadingProps"];
 };
-type Props<T> = {
-    items: ReadonlyArray<RadioItem<T>>;
+export type RadioItemWithAmount<T> = {
+    id: T;
+    label: string;
+    formattedAmountString: string;
+} & ({
+    isSuggested?: false;
+} | {
+    isSuggested: true;
+    suggestReason: string;
+});
+type CommonProps<T> = {
     selectedItem?: T;
     onPress: (selected: T) => void;
 };
-/**
- * A list of radio buttons.
- * The management of the selection is demanded and derived by the `selectedItem` prop.
- * The item with the `id` equal to the `selectedItem` is the active one.
- */
-export declare const RadioGroup: <T>({ items, selectedItem, onPress }: Props<T>) => React.JSX.Element;
+type RadioListItemProps<T> = {
+    type: "radioListItem";
+    items: ReadonlyArray<RadioItem<T>>;
+} & CommonProps<T>;
+type RadioListItemWithAmountProps<T> = {
+    type: "radioListItemWithAmount";
+    items: ReadonlyArray<RadioItemWithAmount<T>>;
+} & CommonProps<T>;
+type Props<T> = RadioListItemProps<T> | RadioListItemWithAmountProps<T>;
+export declare const RadioGroup: <T>(props: Props<T>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=RadioGroup.d.ts.map

package/lib/typescript/components/radio/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACzB,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC;IAChE,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,cAAc,CAAC,CAAC;CACrE,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,IAAI;IACd,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,sEAkBtB,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,aAAa,EAA2B,MAAM,cAAc,CAAC;AAEtE,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACzB,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC;IAChE,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,cAAc,CAAC,CAAC;CACrE,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB,EAAE,MAAM,CAAC;CAC/B,GAAG,CACA;IACE,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,GACD;IACE,WAAW,EAAE,IAAI,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;CACvB,CACJ,CAAC;AACF,KAAK,WAAW,CAAC,CAAC,IAAI;IACpB,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,KAAK,kBAAkB,CAAC,CAAC,IAAI;IAC3B,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;CACpC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;AAEnB,KAAK,4BAA4B,CAAC,CAAC,IAAI;IACrC,IAAI,EAAE,yBAAyB,CAAC;IAChC,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;CAC9C,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;AAEnB,KAAK,KAAK,CAAC,CAAC,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAAG,4BAA4B,CAAC,CAAC,CAAC,CAAC;AA+CxE,eAAO,MAAM,UAAU,2CAKtB,CAAC"}

package/lib/typescript/components/radio/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./AnimatedRadio";
+export * from "./RadioButtonLabel";
 export * from "./RadioGroup";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/radio/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}

package/lib/typescript/components/tabs/TabItem.d.ts

@@ -13,7 +13,8 @@ export type TabItem = WithTestID<{
     accessibilityLabel: string;
     accessibilityHint?: string;
     onPress?: (event: GestureResponderEvent) => void;
+    disabled?: boolean;
 }>;
-declare const TabItem: ({ label, color, selected, fullWidth, accessibilityLabel, accessibilityHint, testID, onPress, icon, iconSelected }: TabItem) => React.JSX.Element;
+declare const TabItem: ({ label, color, selected, fullWidth, accessibilityLabel, accessibilityHint, testID, onPress, disabled, icon, iconSelected }: TabItem) => React.JSX.Element;
 export { TabItem };
 //# sourceMappingURL=TabItem.d.ts.map

package/lib/typescript/components/tabs/TabItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/TabItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAyB,MAAM,cAAc,CAAC;AAU5E,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAQ,MAAM,UAAU,CAAC;AAMzC,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAElC,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAClD,CAAC,CAAC;AAuCH,QAAA,MAAM,OAAO,sHAWV,OAAO,sBAkFT,CAAC;AAiBF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"TabItem.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/TabItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAyB,MAAM,cAAc,CAAC;AAU5E,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAQ,MAAM,UAAU,CAAC;AAMzC,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAElC,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AA0CH,QAAA,MAAM,OAAO,gIAYV,OAAO,sBA4FT,CAAC;AAkBF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/lib/typescript/components/typography/LabelHeader.d.ts

@@ -3,7 +3,7 @@ import { IOFontWeight } from "../../utils/fonts";
 import { IOTheme } from "../../core";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 type AllowedColors = IOTheme["textBody-default"] | "grey-650" | "grey-850" | "white" | "black";
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
 type LabelHeaderProps = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>>;
 export declare const labelHeaderFontSize = 14;
 export declare const labelHeaderLineHeight = 18;

package/lib/typescript/components/typography/LabelHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabelHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAyC,MAAM,YAAY,CAAC;AAE5E,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,KAAK,aAAa,GACd,OAAO,CAAC,kBAAkB,CAAC,GAC3B,UAAU,GACV,UAAU,GACV,OAAO,GACP,OAAO,CAAC;AACZ,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAEtD,KAAK,gBAAgB,GAAG,uBAAuB,CAC7C,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,CAAC;AAEF,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,uBAAuB,EAAE,aACJ,CAAC;AAOnC;;GAEG;AACH,eAAO,MAAM,WAAW,UAAW,gBAAgB,gCAalD,CAAC"}
+{"version":3,"file":"LabelHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAyC,MAAM,YAAY,CAAC;AAE5E,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,KAAK,aAAa,GACd,OAAO,CAAC,kBAAkB,CAAC,GAC3B,UAAU,GACV,UAAU,GACV,OAAO,GACP,OAAO,CAAC;AACZ,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnE,KAAK,gBAAgB,GAAG,uBAAuB,CAC7C,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,CAAC;AAEF,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,uBAAuB,EAAE,aACJ,CAAC;AAQnC;;GAEG;AACH,eAAO,MAAM,WAAW,UAAW,gBAAgB,gCAiBlD,CAAC"}

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

@@ -1,8 +1,12 @@
-import * as React from "react";
+import React from "react";
 type IOExperimentalContextType = {
     isExperimental: boolean;
     setExperimental: (isExperimental: boolean) => void;
 };
+/**
+ * Experimental Context for new UI Representations
+ */
+export declare const IOExperimentalDesignContext: React.Context<IOExperimentalContextType>;
 export declare const useIOExperimentalDesign: () => IOExperimentalContextType;
 type IOExperimentalContextProviderProps = {
     isExperimentaEnabled?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"IODSExperimentalContextProvider.d.ts","sourceRoot":"","sources":["../../../src/core/IODSExperimentalContextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,yBAAyB,GAAG;IAC/B,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;CACpD,CAAC;AAUF,eAAO,MAAM,uBAAuB,iCACW,CAAC;AAEhD,KAAK,kCAAkC,GAAG;IACxC,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,+BAA+B,uCAGzC,MAAM,iBAAiB,CAAC,kCAAkC,CAAC,sBAY7D,CAAC"}
+{"version":3,"file":"IODSExperimentalContextProvider.d.ts","sourceRoot":"","sources":["../../../src/core/IODSExperimentalContextProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,yBAAyB,GAAG;IAC/B,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;CACpD,CAAC;AACF;;GAEG;AACH,eAAO,MAAM,2BAA2B,0CAIpC,CAAC;AAEL,eAAO,MAAM,uBAAuB,iCACW,CAAC;AAEhD,KAAK,kCAAkC,GAAG;IACxC,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,+BAA+B,uCAGzC,MAAM,iBAAiB,CAAC,kCAAkC,CAAC,sBAY7D,CAAC"}

package/lib/typescript/utils/hooks/useErrorShakeAnimation.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react-native-reanimated" />
+export declare const useErrorShakeAnimation: () => {
+    translate: import("react-native-reanimated").SharedValue<number>;
+    animatedStyle: {
+        transform: {
+            translateX: number;
+        }[];
+    };
+    shakeAnimation: () => number;
+};
+//# sourceMappingURL=useErrorShakeAnimation.d.ts.map

package/lib/typescript/utils/hooks/useErrorShakeAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useErrorShakeAnimation.d.ts","sourceRoot":"","sources":["../../../../src/utils/hooks/useErrorShakeAnimation.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,sBAAsB;;;;;;;;CA8BlC,CAAC"}

package/lib/typescript/utils/testing.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+export declare const TestRendererWithExperimentalEnabledContextProvider: (ui: React.ReactElement, options?: TestRenderer.TestRendererOptions) => TestRenderer.ReactTestRenderer;
+//# sourceMappingURL=testing.d.ts.map

package/lib/typescript/utils/testing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/utils/testing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAG/C,eAAO,MAAM,kDAAkD,OACzD,MAAM,YAAY,YACZ,aAAa,mBAAmB,mCAOzC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.17.2",
+  "version": "1.19.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -37,6 +37,8 @@
     "bootstrap": "yarn example && yarn install",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "predeploy": "yarn build-storybook",
+    "deploy-storybook": "gh-pages -d storybook-static",
     "generate:icons": "node scripts/generateNewIcons.js",
     "generate:pictograms": "node scripts/generateNewPictograms.js",
     "generate": "npm-run-all generate:*"
@@ -52,7 +54,7 @@
   "bugs": {
     "url": "https://github.com/pagopa/io-app-design-system/issues"
   },
-  "homepage": "https://github.com/pagopa/io-app-design-system#readme",
+  "homepage": "https://pagopa.github.io/io-app-design-system",
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",

package/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap

@@ -1,5 +1,115 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Test Advice Components - Experimental Enabled Advice Snapshot 1`] = `
+<View
+  style={
+    {
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "marginTop": 4,
+      }
+    }
+  >
+    <RNSVGSvgView
+      accessibilityElementsHidden={true}
+      accessibilityLabel=""
+      accessible={false}
+      align="xMidYMid"
+      bbHeight={20}
+      bbWidth={20}
+      color={4278219750}
+      focusable={false}
+      height={20}
+      importantForAccessibility="no-hide-descendants"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "color": "#0073E6",
+          },
+          {
+            "flex": 0,
+            "height": 20,
+            "width": 20,
+          },
+        ]
+      }
+      tintColor={4278219750}
+      vbHeight={24}
+      vbWidth={24}
+      width={20}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          clipRule={0}
+          d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281 7.5c.8439 0 1.5281-.6842 1.5281-1.5281s-.6842-1.5281-1.5281-1.5281c-.844 0-1.5281.6842-1.5281 1.5281S11.1841 19.5 12.0281 19.5Zm0-15.05618h.0005c.5678 0 1.0281.46029 1.0281 1.02808v8.0046c0 .5678-.4603 1.028-1.0281 1.028h-.0005c-.5678 0-1.0281-.4602-1.0281-1.028V5.4719c0-.56779.4603-1.02808 1.0281-1.02808Z"
+          fill={
+            [
+              2,
+            ]
+          }
+          fillRule={0}
+          propList={
+            [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+  <View
+    style={
+      {
+        "width": 8,
+      }
+    }
+  />
+  <Text
+    allowFontScaling={false}
+    color="bluegrey"
+    defaultColor="bluegrey"
+    defaultWeight="Regular"
+    font="TitilliumWeb"
+    fontStyle={
+      {
+        "fontSize": 16,
+        "lineHeight": 24,
+      }
+    }
+    style={
+      [
+        {
+          "fontSize": 16,
+          "lineHeight": 24,
+        },
+        {
+          "color": "#475A6D",
+          "fontFamily": "Titillium Web",
+          "fontStyle": "normal",
+          "fontWeight": "400",
+        },
+      ]
+    }
+    weight="Regular"
+  >
+    Text
+  </Text>
+</View>
+`;
+
 exports[`Test Advice Components Advice Snapshot 1`] = `
 <View
   style={

package/src/components/Advice/__test__/advice.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import * as TestRenderer from "react-test-renderer";
+import { TestRendererWithExperimentalEnabledContextProvider } from "../../../utils/testing";
 import { Advice } from "../Advice";
 
 describe("Test Advice Components", () => {
@@ -10,3 +11,12 @@ describe("Test Advice Components", () => {
     expect(advice).toMatchSnapshot();
   });
 });
+
+describe("Test Advice Components - Experimental Enabled", () => {
+  it("Advice Snapshot", () => {
+    const advice = TestRendererWithExperimentalEnabledContextProvider(
+      <Advice text={"Text"}></Advice>
+    ).toJSON();
+    expect(advice).toMatchSnapshot();
+  });
+});

package/src/components/accordion/AccordionItem.tsx

@@ -1,27 +1,28 @@
 import React, { useState } from "react";
 import {
-  Text,
-  View,
+  LayoutChangeEvent,
   StyleSheet,
+  Text,
   TouchableWithoutFeedback,
-  LayoutChangeEvent
+  View
 } from "react-native";
+import LinearGradient from "react-native-linear-gradient";
 import Animated, {
   useAnimatedStyle,
   withSpring
 } from "react-native-reanimated";
-import LinearGradient from "react-native-linear-gradient";
-import { IOAccordionRadius, type IOSpacingScale } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
+import { IOAccordionRadius, IOStyles, type IOSpacingScale } from "../../core";
+import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors, hexToRgba } from "../../core/IOColors";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { IOIconSizeScale, IOIcons, Icon } from "../icons/Icon";
 import { H6 } from "../typography";
-import { IOSpringValues } from "../../core/IOAnimations";
-import { Icon } from "../icons/Icon";
 
 export type AccordionItem = {
   id: number;
   title: string;
   body: string | React.ReactNode;
+  icon?: IOIcons;
 };
 
 type AccordionBody = {
@@ -30,10 +31,14 @@ type AccordionBody = {
 };
 
 const accordionBodySpacing: IOSpacingScale = 16;
-const accordionIconMargin: IOSpacingScale = 8;
+const accordionIconMargin: IOSpacingScale = 12;
+const accordionChevronMargin: IOSpacingScale = 8;
 const accordionBorder: IOColors = "grey-200";
 const accordionBackground: IOColors = "white";
 
+// Icon size
+const iconSize: IOIconSizeScale = 24;
+
 /* The code below is a re-adaptation of Dima Portenko's code:
 https://github.com/dimaportenko/reanimated-collapsable-card-tutorial
 */
@@ -68,7 +73,7 @@ export const AccordionBody = ({ children, expanded }: AccordionBody) => {
   );
 };
 
-export const AccordionItem = ({ title, body }: AccordionItem) => {
+export const AccordionItem = ({ title, body, icon }: AccordionItem) => {
   const [expanded, setExpanded] = useState(false);
 
   const onItemPress = () => {
@@ -97,8 +102,24 @@ export const AccordionItem = ({ title, body }: AccordionItem) => {
         onPress={onItemPress}
       >
         <View style={styles.textContainer}>
-          <View style={{ flexShrink: 1, marginRight: accordionIconMargin }}>
-            <H6 color="black">{title}</H6>
+          <View
+            style={[
+              IOStyles.row,
+              IOStyles.alignCenter,
+              {
+                flexShrink: 1,
+                marginRight: accordionChevronMargin
+              }
+            ]}
+          >
+            {icon && (
+              <View style={{ marginRight: accordionIconMargin }}>
+                <Icon name={icon} size={iconSize} color="black" />
+              </View>
+            )}
+            <View style={{ flexShrink: 1 }}>
+              <H6 color="black">{title}</H6>
+            </View>
           </View>
           <Animated.View style={animatedChevron}>
             <Icon name="chevronBottom" color="blueIO-500" />
@@ -157,7 +178,6 @@ const styles = StyleSheet.create({
   },
   textContainer: {
     padding: accordionBodySpacing,
-    flexGrow: 1,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between"

package/src/components/avatar/__test__/__snapshots__/avatar.test.tsx.snap

@@ -1,5 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Test Avatar Components - Experimental Enabled Avatar Snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "borderColor": "rgba(14,15,19,0.1)",
+        "borderWidth": 1,
+        "overflow": "hidden",
+        "resizeMode": "contain",
+      },
+      {
+        "backgroundColor": "#FFFFFF",
+        "borderRadius": 22,
+        "height": 44,
+        "padding": 6,
+        "width": 44,
+      },
+    ]
+  }
+>
+  <Image
+    onError={[Function]}
+    source={
+      {
+        "uri": "",
+      }
+    }
+    style={
+      {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+  />
+</View>
+`;
+
 exports[`Test Avatar Components Avatar Snapshot 1`] = `
 <View
   style={

package/src/components/avatar/__test__/avatar.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import * as TestRenderer from "react-test-renderer";
+import { TestRendererWithExperimentalEnabledContextProvider } from "../../../utils/testing";
 import { Avatar } from "../Avatar";
 
 describe("Test Avatar Components", () => {
@@ -10,3 +11,12 @@ describe("Test Avatar Components", () => {
     expect(avatar).toMatchSnapshot();
   });
 });
+
+describe("Test Avatar Components - Experimental Enabled", () => {
+  it("Avatar Snapshot", () => {
+    const avatar = TestRendererWithExperimentalEnabledContextProvider(
+      <Avatar shape={"circle"} size={"small"} logoUri={{ uri: "" }}></Avatar>
+    ).toJSON();
+    expect(avatar).toMatchSnapshot();
+  });
+});

package/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap

@@ -1,5 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 24,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 8,
+        "paddingVertical": 4,
+      },
+      {
+        "backgroundColor": "#F4F5F8",
+      },
+    ]
+  }
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={1}
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "flexShrink": 1,
+          "fontSize": 12,
+          "lineHeight": 16,
+          "textTransform": "uppercase",
+        },
+        {
+          "fontFamily": "Readex Pro",
+          "fontStyle": "normal",
+          "fontWeight": "400",
+        },
+        {
+          "color": "#555C70",
+        },
+      ]
+    }
+  >
+    text
+  </Text>
+</View>
+`;
+
 exports[`Test Badge Components Badge Snapshot 1`] = `
 <View
   style={

package/src/components/badge/__test__/badge.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import * as TestRenderer from "react-test-renderer";
+import { TestRendererWithExperimentalEnabledContextProvider } from "../../../utils/testing";
 import { Badge } from "../Badge";
 
 describe("Test Badge Components", () => {
@@ -10,3 +11,12 @@ describe("Test Badge Components", () => {
     expect(badge).toMatchSnapshot();
   });
 });
+
+describe("Test Badge Components - Experimental Enabled", () => {
+  it("Badge Snapshot", () => {
+    const badge = TestRendererWithExperimentalEnabledContextProvider(
+      <Badge text={"text"} variant={"default"}></Badge>
+    ).toJSON();
+    expect(badge).toMatchSnapshot();
+  });
+});