@pagopa/io-app-design-system 1.0.0-0

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

@@ -0,0 +1,19 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M22.452 9.29a2.325 2.325 0 0 0-2.323 2.323h.957l17.624 8.812v4.35H37.16v3.096h-1.548v12.387h1.548v3.097h1.549V48H0v-4.645h1.548v-3.097h1.549V27.871H1.548v-3.097H0v-4.35l17.624-8.811h.957a3.875 3.875 0 0 1 3.87-3.871h3.872V9.29h-3.871ZM7.742 41.807H3.097v1.548h4.645v-1.548Zm4.645-13.936v12.387H10.84v3.097H9.29v-3.097H7.742V27.871H9.29v-3.097h1.549v3.097h1.548Zm9.29 12.387V27.871H20.13v-3.097h-1.548v3.097h-1.549v12.387h1.549v3.097h1.548v-3.097h1.548Zm9.29-12.387v12.387H29.42v3.097h-1.548v-3.097h-1.548V27.871h1.548v-3.097h1.548v3.097h1.549Zm4.646 15.484v-1.548h-4.645v1.548h4.645Zm-3.097-3.097V27.871h1.549v12.387h-1.549ZM21.677 26.323h4.646v-1.549h-4.646v1.549Zm3.097 1.548v12.387h-1.548V27.871h1.548Zm1.549 15.484v-1.548h-4.646v1.548h4.646Zm-9.29-17.032h-4.646v-1.549h4.645v1.549Zm-1.55 13.935V27.871h-1.548v12.387h1.549Zm1.55 1.548v1.549h-4.646v-1.548h4.645ZM3.096 26.323h4.645v-1.549H3.097v1.549Zm3.097 1.548v12.387H4.645V27.871h1.549Zm30.967 18.58v-1.548H1.548v1.549h35.613Zm-1.548-20.128h-4.645v-1.549h4.645v1.549Zm1.548-3.097v-1.844l-16.44-8.22h-.592v5.419h-1.548v-5.42h-.592l-16.44 8.22v1.845H37.16Z"
+    fill="#000"
+  />
+  <path d="M6.194 20.129h26.322v1.548H6.194V20.13Z" fill="#000" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M30.968 8.516c0-4.695 3.82-8.516 8.516-8.516C44.179 0 48 3.82 48 8.516s-3.82 8.516-8.516 8.516-8.516-3.82-8.516-8.516Zm1.548 0a6.975 6.975 0 0 0 6.968 6.968 6.975 6.975 0 0 0 6.968-6.968 6.975 6.975 0 0 0-6.968-6.968 6.975 6.975 0 0 0-6.968 6.968Z"
+    fill="#000"
+  />
+  <path
+    d="M27.871 7.742h1.548V9.29h-1.548V7.742ZM43.355 30.194a2.325 2.325 0 0 1-2.323 2.322h-.774v1.549h.774a3.875 3.875 0 0 0 3.871-3.871V17.806h-1.548v12.387ZM37.161 32.516h1.549v1.549H37.16v-1.549ZM42.505 12.143c-.1-.239-.203-.478-.314-.714-.098-.21-.225-.271-.46-.219-.3.067-.592.156-.891.216-.578.118-1.157.129-1.727-.047-.714-.22-1.095-.725-1.329-1.378h1.938a.27.27 0 0 0 .275-.268v-.596a.27.27 0 0 0-.275-.268H37.6c0-.167-.002-.327 0-.486h2.123a.27.27 0 0 0 .275-.268v-.596a.27.27 0 0 0-.275-.269h-1.856c0-.007 0-.014.004-.018.223-.495.547-.891 1.08-1.098.62-.24 1.253-.234 1.892-.105.302.06.6.15.902.217.22.05.349-.014.443-.215.11-.232.21-.468.31-.705.095-.223.04-.38-.176-.504a1.161 1.161 0 0 0-.167-.078c-.895-.34-1.817-.468-2.77-.319-.67.105-1.295.33-1.835.74-.682.514-1.123 1.194-1.38 1.993l-.031.092h-.954a.27.27 0 0 0-.275.269v.596a.27.27 0 0 0 .275.268h.752v.486h-.752a.27.27 0 0 0-.275.268v.596a.27.27 0 0 0 .275.268h.906c.068.218.126.439.213.647.459 1.08 1.227 1.849 2.384 2.215.955.303 1.919.293 2.882.034.25-.067.5-.154.737-.26.23-.104.29-.278.199-.494Z"
+    fill="#000"
+  />
+</svg>

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

