npm - @pagopa/io-app-design-system - Versions diffs - 1.7.1 → 1.9.0 - Mend

@pagopa/io-app-design-system 1.7.1 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (685) hide show

package/src/components/pictograms/svg/originals/PictogramObjIbanCard.svg ADDED Viewed

@@ -0,0 +1,59 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.75195 53c-2.20914 0-4 1.7909-4 4v109.372c0 2.209 1.79086 4 4 4H182.916c-.598-2.353-.916-4.818-.916-7.357 0-16.448 13.334-29.781 29.781-29.781 2.302 0 4.542.261 6.693.755V57c0-2.2091-1.791-4-4-4H8.75195Z"
+    fill="#AAEEEF"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M70 70.5273c0-.5522.4477-1 1-1h130c.552 0 1 .4478 1 1 0 .5523-.448 1-1 1H71c-.5523 0-1-.4477-1-1ZM70 81c0-.5523.4477-1 1-1h79c.552 0 1 .4477 1 1s-.448 1-1 1H71c-.5523 0-1-.4477-1-1Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M79.0801 109v-1.5h1.695v-7.5001h-1.695v-1.5h5.01v1.5h-1.695V107.5h1.695v1.5h-5.01ZM88.6282 109v-8.94h-2.94v-1.5601h7.59v1.5601h-3.03V109h-1.62ZM101.265 108.265v-8.5201l.555.4201-2.0702 1.095-.435-1.4101 2.8052-1.5h.78v9.9151h-1.635Zm-1.6652.735v-1.56h5.0102V109h-5.0102ZM106.905 109l-.495-1.23 3.21-3.615c.17-.18.345-.385.525-.615.19-.24.37-.485.54-.735.17-.25.305-.495.405-.735.11-.25.165-.485.165-.705 0-.32-.065-.59-.195-.81-.12-.23-.3-.405-.54-.525-.23-.1201-.51-.1801-.84-.1801-.29 0-.575.085-.855.2551-.28.17-.535.41-.765.72-.23.31-.41.67-.54 1.08l-1.245-.78c.17-.58.425-1.075.765-1.4851.35-.42.765-.74 1.245-.96.49-.22 1.02-.33 1.59-.33.59 0 1.115.125 1.575.375.46.24.82.58 1.08 1.02.26.4301.39.9301.39 1.5001 0 .29-.04.59-.12.9-.08.3-.21.615-.39.945-.17.33-.39.68-.66 1.05-.27.36-.595.745-.975 1.155l-2.385 2.595-.3-.45h5.16V109h-6.345ZM121.697 109.15c-.74 0-1.385-.17-1.935-.51-.54-.34-1.05-.91-1.53-1.71l1.26-.795c.25.37.495.675.735.915.25.23.505.4.765.51.26.11.535.165.825.165.35 0 .675-.085.975-.255.3-.18.54-.425.72-.735.18-.31.27-.66.27-1.05s-.07-.72-.21-.99c-.14-.28-.345-.49-.615-.63-.27-.15-.59-.225-.96-.225-.17 0-.35.02-.54.06-.18.03-.375.08-.585.15-.21.06-.44.14-.69.24l-.45-1.185 3.24-3.5701.315.465h-4.47v-1.5h6.015l.3.6-3.435 3.8101-.375-.39c.08-.04.21-.075.39-.105.19-.04.345-.06.465-.06.44 0 .85.085 1.23.255.39.16.725.39 1.005.69.29.29.515.635.675 1.035.17.39.255.81.255 1.26 0 .68-.165 1.29-.495 1.83-.32.53-.755.95-1.305 1.26-.55.31-1.165.465-1.845.465ZM135.355 109v-8.46l.375.09-3.45 4.215-.06-.18h6.525v1.485h-7.53l-.69-1.35 5.145-6.3001h1.245V109h-1.56ZM143.232 109.105c-.69 0-1.315-.155-1.875-.465-.56-.32-1.025-.775-1.395-1.365l.9-1.005c.47.52.88.875 1.23 1.065.35.19.73.285 1.14.285.41 0 .78-.09 1.11-.27.33-.18.59-.425.78-.735.2-.31.3-.655.3-1.035 0-.4-.095-.755-.285-1.065-.18-.32-.425-.57-.735-.75-.31-.19-.66-.285-1.05-.285-.19 0-.37.015-.54.045-.17.02-.375.075-.615.165-.24.09-.555.23-.945.42l-.855-1.155.615-4.4551h5.67v1.5h-4.65l.315-.285-.495 3.3301-.375-.435c.1-.1.27-.195.51-.285.24-.1.505-.18.795-.24.3-.07.585-.105.855-.105.64 0 1.21.15 1.71.45.51.29.91.695 1.2 1.215.3.52.45 1.115.45 1.785 0 .69-.165 1.315-.495 1.875-.33.55-.78.99-1.35 1.32-.57.32-1.21.48-1.92.48ZM152.147 109c-.52 0-1.005-.09-1.455-.27-.44-.19-.825-.45-1.155-.78-.32-.33-.575-.72-.765-1.17-.18-.45-.27-.945-.27-1.485 0-.36.065-.78.195-1.26.14-.48.34-1.005.6-1.575.27-.57.6-1.18.99-1.83l1.365-2.3101h1.575l.06.15-1.65 2.7751c-.3.51-.57.995-.81 1.455-.23.46-.425.895-.585 1.305-.16.4-.28.765-.36 1.095l-.36-1.545c.25-.41.53-.755.84-1.035.31-.28.645-.49 1.005-.63.36-.15.745-.225 1.155-.225.58 0 1.11.16 1.59.48.49.31.88.725 1.17 1.245.3.52.45 1.09.45 1.71 0 .75-.155 1.42-.465 2.01-.3.58-.72 1.04-1.26 1.38-.54.34-1.16.51-1.86.51Zm0-1.5c.39 0 .735-.09 1.035-.27.31-.19.55-.45.72-.78.18-.34.27-.725.27-1.155 0-.37-.09-.715-.27-1.035-.18-.33-.42-.595-.72-.795-.3-.2-.635-.3-1.005-.3-.41 0-.775.095-1.095.285-.32.19-.57.445-.75.765-.18.32-.27.675-.27 1.065 0 .42.09.8.27 1.14.18.33.425.595.735.795.31.19.67.285 1.08.285ZM157.932 109l4.35-9.4801.18.48h-5.31v-1.5h6.495l.21 1.035L159.672 109h-1.74ZM168.424 109.045c-.65 0-1.245-.135-1.785-.405-.53-.28-.955-.65-1.275-1.11-.32-.46-.48-.97-.48-1.53 0-.31.04-.6.12-.87.09-.28.22-.535.39-.765.18-.23.395-.44.645-.63s.54-.36.87-.51l-.09.315c-.35-.13-.65-.3-.9-.51-.25-.22-.445-.47-.585-.75-.13-.28-.195-.585-.195-.915 0-.53.145-1.01.435-1.4401.3-.43.695-.775 1.185-1.035.5-.26 1.055-.39 1.665-.39.61 0 1.16.13 1.65.39.5.26.895.605 1.185 1.035.3.4301.45.9101.45 1.4401 0 .33-.065.63-.195.9s-.32.515-.57.735c-.25.21-.56.39-.93.54l-.045-.255c.4.16.75.38 1.05.66.3.28.535.6.705.96.17.35.255.715.255 1.095 0 .57-.16 1.085-.48 1.545-.32.46-.75.825-1.29 1.095-.53.27-1.125.405-1.785.405Zm0-1.5c.37 0 .7-.07.99-.21.3-.14.535-.33.705-.57.17-.24.255-.515.255-.825 0-.33-.085-.62-.255-.87-.17-.26-.405-.465-.705-.615-.29-.15-.62-.225-.99-.225s-.7.075-.99.225c-.29.15-.52.355-.69.615-.17.25-.255.54-.255.87 0 .3.085.57.255.81.17.24.4.435.69.585.29.14.62.21.99.21Zm0-4.755c.32 0 .605-.06.855-.18.26-.12.46-.28.6-.48.15-.21.225-.45.225-.72 0-.27-.075-.51-.225-.72-.14-.21-.34-.375-.6-.495-.25-.13-.535-.1951-.855-.1951-.32 0-.61.0651-.87.1951-.25.12-.45.285-.6.495-.14.21-.21.45-.21.72 0 .27.07.51.21.72.15.2.35.36.6.48.26.12.55.18.87.18ZM180.4 109l-.06-.15 3.12-6.63.045 1.245c-.23.39-.5.73-.81 1.02-.31.28-.645.495-1.005.645-.36.15-.725.225-1.095.225-.57 0-1.095-.15-1.575-.45-.48-.3-.865-.7-1.155-1.2-.29-.5-.435-1.045-.435-1.635 0-.71.16-1.345.48-1.905.32-.5701.755-1.0201 1.305-1.3501.56-.33 1.185-.495 1.875-.495.5 0 .97.09 1.41.27.44.18.825.435 1.155.765.33.32.59.6951.78 1.1251.19.42.285.87.285 1.35 0 .25-.025.52-.075.81-.05.28-.135.6-.255.96-.11.35-.26.755-.45 1.215-.19.45-.425.975-.705 1.575L181.99 109h-1.59Zm.54-5.145c.39 0 .74-.085 1.05-.255.31-.18.55-.415.72-.705.18-.3.27-.635.27-1.005 0-.39-.085-.74-.255-1.05-.17-.32-.41-.57-.72-.75-.3-.1801-.645-.2701-1.035-.2701-.36 0-.68.09-.96.2701-.28.17-.505.41-.675.72-.16.3-.24.655-.24 1.065 0 .35.08.675.24.975.17.3.395.545.675.735.28.18.59.27.93.27ZM189.786 109.15c-.8 0-1.49-.22-2.07-.66-.57-.44-1.01-1.06-1.32-1.86-.31-.81-.465-1.77-.465-2.88 0-1.11.155-2.065.465-2.865.31-.81.75-1.4351 1.32-1.8751.58-.44 1.27-.66 2.07-.66.8 0 1.49.22 2.07.66.58.44 1.025 1.0651 1.335 1.8751.31.8.465 1.755.465 2.865 0 1.11-.155 2.07-.465 2.88-.31.8-.755 1.42-1.335 1.86-.58.44-1.27.66-2.07.66Zm0-1.47c.73 0 1.295-.34 1.695-1.02.4-.69.6-1.66.6-2.91 0-1.25-.2-2.215-.6-2.895-.4-.69-.965-1.0351-1.695-1.0351-.73 0-1.295.3451-1.695 1.0351-.4.68-.6 1.645-.6 2.895s.2 2.22.6 2.91c.4.68.965 1.02 1.695 1.02ZM196.063 109.165c-.33 0-.585-.095-.765-.285-.18-.2-.27-.48-.27-.84 0-.33.095-.6.285-.81.19-.21.44-.315.75-.315.33 0 .585.1.765.3.18.19.27.465.27.825 0 .33-.095.6-.285.81-.19.21-.44.315-.75.315ZM199.476 109.165c-.33 0-.585-.095-.765-.285-.18-.2-.27-.48-.27-.84 0-.33.095-.6.285-.81.19-.21.44-.315.75-.315.33 0 .585.1.765.3.18.19.27.465.27.825 0 .33-.095.6-.285.81-.19.21-.44.315-.75.315ZM202.889 109.165c-.33 0-.585-.095-.765-.285-.18-.2-.27-.48-.27-.84 0-.33.095-.6.285-.81.19-.21.44-.315.75-.315.33 0 .585.1.765.3.18.19.27.465.27.825 0 .33-.095.6-.285.81-.19.21-.44.315-.75.315ZM189.487 167.917c.916 3.589 2.418 6.519 4.609 9.06 5.033 5.835 11.453 8.665 19.111 8.1 10.177-.752 17.811-7.865 20.213-16.735.44-1.633.729-3.289.749-4.994.014-1.204.231-1.544.824-1.582.648-.044.851.327.811 1.691-.163 5.168-1.838 9.815-4.942 13.918-4.029 5.331-9.428 8.566-15.993 9.393-13.081 1.643-23.496-6.362-26.698-17.347-.108-.374-.261-.735-.43-1.208-.506.653-.93 1.239-1.394 1.783-.285.333-.689.429-1.042.109-.315-.286-.423-.667-.145-1.055.854-1.184 1.709-2.368 2.581-3.541.088-.116.259-.275.532-.256.273.019 2.52 1.599 3.781 2.426.394.259.696.606.401 1.13-.262.466-.692.541-1.293.19-.485-.282-.942-.609-1.671-1.085l-.004.003ZM235.257 156.748c.468-.65.811-1.245 1.279-1.715.217-.217.793-.353 1.004-.214.223.146.396.779.264.997-.736 1.194-1.536 2.354-2.387 3.47-.302.395-.835.316-1.242.054-1.132-.728-2.255-1.479-3.374-2.231-.383-.255-.499-.606-.238-1.014.248-.385.628-.504 1.025-.299.542.282 1.054.629 1.756 1.054-.054-.439-.044-.738-.135-1.003-2.839-8.455-8.638-13.779-17.286-15.572-11.809-2.446-23.004 4.988-26.118 15.834-.532 1.85-.902 3.708-.936 5.633-.02 1.123-.318 1.538-.936 1.453-.549-.075-.763-.432-.705-1.49.275-5.202 1.933-9.914 5.128-14.034 3.971-5.127 9.224-8.202 15.587-9.161 11.863-1.79 22.99 5.324 26.595 16.258.207.633.451 1.252.716 1.98h.003Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M225.929 162.518c-.071 7.917-6.332 14.486-14.505 14.469-7.99-.017-14.414-6.311-14.424-14.53-.014-8.09 6.447-14.493 14.485-14.469 8.282.027 14.42 6.753 14.447 14.534l-.003-.004Z"
+    fill="#AAEEEF"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M212.596 155.673c0-.329-.267-.596-.596-.596-.33 0-.597.267-.597.596v5.965h-5.964c-.33 0-.597.267-.597.596 0 .33.267.597.597.597h5.964v5.965c0 .33.267.597.597.597.329 0 .596-.267.596-.597v-5.965h5.965c.329 0 .596-.267.596-.597 0-.329-.267-.596-.596-.596h-5.965v-5.965Z"
+    fill="#00C5CA"
+  />
+  <mask
+    id="a"
+    style="mask-type:alpha"
+    maskUnits="userSpaceOnUse"
+    x="2"
+    y="64"
+    width="50"
+    height="90"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.20187 64.6594c.3327-.4409.95977-.5285 1.40059-.1958L47.6431 97.7018c1.5317 1.156.7142 3.5962-1.2048 3.5962H4.75188c-.55229 0-1-.448-1-1 0-.5521.44771-.9998 1-.9998H46.4383L2.39765 66.06c-.44083-.3327-.52848-.9598-.19578-1.4006Z"
+      fill="#00C5CA"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M24.7739 99.298h14.2628v47.547H24.7739V99.298Zm2 2v43.547h10.2628v-43.547H26.7739ZM3.75195 100.298c0-.5523.44772-1 1-1h7.13135v47.547H4.75195c-.55228 0-1-.447-1-1 0-.552.44772-1 1-1h5.13138v-43.547H4.75195c-.55228 0-1-.448-1-1Z"
+      fill="#00C5CA"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.75195 145.845c0-.552.44772-1 1-1H48.2993c1.6569 0 3 1.344 3 3v3.008c0 1.657-1.3431 3-3 3H4.75195c-.55228 0-1-.448-1-1 0-.553.44772-1 1-1H48.2993c.5523 0 1-.448 1-1v-3.008c0-.552-.4477-1-1-1H4.75195c-.55228 0-1-.447-1-1Z"
+      fill="#00C5CA"
+    />
+  </mask>
+  <g mask="url(#a)">
+    <path fill="#00C5CA" d="M55.5547 52.125H4.7519v108.613h50.8028z" />
+  </g>
+</svg>

