🩹(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/utils/_index.scss

@@ -0,0 +1,35 @@
+@use "sass:math";
+
+.c__offscreen {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+
+@function strip-unit($number) {
+  // Divide $number by its own unit to get a unitless number.
+  // According to math.div documentation, "Any units shared by both numbers will be canceled out."
+  // while different unit between numerator and denominator would be kept.
+  // More to read here https://sass-lang.com/documentation/modules/math#div.
+  // i.e. 16px / 1px = 16
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return math.div($number, ($number * 0 + 1));
+  }
+  @return $number;
+}
+
+@function px-to-rem($size, $base-font-size:16px) {
+  @return math.div(strip-unit($size), strip-unit($base-font-size)) * 1rem;
+}
+
+%shadow {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}