diff --git a/.github/workflows/on-main.yml b/.github/workflows/on-main.yml
new file mode 100644
index 00000000..615b41fb
--- /dev/null
+++ b/.github/workflows/on-main.yml
@@ -0,0 +1,47 @@
+name: release-please
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v4
+        with:
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+  code-quality:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+      - name: Get branch name
+        id: branch-name
+        uses: tj-actions/branch-names@v7.0.7
+      - uses: subosito/flutter-action@v2
+      - name: Setup flutter
+        run: flutter pub get
+      - name: Lint and format
+        run: |
+          dart format . -l 120
+          dart fix --apply
+          flutter analyze
+          cd example && flutter test
+      - name: Check for modified files
+        id: git-check
+        run: echo "modified=$(if [ -n "$(git status --porcelain)" ]; then echo "true"; else echo "false"; fi)" >>  $GITHUB_ENV
+      - name: Update changes in GitHub repository
+        if: env.modified == 'true'
+        run: |
+          git config --global user.name "github-actions"
+          git config --global user.email "github-actions@github.com"
+          git add -A
+          git commit -m '[automated commit] lint format and import sort'
+          git push -f
diff --git a/.github/workflows/on-release.yml b/.github/workflows/on-release.yml
index fa3879e3..79b678a9 100644
--- a/.github/workflows/on-release.yml
+++ b/.github/workflows/on-release.yml
@@ -15,9 +15,6 @@ jobs:
       - uses: dart-lang/setup-dart@v1
       - name: Install Flutter
         uses: subosito/flutter-action@v2
-        with:
-          flutter-version: "3.16.x"
-          channel: "stable"
       - name: Install dependencies
         run: flutter pub get
       - name: Format code
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 68f50255..31513970 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -59,9 +59,6 @@ jobs:
         id: branch-name
         uses: tj-actions/branch-names@v7.0.7
       - uses: subosito/flutter-action@v2
-        with:
-          flutter-version: "3.19.x"
-          channel: "stable"
       - name: Setup flutter
         run: flutter pub get
       - name: Lint and format
diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
deleted file mode 100644
index 197446e0..00000000
--- a/.github/workflows/release-please.yml
+++ /dev/null
@@ -1,17 +0,0 @@
-name: release-please
-on:
-  push:
-    branches:
-      - main
-
-permissions:
-  contents: write
-  pull-requests: write
-
-jobs:
-  release-please:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: google-github-actions/release-please-action@v4
-        with:
-          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
diff --git a/example/lib/home.dart b/example/lib/home.dart
index 34446d63..da7d414b 100644
--- a/example/lib/home.dart
+++ b/example/lib/home.dart
@@ -14,6 +14,9 @@ import 'package:zeta_example/pages/theme/color_example.dart';
 import 'package:zeta_example/pages/components/password_input_example.dart';
 import 'package:zeta_example/pages/components/progress_example.dart';
 import 'package:zeta_example/pages/assets/icons_example.dart';
+import 'package:zeta_example/pages/theme/radius_example.dart';
+import 'package:zeta_example/pages/theme/spacing_example.dart';
+import 'package:zeta_example/pages/theme/typography_example.dart';
 import 'package:zeta_example/widgets.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
@@ -41,6 +44,9 @@ final List<Component> components = [
 
 final List<Component> theme = [
   Component(ColorExample.name, (context) => const ColorExample()),
+  Component(TypographyExample.name, (context) => const TypographyExample()),
+  Component(RadiusExample.name, (context) => const RadiusExample()),
+  Component(SpacingExample.name, (context) => const SpacingExample()),
 ];
 final List<Component> assets = [
   Component(IconsExample.name, (context) => const IconsExample()),
@@ -77,7 +83,7 @@ final GoRouter router = GoRouter(
                     ))
                 .toList(),
           ),
-        )
+        ),
       ],
     ),
   ],
diff --git a/example/lib/pages/components/button_example.dart b/example/lib/pages/components/button_example.dart
index 4728b39f..151478d5 100644
--- a/example/lib/pages/components/button_example.dart
+++ b/example/lib/pages/components/button_example.dart
@@ -111,16 +111,10 @@ class _ButtonExampleState extends State<ButtonExample> {
                   Column(
                     children: groupButtons(ZetaWidgetBorder.rounded),
                   ),
-                  Text('Floating Action Buttons',
-                      style: ZetaTextStyles.displayMedium),
-                  Text('Tap buttons to change current FAB: ',
-                      style: ZetaTextStyles.bodyMedium),
-                  Wrap(
-                      children:
-                          fabs.divide(SizedBox.square(dimension: 10)).toList()),
-                ]
-                    .divide(const SizedBox.square(dimension: ZetaSpacing.m))
-                    .toList(),
+                  Text('Floating Action Buttons', style: ZetaTextStyles.displayMedium),
+                  Text('Tap buttons to change current FAB: ', style: ZetaTextStyles.bodyMedium),
+                  Wrap(children: fabs.divide(SizedBox.square(dimension: 10)).toList()),
+                ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(),
               ),
             ),
             Expanded(child: const SizedBox()),