package/src/components/pictograms/svg/originals/PictogramObjKey.svg ADDED Viewed

@@ -0,0 +1,14 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M205.558 116.024c23.689-15.042 30.699-46.4401 15.657-70.1294-15.042-23.6893-46.439-30.6995-70.129-15.6576-21.47 13.6329-29.24 40.7012-19.308 63.289L7.2705 172.584l10.7207 16.883 13.9341-8.847 18.8831 29.739 16.8839-10.721-18.8831-29.739 6.4264-4.08 25.3962 39.996 16.8839-10.721-25.3962-39.996 71.1445-45.174c16.498 15.744 42.175 18.874 62.294 6.1Z"
+    fill="#AAEEEF"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M141.896 51.8743c-7.104 13.7827-7.088 30.9232-1.533 42.9989l.549 1.1936L16.3012 174.768c-.7004.443-1.6269.233-2.0692-.467-.4424-.7-.2332-1.627.4672-2.069L137.107 94.9219c-5.407-12.8294-5.168-30.2783 2.122-44.4221 7.584-14.7126 22.762-25.7787 46.851-24.4968.827.0441 1.462.7504 1.418 1.5776-.044.8273-.75 1.4622-1.578 1.4182-22.911-1.2193-36.982 9.2135-44.024 22.8755ZM50.7094 203.765c-.7127.422-1.6328.187-2.0552-.526L34.1836 178.82c-.4223-.713-.1869-1.633.5258-2.055.7127-.423 1.6328-.187 2.0551.525l14.4706 24.42c.4224.712.187 1.632-.5257 2.055ZM83.7168 200.777c-.7087.429-1.6309.202-2.0599-.507l-21.4466-35.433c-.429-.709-.2022-1.631.5065-2.06.7088-.429 1.631-.202 2.06.506l21.4466 35.434c.429.709.2022 1.631-.5066 2.06Z"
+    fill="#00C5CA"
+  />
+</svg>

