diff --git a/coverage/lcov.info b/coverage/lcov.info
index 0eee5239..e43ab1b1 100644
--- a/coverage/lcov.info
+++ b/coverage/lcov.info
@@ -6354,20 +6354,23 @@ DA:360,3
 DA:361,3
 DA:362,3
 DA:367,16
-DA:375,0
-DA:377,0
-DA:379,0
-DA:381,0
+DA:376,0
+DA:378,0
+DA:380,0
 DA:382,0
-DA:384,0
+DA:383,0
 DA:385,0
-DA:387,0
+DA:386,0
 DA:388,0
 DA:389,0
 DA:390,0
-DA:394,16
-DA:398,16
+DA:391,0
+DA:395,16
 DA:399,16
-LF:134
-LH:118
+DA:400,16
+DA:402,16
+DA:405,0
+DA:406,16
+LF:137
+LH:120
 end_of_record
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
index ecbc1201..d807ba58 100644
--- a/example/widgetbook/main.dart
+++ b/example/widgetbook/main.dart
@@ -3,7 +3,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:widgetbook/widgetbook.dart';
-import 'package:zeta_flutter/zeta_flutter.dart';
 
 import 'pages/assets/icon_widgetbook.dart';
 import 'pages/components/accordion_widgetbook.dart';
@@ -55,6 +54,7 @@ import 'pages/theme/spacing_widgetbook.dart';
 import 'pages/theme/typography_widgetbook.dart';
 import 'utils/zebra.dart';
 import 'package:http/http.dart' as http;
+import 'utils/zeta_addon.dart';
 
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -241,55 +241,7 @@ class _HotReloadState extends State<HotReload> {
             Zebra.ec50,
           ],
         ),
-        ThemeAddon(
-          themes: [
-            WidgetbookTheme(name: 'Light Mode', data: _Theme(isDark: false, isAAA: false)),
-            WidgetbookTheme(name: 'Dark Mode', data: _Theme(isDark: true, isAAA: false)),
-            WidgetbookTheme(name: 'Light Mode AAA', data: _Theme(isDark: false, isAAA: true)),
-            WidgetbookTheme(name: 'Dark Mode AAA', data: _Theme(isDark: true, isAAA: true)),
-          ],
-          themeBuilder: (context, theme, child) {
-            _Theme _theme = theme;
-            return ZetaProvider(
-              initialContrast: _theme.isAAA ? ZetaContrast.aaa : ZetaContrast.aa,
-              initialThemeMode: _theme.isDark ? ThemeMode.dark : ThemeMode.light,
-              builder: (context, theme, themeMode) {
-                return Builder(
-                  builder: (context) {
-                    final dark = theme.colorsDark.toScheme();
-                    final light = theme.colorsLight.toScheme();
-
-                    return MaterialApp(
-                      debugShowCheckedModeBanner: false,
-                      themeMode: themeMode,
-                      theme: ThemeData(
-                        useMaterial3: true,
-                        scaffoldBackgroundColor: light.surfaceTertiary,
-                        colorScheme: light,
-                        textTheme: zetaTextTheme,
-                        brightness: Brightness.light,
-                      ),
-                      darkTheme: ThemeData(
-                        useMaterial3: true,
-                        scaffoldBackgroundColor: dark.surfaceTertiary,
-                        colorScheme: dark,
-                        textTheme: zetaTextTheme,
-                        brightness: Brightness.dark,
-                      ),
-                      builder: (context, child) {
-                        return ColoredBox(
-                          color: Zeta.of(context).colors.surfacePrimary,
-                          child: child,
-                        );
-                      },
-                      home: child,
-                    );
-                  },
-                );
-              },
-            );
-          },
-        ),
+        ZetaAddon(),
         InspectorAddon(enabled: false),
         ZoomAddon(initialZoom: 1.0),
         TextScaleAddon(scales: [1.0, 1.2, 1.4, 1.6, 1.8, 2.0], initialScale: 1),
@@ -297,10 +249,3 @@ class _HotReloadState extends State<HotReload> {
     );
   }
 }