@@ -178,43 +172,42 @@ class _ButtonExampleState extends State<ButtonExample> {
 
   List<Widget> groupButtons(ZetaWidgetBorder) {
     return [
-      ZetaButtonGroup(
-         isLarge: true,
-          rounded: true,
-        buttons: [
-        GroupButton(
+      ZetaButtonGroup(isLarge: true, rounded: true, buttons: [
+        ZetaGroupButton(
+          onPressed: () {},
           label: "Label",
         ),
-        GroupButton(
+        ZetaGroupButton(
+          onPressed: () {},
           label: "Label",
         ),
       ]),
-      ZetaButtonGroup(
-         isLarge: true,
-          rounded: true,
-        buttons: [
-        GroupButton(
+      ZetaButtonGroup(isLarge: true, rounded: true, buttons: [
+        ZetaGroupButton(
+          onPressed: () {},
           label: "Label",
         ),
-        GroupButton.dropdown(
+        ZetaGroupButton.dropdown(
           onPressed: () {},
           label: "Label",
+          dropdown: SizedBox(height: 100, width: 100),
         ),
       ]),
       ZetaButtonGroup(
-         isLarge: true,
-            rounded: true,
+        isLarge: true,
+        rounded: true,
         buttons: [
-          GroupButton.icon(
+          ZetaGroupButton.icon(
             icon: ZetaIcons.star_round,
+            onPressed: () {},
             label: "Label",
           ),
-          GroupButton.dropdown(
+          ZetaGroupButton.dropdown(
             onPressed: () {},
             label: "Label",
+            dropdown: SizedBox(height: 100, width: 100),
           ),
-          GroupButton.icon(
-           
+          ZetaGroupButton.icon(
             icon: ZetaIcons.star_round,
             label: "Label",
           ),
@@ -222,19 +215,19 @@ class _ButtonExampleState extends State<ButtonExample> {
       ),
       ZetaButtonGroup(
         isLarge: true,
-            rounded: true,
+        rounded: true,
         buttons: [
-          GroupButton.icon( 
+          ZetaGroupButton.icon(
             icon: ZetaIcons.star_round,
             label: "Label",
             onPressed: () {},
           ),
-          GroupButton.icon(    
+          ZetaGroupButton.icon(
             icon: ZetaIcons.star_round,
             label: "Label",
             onPressed: () {},
           ),
-          GroupButton.icon(
+          ZetaGroupButton.icon(
             icon: ZetaIcons.star_round,
             label: "Label",
             onPressed: () {},
diff --git a/example/lib/pages/components/progress_example.dart b/example/lib/pages/components/progress_example.dart
index 3622cd0d..5bfc6642 100644
--- a/example/lib/pages/components/progress_example.dart
+++ b/example/lib/pages/components/progress_example.dart
@@ -41,11 +41,7 @@ class ProgressExampleState extends State<ProgressExample> {
               SizedBox(
                 height: 20,
               ),
-              Wrapper(
-                  stepsCompleted: 0,
-                  type: ZetaProgressBarType.standard,
-                  isThin: false,
-                  stateChangeable: true),
+              Wrapper(stepsCompleted: 0, type: ZetaProgressBarType.standard, isThin: false, stateChangeable: true),
               SizedBox(
                 height: 20,
               ),
@@ -118,9 +114,7 @@ class _WrapperState extends State<Wrapper> {
 
   void setLoading() {
     setState(() {
-      type = type == ZetaProgressBarType.buffering
-          ? ZetaProgressBarType.standard
-          : ZetaProgressBarType.buffering;
+      type = type == ZetaProgressBarType.buffering ? ZetaProgressBarType.standard : ZetaProgressBarType.buffering;
     });
   }
 
@@ -150,13 +144,11 @@ class _WrapperState extends State<Wrapper> {
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             widget.type != ZetaProgressBarType.indeterminate
-                ? FilledButton(
-                    onPressed: increasePercentage, child: Text("Increase"))
+                ? FilledButton(onPressed: increasePercentage, child: Text("Increase"))
                 : Container(),
             const SizedBox(width: 40),
             widget.stateChangeable!
-                ? FilledButton(
-                    onPressed: setLoading, child: Text("Start Buffering"))
+                ? FilledButton(onPressed: setLoading, child: Text("Start Buffering"))
                 : SizedBox.shrink()
           ],
         )
diff --git a/example/lib/pages/theme/radius_example.dart b/example/lib/pages/theme/radius_example.dart
new file mode 100644
index 00000000..ba1bb92a
--- /dev/null
+++ b/example/lib/pages/theme/radius_example.dart
@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class RadiusExample extends StatelessWidget {
+  static const String name = 'Radius';
+
+  const RadiusExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    List<BorderRadius> radii = [
+      ZetaRadius.none,
+      ZetaRadius.minimal,
+      ZetaRadius.rounded,
+      ZetaRadius.wide,
+      ZetaRadius.full
+    ];
+    final colors = Zeta.of(context).colors;
+    return ExampleScaffold(
+      name: name,
+      child: SingleChildScrollView(
+        padding: EdgeInsets.all(ZetaSpacing.m),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Column(
+              children: radii
+                  .map((rad) {
+                    return Container(
+                      width: 250,
+                      height: 100,
+                      decoration: BoxDecoration(
+                        borderRadius: rad,
+                        color: Zeta.of(context).colors.blue.shade30,
+                        border: Border.all(color: colors.blue.shade80, width: 3),
+                      ),
+                      child: Center(
+                        child: Container(
+                          decoration: BoxDecoration(
+                            borderRadius: rad,
+                            color: Zeta.of(context).colors.surfacePrimary,
+                            border: Border.all(color: colors.blue.shade50, width: 3),
+                          ),
+                          padding: EdgeInsets.all(ZetaSpacing.b),
+                          child: Text(
+                            rad.radiusString.split('.').last.capitalize(),
+                            style: ZetaTextStyles.titleMedium.apply(
+                              color: Zeta.of(context).colors.textDefault,
+                              fontStyle: FontStyle.normal,
+                              decoration: TextDecoration.none,
+                            ),
+                          ),
+                        ),
+                      ),
+                    );
+                  })
+                  .divide(const SizedBox(height: ZetaSpacing.l))
+                  .toList(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+extension on BorderRadius {
+  String get radiusString {
+    if (topLeft.x == 0) return 'ZetaRadius.none';
+    if (topLeft.x == 4) return 'ZetaRadius.minimal';
+    if (topLeft.x == 8) return 'ZetaRadius.rounded';
+    if (topLeft.x == 24) return 'ZetaRadius.wide';
+    return 'ZetaRadius.full';
+  }
+}
diff --git a/example/lib/pages/theme/spacing_example.dart b/example/lib/pages/theme/spacing_example.dart
new file mode 100644
index 00000000..d21ab5bb
--- /dev/null
+++ b/example/lib/pages/theme/spacing_example.dart
@@ -0,0 +1,133 @@
+import 'package:flutter/material.dart';
+import 'package:path_drawing/path_drawing.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+Map<String, double> namedSpacings = {
+  'xxs': ZetaSpacing.xxs,
+  'xs': ZetaSpacing.xs,
+  's': ZetaSpacing.s,
+  'b': ZetaSpacing.b,
+  'm': ZetaSpacing.m,
+  'l': ZetaSpacing.l,
+  'xl': ZetaSpacing.xl,
+  'xxl': ZetaSpacing.xxl,
+  'xxxl': ZetaSpacing.xxxl,
+};
+Map<String, double> valueSpacings = {
+  'x1': ZetaSpacing.x1,
+  'x2': ZetaSpacing.x2,
+  'x3': ZetaSpacing.x3,
+  'x3.5': ZetaSpacing.x3_5,
+  'x4': ZetaSpacing.x4,
+  'x5': ZetaSpacing.x5,
+  'x6': ZetaSpacing.x6,
+  'x7': ZetaSpacing.x7,
+  'x8': ZetaSpacing.x8,
+  'x9': ZetaSpacing.x9,
+  'x10': ZetaSpacing.x10,
+  'x11': ZetaSpacing.x11,
+  'x12': ZetaSpacing.x12,
+  'x13': ZetaSpacing.x13,
+  'x14': ZetaSpacing.x14,
+  'x16': ZetaSpacing.x16,
+  'x20': ZetaSpacing.x20,
+  'x24': ZetaSpacing.x24,
+};
+
+class SpacingExample extends StatelessWidget {
+  const SpacingExample({super.key});
+  static const String name = 'Spacing';
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: name,
+      child: SingleChildScrollView(
+        child: SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: valueSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(),
+              ),
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: namedSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _SpacingDemo extends StatelessWidget {
+  final MapEntry<String, double> size;
+
+  const _SpacingDemo(this.size);
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = Zeta.of(context).colors;
+    return Container(
+      color: colors.blue.shade30,
+      margin: EdgeInsets.all(ZetaSpacing.m),
+      child: CustomPaint(
+        painter: _TagPainter(color: colors.pink),
+        child: LayoutBuilder(builder: (context, c2) {
+          return Container(
+            margin: EdgeInsets.all(size.value),
+            padding: EdgeInsets.all(ZetaSpacing.s),
+            color: colors.surfacePrimary,
+            child: Text(
+              'ZetaSpacing.' + size.key,
+              style: ZetaTextStyles.titleMedium.apply(
+                color: Zeta.of(context).colors.textDefault,
+                fontStyle: FontStyle.normal,
+                decoration: TextDecoration.none,
+              ),
+            ),
+          );
+        }),
+      ),
+    );
+  }
+}
+
+class _TagPainter extends CustomPainter {
+  const _TagPainter({
+    required this.color,
+  });
+
+  final Color color;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final Paint paint = Paint()
+      ..color = color
+      ..style = PaintingStyle.stroke;
+
+    final horizontal = Path()
+      ..moveTo(0, (size.height / 2))
+      ..lineTo(size.width, (size.height / 2))
+      ..close();
+
+    final vertical = Path()
+      ..moveTo(size.width / 2, 0)
+      ..lineTo(size.width / 2, size.height)
+      ..close();
+
+    canvas.drawPath(dashPath(horizontal, dashArray: CircularIntervalList([2, 3])), paint);
+    canvas.drawPath(
+      dashPath(vertical, dashArray: CircularIntervalList([2, 3]), dashOffset: DashOffset.absolute(size.height)),
+      paint,
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}
diff --git a/example/lib/pages/theme/typography_example.dart b/example/lib/pages/theme/typography_example.dart
index 80e9542b..7e9efcee 100644
--- a/example/lib/pages/theme/typography_example.dart
+++ b/example/lib/pages/theme/typography_example.dart
@@ -11,102 +11,53 @@ class TypographyExample extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final dedicatedSizes = [
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.displayLarge),
-        code: "Text('...', style: ZetaTextStyles.displayLarge)",
-        title: 'Display Large',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.displayMedium),
-        code: "Text('...', style: ZetaTextStyles.displayMedium)",
-        title: 'Display Medium',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.displaySmall),
-        code: "Text('...', style: ZetaTextStyles.displaySmall)",
-        title: 'Display Small',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.heading1),
-        code: "Text('...', style: ZetaTextStyles.heading1)",
-        title: 'Heading 1',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.heading2),
-        code: "Text('...', style: ZetaTextStyles.heading2)",
-        title: 'Heading 2',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.heading3),
-        code: "Text('...', style: ZetaTextStyles.heading3)",
-        title: 'Heading 3',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.titleLarge),
-        code: "Text('...', style: ZetaTextStyles.titleLarge)",
-        title: 'Title Large',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.titleMedium),
-        code: "Text('...', style: ZetaTextStyles.titleMedium)",
-        title: 'Title Medium',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.titleSmall),
-        code: "Text('...', style: ZetaTextStyles.titleSmall)",
-        title: 'Title Small',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.bodyLarge),
-        code: "Text('...', style: ZetaTextStyles.titleLarge)",
-        title: 'Body Large',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.bodyMedium),
-        code: "Text('...', style: ZetaTextStyles.titleMedium)",
-        title: 'Body Medium',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.bodySmall),
-        code: "Text('...', style: ZetaTextStyles.titleSmall)",
-        title: 'Body Small',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.labelLarge),
-        code: "Text('...', style: ZetaTextStyles.labelLarge)",
-        title: 'Label Large',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.labelMedium),
-        code: "Text('...', style: ZetaTextStyles.labelMedium)",
-        title: 'Label Medium',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.labelSmall),
-        code: "Text('...', style: ZetaTextStyles.labelSmall)",
-        title: 'Label Small',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.labelIndicator),
-        code: "Text('...', style: ZetaTextStyles.labelIndicator)",
-        title: 'Label Indicator',
-      ),
-      ExampleModel(
-        example: Text(exampleText, style: ZetaTextStyles.labelTiny),
-        code: "Text('...', style: ZetaTextStyles.labelTiny)",
-        title: 'Label Tiny',
-      ),
-    ];
+    final typography = {
+      'Display Large': ZetaTextStyles.displayLarge,
+      'Display Medium': ZetaTextStyles.displayMedium,
+      'Display Small': ZetaTextStyles.displaySmall,
+      'Heading 1': ZetaTextStyles.heading1,
+      'Heading 2': ZetaTextStyles.heading2,
+      'Heading 3': ZetaTextStyles.heading3,
+      'Title Large': ZetaTextStyles.titleLarge,
+      'Title Medium': ZetaTextStyles.titleMedium,
+      'Title Small': ZetaTextStyles.titleSmall,
+      'Body Large': ZetaTextStyles.bodyLarge,
+      'Body Medium': ZetaTextStyles.bodyMedium,
+      'Body Small': ZetaTextStyles.bodySmall,
+      'Label Large': ZetaTextStyles.labelLarge,
+      'Label Medium': ZetaTextStyles.labelMedium,
+      'Label Small': ZetaTextStyles.labelSmall,
+      'Label Indicator': ZetaTextStyles.labelIndicator,
+      'Label Tiny': ZetaTextStyles.labelTiny,
+    };
 
     return ExampleScaffold(
       name: name,
       child: SingleChildScrollView(
-        padding: EdgeInsets.all(ZetaSpacing.s),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
+        padding: EdgeInsets.all(ZetaSpacing.l),
+        child: Row(
           children: [
-            ...dedicatedSizes.map(ExampleBuilder.new),
+            Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: typography.entries
+                    .map(
+                      (e) => [
+                        Text(e.key, style: e.value),
+                        const SizedBox(height: ZetaSpacing.xxs),
+                        Text(
+                          'Font Size: ' +
+                              e.value.fontSize!.toInt().toString() +
+                              ', Line Height:  ' +
+                              (e.value.height! * e.value.fontSize!).toInt().toString() +
+                              ', Weight: ' +
+                              e.value.fontWeight!.value.toString(),
+                          style: ZetaTextStyles.bodyMedium,
+                        ),
+                        const SizedBox(height: ZetaSpacing.xl),
+                      ],
+                    )
+                    .expand((element) => element)
+                    .toList()),
           ],
         ),
       ),
diff --git a/example/lib/widgets.dart b/example/lib/widgets.dart
index afbe3023..6523f821 100644
--- a/example/lib/widgets.dart
+++ b/example/lib/widgets.dart
@@ -1,66 +1,9 @@
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:zeta_example/utils/theme_color_switch.dart';
 import 'package:zeta_example/utils/theme_constrast_switch.dart';
 import 'package:zeta_example/utils/theme_mode_switch.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-class ExampleModel {
-  final Widget example;
-  final String code;
-  final String? token;
-  final String? description;
-  final Widget? wDescription;
-  final String? title;
-
-  const ExampleModel({
-    required this.example,
-    required this.code,
-    this.token,
-    this.description,
-    this.wDescription,
-    this.title,
-  });
-}
-
-class ExampleBuilder extends StatelessWidget {
-  final ExampleModel model;
-
-  const ExampleBuilder(this.model, {super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        if (model.token != null)
-          Container(
-            height: 7,
-            width: 7,
-            decoration: BoxDecoration(color: Theme.of(context).colorScheme.onSurface, shape: BoxShape.circle),
-          ).paddingVertical(ZetaSpacing.x9).paddingHorizontal(ZetaSpacing.x4),
-        if (model.title != null && MediaQuery.of(context).size.width > 767) Expanded(child: Text(model.title!)),
-        Expanded(
-          flex: 5,
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              if (model.title != null && MediaQuery.of(context).size.width <= 767) Text(model.title!),
-              if (model.token != null) CodeExample(code: model.token!),
-              if (model.description != null) Text(model.description!),
-              if (model.wDescription != null) model.wDescription!,
-              model.example,
-              Container(color: const Color(0xFFF5F5F5)),
-              CodeExample(code: model.code, fill: true),
-            ],
-          ),
-        ),
-        const SizedBox(height: 7, width: 7).paddingVertical(ZetaSpacing.x9).paddingHorizontal(ZetaSpacing.x4),
-      ],
-    );
-  }
-}
-
 class ExampleScaffold extends StatelessWidget {
   final String name;
   final Widget child;
@@ -107,36 +50,3 @@ class ExampleScaffold extends StatelessWidget {
     );
   }
 }
-
-class CodeExample extends StatelessWidget {
-  final String code;
-  final bool fill;
-
-  const CodeExample({required this.code, this.fill = false, super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    final colors = Zeta.of(context).colors;
-    final widget = Container(
-      color: colors.surfaceDisabled,
-      padding: EdgeInsets.all(ZetaSpacing.x4),
-      child: Text(code, style: GoogleFonts.ibmPlexMono(color: colors.textDefault)),
-    );
-
-    return (fill
-            ? Row(
-                children: [
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Row(children: [Expanded(child: widget)]),
-                      ],
-                    ),
-                  )
-                ],
-              )
-            : widget)
-        .paddingVertical(ZetaSpacing.x4);
-  }
-}
diff --git a/example/pubspec.yaml b/example/pubspec.yaml
index 7d5b7701..1e97afde 100644
--- a/example/pubspec.yaml
+++ b/example/pubspec.yaml
@@ -12,7 +12,6 @@ dependencies:
   flutter:
     sdk: flutter
   go_router: ^11.1.2
-  google_fonts: 6.1.0
   path_drawing: ^1.0.1
   shared_preferences: ^2.2.2
   zeta_flutter:
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
index a976b089..8abeaece 100644
--- a/example/widgetbook/main.dart
+++ b/example/widgetbook/main.dart
@@ -57,13 +57,14 @@ class HotReload extends StatelessWidget {
                 WidgetbookUseCase(name: 'Icon Button', builder: (context) => iconButtonUseCase(context)),
                 WidgetbookUseCase(
                     name: 'Floating Action Button', builder: (context) => floatingActionButtonUseCase(context)),
+                WidgetbookUseCase(name: 'Group Button', builder: (context) => buttonGroupUseCase(context)),
               ],
             ),
             WidgetbookUseCase(name: 'Banners', builder: (context) => bannerUseCase(context)),
             WidgetbookUseCase(name: 'In Page Banners', builder: (context) => inPageBannerUseCase(context)),
             WidgetbookUseCase(name: 'Accordion', builder: (context) => accordionUseCase(context)),
             WidgetbookComponent(
-              name: 'Badge',
+              name: 'Chips',
               useCases: [
                 WidgetbookUseCase(name: 'Filter Chip', builder: (context) => filterChipUseCase(context)),
                 WidgetbookUseCase(name: 'Input Chip', builder: (context) => inputChipUseCase(context)),
@@ -71,20 +72,14 @@ class HotReload extends StatelessWidget {
               ],
             ),
             WidgetbookUseCase(name: 'Password Input', builder: (context) => passwordInputUseCase(context)),
-            WidgetbookComponent(
-              name: 'Bottom Sheet',
-              useCases: [
-                WidgetbookUseCase(name: 'Content', builder: (context) => bottomSheetContentUseCase(context)),
-                WidgetbookUseCase(name: 'Live', builder: (context) => bottomSheetLiveUseCase(context)),
-              ],
-            ),
+            WidgetbookUseCase(name: 'Bottom Sheet', builder: (context) => bottomSheetContentUseCase(context)),
             WidgetbookUseCase(name: 'Dial Pad', builder: (context) => dialPadUseCase(context)),
             WidgetbookUseCase(name: 'Navigation Bar', builder: (context) => navigationBarUseCase(context)),
             WidgetbookComponent(
               name: 'Progress',
               useCases: [
                 WidgetbookUseCase(name: 'Bar', builder: (context) => progressBarUseCase(context)),
-                WidgetbookUseCase(name : 'Circle', builder : (context) => progressCircleUseCase(context))
+                WidgetbookUseCase(name: 'Circle', builder: (context) => progressCircleUseCase(context))
               ],
             ),
           ]..sort((a, b) => a.name.compareTo(b.name)),
diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart
index 32ba0c94..5dfc5ab5 100644
--- a/example/widgetbook/pages/assets/icon_widgetbook.dart
+++ b/example/widgetbook/pages/assets/icon_widgetbook.dart
@@ -46,7 +46,7 @@ Widget iconsUseCase(BuildContext context) {
                       },
                       child: Column(
                         mainAxisAlignment: MainAxisAlignment.center,
-                        children: [Icon(e.value, size: 40), Text(nameArr, textAlign: TextAlign.center)],
+                        children: [Icon(e.value, size: ZetaSpacing.x10), Text(nameArr, textAlign: TextAlign.center)],
                       ),
                     ),
                   );
diff --git a/example/widgetbook/pages/components/accordion_widgetbook.dart b/example/widgetbook/pages/components/accordion_widgetbook.dart
index 85cd8b92..79c3bee5 100644
--- a/example/widgetbook/pages/components/accordion_widgetbook.dart
+++ b/example/widgetbook/pages/components/accordion_widgetbook.dart
@@ -3,10 +3,11 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget accordionUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: Padding(
-        padding: const EdgeInsets.all(20),
+        padding: const EdgeInsets.all(ZetaSpacing.x5),
         child: ZetaAccordion(
           child: context.knobs.boolean(label: 'Disabled')
               ? null
@@ -20,7 +21,7 @@ Widget accordionUseCase(BuildContext context) => WidgetbookTestWidget(
                 ),
           title: context.knobs.string(label: 'Accordion Title', initialValue: 'Title'),
           contained: context.knobs.boolean(label: 'Contained', initialValue: false),
-          rounded: context.knobs.boolean(label: 'Rounded', initialValue: false),
+          rounded: roundedKnob(context),
         ),
       ),
     );