@@ -0,0 +1,18 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M34.4 28.858v-.88a3.981 3.981 0 0 0 1.6-3.177v-.8a.8.8 0 0 0 .8-.8v-1.6a4.8 4.8 0 0 0-9.6 0v1.6a.8.8 0 0 0 .8.8v.8a3.98 3.98 0 0 0 1.6 3.18v.88a5.609 5.609 0 0 0-4.8 5.54v2.4a.8.8 0 0 0 .8.8h12.8a.8.8 0 0 0 .8-.8v-2.4a5.609 5.609 0 0 0-4.8-5.543Zm-5.6-7.256a3.2 3.2 0 0 1 6.4 0v.8h-.137a.8.8 0 0 1-.566-.235l-1.131-1.13a.8.8 0 0 0-1.132 0l-.663.662c-.45.449-1.06.701-1.697.703H28.8v-.8Zm3.902 1.229A3.973 3.973 0 0 1 29.874 24H29.6v.8a2.4 2.4 0 0 0 4.8 0v-.903a2.368 2.368 0 0 1-1.034-.6l-.566-.565-.098.098ZM32 28.8c.269 0 .537-.026.8-.08v.55l-.8.8-.8-.8v-.55c.263.054.531.08.8.08Zm5.6 5.6a3.993 3.993 0 0 0-3.7-3.97l-1.334 1.336a.8.8 0 0 1-1.132 0L30.1 30.432A3.993 3.993 0 0 0 26.4 34.4V36h11.2v-1.6Z"
+    fill="#000"
+  />
+  <path
+    d="M39.2 40.8v-1.6h-9.6v1.6h9.6ZM24.8 42.4h14.4V44H24.8v-1.6ZM28 39.2h-3.2v1.6H28v-1.6Z"
+    fill="#000"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M45.6 9.603H40v-2.4a.8.8 0 0 0-.8-.8h-4.496l-.193-1.061.648-.215A2.4 2.4 0 0 0 36.8 2.85v-.127a2.415 2.415 0 0 0-1.774-2.32 11.56 11.56 0 0 0-6.052 0 2.415 2.415 0 0 0-1.774 2.32v.125a2.4 2.4 0 0 0 1.642 2.275l.647.215-.193 1.065H24.8a.8.8 0 0 0-.8.8v2.4h-5.6a2.4 2.4 0 0 0-2.4 2.4v9.599H7.2a.8.8 0 0 0-.48.16l-2.986 2.24H.8a.8.8 0 0 0-.8.8V41.6a.8.8 0 0 0 .8.8h2.934l2.986 2.24a.8.8 0 0 0 .48.16H16v.8a2.4 2.4 0 0 0 2.4 2.4h27.2a2.4 2.4 0 0 0 2.4-2.4V12.002a2.4 2.4 0 0 0-2.4-2.4Zm-7.2-1.6v4.8h-2.532l-.873-4.8H38.4Zm-8.64 4.8h4.48l-.87-4.8h-2.737l-.873 4.8Zm.893-8.76-1.306-.434a.8.8 0 0 1-.547-.759v-.127a.8.8 0 0 1 .6-.775 9.915 9.915 0 0 1 5.2 0 .8.8 0 0 1 .6.775v.125a.8.8 0 0 1-.547.758l-1.306.435a.8.8 0 0 0-.534.903l.265 1.459h-2.156l.265-1.457a.8.8 0 0 0-.534-.902Zm-1.648 3.96H25.6v4.8h2.532l.873-4.8ZM7.466 43.2 4.48 40.96A.8.8 0 0 0 4 40.8H1.6V25.602H4a.8.8 0 0 0 .48-.16l2.986-2.24H20.8a1.6 1.6 0 1 1 0 3.2h-6.4a.802.802 0 0 0-.358.08l-3.03 1.52H8.8v1.6h2.4a.8.8 0 0 0 .358-.08l3.03-1.52H16v3.2h-3.2V32.8H16v2.4h-3.2v1.6H16v2.4h-3.2v1.6H16v2.4H7.466ZM45.6 46.4a.8.8 0 0 0 .8-.8V12.002a.8.8 0 0 0-.8-.8H40v2.4a.8.8 0 0 1-.8.8H24.8a.8.8 0 0 1-.8-.8v-2.4h-5.6a.8.8 0 0 0-.8.8v9.6h3.2a3.2 3.2 0 1 1 0 6.4h-3.2V45.6a.8.8 0 0 0 .8.8h27.2Z"
+    fill="#000"
+  />
+</svg>

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

