@pagopa/io-app-design-system 1.9.3 → 1.11.0

package/src/components/pictograms/svg/PictogramSuccess.tsx

@@ -2,31 +2,35 @@ import React from "react";
 import Svg, { Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramSuccess = ({ size, color, ...props }: SVGPictogramProps) => (
+const PictogramSuccess = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
   <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m113.74 163 1.1-8.41 5.3-3.55 5.06-.4 1.57-4.88.83-5.55 5.66-3.03 7.35-.79 5.07 1.07 4.32 5.48 2.47-19.83 3.92-8.98 5.78-5.32 4.53-.75c.29-2.62.44-5.29.44-7.99C167.13 59.71 134.42 27 94.07 27 53.72 27 21 59.71 21 100.07c0 40.36 32.71 73.07 73.07 73.07 7.71 0 15.14-1.2 22.12-3.42l-2.45-6.72Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M142.56 202.43c-1.34 0-2.8-.15-4.38-.44-11.03-2.03-18.79-11.47-21.33-19.38-1.55-4.83-1.17-8.91 1.04-11.2l2.88 2.78c-1.1 1.15-1.15 3.97-.11 7.2 2.19 6.81 8.83 14.93 18.24 16.67 4.38.81 7.34.32 8.79-1.45 2.45-2.98.69-9.42-.19-11.65l3.72-1.48c.42 1.04 3.94 10.34-.43 15.67-1.79 2.19-4.56 3.29-8.24 3.29l.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M146.3 185.03c-3.04 0-6.72-.53-11.06-1.59-17.32-4.23-21.57-16.39-22.56-23.26-.54-3.75.43-7.46 2.67-10.18 2.92-3.55 6.82-4.24 10.97-1.93l-1.94 3.5c-2.44-1.36-4.27-1.06-5.94.97-1.52 1.85-2.18 4.43-1.8 7.07.85 5.87 4.51 16.27 19.55 19.94 10.44 2.55 15.19 1.37 16.16-.59.72-1.45-.4-3.66-1.49-4.54l2.51-3.11c2.54 2.05 4.19 6.14 2.56 9.42-1.41 2.85-4.64 4.28-9.63 4.28v.02Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M152.04 174.91c-4.89 0-11.5-3.06-20.94-9.63-5.64-3.93-8.3-10.28-7.68-18.38.57-7.5 6.31-13.6 13.35-14.17 2.09-.17 6.42-.52 9.73 2.42 2.47 2.19 3.81 5.75 3.99 10.57l-4 .15c-.14-3.69-1.03-6.29-2.65-7.73-1.88-1.67-4.47-1.61-6.75-1.42-5.1.41-9.26 4.92-9.68 10.48-.51 6.7 1.5 11.68 5.98 14.8 9.75 6.79 16.31 9.65 20.07 8.76 1.4-.33 2.45-1.21 3.29-2.76.81-1.49-.55-3.8-1.42-5.05-4.33-6.17-14.65-12.19-18.35-11.63l-.6-3.95c6.01-.92 17.61 6.71 22.22 13.28 3.12 4.44 2.63 7.49 1.67 9.26-1.38 2.55-3.36 4.15-5.88 4.75-.73.17-1.51.26-2.34.26l-.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M199.72 163.99c-7.16 0-14.29-1.78-21.16-5.33-6.79-3.51-11.4-10.13-12.34-17.7-.51-4.15.37-9.46 1.22-14.59 1.01-6.09 2.16-12.98.19-15.3-.33-.39-.94-.9-2.49-.9-2.91 0-5.32 1.04-7.39 3.19-7.96 8.27-7.27 29.08-7.26 29.29l-4 .15c-.03-.92-.75-22.73 8.37-32.21 2.82-2.93 6.27-4.41 10.27-4.41 2.38 0 4.24.78 5.54 2.31 3.16 3.73 1.97 10.92.7 18.54-.8 4.85-1.64 9.86-1.2 13.44.79 6.36 4.51 11.69 10.21 14.64 11.84 6.13 24.52 6.48 36.67 1.03l1.64 3.65c-6.25 2.8-12.63 4.2-18.98 4.2h.01ZM194.04 212.26c-6.74 0-14.48-.86-23.27-3.07-13.54-3.42-23.05-8.39-23.44-8.6l1.87-3.54c.37.2 37.68 19.53 67.92 6.96l1.54 3.69c-5.69 2.36-13.86 4.55-24.61 4.55l-.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M88.22 123.5c-.4 0-.79-.16-1.07-.45L61.92 97.31c-.58-.59-.57-1.54.02-2.12.59-.58 1.54-.57 2.12.02l24.13 24.62 42.36-45.48c.56-.61 1.52-.64 2.12-.08.61.56.64 1.51.08 2.12l-43.43 46.63c-.28.3-.67.47-1.08.48h-.02Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

package/src/components/pictograms/svg/PictogramTime.tsx

@@ -2,39 +2,39 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramTime = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramTime = ({ size, colorValues, ...props }: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m116.73 131.98-7.11-12.28H99.54l6.33 14.49M110.77 152.41l7.72 18.06 13.29.65-9.93-22.6"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M56.2599 142.14c-.12-.51-2.72-12.5 10.58-20.76 12.44-7.72 94.8501-1.08 104.2101-.29l-.33 3.99c-25.06-2.1-92.1801-6.24-101.7601-.29-10.8 6.7-8.88 16.07-8.79 16.47l-3.9.89-.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M57.02 159.18c-2.94-9.01-2.66-16.03.81-20.85 4.31-5.99 11.85-6.13 12.17-6.13l.04 4c-.06 0-5.88.15-8.99 4.49-2.66 3.73-2.74 9.54-.23 17.25l-3.8 1.24Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M72.0502 178.26c-5.62 0-10.23-5.56-10.43-5.81-4.01-5.29-5.5-10.54-4.47-15.67 1.76-8.73 10.23-13.71 10.59-13.92l2 3.46c-.07.04-7.29 4.32-8.68 11.27-.79 3.95.45 8.11 3.69 12.38.98 1.19 4.33 4.4 7.48 4.28l.17 4h-.37l.02.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M88.9398 188.36c-2.88 0-5.83-.62-8.64-1.86-5.47-2.39-8.92-5.98-10.27-10.66-2.65-9.18 3.96-19.07 4.24-19.49l3.31 2.25-1.65-1.12 1.66 1.12c-.06.09-5.84 8.78-3.71 16.15 1.01 3.48 3.71 6.2 8.03 8.09 3.82 1.67 7.89 1.98 11.46.86 4.55-1.42 4.25-3.7 4.14-4.56-.23-1.75-1.57-3.32-3.5-4.1-2.22-.9-4.48-1.24-6.7-1.02l-.4-3.98c2.88-.29 5.77.15 8.59 1.29 3.27 1.32 5.5502 4.11 5.9702 7.29.32 2.42-.16 6.79-6.9202 8.9-1.8.56-3.69.84-5.61.84Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M184.7 177.18c-47.03-7.67-89.26-2.06-89.68-2.01l-.54-3.96c.43-.06 43.22-5.74 90.87 2.02l-.64 3.95h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M116.891 152.83c4.995-1.604 7.493-7.738 5.578-13.701-1.914-5.963-7.516-9.497-12.512-7.893-4.995 1.604-7.493 7.738-5.578 13.701 1.914 5.963 7.516 9.497 12.512 7.893Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M115.06 152.41c-1.62 0-3.26-.49-4.77-1.44-2.2-1.39-3.89-3.62-4.74-6.29-1.8-5.59.66-11.4 5.47-12.95.79-.25 1.63.18 1.89.97.25.79-.18 1.63-.97 1.89-3.24 1.04-4.82 5.15-3.53 9.17.64 1.99 1.88 3.65 3.49 4.67 1.52.96 3.2 1.22 4.72.74.79-.25 1.63.18 1.89.97.25.79-.18 1.63-.97 1.89-.81.26-1.63.39-2.47.39l-.01-.01ZM93.79 109.44c-.4 0-.8-.16-1.1-.48L62.47 76.38c-.56-.61-.53-1.56.08-2.12s1.56-.53 2.12.08l30.22 32.58c.56.61.53 1.56-.08 2.12-.29.27-.65.4-1.02.4ZM107.37 101.48c-.81 0-1.48-.65-1.5-1.46l-1.29-47.48c-.02-.83.63-1.52 1.46-1.54.81-.05 1.52.63 1.54 1.46l1.29 47.48c.02.83-.63 1.52-1.46 1.54h-.04Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

package/src/components/pictograms/svg/PictogramUmbrellaNew.tsx

@@ -2,47 +2,51 @@ import React from "react";
 import Svg, { Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramUmbrellaNew = ({ size, color, ...props }: SVGPictogramProps) => (
+const PictogramUmbrellaNew = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
   <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M107.085-.00176c8.154 4.82452 16.613 7.64993 26.423 5.57086.846 1.7059 1.647 3.27854 2.412 4.8689 4.086 8.5651 9.458 16.0907 17.405 21.6793 6.048 4.2559 12.878 6.2728 20.51 7.339 1.008 3.6517 1.818 7.3922 3.078 10.9817 5.993 17.0858 17.144 29.2581 34.774 35.1577.855.2844 1.656.7197 2.835 1.2439-.702 18.9514 6.857 33.6914 23.786 43.3314-2.637 8.77-2.979 17.193 1.701 25.438-4.617 2.275-9.333 1.342-13.779 1.253-24.344-.462-47.364-6.095-68.225-18.792-25.352-15.424-44.395-36.455-55.222-64.0336-9.3681-23.8471-8.1172-47.641 2.457-70.95509.432-.95957 1.089-1.82141 1.863-3.10084l-.018.01777Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M109.854 11.4438c.308-.7527 1.174-1.1168 1.936-.8134 5.193 2.0678 10.161 3.0476 15.22 3.0476.402 0 .773-.0003 1.13-.0163.594-.0266 1.147.2986 1.406.8271 5.076 10.3451 11.441 18.072 19.412 23.6721 5.074 3.5598 10.843 6.0292 17.921 7.5916.544.12.974.5301 1.115 1.0626.528 1.9974 1.092 4.0131 1.81 6.0443l.001.0035c6.628 18.908 18.825 31.837 36.306 38.6155.542.2103.91.7141.942 1.2888.921 16.9038 8.391 30.6088 21.912 40.2658.666.475.815 1.394.334 2.051-.482.658-1.412.806-2.077.33-14.018-10.012-21.89-24.212-23.082-41.5496-17.882-7.2088-30.368-20.7035-37.146-40.0383-.65-1.8408-1.176-3.6538-1.649-5.407-7.018-1.6462-12.891-4.2005-18.11-7.8623l-.001-.0006c-8.22-5.7753-14.755-13.644-19.945-23.9397-.09.0003-.178.0003-.264.0003h-.015c-5.47 0-10.815-1.0638-16.332-3.2608-.762-.3034-1.131-1.1596-.824-1.9122Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M30.7695 235.468c-6.1197-6.042-6.1197-15.869 0-21.911l17.2971-17.077 3.8158 3.768-17.2971 17.077c-4.0138 3.962-4.0138 10.413 0 14.375 4.0138 3.963 10.5474 3.963 14.5612 0l3.8158 3.768c-6.1196 6.041-16.0731 6.041-22.1928 0ZM128.876 111.262l-32.2061 31.797 3.8181 3.769 32.207-31.796-3.819-3.77Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M3.29384 203.162 0 200.523c7.29864-8.876 71.8704-86.54 93.2353-79.565 5.8317 1.901 9.3057 4.949 10.3407 9.045 2.232 8.894-8.2168 19.636-13.2385 24.798l-.9.924-3.0778-2.888.9089-.942c4.1488-4.264 13.8504-14.242 12.1764-20.888-.6569-2.612-3.1948-4.656-7.5506-6.068-7.7126-2.515-37.6721 16.232-88.60056 78.223Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M92.4699 174.411c-9.5755 2.506-18.6921-2.95-22.8319-7.881-3.3478-3.989-2.8888-9.889 1.062-13.434 4.5627-4.096 12.5813-5.091 21.4009 4.389l-3.1228 2.835c-5.7057-6.131-11.4565-7.677-15.4163-4.123-2.2589 2.035-2.5468 5.393-.6479 7.659 4.0588 4.833 13.9133 10.324 23.1378 4.442 2.7899-1.777 4.3733-4.016 4.8413-6.85 1.251-7.623-6.0472-16.721-6.1192-16.81l3.3028-2.63c.351.426 8.5584 10.617 7.0104 20.089-.657 4.016-2.916 7.285-6.7314 9.72-1.9439 1.244-3.9148 2.079-5.8677 2.594h-.018Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M79.0336 194.02c-5.1568 1.351-10.0885.48-14.4803-2.612-4.3558-3.065-6.5517-6.726-6.5337-10.884.036-9.125 11.1415-16.935 11.6185-17.254l2.4388 3.429c-2.7178 1.893-9.7915 8.077-9.8095 13.852 0 2.754 1.548 5.189 4.7518 7.445 4.4638 3.137 9.5305 3.252 15.0742.329 8.7116-4.602 15.0563-15.06 14.9123-19.591l4.2383-.134c.207 6.531-7.2442 18.179-17.1527 23.412-1.7009.898-3.3928 1.564-5.0667 2.008h.009Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M67.0458 207.463c-8.3696 2.185-15.1102-.391-19.169-7.437-3.1769-5.517-3.7979-10.422-1.827-14.571 3.4469-7.268 13.5624-9.125 13.9853-9.205l.747 4.123c-.072.008-8.3876 1.563-10.8894 6.868-1.35 2.843-.783 6.45 1.6739 10.715 3.5278 6.122 9.0985 7.632 17.0181 4.611 6.0477-2.301 11.3664-6.655 15.3892-12.581l3.6359-5.357 3.5278 2.327-3.6358 5.367c-4.5088 6.646-10.5205 11.541-17.3872 14.154-1.0439.399-2.0699.728-3.0688.986Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="m53.3313 224.754-3.0598-2.905c22.9668-23.501 15.4252-17.495 15.6232-17.832l3.6808 2.079c-.189.337 7.0917-5.225-16.2442 18.658Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M93.3641 80.6211c.542.6099.4808 1.5383-.1366 2.0737L59.0022 112.37c-.6174.536-1.5573.475-2.0993-.134-.542-.61-.4809-1.539.1365-2.074l34.2253-29.6758c.6175-.5353 1.5574-.4749 2.0994.1349ZM145.714 157.555c.542.61.481 1.538-.137 2.073l-34.225 29.676c-.618.535-1.558.475-2.1-.135s-.48-1.538.137-2.073l34.225-29.676c.618-.536 1.558-.475 2.1.135Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

package/src/components/pictograms/svg/PictogramUpdateOS.tsx

@@ -2,31 +2,35 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramUpdateOS = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramUpdateOS = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M165.031 108.18c-14.23 0-27.7-8.57-33.23-22.59-7.21-18.3 1.81-39.05 20.11-46.26 15.97-6.29 34.17-.32 43.27 14.2.44.7.23 1.63-.47 2.07-.7.44-1.63.23-2.07-.47-8.34-13.29-25.01-18.76-39.63-13-16.76 6.6-25.02 25.61-18.42 42.37 3.2 8.12 9.37 14.5 17.37 17.98 8 3.48 16.88 3.63 25 .43.77-.3 1.64.07 1.95.85.3.77-.08 1.64-.85 1.95-4.28 1.69-8.69 2.48-13.03 2.48v-.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M194.551 56.72h-.15l-29.63-2.98c-.82-.08-1.42-.82-1.34-1.64.08-.82.83-1.42 1.64-1.34l28.08 2.83 1.65-27.16c.05-.83.74-1.45 1.59-1.41.83.05 1.46.76 1.41 1.59l-1.74 28.72c-.02.41-.21.79-.53 1.05-.27.23-.62.36-.97.36l-.01-.02Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="m109.551 195.61 2.22 6.32c1.05 3 3.75 5.12 6.91 5.44l68.7 6.89c6.17.62 10.77-5.58 8.38-11.31l-67.02-160.6c-1.14-2.73-3.66-4.63-6.6-4.98l-70.9704-8.39c-6.21-.73-10.92 5.48-8.54 11.26l42.18 102.47 15.9304.67 12.81 2.83 7.83 3.15 2.92 1.92 2.6 1.57.54 2.51.37 2.51-1.56 4.33s-.52.72-.72.96c-.2.24 1.37 2.03 1.37 2.03l3.65 2.98.78 1.55.25 2.44s.78 1.51 0 1.82c-.78.31-1.93 2.04-1.93 2.04l-1.81 1.44v.87s-2.31.19-2.85.35c-.54.16-1 .92-1 .92l2.13 4.76.04 2.58-2.75 2.64-1.78 2.21s-3.44.69-4.84 1.24-3.62 1.28-3.62 1.28l-3.62 1.31v-.01Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M103.371 197.78c-17.9701 0-30.2301-13.82-30.3901-14.01-15.02-16.06-22.11-32.19-21.03-47.87 1.38-20.02 15.56-31.75 16.17-32.24l2.52 3.11c-.13.11-13.48 11.2-14.71 29.47-.98 14.51 5.76 29.61 20.02 44.86.87 1 20.54 23.03 46.3901 6.78.03-.02.06-.04.09-.05.64-.37 2.36-1.67 2.46-3.16.1-1.48-1.42-2.98-2.71-3.98l2.45-3.16c3.02 2.33 4.45 4.84 4.25 7.45-.28 3.76-3.83 5.96-4.45 6.31-7.55 4.74-14.67 6.49-21.06 6.49Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M114.581 182.07c-8.24 0-16.4299-1.63-17.9599-1.95l.82-3.92c.06.01 6.4599 1.34 13.5499 1.73 8.67.48 14.71-.63 17.04-3.14.27-.46 1.42-2.61.26-4.69-1.4-2.52-7.02-6.65-28.8399-6.01l-.12-4c18.3199-.53 29.2499 2.2 32.4899 8.12 2.44 4.47-.41 8.75-.53 8.92-.05.07-.1.13-.15.19-3.23 3.68-9.91 4.74-16.56 4.74v.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="m125.981 165.61-2.79-2.87c.12-.12 2.97-2.98 1.78-6.24-1.34-3.69-8.59-10.28-42.0101-12.98l.32-3.99c27.2401 2.2 42.5301 7.46 45.4601 15.65 2.04 5.69-2.58 10.24-2.77 10.43h.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
   </Svg>
 );

package/src/components/pictograms/svg/originals/PIctogramBleedCameraDenied.svg

@@ -0,0 +1,30 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <path
+    d="M19 165.98v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-15.47c0-3.8-12.11-6.43-19-7.3-6.89-.87-15.24-7.83-15.24-7.83-10.32-3.9-.42-12.65-.42-12.65l2.72-.43c-11.11-.83-14.36-8.24-14.36-8.24l7.39-6.17-3.53-1.39-2.05-4.02 3.44-2.66 1.38-.98s4.14-1.27 4.79-1.33c.65-.06 6.02.68 6.02.68l7.73.98s11.4 3.27 11.63 3.34c.23.07 9.5 4.71 9.5 4.71V80.21c0-5.87-4.76-10.63-10.63-10.63H29.63C23.76 69.57 19 74.33 19 80.21V165.98ZM62.2699 49h-32.72c-1.5795 0-2.86 1.2805-2.86 2.86v9.97c0 1.5795 1.2805 2.86 2.86 2.86h32.72c1.5796 0 2.86-1.2805 2.86-2.86v-9.97c0-1.5795-1.2804-2.86-2.86-2.86Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M91.0899 143.19c-.38 0-.77-.15-1.06-.44-.59-.59-.59-1.54 0-2.12l26.0901-26.09c.59-.59 1.54-.59 2.12 0 .59.59.59 1.54 0 2.12l-26.0901 26.09c-.29.29-.68.44-1.06.44Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M117.18 143.19c-.38 0-.77-.15-1.06-.44l-26.0901-26.09c-.59-.59-.59-1.54 0-2.12.59-.59 1.54-.59 2.12 0l26.0901 26.09c.59.59.59 1.54 0 2.12-.29.29-.68.44-1.06.44Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M104.14 166.76c-21.02 0-38.12-17.1-38.12-38.12 0-21.02 17.1-38.12 38.12-38.12 21.02 0 38.12 17.1 38.12 38.12 0 21.02-17.1 38.12-38.12 38.12Zm0-73.23c-19.36 0-35.12 15.75-35.12 35.12 0 19.37 15.75 35.12 35.12 35.12 19.37 0 35.12-15.75 35.12-35.12 0-19.37-15.75-35.12-35.12-35.12ZM179.56 95.54h-23.67c-2.78 0-5.04-2.26-5.04-5.04v-9.23c0-2.78 2.26-5.04 5.04-5.04h23.67c2.78 0 5.04 2.26 5.04 5.04v9.23c0 2.78-2.26 5.04-5.04 5.04Zm-23.67-16.32c-1.13 0-2.04.92-2.04 2.04v9.23c0 1.13.92 2.04 2.04 2.04h23.67c1.13 0 2.04-.92 2.04-2.04v-9.23c0-1.13-.92-2.04-2.04-2.04h-23.67Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M240.21 133.29c-9.7-6.57-37.08-23.63-47.18-23.63v-4.2c13.44 0 48.07 23.36 49.53 24.35l-2.36 3.48h.01ZM176.84 132.12c-19.38-2.54-29-6.34-30.27-11.94-.78-3.43 1.93-6.24 3.66-7.36 9.65-6.19 40.15 5.89 43.59 7.29l-1.58 3.89c-12.24-4.96-33.85-11.43-39.74-7.65 0 0-2.16 1.51-1.84 2.91.21.89 2.47 5.51 26.72 8.69l-.55 4.16.01.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M176.68 146c-28.52-5.99-32.37-11.92-32.78-15.85-.55-5.29 6.04-8.35 6.79-8.68l1.69 3.84c-1.49.66-4.5 2.61-4.31 4.41.15 1.44 2.73 6.56 29.46 12.17l-.86 4.11h.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M240.52 185.71c-38.99-17.68-53.2-21.59-71.19-26.54l-2.55-.7c-9.02-2.49-14.19-6.14-15.38-10.85-1.36-5.4 3.12-9.75 3.31-9.94l2.9 3.04-1.45-1.52 1.46 1.51s-2.92 2.88-2.14 5.9c.78 3.04 5.19 5.81 12.42 7.81l2.54.7c18.17 5 32.52 8.95 71.81 26.76l-1.73 3.82v.01Z"
+    fill="#0B3EE3"
+  />
+</svg>

package/src/components/pictograms/svg/originals/PictogramBleedCameraRequest.svg

@@ -0,0 +1,30 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <path
+    d="M20 165.98v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-14.83c0-.39-9.03-5.96-15.92-6.83-6.89-.87-18.52-5.24-18.52-5.24-10.32-3.9-.23-16.35-.23-16.35l1.09 2.1c-11.11-.83-14.35-9.17-14.35-9.17l7.68-7.01-2.88-.69-.78-5.36 2.85-2.77 1.38-.98s4.14-1.27 4.79-1.33c.65-.06 6.02.68 6.02.68l7.73.98s11.4 3.27 11.63 3.34c.23.07 9.5 4.71 9.5 4.71V80.21c0-5.87-4.76-10.63-10.63-10.63H30.63C24.76 69.57 20 74.33 20 80.21V165.98Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M240.33 133.99c-9.7-6.57-37.08-23.63-47.18-23.63v-4.2c13.44 0 48.07 23.36 49.53 24.35l-2.36 3.48h.01ZM176.97 132.82c-19.38-2.54-29-6.34-30.27-11.94-.78-3.43 1.93-6.24 3.66-7.36 9.65-6.19 40.15 5.89 43.59 7.29l-1.58 3.89c-12.24-4.96-33.85-11.43-39.74-7.65 0 0-2.16 1.51-1.84 2.91.21.89 2.47 5.51 26.72 8.69l-.55 4.16.01.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M176.81 146.69c-28.52-5.99-32.37-11.92-32.78-15.85-.55-5.29 6.04-8.35 6.79-8.68l1.69 3.84c-1.49.66-4.5 2.61-4.31 4.41.15 1.44 2.73 6.56 29.46 12.17l-.86 4.11h.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M240.65 186.41c-38.99-17.68-53.2-21.59-71.19-26.54l-2.55-.7c-9.02-2.49-14.19-6.14-15.38-10.85-1.36-5.4 3.12-9.75 3.31-9.94l2.91 3.03s-2.92 2.88-2.14 5.9c.78 3.04 5.19 5.81 12.42 7.81l2.54.7c18.17 5 32.52 8.95 71.81 26.76l-1.73 3.82v.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M63.2699 49h-32.72c-1.5795 0-2.86 1.2805-2.86 2.86v9.97c0 1.5795 1.2805 2.86 2.86 2.86h32.72c1.5796 0 2.86-1.2805 2.86-2.86v-9.97c0-1.5795-1.2804-2.86-2.86-2.86Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M105.01 140.34c-.83 0-1.5-.67-1.5-1.5v-36.9c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v36.9c0 .83-.67 1.5-1.5 1.5ZM105.14 155.34c2.027 0 3.67-1.643 3.67-3.67s-1.643-3.67-3.67-3.67-3.67 1.643-3.67 3.67 1.643 3.67 3.67 3.67Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M105.14 166.76c-21.02 0-38.12-17.1-38.12-38.12 0-21.02 17.1-38.12 38.12-38.12 21.02 0 38.12 17.1 38.12 38.12 0 21.02-17.1 38.12-38.12 38.12Zm0-73.23c-19.36 0-35.12 15.75-35.12 35.12 0 19.37 15.75 35.12 35.12 35.12 19.37 0 35.12-15.75 35.12-35.12 0-19.37-15.75-35.12-35.12-35.12ZM180.56 95.54h-23.67c-2.78 0-5.04-2.26-5.04-5.04v-9.23c0-2.78 2.26-5.04 5.04-5.04h23.67c2.78 0 5.04 2.26 5.04 5.04v9.23c0 2.78-2.26 5.04-5.04 5.04Zm-23.67-16.32c-1.13 0-2.04.92-2.04 2.04v9.23c0 1.13.92 2.04 2.04 2.04h23.67c1.13 0 2.04-.92 2.04-2.04v-9.23c0-1.13-.92-2.04-2.04-2.04h-23.67Z"
+    fill="#00C5CA"
+  />
+</svg>

package/src/components/pictograms/svg/originals/PictogramCameraDenied.svg

@@ -0,0 +1,34 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <path
+    d="M7 160.98v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-8.43c0-.39-11.44-17.76-18.33-18.63-6.89-.87-15.91-3.54-15.91-3.54-10.32-3.9-.42-12.65-.42-12.65l2.72-.43c-11.11-.83-12.16-11.46-12.16-11.46l5.18-2.95-1.41-2.87-.67-2.83-.07-2.37 1.38-.98s4.14-1.27 4.79-1.33c.65-.06 6.02.68 6.02.68l7.73.98s11.4 3.27 11.63 3.34c.23.07 9.5 4.71 9.5 4.71V75.21c0-5.87-4.76-10.63-10.63-10.63H17.63C11.76 64.57 7 69.33 7 75.21V160.98Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M229.74 154.75c-14.46-19.53-40.46-50.52-48.72-50.52v-4c12.97 0 47.98 46.8 51.93 52.14l-3.21 2.38ZM165.6 125.62c-18.46-2.42-27.63-6.04-28.84-11.37-.74-3.27 1.84-5.94 3.48-7.01 9.19-5.89 38.25 5.61 41.53 6.94l-1.5 3.71c-11.66-4.73-32.25-10.89-37.85-7.29 0 0-2.06 1.44-1.75 2.77.2.85 2.36 5.25 25.46 8.28l-.52 3.97h-.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M165.45 138.84c-27.17-5.71-30.83-11.35-31.22-15.1-.53-5.04 5.75-7.95 6.47-8.27l1.62 3.66c-1.42.63-4.29 2.49-4.1 4.2.15 1.37 2.6 6.25 28.07 11.6l-.82 3.91h-.02Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M201.77 196.03c-2.43-3.36-4.81-6.87-7.33-10.59-11.38-16.79-23.15-34.16-38.58-35.71-8.27-.83-13.23-3.3-14.76-7.35-2.06-5.44 3.13-11.13 3.35-11.37l2.94 2.71c-1.04 1.14-3.53 4.66-2.55 7.25.93 2.43 4.98 4.13 11.42 4.77 17.29 1.74 29.59 19.89 41.49 37.45 2.5 3.69 4.86 7.18 7.26 10.49l-3.24 2.34v.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M50.2699 44h-32.72c-1.5795 0-2.86 1.2805-2.86 2.86v9.97c0 1.5795 1.2805 2.86 2.86 2.86h32.72c1.5796 0 2.86-1.2805 2.86-2.86v-9.97c0-1.5795-1.2804-2.86-2.86-2.86Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M79.0899 138.19c-.38 0-.77-.15-1.06-.44-.59-.59-.59-1.54 0-2.12l26.0901-26.09c.59-.59 1.54-.59 2.12 0 .59.59.59 1.54 0 2.12l-26.0901 26.09c-.29.29-.68.44-1.06.44Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M105.18 138.19c-.38 0-.77-.15-1.06-.44l-26.0901-26.09c-.59-.59-.59-1.54 0-2.12.59-.59 1.54-.59 2.12 0l26.0901 26.09c.59.59.59 1.54 0 2.12-.29.29-.68.44-1.06.44Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M92.14 161.76c-21.02 0-38.12-17.1-38.12-38.12 0-21.02 17.1-38.12 38.12-38.12 21.02 0 38.12 17.1 38.12 38.12 0 21.02-17.1 38.12-38.12 38.12Zm0-73.23c-19.36 0-35.12 15.75-35.12 35.12 0 19.37 15.75 35.12 35.12 35.12 19.37 0 35.12-15.75 35.12-35.12 0-19.37-15.75-35.12-35.12-35.12ZM167.56 90.54h-23.67c-2.78 0-5.04-2.26-5.04-5.04v-9.23c0-2.78 2.26-5.04 5.04-5.04h23.67c2.78 0 5.04 2.26 5.04 5.04v9.23c0 2.78-2.26 5.04-5.04 5.04Zm-23.67-16.32c-1.13 0-2.04.92-2.04 2.04v9.23c0 1.13.92 2.04 2.04 2.04h23.67c1.13 0 2.04-.92 2.04-2.04v-9.23c0-1.13-.92-2.04-2.04-2.04h-23.67Z"
+    fill="#00C5CA"
+  />
+</svg>

package/src/components/pictograms/svg/originals/PictogramCameraRequest.svg

@@ -1,17 +1,30 @@
-<svg width="124" height="124" viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_42_891)">
-<path d="M40.2701 47.2157V31.1277C40.2701 28.2034 42.6401 25.8334 45.5645 25.8334H118.706C121.63 25.8334 124 28.2034 124 31.1277V82.1674C124 85.0918 121.63 87.4618 118.706 87.4618H45.5645C42.6401 87.4618 40.2701 85.0918 40.2701 82.1674V74.6878L44.0983 69.9478C44.0983 69.9478 48.8263 66.9672 48.983 67.0194C49.1396 67.0716 57.756 64.6534 57.756 64.6534L60.0658 63.3399L61.0098 61.6045L60.118 58.877L59.4873 56.6476L63.0062 53.8839L62.6366 49.7866L62.1185 48.1838L62.9018 44.3074L60.0136 42.536L42.1501 46.3722L40.2661 47.2157" fill="#305CE7"/>
-<path d="M16.8591 77.5318C16.9917 77.2024 30.7298 44.3475 39.8965 40.8367L40.2821 40.6881V36.9161L39.4627 37.2295C28.8177 41.3067 14.1196 76.0254 13.979 76.3749L13.754 76.9332L16.6302 78.0861L16.8551 77.5278L16.8591 77.5318Z" fill="white"/>
-<path d="M63.677 48.4368C63.7694 48.2521 63.8578 48.0673 63.9261 47.8745C64.9062 45.1951 63.2151 42.8773 63.1428 42.7809L62.8214 42.4676L62.7371 42.3993C60.4313 40.9211 55.9122 41.0536 49.3043 42.789C44.263 44.1146 39.6194 45.9624 38.7397 46.3159L38.1813 46.5408L39.3462 49.413L39.9046 49.188C46.2112 46.6332 57.3463 43.2469 60.7888 44.8577C60.9857 45.2313 61.303 46.0307 61.0098 46.818C60.5157 48.1396 58.4871 49.2724 55.2896 50.0155L54.7031 50.1521L55.4061 53.1729L55.9926 53.0363C58.2702 52.506 60.0819 51.783 61.4235 50.8711C61.5963 51.3652 61.6886 51.9437 61.5199 52.5181C61.07 54.0646 58.8687 55.4706 55.3217 56.4748L54.7433 56.6395L55.5869 59.6241L56.1653 59.4594C57.041 59.2104 57.8484 58.9412 58.5875 58.644C59.2021 59.5036 59.877 60.8533 59.5195 61.7933C59.0495 63.0225 56.8643 63.8942 53.3655 64.2477C44.3433 65.1555 39.4145 73.5831 34.1925 82.5048C32.3728 85.618 30.4888 88.8356 28.4241 91.6916C26.05 94.9735 18.2892 96.5361 11.842 93.6358C7.41931 91.6474 0.514133 85.9996 3.95668 70.5503L4.08924 69.9638L1.06446 69.289L0.931898 69.8754C-0.421822 75.9571 -2.19331 90.7195 10.5726 96.4638C13.1395 97.6167 16.092 98.2272 19.1167 98.2272C24.3027 98.2272 28.8338 96.4196 30.9387 93.5113C33.0878 90.5428 35.0079 87.2609 36.8718 84.0714C41.6801 75.8527 46.2233 68.0879 53.6748 67.3367C58.5474 66.8466 61.4878 65.3523 62.4197 62.8939C63.2392 60.7288 62.2309 58.5556 61.3713 57.234C63.0263 56.1494 64.0747 54.856 64.4965 53.3657C65.079 51.3291 64.3157 49.5094 63.669 48.4409L63.677 48.4368Z" fill="white"/>
-<path d="M113.648 43.255H103.469C101.517 43.255 99.9263 41.6643 99.9263 39.712V34.6064C99.9263 32.6542 101.517 31.0635 103.469 31.0635H113.648C115.601 31.0635 117.191 32.6542 117.191 34.6064V39.712C117.191 41.6643 115.601 43.255 113.648 43.255ZM103.469 33.6183C102.923 33.6183 102.481 34.0601 102.481 34.6064V39.712C102.481 40.2583 102.923 40.7002 103.469 40.7002H113.648C114.195 40.7002 114.636 40.2583 114.636 39.712V34.6064C114.636 34.0601 114.195 33.6183 113.648 33.6183H103.469Z" fill="#AAEEEF"/>
-<path d="M82.135 71.5104C73.9404 71.5104 67.2722 64.8422 67.2722 56.6476C67.2722 48.453 73.9404 41.7848 82.135 41.7848C90.3297 41.7848 96.9978 48.453 96.9978 56.6476C96.9978 64.8422 90.3297 71.5104 82.135 71.5104ZM82.135 44.3396C75.3504 44.3396 69.827 49.8589 69.827 56.6476C69.827 63.4363 75.3463 68.9556 82.135 68.9556C88.9237 68.9556 94.443 63.4363 94.443 56.6476C94.443 49.8589 88.9237 44.3396 82.135 44.3396Z" fill="#AAEEEF"/>
-<path d="M82.1351 58.7846C81.4281 58.7846 80.8577 58.2142 80.8577 57.5072V48.1557C80.8577 47.4487 81.4281 46.8783 82.1351 46.8783C82.8421 46.8783 83.4125 47.4487 83.4125 48.1557V57.5072C83.4125 58.2142 82.8421 58.7846 82.1351 58.7846Z" fill="#AAEEEF"/>
-<path d="M82.1351 63.8821C81.4281 63.8821 80.8577 63.3117 80.8577 62.6047V61.7652C80.8577 61.0582 81.4281 60.4878 82.1351 60.4878C82.8421 60.4878 83.4125 61.0582 83.4125 61.7652V62.6047C83.4125 63.3117 82.8421 63.8821 82.1351 63.8821Z" fill="#AAEEEF"/>
-<rect x="46.5" y="18.6" width="14.9833" height="5.16667" rx="2" fill="#305CE7"/>
-</g>
-<defs>
-<clipPath id="clip0_42_891">
-<rect width="124" height="124" fill="white"/>
-</clipPath>
-</defs>
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <path
+    d="M7 160.98v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-8.43c0-.39-11.44-17.76-18.33-18.63-6.89-.87-15.91-3.54-15.91-3.54-10.32-3.9-.42-12.65-.42-12.65l2.72-.43c-11.11-.83-12.16-11.46-12.16-11.46l5.18-2.95-1.41-2.87-.67-2.83-.07-2.37 1.38-.98s4.14-1.27 4.79-1.33c.65-.06 6.02.68 6.02.68l7.73.98s11.4 3.27 11.63 3.34c.23.07 9.5 4.71 9.5 4.71V75.21c0-5.87-4.76-10.63-10.63-10.63H17.63C11.76 64.57 7 69.33 7 75.21V160.98Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M229.74 154.75c-14.46-19.53-40.46-50.52-48.72-50.52v-4c12.97 0 47.98 46.8 51.93 52.14l-3.21 2.38ZM165.6 125.62c-18.46-2.42-27.63-6.04-28.84-11.37-.74-3.27 1.84-5.94 3.48-7.01 9.19-5.89 38.25 5.61 41.53 6.94l-1.5 3.71c-11.66-4.73-32.25-10.89-37.85-7.29 0 0-2.06 1.44-1.75 2.77.2.85 2.36 5.25 25.46 8.28l-.52 3.97h-.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M165.45 138.84c-27.17-5.71-30.83-11.35-31.22-15.1-.53-5.04 5.75-7.95 6.47-8.27l1.62 3.66c-1.42.63-4.29 2.49-4.1 4.2.15 1.37 2.6 6.25 28.07 11.6l-.82 3.91h-.02Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M201.77 196.03c-2.43-3.36-4.81-6.87-7.33-10.59-11.38-16.79-23.15-34.16-38.58-35.71-8.27-.83-13.23-3.3-14.76-7.35-2.06-5.44 3.13-11.13 3.35-11.37l2.94 2.71c-1.04 1.14-3.53 4.66-2.55 7.25.93 2.43 4.98 4.13 11.42 4.77 17.29 1.74 29.59 19.89 41.49 37.45 2.5 3.69 4.86 7.18 7.26 10.49l-3.24 2.34v.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M50.2699 44h-32.72c-1.5795 0-2.86 1.2805-2.86 2.86v9.97c0 1.5795 1.2805 2.86 2.86 2.86h32.72c1.5796 0 2.86-1.2805 2.86-2.86v-9.97c0-1.5795-1.2804-2.86-2.86-2.86Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M92.0098 135.34c-.83 0-1.5-.67-1.5-1.5v-36.9c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v36.9c0 .83-.67 1.5-1.5 1.5ZM92.1402 150.34c2.0269 0 3.67-1.643 3.67-3.67s-1.6431-3.67-3.67-3.67-3.67 1.643-3.67 3.67 1.6431 3.67 3.67 3.67Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M92.14 161.76c-21.02 0-38.12-17.1-38.12-38.12 0-21.02 17.1-38.12 38.12-38.12 21.02 0 38.12 17.1 38.12 38.12 0 21.02-17.1 38.12-38.12 38.12Zm0-73.23c-19.36 0-35.12 15.75-35.12 35.12 0 19.37 15.75 35.12 35.12 35.12 19.37 0 35.12-15.75 35.12-35.12 0-19.37-15.75-35.12-35.12-35.12ZM167.56 90.54h-23.67c-2.78 0-5.04-2.26-5.04-5.04v-9.23c0-2.78 2.26-5.04 5.04-5.04h23.67c2.78 0 5.04 2.26 5.04 5.04v9.23c0 2.78-2.26 5.04-5.04 5.04Zm-23.67-16.32c-1.13 0-2.04.92-2.04 2.04v9.23c0 1.13.92 2.04 2.04 2.04h23.67c1.13 0 2.04-.92 2.04-2.04v-9.23c0-1.13-.92-2.04-2.04-2.04h-23.67Z"
+    fill="#00C5CA"
+  />
 </svg>

package/src/components/textInput/TextInputBase.tsx

@@ -52,6 +52,8 @@ type InputTextProps = {
   onFocus?: () => void;
 };
 
+const inputMarginTop: IOSpacingScale = 8;
+
 const styles = StyleSheet.create({
   textInput: {
     ...IOStyles.row,
@@ -64,7 +66,7 @@ const styles = StyleSheet.create({
   textInputStyle: {
     ...IOStyles.flex,
     fontSize: 16,
-    marginTop: IOSpacingScale[2],
+    marginTop: inputMarginTop,
     lineHeight: 24,
     height: "100%"
   },

package/src/components/typography/LabelSmall.tsx

@@ -1,7 +1,8 @@
+import { useIOExperimentalDesign } from "../../core";
 import type { IOColors, IOTheme } from "../../core/IOColors";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { ExternalTypographyProps, FontType, TypographyProps } from "./common";
 
 type PartialAllowedColors = Extract<
   IOColors,
@@ -15,15 +16,17 @@ type PartialAllowedColors = Extract<
 >;
 type AllowedColors = PartialAllowedColors | IOTheme["textBody-tertiary"];
 type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
+
 type FontSize = "regular" | "small";
 type AllowedFontSize = { fontSize?: FontSize };
 
 type LabelSmallProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 > &
-  AllowedFontSize;
+  AllowedFontSize &
+  FontType;
 
-const fontName: FontFamily = "TitilliumWeb";
+const defaultFontName: FontFamily = "TitilliumWeb";
 const fontSizeMapping: Record<FontSize, number> = {
   regular: 14,
   small: 12
@@ -34,15 +37,19 @@ const labelDefaultcolor = "blue";
 /**
  * `LabelSmall` typographic style
  */
-export const LabelSmall = (props: LabelSmallProps) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
+export const LabelSmall = (props: LabelSmallProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: labelDefaultWeight,
     defaultColor: labelDefaultcolor,
-    font: fontName,
+    font:
+      isExperimental && props.font !== undefined ? props.font : defaultFontName,
     fontStyle: {
       fontSize: props.fontSize
         ? fontSizeMapping[props.fontSize]
         : fontSizeMapping.regular
     }
   });
+};

package/src/components/typography/common.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleProp, Text, TextStyle } from "react-native";
 import type { IOColors } from "../../core";
-import { IOFontWeight } from "../../utils/fonts";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import { RequiredAll } from "../../utils/types";
 
 /**
@@ -20,6 +20,13 @@ export const lineHeightMapping: Record<FontSize, number> = {
   mini: 18
 };
 
+/**
+ * Define the font name values for the typography elements
+ */
+export type FontType = {
+  font?: IOFontFamily;
+};
+
 /**
  * The style exported for the typography elements, without the fields characterizing the font style
  */

package/src/core/IOColors.ts

@@ -290,6 +290,10 @@ export type IOTheme = {
   // Status
   errorIcon: IOColors;
   errorText: IOColors;
+  // Pictograms
+  "pictogram-hands": IOColors;
+  "pictogram-tint-main": IOColors;
+  "pictogram-tint-secondary": IOColors;
 };
 
 export const IOThemeLight: IOTheme = {
@@ -312,7 +316,11 @@ export const IOThemeLight: IOTheme = {
   "divider-default": "grey-200",
   // Status
   errorIcon: "error-500",
-  errorText: "error-850"
+  errorText: "error-850",
+  // Pictograms
+  "pictogram-hands": "blueIO-500",
+  "pictogram-tint-main": "turquoise-150",
+  "pictogram-tint-secondary": "turquoise-500"
 };
 
 export const IOThemeDark: IOTheme = {
@@ -336,7 +344,11 @@ export const IOThemeDark: IOTheme = {
   "divider-default": "grey-850",
   // Status
   errorIcon: "error-400",
-  errorText: "error-400"
+  errorText: "error-400",
+  // Pictograms
+  "pictogram-hands": "white",
+  "pictogram-tint-main": "turquoise-150",
+  "pictogram-tint-secondary": "turquoise-500"
 };
 
 export const themeStatusColorsLightMode = asIOThemeColors({

package/src/core/IOSpacing.ts

@@ -4,11 +4,22 @@ Every margin/padding used by different components
 should use a value defined in the following scale.
 */
 
-export const IOSpacingScale = [
-  4, 6, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 72, 80
-] as const;
-
-export type IOSpacingScale = (typeof IOSpacingScale)[number];
+export type IOSpacingScale =
+  | 4
+  | 6
+  | 8
+  | 12
+  | 16
+  | 20
+  | 24
+  | 28
+  | 32
+  | 40
+  | 48
+  | 56
+  | 64
+  | 72
+  | 80;
 
 // Values used in the new `<Spacer>` component
 export type IOSpacer = Extract<IOSpacingScale, 4 | 8 | 16 | 24 | 32 | 40 | 48>;

package/src/utils/fonts.ts

@@ -6,14 +6,6 @@
 
 import { Platform } from "react-native";
 
-export type IOFontFamily = keyof typeof fonts;
-
-const weights = ["Light", "Regular", "Medium", "SemiBold", "Bold"] as const;
-export type IOFontWeight = (typeof weights)[number];
-
-const weightValues = ["300", "400", "500", "600", "700"] as const;
-export type FontWeightValue = (typeof weightValues)[number];
-
 /**
  * Choose the font name based on the platform
  */
@@ -35,6 +27,14 @@ const fonts = {
   })
 };
 
+export type IOFontFamily = keyof typeof fonts;
+
+const weights = ["Light", "Regular", "Medium", "SemiBold", "Bold"] as const;
+export type IOFontWeight = (typeof weights)[number];
+
+const weightValues = ["300", "400", "500", "600", "700"] as const;
+export type FontWeightValue = (typeof weightValues)[number];
+
 /**
  * Mapping between the nominal description of the weight (also the postfix used on Android) and the numeric value
  * used on iOS