diff --git a/example/widgetbook/pages/components/badges_widgetbook.dart b/example/widgetbook/pages/components/badges_widgetbook.dart
index 293cc5b5..d10cdb0d 100644
--- a/example/widgetbook/pages/components/badges_widgetbook.dart
+++ b/example/widgetbook/pages/components/badges_widgetbook.dart
@@ -3,88 +3,66 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
-Widget statusLabelUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: ZetaStatusLabel(
-        label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-        rounded: context.knobs.boolean(label: 'Rounded'),
-        status: context.knobs.list(
-          label: 'Status',
-          labelBuilder: (value) => value.name.split('.').last.capitalize(),
-          options: ZetaWidgetStatus.values,
-        ),
-        customIcon: context.knobs.list(
-          label: 'Icon',
-          options: [
-            ZetaIcons.star_half_round,
-            ZetaIcons.add_alert_round,
-            ZetaIcons.add_box_round,
-            ZetaIcons.barcode_round,
-          ],
-          labelBuilder: (value) {
-            if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
-            if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
-            if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
-            if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
-            return '';
-          },
-        ),
+Widget statusLabelUseCase(BuildContext context) {
+  final bool rounded = roundedKnob(context);
+
+  return WidgetbookTestWidget(
+    widget: ZetaStatusLabel(
+      label: context.knobs.string(label: 'Label', initialValue: 'Label'),
+      rounded: rounded,
+      status: context.knobs.list(
+        label: 'Status',
+        labelBuilder: enumLabelBuilder,
+        options: ZetaWidgetStatus.values,
       ),
-    );
+      customIcon: iconKnob(context, rounded: rounded),
+    ),
+  );
+}
 
 Widget priorityPillUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: ZetaPriorityPill(
         index: context.knobs.int.slider(label: 'Index'),
         priority: context.knobs.string(label: 'Priority', initialValue: 'Priority'),
-        rounded: context.knobs.boolean(label: 'Rounded'),
+        rounded: roundedKnob(context),
       ),
     );
+
 Widget badgeUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: ZetaBadge(
         label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-        rounded: context.knobs.boolean(label: 'Rounded'),
+        rounded: roundedKnob(context),
         status: context.knobs.list(
           label: 'Status',
           options: ZetaWidgetStatus.values,
-          labelBuilder: (value) => value.name.split('.').last.capitalize(),
+          labelBuilder: enumLabelBuilder,
         ),
       ),
     );
 