@@ -0,0 +1,26 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M48 36.214v-5.848l-2.887-.74a12.384 12.384 0 0 0-.87-2.109l1.516-2.562-4.134-4.135-2.562 1.518a12.322 12.322 0 0 0-2.11-.872l-.74-2.885h-5.847l-.74 2.887c-.73.226-1.438.517-2.108.871l-2.563-1.518-.18.183V18.58h-2.323a2.33 2.33 0 0 1-1.72-.762 2.303 2.303 0 0 1-.592-1.791c.112-1.173 1.186-2.093 2.445-2.093h2.19V6.968a2.325 2.325 0 0 0-2.323-2.323h-6.194v-.641c0-2.049-1.534-3.8-3.493-3.986a3.876 3.876 0 0 0-2.981.988 3.88 3.88 0 0 0-1.268 2.865v.774H2.323A2.325 2.325 0 0 0 0 6.968v6.967h2.19c1.258 0 2.332.92 2.444 2.092a2.328 2.328 0 0 1-2.312 2.554H0v6.967a2.326 2.326 0 0 0 2.323 2.323h7.742v-2.19c0-1.258.918-2.333 2.091-2.445a2.324 2.324 0 0 1 2.553 2.312v2.323h7.465c-.276.566-.519 1.15-.706 1.756l-2.887.74v5.847l2.887.74c.226.731.517 1.438.87 2.11l-1.517 2.561 4.134 4.135 2.563-1.518c.67.354 1.377.646 2.109.872l.74 2.886h5.847l.74-2.887a12.306 12.306 0 0 0 2.109-.872l2.562 1.518 4.134-4.135-1.517-2.562c.354-.67.645-1.377.871-2.109l2.887-.74Zm-33.01-13.53a3.87 3.87 0 0 0-2.98-.988c-1.96.186-3.494 1.937-3.494 3.985v.642H2.323a.775.775 0 0 1-.775-.775V20.13h.775a3.882 3.882 0 0 0 2.865-1.268 3.889 3.889 0 0 0 .988-2.981c-.188-1.959-1.938-3.493-3.986-3.493h-.642v-5.42c0-.427.348-.774.775-.774h7.742V3.871a2.322 2.322 0 0 1 2.553-2.313c1.173.112 2.092 1.187 2.092 2.446v2.19h7.742c.426 0 .774.346.774.774v5.419h-.641c-2.049 0-3.8 1.534-3.987 3.494a3.893 3.893 0 0 0 .988 2.98 3.884 3.884 0 0 0 2.866 1.268h.774v2.423l-2.404 2.404.809 1.367h-5.373v-.775a3.88 3.88 0 0 0-1.267-2.864ZM43.745 36.11l.118-.436 2.59-.664v-3.443l-2.59-.662-.118-.437a10.733 10.733 0 0 0-1.065-2.577l-.226-.393 1.36-2.298-2.434-2.435-2.298 1.361-.391-.226c-.803-.462-1.67-.82-2.58-1.065l-.436-.117-.663-2.59h-3.443l-.662 2.59-.436.118c-.909.245-1.777.603-2.579 1.065l-.392.226-2.298-1.361-2.434 2.435 1.36 2.298-.225.392c-.463.802-.821 1.669-1.066 2.578l-.117.437-2.59.662v3.443l2.59.663.117.436c.245.91.603 1.777 1.066 2.578l.226.392-1.361 2.298 2.434 2.436 2.298-1.362.392.226c.803.462 1.67.82 2.579 1.065l.437.118.662 2.59h3.443l.662-2.59.437-.118a10.801 10.801 0 0 0 2.579-1.065l.391-.226 2.298 1.361 2.435-2.435-1.361-2.298.226-.393c.462-.8.82-1.668 1.065-2.577Z"
+    fill="#000"
+  />
+  <path
+    d="M33.29 27.097a6.2 6.2 0 0 0-6.193 6.193 6.2 6.2 0 0 0 6.193 6.194 6.137 6.137 0 0 0 3.716-1.247L36.076 37a4.606 4.606 0 0 1-2.786.935 4.65 4.65 0 0 1-4.645-4.645 4.65 4.65 0 0 1 4.645-4.645 4.65 4.65 0 0 1 4.645 4.645A4.602 4.602 0 0 1 37 36.076l1.238.93a6.146 6.146 0 0 0 1.246-3.716 6.2 6.2 0 0 0-6.194-6.193Z"
+    fill="#000"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M24 33.29c0-5.123 4.167-9.29 9.29-9.29 5.123 0 9.29 4.167 9.29 9.29 0 5.123-4.167 9.29-9.29 9.29-5.123 0-9.29-4.167-9.29-9.29Zm1.548 0c0 4.269 3.473 7.742 7.742 7.742 4.27 0 7.742-3.473 7.742-7.742s-3.473-7.742-7.742-7.742-7.742 3.473-7.742 7.742Z"
+    fill="#000"
+  />
+  <path
+    d="M39.484 4.645h1.548v1.548h-1.548V4.645ZM39.484 7.742h1.548V9.29h-1.548V7.742ZM41.032 6.193h1.549v1.549h-1.549V6.193ZM37.935 6.193h1.549v1.549h-1.549V6.193ZM31.742 10.839h1.548v1.548h-1.548v-1.548ZM31.742 13.935h1.548v1.549h-1.548v-1.549ZM33.29 12.387h1.549v1.548H33.29v-1.548ZM30.194 12.387h1.548v1.548h-1.549v-1.548ZM42.58 13.935h1.549v1.549h-1.548v-1.549ZM42.58 17.032h1.549v1.549h-1.548v-1.549ZM44.129 15.484h1.548v1.548H44.13v-1.548ZM41.032 15.484h1.549v1.548h-1.549v-1.548ZM27.871 1.548h1.548v1.549h-1.548V1.548ZM27.871 4.645h1.548v1.548h-1.548V4.645ZM29.42 3.097h1.548v1.548h-1.549V3.097ZM26.323 3.097h1.548v1.548h-1.548V3.097ZM13.161 35.613h1.549v1.548H13.16v-1.548ZM13.161 38.71h1.549v1.548H13.16V38.71ZM14.71 37.161h1.548v1.549H14.71V37.16Z"
+    fill="#000"
+  />
+  <path
+    d="M11.613 37.161h1.548v1.549h-1.548V37.16ZM5.42 30.968h1.548v1.548H5.419v-1.548ZM5.42 34.065h1.548v1.548H5.419v-1.548ZM6.968 32.516h1.548v1.549H6.968v-1.549ZM3.871 32.516h1.548v1.549H3.871v-1.549Z"
+    fill="#000"
+  />
+</svg>

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