package/src/components/pictograms/svg/originals/PictogramSecurity.svg ADDED Viewed

@@ -0,0 +1,30 @@
+<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M110.53 162.33L109.36 152.05L116.13 146.4L120.96 147.02L123.88 136.31L126.49 132.47L136 129.83L142.8 133.15C142.82 132.81 142.86 132.47 142.86 132.13V68.12C142.86 60.8 138.51 54.17 131.8 51.25L93.24 34.52C88.57 32.49 83.26 32.49 78.59 34.52L40.06 51.25C33.35 54.17 29 60.79 29 68.12V132.13C29 137.55 31.39 142.7 35.54 146.2L74.07 178.65C80.91 184.41 90.91 184.41 97.76 178.65L112.39 166.33L110.52 162.34L110.53 162.33Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M137.661 196.7C136.351 196.7 134.931 196.56 133.391 196.27C122.631 194.29 115.071 185.08 112.591 177.37C111.081 172.65 111.451 168.66 113.621 166.42L116.501 169.2C115.441 170.3 115.401 173.03 116.401 176.16C118.521 182.78 124.971 190.66 134.111 192.35C138.351 193.13 141.211 192.66 142.621 190.96C144.991 188.08 143.281 181.83 142.421 179.67L146.141 178.19C146.551 179.21 149.991 188.28 145.721 193.49C143.961 195.64 141.261 196.71 137.661 196.71V196.7Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M141.3 179.76C138.34 179.76 134.75 179.25 130.53 178.21C113.64 174.08 109.5 162.23 108.53 155.53C108 151.86 108.95 148.24 111.14 145.58C113.96 142.15 117.88 141.46 121.89 143.69L119.95 147.19C117.6 145.88 115.83 146.17 114.23 148.12C112.76 149.91 112.12 152.41 112.49 154.96C113.31 160.66 116.87 170.76 131.48 174.33C141.61 176.8 146.21 175.67 147.15 173.79C147.84 172.4 146.76 170.28 145.71 169.44L148.22 166.33C150.71 168.34 152.33 172.34 150.73 175.57C149.35 178.37 146.19 179.77 141.3 179.77V179.76Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M146.89 169.91C142.12 169.91 135.67 166.92 126.48 160.53C120.97 156.7 118.38 150.49 118.98 142.59C119.54 135.26 125.15 129.31 132.02 128.75C134.06 128.58 138.29 128.24 141.53 131.12C143.94 133.26 145.25 136.74 145.43 141.44L141.43 141.59C141.3 138.01 140.44 135.5 138.87 134.11C137.06 132.5 134.55 132.56 132.34 132.74C127.4 133.14 123.37 137.51 122.96 142.9C122.46 149.4 124.41 154.23 128.75 157.26C138.23 163.86 144.61 166.64 148.25 165.78C149.6 165.46 150.61 164.61 151.42 163.12C152.19 161.7 150.89 159.47 150.04 158.26C145.83 152.27 135.8 146.42 132.23 146.96L131.63 143.01C137.49 142.12 148.81 149.55 153.32 155.96C156.37 160.3 155.89 163.29 154.94 165.03C153.58 167.53 151.65 169.09 149.18 169.68C148.46 169.85 147.7 169.94 146.89 169.94V169.91Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M193.3 159.28C186.32 159.28 179.37 157.55 172.68 154.08C166.06 150.65 161.56 144.2 160.64 136.81C160.14 132.76 161 127.59 161.83 122.59C162.81 116.68 163.92 109.98 162.03 107.74C161.72 107.37 161.13 106.88 159.64 106.88C156.83 106.88 154.49 107.89 152.49 109.96C144.77 117.98 145.43 138.23 145.44 138.43L141.44 138.58C141.41 137.68 140.71 116.43 149.61 107.19C152.36 104.33 155.74 102.88 159.64 102.88C161.97 102.88 163.8 103.64 165.08 105.15C168.17 108.8 167.01 115.81 165.78 123.24C165 127.96 164.19 132.83 164.62 136.31C165.38 142.48 168.99 147.66 174.53 150.52C186.04 156.48 198.37 156.82 210.17 151.53L211.81 155.18C205.72 157.91 199.5 159.28 193.31 159.28H193.3Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M187.88 206.26C179.42 206.26 171.48 204.88 165.11 203.27C151.92 199.94 142.67 195.1 142.28 194.9L144.15 191.36C144.51 191.55 180.81 210.36 210.21 198.14L211.75 201.83C203.91 205.09 195.68 206.26 187.89 206.26H187.88Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M78.5101 128.64C78.1101 128.64 77.7201 128.48 77.4401 128.19L52.2101 102.45C51.6301 101.86 51.6401 100.91 52.2301 100.33C52.8201 99.75 53.7701 99.76 54.3501 100.35L78.4801 124.97L120.84 79.49C121.4 78.88 122.35 78.85 122.96 79.41C123.57 79.97 123.6 80.92 123.04 81.53L79.6101 128.16C79.3301 128.46 78.9401 128.63 78.5301 128.64H78.5101Z"
+    fill="#00C5CA"
+  />
+</svg>