-Widget indicatorsUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: Center(
-        child: ZetaIndicator(
-          type: context.knobs.list(
-            label: 'Type',
-            options: ZetaIndicatorType.values,
-            labelBuilder: (value) => value.name.split('.').last.capitalize(),
-          ),
-          icon: context.knobs.list(
-            label: 'Icon',
-            options: [
-              Icon(ZetaIcons.star_half_round),
-              Icon(ZetaIcons.add_alert_round),
-              Icon(ZetaIcons.add_box_round),
-              Icon(ZetaIcons.barcode_round),
-            ],
-            labelBuilder: (value) {
-              if (value?.icon == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
-              if (value?.icon == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
-              if (value?.icon == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
-              if (value?.icon == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
-              return '';
-            },
-          ),
-          inverse: context.knobs.boolean(label: 'Inverse Border'),
-          size: context.knobs.list(
-            label: 'Size',
-            labelBuilder: (value) => value.name.split('.').last.capitalize(),
-            options: ZetaWidgetSize.values,
-          ),
-          value: context.knobs.int.slider(label: 'Value'),
-        ),
+Widget indicatorsUseCase(BuildContext context) {
+  final bool rounded = roundedKnob(context);
+
+  return WidgetbookTestWidget(
+    widget: ZetaIndicator(
+      type: context.knobs.list(
+        label: 'Type',
+        options: ZetaIndicatorType.values,
+        labelBuilder: enumLabelBuilder,
       ),
-    );
+      icon: iconKnob(context, rounded: rounded),
+      inverse: context.knobs.boolean(label: 'Inverse Border'),
+      size: context.knobs.list(
+        label: 'Size',
+        labelBuilder: enumLabelBuilder,
+        options: ZetaWidgetSize.values,
+      ),
+      value: context.knobs.int.slider(label: 'Value'),
+    ),
+  );
+}
 
 Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: Row(
@@ -92,7 +70,7 @@ Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget(
         children: [
           ZetaTag(
             label: context.knobs.string(label: 'Label', initialValue: 'Tag'),
-            rounded: context.knobs.boolean(label: 'Rounded'),
+            rounded: roundedKnob(context),
             direction: context.knobs.list(
               label: 'Direction',
               options: ZetaTagDirection.values,
@@ -103,35 +81,24 @@ Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget(
       ),
     );
 
-Widget workcloudIndicatorsUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: ZetaWorkcloudIndicator(
-          index: context.knobs.string(label: 'Index', initialValue: '1'),
-          label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-          prioritySize: context.knobs.list(
-            label: 'Size',
-            labelBuilder: (value) => value.name.split('.').last.capitalize(),
-            options: ZetaWidgetSize.values,
-          ),
-          priorityType: context.knobs.list(
-            label: 'Type',
-            labelBuilder: (value) => value.name.split('.').last.capitalize(),
-            options: ZetaWorkcloudIndicatorType.values,
-          ),
-          icon: context.knobs.listOrNull(
-            label: 'Icon',
-            options: [
-              ZetaIcons.star_half_round,
-              ZetaIcons.add_alert_round,
-              ZetaIcons.add_box_round,
-              ZetaIcons.barcode_round,
-            ],
-            initialOption: null,
-            labelBuilder: (value) {
-              if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
-              if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
-              if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
-              if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
-              return '';
-            },
-          )),
-    );
+Widget workcloudIndicatorsUseCase(BuildContext context) {
+  final bool rounded = roundedKnob(context);
+
+  return WidgetbookTestWidget(
+    widget: ZetaWorkcloudIndicator(
+      index: context.knobs.string(label: 'Index', initialValue: '1'),
+      label: context.knobs.string(label: 'Label', initialValue: 'Label'),
+      prioritySize: context.knobs.list(
+        label: 'Size',
+        labelBuilder: (value) => value.name.split('.').last.capitalize(),
+        options: ZetaWidgetSize.values,
+      ),
+      priorityType: context.knobs.list(
+        label: 'Type',
+        labelBuilder: (value) => value.name.split('.').last.capitalize(),
+        options: ZetaWorkcloudIndicatorType.values,
+      ),
+      icon: iconKnob(context, rounded: rounded, nullable: true),
+    ),
+  );
+}
diff --git a/example/widgetbook/pages/components/banner_widgetbook.dart b/example/widgetbook/pages/components/banner_widgetbook.dart
index 6192e4c1..85792576 100644
--- a/example/widgetbook/pages/components/banner_widgetbook.dart
+++ b/example/widgetbook/pages/components/banner_widgetbook.dart
@@ -3,42 +3,48 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
-Widget bannerUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: Padding(
-        padding: EdgeInsets.all(20),
-        child: Column(
-          children: [
-            ZetaSystemBanner(
-              context: context,
-              title: context.knobs.string(label: 'Title', initialValue: 'Banner Title'),
-              type: context.knobs.list(
-                label: 'Type',
-                options: ZetaSystemBannerStatus.values,
-                labelBuilder: (value) => value.name.split('.').last.capitalize(),
-              ),
-              leadingIcon: context.knobs.list(
-                label: 'Icon',
-                options: [
-                  ZetaIcons.star_half_round,
-                  ZetaIcons.add_alert_round,
-                  ZetaIcons.add_box_round,
-                  ZetaIcons.barcode_round,
-                ],
-                labelBuilder: (value) {
-                  if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
-                  if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
-                  if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
-                  if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
-                  return '';
-                },
-              ),
-              titleStart: context.knobs.boolean(label: 'Center title'),
-              trailing: context.knobs.boolean(label: 'Trailing Icon')
-                  ? IconButton(icon: Icon(ZetaIcons.chevron_right_round), onPressed: () {})
-                  : null,
-            ),
-          ],
-        ),
+Widget bannerUseCase(BuildContext context) {
+  final rounded = roundedKnob(context);
+
+  final banner = ZetaSystemBanner(
+    context: context,
+    title: context.knobs.string(label: 'Title', initialValue: 'Banner Title'),
+    type: context.knobs.list(
+      label: 'Type',
+      options: ZetaSystemBannerStatus.values,
+      labelBuilder: (value) => value.name.split('.').last.capitalize(),
+    ),
+    leadingIcon: iconKnob(context, rounded: rounded, nullable: true),
+    titleStart: context.knobs.boolean(label: 'Center title'),
+    trailing: Icon(iconKnob(
+      context,
+      rounded: rounded,
+      nullable: true,
+      name: 'trailing',
+      initial: ZetaIcons.chevron_right_round,
+    )),
+  );
+
+  return WidgetbookTestWidget(
+    widget: Padding(
+      padding: EdgeInsets.all(ZetaSpacing.x5),
+      child: Column(
+        children: [
+          banner,
+          const SizedBox(height: ZetaSpacing.xl),
+          ZetaButton.text(
+            label: 'Popup',
+            onPressed: () {
+              ScaffoldMessenger.of(context).showMaterialBanner(banner);
+              Future.delayed(Duration(seconds: 2)).then(
+                (value) => ScaffoldMessenger.of(context).clearMaterialBanners(),
+              );
+            },
+          )
+        ],
       ),
-    );
+    ),
+  );
+}
diff --git a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
index 85069247..86274219 100644
--- a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
+++ b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
@@ -3,39 +3,45 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
-Widget bottomSheetContentUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: Padding(
-        padding: const EdgeInsets.all(20),
-        child: _bottomSheet(context),
-      ),
-    );
-
-Widget bottomSheetLiveUseCase(BuildContext context) {
+Widget bottomSheetContentUseCase(BuildContext context) {
   final sheet = _bottomSheet(context);
+
   return WidgetbookTestWidget(
-    widget: ElevatedButton(
-      child: Text('Open'),
-      onPressed: () {
-        showModalBottomSheet(context: context, builder: (_) => sheet);
-      },
+    widget: Padding(
+      padding: const EdgeInsets.all(ZetaSpacing.x5),
+      child: Column(
+        children: [
+          sheet,
+          const SizedBox(height: ZetaSpacing.xl),
+          ZetaButton.text(
+            label: 'Open',
+            onPressed: () => showModalBottomSheet(context: context, builder: (_) => sheet),
+          )
+        ],
+      ),
     ),
   );
 }
 
 ZetaBottomSheet _bottomSheet(BuildContext context) {
+  final bool rounded = roundedKnob(context);
+  final leadingIcon = iconKnob(context, rounded: rounded, nullable: true, initial: null);
+  final trailingIcon = iconKnob(context, rounded: rounded, nullable: true, initial: ZetaIcons.chevron_right_round);
+
   return ZetaBottomSheet(
     centerTitle: context.knobs.boolean(label: 'Center title', initialValue: true),
     title: context.knobs.string(label: 'Title', initialValue: 'Title'),
     body: Wrap(
-      spacing: 12,
-      runSpacing: 12,
+      spacing: ZetaSpacing.x3,
+      runSpacing: ZetaSpacing.x3,
       children: List.generate(
         6,
         (index) => ZetaMenuItem(
           type: context.knobs.boolean(label: 'Grid') ? ZetaMenuItemType.vertical : ZetaMenuItemType.horizontal,
-          leading: context.knobs.boolean(label: 'Leading Icon') ? Icon(ZetaIcons.star_round) : null,
-          trailing: context.knobs.boolean(label: 'Trailing Icon') ? Icon(ZetaIcons.chevron_right_round) : null,
+          leading: leadingIcon != null ? Icon(leadingIcon) : null,
+          trailing: trailingIcon != null ? Icon(trailingIcon) : null,
           label: Text('Menu Item'),
           onTap: context.knobs.boolean(label: 'Disabled') ? null : () {},
         ),
diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart
index 6a62ca5d..45ce0033 100644
--- a/example/widgetbook/pages/components/button_widgetbook.dart
+++ b/example/widgetbook/pages/components/button_widgetbook.dart
@@ -3,116 +3,89 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget buttonUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: ZetaButton(
         label: context.knobs.string(label: 'Text', initialValue: 'Button'),
         onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {},
-        borderType: context.knobs.boolean(label: 'Rounded') ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp,
+        borderType: context.knobs.list(
+          label: 'Border type',
+          labelBuilder: enumLabelBuilder,
+          options: ZetaWidgetBorder.values,
+        ),
         size: context.knobs.list(
           label: 'Size',
           options: ZetaWidgetSize.values,
-          labelBuilder: (value) => value.name.split('.').last.capitalize(),
+          labelBuilder: enumLabelBuilder,
         ),
         type: context.knobs.list(
           label: 'Type',
           options: ZetaButtonType.values,
-          labelBuilder: (value) => value.name.split('.').last.capitalize(),
+          labelBuilder: enumLabelBuilder,
         ),
       ),
     );
 
-Widget iconButtonUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: ZetaIconButton(
-        icon: context.knobs.list(
-          label: 'Icon',
-          options: [
-            ZetaIcons.star_half_round,
-            ZetaIcons.add_alert_round,
-            ZetaIcons.add_box_round,
-            ZetaIcons.barcode_round,
-          ],
-          labelBuilder: (value) {
-            if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
-            if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
-            if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
-            if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
-            return '';
-          },
-        ),
-        onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {},
-        borderType: context.knobs.boolean(label: 'Rounded') ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp,
-        size: context.knobs.list(
-          label: 'Size',
-          labelBuilder: (value) => value.name.split('.').last.capitalize(),
-          options: ZetaWidgetSize.values,
-        ),
-        type: context.knobs.list(
-          label: 'Type',
-          options: ZetaButtonType.values,
-          labelBuilder: (value) => value.name.split('.').last.capitalize(),
-        ),
+Widget iconButtonUseCase(BuildContext context) {
+  final borderType = context.knobs.list(
+    label: 'Border type',
+    options: ZetaWidgetBorder.values,
+    labelBuilder: enumLabelBuilder,
+  );
+  return WidgetbookTestWidget(
+    widget: ZetaIconButton(
+      icon: iconKnob(context, rounded: borderType != ZetaWidgetBorder.sharp)!,
+      onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {},
+      borderType: borderType,
+      size: context.knobs.list(
+        label: 'Size',
+        labelBuilder: enumLabelBuilder,
+        options: ZetaWidgetSize.values,
       ),
-    );
+      type: context.knobs.list(
+        label: 'Type',
+        options: ZetaButtonType.values,
+        labelBuilder: enumLabelBuilder,
+      ),
+    ),
+  );
+}
 
-Widget buttonGroupUseCase(BuildContext context) => WidgetbookTestWidget(
-        widget: ZetaButtonGroup(
-      isLarge: context.knobs.boolean(label: 'isLarge'),
-      rounded: context.knobs.boolean(label: 'rounded'),
-      buttons: [
-        GroupButton(
-          label: context.knobs.string(label: 'button1Title'),
-          onPressed:
-              context.knobs.boolean(label: 'button1Dropdown') ? () {} : null,
-          icon: context.knobs.listOrNull(
-            label: 'button1Icon',
-            options: [
-              ZetaIcons.star_round,
-            ],
-            labelBuilder: (value) {
-              if (value == ZetaIcons.star_half_round)
-                return 'ZetaIcons.star_half_round';
-              return '';
-            },
-          ),
-        ),
-        GroupButton(
-          label: context.knobs.string(label: 'button2Title'),
-          onPressed:
-              context.knobs.boolean(label: 'button2Dropdown') ? () {} : null,
-          icon: context.knobs.listOrNull(
-            label: 'button2Icon',
-            options: [
-              ZetaIcons.star_round,
-            ],
-            labelBuilder: (value) {
-              if (value == ZetaIcons.star_half_round)
-                return 'ZetaIcons.star_half_round';
-              return '';
-            },
-          ),
-        ),
-        GroupButton(
-          label: context.knobs.string(label: 'button3Title'),
-          onPressed:
-              context.knobs.boolean(label: 'button3Dropdown') ? () {} : null,
-          icon: context.knobs.listOrNull(
-            label: 'button3Icon',
-            options: [
-              ZetaIcons.star_round,
-            ],
-            labelBuilder: (value) {
-              if (value == ZetaIcons.star_half_round)
-                return 'ZetaIcons.star_half_round';
-              return '';
-            },
-          ),
-        )
-      ],
-    ));
+Widget buttonGroupUseCase(BuildContext context) {
+  final bool rounded = roundedKnob(context);
+
+  final onPressed = context.knobs.boolean(label: 'Disabled', initialValue: false) ? null : () {};
 
-Widget floatingActionButtonUseCase(BuildContext context) =>
-    WidgetbookTestWidget(
+  return WidgetbookTestWidget(
+      widget: ZetaButtonGroup(
+    isLarge: context.knobs.boolean(label: 'Large'),
+    rounded: rounded,
+    isInverse: context.knobs.boolean(label: 'Inverse'),
+    buttons: [
+      ZetaGroupButton(
+        label: context.knobs.string(label: 'Button 1 Title', initialValue: 'Button'),
+        onPressed: onPressed,
+        icon: iconKnob(context, name: 'Button 1 Icon', nullable: true, initial: null, rounded: rounded),
+        dropdown: context.knobs.boolean(label: 'Button 1 Dropdown') ? Container() : null,
+      ),
+      ZetaGroupButton(
+        label: context.knobs.string(label: 'Button 2 Title'),
+        onPressed: onPressed,
+        icon: iconKnob(context, name: 'Button 2 Icon', nullable: true, initial: null, rounded: rounded),
+        dropdown: context.knobs.boolean(label: 'Button 2 Dropdown') ? Container() : null,
+      ),
+      ZetaGroupButton(
+        label: context.knobs.string(label: 'Button 3 Title'),
+        onPressed: onPressed,
+        icon: iconKnob(context, name: 'Button 3 Icon', nullable: true, initial: null, rounded: rounded),
+        dropdown: context.knobs.boolean(label: 'Button 3 Dropdown') ? Container() : null,
+      )
+    ],
+  ));
+}
+
+Widget floatingActionButtonUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: Padding(padding: EdgeInsets.all(20), child: FabWidget(context)),
     );
 
@@ -141,50 +114,35 @@ class _FabWidgetState extends State<FabWidget> {
 
   @override
   Widget build(BuildContext _) {
+    final shape = widget.c.knobs.list(
+      label: 'Shape',
+      options: ZetaWidgetBorder.values,
+      labelBuilder: enumLabelBuilder,
+    );
     return SizedBox(
       height: MediaQuery.of(context).size.height * 0.9,
       child: Scaffold(
         body: ListView.builder(
+          key: PageStorageKey(0),
           itemCount: MediaQuery.of(context).size.height.toInt(),
           controller: _scrollController,
-          itemBuilder: (context, index) {
-            return Text("$index");
-          },
+          itemBuilder: (context, index) => Text("$index"),
         ),
         floatingActionButton: ZetaFAB(
           scrollController: _scrollController,
           label: widget.c.knobs.string(label: 'Label', initialValue: 'Floating Action Button'),
           onPressed: widget.c.knobs.boolean(label: 'Disabled') ? null : () {},
-          icon: widget.c.knobs.list(
-            label: 'Icon',
-            options: [
-              ZetaIcons.star_half_round,
-              ZetaIcons.add_alert_round,
-              ZetaIcons.add_box_round,
-              ZetaIcons.barcode_round,
-            ],
-            labelBuilder: (value) {
-              if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
-              if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
-              if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
-              if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
-              return '';
-            },
-          ),
-          shape: widget.c.knobs.list(
-            label: 'Shape',
-            options: ZetaWidgetBorder.values,
-            labelBuilder: (value) => value.name.split('.').last.capitalize(),
-          ),
+          icon: iconKnob(context, rounded: shape != ZetaWidgetBorder.sharp)!,
+          shape: shape,
           size: widget.c.knobs.list(
-            label: 'Shape',
+            label: 'Size',
             options: ZetaFabSize.values,
-            labelBuilder: (value) => value.name.split('.').last.capitalize(),
+            labelBuilder: enumLabelBuilder,
           ),
           type: widget.c.knobs.list(
-            label: 'Shape',
+            label: 'Type',
             options: ZetaFabType.values,
-            labelBuilder: (value) => value.name.split('.').last.capitalize(),
+            labelBuilder: enumLabelBuilder,
           ),
         ),
       ),
diff --git a/example/widgetbook/pages/components/checkbox_widgetbook.dart b/example/widgetbook/pages/components/checkbox_widgetbook.dart
index 47de4701..63ea3365 100644
--- a/example/widgetbook/pages/components/checkbox_widgetbook.dart
+++ b/example/widgetbook/pages/components/checkbox_widgetbook.dart
@@ -3,40 +3,24 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
-
-Widget checkboxUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: _CheckState(context: context, initialState: true),
-    );
-
-class _CheckState extends StatefulWidget {
-  final BuildContext context;
-  final bool? initialState;
-  const _CheckState({required this.context, this.initialState});
-
-  @override
-  State<_CheckState> createState() => __CheckStateState();
-}
-
-class __CheckStateState extends State<_CheckState> {
-  bool? b = null;
-
-  @override
-  void initState() {
-    super.initState();
-    b = widget.initialState;
-  }
-
-  @override
-  Widget build(BuildContext _) {
-    dynamic onChanged =
-        context.knobs.boolean(label: 'Enabled', initialValue: true) ? (b2) => setState(() => b = b2) : null;
-
-    return ZetaCheckbox(
-      value: b,
-      onChanged: onChanged,
-      useIndeterminate: context.knobs.boolean(label: 'Use Indeterminate', initialValue: true),
-      rounded: context.knobs.boolean(label: 'Rounded'),
-      label: context.knobs.string(label: 'Label', initialValue: 'Checkbox'),
-    );
-  }
+import '../../utils/utils.dart';
+
+Widget checkboxUseCase(BuildContext context) {
+  bool? b = true;
+
+  return WidgetbookTestWidget(
+    widget: StatefulBuilder(
+      builder: (context, setState) {
+        dynamic onChanged =
+            context.knobs.boolean(label: 'Enabled', initialValue: true) ? (b2) => setState(() => b = b2) : null;
+        return ZetaCheckbox(
+          value: b,
+          onChanged: onChanged,
+          useIndeterminate: context.knobs.boolean(label: 'Use Indeterminate', initialValue: true),
+          rounded: roundedKnob(context),
+          label: context.knobs.string(label: 'Label', initialValue: 'Checkbox'),
+        );
+      },
+    ),
+  );
 }
diff --git a/example/widgetbook/pages/components/chip_widgetbook.dart b/example/widgetbook/pages/components/chip_widgetbook.dart
index f6cae53c..78c61d14 100644
--- a/example/widgetbook/pages/components/chip_widgetbook.dart
+++ b/example/widgetbook/pages/components/chip_widgetbook.dart
@@ -3,35 +3,17 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget inputChipUseCase(BuildContext context) {
-  final trailing = context.knobs.listOrNull(
-    label: 'Icon',
-    options: [
-      ZetaIcons.star_half_round,
-      ZetaIcons.add_alert_round,
-      ZetaIcons.add_box_round,
-      ZetaIcons.barcode_round,
-    ],
-    initialOption: null,
-    labelBuilder: (value) {
-      if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
-      if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
-      if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
-      if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
-      return '';
-    },
-  );
+  final bool rounded = roundedKnob(context);
+  final trailing = iconKnob(context);
+
   return WidgetbookTestWidget(
     widget: ZetaInputChip(
       label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-      leading: context.knobs.boolean(label: 'Avatar')
-          ? ZetaAvatar(
-              initials: 'AZ',
-              size: ZetaAvatarSize.xs,
-            )
-          : null,
-      rounded: context.knobs.boolean(label: 'Rounded'),
+      leading: context.knobs.boolean(label: 'Avatar') ? ZetaAvatar(initials: 'AZ', size: ZetaAvatarSize.xs) : null,
+      rounded: rounded,
       trailing: trailing != null ? Icon(trailing) : null,
     ),
   );
@@ -40,7 +22,7 @@ Widget inputChipUseCase(BuildContext context) {
 Widget filterChipUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: ZetaFilterChip(
         label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-        rounded: context.knobs.boolean(label: 'Rounded'),
+        rounded: roundedKnob(context),
         selected: context.knobs.boolean(label: 'Selected'),
       ),
     );
@@ -48,7 +30,7 @@ Widget filterChipUseCase(BuildContext context) => WidgetbookTestWidget(
 Widget assistChipUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: ZetaAssistChip(
         label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-        rounded: context.knobs.boolean(label: 'Rounded'),
+        rounded: roundedKnob(context),
         leading: context.knobs.boolean(label: 'Icon') ? Icon(ZetaIcons.star_round) : null,
       ),
     );
diff --git a/example/widgetbook/pages/components/dial_pad_widgetbook.dart b/example/widgetbook/pages/components/dial_pad_widgetbook.dart
index 55ac5c33..38c1e654 100644
--- a/example/widgetbook/pages/components/dial_pad_widgetbook.dart
+++ b/example/widgetbook/pages/components/dial_pad_widgetbook.dart
@@ -6,24 +6,25 @@ import '../../test/test_components.dart';
 
 Widget dialPadUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: SingleChildScrollView(
-          scrollDirection: Axis.horizontal,
-          child: ZetaDialPad(
-            buttonValues: context.knobs.boolean(label: 'Change to emoji')
-                ? {
-                    '😀': '',
-                    '🥲': '',
-                    '🥳': '',
-                    '🤠': '',
-                    '😨': '',
-                    '👀': '',
-                    '🐤': '',
-                    '🐞': '',
-                    '🦊': '',
-                    '🏆': '',
-                    '⛺️': '',
-                    '🧽': ''
-                  }
-                : null,
-            buttonsPerRow: context.knobs.int.slider(label: 'Buttons per row', initialValue: 3, min: 1, max: 9),
-          )),
+        scrollDirection: Axis.horizontal,
+        child: ZetaDialPad(
+          buttonValues: context.knobs.boolean(label: 'Change to emoji')
+              ? {
+                  '😀': '',
+                  '🥲': '',
+                  '🥳': '',
+                  '🤠': '',
+                  '😨': '',
+                  '👀': '',
+                  '🐤': '',
+                  '🐞': '',
+                  '🦊': '',
+                  '🏆': '',
+                  '⛺️': '',
+                  '🧽': ''
+                }
+              : null,
+          buttonsPerRow: context.knobs.int.slider(label: 'Buttons per row', initialValue: 3, min: 1, max: 9),
+        ),
+      ),
     );
diff --git a/example/widgetbook/pages/components/in_page_banner_widgetbook.dart b/example/widgetbook/pages/components/in_page_banner_widgetbook.dart
index 16938b86..ea2f6462 100644
--- a/example/widgetbook/pages/components/in_page_banner_widgetbook.dart
+++ b/example/widgetbook/pages/components/in_page_banner_widgetbook.dart
@@ -3,10 +3,11 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget inPageBannerUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: Padding(
-        padding: EdgeInsets.all(20),
+        padding: EdgeInsets.all(ZetaSpacing.x5),
         child: ZetaInPageBanner(
           content: Text(
             context.knobs.string(
@@ -17,11 +18,11 @@ Widget inPageBannerUseCase(BuildContext context) => WidgetbookTestWidget(
           status: context.knobs.list(
             label: 'Severity',
             options: ZetaWidgetStatus.values,
-            labelBuilder: (value) => value.name.split('.').last.capitalize(),
+            labelBuilder: enumLabelBuilder,
           ),
           onClose: context.knobs.boolean(label: 'Show Close icon') ? () {} : null,
           title: context.knobs.string(label: 'Title', initialValue: 'Title'),
-          rounded: context.knobs.boolean(label: 'Rounded'),
+          rounded: roundedKnob(context),
           actions: () {
             final x = context.knobs.list(label: 'Show Buttons', options: [0, 1, 2]);
 
@@ -35,22 +36,7 @@ Widget inPageBannerUseCase(BuildContext context) => WidgetbookTestWidget(
             }
             return <ZetaButton>[];
           }(),
-          customIcon: context.knobs.list(
-            label: 'Icon',
-            options: [
-              ZetaIcons.star_half_round,
-              ZetaIcons.add_alert_round,
-              ZetaIcons.add_box_round,
-              ZetaIcons.barcode_round,
-            ],
-            labelBuilder: (value) {
-              if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
-              if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
-              if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
-              if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
-              return '';
-            },
-          ),
+          customIcon: iconKnob(context, nullable: true),
         ),
       ),
     );
diff --git a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart
index 8b73cc40..a092c2a0 100644
--- a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart
+++ b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart
@@ -4,11 +4,12 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget navigationBarUseCase(BuildContext context) {
   List<ZetaNavigationBarItem> items = List.generate(
     context.knobs.int.slider(label: 'Items', min: 2, max: 6, initialValue: 2),
-    (index) => ZetaNavigationBarItem(icon: ZetaIcons.star_round, label: 'Label $index'),
+    (index) => ZetaNavigationBarItem(icon: iconKnob(context)!, label: 'Label $index'),
   );
   int currIndex = 0;
   bool showButton = context.knobs.boolean(label: 'Button');
diff --git a/example/widgetbook/pages/components/password_input_widgetbook.dart b/example/widgetbook/pages/components/password_input_widgetbook.dart
index d3a56b05..f6714267 100644
--- a/example/widgetbook/pages/components/password_input_widgetbook.dart
+++ b/example/widgetbook/pages/components/password_input_widgetbook.dart
@@ -3,6 +3,7 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget passwordInputUseCase(BuildContext context) => _Password();
 
@@ -21,6 +22,9 @@ class _PasswordState extends State<_Password> {
   Widget build(BuildContext _) {
     final enableValidation = context.knobs.boolean(label: 'Enable validation', initialValue: false);
     final validationString = context.knobs.string(label: 'Error label', initialValue: 'Incorrect');
+
+    final bool rounded = roundedKnob(context);
+
     return Form(
       key: _formKey,
       child: WidgetbookTestWidget(
@@ -29,31 +33,16 @@ class _PasswordState extends State<_Password> {
             ConstrainedBox(
               constraints: BoxConstraints(maxWidth: 328),
               child: ZetaPasswordInput(
-                rounded: context.knobs.boolean(label: 'Rounded'),
                 enabled: context.knobs.boolean(label: 'Enabled', initialValue: true),
                 obscureText: context.knobs.boolean(label: 'Obscure text', initialValue: true),
                 size: context.knobs.list(
                   label: 'Size',
                   options: ZetaWidgetSize.values,
-                  labelBuilder: (value) => value.name.split('.').last.capitalize(),
-                ),
-                footerIcon: context.knobs.listOrNull(
-                  label: 'Icon',
-                  options: [
-                    ZetaIcons.star_half_round,
-                    ZetaIcons.add_alert_round,
-                    ZetaIcons.add_box_round,
-                    ZetaIcons.barcode_round,
-                  ],
-                  labelBuilder: (value) {
-                    if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
-                    if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
-                    if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
-                    if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
-                    return '';
-                  },
-                  initialOption: null,
+                  labelBuilder: enumLabelBuilder,
                 ),
+                rounded: rounded,
+                footerIcon:
+                    iconKnob(context, initial: ZetaIcons.star_half_round, name: 'Footer icon', rounded: rounded),
                 footerText: context.knobs.string(label: 'Footer Text'),
                 hintText: context.knobs.string(label: 'Hint text'),
                 label: context.knobs.string(label: 'Label'),
diff --git a/example/widgetbook/pages/components/progress_widgetbook.dart b/example/widgetbook/pages/components/progress_widgetbook.dart
index 3dfcbb83..af08949d 100644
--- a/example/widgetbook/pages/components/progress_widgetbook.dart
+++ b/example/widgetbook/pages/components/progress_widgetbook.dart
@@ -3,38 +3,36 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget progressBarUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: LayoutBuilder(builder: (context, constraints) {
         return SizedBox(
           width: constraints.maxWidth - ZetaSpacing.xl,
           child: ZetaProgressBar(
-            progress: context.knobs.double
-                .slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5)
-                .toDouble(),
+            progress: context.knobs.double.slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5).toDouble(),
             type: context.knobs.list(
-                label: 'Type',
-                options: ZetaProgressBarType.values,
-                labelBuilder: (value) => value.name),
+              label: 'Type',
+              options: ZetaProgressBarType.values,
+              labelBuilder: enumLabelBuilder,
+            ),
             isThin: context.knobs.boolean(label: 'Thin'),
-            rounded: context.knobs.boolean(label: 'Rounded'),
+            rounded: roundedKnob(context),
             label: context.knobs.stringOrNull(label: 'Label'),
           ),
         );
       }),
     );
 
-Widget progressCircleUseCase(BuildContext context) =>
-    WidgetbookTestWidget(widget: 
-           ZetaProgressCircle(
-            progress: context.knobs.double
-                .slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5)
-                .toDouble(),
-            rounded: context.knobs.boolean(label: 'Rounded'),
-            size: context.knobs.list(
-                initialOption: ZetaCircleSizes.xl,
-                label: 'Size',
-                options: ZetaCircleSizes.values,
-                labelBuilder: (value) => value.name),
-          ),
+Widget progressCircleUseCase(BuildContext context) => WidgetbookTestWidget(
+      widget: ZetaProgressCircle(
+        progress: context.knobs.double.slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5).toDouble(),
+        rounded: roundedKnob(context),
+        size: context.knobs.list(
+          initialOption: ZetaCircleSizes.xl,
+          label: 'Size',
+          options: ZetaCircleSizes.values,
+          labelBuilder: enumLabelBuilder,
+        ),
+      ),
     );
diff --git a/example/widgetbook/pages/theme/typography_widgetbook.dart b/example/widgetbook/pages/theme/typography_widgetbook.dart
index 33d3b184..f768f354 100644
--- a/example/widgetbook/pages/theme/typography_widgetbook.dart
+++ b/example/widgetbook/pages/theme/typography_widgetbook.dart
@@ -23,17 +23,20 @@ const Map<String, TextStyle> allTypes = {
   'Label tiny': ZetaTextStyles.labelTiny,
 };
 
-Widget typographyUseCase(BuildContext context) => Text(
-      context.knobs.string(label: 'Text', initialValue: 'The quick brown fox jumps over the lazy dog.'),
-      style: context.knobs
-          .list(
-            label: 'Sizes',
-            labelBuilder: (p0) => allTypes.entries.firstWhere((element) => element.value == p0).key,
-            options: allTypes.values.toList(),
-          )
-          .apply(
-            color: Zeta.of(context).colors.textDefault,
-            fontStyle: FontStyle.normal,
-            decoration: TextDecoration.none,
-          ),
+Widget typographyUseCase(BuildContext context) => Padding(
+      padding: const EdgeInsets.all(ZetaSpacing.m),
+      child: Text(
+        context.knobs.string(label: 'Text', initialValue: 'The quick brown fox jumps over the lazy dog.'),
+        style: context.knobs
+            .list(
+              label: 'Sizes',
+              labelBuilder: (p0) => allTypes.entries.firstWhere((element) => element.value == p0).key,
+              options: allTypes.values.toList(),
+            )
+            .apply(
+              color: Zeta.of(context).colors.textDefault,
+              fontStyle: FontStyle.normal,
+              decoration: TextDecoration.none,
+            ),
+      ),
     );
diff --git a/example/widgetbook/utils/utils.dart b/example/widgetbook/utils/utils.dart
new file mode 100644
index 00000000..4baec50c
--- /dev/null
+++ b/example/widgetbook/utils/utils.dart
@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+String iconLabelBuilder(IconData? value, [bool rounded = true]) {
+  return ((rounded
+              ? iconsRounded.entries.firstWhere((element) => element.value == value)
+              : iconsSharp.entries.firstWhere((element) => element.value == value))
+          .key
+          .split('.')
+          .last
+          .split('_')
+        ..removeLast())
+      .join(' ');
+}
+
+List<IconData> iconOptions(rounded) => rounded ? iconsRounded.values.toList() : iconsSharp.values.toList();
+
+String enumLabelBuilder(Enum value) => value.name.split('.').last.capitalize();
+
+IconData? iconKnob(BuildContext context,
+    {bool rounded = true, bool nullable = false, String name = 'Icon', final IconData? initial}) {
+  return nullable
+      ? context.knobs.listOrNull(
+          label: name,
+          options: iconOptions(rounded),
+          labelBuilder: (value) => iconLabelBuilder(value, rounded),
+          initialOption: initial,
+        )
+      : context.knobs.list(
+          label: name,
+          options: iconOptions(rounded),
+          labelBuilder: (value) => iconLabelBuilder(value, rounded),
+          initialOption: initial,
+        );
+}
+
+bool roundedKnob(BuildContext context) => context.knobs.boolean(label: 'Rounded');
diff --git a/lib/src/components/badges/indicator.dart b/lib/src/components/badges/indicator.dart
index baf8f4d0..7b5a91d6 100644
--- a/lib/src/components/badges/indicator.dart
+++ b/lib/src/components/badges/indicator.dart
@@ -57,7 +57,7 @@ class ZetaIndicator extends StatelessWidget {
   final bool inverse;
 
   /// Indicator icon, default: `ZetaIcons.star_round`.
-  final Icon? icon;
+  final IconData? icon;
 
   /// Value for the type `notification`.
   final int? value;
@@ -66,7 +66,7 @@ class ZetaIndicator extends StatelessWidget {
   ZetaIndicator copyWith({
     ZetaIndicatorType? type,
     ZetaWidgetSize? size,
-    Icon? icon,
+    IconData? icon,
     int? value,
     bool? inverse,
   }) {
@@ -113,9 +113,10 @@ class ZetaIndicator extends StatelessWidget {
       case ZetaIndicatorType.icon:
         final iconSize = _getIconSize(size);
         return Center(
-          child: IconTheme(
-            data: IconThemeData(color: foregroundColor, size: iconSize),
-            child: icon ?? const Icon(ZetaIcons.star_round),
+          child: Icon(
+            icon ?? ZetaIcons.star_round,
+            color: foregroundColor,
+            size: iconSize,
           ),
         );
       case ZetaIndicatorType.notification:
@@ -159,7 +160,7 @@ class ZetaIndicator extends StatelessWidget {
       ..add(DiagnosticsProperty<ZetaIndicatorType>('type', type))
       ..add(DiagnosticsProperty<ZetaWidgetSize>('size', size))
       ..add(DiagnosticsProperty<int?>('value', value))
-      ..add(DiagnosticsProperty<Icon?>('icon', icon))
+      ..add(DiagnosticsProperty<IconData?>('icon', icon))
       ..add(DiagnosticsProperty<bool>('inverseBorder', inverse));
   }
 }
diff --git a/lib/src/components/banners/in_page_banner.dart b/lib/src/components/banners/in_page_banner.dart
index 227703be..15d9e20b 100644
--- a/lib/src/components/banners/in_page_banner.dart
+++ b/lib/src/components/banners/in_page_banner.dart
@@ -62,7 +62,7 @@ class ZetaInPageBanner extends StatelessWidget {
             Padding(
               padding: const EdgeInsetsDirectional.only(top: ZetaSpacing.x3, start: ZetaSpacing.x2_5),
               child: Icon(
-                status.icon(rounded: rounded),
+                customIcon ?? status.icon(rounded: rounded),
                 size: ZetaSpacing.x5,
                 color: status == ZetaWidgetStatus.neutral ? theme.colors.textDefault : colors.icon,
               ),
diff --git a/lib/src/components/buttons/button_group.dart b/lib/src/components/buttons/button_group.dart
index d60c27be..52b8ea20 100644
--- a/lib/src/components/buttons/button_group.dart
+++ b/lib/src/components/buttons/button_group.dart
@@ -5,21 +5,26 @@ import '../../../zeta_flutter.dart';
 
 /// Zeta Button Group
 class ZetaButtonGroup extends StatelessWidget {
-  /// Constructs [ZetaButtonGroup] from a list of [GroupButton]s
-  const ZetaButtonGroup(
-      {super.key,
-      required this.buttons,
-      required this.rounded,
-      required this.isLarge,});
-
-  /// Determines size of [GroupButton]
+  /// Constructs [ZetaButtonGroup] from a list of [ZetaGroupButton]s
+  const ZetaButtonGroup({
+    super.key,
+    required this.buttons,
+    required this.rounded,
+    required this.isLarge,
+    this.isInverse = false,
+  });
+
+  /// Determines size of [ZetaGroupButton].
   final bool isLarge;
 
-  /// Determinses border radius of [GroupButton]
+  /// {@macro zeta-component-rounded}
   final bool rounded;
 
-  /// [GroupButton]s to be rendered in list
-  final List<GroupButton> buttons;
+  /// [ZetaGroupButton]s to be rendered in list.
+  final List<ZetaGroupButton> buttons;
+
+  /// If widget should be rendered in inverted colors.
+  final bool isInverse;
 
   @override
   Widget build(BuildContext context) {
@@ -29,13 +34,14 @@ class ZetaButtonGroup extends StatelessWidget {
     );
   }
 
-  /// Returns [GroupButton]s with there appropriate styling.
-  List<GroupButton> getButtons() {
+  /// Returns [ZetaGroupButton]s with there appropriate styling.
+  List<ZetaGroupButton> getButtons() {
     for (final element in buttons) {
       element
         .._isInitial = element._isFinal = false
         .._isLarge = isLarge
-        .._rounded = rounded;
+        .._rounded = rounded
+        .._isInverse = isInverse;
     }
 
     buttons.first._isInitial = true;
@@ -43,69 +49,81 @@ class ZetaButtonGroup extends StatelessWidget {
 
     return buttons;
   }
+
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties
-    ..add(DiagnosticsProperty<bool>('isLarge', isLarge))
-    ..add(DiagnosticsProperty<bool>('rounded', rounded));
+      ..add(DiagnosticsProperty<bool>('isLarge', isLarge))
+      ..add(DiagnosticsProperty<bool>('rounded', rounded))
+      ..add(DiagnosticsProperty<bool>('isInverse', isInverse));
   }
 }
 
+// TODO(UX-854): Create country variant.
+
 /// Group Button item
 // ignore: must_be_immutable
-class GroupButton extends StatefulWidget {
-  /// Constructs [GroupButton]
-  GroupButton({
+class ZetaGroupButton extends StatefulWidget {
+  /// Constructs [ZetaGroupButton]
+  ZetaGroupButton({
     super.key,
     this.label,
     this.icon,
     this.onPressed,
+    this.dropdown,
   });
 
   /// Constructs dropdown group button
-  GroupButton.dropdown({
+  ZetaGroupButton.dropdown({
     super.key,
     required this.onPressed,
+    required this.dropdown,
     this.icon,
     this.label,
   });
 
   ///Constructs group button with icon
-  GroupButton.icon({
+  ZetaGroupButton.icon({
     super.key,
     required this.icon,
+    this.dropdown,
     this.onPressed,
     this.label,
   });
 
-  /// Label for [GroupButton]
+  /// Label for [ZetaGroupButton].
   final String? label;
 
-  /// Optional icon for [GroupButton]
+  /// Optional icon for [ZetaGroupButton].
   final IconData? icon;
 
-  /// Function for when [GroupButton] is clicked.
+  /// Function for when [ZetaGroupButton] is clicked.
   final VoidCallback? onPressed;
 
-  ///If [GroupButton] is large
+  /// Content of dropdown.
+  final Widget? dropdown;
+
+  ///If [ZetaGroupButton] is large.
   bool _isLarge = false;
 
-  ///If [GroupButton] is rounded
+  ///If [ZetaGroupButton] is rounded.
   bool _rounded = false;
 
-  /// If [GroupButton] is the first button in its list.
+  /// If [ZetaGroupButton] is the first button in its list.
   bool _isInitial = false;
 
-  /// If [GroupButton] is the final button in its list.
+  /// If [ZetaGroupButton] is the final button in its list.
   bool _isFinal = false;
 
+  bool _isInverse = false;
+
   @override
-  State<GroupButton> createState() => _GroupButtonState();
+  State<ZetaGroupButton> createState() => _ZetaGroupButtonState();
 
-  /// Returns copy of [GroupButton] with fields.
-  GroupButton copyWith({bool? isFinal, bool? isInitial}) {
-    return GroupButton(
+  /// Returns copy of [ZetaGroupButton] with fields.
+  ZetaGroupButton copyWith({bool? isFinal, bool? isInitial}) {
+    return ZetaGroupButton(
       key: key,
       label: label,
       icon: icon,
@@ -123,35 +141,28 @@ class GroupButton extends StatefulWidget {
   }
 }
 
-class _GroupButtonState extends State<GroupButton> {
-  late bool selected;
+class _ZetaGroupButtonState extends State<ZetaGroupButton> {
   late MaterialStatesController controller;
 
   @override
   void initState() {
     super.initState();
-    selected = false;
     controller = MaterialStatesController();
-  }
-
-  void onPressed() {
-    if(widget.onPressed != null){
-      widget.onPressed?.call();
-    setState(() {
-      selected = !selected;
+    controller.addListener(() {
+      if (!controller.value.contains(MaterialState.disabled) && context.mounted && mounted) {
+        // TODO(UX-1005): setState causing exception when going from disabled to enabled.
+        setState(() {});
+      }
     });
-    }
   }
 
   @override
   Widget build(BuildContext context) {
     final colors = Zeta.of(context).colors;
 
-    final borderType =
-        widget._rounded ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp;
+    final borderType = widget._rounded ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp;
 
-    final BorderSide borderSide =
-        _getBorderSide(controller.value, colors, false);
+    final BorderSide borderSide = _getBorderSide(controller.value, colors, false);
 
     return Container(
       decoration: BoxDecoration(
@@ -159,14 +170,18 @@ class _GroupButtonState extends State<GroupButton> {
           top: borderSide,
           left: borderSide,
           bottom: borderSide,
-          right: (widget._isFinal) ? borderSide : BorderSide.none,
+          right: controller.value.contains(MaterialState.focused)
+              ? BorderSide(color: colors.blue.shade50, width: 2)
+              : (widget._isFinal)
+                  ? borderSide
+                  : BorderSide.none,
         ),
         borderRadius: _getRadius(borderType),
       ),
       padding: EdgeInsets.zero,
       child: FilledButton(
         statesController: controller,
-        onPressed: onPressed,
+        onPressed: widget.onPressed, // TODO(UX-1006): Dropdown
         style: getStyle(borderType, colors),
         child: SelectionContainer.disabled(
           child: Row(
@@ -174,8 +189,8 @@ class _GroupButtonState extends State<GroupButton> {
             children: [
               if (widget.icon != null) Icon(widget.icon),
               Text(widget.label!),
-              if (widget.onPressed != null)
-                const Icon(ZetaIcons.expand_more_round),
+              if (widget.dropdown != null) // TODO(UX-1006): Dropdown
+                Icon(widget._rounded ? ZetaIcons.expand_more_round : ZetaIcons.expand_more_sharp, size: 20),
             ],
           ).paddingAll(_padding),
         ),
@@ -190,13 +205,13 @@ class _GroupButtonState extends State<GroupButton> {
     ZetaColors colors,
     bool finalButton,
   ) {
-    if(selected) return BorderSide(color: colors.black);
+    if (states.contains(MaterialState.focused)) {
+      return BorderSide(color: colors.blue.shade50, width: ZetaSpacing.x0_5);
+    }
+    if (widget._isInverse) return BorderSide(color: colors.black);
     if (states.contains(MaterialState.disabled)) {
       return BorderSide(color: colors.cool.shade40);
     }
-    if (states.contains(MaterialState.focused)) {
-      return BorderSide(color: colors.blue, width: ZetaSpacing.x0_5);
-    }
     return BorderSide(
       color: finalButton ? colors.borderDefault : colors.borderSubtle,
     );
@@ -223,11 +238,10 @@ class _GroupButtonState extends State<GroupButton> {
       shape: MaterialStateProperty.all(
         RoundedRectangleBorder(
           borderRadius: _getRadius(borderType),
-
         ),
       ),
       backgroundColor: MaterialStateProperty.resolveWith<Color?>((states) {
-        if (selected) return colors.black;
+        if (widget._isInverse) return colors.cool.shade100;
 
         if (states.contains(MaterialState.disabled)) {
           return colors.surfaceDisabled;
@@ -238,13 +252,13 @@ class _GroupButtonState extends State<GroupButton> {
         if (states.contains(MaterialState.hovered)) {
           return colors.cool.shade20;
         }
-        return colors.white;
+        return colors.surfacePrimary;
       }),
       foregroundColor: MaterialStateProperty.resolveWith<Color?>((states) {
         if (states.contains(MaterialState.disabled)) {
           return colors.textDisabled;
         }
-        if (selected) return colors.black.onColor;
+        if (widget._isInverse) return colors.cool.shade100.onColor;
         return colors.textDefault;
       }),
       elevation: const MaterialStatePropertyAll(0),
@@ -255,10 +269,6 @@ class _GroupButtonState extends State<GroupButton> {
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties
-      ..add(DiagnosticsProperty<bool>('selected', selected))
-      ..add(
-        DiagnosticsProperty<MaterialStatesController>('controller', controller),
-      );
+    properties.add(DiagnosticsProperty<MaterialStatesController>('controller', controller));
   }
 }
diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart
index 26662d9b..8a3ed9fb 100644
--- a/lib/src/components/buttons/button_style.dart
+++ b/lib/src/components/buttons/button_style.dart
@@ -55,8 +55,7 @@ extension ButtonFunctions on ZetaButtonType {
   }
 
   /// Returns if button has border
-  bool get border =>
-      this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle;
+  bool get border => this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle;
 
   ///Returns if button is solid
   bool get solid => index < 4;
@@ -86,9 +85,8 @@ ButtonStyle buttonStyle(
   ZetaButtonType type,
   Color? backgroundColor,
 ) {
-  final ZetaColorSwatch color = backgroundColor != null
-      ? ZetaColorSwatch.fromColor(backgroundColor)
-      : type.color(colors);
+  final ZetaColorSwatch color =
+      backgroundColor != null ? ZetaColorSwatch.fromColor(backgroundColor) : type.color(colors);
 
   final bool isSolid = type.solid || backgroundColor != null;
 
@@ -131,8 +129,7 @@ ButtonStyle buttonStyle(
         }
       },
     ),
-    overlayColor:
-        MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+    overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
       return null;
     }),
     side: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
@@ -145,9 +142,7 @@ ButtonStyle buttonStyle(
       }
       if (type.border) {
         return BorderSide(
-          color: type == ZetaButtonType.outline
-              ? colors.primary.border
-              : colors.borderDefault,
+          color: type == ZetaButtonType.outline ? colors.primary.border : colors.borderDefault,
         );
       }
 
diff --git a/lib/src/components/dial_pad/dial_pad.dart b/lib/src/components/dial_pad/dial_pad.dart
index 61f8a609..0d098932 100644
--- a/lib/src/components/dial_pad/dial_pad.dart
+++ b/lib/src/components/dial_pad/dial_pad.dart
@@ -3,32 +3,14 @@ import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 
 import '../../../zeta_flutter.dart';
-import '../../utils/utils.dart';
-
-const Map<String, String> _defaultButtonValues = {
-  '1': '',
-  '2': 'ABC',
-  '3': 'DEF',
-  '4': 'GHI',
-  '5': 'JKL',
-  '6': 'MNO',
-  '7': 'PQRS',
-  '8': 'TUV',
-  '9': 'WXYZ',
-  '*': '',
-  '0': '+',
-  '#': '',
-};
-
-const int _defaultButtonsPerRow = 3;
 
 /// Dial pad gives the user the ability to dial a number and start a call. It also has a quick dial security action and a delete entry action.
 class ZetaDialPad extends StatefulWidget {
   /// Constructs a [ZetaDialPad].
   const ZetaDialPad({
     super.key,
-    this.buttonsPerRow = _defaultButtonsPerRow,
-    this.buttonValues = _defaultButtonValues,
+    this.buttonsPerRow = ZetaDialPad.defaultButtonsPerRow,
+    this.buttonValues = ZetaDialPad.defaultButtonValues,
     this.onNumber,
     this.onText,
   });
@@ -39,16 +21,39 @@ class ZetaDialPad extends StatefulWidget {
   /// Callback when number is tapped. Returns the small value from the button after a small delay, i,e, a,b,c etc.
   final ValueChanged<String>? onText;
 
-  /// Number of buttons to show on each row. Defaults to 3.
+  /// Number of buttons to show on each row. Defaults to 3 [defaultButtonsPerRow].
   final int? buttonsPerRow;
 
   /// Map of values to show on the buttons.
   ///
-  /// Key is the large character, i.e. 1, 2, 3.
+  /// * Key is large value, typically a single digit or special character.
+  /// * Value is the smaller value, typically 3/4 alphabetical characters.
   ///
-  /// Value is the smaller character(s): i.e. 'ABC'
+  /// Defaults ot [defaultButtonValues].
   final Map<String, String>? buttonValues;
 
+  /// Default button values (english) for [ZetaDialPad].
+  ///
+  /// * Key is large value, typically a single digit or special character.
+  /// * Value is the smaller value, typically 3/4 alphabetical characters.
+  static const Map<String, String> defaultButtonValues = {
+    '1': '',
+    '2': 'ABC',
+    '3': 'DEF',
+    '4': 'GHI',
+    '5': 'JKL',
+    '6': 'MNO',
+    '7': 'PQRS',
+    '8': 'TUV',
+    '9': 'WXYZ',
+    '*': '',
+    '0': '+',
+    '#': '',
+  };
+
+  /// Default number of buttons per row for [ZetaDialPad].
+  static const int defaultButtonsPerRow = 3;
+
   @override
   State<ZetaDialPad> createState() => _ZetaDialPadState();
 
@@ -64,9 +69,9 @@ class ZetaDialPad extends StatefulWidget {
 }
 
 class _ZetaDialPadState extends State<ZetaDialPad> {
-  int get _buttonsPerRow => widget.buttonsPerRow ?? _defaultButtonsPerRow;
+  int get _buttonsPerRow => widget.buttonsPerRow ?? ZetaDialPad.defaultButtonsPerRow;
 
-  Map<String, String> get _buttonValues => widget.buttonValues ?? _defaultButtonValues;
+  Map<String, String> get _buttonValues => widget.buttonValues ?? ZetaDialPad.defaultButtonValues;
 
   String? _lastTapped;
   int _tapCounter = 0;
@@ -114,6 +119,7 @@ class _ZetaDialPadState extends State<ZetaDialPad> {
           shrinkWrap: true,
           semanticChildCount: _buttonValues.length,
           mainAxisSpacing: ZetaSpacing.x6,
+          physics: const NeverScrollableScrollPhysics(),
           crossAxisSpacing: ZetaSpacing.x9,
           children: _buttonValues.entries
               .map(
diff --git a/lib/src/components/progress/progress.dart b/lib/src/components/progress/progress.dart
index 732da64c..3ad63440 100644
--- a/lib/src/components/progress/progress.dart
+++ b/lib/src/components/progress/progress.dart
@@ -34,7 +34,9 @@ abstract class ZetaProgressState<T extends ZetaProgress> extends State<T> with T
     super.initState();
     progress = widget.progress;
     controller = AnimationController(
-        vsync: this, duration: const Duration(milliseconds: 200),);
+      vsync: this,
+      duration: const Duration(milliseconds: 200),
+    );
     animation = Tween<double>(
       begin: widget.progress, // Start value
       end: widget.progress, // End value (initially same as start value)
diff --git a/lib/src/components/progress/progress_bar.dart b/lib/src/components/progress/progress_bar.dart
index 939e9fe2..37a2ce86 100644
--- a/lib/src/components/progress/progress_bar.dart
+++ b/lib/src/components/progress/progress_bar.dart
@@ -98,8 +98,7 @@ class _ZetaProgressBarState extends ZetaProgressState<ZetaProgressBar> {
       children: [
         Text(
           widget.label ??
-              (widget.label == null &&
-                      widget.type != ZetaProgressBarType.indeterminate
+              (widget.label == null && widget.type != ZetaProgressBarType.indeterminate
                   ? '${(animation.value * 100).toInt()}%'
                   : ''),
           style: ZetaTextStyles.titleMedium,
@@ -115,17 +114,13 @@ class _ZetaProgressBarState extends ZetaProgressState<ZetaProgressBar> {
                 height: _weight,
                 child: LinearProgressIndicator(
                   borderRadius: _border,
-                  value: widget.type == ZetaProgressBarType.indeterminate
-                      ? null
-                      : animation.value,
-                  backgroundColor: widget.type == ZetaProgressBarType.buffering
-                      ? colors.surfaceDisabled
-                      : Colors.transparent,
+                  value: widget.type == ZetaProgressBarType.indeterminate ? null : animation.value,
+                  backgroundColor:
+                      widget.type == ZetaProgressBarType.buffering ? colors.surfaceDisabled : Colors.transparent,
                 ),
               ),
             ),
-            if (widget.type == ZetaProgressBarType.buffering)
-              bufferingWidget(colors),
+            if (widget.type == ZetaProgressBarType.buffering) bufferingWidget(colors),
           ],
         ),
       ],
@@ -133,8 +128,7 @@ class _ZetaProgressBarState extends ZetaProgressState<ZetaProgressBar> {
   }
 
   /// Returns border based on widgets border type.
-  BorderRadius get _border =>
-      widget.rounded ? ZetaRadius.rounded : ZetaRadius.none;
+  BorderRadius get _border => widget.rounded ? ZetaRadius.rounded : ZetaRadius.none;
 
   /// Returns thickness of progress bar based on its weight.
   double get _weight => widget.isThin ? ZetaSpacing.x2 : ZetaSpacing.x4;
@@ -148,7 +142,9 @@ class _ZetaProgressBarState extends ZetaProgressState<ZetaProgressBar> {
           width: _weight,
           height: _weight,
           decoration: BoxDecoration(
-              color: colors.surfaceDisabled, borderRadius: ZetaRadius.rounded,),
+            color: colors.surfaceDisabled,
+            borderRadius: ZetaRadius.rounded,
+          ),
         ),
       ],
     );
diff --git a/lib/src/components/progress/progress_circle.dart b/lib/src/components/progress/progress_circle.dart
index 0156ffcc..90f48c5b 100644
--- a/lib/src/components/progress/progress_circle.dart
+++ b/lib/src/components/progress/progress_circle.dart
@@ -36,7 +36,7 @@ class ZetaProgressCircle extends ZetaProgress {
   ///Size of [ZetaProgressCircle]
   final ZetaCircleSizes size;
 
- ///{@macro zeta-component-rounded}
+  ///{@macro zeta-component-rounded}
   final bool rounded;
 
   @override
@@ -102,7 +102,7 @@ class ZetaProgressCircleState extends ZetaProgressState<ZetaProgressCircle> {
 ///Class definition for [CirclePainter]
 class CirclePainter extends CustomPainter {
   ///Constructor for [CirclePainter]
-  CirclePainter({this.progress = 0, this.rounded = true,required this.colors});
+  CirclePainter({this.progress = 0, this.rounded = true, required this.colors});
 
   ///Percentage of progress in decimal value, defaults to 0
   final double progress;
@@ -122,7 +122,6 @@ class CirclePainter extends CustomPainter {
     if (rounded) _paint.strokeCap = StrokeCap.round;
     _paint.color = colors.primary;
 
-
     const double fullCircle = 2 * math.pi;
 
     canvas.drawArc(
diff --git a/lib/src/utils/utils.dart b/lib/src/utils/utils.dart
index 7171d6a3..99ae2153 100644
--- a/lib/src/utils/utils.dart
+++ b/lib/src/utils/utils.dart
@@ -1,5 +1,7 @@
 import 'dart:async';
 
+export './extensions.dart';
+
 const Duration _debounceDuration = Duration(milliseconds: 500);
 
 /// Debounce utility
diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart
index 7600bc88..9c887252 100644
--- a/lib/zeta_flutter.dart
+++ b/lib/zeta_flutter.dart
@@ -37,4 +37,5 @@ export 'src/theme/tokens.dart';
 export 'src/theme/typography.dart';
 export 'src/utils/enums.dart';
 export 'src/utils/extensions.dart';
+export 'src/utils/utils.dart';
 export 'src/zeta.dart';