@@ -0,0 +1,8 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M14.02 10.174a3.689 3.689 0 0 0-3.684 3.684 3.689 3.689 0 0 0 3.684 3.684 3.688 3.688 0 0 0 3.683-3.684 3.688 3.688 0 0 0-3.682-3.684Zm0 9.291a5.613 5.613 0 0 1-5.605-5.607 5.613 5.613 0 0 1 5.606-5.607 5.613 5.613 0 0 1 5.605 5.607 5.613 5.613 0 0 1-5.606 5.607Zm-5.36 2.427.565.325a9.555 9.555 0 0 0 2.142.907l.615.176.292 2.496a.232.232 0 0 0 .227.205h2.809a.23.23 0 0 0 .226-.206l.283-2.445.636-.166a9.665 9.665 0 0 0 2.299-.929l.561-.316 1.904 1.506a.235.235 0 0 0 .31-.019l1.982-1.982a.226.226 0 0 0 .015-.305l-1.491-1.893.325-.564a9.424 9.424 0 0 0 .945-2.256l.17-.629 2.322-.268a.228.228 0 0 0 .203-.226v-2.81a.23.23 0 0 0-.204-.227l-2.303-.268-.166-.635a9.561 9.561 0 0 0-.908-2.231l-.314-.562 1.415-1.789a.234.234 0 0 0-.018-.309l-1.977-1.978a.225.225 0 0 0-.304-.016l-1.764 1.398-.567-.334a9.525 9.525 0 0 0-2.349-.983l-.629-.17-.264-2.262a.228.228 0 0 0-.226-.204h-2.809a.23.23 0 0 0-.226.205l-.264 2.263-.63.168a9.456 9.456 0 0 0-2.405 1.017l-.57.34-1.814-1.438a.234.234 0 0 0-.308.019L4.414 6.48a.226.226 0 0 0-.016.304l1.479 1.873-.31.56a9.28 9.28 0 0 0-.886 2.248l-.162.646-2.394.273a.23.23 0 0 0-.202.227v2.81a.23.23 0 0 0 .205.227l2.458.285.179.612c.21.724.504 1.419.869 2.064l.319.564-1.555 1.961a.234.234 0 0 0 .019.308l1.982 1.983a.228.228 0 0 0 .305.016l1.956-1.549Zm6.65 6.031H12.5a2.152 2.152 0 0 1-2.136-1.904l-.145-1.242c-.47-.165-.927-.358-1.372-.581l-.95.751c-.856.68-2.084.61-2.857-.163l-1.986-1.986a2.16 2.16 0 0 1-.163-2.858l.764-.963a11.677 11.677 0 0 1-.538-1.279l-1.212-.141A2.154 2.154 0 0 1 0 15.421v-2.81c0-1.09.819-2.009 1.904-2.136l1.095-.125c.16-.509.357-1.007.589-1.489l-.698-.884a2.15 2.15 0 0 1 .164-2.856L5.04 3.134a2.16 2.16 0 0 1 2.858-.163l.79.627c.54-.28 1.1-.517 1.675-.707l.114-.987A2.153 2.153 0 0 1 12.613 0h2.81c1.09 0 2.008.819 2.135 1.903l.116.989c.552.183 1.088.407 1.605.672l.747-.593a2.15 2.15 0 0 1 2.858.164l1.98 1.981a2.16 2.16 0 0 1 .165 2.858l-.63.795c.235.478.434.969.598 1.468l1.023.12a2.153 2.153 0 0 1 1.902 2.136v2.81c0 1.09-.817 2.009-1.902 2.136l-1.052.121a11.347 11.347 0 0 1-.63 1.504l.697.882a2.15 2.15 0 0 1-.166 2.857l-1.985 1.986a2.158 2.158 0 0 1-2.858.163l-.907-.718c-.498.245-1.014.454-1.538.624l-.134 1.16a2.154 2.154 0 0 1-2.137 1.905Zm20.706-4.998c-.084 0-.17.004-.255.012a2.928 2.928 0 0 0-2.01 1.036 2.916 2.916 0 0 0-.684 2.146 2.919 2.919 0 0 0 1.035 2.002c.604.51 1.377.76 2.154.687a2.935 2.935 0 0 0 2.008-1.037 2.921 2.921 0 0 0 .684-2.146v-.002a2.916 2.916 0 0 0-1.035-2 2.926 2.926 0 0 0-1.897-.698Zm-.02 7.816a4.84 4.84 0 0 1-3.135-1.15 4.837 4.837 0 0 1-1.71-3.31 4.826 4.826 0 0 1 1.131-3.548 4.84 4.84 0 0 1 3.317-1.712 4.82 4.82 0 0 1 3.554 1.132 4.828 4.828 0 0 1 1.712 3.31 4.828 4.828 0 0 1-1.133 3.549 4.837 4.837 0 0 1-3.736 1.729Zm-3.954 2.073.59.274a7.823 7.823 0 0 0 1.822.594l.635.121.404 1.997c.024.123.139.197.27.2l1.983-.17a.25.25 0 0 0 .231-.237l.065-1.992.618-.219a7.98 7.98 0 0 0 1.83-.925l.532-.36 1.636 1.079a.248.248 0 0 0 .331-.047l1.288-1.522a.247.247 0 0 0-.008-.326l-1.338-1.415.28-.593c.294-.62.504-1.266.623-1.919l.115-.639 1.848-.377A.256.256 0 0 0 46 26.07l-.17-1.983a.25.25 0 0 0-.238-.228l-1.871-.06-.22-.617a7.844 7.844 0 0 0-.901-1.775l-.367-.535 1.025-1.535a.244.244 0 0 0-.039-.328l-1.526-1.287a.246.246 0 0 0-.328.008l-1.327 1.241-.593-.286a7.777 7.777 0 0 0-2-.646l-.64-.115-.367-1.799a.257.257 0 0 0-.27-.201l-1.987.169a.249.249 0 0 0-.23.236l-.06 1.835-.614.221a7.794 7.794 0 0 0-1.91 1.002l-.539.389-1.56-1.035a.25.25 0 0 0-.33.047l-1.284 1.531a.244.244 0 0 0 .005.327l1.32 1.406-.258.584a8.036 8.036 0 0 0-.58 1.917l-.111.649-1.905.389a.255.255 0 0 0-.201.268l.169 1.982a.25.25 0 0 0 .24.229l2 .064.229.598c.214.565.503 1.117.86 1.64l.363.533-1.117 1.684a.246.246 0 0 0 .047.326l1.524 1.285a.248.248 0 0 0 .33-.006l1.473-1.38Zm3.704 5.109a2.18 2.18 0 0 1-2.139-1.742l-.152-.756a9.8 9.8 0 0 1-1.03-.336l-.54.506c-.8.754-2.042.788-2.886.075l-1.524-1.285a2.173 2.173 0 0 1-.41-2.857l.415-.627c-.17-.29-.326-.585-.463-.885l-.747-.025a2.172 2.172 0 0 1-2.093-1.984l-.17-1.99a2.178 2.178 0 0 1 1.736-2.311l.637-.129c.09-.381.204-.756.34-1.123l-.46-.489a2.162 2.162 0 0 1-.076-2.886l1.285-1.53a2.175 2.175 0 0 1 2.86-.411l.476.315a9.593 9.593 0 0 1 1.206-.632l.018-.552a2.172 2.172 0 0 1 1.986-2.092l2-.17a2.181 2.181 0 0 1 2.306 1.735l.111.544c.422.106.837.239 1.236.398l.382-.355a2.163 2.163 0 0 1 2.884-.076l1.525 1.286c.85.716 1.02 1.951.393 2.871l-.313.47c.195.335.372.682.527 1.038l.585.019a2.175 2.175 0 0 1 2.095 1.984l.17 1.991a2.177 2.177 0 0 1-1.736 2.31l-.596.121a9.78 9.78 0 0 1-.37 1.141l.452.477c.758.802.793 2.043.08 2.887l-1.288 1.524a2.18 2.18 0 0 1-2.856.409l-.583-.384c-.355.208-.72.392-1.097.554l-.023.703a2.172 2.172 0 0 1-1.988 2.092l-1.99.17a2.556 2.556 0 0 1-.175.007ZM17.501 35.64c-.514 0-1.006.206-1.39.58a2.31 2.31 0 0 0-.684 1.641c-.013 1.245.904 2.267 2.046 2.281a2.044 2.044 0 0 0 1.413-.581 2.31 2.31 0 0 0 .684-1.641c.012-1.244-.904-2.267-2.047-2.28h-.021Zm-.006 6.425-.044-.001c-2.202-.026-3.972-1.92-3.947-4.222a4.22 4.22 0 0 1 1.264-2.996 3.884 3.884 0 0 1 2.779-1.128c2.2.025 3.97 1.919 3.947 4.222a4.222 4.222 0 0 1-1.264 2.996 3.895 3.895 0 0 1-2.735 1.129Zm-3.589.963.585.365c.42.263.86.467 1.306.605l.608.19.155 1.572c.015.139.108.225.186.226l1.17.015h.003c.09 0 .174-.098.188-.218l.184-1.539.633-.166c.49-.127.97-.324 1.422-.586l.59-.339 1.16.994c.07.06.151.058.215-.011l.834-.864a.312.312 0 0 0 .021-.387l-.858-1.181.305-.538a6.33 6.33 0 0 0 .608-1.483l.171-.636 1.42-.154c.082-.009.173-.113.174-.253L25 37.402c.003-.15-.087-.251-.172-.262l-1.4-.193-.152-.638a6.654 6.654 0 0 0-.552-1.493l-.28-.542.838-1.089a.31.31 0 0 0-.014-.383l-.816-.884c-.03-.034-.116-.1-.216-.02l-1.098.894-.587-.375a5.636 5.636 0 0 0-1.432-.66l-.62-.185-.136-1.411c-.014-.136-.107-.222-.186-.223l-1.174-.015H17c-.087 0-.169.097-.183.217l-.17 1.404-.624.171a5.753 5.753 0 0 0-1.49.645l-.598.365-1.107-.956c-.067-.059-.146-.054-.21.013l-.84.87a.312.312 0 0 0-.02.386l.848 1.159-.284.533a6.411 6.411 0 0 0-.573 1.486l-.162.653-1.474.161c-.085.009-.175.113-.175.252l-.015 1.24c-.002.148.088.251.171.261l1.498.205.162.624c.125.481.303.941.529 1.369l.287.545-.928 1.211a.31.31 0 0 0 .013.384l.816.884c.065.072.143.079.214.021l1.221-.998Zm4.016 4.895h-.032l-1.165-.016c-1.075-.008-1.97-.851-2.078-1.96l-.033-.334a7.3 7.3 0 0 1-.533-.245l-.178.146a2.058 2.058 0 0 1-2.846-.204l-.816-.884a2.22 2.22 0 0 1-.125-2.856l.196-.257a8.087 8.087 0 0 1-.23-.59l-.245-.034C8.775 40.546 7.985 39.604 8 38.497l.015-1.232c.007-1.105.82-2.029 1.889-2.147l.17-.017c.082-.243.175-.485.281-.722l-.15-.207a2.222 2.222 0 0 1 .19-2.856l.84-.87a2.058 2.058 0 0 1 2.847-.135l.073.064c.24-.117.486-.222.735-.314l.018-.151c.133-1.106 1.024-1.893 2.127-1.909l1.163.015c1.073.009 1.97.851 2.078 1.96l.015.155c.233.093.462.197.686.314l.044-.037a2.06 2.06 0 0 1 2.845.205l.816.884a2.22 2.22 0 0 1 .127 2.857l-.113.145c.1.235.19.474.268.718l.123.018c1.063.142 1.852 1.085 1.835 2.193l-.014 1.23c-.009 1.106-.82 2.03-1.889 2.147l-.14.015a8.516 8.516 0 0 1-.303.734l.145.199a2.222 2.222 0 0 1-.192 2.855l-.834.864a2.058 2.058 0 0 1-2.849.136l-.152-.131a8.035 8.035 0 0 1-.646.265l-.032.27c-.131 1.095-1.03 1.911-2.094 1.911Z"
+    fill="#000"
+  />
+</svg>

