🩹(react) update stylesheet to use modern SASS

Replaced deprecated '@import' with '@use' to align with best practices.
Refactored stylesheet to behave as a partial, enhancing SASS compilation
efficiency.

packages/react/src/components/Loader/_index.scss

@@ -0,0 +1,61 @@
+.c__loader {
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite;
+
+  &::before,
+  &::after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border-style: solid;
+    border-color: var(--c--theme--colors--primary-700);
+    animation: prixClipFix 2s linear infinite;
+  }
+
+  &::after {
+    border-color: var(--c--theme--colors--primary-400);
+    animation: prixClipFix 2s linear infinite,
+      rotate 0.5s linear infinite reverse;
+    inset: 6px;
+  }
+
+  span {
+    display: none;
+  }
+
+  &--small {
+    width: 24px;
+    height: 24px;
+
+    &::before,
+    &::after {
+      border-width: 2px;
+    }
+  }
+
+  &--medium {
+    width: 48px;
+    height: 48px;
+
+    &::before,
+    &::after {
+      border-width: 5px;
+    }
+  }
+}
+
+@keyframes rotate {
+  0%   {transform: rotate(0deg)}
+  100%   {transform: rotate(360deg)}
+}
+
+@keyframes prixClipFix {
+  0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+  25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+  50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+  75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
+  100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
+}