package/src/components/radio/AnimatedRadio.tsx CHANGED Viewed

@@ -8,9 +8,13 @@ import Animated, {
   withSpring,
   withTiming
 } from "react-native-reanimated";
+import { useIOExperimentalDesign } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
-import { IOSelectionTickVisualParams } from "../../core/IOStyles";
+import {
+  IOSelectionTickLegacyVisualParams,
+  IOSelectionTickVisualParams
+} from "../../core/IOStyles";
 import { AnimatedTick } from "../common/AnimatedTick";
 type Props = {
@@ -50,6 +54,25 @@ const styles = StyleSheet.create({
 export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
   const isChecked = checked ?? false;
+  const { isExperimental } = useIOExperimentalDesign();
+  const borderColorOffState =
+    IOColors[IOSelectionTickVisualParams.borderColorOffState];
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyBorderColorOffState =
+    IOColors[IOSelectionTickLegacyVisualParams.borderColorOffState];
+  const borderColorProp = isExperimental
+    ? borderColorOffState
+    : legacyBorderColorOffState;
+  const backgroundColorOnState =
+    IOColors[IOSelectionTickVisualParams.bgColorOnState];
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyBackgroundColorOnState =
+    IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState];
+  const backgroundColorProp = isExperimental
+    ? backgroundColorOnState
+    : legacyBackgroundColorOnState;
   const circleAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
@@ -87,8 +110,7 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
         style={[
           styles.radioBorder,
           {
-            borderColor:
-              IOColors[IOSelectionTickVisualParams.borderColorOffState]
+            borderColor: borderColorProp
           }
         ]}
       />
@@ -96,8 +118,7 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
         style={[
           styles.radioCircle,
           {
-            backgroundColor:
-              IOColors[IOSelectionTickVisualParams.bgColorOnState]
+            backgroundColor: backgroundColorProp
           },
           animatedCheckboxSquare
         ]}

package/src/components/switch/NativeSwitch.tsx CHANGED Viewed

@@ -1,19 +1,41 @@
 import React from "react";
-import { Switch, SwitchProps } from "react-native";
+import { Platform, Switch, SwitchProps } from "react-native";
+import { useIOExperimentalDesign } from "../../core";
 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}
-  />
-);
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const bgLegacyTrackColorAndroid =
+  Platform.OS === "android" ? IOColors["grey-300"] : IOColors.greyUltraLight;
+export const NativeSwitch = ({ onValueChange, value }: OwnProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+  const trackColor = {
+    false: IOColors[IOSwitchVisualParams.bgColorOffState],
+    true: IOColors[IOSwitchVisualParams.bgColorOnState]
+  };
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyTrackColor = {
+    false: bgLegacyTrackColorAndroid,
+    true: IOColors.blue
+  };
+  const trackColorComponent = isExperimental ? trackColor : legacyTrackColor;
+  return (
+    <Switch
+      trackColor={trackColorComponent}
+      thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
+      ios_backgroundColor={
+        isExperimental
+          ? IOColors[IOSwitchVisualParams.bgColorOffState]
+          : bgLegacyTrackColorAndroid
+      }
+      onValueChange={onValueChange}
+      value={value}
+    />
+  );
+};