package/src/components/radio/AnimatedRadio.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect } from "react";
+import { StyleSheet, View, Pressable, PressableProps } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  interpolate,
+  withSpring,
+  withTiming,
+  Easing
+} from "react-native-reanimated";
+import { IOSelectionTickVisualParams } from "../../core/IOStyles";
+import { IOSpringValues } from "../../core/IOAnimations";
+import { IOColors } from "../../core/IOColors";
+import { AnimatedTick } from "../common/AnimatedTick";
+
+type Props = {
+  checked?: boolean;
+};
+
+type OwnProps = Props & Pick<PressableProps, "disabled" | "onPress">;
+
+const styles = StyleSheet.create({
+  radioWrapper: {
+    width: IOSelectionTickVisualParams.size,
+    height: IOSelectionTickVisualParams.size
+  },
+  radioBorder: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: IOSelectionTickVisualParams.size,
+    height: IOSelectionTickVisualParams.size,
+    borderWidth: IOSelectionTickVisualParams.borderWidth,
+    borderRadius: IOSelectionTickVisualParams.size / 2
+  },
+  radioCircle: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: IOSelectionTickVisualParams.size,
+    height: IOSelectionTickVisualParams.size,
+    borderRadius: IOSelectionTickVisualParams.size / 2
+  }
+});
+
+/**
+ * An animated checkbox. This can be used to implement a
+ * standard {@link CheckBox} or other composite components.
+ */
+export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
+  const isChecked = checked ?? false;
+
+  const circleAnimationProgress = useSharedValue(checked ? 1 : 0);
+  const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
+
+  useEffect(() => {
+    // eslint-disable-next-line functional/immutable-data
+    circleAnimationProgress.value = withSpring(
+      checked ? 1 : 0,
+      IOSpringValues.selection
+    );
+    // eslint-disable-next-line functional/immutable-data
+    tickAnimationProgress.value = withTiming(checked ? 1 : 0, {
+      duration: 400,
+      easing: Easing.elastic(1)
+    });
+  }, [checked, circleAnimationProgress, tickAnimationProgress]);
+
+  const animatedCheckboxSquare = useAnimatedStyle(() => {
+    const scale = interpolate(circleAnimationProgress.value, [0, 1], [0.5, 1]);
+    const opacity = circleAnimationProgress.value;
+
+    return {
+      opacity,
+      transform: [{ scale }]
+    };
+  });
+
+  return (
+    <Pressable
+      disabled={disabled}
+      testID="AnimatedRadioInput"
+      onPress={onPress}
+      style={styles.radioWrapper}
+    >
+      {/* ◀ REMOVE_LEGACY_COMPONENT: Remove the following conditions */}
+      <View
+        style={[
+          styles.radioBorder,
+          {
+            borderColor:
+              IOColors[IOSelectionTickVisualParams.borderColorOffState]
+          }
+        ]}
+      />
+      <Animated.View
+        style={[
+          styles.radioCircle,
+          {
+            backgroundColor:
+              IOColors[IOSelectionTickVisualParams.bgColorOnState]
+          },
+          animatedCheckboxSquare
+        ]}
+      />
+      {/* REMOVE_LEGACY_COMPONENT: End ▶ */}
+      {isChecked && (
+        <View>
+          <AnimatedTick
+            progress={tickAnimationProgress}
+            stroke={IOColors[IOSelectionTickVisualParams.tickColor]}
+          />
+        </View>
+      )}
+    </Pressable>
+  );
+};

