From 736763f2dc7f7701999007f0ea54d3cbab3b6e45 Mon Sep 17 00:00:00 2001
From: kostasdano <kostas.danochristos@orfium.com>
Date: Thu, 30 Nov 2023 18:38:58 +0200
Subject: [PATCH] feat: snaps

---
 .../List/ListItem-DisabledListItem.snap       |  63 ++--
 .../List/ListItem-ListItemCompilations.snap   | 306 +++++++++---------
 .../List/ListItemText-ListItemTextNormal.snap |   8 +-
 ...temText-ListItemTextWithSecondaryText.snap |   8 +-
 .../List/ListSection-CompactListSection.snap  |  20 +-
 .../List/ListSection-NormalListSection.snap   |  20 +-
 ...ress Indicator-BlockProgressIndicator.snap |   2 +-
 ...-CircularProgressIndicatorErrorStates.snap |   4 +-
 ...ircularProgressIndicatorIndeterminate.snap |   2 +-
 ...rcularProgressIndicatorWithPercentage.snap |   2 +-
 ...-LinearProgressIndicatorIndeterminate.snap |   2 +-
 ...LinearProgressIndicatorWithPercentage.snap |   2 +-
 .../Progress Indicator-Playground.snap        |   4 +-
 13 files changed, 206 insertions(+), 237 deletions(-)

diff --git a/src/__storyshots__/Updated Components/List/ListItem-DisabledListItem.snap b/src/__storyshots__/Updated Components/List/ListItem-DisabledListItem.snap
index 32003234d..e5a2cb187 100644
--- a/src/__storyshots__/Updated Components/List/ListItem-DisabledListItem.snap	
+++ b/src/__storyshots__/Updated Components/List/ListItem-DisabledListItem.snap	
@@ -421,7 +421,7 @@
   fill: white;
 }
 