-
-class _Theme {
-  final bool isDark;
-  final bool isAAA;
-
-  _Theme({required this.isDark, required this.isAAA});
-}
diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart
index 8f08649d..e1ccddb4 100644
--- a/example/widgetbook/pages/assets/icon_widgetbook.dart
+++ b/example/widgetbook/pages/assets/icon_widgetbook.dart
@@ -1,16 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 
 Widget iconsUseCase(BuildContext context) {
-  bool rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
-
-  return WidgetbookTestWidget(
+  return WidgetbookScaffold(
     removeBody: true,
-    widget: SingleChildScrollView(
+    builder: (context, _) => SingleChildScrollView(
       key: PageStorageKey(0),
       child: Center(
         child: Column(
@@ -24,8 +21,8 @@ Widget iconsUseCase(BuildContext context) {
                 (e) {
                   final nameArr = (e.key.split('_')).join(' ').capitalize();
                   return Container(
-                    width: 120,
-                    height: 120,
+                    width: 140,
+                    height: 140,
                     child: InkWell(
                       borderRadius: ZetaRadius.rounded,
                       hoverColor: Zeta.of(context).colors.surfaceHover,
@@ -43,7 +40,7 @@ Widget iconsUseCase(BuildContext context) {
                           ZetaIcon(
                             IconData(
                               e.value.codePoint,
-                              fontFamily: rounded ? ZetaIcons.familyRound : ZetaIcons.familySharp,
+                              fontFamily: ZetaIcons.family,
                               fontPackage: ZetaIcons.package,
                             ),
                             size: ZetaSpacing.xl_6,
@@ -51,6 +48,7 @@ Widget iconsUseCase(BuildContext context) {
                           Text(
                             nameArr,
                             textAlign: TextAlign.center,
+                            maxLines: 2,
                           )
                         ],
                       ),
diff --git a/example/widgetbook/pages/components/accordion_widgetbook.dart b/example/widgetbook/pages/components/accordion_widgetbook.dart
index 56b2c15c..86603ac9 100644
--- a/example/widgetbook/pages/components/accordion_widgetbook.dart
+++ b/example/widgetbook/pages/components/accordion_widgetbook.dart
@@ -2,12 +2,10 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
-import '../../utils/utils.dart';
+import '../../utils/scaffold.dart';
 
-Widget accordionUseCase(BuildContext context) => WidgetbookTestWidget(
-      screenSize: Size(1280, 720),
-      widget: Padding(
+Widget accordionUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => Padding(
         padding: const EdgeInsets.all(ZetaSpacing.xl_1),
         child: ZetaAccordion(
           child: context.knobs.boolean(label: 'Disabled')
@@ -22,7 +20,6 @@ Widget accordionUseCase(BuildContext context) => WidgetbookTestWidget(
                 ),
           title: context.knobs.string(label: 'Accordion Title', initialValue: 'Title'),
           contained: context.knobs.boolean(label: 'Contained', initialValue: false),
-          rounded: roundedKnob(context),
         ),
       ),
     );
diff --git a/example/widgetbook/pages/components/avatar_widgetbook.dart b/example/widgetbook/pages/components/avatar_widgetbook.dart
index 4ed8fdde..13d1a6cd 100644
--- a/example/widgetbook/pages/components/avatar_widgetbook.dart
+++ b/example/widgetbook/pages/components/avatar_widgetbook.dart
@@ -2,14 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 
 Widget avatarUseCase(BuildContext context) {
   final Widget image = Image.asset('assets/Omer.jpg', fit: BoxFit.cover);
   final colors = Zeta.of(context).colors;
 
-  return WidgetbookTestWidget(
-    widget: ZetaAvatar(
+  return WidgetbookScaffold(
+    builder: (context, _) => ZetaAvatar(
       image: context.knobs.boolean(label: 'Image') ? image : null,
       size: context.knobs.list(
         label: 'Size',
diff --git a/example/widgetbook/pages/components/badges_widgetbook.dart b/example/widgetbook/pages/components/badges_widgetbook.dart
index f0848e77..2edb492c 100644
--- a/example/widgetbook/pages/components/badges_widgetbook.dart
+++ b/example/widgetbook/pages/components/badges_widgetbook.dart
@@ -2,24 +2,21 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget statusLabelUseCase(BuildContext context) {
-  final bool rounded = roundedKnob(context);
-
-  return WidgetbookTestWidget(
-    widget: Padding(
+  return WidgetbookScaffold(
+    builder: (context, _) => Padding(
       padding: const EdgeInsets.all(ZetaSpacing.xl_2),
       child: 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),
+        customIcon: iconKnob(context),
       ),
     ),
   );
@@ -27,8 +24,8 @@ Widget statusLabelUseCase(BuildContext context) {
 
 Widget priorityPillUseCase(BuildContext context) {
   final colors = Zeta.of(context).colors;
-  return WidgetbookTestWidget(
-    widget: Padding(
+  return WidgetbookScaffold(
+    builder: (context, _) => Padding(
       padding: const EdgeInsets.all(ZetaSpacing.xl_2),
       child: ZetaPriorityPill(
         index: context.knobs.string(label: 'Index', initialValue: 'U'),
@@ -43,7 +40,6 @@ Widget priorityPillUseCase(BuildContext context) {
           options: ZetaPriorityPillType.values,
           labelBuilder: (value) => value.name.capitalize(),
         ),
-        rounded: context.knobs.boolean(label: 'Rounded', initialValue: true),
         isBadge: context.knobs.boolean(label: 'Badge'),
         customColor: context.knobs.listOrNull(
           label: 'Custom color',
@@ -57,12 +53,11 @@ Widget priorityPillUseCase(BuildContext context) {
   );
 }
 
-Widget labelUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: Padding(
+Widget labelUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => Padding(
         padding: const EdgeInsets.all(ZetaSpacing.xl_2),
         child: ZetaLabel(
           label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-          rounded: roundedKnob(context),
           status: context.knobs.list(
             label: 'Status',
             options: ZetaWidgetStatus.values,
@@ -73,10 +68,8 @@ Widget labelUseCase(BuildContext context) => WidgetbookTestWidget(
     );
 
 Widget indicatorsUseCase(BuildContext context) {
-  final bool rounded = roundedKnob(context);
-
-  return WidgetbookTestWidget(
-    widget: Padding(
+  return WidgetbookScaffold(
+    builder: (context, _) => Padding(
       padding: const EdgeInsets.all(ZetaSpacing.xl_2),
       child: ZetaIndicator(
         type: context.knobs.list(
@@ -84,7 +77,7 @@ Widget indicatorsUseCase(BuildContext context) {
           options: ZetaIndicatorType.values,
           labelBuilder: enumLabelBuilder,
         ),
-        icon: iconKnob(context, rounded: rounded),
+        icon: iconKnob(context),
         inverse: context.knobs.boolean(label: 'Inverse Border'),
         size: context.knobs.list(
           label: 'Size',
@@ -98,15 +91,14 @@ Widget indicatorsUseCase(BuildContext context) {
   );
 }
 
-Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: Padding(
+Widget tagsUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => Padding(
         padding: const EdgeInsets.all(ZetaSpacing.xl_2),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             ZetaTag(
               label: context.knobs.string(label: 'Label', initialValue: 'Tag'),
-              rounded: roundedKnob(context),
               direction: context.knobs.list(
                 label: 'Direction',
                 options: ZetaTagDirection.values,
diff --git a/example/widgetbook/pages/components/banner_widgetbook.dart b/example/widgetbook/pages/components/banner_widgetbook.dart
index d9ff3fd1..12fd1333 100644
--- a/example/widgetbook/pages/components/banner_widgetbook.dart
+++ b/example/widgetbook/pages/components/banner_widgetbook.dart
@@ -2,12 +2,10 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget bannerUseCase(BuildContext context) {
-  final rounded = roundedKnob(context);
-
   final banner = ZetaBanner(
     context: context,
     title: context.knobs.string(label: 'Title', initialValue: 'Banner Title'),
@@ -16,20 +14,19 @@ Widget bannerUseCase(BuildContext context) {
       options: ZetaBannerStatus.values,
       labelBuilder: enumLabelBuilder,
     ),
-    leadingIcon: iconKnob(context, rounded: rounded, nullable: true),
+    leadingIcon: iconKnob(context, nullable: true),
     titleStart: context.knobs.boolean(label: 'Center title'),
     trailing: ZetaIcon(iconKnob(
       context,
-      rounded: rounded,
       nullable: true,
       name: 'trailing',
       initial: ZetaIcons.chevron_right,
     )),
   );
 
-  return WidgetbookTestWidget(
+  return WidgetbookScaffold(
     removeBody: true,
-    widget: Column(
+    builder: (context, _) => Column(
       children: [
         banner,
         const SizedBox(height: ZetaSpacing.xl_9),
diff --git a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
index fc80b36a..ddb7f1bb 100644
--- a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
+++ b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
@@ -2,14 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget bottomSheetContentUseCase(BuildContext context) {
   final sheet = _bottomSheet(context);
 
-  return WidgetbookTestWidget(
-    widget: Padding(
+  return WidgetbookScaffold(
+    builder: (context, _) => Padding(
       padding: const EdgeInsets.all(ZetaSpacing.xl_1),
       child: Column(
         children: [
@@ -26,9 +26,8 @@ Widget bottomSheetContentUseCase(BuildContext context) {
 }
 
 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);
+  final leadingIcon = iconKnob(context, nullable: true, initial: null);
+  final trailingIcon = iconKnob(context, nullable: true, initial: ZetaIcons.chevron_right);
 
   return ZetaBottomSheet(
     centerTitle: context.knobs.boolean(label: 'Center title', initialValue: true),
diff --git a/example/widgetbook/pages/components/breadcrumbs_widgetbook.dart b/example/widgetbook/pages/components/breadcrumbs_widgetbook.dart
index e36c7f8b..63c99216 100644
--- a/example/widgetbook/pages/components/breadcrumbs_widgetbook.dart
+++ b/example/widgetbook/pages/components/breadcrumbs_widgetbook.dart
@@ -1,14 +1,14 @@
 import 'package:flutter/material.dart';
-import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
-Widget breadCrumbsUseCase(BuildContext context) => WidgetbookTestWidget(
-        widget: Center(
-      child: BreadCrumbExample(context),
-    ));
+Widget breadCrumbsUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => Center(
+        child: BreadCrumbExample(context),
+      ),
+    );
 
 class BreadCrumbExample extends StatefulWidget {
   const BreadCrumbExample(this.c);
@@ -37,7 +37,6 @@ class _BreadCrumbExampleState extends State<BreadCrumbExample> {
           child: Column(children: [
             ZetaBreadCrumbs(
               children: _children,
-              rounded: widget.c.knobs.boolean(label: 'Rounded'),
               activeIcon: iconKnob(context),
             ),
             SizedBox(
diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart
index 588514da..dd008263 100644
--- a/example/widgetbook/pages/components/button_widgetbook.dart
+++ b/example/widgetbook/pages/components/button_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget buttonUseCase(BuildContext context) {
@@ -11,8 +11,8 @@ Widget buttonUseCase(BuildContext context) {
     labelBuilder: enumLabelBuilder,
     options: ZetaWidgetBorder.values,
   );
-  return WidgetbookTestWidget(
-    widget: ZetaButton(
+  return WidgetbookScaffold(
+    builder: (context, _) => ZetaButton(
       label: context.knobs.string(label: 'Text', initialValue: 'Button'),
       onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {},
       borderType: borderType,
@@ -26,10 +26,8 @@ Widget buttonUseCase(BuildContext context) {
         options: ZetaButtonType.values,
         labelBuilder: enumLabelBuilder,
       ),
-      leadingIcon:
-          iconKnob(context, rounded: borderType != ZetaWidgetBorder.sharp, nullable: true, name: "Leading Icon"),
-      trailingIcon:
-          iconKnob(context, rounded: borderType != ZetaWidgetBorder.sharp, nullable: true, name: "Trailing Icon"),
+      leadingIcon: iconKnob(context, nullable: true, name: "Leading Icon"),
+      trailingIcon: iconKnob(context, nullable: true, name: "Trailing Icon"),
     ),
   );
 }
@@ -40,9 +38,9 @@ Widget iconButtonUseCase(BuildContext context) {
     options: ZetaWidgetBorder.values,
     labelBuilder: enumLabelBuilder,
   );
-  return WidgetbookTestWidget(
-    widget: ZetaIconButton(
-      icon: iconKnob(context, rounded: borderType != ZetaWidgetBorder.sharp)!,
+  return WidgetbookScaffold(
+    builder: (context, _) => ZetaIconButton(
+      icon: iconKnob(context)!,
       onPressed: disabledKnob(context) ? null : () {},
       borderType: borderType,
       size: context.knobs.list(
@@ -60,25 +58,22 @@ Widget iconButtonUseCase(BuildContext context) {
 }
 
 Widget buttonGroupUseCase(BuildContext context) {
-  final bool rounded = roundedKnob(context);
-
   final onPressed = disabledKnob(context) ? null : () {};
 
-  return WidgetbookTestWidget(
-    widget: ZetaButtonGroup(
+  return WidgetbookScaffold(
+    builder: (context, _) => 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),
+          icon: iconKnob(context, name: 'Button 1 Icon', nullable: true, initial: null),
         ),
         ZetaGroupButton.dropdown(
           label: context.knobs.string(label: 'Button 2 Title'),
           onChange: disabledKnob(context) ? null : (_) {},
-          icon: iconKnob(context, name: 'Button 2 Icon', nullable: true, initial: null, rounded: rounded),
+          icon: iconKnob(context, name: 'Button 2 Icon', nullable: true, initial: null),
           items: [
             ZetaDropdownItem(
               value: 'Item 1',
@@ -93,16 +88,15 @@ Widget buttonGroupUseCase(BuildContext context) {
         ZetaGroupButton(
           label: context.knobs.string(label: 'Button 3 Title'),
           onPressed: onPressed,
-          icon: iconKnob(context, name: 'Button 3 Icon', nullable: true, initial: null, rounded: rounded),
+          icon: iconKnob(context, name: 'Button 3 Icon', nullable: true, initial: null),
         )
       ],
     ),
   );
 }
 
-Widget floatingActionButtonUseCase(BuildContext context) => WidgetbookTestWidget(
-      screenSize: Size(1280, 720),
-      widget: Padding(padding: EdgeInsets.all(ZetaSpacing.xl_1), child: FabWidget(context)),
+Widget floatingActionButtonUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => Padding(padding: EdgeInsets.all(ZetaSpacing.xl_1), child: FabWidget(context)),
     );
 
 class FabWidget extends StatefulWidget {
@@ -149,7 +143,7 @@ class _FabWidgetState extends State<FabWidget> {
           scrollController: _scrollController,
           label: widget.c.knobs.string(label: 'Label', initialValue: 'Floating Action Button'),
           onPressed: widget.c.knobs.boolean(label: 'Disabled') ? null : () {},
-          icon: iconKnob(context, rounded: shape != ZetaWidgetBorder.sharp)!,
+          icon: iconKnob(context)!,
           shape: shape,
           size: widget.c.knobs.list(
             label: 'Size',
diff --git a/example/widgetbook/pages/components/chat_item_widgetbook.dart b/example/widgetbook/pages/components/chat_item_widgetbook.dart
index 42b34c07..64a84946 100644
--- a/example/widgetbook/pages/components/chat_item_widgetbook.dart
+++ b/example/widgetbook/pages/components/chat_item_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 
 Widget chatItemWidgetBook(BuildContext context) {
   final title = context.knobs.string(label: 'Title', initialValue: 'Chat name ID');
@@ -20,8 +20,8 @@ Widget chatItemWidgetBook(BuildContext context) {
   final enabledOnCall = context.knobs.boolean(label: 'Call', initialValue: true);
   final enabledOnPtt = context.knobs.boolean(label: 'Ptt', initialValue: true);
 
-  return WidgetbookTestWidget(
-    widget: ZetaChatItem(
+  return WidgetbookScaffold(
+    builder: (context, _) => ZetaChatItem(
       time: DateTime.now(),
       enabledWarningIcon: enabledWarningIcon,
       enabledNotificationIcon: enabledNotificationIcon,
diff --git a/example/widgetbook/pages/components/checkbox_widgetbook.dart b/example/widgetbook/pages/components/checkbox_widgetbook.dart
index 1b61d51e..384c53b2 100644
--- a/example/widgetbook/pages/components/checkbox_widgetbook.dart
+++ b/example/widgetbook/pages/components/checkbox_widgetbook.dart
@@ -2,21 +2,20 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget checkboxUseCase(BuildContext context) {
   bool b = true;
 
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (context, setState) {
         ValueChanged<bool>? onChanged = !disabledKnob(context) ? (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 e7e0c008..d8e7848a 100644
--- a/example/widgetbook/pages/components/chip_widgetbook.dart
+++ b/example/widgetbook/pages/components/chip_widgetbook.dart
@@ -2,15 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget inputChipUseCase(BuildContext context) {
-  final bool rounded = roundedKnob(context);
   final trailing = iconKnob(context);
 
-  return WidgetbookTestWidget(
-    widget: ZetaInputChip(
+  return WidgetbookScaffold(
+    builder: (context, _) => ZetaInputChip(
       label: context.knobs.string(label: 'Label', initialValue: 'Label'),
       leading: context.knobs.boolean(label: 'Avatar', initialValue: true)
           ? ZetaAvatar(
@@ -20,27 +19,23 @@ Widget inputChipUseCase(BuildContext context) {
                   : null,
             )
           : null,
-      rounded: rounded,
       trailing: trailing != null ? ZetaIcon(trailing) : null,
     ),
   );
 }
 
-Widget filterChipUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: ZetaFilterChip(
+Widget filterChipUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => ZetaFilterChip(
         label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-        rounded: roundedKnob(context),
         selected: context.knobs.boolean(label: 'Selected', initialValue: true),
       ),
     );
 
 Widget assistChipUseCase(BuildContext context) {
-  final rounded = roundedKnob(context);
-  return WidgetbookTestWidget(
-    widget: ZetaAssistChip(
+  return WidgetbookScaffold(
+    builder: (context, _) => ZetaAssistChip(
       label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-      rounded: rounded,
-      leading: ZetaIcon(iconKnob(context, rounded: rounded)),
+      leading: ZetaIcon(iconKnob(context)),
     ),
   );
 }
diff --git a/example/widgetbook/pages/components/contact_item_widgetbook.dart b/example/widgetbook/pages/components/contact_item_widgetbook.dart
index d41fa8c7..11bae513 100644
--- a/example/widgetbook/pages/components/contact_item_widgetbook.dart
+++ b/example/widgetbook/pages/components/contact_item_widgetbook.dart
@@ -2,15 +2,15 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 
 Widget contactItemUseCase(BuildContext context) {
   final title = context.knobs.string(label: 'Title', initialValue: "Contact / Group Name");
   final subtitle = context.knobs.string(label: 'Subtitle', initialValue: "Store Associate - Bakery Dept.");
   final enabledDivider = context.knobs.boolean(label: 'Enabled Divider', initialValue: true);
 
-  return WidgetbookTestWidget(
-    widget: ZetaContactItem(
+  return WidgetbookScaffold(
+    builder: (context, _) => ZetaContactItem(
       onTap: () {},
       leading: ZetaAvatar(size: ZetaAvatarSize.s),
       title: Text(title),
diff --git a/example/widgetbook/pages/components/date_input_widgetbook.dart b/example/widgetbook/pages/components/date_input_widgetbook.dart
index 6beef5ec..f36ba60e 100644
--- a/example/widgetbook/pages/components/date_input_widgetbook.dart
+++ b/example/widgetbook/pages/components/date_input_widgetbook.dart
@@ -2,20 +2,19 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget dateInputUseCase(BuildContext context) {
   String? _errorText;
 
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (context, setState) {
         final errorText = context.knobs.string(
           label: 'Error message for invalid date',
           initialValue: 'Invalid date',
         );
-        final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
         final disabled = disabledKnob(context);
         final size = context.knobs.list<ZetaWidgetSize>(
           label: 'Size',
@@ -32,7 +31,6 @@ Widget dateInputUseCase(BuildContext context) {
           padding: const EdgeInsets.all(ZetaSpacing.xl_1),
           child: ZetaDateInput(
             size: size,
-            rounded: rounded,
             disabled: disabled,
             label: 'Birthdate',
             hintText: 'Enter birthdate',
diff --git a/example/widgetbook/pages/components/dial_pad_widgetbook.dart b/example/widgetbook/pages/components/dial_pad_widgetbook.dart
index 38c1e654..b3180dbb 100644
--- a/example/widgetbook/pages/components/dial_pad_widgetbook.dart
+++ b/example/widgetbook/pages/components/dial_pad_widgetbook.dart
@@ -2,10 +2,10 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 
-Widget dialPadUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: SingleChildScrollView(
+Widget dialPadUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => SingleChildScrollView(
         scrollDirection: Axis.horizontal,
         child: ZetaDialPad(
           buttonValues: context.knobs.boolean(label: 'Change to emoji')
diff --git a/example/widgetbook/pages/components/dialog_widgetbook.dart b/example/widgetbook/pages/components/dialog_widgetbook.dart
index f761861e..293188c0 100644
--- a/example/widgetbook/pages/components/dialog_widgetbook.dart
+++ b/example/widgetbook/pages/components/dialog_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget dialogUseCase(BuildContext context) {
@@ -16,11 +16,9 @@ Widget dialogUseCase(BuildContext context) {
     initialValue:
         'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.',
   );
-  final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
   final iconData = iconKnob(
     context,
     name: "Icon",
-    rounded: rounded,
     initial: Icons.warning,
   );
   final barrierDismissible = context.knobs.boolean(label: 'Barrier dismissible', initialValue: true);
@@ -29,8 +27,8 @@ Widget dialogUseCase(BuildContext context) {
     options: ZetaDialogHeaderAlignment.values,
     labelBuilder: (value) => value.name,
   );
-  return WidgetbookTestWidget(
-    widget: Padding(
+  return WidgetbookScaffold(
+    builder: (context, _) => Padding(
       padding: const EdgeInsets.all(ZetaSpacing.xl_1),
       child: Center(
         child: Column(
@@ -39,7 +37,6 @@ Widget dialogUseCase(BuildContext context) {
               onPressed: () => showZetaDialog(
                 context,
                 useRootNavigator: false,
-                rounded: rounded,
                 barrierDismissible: barrierDismissible,
                 headerAlignment: headerAlignment,
                 title: title,
@@ -56,7 +53,6 @@ Widget dialogUseCase(BuildContext context) {
               onPressed: () => showZetaDialog(
                 context,
                 useRootNavigator: false,
-                rounded: rounded,
                 barrierDismissible: barrierDismissible,
                 headerAlignment: headerAlignment,
                 title: title,
@@ -74,7 +70,6 @@ Widget dialogUseCase(BuildContext context) {
               onPressed: () => showZetaDialog(
                 context,
                 useRootNavigator: false,
-                rounded: rounded,
                 barrierDismissible: barrierDismissible,
                 headerAlignment: headerAlignment,
                 title: title,
diff --git a/example/widgetbook/pages/components/dropdown_list_item_widgetbook.dart b/example/widgetbook/pages/components/dropdown_list_item_widgetbook.dart
index 6ffd2a0a..a0dd54c9 100644
--- a/example/widgetbook/pages/components/dropdown_list_item_widgetbook.dart
+++ b/example/widgetbook/pages/components/dropdown_list_item_widgetbook.dart
@@ -2,12 +2,11 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
-import '../../utils/utils.dart';
+import '../../utils/scaffold.dart';
 
 Widget dropdownListItemUseCase(BuildContext context) {
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (context, setState) {
         final primaryText = context.knobs.string(label: 'Primary text', initialValue: 'Label');
 
@@ -17,8 +16,6 @@ Widget dropdownListItemUseCase(BuildContext context) {
 
         final showDivider = context.knobs.boolean(label: 'Show divider');
 
-        final rounded = roundedKnob(context);
-
         final leading = showIcon ? ZetaIcon(ZetaIcons.star) : null;
 
         return ZetaDropdownListItem(
@@ -28,7 +25,6 @@ Widget dropdownListItemUseCase(BuildContext context) {
             ZetaListItem(primaryText: 'List Item'),
             ZetaListItem(primaryText: 'List Item'),
           ],
-          rounded: rounded,
           secondaryText: secondaryText,
           leading: leading,
           showDivider: showDivider,
diff --git a/example/widgetbook/pages/components/dropdown_widgetbook.dart b/example/widgetbook/pages/components/dropdown_widgetbook.dart
index d022447f..e68f921b 100644
--- a/example/widgetbook/pages/components/dropdown_widgetbook.dart
+++ b/example/widgetbook/pages/components/dropdown_widgetbook.dart
@@ -2,11 +2,11 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
-Widget dropdownUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: Center(
+Widget dropdownUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => Center(
         child: DropdownExample(),
       ),
     );
@@ -41,7 +41,6 @@ class _DropdownExampleState extends State<DropdownExample> {
       ),
       onChange: disabledKnob(context) ? null : (value) {},
       items: items,
-      rounded: context.knobs.boolean(label: "Rounded"),
       size: context.knobs.list(
         label: 'Size',
         options: ZetaDropdownSize.values,
diff --git a/example/widgetbook/pages/components/filter_selection_widgetbook.dart b/example/widgetbook/pages/components/filter_selection_widgetbook.dart
index 2bd7ad1f..2b4ba150 100644
--- a/example/widgetbook/pages/components/filter_selection_widgetbook.dart
+++ b/example/widgetbook/pages/components/filter_selection_widgetbook.dart
@@ -1,24 +1,18 @@
 import 'package:flutter/material.dart';
-import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 
 Widget filterSelectionUseCase(BuildContext context) {
   final items = List.generate(12, (index) => false);
-  final rounded = context.knobs.boolean(
-    label: 'Rounded',
-    initialValue: true,
-  );
 
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (_, setState) {
         return Column(
           children: [
             const SizedBox(height: ZetaSpacing.xl_2),
             ZetaFilterSelection(
-              rounded: rounded,
               items: [
                 for (int i = 0; i < items.length; i++)
                   ZetaFilterChip(
diff --git a/example/widgetbook/pages/components/global_header_widgetbook.dart b/example/widgetbook/pages/components/global_header_widgetbook.dart
index 252726e6..be69a9d3 100644
--- a/example/widgetbook/pages/components/global_header_widgetbook.dart
+++ b/example/widgetbook/pages/components/global_header_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 
 Widget globalHeaderUseCase(BuildContext context) {
   final actionButtons = [
@@ -20,8 +20,8 @@ Widget globalHeaderUseCase(BuildContext context) {
     ),
   ];
 
-  return WidgetbookTestWidget(
-    widget: ZetaGlobalHeader(
+  return WidgetbookScaffold(
+    builder: (context, _) => ZetaGlobalHeader(
       title: context.knobs.string(label: "Title", initialValue: "Title"),
       tabItems: List.generate(
           context.knobs.int.slider(label: "Tabs"), (index) => ZetaGlobalHeaderItem(label: 'Button ${index + 1}')),
diff --git a/example/widgetbook/pages/components/in_page_banner_widgetbook.dart b/example/widgetbook/pages/components/in_page_banner_widgetbook.dart
index 6f31c0b9..be454c92 100644
--- a/example/widgetbook/pages/components/in_page_banner_widgetbook.dart
+++ b/example/widgetbook/pages/components/in_page_banner_widgetbook.dart
@@ -2,11 +2,11 @@ import 'package:flutter/widgets.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
-Widget inPageBannerUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: Padding(
+Widget inPageBannerUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => Padding(
         padding: EdgeInsets.all(ZetaSpacing.xl_1),
         child: ZetaInPageBanner(
           content: Text(
@@ -22,7 +22,6 @@ Widget inPageBannerUseCase(BuildContext context) => WidgetbookTestWidget(
           ),
           onClose: context.knobs.boolean(label: 'Show Close icon') ? () {} : null,
           title: context.knobs.string(label: 'Title', initialValue: 'Title'),
-          rounded: roundedKnob(context),
           actions: () {
             final x = context.knobs.list(label: 'Show Buttons', options: [0, 1, 2]);
 
diff --git a/example/widgetbook/pages/components/list_item_widgetbook.dart b/example/widgetbook/pages/components/list_item_widgetbook.dart
index 02cafe63..e5541e4c 100644
--- a/example/widgetbook/pages/components/list_item_widgetbook.dart
+++ b/example/widgetbook/pages/components/list_item_widgetbook.dart
@@ -2,14 +2,13 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
-import '../../utils/utils.dart';
+import '../../utils/scaffold.dart';
 
 Widget listItemUseCase(BuildContext context) {
   bool checkedValue = false;
 
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (context, setState) {
         final type = context.knobs.list(
           label: 'Type',
@@ -24,8 +23,6 @@ Widget listItemUseCase(BuildContext context) {
 
         final showDivider = context.knobs.boolean(label: 'Show divider');
 
-        final rounded = roundedKnob(context);
-
         final leading = showIcon ? ZetaIcon(ZetaIcons.star) : null;
 
         final onChanged = (bool? value) => setState(() {
@@ -40,7 +37,6 @@ Widget listItemUseCase(BuildContext context) {
             showDivider: showDivider,
             onChanged: onChanged,
             value: checkedValue,
-            rounded: rounded,
           );
         } else if (type == 'Switch') {
           return ZetaListItem.toggle(
diff --git a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart
index a092c2a0..9012b129 100644
--- a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart
+++ b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart
@@ -3,7 +3,7 @@ import 'package:flutter/widgets.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget navigationBarUseCase(BuildContext context) {
@@ -16,10 +16,8 @@ Widget navigationBarUseCase(BuildContext context) {
   int? dividerIndex = context.knobs.intOrNull.slider(label: 'Divider', min: 0, max: 6, initialValue: null);
   bool showSplit = context.knobs.boolean(label: 'Split Items');
   return StatefulBuilder(builder: (context, setState) {
-    double width = (items.length * 90) + (showSplit ? 90 : 0) + (dividerIndex != null ? 90 : 0) + (showButton ? 90 : 0);
-    return WidgetbookTestWidget(
-      screenSize: Size(width, 260),
-      widget: ZetaNavigationBar(
+    return WidgetbookScaffold(
+      builder: (context, _) => ZetaNavigationBar(
         items: items,
         action: showButton ? ZetaButton.primary(label: 'Button', onPressed: () {}) : null,
         onTap: (i) => setState(() => currIndex = i),
diff --git a/example/widgetbook/pages/components/navigation_rail_widgetbook.dart b/example/widgetbook/pages/components/navigation_rail_widgetbook.dart
index a791d2f5..abfc9740 100644
--- a/example/widgetbook/pages/components/navigation_rail_widgetbook.dart
+++ b/example/widgetbook/pages/components/navigation_rail_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget navigationRailUseCase(BuildContext context) {
@@ -12,19 +12,17 @@ Widget navigationRailUseCase(BuildContext context) {
     label: 'Items separated with comma',
     initialValue: 'Label,User Preferences,Account Settings,Label',
   );
-  final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
   final iconData = iconKnob(
     context,
     name: "Icon",
-    rounded: rounded,
     initial: ZetaIcons.star,
   );
   final wordWrap = context.knobs.boolean(label: 'Word wrap', initialValue: true);
   final disabled = disabledKnob(context);
   final itemsList = items.split(',').where((element) => element.trim().isNotEmpty).toList();
   return SafeArea(
-    child: WidgetbookTestWidget(
-      widget: StatefulBuilder(
+    child: WidgetbookScaffold(
+      builder: (context, _) => StatefulBuilder(
         builder: (context, setState) {
           return Row(
             crossAxisAlignment: CrossAxisAlignment.start,
diff --git a/example/widgetbook/pages/components/notification_list_item_widgetbook.dart b/example/widgetbook/pages/components/notification_list_item_widgetbook.dart
index 49a4d6ea..66c6175e 100644
--- a/example/widgetbook/pages/components/notification_list_item_widgetbook.dart
+++ b/example/widgetbook/pages/components/notification_list_item_widgetbook.dart
@@ -2,10 +2,10 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 
-Widget notificationListItemUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: Padding(
+Widget notificationListItemUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => Padding(
         padding: EdgeInsets.symmetric(horizontal: context.knobs.list(label: "Size", options: [100, 200, 400])),
         child: ZetaNotificationListItem(
           body: context.knobs.boolean(label: "Include Link")
diff --git a/example/widgetbook/pages/components/pagination_widgetbook.dart b/example/widgetbook/pages/components/pagination_widgetbook.dart
index 5c4074fd..e072885c 100644
--- a/example/widgetbook/pages/components/pagination_widgetbook.dart
+++ b/example/widgetbook/pages/components/pagination_widgetbook.dart
@@ -2,18 +2,17 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
-Widget paginationUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: ZetaPagination(
+Widget paginationUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => ZetaPagination(
         pages: 10,
         type: context.knobs.list<ZetaPaginationType>(
           label: 'Type',
           options: ZetaPaginationType.values,
           labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
         ),
-        rounded: roundedKnob(context),
         onChange: disabledKnob(context) ? null : (_) {},
       ),
     );
diff --git a/example/widgetbook/pages/components/password_input_widgetbook.dart b/example/widgetbook/pages/components/password_input_widgetbook.dart
index 3c932313..9a409790 100644
--- a/example/widgetbook/pages/components/password_input_widgetbook.dart
+++ b/example/widgetbook/pages/components/password_input_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget passwordInputUseCase(BuildContext context) => _Password();
@@ -23,12 +23,10 @@ class _PasswordState extends State<_Password> {
     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(
-        widget: Column(
+      child: WidgetbookScaffold(
+        builder: (context, _) => Column(
           children: [
             ConstrainedBox(
               constraints: BoxConstraints(maxWidth: 328),
@@ -40,7 +38,6 @@ class _PasswordState extends State<_Password> {
                   options: ZetaWidgetSize.values,
                   labelBuilder: enumLabelBuilder,
                 ),
-                rounded: rounded,
                 hintText: context.knobs.string(label: 'Hint Text'),
                 placeholder: context.knobs.string(label: 'Placeholder'),
                 label: context.knobs.string(label: 'Label'),
diff --git a/example/widgetbook/pages/components/phone_input_widgetbook.dart b/example/widgetbook/pages/components/phone_input_widgetbook.dart
index c3ebdc4c..0800b0fe 100644
--- a/example/widgetbook/pages/components/phone_input_widgetbook.dart
+++ b/example/widgetbook/pages/components/phone_input_widgetbook.dart
@@ -2,22 +2,20 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 
 Widget phoneInputUseCase(BuildContext context) {
   final countries = context.knobs.string(
     label: 'ISO 3166-1 alpha-2 county codes',
     initialValue: '',
   );
-  final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
   final enabled = context.knobs.boolean(label: 'Enabled', initialValue: true);
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (context, setState) {
         return Padding(
           padding: const EdgeInsets.all(ZetaSpacing.xl_1),
           child: ZetaPhoneInput(
-            rounded: rounded,
             enabled: enabled,
             label: 'Phone number',
             hint: 'Enter your phone number',
diff --git a/example/widgetbook/pages/components/progress_widgetbook.dart b/example/widgetbook/pages/components/progress_widgetbook.dart
index 6edc683a..ba9b5b82 100644
--- a/example/widgetbook/pages/components/progress_widgetbook.dart
+++ b/example/widgetbook/pages/components/progress_widgetbook.dart
@@ -2,11 +2,11 @@ import 'package:flutter/widgets.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
-Widget progressBarUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: LayoutBuilder(builder: (context, constraints) {
+Widget progressBarUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => LayoutBuilder(builder: (context, constraints) {
         return SizedBox(
           width: constraints.maxWidth - ZetaSpacing.xl_9,
           child: ZetaProgressBar(
@@ -17,17 +17,15 @@ Widget progressBarUseCase(BuildContext context) => WidgetbookTestWidget(
               labelBuilder: enumLabelBuilder,
             ),
             isThin: context.knobs.boolean(label: 'Thin'),
-            rounded: roundedKnob(context),
             label: context.knobs.stringOrNull(label: 'Label'),
           ),
         );
       }),
     );
 
-Widget progressCircleUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: ZetaProgressCircle(
+Widget progressCircleUseCase(BuildContext context) => WidgetbookScaffold(
+      builder: (context, _) => 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',
diff --git a/example/widgetbook/pages/components/radio_widgetbook.dart b/example/widgetbook/pages/components/radio_widgetbook.dart
index d8be14f3..e9fedb8d 100644
--- a/example/widgetbook/pages/components/radio_widgetbook.dart
+++ b/example/widgetbook/pages/components/radio_widgetbook.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget radioButtonUseCase(BuildContext context) {
@@ -9,8 +9,8 @@ Widget radioButtonUseCase(BuildContext context) {
   String option2 = 'Label 2';
   String? groupValue;
 
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (context, setState) {
         ValueChanged<String?>? onChanged =
             !disabledKnob(context) ? (value) => setState(() => groupValue = value) : null;
diff --git a/example/widgetbook/pages/components/screen_header_bar_widgetbook.dart b/example/widgetbook/pages/components/screen_header_bar_widgetbook.dart
index dfc66336..8565dc92 100644
--- a/example/widgetbook/pages/components/screen_header_bar_widgetbook.dart
+++ b/example/widgetbook/pages/components/screen_header_bar_widgetbook.dart
@@ -2,21 +2,19 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 
 Widget screenHeaderBarUseCase(BuildContext context) {
   final title = context.knobs.string(
     label: 'Title',
     initialValue: 'Add Subscribers',
   );
-  final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
 
-  return WidgetbookTestWidget(
-    widget: ZetaScreenHeaderBar(
+  return WidgetbookScaffold(
+    builder: (context, _) => ZetaScreenHeaderBar(
       title: Text(title),
       actionButtonLabel: 'Done',
       onActionButtonPressed: () {},
-      rounded: rounded,
     ),
   );
 }
diff --git a/example/widgetbook/pages/components/search_bar_widgetbook.dart b/example/widgetbook/pages/components/search_bar_widgetbook.dart
index f5dd1fa8..d9704d92 100644
--- a/example/widgetbook/pages/components/search_bar_widgetbook.dart
+++ b/example/widgetbook/pages/components/search_bar_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 const List<String> _items = [
@@ -16,8 +16,8 @@ const List<String> _items = [
 
 Widget searchBarUseCase(BuildContext context) {
   List<String> items = List.from(_items);
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (context, setState) {
         final hint = context.knobs.string(
           label: 'Hint',
diff --git a/example/widgetbook/pages/components/segmented_control_widgetbook.dart b/example/widgetbook/pages/components/segmented_control_widgetbook.dart
index 3abb74c1..4239ced5 100644
--- a/example/widgetbook/pages/components/segmented_control_widgetbook.dart
+++ b/example/widgetbook/pages/components/segmented_control_widgetbook.dart
@@ -2,29 +2,26 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget segmentedControlUseCase(BuildContext context) {
   final iconsSegments = List.generate(5, (index) => index);
   int selectedIconSegment = iconsSegments.first;
 
-  final rounded = context.knobs.boolean(label: "Rounded", initialValue: true);
-  final icon = iconKnob(context, rounded: rounded, initial: ZetaIcons.star);
-
+  final icon = iconKnob(context, initial: ZetaIcons.star);
   final text = context.knobs.string(label: 'Text', initialValue: "Item");
 
   final textSegments = List.generate(3, (index) => "$text ${index + 1}");
   String selectedTextSegment = textSegments.first;
 
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(builder: (context, setState) {
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(builder: (context, setState) {
       return Column(
         children: [
           Padding(
             padding: const EdgeInsets.all(ZetaSpacing.xl_4),
             child: ZetaSegmentedControl(
-              rounded: rounded,
               segments: [
                 for (final value in iconsSegments)
                   ZetaButtonSegment(
@@ -41,7 +38,6 @@ Widget segmentedControlUseCase(BuildContext context) {
           Padding(
             padding: const EdgeInsets.all(ZetaSpacing.xl_4),
             child: ZetaSegmentedControl(
-              rounded: rounded,
               segments: [
                 for (final value in textSegments)
                   ZetaButtonSegment(
diff --git a/example/widgetbook/pages/components/select_input_widgetbook.dart b/example/widgetbook/pages/components/select_input_widgetbook.dart
index 53e6a505..6d890c76 100644
--- a/example/widgetbook/pages/components/select_input_widgetbook.dart
+++ b/example/widgetbook/pages/components/select_input_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget selectInputUseCase(BuildContext context) {
@@ -31,7 +31,6 @@ Widget selectInputUseCase(BuildContext context) {
     label: 'Hint',
     initialValue: 'Default hint text',
   );
-  final rounded = roundedKnob(context);
   final disabled = disabledKnob(context);
 
   final size = context.knobs.list<ZetaWidgetSize>(
@@ -46,13 +45,12 @@ Widget selectInputUseCase(BuildContext context) {
     labelBuilder: (requirementLevel) => enumLabelBuilder(requirementLevel),
   );
 
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (context, setState) {
         return Padding(
           padding: const EdgeInsets.all(ZetaSpacing.xl_2),
           child: ZetaSelectInput(
-            rounded: rounded,
             disabled: disabled,
             size: size,
             items: items,
diff --git a/example/widgetbook/pages/components/slider_widgetbook.dart b/example/widgetbook/pages/components/slider_widgetbook.dart
index 0b0f6ed1..f76d5a62 100644
--- a/example/widgetbook/pages/components/slider_widgetbook.dart
+++ b/example/widgetbook/pages/components/slider_widgetbook.dart
@@ -2,12 +2,16 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 
 Widget sliderUseCase(BuildContext context) {
-  return WidgetbookTestWidget(widget: Builder(builder: (context) {
-    return ZetaSliderExample(context);
-  }));
+  return WidgetbookScaffold(
+    builder: (context, _) => Builder(
+      builder: (context) {
+        return ZetaSliderExample(context);
+      },
+    ),
+  );
 }
 
 class ZetaSliderExample extends StatefulWidget {
@@ -25,7 +29,6 @@ class _ZetaSliderExampleState extends State<ZetaSliderExample> {
   Widget build(BuildContext context) {
     return ZetaSlider(
       value: value,
-      rounded: widget.c.knobs.boolean(label: "Rounded"),
       divisions: widget.c.knobs.intOrNull.slider(label: "Divisions", min: 1, initialValue: 10),
       onChange: widget.c.knobs.boolean(label: "Disabled")
           ? null
diff --git a/example/widgetbook/pages/components/snack_bar_widgetbook.dart b/example/widgetbook/pages/components/snack_bar_widgetbook.dart
index 6b67dcbb..4c08776b 100644
--- a/example/widgetbook/pages/components/snack_bar_widgetbook.dart
+++ b/example/widgetbook/pages/components/snack_bar_widgetbook.dart
@@ -2,12 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget snackBarUseCase(BuildContext context) {
-  return WidgetbookTestWidget(
-    widget: Builder(
+  return WidgetbookScaffold(
+    builder: (context, _) => Builder(
       builder: (context) {
         final text = context.knobs.string(
           label: 'Content Text',
@@ -32,8 +32,6 @@ Widget snackBarUseCase(BuildContext context) {
           nullable: true,
         );
 
-        final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
-
         return ZetaButton.primary(
             label: "Show Snackbar",
             onPressed: () {
@@ -44,7 +42,6 @@ Widget snackBarUseCase(BuildContext context) {
                 actionLabel: actionLabel,
                 type: type,
                 leadingIcon: leadingIcon != null ? ZetaIcon(leadingIcon) : null,
-                rounded: rounded,
                 content: Text(text),
               );
 
diff --git a/example/widgetbook/pages/components/stepper_input_widgetbook.dart b/example/widgetbook/pages/components/stepper_input_widgetbook.dart
index 798db6c3..162d71cd 100644
--- a/example/widgetbook/pages/components/stepper_input_widgetbook.dart
+++ b/example/widgetbook/pages/components/stepper_input_widgetbook.dart
@@ -2,12 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget stepperInputUseCase(BuildContext context) {
-  return WidgetbookTestWidget(
-    widget: ZetaStepperInput(
+  return WidgetbookScaffold(
+    builder: (context, _) => ZetaStepperInput(
       initialValue: context.knobs.int.input(label: 'Initial value'),
       min: context.knobs.int.input(label: 'Minimum value', initialValue: 0),
       max: context.knobs.int.input(label: 'Maximum value', initialValue: 10),
@@ -16,7 +16,6 @@ Widget stepperInputUseCase(BuildContext context) {
         options: ZetaStepperInputSize.values,
         labelBuilder: enumLabelBuilder,
       ),
-      rounded: roundedKnob(context),
       onChange: disabledKnob(context) ? null : (_) {},
     ),
   );
diff --git a/example/widgetbook/pages/components/stepper_widgetbook.dart b/example/widgetbook/pages/components/stepper_widgetbook.dart
index 70eebb24..c6424ccc 100644
--- a/example/widgetbook/pages/components/stepper_widgetbook.dart
+++ b/example/widgetbook/pages/components/stepper_widgetbook.dart
@@ -2,8 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
-import '../../utils/utils.dart';
+import '../../utils/scaffold.dart';
 
 Widget stepperUseCase(BuildContext context) {
   int currentStep = 0;
@@ -25,12 +24,10 @@ Widget stepperUseCase(BuildContext context) {
     labelBuilder: (type) => type.name,
   );
 
-  final rounded = roundedKnob(context);
-
   final enabledContent = context.knobs.boolean(label: 'Enabled Content', initialValue: true);
 
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (context, setState) {
         return Container(
           height: type == ZetaStepperType.horizontal ? 300 : null,
@@ -40,7 +37,6 @@ Widget stepperUseCase(BuildContext context) {
           child: ZetaStepper(
             currentStep: currentStep,
             onStepTapped: (index) => setState(() => currentStep = index),
-            rounded: type == ZetaStepperType.horizontal ? rounded : true,
             type: type,
             steps: [
               ZetaStep(
diff --git a/example/widgetbook/pages/components/switch_widgetbook.dart b/example/widgetbook/pages/components/switch_widgetbook.dart
index 08a3579f..d4379a08 100644
--- a/example/widgetbook/pages/components/switch_widgetbook.dart
+++ b/example/widgetbook/pages/components/switch_widgetbook.dart
@@ -2,14 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget switchUseCase(BuildContext context) {
   bool? isOn = false;
 
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (context, setState) {
         ValueChanged<bool?>? onChanged = !disabledKnob(context) ? (value) => setState(() => isOn = value) : null;
         return Padding(
diff --git a/example/widgetbook/pages/components/tabs_widgetbook.dart b/example/widgetbook/pages/components/tabs_widgetbook.dart
index 50fcd23b..aacf9eb2 100644
--- a/example/widgetbook/pages/components/tabs_widgetbook.dart
+++ b/example/widgetbook/pages/components/tabs_widgetbook.dart
@@ -2,12 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget tabsUseCase(BuildContext context) {
-  return WidgetbookTestWidget(
-    widget: SingleChildScrollView(
+  return WidgetbookScaffold(
+    builder: (context, _) => SingleChildScrollView(
       child: Column(
         children: [
           Padding(
diff --git a/example/widgetbook/pages/components/text_input_widgetbook.dart b/example/widgetbook/pages/components/text_input_widgetbook.dart
index fd313845..f5a1cb85 100644
--- a/example/widgetbook/pages/components/text_input_widgetbook.dart
+++ b/example/widgetbook/pages/components/text_input_widgetbook.dart
@@ -2,12 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget textInputUseCase(BuildContext context) {
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (context, setState) {
         final label = context.knobs.string(
           label: 'Label',
@@ -21,7 +21,6 @@ Widget textInputUseCase(BuildContext context) {
           label: 'Hint',
           initialValue: 'Default hint text',
         );
-        final rounded = roundedKnob(context);
         final disabled = disabledKnob(context);
         final size = context.knobs.list<ZetaWidgetSize>(
           label: 'Size',
@@ -33,7 +32,6 @@ Widget textInputUseCase(BuildContext context) {
           padding: const EdgeInsets.all(ZetaSpacing.xl_1),
           child: ZetaTextInput(
             size: size,
-            rounded: rounded,
             disabled: disabled,
             label: label,
             hintText: hintText,
diff --git a/example/widgetbook/pages/components/time_input_widgetbook.dart b/example/widgetbook/pages/components/time_input_widgetbook.dart
index 5fbcd13a..06c3d722 100644
--- a/example/widgetbook/pages/components/time_input_widgetbook.dart
+++ b/example/widgetbook/pages/components/time_input_widgetbook.dart
@@ -2,14 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget timeInputUseCase(BuildContext context) {
   String? _errorText;
 
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (context, setState) {
         final label = context.knobs.string(
           label: 'Label',
@@ -23,7 +23,6 @@ Widget timeInputUseCase(BuildContext context) {
           label: 'Hint',
           initialValue: 'Default hint text',
         );
-        final rounded = roundedKnob(context);
         final disabled = disabledKnob(context);
         final size = context.knobs.list<ZetaWidgetSize>(
           label: 'Size',
@@ -35,7 +34,6 @@ Widget timeInputUseCase(BuildContext context) {
           padding: const EdgeInsets.all(ZetaSpacing.xl_1),
           child: ZetaTimeInput(
             size: size,
-            rounded: rounded,
             disabled: disabled,
             label: label,
             hintText: hintText,
diff --git a/example/widgetbook/pages/components/tooltip_widgetbook.dart b/example/widgetbook/pages/components/tooltip_widgetbook.dart
index cd556311..61a23c4a 100644
--- a/example/widgetbook/pages/components/tooltip_widgetbook.dart
+++ b/example/widgetbook/pages/components/tooltip_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 
 Widget tooltipUseCase(BuildContext context) {
   final text = context.knobs.string(
@@ -14,15 +14,13 @@ Widget tooltipUseCase(BuildContext context) {
     options: ZetaTooltipArrowDirection.values,
     labelBuilder: (direction) => direction.name,
   );
-  final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
-  return WidgetbookTestWidget(
-    widget: StatefulBuilder(
+  return WidgetbookScaffold(
+    builder: (context, _) => StatefulBuilder(
       builder: (context, setState) {
         return Padding(
           padding: const EdgeInsets.all(ZetaSpacing.xl_4),
           child: ZetaTooltip(
             child: Text(text),
-            rounded: rounded,
             arrowDirection: direction,
           ),
         );
diff --git a/example/widgetbook/pages/components/top_app_bar_widgetbook.dart b/example/widgetbook/pages/components/top_app_bar_widgetbook.dart
index 95ce2358..609d48d1 100644
--- a/example/widgetbook/pages/components/top_app_bar_widgetbook.dart
+++ b/example/widgetbook/pages/components/top_app_bar_widgetbook.dart
@@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../../utils/scaffold.dart';
 import '../../utils/utils.dart';
 
 Widget defaultTopAppBarUseCase(BuildContext context) {
@@ -26,44 +26,44 @@ Widget defaultTopAppBarUseCase(BuildContext context) {
   );
   final leadingIcon = iconKnob(context, name: 'Leading Icon', initial: ZetaIcons.hamburger_menu);
 
-  return WidgetbookTestWidget(
+  return WidgetbookScaffold(
       backgroundColor: Colors.green,
       removeBody: true,
-      widget: Column(
-        children: [
-          ZetaTopAppBar(
-            leading: IconButton(
-              onPressed: () {},
-              icon: ZetaIcon(leadingIcon),
-            ),
-            type: type,
-            title: Text(title),
-            actions: enabledActions
-                ? [
-                    IconButton(
-                      onPressed: () {},
-                      icon: ZetaIcon(Icons.language),
-                    ),
-                    IconButton(
-                      onPressed: () {},
-                      icon: ZetaIcon(Icons.favorite),
-                    ),
-                    IconButton(
-                      onPressed: () {},
-                      icon: ZetaIcon(ZetaIcons.more_vertical),
-                    )
-                  ]
-                : null,
-          ),
-        ],
-      ));
+      builder: (context, _) => Column(
+            children: [
+              ZetaTopAppBar(
+                leading: IconButton(
+                  onPressed: () {},
+                  icon: ZetaIcon(leadingIcon),
+                ),
+                type: type,
+                title: Text(title),
+                actions: enabledActions
+                    ? [
+                        IconButton(
+                          onPressed: () {},
+                          icon: ZetaIcon(Icons.language),
+                        ),
+                        IconButton(
+                          onPressed: () {},
+                          icon: ZetaIcon(Icons.favorite),
+                        ),
+                        IconButton(
+                          onPressed: () {},
+                          icon: ZetaIcon(ZetaIcons.more_vertical),
+                        )
+                      ]
+                    : null,
+              ),
+            ],
+          ));
 }
 
 Widget searchTopAppBarUseCase(BuildContext context) {
-  return WidgetbookTestWidget(
+  return WidgetbookScaffold(
     backgroundColor: Colors.green,
     removeBody: true,
-    widget: Column(children: [_SearchUseCase()]),
+    builder: (context, _) => Column(children: [_SearchUseCase()]),
   );
 }
 
@@ -155,73 +155,67 @@ class _ExtendedSearchState extends State<ExtendedSearch> {
 
     final showSearch = context.knobs.boolean(label: 'Search variant', initialValue: false);
 
-    return WidgetbookTestWidget(
+    return WidgetbookScaffold(
       removeBody: true,
-      widget: SafeArea(
-        child: LayoutBuilder(builder: (context, constraints) {
-          return StatefulBuilder(
-            builder: ((context, setState) {
-              return SizedBox(
-                width: constraints.maxWidth,
-                height: constraints.maxHeight,
-                child: CustomScrollView(
-                  slivers: [
-                    ZetaTopAppBar.extended(
-                      leading: IconButton(icon: ZetaIcon(leadingIcon), onPressed: () {}),
-                      title: Text(title),
-                      actions: showSearch
-                          ? [
-                              IconButton(
-                                onPressed: _showHideSearchExtended,
-                                icon: ZetaIcon(ZetaIcons.search),
-                              )
-                            ]
-                          : [
-                              IconButton(
-                                onPressed: () {},
-                                icon: ZetaIcon(Icons.language),
-                              ),
-                              IconButton(
-                                onPressed: () {},
-                                icon: ZetaIcon(Icons.favorite),
-                              ),
-                              IconButton(
-                                onPressed: () {},
-                                icon: ZetaIcon(ZetaIcons.more_vertical),
-                              )
-                            ],
-                      searchController: showSearch ? _searchControllerExtended : null,
-                      onSearch: showSearch ? (text) => debugPrint('search text: $text') : null,
-                      onSearchMicrophoneIconPressed: showSearch
-                          ? () async {
-                              var sampleTexts = [
-                                'This is a sample text',
-                                'Another sample',
-                                'Speech recognition text',
-                                'Example'
-                              ];
-                              var generatedText = sampleTexts[Random().nextInt(sampleTexts.length)];
-                              _searchControllerExtended.text = generatedText;
-                            }
-                          : null,
-                    ),
-                    SliverToBoxAdapter(
-                      child: Container(
-                        width: constraints.maxWidth,
-                        height: constraints.maxHeight * 4,
-                        color: Zeta.of(context).colors.surfaceSecondary,
-                        child: CustomPaint(
-                          painter: Painter(colors: Zeta.of(context).colors, constraints: constraints),
-                          size: Size(constraints.maxWidth, constraints.maxHeight * 4),
+      builder: (context, constraints) => SafeArea(
+        child: SizedBox(
+          width: constraints.maxWidth,
+          height: constraints.maxHeight,
+          child: CustomScrollView(
+            slivers: [
+              ZetaTopAppBar.extended(
+                leading: IconButton(icon: ZetaIcon(leadingIcon), onPressed: () {}),
+                title: Text(title),
+                actions: showSearch
+                    ? [
+                        IconButton(
+                          onPressed: _showHideSearchExtended,
+                          icon: ZetaIcon(ZetaIcons.search),
+                        )
+                      ]
+                    : [
+                        IconButton(
+                          onPressed: () {},
+                          icon: ZetaIcon(Icons.language),
+                        ),
+                        IconButton(
+                          onPressed: () {},
+                          icon: ZetaIcon(Icons.favorite),
                         ),
-                      ),
-                    ),
-                  ],
+                        IconButton(
+                          onPressed: () {},
+                          icon: ZetaIcon(ZetaIcons.more_vertical),
+                        )
+                      ],
+                searchController: showSearch ? _searchControllerExtended : null,
+                onSearch: showSearch ? (text) => debugPrint('search text: $text') : null,
+                onSearchMicrophoneIconPressed: showSearch
+                    ? () async {
+                        var sampleTexts = [
+                          'This is a sample text',
+                          'Another sample',
+                          'Speech recognition text',
+                          'Example'
+                        ];
+                        var generatedText = sampleTexts[Random().nextInt(sampleTexts.length)];
+                        _searchControllerExtended.text = generatedText;
+                      }
+                    : null,
+              ),
+              SliverToBoxAdapter(
+                child: Container(
+                  width: constraints.maxWidth,
+                  height: constraints.maxHeight * 4,
+                  color: Zeta.of(context).colors.surfaceSecondary,
+                  child: CustomPaint(
+                    painter: Painter(colors: Zeta.of(context).colors, constraints: constraints),
+                    size: Size(constraints.maxWidth, constraints.maxHeight * 4),
+                  ),
                 ),
-              );
-            }),
-          );
-        }),
+              ),
+            ],
+          ),
+        ),
       ),
     );
   }
diff --git a/example/widgetbook/test/test_components.dart b/example/widgetbook/test/test_components.dart
deleted file mode 100644
index dba5e42b..00000000
--- a/example/widgetbook/test/test_components.dart
+++ /dev/null
@@ -1,39 +0,0 @@
-import 'package:flutter/material.dart';
-
-class WidgetbookTestWidget extends StatelessWidget {
-  final Size? screenSize;
-  final Widget widget;
-  final bool removeBody;
-  final Color? backgroundColor;
-
-  const WidgetbookTestWidget({
-    required this.widget,
-    this.screenSize,
-    super.key,
-    this.removeBody = false,
-    this.backgroundColor,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: backgroundColor ?? Colors.transparent,
-      body: removeBody
-          ? widget
-          : Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                SizedBox(
-                  width: screenSize?.width,
-                  height: screenSize?.height,
-                  child: MediaQuery(
-                    data: MediaQueryData(
-                        size: Size(screenSize?.width ?? double.infinity, screenSize?.height ?? double.infinity)),
-                    child: SingleChildScrollView(child: Center(child: widget)),
-                  ),
-                ),
-              ],
-            ),
-    );
-  }
-}
diff --git a/example/widgetbook/utils/scaffold.dart b/example/widgetbook/utils/scaffold.dart
new file mode 100644
index 00000000..2dbaccdf
--- /dev/null
+++ b/example/widgetbook/utils/scaffold.dart
@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class WidgetbookScaffold extends StatelessWidget {
+  final Widget Function(BuildContext context, BoxConstraints constraints) builder;
+  final bool removeBody;
+  final Color? backgroundColor;
+
+  const WidgetbookScaffold({
+    required this.builder,
+    super.key,
+    this.removeBody = false,
+    this.backgroundColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: backgroundColor ?? Zeta.of(context).colors.surfaceDefault,
+      body: LayoutBuilder(builder: (context, constraints) {
+        return Center(
+          child: ListView(
+            shrinkWrap: true,
+            children: [Center(child: builder(context, constraints))],
+          ),
+        );
+      }),
+    );
+  }
+}
diff --git a/example/widgetbook/utils/utils.dart b/example/widgetbook/utils/utils.dart
index 87e2c695..c3fcdfcf 100644
--- a/example/widgetbook/utils/utils.dart
+++ b/example/widgetbook/utils/utils.dart
@@ -2,20 +2,18 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-String iconLabelBuilder(int? codePoint, [bool rounded = true]) {
+String iconLabelBuilder(int? codePoint) {
   return icons.entries.firstWhere((element) => element.value.codePoint == codePoint).key.split('_').join(' ');
 }
 
-List<IconData> iconOptions(rounded) => icons.values
-    .map((e) => IconData(e.codePoint,
-        fontFamily: rounded ? ZetaIcons.familyRound : ZetaIcons.familySharp, fontPackage: ZetaIcons.package))
+List<IconData> iconOptions() => icons.values
+    .map((e) => IconData(e.codePoint, fontFamily: ZetaIcons.family, fontPackage: ZetaIcons.package))
     .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,
@@ -23,20 +21,18 @@ IconData? iconKnob(
   return nullable
       ? context.knobs.listOrNull(
           label: name,
-          options: iconOptions(rounded),
-          labelBuilder: (value) => iconLabelBuilder(value?.codePoint, rounded),
+          options: iconOptions(),
+          labelBuilder: (value) => iconLabelBuilder(value?.codePoint),
           initialOption: initial,
         )
       : context.knobs.list(
           label: name,
-          options: iconOptions(rounded),
-          labelBuilder: (value) => iconLabelBuilder(value?.codePoint, rounded),
+          options: iconOptions(),
+          labelBuilder: (value) => iconLabelBuilder(value?.codePoint),
           initialOption: initial,
         );
 }
 
-bool roundedKnob(BuildContext context) => context.knobs.boolean(label: 'Rounded');
-
 bool disabledKnob(BuildContext context) => context.knobs.boolean(
       label: 'Disabled',
       initialValue: false,
diff --git a/example/widgetbook/utils/zeta_addon.dart b/example/widgetbook/utils/zeta_addon.dart
new file mode 100644
index 00000000..9b28b3c4
--- /dev/null
+++ b/example/widgetbook/utils/zeta_addon.dart
@@ -0,0 +1,100 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class _ZetaAddon {
+  final bool rounded;
+  final ThemeMode themeMode;
+  final ZetaContrast contrast;
+
+  const _ZetaAddon(this.rounded, this.themeMode, this.contrast);
+}
+
+class ZetaAddon extends WidgetbookAddon<_ZetaAddon> {
+  final _ZetaAddon data;
+
+  ZetaAddon({this.data = const _ZetaAddon(false, ThemeMode.system, ZetaContrast.aa)}) : super(name: 'Theme');
+
+  @override
+  Widget buildUseCase(BuildContext context, Widget child, _ZetaAddon data) {
+    return ZetaProvider.base(
+      initialRounded: data.rounded,
+      initialThemeMode: data.themeMode,
+      initialContrast: data.contrast,
+      builder: (context, light, dark, mode) {
+        return MaterialApp(
+          theme: light,
+          darkTheme: dark,
+          themeMode: mode,
+          home: child,
+          debugShowCheckedModeBanner: false,
+        );
+      },
+    );
+  }
+
+  @override
+  List<Field> get fields {
+    return [
+      ListField(
+        name: 'Rounded',
+        values: [true, false],
+        initialValue: false,
+        labelBuilder: (value) => value ? 'Rounded' : 'Sharp',
+      ),
+      ListField(
+        name: 'Theme Mode',
+        values: [ThemeMode.light, ThemeMode.dark],
+        initialValue: ThemeMode.system,
+        labelBuilder: (value) {
+          switch (value) {
+            case ThemeMode.system:
+              return 'System';
+            case ThemeMode.light:
+              return 'Light';
+            case ThemeMode.dark:
+              return 'Dark';
+          }
+          return 'ThemeMode';
+        },
+      ),
+      ListField(
+        name: 'Contrast',
+        values: [ZetaContrast.aa, ZetaContrast.aaa],
+        initialValue: ZetaContrast.aa,
+        labelBuilder: (value) {
+          switch (value) {
+            case ZetaContrast.aa:
+              return 'AA';
+            case ZetaContrast.aaa:
+              return 'AAA';
+          }
+          return 'Contrast';
+        },
+      ),
+    ];
+  }
+
+  @override
+  _ZetaAddon valueFromQueryGroup(Map<String, String> group) {
+    return _ZetaAddon(
+      group['Rounded'] == 'Rounded'
+          ? true
+          : group['Rounded'] == 'Sharp'
+              ? false
+              : data.rounded,
+      group['Theme Mode'] == 'Light'
+          ? ThemeMode.light
+          : group['Theme Mode'] == 'Dark'
+              ? ThemeMode.dark
+              : group['Theme Mode'] == 'System'
+                  ? ThemeMode.system
+                  : data.themeMode,
+      group['Contrast'] == 'AA'
+          ? ZetaContrast.aa
+          : group['Contrast'] == 'AAA'
+              ? ZetaContrast.aaa
+              : data.contrast,
+    );
+  }
+}
diff --git a/lib/src/zeta_provider.dart b/lib/src/zeta_provider.dart
index c94c9ff0..690fdfa6 100644
--- a/lib/src/zeta_provider.dart
+++ b/lib/src/zeta_provider.dart
@@ -369,6 +369,7 @@ ThemeData generateZetaTheme({
   required ColorScheme colorScheme,
   ThemeData? existingTheme,
   String? fontFamily,
+  ZetaThemeData? zetaThemeData,
 }) {
   if (existingTheme != null) {
     // Apply the Zeta styles to the existing theme, ignoring fields that are the same as the default ThemeData.
@@ -398,6 +399,11 @@ ThemeData generateZetaTheme({
     scaffoldBackgroundColor: colorScheme.surfaceTertiary,
     colorScheme: colorScheme.copyWith(brightness: brightness),
     textTheme: zetaTextTheme,
-    iconTheme: const IconThemeData(size: kZetaIconSize),
+    iconTheme: IconThemeData(
+      size: kZetaIconSize,
+      color: (zetaThemeData != null
+          ? (brightness == Brightness.dark ? zetaThemeData.colorsDark : zetaThemeData.colorsLight).iconDefault
+          : colorScheme.onSurface),
+    ),
   );
 }