package/src/components/radio/index.tsx

@@ -0,0 +1 @@
+export * from "./AnimatedRadio";

package/src/components/spacer/Spacer.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { View } from "react-native";
+import { hexToRgba, IOColors, IOSpacer } from "../../core";
+
+export type SpacerOrientation = "vertical" | "horizontal";
+
+type BaseSpacerProps = {
+    orientation: SpacerOrientation;
+    size: IOSpacer;
+};
+
+type SpacerProps = {
+    size?: IOSpacer;
+};
+
+const DEFAULT_SIZE = 16;
+
+/* Debug Mode */
+const debugMode = false;
+const debugBg = hexToRgba(IOColors.red, 0.2);
+
+/**
+Native `Spacer` component
+@param  {SpacerOrientation} orientation 
+@param {IOSpacer} size
+ */
+const Spacer = ({ orientation, size }: BaseSpacerProps) => {
+    const style = React.useMemo(() => ({
+        ...(orientation === "vertical" && {
+            height: size
+        }),
+        ...(orientation === "horizontal" && {
+            width: size
+        }),
+        ...((debugMode as boolean) && {
+            backgroundColor: debugBg
+        })
+    }), [orientation, size]);
+
+    return <View style={style} />;
+};
+
+/**
+Horizontal spacer component
+@param {IOSpacer} size
+ */
+export const HSpacer = ({ size = DEFAULT_SIZE }: SpacerProps) => (
+    <Spacer orientation={"horizontal"} size={size} />
+);
+/**
+Vertical spacer component
+@param {IOSpacer} size
+ */
+export const VSpacer = ({ size = DEFAULT_SIZE }: SpacerProps) => (
+    <Spacer orientation={"vertical"} size={size} />
+);

package/src/components/spacer/index.tsx

@@ -0,0 +1 @@
+export * from "./Spacer";

package/src/components/switch/AnimatedSwitch.tsx