package/src/components/switch/SwitchLabel.tsx CHANGED Viewed

@@ -1,10 +1,12 @@
 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 { Pressable, StyleSheet, Text, View } from "react-native";
+import { IOColors, useIOExperimentalDesign } from "../../core";
 import { IOStyles } from "../../core/IOStyles";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { HSpacer } from "../spacer/Spacer";
+import { H6 } from "../typography/H6";
 import { AnimatedSwitch } from "./AnimatedSwitch";
 type Props = {
@@ -21,6 +23,17 @@ type OwnProps = Props &
   Pick<React.ComponentProps<typeof AnimatedSwitch>, "disabled" | "checked"> &
   Pick<React.ComponentProps<typeof Pressable>, "onPress">;
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const styles = StyleSheet.create({
+  legacyTextValue: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: IOColors.bluegreyDark,
+    flexShrink: 1,
+    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
+  }
+});
 /**
  * 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`.
@@ -36,6 +49,22 @@ export const SwitchLabel = ({
 }: OwnProps) => {
   const [toggleValue, setToggleValue] = useState(checked ?? false);
+  const { isExperimental } = useIOExperimentalDesign();
+  const switchLabelText = (
+    <H6 style={{ flexShrink: 1 }} color={"black"}>
+      {label}
+    </H6>
+  );
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacySwitchlabelText = (
+    <Text style={styles.legacyTextValue}>{label}</Text>
+  );
+  const switchLabelTextComponent = isExperimental
+    ? switchLabelText
+    : legacySwitchlabelText;
   const toggleCheckbox = () => {
     triggerHaptic("impactLight");
     setToggleValue(!toggleValue);
@@ -64,9 +93,7 @@ export const SwitchLabel = ({
           <AnimatedSwitch checked={checked ?? toggleValue} />
         </View>
         <HSpacer size={8} />
-        <H6 style={{ flexShrink: 1 }} color={"black"}>
-          {label}
-        </H6>
+        {switchLabelTextComponent}
       </View>
     </Pressable>
   );

package/src/components/tag/Tag.tsx CHANGED Viewed

@@ -4,9 +4,8 @@ import { pipe } from "fp-ts/lib/function";
 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 { IOColors, IOTagRadius, useIOExperimentalDesign } from "../../core";
 import {
   IOSpacingScale,
   IOTagHSpacing,
@@ -99,33 +98,49 @@ const styles = StyleSheet.create({
     alignSelf: "center",
     textTransform: "uppercase",
     color: IOColors["grey-700"],
-    flexShrink: 1,
+    flexShrink: 1
+  },
+  labelFont: {
     ...makeFontStyleObject("Regular", false, "ReadexPro")
+  },
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  legacyLabelFont: {
+    ...makeFontStyleObject("SemiBold", false, "TitilliumWeb")
   }
 });
 /**
  * Tag component, used mainly for message list and details
  */