-.emotion-29 label {
+.emotion-28 label {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -438,7 +438,7 @@
   cursor: pointer;
 }
 
-.emotion-29 label:before {
+.emotion-28 label:before {
   content: '';
   display: inline-block;
   width: 1.25rem;
@@ -451,22 +451,22 @@
   background: rgba(84,94,255,0);
 }
 
-.emotion-29 label:hover::before {
+.emotion-28 label:hover::before {
   background: rgba(84,94,255,0.06);
   box-shadow: 0px 0px 0px 8px rgba(84,94,255,0.06);
 }
 
-.emotion-29 label[data-selected='true']:before {
+.emotion-28 label[data-selected='true']:before {
   border-color: #175bf5;
   border-radius: 50%;
 }
 
-.emotion-29 label[data-selected='true']:hover::before {
+.emotion-28 label[data-selected='true']:hover::before {
   background: none;
   box-shadow: none;
 }
 
-.emotion-29 label[data-selected='true']:after {
+.emotion-28 label[data-selected='true']:after {
   content: '';
   display: block;
   position: absolute;
@@ -479,12 +479,12 @@
   animation: circle 0.15s ease-in-out;
 }
 
-.emotion-29 label[data-disabled='true'] {
+.emotion-28 label[data-disabled='true'] {
   opacity: 50%;
   cursor: not-allowed;
 }
 
-.emotion-29 label[data-disabled='true']:hover::before {
+.emotion-28 label[data-disabled='true']:hover::before {
   background: none;
   box-shadow: none;
 }
@@ -503,9 +503,9 @@
           style="height: 100%;"
         >
           <ul
-            aria-labelledby="react-aria-:r4r:"
+            aria-labelledby="react-aria-:r4l:"
             class="emotion-3"
-            id="react-aria-:r4p:"
+            id="react-aria-:r4j:"
             role="listbox"
             style="overflow-y: auto; position: relative; display: flex; flex-direction: column; height: 100%; list-style: none; padding: 0px;"
             tabindex="0"
@@ -516,7 +516,7 @@
               class="emotion-4 "
               data-key="1"
               data-testid="ictinus_list_item_1"
-              id="react-aria-:r4p:-option-1"
+              id="react-aria-:r4j:-option-1"
               role="option"
             >
               <div
@@ -533,7 +533,7 @@
               class="emotion-4 "
               data-key="3"
               data-testid="ictinus_list_item_3"
-              id="react-aria-:r4p:-option-3"
+              id="react-aria-:r4j:-option-3"
               role="option"
             >
               <div
@@ -578,7 +578,7 @@
               class="emotion-11 "
               data-key="4"
               data-testid="ictinus_list_item_4"
-              id="react-aria-:r4p:-option-4"
+              id="react-aria-:r4j:-option-4"
               role="option"
             >
               <div
@@ -623,7 +623,7 @@
               class="emotion-4 "
               data-key="5"
               data-testid="ictinus_list_item_5"
-              id="react-aria-:r4p:-option-5"
+              id="react-aria-:r4j:-option-5"
               role="option"
             >
               <div
@@ -691,40 +691,27 @@
               class="emotion-4 "
               data-key="6"
               data-testid="ictinus_list_item_6"
-              id="react-aria-:r4p:-option-6"
+              id="react-aria-:r4j:-option-6"
               role="option"
             >
               <div
                 class="emotion-8"
               >
                 <div
-                  aria-orientation="vertical"
                   class="emotion-28"
-                  data-testid="undefined_radio_group_container"
-                  id="react-aria-:r57:"
-                  role="radiogroup"
+                  data-testid="undefined_radio_6_container"
                 >
-                  <div
-                    class="emotion-29"
-                    data-testid="undefined_radio_6_container"
+                  <label
+                    data-disabled="true"
                   >
-                    <label
-                      data-disabled="true"
-                      data-selected="false"
+                    <div
+                      style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
                     >
-                      <div
-                        style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-                      >
-                        <input
-                          disabled=""
-                          name="react-aria-:r5c:"
-                          tabindex="0"
-                          type="radio"
-                          value="6"
-                        />
-                      </div>
-                    </label>
-                  </div>
+                      <input
+                        tabindex="0"
+                      />
+                    </div>
+                  </label>
                 </div>
               </div>
               <div
diff --git a/src/__storyshots__/Updated Components/List/ListItem-ListItemCompilations.snap b/src/__storyshots__/Updated Components/List/ListItem-ListItemCompilations.snap
index a53f1a796..f59a205ec 100644
--- a/src/__storyshots__/Updated Components/List/ListItem-ListItemCompilations.snap	
+++ b/src/__storyshots__/Updated Components/List/ListItem-ListItemCompilations.snap	
@@ -208,7 +208,7 @@
   color: #686BB3;
 }
 
-.emotion-24 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -226,7 +226,7 @@
   justify-content: center;
 }
 
-.emotion-25 label {
+.emotion-24 label {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -243,7 +243,7 @@
   cursor: pointer;
 }
 
-.emotion-25 label:before {
+.emotion-24 label:before {
   content: '';
   display: inline-block;
   width: 1.25rem;
@@ -256,22 +256,22 @@
   background: rgba(84,94,255,0);
 }
 
-.emotion-25 label:hover::before {
+.emotion-24 label:hover::before {
   background: rgba(84,94,255,0.06);
   box-shadow: 0px 0px 0px 8px rgba(84,94,255,0.06);
 }
 
-.emotion-25 label[data-selected='true']:before {
+.emotion-24 label[data-selected='true']:before {
   border-color: #175bf5;
   border-radius: 50%;
 }
 
-.emotion-25 label[data-selected='true']:hover::before {
+.emotion-24 label[data-selected='true']:hover::before {
   background: none;
   box-shadow: none;
 }
 
-.emotion-25 label[data-selected='true']:after {
+.emotion-24 label[data-selected='true']:after {
   content: '';
   display: block;
   position: absolute;
@@ -284,17 +284,17 @@
   animation: circle 0.15s ease-in-out;
 }
 
-.emotion-25 label[data-disabled='true'] {
+.emotion-24 label[data-disabled='true'] {
   opacity: 50%;
   cursor: not-allowed;
 }
 
-.emotion-25 label[data-disabled='true']:hover::before {
+.emotion-24 label[data-disabled='true']:hover::before {
   background: none;
   box-shadow: none;
 }
 
-.emotion-37 {
+.emotion-36 {
   opacity: 1;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
@@ -310,7 +310,7 @@
   display: flex;
 }
 
-.emotion-38 {
+.emotion-37 {
   border-radius: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -329,7 +329,7 @@
   position: relative;
 }
 
-.emotion-38:before {
+.emotion-37:before {
   display: none;
   border-radius: 100%;
   -webkit-transition: all 0.2s;
@@ -340,12 +340,12 @@
   position: absolute;
 }
 
-.emotion-38:hover:before {
+.emotion-37:hover:before {
   display: block;
   background: rgba(0, 0, 0, 0.05);
 }
 
-.emotion-39 {
+.emotion-38 {
   border: 0;
   border-radius: 0.125rem;
   width: 1.5rem;
@@ -354,13 +354,13 @@
   opacity: 0;
 }
 
-.emotion-39+label {
+.emotion-38+label {
   position: relative;
   cursor: pointer;
   padding: 0;
 }
 
-.emotion-39+label:before {
+.emotion-38+label:before {
   content: '';
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
@@ -373,21 +373,21 @@
   border-radius: 0.25rem;
 }
 
-.emotion-39:disabled+label {
+.emotion-38:disabled+label {
   cursor: not-allowed;
 }
 
-.emotion-40 span {
+.emotion-39 span {
   padding: 0;
 }
 
-.emotion-40 svg {
+.emotion-39 svg {
   position: absolute;
   top: 0;
   display: none;
 }
 
-.emotion-41 {
+.emotion-40 {
   padding: 0.125rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -403,17 +403,17 @@
   justify-content: center;
 }
 
-.emotion-42 {
+.emotion-41 {
   fill: white;
   width: 1.5rem;
   height: 1.5rem;
 }
 
-.emotion-42 * {
+.emotion-41 * {
   fill: white;
 }
 
-.emotion-60 {
+.emotion-59 {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -423,7 +423,7 @@
   display: flex;
 }
 
-.emotion-60 .react-switch-handle {
+.emotion-59 .react-switch-handle {
   cursor: unset!important;
   border: 2px solid #b7c3d8!important;
   box-sizing: border-box!important;
@@ -433,23 +433,23 @@
   transform: translateX(0)!important;
 }
 
-.emotion-60 .react-switch-handle:hover {
+.emotion-59 .react-switch-handle:hover {
   box-shadow: rgba(14,14,23,0.1) 0 0 0 5px;
   background: #dbe1eb!important;
 }
 
-.emotion-60 .react-switch-bg {
+.emotion-59 .react-switch-bg {
   cursor: unset!important;
   margin-right: 0!important;
   margin-left: 0!important;
 }
 
-.emotion-60 .react-switch-bg:hover~.react-switch-handle {
+.emotion-59 .react-switch-bg:hover~.react-switch-handle {
   box-shadow: rgba(14,14,23,0.1) 0 0 0 5px;
   background: #dbe1eb!important;
 }
 
-.emotion-73 {
+.emotion-72 {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -489,19 +489,19 @@
   letter-spacing: 0.00625rem;
 }
 
-.emotion-73 img {
+.emotion-72 img {
   border-radius: 6.25rem;
   width: 100%;
   height: 100%;
 }
 
-.emotion-75 {
+.emotion-74 {
   fill: #1249C4;
   width: 1rem;
   height: 1rem;
 }
 
-.emotion-75 * {
+.emotion-74 * {
   fill: #1249C4;
 }
 
@@ -638,115 +638,97 @@
     class="emotion-0 emotion-1"
   >
     <div
-      aria-orientation="vertical"
-      class="emotion-20"
-      data-testid="undefined_radio_group_container"
-      id="react-aria-:r3j:"
-      role="radiogroup"
+      class="emotion-2"
     >
-      <div>
+      <div
+        data-testid="ictinus_list"
+      >
         <div
-          class="emotion-2"
+          style="height: 100%;"
         >
-          <div
-            data-testid="ictinus_list"
+          <ul
+            aria-labelledby="react-aria-:r3l:"
+            class="emotion-3"
+            id="react-aria-:r3j:"
+            role="listbox"
+            style="overflow-y: auto; position: relative; display: flex; flex-direction: column; height: 100%; list-style: none; padding: 0px;"
+            tabindex="0"
           >
-            <div
-              style="height: 100%;"
+            <li
+              aria-selected="false"
+              class="emotion-4 "
+              data-key="5"
+              data-testid="ictinus_list_item_5"
+              id="react-aria-:r3j:-option-5"
+              role="option"
+              tabindex="-1"
             >
-              <ul
-                aria-labelledby="react-aria-:r3r:"
-                class="emotion-3"
-                id="react-aria-:r3p:"
-                role="listbox"
-                style="overflow-y: auto; position: relative; display: flex; flex-direction: column; height: 100%; list-style: none; padding: 0px;"
-                tabindex="0"
+              <div
+                class="emotion-23"
               >
-                <li
-                  aria-selected="false"
-                  class="emotion-4 "
-                  data-key="5"
-                  data-testid="ictinus_list_item_5"
-                  id="react-aria-:r3p:-option-5"
-                  role="option"
-                  tabindex="-1"
+                <div
+                  class="emotion-24"
+                  data-testid="undefined_radio_cherry_container"
                 >
-                  <div
-                    class="emotion-24"
+                  <label
+                    data-selected="false"
                   >
                     <div
-                      class="emotion-25"
-                      data-testid="undefined_radio_5_container"
+                      style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
                     >
-                      <label
-                        data-disabled="false"
-                        data-selected="false"
-                      >
-                        <div
-                          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-                        >
-                          <input
-                            name="react-aria-:r3o:"
-                            tabindex="0"
-                            type="radio"
-                            value="5"
-                          />
-                        </div>
-                      </label>
+                      <input
+                        tabindex="0"
+                      />
                     </div>
-                  </div>
-                  <div
-                    class="emotion-5"
-                  >
-                    <span>
-                      Option Radio
-                    </span>
-                  </div>
-                </li>
-                <li
-                  aria-selected="false"
-                  class="emotion-6 "
-                  data-key="6"
-                  data-testid="ictinus_list_item_6"
-                  id="react-aria-:r3p:-option-6"
-                  role="option"
-                  tabindex="-1"
+                  </label>
+                </div>
+              </div>
+              <div
+                class="emotion-5"
+              >
+                <span>
+                  Option Radio
+                </span>
+              </div>
+            </li>
+            <li
+              aria-selected="false"
+              class="emotion-6 "
+              data-key="6"
+              data-testid="ictinus_list_item_6"
+              id="react-aria-:r3j:-option-6"
+              role="option"
+              tabindex="-1"
+            >
+              <div
+                class="emotion-23"
+              >
+                <div
+                  class="emotion-24"
+                  data-testid="undefined_radio_banana_container"
                 >
-                  <div
-                    class="emotion-24"
+                  <label
+                    data-selected="false"
                   >
                     <div
-                      class="emotion-25"
-                      data-testid="undefined_radio_6_container"
+                      style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
                     >
-                      <label
-                        data-disabled="false"
-                        data-selected="false"
-                      >
-                        <div
-                          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-                        >
-                          <input
-                            name="react-aria-:r3o:"
-                            tabindex="0"
-                            type="radio"
-                            value="6"
-                          />
-                        </div>
-                      </label>
+                      <input
+                        tabindex="0"
+                      />
                     </div>
-                  </div>
-                  <div
-                    class="emotion-5"
-                  >
-                    <span>
-                      Option Radio (compact)
-                    </span>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
+                  </label>
+                </div>
+              </div>
+              <div
+                class="emotion-5"
+              >
+                <span>
+                  Option Radio (compact)
+                </span>
+              </div>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
@@ -764,9 +746,9 @@
           style="height: 100%;"
         >
           <ul
-            aria-labelledby="react-aria-:r43:"
+            aria-labelledby="react-aria-:r3t:"
             class="emotion-3"
-            id="react-aria-:r41:"
+            id="react-aria-:r3r:"
             role="listbox"
             style="overflow-y: auto; position: relative; display: flex; flex-direction: column; height: 100%; list-style: none; padding: 0px;"
             tabindex="0"
@@ -776,34 +758,34 @@
               class="emotion-4 "
               data-key="7"
               data-testid="ictinus_list_item_7"
-              id="react-aria-:r41:-option-7"
+              id="react-aria-:r3r:-option-7"
               role="option"
               tabindex="-1"
             >
               <div
-                class="emotion-24"
+                class="emotion-23"
               >
                 <span
-                  class="emotion-37"
+                  class="emotion-36"
                 >
                   <span
-                    class="emotion-38"
+                    class="emotion-37"
                   >
                     <input
-                      class="emotion-39"
+                      class="emotion-38"
                       data-testid="checkbox"
                       id="styled-checkbox-_00"
                       type="checkbox"
                     />
                     <label
-                      class="emotion-40"
+                      class="emotion-39"
                       for="styled-checkbox-_00"
                     >
                       <span
-                        class="emotion-41"
+                        class="emotion-40"
                       >
                         <svg
-                          class="emotion-42"
+                          class="emotion-41"
                           viewBox="0 0 24 24"
                           xmlns="http://www.w3.org/2000/svg"
                           xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -843,34 +825,34 @@
               class="emotion-6 "
               data-key="8"
               data-testid="ictinus_list_item_8"
-              id="react-aria-:r41:-option-8"
+              id="react-aria-:r3r:-option-8"
               role="option"
               tabindex="-1"
             >
               <div
-                class="emotion-24"
+                class="emotion-23"
               >
                 <span
-                  class="emotion-37"
+                  class="emotion-36"
                 >
                   <span
-                    class="emotion-38"
+                    class="emotion-37"
                   >
                     <input
-                      class="emotion-39"
+                      class="emotion-38"
                       data-testid="checkbox"
                       id="styled-checkbox-_00"
                       type="checkbox"
                     />
                     <label
-                      class="emotion-40"
+                      class="emotion-39"
                       for="styled-checkbox-_00"
                     >
                       <span
-                        class="emotion-41"
+                        class="emotion-40"
                       >
                         <svg
-                          class="emotion-42"
+                          class="emotion-41"
                           viewBox="0 0 24 24"
                           xmlns="http://www.w3.org/2000/svg"
                           xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -923,9 +905,9 @@
           style="height: 100%;"
         >
           <ul
-            aria-labelledby="react-aria-:r4b:"
+            aria-labelledby="react-aria-:r45:"
             class="emotion-3"
-            id="react-aria-:r49:"
+            id="react-aria-:r43:"
             role="listbox"
             style="overflow-y: auto; position: relative; display: flex; flex-direction: column; height: 100%; list-style: none; padding: 0px;"
             tabindex="0"
@@ -935,7 +917,7 @@
               class="emotion-4 "
               data-key="9"
               data-testid="ictinus_list_item_9"
-              id="react-aria-:r49:-option-9"
+              id="react-aria-:r43:-option-9"
               role="option"
               tabindex="-1"
             >
@@ -947,10 +929,10 @@
                 </span>
               </div>
               <div
-                class="emotion-24"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-60 emotion-61"
+                  class="emotion-59 emotion-60"
                 >
                   <div
                     style="position: relative; display: inline-block; text-align: left; opacity: 1; direction: ltr; border-radius: 4px; transition: opacity 0.25s; user-select: none;"
@@ -979,7 +961,7 @@
               class="emotion-6 "
               data-key="10"
               data-testid="ictinus_list_item_10"
-              id="react-aria-:r49:-option-10"
+              id="react-aria-:r43:-option-10"
               role="option"
               tabindex="-1"
             >
@@ -991,10 +973,10 @@
                 </span>
               </div>
               <div
-                class="emotion-24"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-60 emotion-61"
+                  class="emotion-59 emotion-60"
                 >
                   <div
                     style="position: relative; display: inline-block; text-align: left; opacity: 1; direction: ltr; border-radius: 4px; transition: opacity 0.25s; user-select: none;"
@@ -1036,9 +1018,9 @@
           style="height: 100%;"
         >
           <ul
-            aria-labelledby="react-aria-:r4j:"
+            aria-labelledby="react-aria-:r4d:"
             class="emotion-3"
-            id="react-aria-:r4h:"
+            id="react-aria-:r4b:"
             role="listbox"
             style="overflow-y: auto; position: relative; display: flex; flex-direction: column; height: 100%; list-style: none; padding: 0px;"
             tabindex="0"
@@ -1048,22 +1030,22 @@
               class="emotion-4 "
               data-key="11"
               data-testid="ictinus_list_item_11"
-              id="react-aria-:r4h:-option-11"
+              id="react-aria-:r4b:-option-11"
               role="option"
               tabindex="-1"
             >
               <div
-                class="emotion-24"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-73"
+                  class="emotion-72"
                   data-testid="_avatar"
                 >
                   <span
-                    class="emotion-41"
+                    class="emotion-40"
                   >
                     <svg
-                      class="emotion-75"
+                      class="emotion-74"
                       fill="none"
                       viewBox="0 0 14 17"
                       xmlns="http://www.w3.org/2000/svg"
@@ -1093,22 +1075,22 @@
               class="emotion-6 "
               data-key="12"
               data-testid="ictinus_list_item_12"
-              id="react-aria-:r4h:-option-12"
+              id="react-aria-:r4b:-option-12"
               role="option"
               tabindex="-1"
             >
               <div
-                class="emotion-24"
+                class="emotion-23"
               >
                 <div
-                  class="emotion-73"
+                  class="emotion-72"
                   data-testid="_avatar"
                 >
                   <span
-                    class="emotion-41"
+                    class="emotion-40"
                   >
                     <svg
-                      class="emotion-75"
+                      class="emotion-74"
                       fill="none"
                       viewBox="0 0 14 17"
                       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/__storyshots__/Updated Components/List/ListItemText-ListItemTextNormal.snap b/src/__storyshots__/Updated Components/List/ListItemText-ListItemTextNormal.snap
index b7e3466e3..b1bc24711 100644
--- a/src/__storyshots__/Updated Components/List/ListItemText-ListItemTextNormal.snap	
+++ b/src/__storyshots__/Updated Components/List/ListItemText-ListItemTextNormal.snap	
@@ -154,9 +154,9 @@
             style="height: 100%;"
           >
             <ul
-              aria-labelledby="react-aria-:r5f:"
+              aria-labelledby="react-aria-:r53:"
               class="emotion-2"
-              id="react-aria-:r5d:"
+              id="react-aria-:r51:"
               role="listbox"
               style="overflow-y: auto; position: relative; display: flex; flex-direction: column; height: 100%; list-style: none; padding: 0px;"
               tabindex="0"
@@ -166,7 +166,7 @@
                 class="emotion-3 "
                 data-key="$.0"
                 data-testid="ictinus_list_item_$.0"
-                id="react-aria-:r5d:-option-$.0"
+                id="react-aria-:r51:-option-$.0"
                 role="option"
                 tabindex="-1"
               >
@@ -183,7 +183,7 @@
                 class="emotion-3 "
                 data-key="$.1"
                 data-testid="ictinus_list_item_$.1"
-                id="react-aria-:r5d:-option-$.1"
+                id="react-aria-:r51:-option-$.1"
                 role="option"
                 tabindex="-1"
               >
diff --git a/src/__storyshots__/Updated Components/List/ListItemText-ListItemTextWithSecondaryText.snap b/src/__storyshots__/Updated Components/List/ListItemText-ListItemTextWithSecondaryText.snap
index 4e926a320..21fdfb248 100644
--- a/src/__storyshots__/Updated Components/List/ListItemText-ListItemTextWithSecondaryText.snap	
+++ b/src/__storyshots__/Updated Components/List/ListItemText-ListItemTextWithSecondaryText.snap	
@@ -163,9 +163,9 @@
             style="height: 100%;"
           >
             <ul
-              aria-labelledby="react-aria-:r5n:"
+              aria-labelledby="react-aria-:r5b:"
               class="emotion-2"
-              id="react-aria-:r5l:"
+              id="react-aria-:r59:"
               role="listbox"
               style="overflow-y: auto; position: relative; display: flex; flex-direction: column; height: 100%; list-style: none; padding: 0px;"
               tabindex="0"
@@ -175,7 +175,7 @@
                 class="emotion-3 "
                 data-key="$.0"
                 data-testid="ictinus_list_item_$.0"
-                id="react-aria-:r5l:-option-$.0"
+                id="react-aria-:r59:-option-$.0"
                 role="option"
                 tabindex="-1"
               >
@@ -197,7 +197,7 @@
                 class="emotion-3 "
                 data-key="$.1"
                 data-testid="ictinus_list_item_$.1"
-                id="react-aria-:r5l:-option-$.1"
+                id="react-aria-:r59:-option-$.1"
                 role="option"
                 tabindex="-1"
               >
diff --git a/src/__storyshots__/Updated Components/List/ListSection-CompactListSection.snap b/src/__storyshots__/Updated Components/List/ListSection-CompactListSection.snap
index 276f031f9..22267a3ff 100644
--- a/src/__storyshots__/Updated Components/List/ListSection-CompactListSection.snap	
+++ b/src/__storyshots__/Updated Components/List/ListSection-CompactListSection.snap	
@@ -159,9 +159,9 @@
             style="height: 100%;"
           >
             <ul
-              aria-labelledby="react-aria-:r6d:"
+              aria-labelledby="react-aria-:r61:"
               class="emotion-2"
-              id="react-aria-:r6b:"
+              id="react-aria-:r5v:"
               role="listbox"
               style="overflow-y: auto; position: relative; display: flex; flex-direction: column; height: 100%; list-style: none; padding: 0px;"
               tabindex="0"
@@ -171,13 +171,13 @@
                 role="presentation"
               >
                 <span
-                  id="react-aria-:r6f:"
+                  id="react-aria-:r63:"
                   role="presentation"
                 >
                   Section 1
                 </span>
                 <ul
-                  aria-labelledby="react-aria-:r6f:"
+                  aria-labelledby="react-aria-:r63:"
                   class="emotion-4"
                   role="group"
                 >
@@ -186,7 +186,7 @@
                     class="emotion-3 "
                     data-key="$.0.0"
                     data-testid="ictinus_list_item_$.0.0"
-                    id="react-aria-:r6b:-option-$.0.0"
+                    id="react-aria-:r5v:-option-$.0.0"
                     role="option"
                     tabindex="-1"
                   >
@@ -203,7 +203,7 @@
                     class="emotion-3 "
                     data-key="$.0.1"
                     data-testid="ictinus_list_item_$.0.1"
-                    id="react-aria-:r6b:-option-$.0.1"
+                    id="react-aria-:r5v:-option-$.0.1"
                     role="option"
                     tabindex="-1"
                   >
@@ -222,13 +222,13 @@
                 role="presentation"
               >
                 <span
-                  id="react-aria-:r6k:"
+                  id="react-aria-:r68:"
                   role="presentation"
                 >
                   Section 2
                 </span>
                 <ul
-                  aria-labelledby="react-aria-:r6k:"
+                  aria-labelledby="react-aria-:r68:"
                   class="emotion-4"
                   role="group"
                 >
@@ -237,7 +237,7 @@
                     class="emotion-3 "
                     data-key="$.1.0"
                     data-testid="ictinus_list_item_$.1.0"
-                    id="react-aria-:r6b:-option-$.1.0"
+                    id="react-aria-:r5v:-option-$.1.0"
                     role="option"
                     tabindex="-1"
                   >
@@ -254,7 +254,7 @@
                     class="emotion-3 "
                     data-key="$.1.1"
                     data-testid="ictinus_list_item_$.1.1"
-                    id="react-aria-:r6b:-option-$.1.1"
+                    id="react-aria-:r5v:-option-$.1.1"
                     role="option"
                     tabindex="-1"
                   >
diff --git a/src/__storyshots__/Updated Components/List/ListSection-NormalListSection.snap b/src/__storyshots__/Updated Components/List/ListSection-NormalListSection.snap
index cb10bc142..82a288c20 100644
--- a/src/__storyshots__/Updated Components/List/ListSection-NormalListSection.snap	
+++ b/src/__storyshots__/Updated Components/List/ListSection-NormalListSection.snap	
@@ -159,9 +159,9 @@
             style="height: 100%;"
           >
             <ul
-              aria-labelledby="react-aria-:r5v:"
+              aria-labelledby="react-aria-:r5j:"
               class="emotion-2"
-              id="react-aria-:r5t:"
+              id="react-aria-:r5h:"
               role="listbox"
               style="overflow-y: auto; position: relative; display: flex; flex-direction: column; height: 100%; list-style: none; padding: 0px;"
               tabindex="0"
@@ -171,13 +171,13 @@
                 role="presentation"
               >
                 <span
-                  id="react-aria-:r61:"
+                  id="react-aria-:r5l:"
                   role="presentation"
                 >
                   Section 1
                 </span>
                 <ul
-                  aria-labelledby="react-aria-:r61:"
+                  aria-labelledby="react-aria-:r5l:"
                   class="emotion-4"
                   role="group"
                 >
@@ -186,7 +186,7 @@
                     class="emotion-3 "
                     data-key="$.0.0"
                     data-testid="ictinus_list_item_$.0.0"
-                    id="react-aria-:r5t:-option-$.0.0"
+                    id="react-aria-:r5h:-option-$.0.0"
                     role="option"
                     tabindex="-1"
                   >
@@ -203,7 +203,7 @@
                     class="emotion-3 "
                     data-key="$.0.1"
                     data-testid="ictinus_list_item_$.0.1"
-                    id="react-aria-:r5t:-option-$.0.1"
+                    id="react-aria-:r5h:-option-$.0.1"
                     role="option"
                     tabindex="-1"
                   >
@@ -222,13 +222,13 @@
                 role="presentation"
               >
                 <span
-                  id="react-aria-:r66:"
+                  id="react-aria-:r5q:"
                   role="presentation"
                 >
                   Section 2
                 </span>
                 <ul
-                  aria-labelledby="react-aria-:r66:"
+                  aria-labelledby="react-aria-:r5q:"
                   class="emotion-4"
                   role="group"
                 >
@@ -237,7 +237,7 @@
                     class="emotion-3 "
                     data-key="$.1.0"
                     data-testid="ictinus_list_item_$.1.0"
-                    id="react-aria-:r5t:-option-$.1.0"
+                    id="react-aria-:r5h:-option-$.1.0"
                     role="option"
                     tabindex="-1"
                   >
@@ -254,7 +254,7 @@
                     class="emotion-3 "
                     data-key="$.1.1"
                     data-testid="ictinus_list_item_$.1.1"
-                    id="react-aria-:r5t:-option-$.1.1"
+                    id="react-aria-:r5h:-option-$.1.1"
                     role="option"
                     tabindex="-1"
                   >
diff --git a/src/__storyshots__/Updated Components/Progress Indicator-BlockProgressIndicator.snap b/src/__storyshots__/Updated Components/Progress Indicator-BlockProgressIndicator.snap
index 3de3e5455..0af4e5321 100644
--- a/src/__storyshots__/Updated Components/Progress Indicator-BlockProgressIndicator.snap	
+++ b/src/__storyshots__/Updated Components/Progress Indicator-BlockProgressIndicator.snap	
@@ -58,7 +58,7 @@
         aria-valuemin="0"
         class="emotion-1"
         data-rac=""
-        id="react-aria-:r9f:"
+        id="react-aria-:r93:"
         role="progressbar"
       >
         <div
diff --git a/src/__storyshots__/Updated Components/Progress Indicator-CircularProgressIndicatorErrorStates.snap b/src/__storyshots__/Updated Components/Progress Indicator-CircularProgressIndicatorErrorStates.snap
index af10480aa..7e5af893a 100644
--- a/src/__storyshots__/Updated Components/Progress Indicator-CircularProgressIndicatorErrorStates.snap	
+++ b/src/__storyshots__/Updated Components/Progress Indicator-CircularProgressIndicatorErrorStates.snap	
@@ -65,7 +65,7 @@
         aria-valuetext="60%"
         class="react-aria-ProgressBar"
         data-rac=""
-        id="react-aria-:r9o:"
+        id="react-aria-:r9c:"
         role="progressbar"
       >
         <svg
@@ -105,7 +105,7 @@
         aria-valuetext="60%"
         class="emotion-3"
         data-rac=""
-        id="react-aria-:r9r:"
+        id="react-aria-:r9f:"
         role="progressbar"
       >
         <div
diff --git a/src/__storyshots__/Updated Components/Progress Indicator-CircularProgressIndicatorIndeterminate.snap b/src/__storyshots__/Updated Components/Progress Indicator-CircularProgressIndicatorIndeterminate.snap
index 0d938a2a4..04faa7156 100644
--- a/src/__storyshots__/Updated Components/Progress Indicator-CircularProgressIndicatorIndeterminate.snap	
+++ b/src/__storyshots__/Updated Components/Progress Indicator-CircularProgressIndicatorIndeterminate.snap	
@@ -31,7 +31,7 @@
         aria-valuemin="0"
         class="react-aria-ProgressBar"
         data-rac=""
-        id="react-aria-:r9l:"
+        id="react-aria-:r99:"
         role="progressbar"
       >
         <svg
diff --git a/src/__storyshots__/Updated Components/Progress Indicator-CircularProgressIndicatorWithPercentage.snap b/src/__storyshots__/Updated Components/Progress Indicator-CircularProgressIndicatorWithPercentage.snap
index c701e3f54..5f5d8692b 100644
--- a/src/__storyshots__/Updated Components/Progress Indicator-CircularProgressIndicatorWithPercentage.snap	
+++ b/src/__storyshots__/Updated Components/Progress Indicator-CircularProgressIndicatorWithPercentage.snap	
@@ -41,7 +41,7 @@
           aria-valuemin="0"
           class="react-aria-ProgressBar"
           data-rac=""
-          id="react-aria-:r9i:"
+          id="react-aria-:r96:"
           role="progressbar"
         >
           <svg
diff --git a/src/__storyshots__/Updated Components/Progress Indicator-LinearProgressIndicatorIndeterminate.snap b/src/__storyshots__/Updated Components/Progress Indicator-LinearProgressIndicatorIndeterminate.snap
index d957a1c62..218866ba5 100644
--- a/src/__storyshots__/Updated Components/Progress Indicator-LinearProgressIndicatorIndeterminate.snap	
+++ b/src/__storyshots__/Updated Components/Progress Indicator-LinearProgressIndicatorIndeterminate.snap	
@@ -58,7 +58,7 @@
         aria-valuemin="0"
         class="emotion-1"
         data-rac=""
-        id="react-aria-:r9c:"
+        id="react-aria-:r90:"
         role="progressbar"
       >
         <div
diff --git a/src/__storyshots__/Updated Components/Progress Indicator-LinearProgressIndicatorWithPercentage.snap b/src/__storyshots__/Updated Components/Progress Indicator-LinearProgressIndicatorWithPercentage.snap
index b95d1ab8c..190d40adf 100644
--- a/src/__storyshots__/Updated Components/Progress Indicator-LinearProgressIndicatorWithPercentage.snap	
+++ b/src/__storyshots__/Updated Components/Progress Indicator-LinearProgressIndicatorWithPercentage.snap	
@@ -72,7 +72,7 @@
           aria-valuetext="0%"
           class="emotion-1"
           data-rac=""
-          id="react-aria-:r99:"
+          id="react-aria-:r8t:"
           role="progressbar"
         >
           <div
diff --git a/src/__storyshots__/Updated Components/Progress Indicator-Playground.snap b/src/__storyshots__/Updated Components/Progress Indicator-Playground.snap
index 643753881..5a45d2d6d 100644
--- a/src/__storyshots__/Updated Components/Progress Indicator-Playground.snap	
+++ b/src/__storyshots__/Updated Components/Progress Indicator-Playground.snap	
@@ -58,7 +58,7 @@
         aria-valuemin="0"
         class="emotion-1"
         data-rac=""
-        id="react-aria-:r9u:"
+        id="react-aria-:r9i:"
         role="progressbar"
       >
         <div
@@ -80,7 +80,7 @@
         aria-valuemin="0"
         class="emotion-1"
         data-rac=""
-        id="react-aria-:ra1:"
+        id="react-aria-:r9l:"
         role="progressbar"
       >
         <div