@@ -0,0 +1,125 @@
+import React, { useEffect } from "react";
+import { StyleSheet, Pressable, PressableProps } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  interpolate,
+  withSpring,
+  withTiming,
+  Easing,
+  interpolateColor
+} from "react-native-reanimated";
+import { IOColors } from "../../core/IOColors";
+import { IOSpringValues } from "../../core/IOAnimations";
+import { AnimatedTick } from "../common/AnimatedTick";
+import { IOSwitchVisualParams } from "../../core/IOStyles";
+
+type Props = {
+  checked?: boolean;
+};
+
+type OwnProps = Props & Pick<PressableProps, "disabled" | "onPress">;
+
+const SWITCH_CIRCLE_SIZE =
+  IOSwitchVisualParams.height - IOSwitchVisualParams.padding * 2;
+
+const styles = StyleSheet.create({
+  switchWrapper: {
+    width: IOSwitchVisualParams.width,
+    height: IOSwitchVisualParams.height
+  },
+  switchBackground: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    borderRadius: IOSwitchVisualParams.width,
+    backgroundColor: IOColors[IOSwitchVisualParams.bgColorOffState]
+  },
+  switchCircle: {
+    position: "absolute",
+    left: IOSwitchVisualParams.padding,
+    top: IOSwitchVisualParams.padding,
+    backgroundColor: IOColors[IOSwitchVisualParams.bgCircle],
+    width: SWITCH_CIRCLE_SIZE,
+    height: SWITCH_CIRCLE_SIZE,
+    borderRadius: IOSwitchVisualParams.width
+  }
+});
+
+/**
+ * An animated checkbox. This can be used to implement a
+ * standard {@link CheckBox} or other composite components.
+ */
+export const AnimatedSwitch = ({ checked, onPress, disabled }: OwnProps) => {
+  const squareAnimationProgress = useSharedValue(checked ? 1 : 0);
+  const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
+
+  useEffect(() => {
+    // eslint-disable-next-line functional/immutable-data
+    squareAnimationProgress.value = withSpring(
+      checked ? 1 : 0,
+      IOSpringValues.selection
+    );
+    // eslint-disable-next-line functional/immutable-data
+    tickAnimationProgress.value = withTiming(checked ? 1 : 0, {
+      duration: 400,
+      easing: Easing.elastic(1)
+    });
+  }, [checked, squareAnimationProgress, tickAnimationProgress]);
+
+  const animatedSwitchBg = useAnimatedStyle(
+    () => ({
+      backgroundColor: interpolateColor(
+        squareAnimationProgress.value,
+        [0, 1],
+        [
+          IOColors[IOSwitchVisualParams.bgColorOffState],
+          IOColors[IOSwitchVisualParams.bgColorOnState]
+        ]
+      )
+    }),
+    [squareAnimationProgress]
+  );
+
+  const animatedSwitchCircle = useAnimatedStyle(() => {
+    const translateX = interpolate(
+      squareAnimationProgress.value,
+      [0, 1],
+      [
+        0,
+        IOSwitchVisualParams.width -
+          SWITCH_CIRCLE_SIZE -
+          2 * IOSwitchVisualParams.padding
+      ]
+    );
+
+    return {
+      transform: [{ translateX }]
+    };
+  });
+
+  const animatedSwitchTick = useAnimatedStyle(() => ({
+    opacity: tickAnimationProgress.value
+  }));
+
+  return (
+    <Pressable
+      disabled={disabled}
+      testID="AnimatedSwitch"
+      onPress={onPress}
+      style={styles.switchWrapper}
+    >
+      <Animated.View style={[styles.switchBackground, animatedSwitchBg]} />
+      <Animated.View style={[styles.switchCircle, animatedSwitchCircle]}>
+        <Animated.View style={animatedSwitchTick}>
+          <AnimatedTick
+            progress={tickAnimationProgress}
+            stroke={IOColors[IOSwitchVisualParams.tickColor]}
+          />
+        </Animated.View>
+      </Animated.View>
+    </Pressable>
+  );
+};

package/src/components/switch/NativeSwitch.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Switch, SwitchProps } from "react-native";
+import { IOColors } from "../../core/IOColors";
+import { IOSwitchVisualParams } from "../../core/IOStyles";
+
+type OwnProps = Pick<SwitchProps, "onValueChange" | "value">;
+
+export const NativeSwitch = ({ onValueChange, value }: OwnProps) => (
+  <Switch
+    trackColor={{
+      false: IOColors[IOSwitchVisualParams.bgColorOffState],
+      true: IOColors[IOSwitchVisualParams.bgColorOnState]
+    }}
+    thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
+    ios_backgroundColor={IOColors[IOSwitchVisualParams.bgColorOffState]}
+    onValueChange={onValueChange}
+    value={value}
+  />
+);

package/src/components/switch/SwitchLabel.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { useState } from "react";
+import { Pressable, View } from "react-native";
+import { H6 } from "../typography/H6";
+import { HSpacer } from "../spacer/Spacer";
+import { IOStyles } from "../../core/IOStyles";
+import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
+import { AnimatedSwitch } from "./AnimatedSwitch";
+
+type Props = {
+  label: string;
+  // dispatch the new value after the checkbox changes state
+  onValueChange?: (newValue: boolean) => void;
+};
+
+const DISABLED_OPACITY = 0.5;
+
+// disabled: the component is no longer touchable
+// onPress:
+type OwnProps = Props &
+  Pick<React.ComponentProps<typeof AnimatedSwitch>, "disabled" | "checked"> &
+  Pick<React.ComponentProps<typeof Pressable>, "onPress">;
+
+/**
+ * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox}
+ * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
+ *
+ * @param props
+ * @constructor
+ */
+export const SwitchLabel = ({
+  label,
+  checked,
+  disabled,
+  onValueChange
+}: OwnProps) => {
+  const [toggleValue, setToggleValue] = useState(checked ?? false);
+
+  const toggleCheckbox = () => {
+    triggerHaptic("impactLight");
+    setToggleValue(!toggleValue);
+    if (onValueChange !== undefined) {
+      onValueChange(!toggleValue);
+    }
+  };
+
+  return (
+    <Pressable
+      disabled={disabled}
+      onPress={toggleCheckbox}
+      testID="AnimatedCheckbox"
+      style={{
+        alignSelf: "flex-start",
+        opacity: disabled ? DISABLED_OPACITY : 1
+      }}
+    >
+      <View
+        style={[
+          IOStyles.row,
+          { alignItems: "flex-start", flexShrink: 1, width: "100%" }
+        ]}
+      >
+        <View pointerEvents="none">
+          <AnimatedSwitch checked={checked ?? toggleValue} />
+        </View>
+        <HSpacer size={8} />
+        <H6 style={{ flexShrink: 1 }} color={"black"}>
+          {label}
+        </H6>
+      </View>
+    </Pressable>
+  );
+};