-export const Tag = ({ text, variant, testID }: Tag) => (
-  <View testID={testID} style={styles.tag}>
-    {pipe(
-      mapVariants[variant],
-      O.fromNullable,
-      O.fold(
-        () => null,
-        ({ iconColor, iconName }) => (
-          <View style={styles.iconWrapper}>
-            <Icon name={iconName} color={iconColor} size={IOTagIconSize} />
-          </View>
+export const Tag = ({ text, variant, testID }: Tag) => {
+  const { isExperimental } = useIOExperimentalDesign();
+  return (
+    <View testID={testID} style={styles.tag}>
+      {pipe(
+        mapVariants[variant],
+        O.fromNullable,
+        O.fold(
+          () => null,
+          ({ iconColor, iconName }) => (
+            <View style={styles.iconWrapper}>
+              <Icon name={iconName} color={iconColor} size={IOTagIconSize} />
+            </View>
+          )
         )
-      )
-    )}
-    {mapVariants[variant] && text && <View style={styles.spacer} />}
-    {text && (
-      <Text numberOfLines={1} ellipsizeMode="tail" style={styles.label}>
-        {text}
-      </Text>
-    )}
-  </View>
-);
+      )}
+      {mapVariants[variant] && text && <View style={styles.spacer} />}
+      {text && (
+        <Text
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          style={[
+            styles.label,
+            isExperimental ? styles.labelFont : styles.legacyLabelFont
+          ]}
+        >
+          {text}
+        </Text>
+      )}
+    </View>
+  );
+};

package/src/components/textInput/TextInputBase.tsx CHANGED Viewed

@@ -13,7 +13,12 @@ import Animated, {
   useSharedValue,
   withTiming
 } from "react-native-reanimated";
-import { IOColors, IOSpacingScale, IOStyles } from "../../core";
+import {
+  IOColors,
+  IOSpacingScale,
+  IOStyles,
+  useIOExperimentalDesign
+} from "../../core";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
 import { LabelSmall } from "../typography";
@@ -58,12 +63,18 @@ const styles = StyleSheet.create({
   },
   textInputStyle: {
     ...IOStyles.flex,
-    ...makeFontStyleObject("Regular", false, "ReadexPro"),
     fontSize: 16,
     marginTop: IOSpacingScale[2],
     lineHeight: 24,
     height: "100%"
   },
+  textInputStyleFont: {
+    ...makeFontStyleObject("Regular", false, "ReadexPro")
+  },
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  textInputStyleLegacyFont: {
+    ...makeFontStyleObject("SemiBold", false, "TitilliumWeb")
+  },
   textInputLabelWrapper: {
     position: "absolute",
     paddingHorizontal: 12,
@@ -247,6 +258,7 @@ export const TextInputBase = ({
     [value, derivedInputProps]
   );
+  const { isExperimental } = useIOExperimentalDesign();
   return (
     <>
       <Pressable
@@ -286,7 +298,12 @@ export const TextInputBase = ({
           onBlur={onBlurHandler}
           value={inputValue}
           onChangeText={onChangeTextHandler}
-          style={styles.textInputStyle}
+          style={[
+            styles.textInputStyle,
+            isExperimental
+              ? styles.textInputStyleFont
+              : styles.textInputStyleLegacyFont
+          ]}
         />
         {/** Left value is due to the absolute position of the label in order to let it
          * translate to top on focus

package/src/components/typography/Body.tsx CHANGED Viewed

@@ -1,4 +1,3 @@
-import React from "react";
 import { IOColors, IOTheme } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -11,7 +10,7 @@ type PartialAllowedColors = Extract<
 type AllowedColors = PartialAllowedColors | IOTheme["textBody-default"];
 type AllowedWeight = IOFontWeight | "Regular" | "SemiBold";
-type OwnProps = ExternalTypographyProps<
+type BodyProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
@@ -22,12 +21,9 @@ export const bodyDefaultColor: AllowedColors = "bluegrey";
 export const bodyDefaultWeight: AllowedWeight = "Regular";
 /**
- * Typography component to render `Body` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values (if not defined) are weight: `Regular`, color: `bluegrey`
- * @param props`
- * @constructor
+ * `Body` typographic style
  */
-export const Body: React.FunctionComponent<OwnProps> = props =>
+export const Body = (props: BodyProps) =>
   useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: bodyDefaultWeight,

package/src/components/typography/BodyMonospace.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import type { IOColors } from "../../core/IOColors";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+type AllowedColors = Extract<IOColors, "bluegreyDark" | "bluegrey">;
+type AllowedWeight = Extract<IOFontWeight, "Medium">;
+type BodyMonospaceProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+const fontName: FontFamily = "DMMono";
+const fontSize = 16;
+const lineHeight = 24;
+const monospaceDefaultWeight = "Medium";
+const monospaceDefaultcolor = "bluegrey";
+/**
+ * `BodyMonospace` typographic style
+ */
+export const BodyMonospace = (props: BodyMonospaceProps) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: monospaceDefaultWeight,
+    defaultColor: monospaceDefaultcolor,
+    font: fontName,
+    fontStyle: { fontSize, lineHeight }
+  });

package/src/components/typography/ButtonText.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import { IOColors } from "src/core/IOColors";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { useIOExperimentalDesign } from "../../core";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+export type ButtonTextAllowedColors = Extract<
+  IOColors,
+  "white" | "blueIO-500" | "grey-700"
+>;
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular" | "Bold">;
+type ButtonTextProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, ButtonTextAllowedColors>
+>;
+export const buttonTextFontSize = 16;
+/* Needed to render `ButtonOutline` and`ButtonLink` because they use
+`AnimatedText` for color transition through Reanimated */
+const buttonTextDefaultColor: ButtonTextAllowedColors = "white";
+const buttonTextFontName: IOFontFamily = "ReadexPro";
+const buttonTextDefaultWeight: AllowedWeight = "Regular";
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyTextFontName: IOFontFamily = "TitilliumWeb";
+const legacyTextDefaultWeight: AllowedWeight = "Bold";
+/**
+ * `ButtonText` typographic style
+ */
+export const ButtonText = (props: ButtonTextProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+  return useTypographyFactory<AllowedWeight, ButtonTextAllowedColors>({
+    ...props,
+    defaultWeight: isExperimental
+      ? buttonTextDefaultWeight
+      : legacyTextDefaultWeight,
+    defaultColor: buttonTextDefaultColor,
+    font: isExperimental ? buttonTextFontName : legacyTextFontName,
+    fontStyle: {
+      fontSize: buttonTextFontSize
+    }
+  });
+};

package/src/components/typography/Caption.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import { IOTheme, useIOExperimentalDesign } from "../../core";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "Regular">;
+type CaptionProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+export const captionFontSize = 12;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "Regular";
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFont: FontFamily = "TitilliumWeb";
+/**
+ * `Caption` typographic style
+ */
+export const Caption = (props: CaptionProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font: isExperimental ? font : legacyFont,
+    fontStyle: {
+      fontSize: captionFontSize,
+      textTransform: "uppercase"
+    }
+  });
+};

package/src/components/typography/Chip.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+import { IOColors, useIOExperimentalDesign } from "../../core";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+type AllowedColors = IOColors;
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
+type ChipProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+const chipFontSize = 12;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "Regular";
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFont: FontFamily = "TitilliumWeb";
+/**
+ * `Chip` typographic style
+ */
+export const Chip = (props: ChipProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font: isExperimental ? font : legacyFont,
+    fontStyle: { fontSize: chipFontSize }
+  });
+};