merge develop into components

- modify onboarding screen to use step indicator component

packages/design_system/lib/src/steps/step_indicator.dart

@@ -1,28 +1,33 @@
 import 'package:flutter/material.dart';
 
 class StepIndicator extends StatelessWidget{
-  final int max;
+  final int total;
   final int current;
   final Color color;
 
-  const StepIndicator({super.key, required this.max, required this.current, required this.color});
+  const StepIndicator({super.key, required this.total, required this.current, required this.color});
 
   @override
   Widget build(BuildContext context) {
     return Row(
-      spacing: 12,
+      mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        Spacer(),
-        ...List<Widget>.generate(max, (int index){
-          return DecoratedBox(
-            decoration: ShapeDecoration(
-                shape: CircleBorder(side: BorderSide(color: color)),
-                color: (index < current)? color: Colors.transparent
+        ...List<Widget>.generate(total, (index){
+          final bool isActive = index < current;
+
+          return AnimatedContainer(
+            duration: const Duration(milliseconds: 200),
+            curve: Curves.easeOut,
+            margin: const EdgeInsets.symmetric(horizontal: 6),
+            width: 16.0,
+            height: 16.0,
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: isActive ? color : Colors.white,
+              border: Border.all(color: color, width: 2),
             ),
-            child: SizedBox(width: 16, height: 16),
           );
         }),
-        Spacer()
       ]
     );
   }

packages/design_system/test/widget_test.dart

@@ -7,7 +7,7 @@ void main() {
   themePackages();
 
   testGoldens('Step Indicator', (tester) async {
-    final widget = (int step)=>StepIndicator(max: 3, current: step, color: Colors.blueAccent);
+    final widget = (int step)=>StepIndicator(total: 3, current: step, color: Colors.blueAccent);
     final builder = GoldenBuilder.column()
       ..addScenario('step -1', widget(-1))
       ..addScenario('step 0', widget(0))