package/src/components/switch/index.tsx

@@ -0,0 +1,3 @@
+export * from "./SwitchLabel";
+export * from "./AnimatedSwitch";
+export * from "./NativeSwitch";

package/src/components/tag/Tag.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { View, Text, StyleSheet, Platform } from "react-native";
+import { WithTestID } from "../../utils/types";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { IOColors } from "../../core/IOColors";
+import { IOIconSizeScale, IOIcons, Icon } from "../icons";
+import { IOTagRadius } from "../../core/IOShapes";
+import {
+  IOSpacingScale,
+  IOTagHSpacing,
+  IOTagVSpacing
+} from "../../core/IOSpacing";
+
+export type Tag = WithTestID<{
+  text: string;
+  variant: "qrCode" | "legalMessage" | "info" | "warning" | "error" | "success";
+}>;
+
+type VariantProps = {
+  iconColor: IOColors;
+  iconName: IOIcons;
+};
+
+const mapVariants: Record<NonNullable<Tag["variant"]>, VariantProps> = {
+  qrCode: {
+    iconColor: "blueIO-500",
+    iconName: "qrCode"
+  },
+  legalMessage: {
+    iconColor: "blueIO-500",
+    iconName: "legalValue"
+  },
+  info: {
+    iconColor: "info-700",
+    iconName: "info"
+  },
+  warning: {
+    iconColor: "warning-700",
+    iconName: "warningFilled"
+  },
+  error: {
+    iconColor: "error-600",
+    iconName: "errorFilled"
+  },
+  success: {
+    iconColor: "success-700",
+    iconName: "success"
+  }
+};
+
+const IOTagIconMargin: IOSpacingScale = 6;
+const IOTagIconSize: IOIconSizeScale = 16;
+
+const styles = StyleSheet.create({
+  tag: {
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    ...Platform.select({
+      android: {
+        textAlignVertical: "center"
+      }
+    }),
+    borderWidth: 1,
+    backgroundColor: IOColors.white,
+    borderColor: IOColors["grey-100"],
+    borderRadius: IOTagRadius,
+    paddingHorizontal: IOTagHSpacing,
+    paddingVertical: IOTagVSpacing
+  },
+  iconWrapper: {
+    marginEnd: IOTagIconMargin,
+    flexShrink: 1
+  },
+  label: {
+    fontSize: 12,
+    lineHeight: 16,
+    alignSelf: "center",
+    textTransform: "uppercase",
+    color: IOColors["grey-700"],
+    flexShrink: 1,
+    ...makeFontStyleObject("Regular", false, "ReadexPro")
+  }
+});
+
+/**
+ * Tag component, used mainly for message list and details
+ */
+export const Tag = ({ text, variant, testID }: Tag) => (
+  <View testID={testID} style={styles.tag}>
+    <View style={styles.iconWrapper}>
+      <Icon
+        name={mapVariants[variant].iconName}
+        color={mapVariants[variant].iconColor}
+        size={IOTagIconSize}
+      />
+    </View>
+    <Text numberOfLines={1} ellipsizeMode="tail" style={styles.label}>
+      {text}
+    </Text>
+  </View>
+);

package/src/components/tag/index.tsx

@@ -0,0 +1 @@
+export * from "./Tag";

package/src/components/typography/BaseTypography.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { IOColors } from "../../core/IOColors";
+import {
+  IOFontFamily,
+  IOFontWeight,
+  makeFontStyleObject
+} from "../../utils/fonts";
+
+/**
+ * The specific properties needed to calculate the font style using {@link makeFontStyleObject} (these information
+ * cannot be included in the default StyleProp<TextStyle>
+ */
+type BaseTypographyProps = {
+  weight: IOFontWeight;
+  color: IOColors;
+  font?: IOFontFamily;
+  isItalic?: boolean;
+};
+
+type OwnProps = BaseTypographyProps & {
+  fontStyle?: StyleProp<TextStyle>;
+} & React.ComponentPropsWithRef<typeof Text>;
+
+/**
+ * Decorate the function {@link makeFontStyleObject} with the additional color calculation.
+ * @param color A value key from {@link IOColors}, transformed here in {@link ColorValue}
+ * @param args the args of the function {@link makeFontStyleObject}
+ */
+const calculateTextStyle = (
+  color: IOColors,
+  ...args: Parameters<typeof makeFontStyleObject>
+) => ({
+  ...makeFontStyleObject(...args),
+  color: IOColors[color]
+});
+
+/**
+ * `BaseTypography` is the core Typography component used to render a text.
+ * It accepts all the default text style `StyleProp<TextStyle>` in addition with {@link BaseTypographyProps}
+ * used to calculate at runtime the platform-dependent styles.
+ * This component shouldn't be used in the application but only to compose others `Typography elements`.
+ * @param props
+ * @constructor
+ */
+export const BaseTypography: React.FC<OwnProps> = props => {
+  const fontStyle = useMemo(
+    () =>
+      calculateTextStyle(props.color, props.weight, props.isItalic, props.font),
+    [props.color, props.weight, props.isItalic, props.font]
+  );
+  const style = props.style
+    ? [props.style, props.fontStyle, fontStyle]
+    : [props.fontStyle, fontStyle];
+
+  return (
+    <Text {...props} style={style}>
+      {props.children}
+    </Text>
+  );
+};