diff --git a/README.md b/README.md
index 7437d3b5..703ca8e7 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,13 @@ Zeta is the new, formal, standardized Zebra Design System based off the successe
 
 > 🚧 **Note**: This package is in pre-release, and so many aspects are incomplete.
 
+### Prerequisites
+
+```
+  dart sdk: ">=3.2.0 <4.0.0"
+  flutter: ">=3.16.0"
+```
+
 ## Installation
 
 To install `zeta_flutter`, follow the instructions [here](https://pub.dev/packages/zeta_flutter/install).
diff --git a/example/lib/pages/components/progress_example.dart b/example/lib/pages/components/progress_example.dart
index 2158b5ee..84f7887f 100644
--- a/example/lib/pages/components/progress_example.dart
+++ b/example/lib/pages/components/progress_example.dart
@@ -28,13 +28,13 @@ class ProgressExampleState extends State<ProgressExample> {
               SizedBox(
                 height: 20,
               ),
-              Wrapper(stepsCompleted: 0, type: ZetaBarType.standard, isThin: false, stateChangeable: true),
+              Wrapper(stepsCompleted: 0, type: ZetaProgressBarType.standard, isThin: false, stateChangeable: true),
               SizedBox(
                 height: 20,
               ),
               Wrapper(
                 stepsCompleted: 0,
-                type: ZetaBarType.indeterminate,
+                type: ZetaProgressBarType.indeterminate,
                 isThin: false,
                 label: "UPLOADING ...",
               ),
@@ -50,7 +50,7 @@ class Wrapper extends StatefulWidget {
   const Wrapper(
       {super.key,
       required this.stepsCompleted,
-      this.type = ZetaBarType.standard,
+      this.type = ZetaProgressBarType.standard,
       this.isThin = false,
       this.rounded = true,
       this.stateChangeable = false,
@@ -58,7 +58,7 @@ class Wrapper extends StatefulWidget {
 
   final int stepsCompleted;
   final bool rounded;
-  final ZetaBarType type;
+  final ZetaProgressBarType type;
   final bool isThin;
   final String? label;
   final bool stateChangeable;
@@ -70,7 +70,7 @@ class Wrapper extends StatefulWidget {
 class _WrapperState extends State<Wrapper> {
   late int stepsCompleted;
   late double progress;
-  late ZetaBarType type;
+  late ZetaProgressBarType type;
 
   @override
   void initState() {
@@ -90,7 +90,7 @@ class _WrapperState extends State<Wrapper> {
 
   void setLoading() {
     setState(() {
-      type = type == ZetaBarType.buffering ? ZetaBarType.standard : ZetaBarType.buffering;
+      type = type == ZetaProgressBarType.buffering ? ZetaProgressBarType.standard : ZetaProgressBarType.buffering;
     });
   }
 
@@ -108,7 +108,7 @@ class _WrapperState extends State<Wrapper> {
         Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            widget.type != ZetaBarType.indeterminate
+            widget.type != ZetaProgressBarType.indeterminate
                 ? FilledButton(onPressed: increasePercentage, child: Text("Increase"))
                 : Container(),
             const SizedBox(width: 40),
diff --git a/example/pubspec.yaml b/example/pubspec.yaml
index a231d134..9b3a49a4 100644
--- a/example/pubspec.yaml
+++ b/example/pubspec.yaml
@@ -4,7 +4,8 @@ version: 0.0.1
 publish_to: "none"
 
 environment:
-  sdk: ">=3.0.1 <4.0.0"
+  sdk: ">=3.2.0 <4.0.0"
+  flutter: ">=3.16.0"
 
 dependencies:
   cached_network_image: ^3.3.1
diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
index e4d2f5ad..fcce448d 100644
--- a/example/widgetbook/main.dart
+++ b/example/widgetbook/main.dart
@@ -1,7 +1,179 @@
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
 
-import 'widgetbook.dart';
+import 'pages/assets/icon_widgetbook.dart';
+import 'pages/components/accordion_widgetbook.dart';
+import 'pages/components/avatar_widgetbook.dart';
+import 'pages/components/badges_widgetbook.dart';
+import 'pages/components/banner_widgetbook.dart';
+import 'pages/components/bottom_sheet_widgetbook.dart';
+import 'pages/components/button_widgetbook.dart';
+import 'pages/components/checkbox_widgetbook.dart';
+import 'pages/components/chip_widgetbook.dart';
+import 'pages/components/dial_pad_widgetbook.dart';
+import 'pages/components/in_page_banner_widgetbook.dart';
+import 'pages/components/navigation_bar_widgetbook.dart';
+import 'pages/components/password_input_widgetbook.dart';
+import 'pages/components/progress_widgetbook.dart';
+import 'pages/theme/color_widgetbook.dart';
+import 'pages/theme/radius_widgetbook.dart';
+import 'pages/theme/spacing_widgetbook.dart';
+import 'pages/theme/typography_widgetbook.dart';
+import 'utils/zebra.dart';
 
-void main() {
-  runApp(const HotReload());
+void main() => runApp(const HotReload());
+
+class HotReload extends StatelessWidget {
+  const HotReload({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Widgetbook(
+      appBuilder: (context, child) => child,
+      directories: [
+        WidgetbookCategory(
+          name: 'Components',
+          isInitiallyExpanded: false,
+          children: [
+            WidgetbookComponent(
+              name: 'Badge',
+              useCases: [
+                WidgetbookUseCase(name: 'Status Label', builder: (context) => statusLabelUseCase(context)),
+                WidgetbookUseCase(name: 'Priority Pill', builder: (context) => priorityPillUseCase(context)),
+                WidgetbookUseCase(name: 'Badge', builder: (context) => badgeUseCase(context)),
+                WidgetbookUseCase(name: 'Indicators', builder: (context) => indicatorsUseCase(context)),
+                WidgetbookUseCase(name: 'Tags', builder: (context) => tagsUseCase(context)),
+                WidgetbookUseCase(
+                    name: 'Workcloud Indicators', builder: (context) => workcloudIndicatorsUseCase(context)),
+              ],
+            ),
+            WidgetbookUseCase(name: 'Avatar', builder: (context) => avatarUseCase(context)),
+            WidgetbookUseCase(name: 'Checkbox', builder: (context) => checkboxUseCase(context)),
+            WidgetbookComponent(
+              name: 'Buttons',
+              useCases: [
+                WidgetbookUseCase(name: 'Button', builder: (context) => buttonUseCase(context)),
+                WidgetbookUseCase(name: 'Icon Button', builder: (context) => iconButtonUseCase(context)),
+                WidgetbookUseCase(
+                    name: 'Floating Action Button', builder: (context) => floatingActionButtonUseCase(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',
+              useCases: [
+                WidgetbookUseCase(name: 'Filter Chip', builder: (context) => filterChipUseCase(context)),
+                WidgetbookUseCase(name: 'Input Chip', builder: (context) => inputChipUseCase(context)),
+                WidgetbookUseCase(name: 'Assist Chip', builder: (context) => assistChipUseCase(context)),
+              ],
+            ),
+            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: '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)),
+              ],
+            ),
+          ]..sort((a, b) => a.name.compareTo(b.name)),
+        ),
+        WidgetbookCategory(
+          name: 'Theme',
+          isInitiallyExpanded: false,
+          children: [
+            WidgetbookUseCase(name: 'Typography', builder: (context) => typographyUseCase(context)),
+            WidgetbookUseCase(name: 'Color', builder: (context) => colorUseCase(context)),
+            WidgetbookUseCase(name: 'Spacing', builder: (context) => spacingUseCase(context)),
+            WidgetbookUseCase(name: 'Radius', builder: (context) => radiusUseCase(context)),
+          ]..sort((a, b) => a.name.compareTo(b.name)),
+        ),
+        WidgetbookCategory(
+          name: 'Assets',
+          isInitiallyExpanded: false,
+          children: [
+            WidgetbookUseCase(name: 'Icons', builder: (context) => iconsUseCase(context)),
+          ]..sort((a, b) => a.name.compareTo(b.name)),
+        ),
+      ],
+      addons: [
+        DeviceFrameAddon(
+          devices: [
+            Devices.windows.wideMonitor,
+            Devices.macOS.wideMonitor,
+            Devices.ios.iPad,
+            Devices.ios.iPhone13,
+            Zebra.ec30,
+            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.background,
+                        colorScheme: light,
+                        textTheme: zetaTextTheme,
+                        brightness: Brightness.light,
+                      ),
+                      darkTheme: ThemeData(
+                        useMaterial3: true,
+                        scaffoldBackgroundColor: dark.background,
+                        colorScheme: dark,
+                        textTheme: zetaTextTheme,
+                        brightness: Brightness.dark,
+                      ),
+                      builder: (context, child) {
+                        return ColoredBox(
+                          color: Zeta.of(context).colors.surfacePrimary,
+                          child: child,
+                        );
+                      },
+                      home: child,
+                    );
+                  },
+                );
+              },
+            );
+          },
+        ),
+      ],
+    );
+  }
+}
+
+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 7502452a..32ba0c94 100644
--- a/example/widgetbook/pages/assets/icon_widgetbook.dart
+++ b/example/widgetbook/pages/assets/icon_widgetbook.dart
@@ -5,64 +5,57 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-WidgetbookComponent iconWidgetbook() {
-  return WidgetbookComponent(
-    isInitiallyExpanded: false,
-    name: 'Icons',
-    useCases: [
-      WidgetbookUseCase(
-        name: 'All Icons',
-        builder: (context) {
-          Map<String, IconData> icons =
-              ((context.knobs.boolean(label: 'Rounded', initialValue: true)) ? iconsRounded : iconsSharp);
+Widget iconsUseCase(BuildContext context) {
+  Map<String, IconData> icons =
+      ((context.knobs.boolean(label: 'Rounded', initialValue: true)) ? iconsRounded : iconsSharp);
 
-          final Map<String, IconData> sortedIcons = Map.fromEntries(icons.entries.toList()
-            ..sort((a, b) {
-              final _a = (a.key.split('_')..removeLast()).join();
-              final _b = (b.key.split('_')..removeLast()).join();
-              return _a.compareTo(_b);
-            }));
+  final Map<String, IconData> sortedIcons = Map.fromEntries(icons.entries.toList()
+    ..sort((a, b) {
+      final _a = (a.key.split('_')..removeLast()).join();
+      final _b = (b.key.split('_')..removeLast()).join();
+      return _a.compareTo(_b);
+    }));
 
-          return WidgetbookTestWidget(
-            removeBody: true,
-            widget: SingleChildScrollView(
-              key: PageStorageKey(0),
-              child: Center(
-                child: Column(
-                  children: [
-                    Text('Tap icon to copy name to clipboard', style: ZetaTextStyles.titleMedium)
-                        .paddingAll(ZetaSpacing.l),
-                    Wrap(
-                      spacing: ZetaSpacing.l,
-                      runSpacing: ZetaSpacing.l,
-                      children: sortedIcons.entries.map(
-                        (e) {
-                          final nameArr = (e.key.split('_')..removeLast()).join(' ').capitalize();
-                          return Container(
-                            width: 100,
-                            height: 100,
-                            child: InkWell(
-                              borderRadius: ZetaRadius.rounded,
-                              hoverColor: Zeta.of(context).colors.surfaceHovered,
-                              onTap: () async {
-                                await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key));
-                              },
-                              child: Column(
-                                mainAxisAlignment: MainAxisAlignment.center,
-                                children: [Icon(e.value, size: 40), Text(nameArr, textAlign: TextAlign.center)],
-                              ),
-                            ),
-                          );
-                        },
-                      ).toList(),
+  return WidgetbookTestWidget(
+    removeBody: true,
+    widget: SingleChildScrollView(
+      key: PageStorageKey(0),
+      child: Center(
+        child: Column(
+          children: [
+            Text('Tap icon to copy name to clipboard', style: ZetaTextStyles.titleMedium).paddingAll(ZetaSpacing.l),
+            Wrap(
+              spacing: ZetaSpacing.l,
+              runSpacing: ZetaSpacing.l,
+              children: sortedIcons.entries.map(
+                (e) {
+                  final nameArr = (e.key.split('_')..removeLast()).join(' ').capitalize();
+                  return Container(
+                    width: 100,
+                    height: 100,
+                    child: InkWell(
+                      borderRadius: ZetaRadius.rounded,
+                      hoverColor: Zeta.of(context).colors.surfaceHovered,
+                      onTap: () async {
+                        await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key));
+                        ScaffoldMessenger.of(context).showMaterialBanner(
+                          ZetaSystemBanner(context: context, title: 'Icon name copied'),
+                        );
+                        await Future.delayed(Duration(seconds: 4));
+                        ScaffoldMessenger.of(context).clearMaterialBanners();
+                      },
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [Icon(e.value, size: 40), Text(nameArr, textAlign: TextAlign.center)],
+                      ),
                     ),
-                  ],
-                ),
-              ),
+                  );
+                },
+              ).toList(),
             ),
-          );
-        },
+          ],
+        ),
       ),
-    ],
+    ),
   );
 }
diff --git a/example/widgetbook/pages/components/accordion_widgetbook.dart b/example/widgetbook/pages/components/accordion_widgetbook.dart
index 88533e22..85cd8b92 100644
--- a/example/widgetbook/pages/components/accordion_widgetbook.dart
+++ b/example/widgetbook/pages/components/accordion_widgetbook.dart
@@ -4,36 +4,23 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-WidgetbookComponent accordionWidgetBook() {
-  return WidgetbookComponent(
-    isInitiallyExpanded: false,
-    name: 'Accordion',
-    useCases: [
-      WidgetbookUseCase(
-        name: 'Accordion',
-        builder: (context) {
-          return WidgetbookTestWidget(
-            widget: Padding(
-              padding: const EdgeInsets.all(20),
-              child: ZetaAccordion(
-                child: context.knobs.boolean(label: 'Disabled')
-                    ? null
-                    : Column(
-                        children: [
-                          ListTile(title: Text('Item One')),
-                          ListTile(title: Text('Item  two')),
-                          ListTile(title: Text('Item three')),
-                          ListTile(title: Text('Item four')),
-                        ],
-                      ),
-                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),
-              ),
-            ),
-          );
-        },
+Widget accordionUseCase(BuildContext context) => WidgetbookTestWidget(
+      widget: Padding(
+        padding: const EdgeInsets.all(20),
+        child: ZetaAccordion(
+          child: context.knobs.boolean(label: 'Disabled')
+              ? null
+              : Column(
+                  children: [
+                    ListTile(title: Text('Item One')),
+                    ListTile(title: Text('Item  two')),
+                    ListTile(title: Text('Item three')),
+                    ListTile(title: Text('Item four')),
+                  ],
+                ),
+          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),
+        ),
       ),
-    ],
-  );
-}
+    );
diff --git a/example/widgetbook/pages/components/avatar_widgetbook.dart b/example/widgetbook/pages/components/avatar_widgetbook.dart
index 87e41049..f533cf08 100644
--- a/example/widgetbook/pages/components/avatar_widgetbook.dart
+++ b/example/widgetbook/pages/components/avatar_widgetbook.dart
@@ -4,71 +4,23 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-WidgetbookComponent avatarWidgetBook() {
-  return WidgetbookComponent(
-    isInitiallyExpanded: false,
-    name: 'Avatar',
-    useCases: [
-      WidgetbookUseCase(
-        name: 'Image Avatar',
-        builder: (context) {
-          final Widget image = Image.asset('assets/Omer.jpg', fit: BoxFit.cover);
+Widget avatarUseCase(BuildContext context) {
+  final Widget image = Image.asset('assets/Omer.jpg', fit: BoxFit.cover);
 
-          return WidgetbookTestWidget(
-            widget: Column(
-              children: [
-                Padding(
-                  padding: const EdgeInsets.all(20),
-                  child: ZetaAvatar.image(
-                    image: context.knobs.boolean(label: 'Image') ? image : null,
-                    size: context.knobs.list(
-                      label: 'Size',
-                      options: ZetaAvatarSize.values,
-                      labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
-                    ),
-                    lowerBadge:
-                        context.knobs.boolean(label: 'Status Badge', initialValue: false) ? ZetaIndicator.icon() : null,
-                    borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: null),
-                    upperBadge: context.knobs.boolean(label: 'Notification Badge', initialValue: false)
-                        ? ZetaIndicator.notification()
-                        : null,
-                  ),
-                ),
-              ],
-            ),
-          );
-        },
+  return WidgetbookTestWidget(
+    widget: ZetaAvatar(
+      image: context.knobs.boolean(label: 'Image') ? image : null,
+      size: context.knobs.list(
+        label: 'Size',
+        options: ZetaAvatarSize.values,
+        labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
       ),
-      WidgetbookUseCase(
-        name: 'Initials Avatar',
-        builder: (context) {
-          return WidgetbookTestWidget(
-            widget: Column(
-              children: [
-                Padding(
-                  padding: const EdgeInsets.all(20),
-                  child: ZetaAvatar.initials(
-                    backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: null),
-                    initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AB'),
-                    size: context.knobs.list(
-                      label: 'Size',
-                      options: ZetaAvatarSize.values,
-                      labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
-                    ),
-                    lowerBadge: context.knobs.boolean(label: 'Status badge', initialValue: false)
-                        ? ZetaIndicator.notification()
-                        : null,
-                    borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: null),
-                    upperBadge: context.knobs.boolean(label: 'Notification badge', initialValue: false)
-                        ? ZetaIndicator.icon()
-                        : null,
-                  ),
-                ),
-              ],
-            ),
-          );
-        },
-      ),
-    ],
+      lowerBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false) ? ZetaIndicator.icon() : null,
+      borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: null),
+      upperBadge:
+          context.knobs.boolean(label: 'Notification Badge', initialValue: false) ? ZetaIndicator.notification() : null,
+      initials: context.knobs.stringOrNull(label: 'Initials', initialValue: null),
+      backgroundColor: context.knobs.colorOrNull(label: 'Background color'),
+    ),
   );
 }
diff --git a/example/widgetbook/pages/components/badges_widgetbook.dart b/example/widgetbook/pages/components/badges_widgetbook.dart
index a9026b1f..293cc5b5 100644
--- a/example/widgetbook/pages/components/badges_widgetbook.dart
+++ b/example/widgetbook/pages/components/badges_widgetbook.dart
@@ -4,202 +4,134 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-WidgetbookComponent badgeWidgetBook() {
-  return WidgetbookComponent(
-    isInitiallyExpanded: false,
-    name: 'Badges',
-    useCases: [
-      WidgetbookUseCase(
-        name: 'Status Label',
-        builder: (context) {
-          return WidgetbookTestWidget(
-            widget: Column(
-              children: [
-                Padding(
-                  padding: EdgeInsets.all(20),
-                  child: 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 '';
-                      },
-                    ),
-                  ),
-                ),
-              ],
-            ),
-          );
-        },
-      ),
-      WidgetbookUseCase(
-        name: 'Priority Pill',
-        builder: (context) => WidgetbookTestWidget(
-          widget: Column(
-            children: [
-              Padding(
-                padding: EdgeInsets.all(20),
-                child: ZetaPriorityPill(
-                  index: context.knobs.int.slider(label: 'Index'),
-                  priority: context.knobs.string(label: 'Priority', initialValue: 'Priority'),
-                  rounded: context.knobs.boolean(label: 'Rounded'),
-                ),
-              ),
-            ],
-          ),
+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,
         ),
-      ),
-      WidgetbookUseCase(
-        name: 'Badge',
-        builder: (context) => WidgetbookTestWidget(
-          widget: Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Padding(
-                padding: EdgeInsets.all(20),
-                child: ZetaBadge(
-                  label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-                  rounded: context.knobs.boolean(label: 'Rounded'),
-                  status: context.knobs.list(
-                    label: 'Status',
-                    options: ZetaWidgetStatus.values,
-                    labelBuilder: (value) => value.name.split('.').last.capitalize(),
-                  ),
-                ),
-              ),
-            ],
-          ),
+        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 '';
+          },
         ),
       ),
-      WidgetbookUseCase(
-        name: 'Indicators',
-        builder: (context) => WidgetbookTestWidget(
-          widget: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Padding(
-                padding: EdgeInsets.all(20),
-                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 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'),
+      ),
+    );
+Widget badgeUseCase(BuildContext context) => WidgetbookTestWidget(
+      widget: ZetaBadge(
+        label: context.knobs.string(label: 'Label', initialValue: 'Label'),
+        rounded: context.knobs.boolean(label: 'Rounded'),
+        status: context.knobs.list(
+          label: 'Status',
+          options: ZetaWidgetStatus.values,
+          labelBuilder: (value) => value.name.split('.').last.capitalize(),
         ),
       ),
-      WidgetbookUseCase(
-        name: 'Tags',
-        builder: (context) => WidgetbookTestWidget(
-          widget: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Padding(
-                padding: EdgeInsets.all(20),
-                child: ZetaTag(
-                  label: context.knobs.string(label: 'Label', initialValue: 'Tag'),
-                  rounded: context.knobs.boolean(label: 'Rounded'),
-                  direction: context.knobs.list(
-                    label: 'Direction',
-                    options: ZetaTagDirection.values,
-                    labelBuilder: (value) => value.name.split('.').last.capitalize(),
-                  ),
-                ),
-              )
+    );
+
+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'),
         ),
       ),
-      WidgetbookUseCase(
-        name: 'Workcloud Indicators',
-        builder: (context) => WidgetbookTestWidget(
-          widget: Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Padding(
-                    padding: EdgeInsets.all(20),
-                    child: 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 tagsUseCase(BuildContext context) => WidgetbookTestWidget(
+      widget: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          ZetaTag(
+            label: context.knobs.string(label: 'Label', initialValue: 'Tag'),
+            rounded: context.knobs.boolean(label: 'Rounded'),
+            direction: context.knobs.list(
+              label: 'Direction',
+              options: ZetaTagDirection.values,
+              labelBuilder: (value) => value.name.split('.').last.capitalize(),
+            ),
           ),
-        ),
+        ],
       ),
-    ],
-  );
-}
+    );
+
+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 '';
+            },
+          )),
+    );
diff --git a/example/widgetbook/pages/components/banner_widgetbook.dart b/example/widgetbook/pages/components/banner_widgetbook.dart
index 5f7a98c1..6192e4c1 100644
--- a/example/widgetbook/pages/components/banner_widgetbook.dart
+++ b/example/widgetbook/pages/components/banner_widgetbook.dart
@@ -4,113 +4,41 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-WidgetbookComponent bannerWidgetBook() {
-  return WidgetbookComponent(
-    isInitiallyExpanded: false,
-    name: 'Banners',
-    useCases: [
-      WidgetbookUseCase(
-        name: 'System Banner',
-        builder: (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) => 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,
             ),
-          ),
+          ],
         ),
       ),
-      WidgetbookUseCase(
-        name: 'In Page Banner',
-        builder: (context) => WidgetbookTestWidget(
-          widget: Padding(
-            padding: EdgeInsets.all(20),
-            child: Column(
-              children: [
-                ZetaInPageBanner(
-                  content: Text(
-                    context.knobs.string(
-                      label: 'content',
-                      initialValue:
-                          'Lorem ipsum dolor sit amet, conse ctetur  cididunt ut labore et do lore magna aliqua.',
-                    ),
-                  ),
-                  status: context.knobs.list(
-                    label: 'Severity',
-                    options: ZetaWidgetStatus.values,
-                    labelBuilder: (value) => value.name.split('.').last.capitalize(),
-                  ),
-                  onClose: context.knobs.boolean(label: 'Show Close icon') ? () {} : null,
-                  title: context.knobs.string(label: 'Title', initialValue: 'Title'),
-                  rounded: context.knobs.boolean(label: 'Rounded'),
-                  actions: () {
-                    final x = context.knobs.list(label: 'Show Buttons', options: [0, 1, 2]);
-
-                    if (x == 1) {
-                      return [
-                        ZetaButton(label: 'Button 1', onPressed: () {}),
-                      ];
-                    }
-                    if (x == 2) {
-                      return [
-                        ZetaButton(label: 'Button 1', onPressed: () {}),
-                        ZetaButton(label: 'Button 2', onPressed: () {})
-                      ];
-                    }
-                    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 '';
-                    },
-                  ),
-                )
-              ],
-            ),
-          ),
-        ),
-      ),
-    ],
-  );
-}
+    );
diff --git a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
index a305ebcf..85069247 100644
--- a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
+++ b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
@@ -4,38 +4,22 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-WidgetbookComponent bottomSheetWidgetBook() {
-  return WidgetbookComponent(
-    isInitiallyExpanded: false,
-    name: 'Bottom Sheet',
-    useCases: [
-      WidgetbookUseCase(
-        name: 'Content',
-        builder: (context) => WidgetbookTestWidget(
-          widget: Padding(
-            padding: const EdgeInsets.all(20),
-            child: _bottomSheet(context),
-          ),
-        ),
-      ),
-      WidgetbookUseCase(
-        name: 'Live',
-        builder: (context) {
-          final sheet = _bottomSheet(context);
-          return WidgetbookTestWidget(
-            widget: Padding(
-              padding: const EdgeInsets.all(20),
-              child: ElevatedButton(
-                child: Text('Open'),
-                onPressed: () {
-                  showModalBottomSheet(context: context, builder: (_) => sheet);
-                },
-              ),
-            ),
-          );
-        },
+Widget bottomSheetContentUseCase(BuildContext context) => WidgetbookTestWidget(
+      widget: Padding(
+        padding: const EdgeInsets.all(20),
+        child: _bottomSheet(context),
       ),
-    ],
+    );
+
+Widget bottomSheetLiveUseCase(BuildContext context) {
+  final sheet = _bottomSheet(context);
+  return WidgetbookTestWidget(
+    widget: ElevatedButton(
+      child: Text('Open'),
+      onPressed: () {
+        showModalBottomSheet(context: context, builder: (_) => sheet);
+      },
+    ),
   );
 }
 
diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart
index 22618d7c..8d0e6502 100644
--- a/example/widgetbook/pages/components/button_widgetbook.dart
+++ b/example/widgetbook/pages/components/button_widgetbook.dart
@@ -4,97 +4,60 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-WidgetbookComponent buttonWidgetBook() {
-  return WidgetbookComponent(
-    name: 'Button',
-    isInitiallyExpanded: false,
-    useCases: [
-      WidgetbookUseCase(
-        name: 'Button',
-        builder: (context) {
-          return WidgetbookTestWidget(
-            widget: Row(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Padding(
-                  padding: EdgeInsets.all(20),
-                  child: 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,
-                    size: context.knobs.list(
-                      label: 'Size',
-                      options: ZetaWidgetSize.values,
-                      labelBuilder: (value) => value.name.split('.').last.capitalize(),
-                    ),
-                    type: context.knobs.list(
-                      label: 'Type',
-                      options: ZetaButtonType.values,
-                      labelBuilder: (value) => value.name.split('.').last.capitalize(),
-                    ),
-                  ),
-                ),
-              ],
-            ),
-          );
-        },
-      ),
-      WidgetbookUseCase(
-        name: 'Icon Button',
-        builder: (context) {
-          return WidgetbookTestWidget(
-            widget: Row(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Padding(
-                  padding: EdgeInsets.all(20),
-                  child: 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 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,
+        size: context.knobs.list(
+          label: 'Size',
+          options: ZetaWidgetSize.values,
+          labelBuilder: (value) => value.name.split('.').last.capitalize(),
+        ),
+        type: context.knobs.list(
+          label: 'Type',
+          options: ZetaButtonType.values,
+          labelBuilder: (value) => value.name.split('.').last.capitalize(),
+        ),
       ),
-      WidgetbookUseCase(
-        name: 'Floating Action Button',
-        builder: (context) => WidgetbookTestWidget(
-          widget: Padding(padding: EdgeInsets.all(20), child: FabWidget(context)),
+    );
+
+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 floatingActionButtonUseCase(BuildContext context) => WidgetbookTestWidget(
+      widget: Padding(padding: EdgeInsets.all(20), child: FabWidget(context)),
+    );
 
 class FabWidget extends StatefulWidget {
   const FabWidget(this.c);
diff --git a/example/widgetbook/pages/components/checkbox_widgetbook.dart b/example/widgetbook/pages/components/checkbox_widgetbook.dart
index eeef1945..47de4701 100644
--- a/example/widgetbook/pages/components/checkbox_widgetbook.dart
+++ b/example/widgetbook/pages/components/checkbox_widgetbook.dart
@@ -4,59 +4,9 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-WidgetbookComponent checkboxWidgetBook() {
-  return WidgetbookComponent(
-    isInitiallyExpanded: false,
-    name: 'Checkbox',
-    useCases: [
-      WidgetbookUseCase(
-        name: 'Checked',
-        builder: (context) {
-          return WidgetbookTestWidget(
-            widget: Column(
-              children: [
-                Padding(
-                  padding: EdgeInsets.only(top: 10),
-                  child: _CheckState(context: context, initialState: true),
-                ),
-              ],
-            ),
-          );
-        },
-      ),
-      WidgetbookUseCase(
-        name: 'Indeterminate',
-        builder: (context) {
-          return WidgetbookTestWidget(
-            widget: Column(
-              children: [
-                Padding(
-                  padding: EdgeInsets.only(top: 10),
-                  child: _CheckState(context: context, initialState: null),
-                ),
-              ],
-            ),
-          );
-        },
-      ),
-      WidgetbookUseCase(
-        name: 'Unchecked',
-        builder: (context) {
-          return WidgetbookTestWidget(
-            widget: Column(
-              children: [
-                Padding(
-                  padding: EdgeInsets.only(top: 10),
-                  child: _CheckState(context: context, initialState: false),
-                ),
-              ],
-            ),
-          );
-        },
-      ),
-    ],
-  );
-}
+Widget checkboxUseCase(BuildContext context) => WidgetbookTestWidget(
+      widget: _CheckState(context: context, initialState: true),
+    );
 
 class _CheckState extends StatefulWidget {
   final BuildContext context;
@@ -81,16 +31,12 @@ class __CheckStateState extends State<_CheckState> {
     dynamic onChanged =
         context.knobs.boolean(label: 'Enabled', initialValue: true) ? (b2) => setState(() => b = b2) : null;
 
-    return Column(
-      children: [
-        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'),
-        ),
-      ],
+    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'),
     );
   }
 }
diff --git a/example/widgetbook/pages/components/chip_widgetbook.dart b/example/widgetbook/pages/components/chip_widgetbook.dart
index e4f1a9f4..f6cae53c 100644
--- a/example/widgetbook/pages/components/chip_widgetbook.dart
+++ b/example/widgetbook/pages/components/chip_widgetbook.dart
@@ -4,89 +4,51 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-WidgetbookComponent chipWidgetBook() {
-  return WidgetbookComponent(
-    isInitiallyExpanded: false,
-    name: 'Chip',
-    useCases: [
-      WidgetbookUseCase(
-        name: 'Input Chip',
-        builder: (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 '';
-            },
-          );
-          return WidgetbookTestWidget(
-            widget: Padding(
-              padding: const EdgeInsets.all(20),
-              child: Row(
-                mainAxisSize: MainAxisSize.min,
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  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'),
-                    trailing: trailing != null ? Icon(trailing) : null,
-                  ),
-                ],
-              ),
-            ),
-          );
-        },
-      ),
-      WidgetbookUseCase(
-        name: 'Filter Chip',
-        builder: (context) => WidgetbookTestWidget(
-          widget: Padding(
-            padding: const EdgeInsets.all(20),
-            child: Column(
-              children: [
-                ZetaFilterChip(
-                  label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-                  rounded: context.knobs.boolean(label: 'Rounded'),
-                  selected: context.knobs.boolean(label: 'Selected'),
-                )
-              ],
-            ),
-          ),
-        ),
-      ),
-      WidgetbookUseCase(
-        name: 'Assist Chip',
-        builder: (context) => WidgetbookTestWidget(
-          widget: Padding(
-            padding: const EdgeInsets.all(20),
-            child: Column(
-              children: [
-                ZetaAssistChip(
-                  label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-                  rounded: context.knobs.boolean(label: 'Rounded'),
-                  leading: context.knobs.boolean(label: 'Icon') ? Icon(ZetaIcons.star_round) : null,
-                )
-              ],
-            ),
-          ),
-        ),
-      ),
+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 '';
+    },
+  );
+  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'),
+      trailing: trailing != null ? Icon(trailing) : null,
+    ),
   );
 }
+
+Widget filterChipUseCase(BuildContext context) => WidgetbookTestWidget(
+      widget: ZetaFilterChip(
+        label: context.knobs.string(label: 'Label', initialValue: 'Label'),
+        rounded: context.knobs.boolean(label: 'Rounded'),
+        selected: context.knobs.boolean(label: 'Selected'),
+      ),
+    );
+
+Widget assistChipUseCase(BuildContext context) => WidgetbookTestWidget(
+      widget: ZetaAssistChip(
+        label: context.knobs.string(label: 'Label', initialValue: 'Label'),
+        rounded: context.knobs.boolean(label: 'Rounded'),
+        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 c0460580..55ac5c33 100644
--- a/example/widgetbook/pages/components/dial_pad_widgetbook.dart
+++ b/example/widgetbook/pages/components/dial_pad_widgetbook.dart
@@ -4,42 +4,26 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-WidgetbookComponent dialPadWidgetbook() {
-  return WidgetbookComponent(
-    isInitiallyExpanded: false,
-    name: 'Dial Pad',
-    useCases: [
-      WidgetbookUseCase(
-        name: 'Dial Pad',
-        builder: (context) {
-          return WidgetbookTestWidget(
-            widget: Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                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),
-                ),
-              ],
-            ).paddingAll(ZetaSpacing.l),
-          );
-        },
-      ),
-    ],
-  );
-}
+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),
+          )),
+    );
diff --git a/example/widgetbook/pages/components/in_page_banner_widgetbook.dart b/example/widgetbook/pages/components/in_page_banner_widgetbook.dart
new file mode 100644
index 00000000..16938b86
--- /dev/null
+++ b/example/widgetbook/pages/components/in_page_banner_widgetbook.dart
@@ -0,0 +1,56 @@
+import 'package:flutter/widgets.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget inPageBannerUseCase(BuildContext context) => WidgetbookTestWidget(
+      widget: Padding(
+        padding: EdgeInsets.all(20),
+        child: ZetaInPageBanner(
+          content: Text(
+            context.knobs.string(
+              label: 'content',
+              initialValue: 'Lorem ipsum dolor sit amet, conse ctetur  cididunt ut labore et do lore magna aliqua.',
+            ),
+          ),
+          status: context.knobs.list(
+            label: 'Severity',
+            options: ZetaWidgetStatus.values,
+            labelBuilder: (value) => value.name.split('.').last.capitalize(),
+          ),
+          onClose: context.knobs.boolean(label: 'Show Close icon') ? () {} : null,
+          title: context.knobs.string(label: 'Title', initialValue: 'Title'),
+          rounded: context.knobs.boolean(label: 'Rounded'),
+          actions: () {
+            final x = context.knobs.list(label: 'Show Buttons', options: [0, 1, 2]);
+
+            if (x == 1) {
+              return [
+                ZetaButton(label: 'Button 1', onPressed: () {}),
+              ];
+            }
+            if (x == 2) {
+              return [ZetaButton(label: 'Button 1', onPressed: () {}), ZetaButton(label: 'Button 2', onPressed: () {})];
+            }
+            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 '';
+            },
+          ),
+        ),
+      ),
+    );
diff --git a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart
index ce03347b..8b73cc40 100644
--- a/example/widgetbook/pages/components/navigation_bar_widgetbook.dart
+++ b/example/widgetbook/pages/components/navigation_bar_widgetbook.dart
@@ -16,23 +16,16 @@ Widget navigationBarUseCase(BuildContext context) {
   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 Row(
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: [
-        Expanded(
-          child: WidgetbookTestWidget(
-            screenSize: Size(width, 260),
-            widget: ZetaNavigationBar(
-              items: items,
-              action: showButton ? ZetaButton.primary(label: 'Button', onPressed: () {}) : null,
-              onTap: (i) => setState(() => currIndex = i),
-              currentIndex: currIndex,
-              splitItems: showSplit,
-              dividerIndex: dividerIndex,
-            ),
-          ),
-        ),
-      ],
+    return WidgetbookTestWidget(
+      screenSize: Size(width, 260),
+      widget: ZetaNavigationBar(
+        items: items,
+        action: showButton ? ZetaButton.primary(label: 'Button', onPressed: () {}) : null,
+        onTap: (i) => setState(() => currIndex = i),
+        currentIndex: currIndex,
+        splitItems: showSplit,
+        dividerIndex: dividerIndex,
+      ),
     );
   });
 }
diff --git a/example/widgetbook/pages/components/password_input_widgetbook.dart b/example/widgetbook/pages/components/password_input_widgetbook.dart
index 7428bd19..d3a56b05 100644
--- a/example/widgetbook/pages/components/password_input_widgetbook.dart
+++ b/example/widgetbook/pages/components/password_input_widgetbook.dart
@@ -4,20 +4,7 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
 
-WidgetbookComponent passwordInputWidgetBook() {
-  return WidgetbookComponent(
-    name: 'Password Input',
-    isInitiallyExpanded: false,
-    useCases: [
-      WidgetbookUseCase(
-        name: 'Password Input',
-        builder: (context) {
-          return _Password();
-        },
-      ),
-    ],
-  );
-}
+Widget passwordInputUseCase(BuildContext context) => _Password();
 
 class _Password extends StatefulWidget {
   const _Password();
@@ -37,48 +24,45 @@ class _PasswordState extends State<_Password> {
     return Form(
       key: _formKey,
       child: WidgetbookTestWidget(
-        widget: Padding(
-          padding: EdgeInsets.all(ZetaSpacing.x5),
-          child: Column(
-            children: [
-              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,
-                  ),
-                  footerText: context.knobs.string(label: 'Footer Text'),
-                  hintText: context.knobs.string(label: 'Hint text'),
-                  label: context.knobs.string(label: 'Label'),
-                  onChanged: (_) => _formKey.currentState?.validate(),
-                  validator: (_) => enableValidation ? validationString : null,
-                  controller: _passwordController,
+        widget: Column(
+          children: [
+            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,
                 ),
+                footerText: context.knobs.string(label: 'Footer Text'),
+                hintText: context.knobs.string(label: 'Hint text'),
+                label: context.knobs.string(label: 'Label'),
+                onChanged: (_) => _formKey.currentState?.validate(),
+                validator: (_) => enableValidation ? validationString : null,
+                controller: _passwordController,
               ),
-            ],
-          ),
+            ),
+          ],
         ),
       ),
     );
diff --git a/example/widgetbook/pages/components/progress_widgetbook.dart b/example/widgetbook/pages/components/progress_widgetbook.dart
new file mode 100644
index 00000000..06a007c5
--- /dev/null
+++ b/example/widgetbook/pages/components/progress_widgetbook.dart
@@ -0,0 +1,21 @@
+import 'package:flutter/widgets.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.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(),
+            type: context.knobs
+                .list(label: 'Type', options: ZetaProgressBarType.values, labelBuilder: (value) => value.name),
+            isThin: context.knobs.boolean(label: 'Thin'),
+            rounded: context.knobs.boolean(label: 'Rounded'),
+            label: context.knobs.stringOrNull(label: 'Label'),
+          ),
+        );
+      }),
+    );
diff --git a/example/widgetbook/pages/theme/color_widgetbook.dart b/example/widgetbook/pages/theme/color_widgetbook.dart
index 5afd0cfa..05b08a90 100644
--- a/example/widgetbook/pages/theme/color_widgetbook.dart
+++ b/example/widgetbook/pages/theme/color_widgetbook.dart
@@ -1,29 +1,11 @@
 import 'package:flutter/material.dart';
-import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_example/pages/theme/color_example.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-WidgetbookComponent colorWidgetBook() {
-  return WidgetbookComponent(
-    name: 'Colors',
-    useCases: [
-      WidgetbookUseCase(
-        name: 'Colors',
-        builder: (BuildContext context) {
-          return ZetaProvider(
-            initialThemeMode: ThemeMode.light,
-            builder: (_, __, ___) => ColorBody(),
-          );
-        },
-      ),
-    ],
-  );
-}
+Widget colorUseCase(BuildContext context) => ColorBody();
 
 class ColorBody extends StatelessWidget {
-  const ColorBody({
-    super.key,
-  });
+  const ColorBody({super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -67,7 +49,6 @@ class ColorBody extends StatelessWidget {
         'surfaceSelectedHovered': colors.surfaceSelectedHovered,
         'surfaceSelected': colors.surfaceSelected,
       };
-
       final Map<String, Color> alerts = {
         'positive': colors.positive,
         'negative': colors.negative,
@@ -83,6 +64,7 @@ class ColorBody extends StatelessWidget {
         child: Container(
           padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.l),
           child: SingleChildScrollView(
+            key: PageStorageKey(0),
             child: Column(
               children: [
                 const SizedBox(height: ZetaSpacing.l),
diff --git a/example/widgetbook/pages/theme/radius_widgetbook.dart b/example/widgetbook/pages/theme/radius_widgetbook.dart
index 6e533ca7..f35a62ad 100644
--- a/example/widgetbook/pages/theme/radius_widgetbook.dart
+++ b/example/widgetbook/pages/theme/radius_widgetbook.dart
@@ -3,57 +3,47 @@ import 'package:widgetbook/widgetbook.dart';
 
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-WidgetbookComponent radiusWidgetbook() {
-  return WidgetbookComponent(
-    name: 'Radius',
-    useCases: [
-      WidgetbookUseCase(
-        name: 'Radius',
-        builder: (context) {
-          final rad = context.knobs.list(
-            label: 'Radius',
-            options: radii,
-            labelBuilder: (value) => value.radiusString,
-          );
-          final colors = Zeta.of(context).colors;
-          return SingleChildScrollView(
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                Container(
-                  width: 250,
-                  height: 250,
-                  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,
-                        ),
-                      ),
-                    ),
-                  ),
+Widget radiusUseCase(BuildContext context) {
+  final rad = context.knobs.list(
+    label: 'Radius',
+    options: radii,
+    labelBuilder: (value) => value.radiusString,
+  );
+  final colors = Zeta.of(context).colors;
+  return SingleChildScrollView(
+    child: Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        Container(
+          width: 250,
+          height: 250,
+          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,
                 ),
-              ],
+              ),
             ),
-          );
-        },
-      ),
-    ],
+          ),
+        ),
+      ],
+    ),
   );
 }
 
diff --git a/example/widgetbook/pages/theme/spacing_widgetbook.dart b/example/widgetbook/pages/theme/spacing_widgetbook.dart
index 53a08235..02c01ead 100644
--- a/example/widgetbook/pages/theme/spacing_widgetbook.dart
+++ b/example/widgetbook/pages/theme/spacing_widgetbook.dart
@@ -1,42 +1,23 @@
 import 'package:flutter/material.dart';
 import 'package:path_drawing/path_drawing.dart';
-import 'package:widgetbook/widgetbook.dart';
 
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-WidgetbookComponent spacingWidgetBook() {
-  return WidgetbookComponent(
-    name: 'Spacing',
-    useCases: [
-      WidgetbookUseCase(
-        name: 'Named spaces',
-        builder: (context) => SingleChildScrollView(
-          child: Row(
-            children: [
-              Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: namedSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(),
-              )
-            ],
+Widget spacingUseCase(BuildContext context) => SingleChildScrollView(
+      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(),
+          )
+        ],
       ),
-      WidgetbookUseCase(
-        name: 'Value spaces',
-        builder: (context) => SingleChildScrollView(
-          child: Row(
-            children: [
-              Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: valueSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(),
-              )
-            ],
-          ),
-        ),
-      ),
-    ],
-  );
-}
+    );
 
 Map<String, double> namedSpacings = {
   'xxs': ZetaSpacing.xxs,
diff --git a/example/widgetbook/pages/theme/typography_widgetbook.dart b/example/widgetbook/pages/theme/typography_widgetbook.dart
index e2c281c1..33d3b184 100644
--- a/example/widgetbook/pages/theme/typography_widgetbook.dart
+++ b/example/widgetbook/pages/theme/typography_widgetbook.dart
@@ -3,69 +3,37 @@ import 'package:widgetbook/widgetbook.dart';
 
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-WidgetbookComponent textWidgetBook() {
-  final Map<String, TextStyle> allTypes = {
-    '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 WidgetbookComponent(
-    name: 'Typography',
-    useCases: [
-      WidgetbookUseCase(
-        name: 'Individual text styles',
-        builder: (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,
-              ),
-        ),
-      ),
-      WidgetbookUseCase(
-          name: 'All text styles',
-          builder: (context) => SingleChildScrollView(
-                scrollDirection: Axis.vertical,
-                child: Row(
-                  children: [
-                    Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: allTypes.keys.map(
-                          (e) {
-                            return Text(
-                              e,
-                              style: allTypes[e]?.apply(
-                                color: Zeta.of(context).colors.textDefault,
-                                fontStyle: FontStyle.normal,
-                                decoration: TextDecoration.none,
-                              ),
-                            ).paddingAll(ZetaSpacing.b);
-                          },
-                        ).toList()),
-                  ],
-                ),
-              )),
-    ],
-  );
-}
+const Map<String, TextStyle> allTypes = {
+  '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,
+};
+
+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,
+          ),
+    );
diff --git a/example/widgetbook/test/test_components.dart b/example/widgetbook/test/test_components.dart
index 532d222d..5087588e 100644
--- a/example/widgetbook/test/test_components.dart
+++ b/example/widgetbook/test/test_components.dart
@@ -26,7 +26,7 @@ class WidgetbookTestWidget extends StatelessWidget {
                 height: size.height,
                 child: MediaQuery(
                   data: MediaQueryData(size: Size(size.width, size.height)),
-                  child: SingleChildScrollView(child: widget),
+                  child: SingleChildScrollView(child: Center(child: widget)),
                 ),
               ),
             ),
diff --git a/example/widgetbook/widgetbook.dart b/example/widgetbook/widgetbook.dart
deleted file mode 100644
index 6fc36259..00000000
--- a/example/widgetbook/widgetbook.dart
+++ /dev/null
@@ -1,130 +0,0 @@
-import 'package:flutter/material.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';
-import 'pages/components/avatar_widgetbook.dart';
-import 'pages/components/badges_widgetbook.dart';
-import 'pages/components/bottom_sheet_widgetbook.dart';
-import 'pages/components/button_widgetbook.dart';
-import 'pages/components/checkbox_widgetbook.dart';
-import 'pages/components/dial_pad_widgetbook.dart';
-import 'pages/components/navigation_bar_widgetbook.dart';
-import 'pages/theme/color_widgetbook.dart';
-import 'pages/components/banner_widgetbook.dart';
-import 'pages/components/chip_widgetbook.dart';
-import 'pages/components/password_input_widgetbook.dart';
-import 'pages/theme/radius_widgetbook.dart';
-import 'pages/theme/spacing_widgetbook.dart';
-import 'pages/theme/typography_widgetbook.dart';
-import 'utils/zebra.dart';
-
-class HotReload extends StatelessWidget {
-  const HotReload({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Widgetbook(
-      appBuilder: (context, child) => child,
-      directories: [
-        WidgetbookCategory(
-          name: 'Components',
-          isInitiallyExpanded: false,
-          children: [
-            badgeWidgetBook(),
-            avatarWidgetBook(),
-            checkboxWidgetBook(),
-            buttonWidgetBook(),
-            bannerWidgetBook(),
-            accordionWidgetBook(),
-            chipWidgetBook(),
-            passwordInputWidgetBook(),
-            bottomSheetWidgetBook(),
-            dialPadWidgetbook(),
-            WidgetbookUseCase(name: 'Navigation Bar', builder: (context) => navigationBarUseCase(context))
-          ]..sort((a, b) => a.name.compareTo(b.name)),
-        ),
-        WidgetbookCategory(
-          name: 'Theme',
-          isInitiallyExpanded: false,
-          children: [textWidgetBook(), colorWidgetBook(), spacingWidgetBook(), radiusWidgetbook()]
-            ..sort((a, b) => a.name.compareTo(b.name)),
-        ),
-        WidgetbookCategory(
-          name: 'Assets',
-          isInitiallyExpanded: false,
-          children: [iconWidgetbook()]..sort((a, b) => a.name.compareTo(b.name)),
-        ),
-      ],
-      addons: [
-        DeviceFrameAddon(
-          devices: [
-            Devices.windows.wideMonitor,
-            Devices.macOS.wideMonitor,
-            Devices.ios.iPad,
-            Devices.ios.iPhone13,
-            Zebra.ec30,
-            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.background,
-                        colorScheme: light,
-                        textTheme: zetaTextTheme,
-                        brightness: Brightness.light,
-                      ),
-                      darkTheme: ThemeData(
-                        useMaterial3: true,
-                        scaffoldBackgroundColor: dark.background,
-                        colorScheme: dark,
-                        textTheme: zetaTextTheme,
-                        brightness: Brightness.dark,
-                      ),
-                      builder: (context, child) {
-                        return ColoredBox(
-                          color: Zeta.of(context).colors.surfacePrimary,
-                          child: child,
-                        );
-                      },
-                      home: child,
-                    );
-                  },
-                );
-              },
-            );
-          },
-        ),
-      ],
-    );
-  }
-}
-
-class _Theme {
-  final bool isDark;
-  final bool isAAA;
-
-  _Theme({required this.isDark, required this.isAAA});
-}
diff --git a/lib/src/components/progress/progress_bar.dart b/lib/src/components/progress/progress_bar.dart
index 2e8ac9da..d6e91502 100644
--- a/lib/src/components/progress/progress_bar.dart
+++ b/lib/src/components/progress/progress_bar.dart
@@ -3,12 +3,12 @@ import 'package:flutter/material.dart';
 import '../../../zeta_flutter.dart';
 import 'progress.dart';
 
-/// Enum for types of progress bar
-enum ZetaBarType {
+/// Enum for types of progress bar.
+enum ZetaProgressBarType {
   /// Standard bar type.
   standard,
 
-  /// Indeterminate bar type. positions randomly
+  /// Indeterminate bar type. positions randomly.
   indeterminate,
 
   /// Buffering bar type. Has buffering at end.
@@ -16,27 +16,27 @@ enum ZetaBarType {
 }
 
 /// Linear progress bar.
-/// Uses progress percentage value to fill bar
+///
+/// Uses progress percentage value to fill bar.
 class ZetaProgressBar extends ZetaProgress {
-  ///Constructor for [ZetaProgressBar]
-
+  ///Constructor for [ZetaProgressBar].
   const ZetaProgressBar({
     super.key,
     required super.progress,
-    required this.rounded,
     required this.type,
-    required this.isThin,
+    this.rounded = true,
+    this.isThin = false,
     this.label,
   });
 
-  /// Constructs a standard progress bar
+  /// Constructs a standard progress bar.
   const ZetaProgressBar.standard({
     super.key,
     required super.progress,
     this.rounded = true,
     this.isThin = false,
     this.label,
-  }) : type = ZetaBarType.standard;
+  }) : type = ZetaProgressBarType.standard;
 
   /// Constructs buffering example
   const ZetaProgressBar.buffering({
@@ -45,27 +45,34 @@ class ZetaProgressBar extends ZetaProgress {
     this.rounded = true,
     this.isThin = false,
     this.label,
-  }) : type = ZetaBarType.buffering;
+  }) : type = ZetaProgressBarType.buffering;
 
-  /// Constructs indeterminate example
+  /// Constructs indeterminate progress bar.
   const ZetaProgressBar.indeterminate({
     super.key,
     required super.progress,
     this.rounded = true,
     this.isThin = false,
     this.label,
-  }) : type = ZetaBarType.indeterminate;
+  }) : type = ZetaProgressBarType.indeterminate;
 
-  /// Is progress bar rounded or sharp.
+  /// {@macro zeta-component-rounded}
   final bool rounded;
 
   /// Type of the progress bar.
-  final ZetaBarType type;
+  final ZetaProgressBarType type;
 
   /// Is Progress bar thin or thick.
+  ///
+  /// Defaults to `false`.
   final bool isThin;
 
-  ///Optional label
+  /// Optional label.
+  ///
+  /// If null, default label will show percentage.
+  ///
+  /// Currently Zeta does not have translation support, so there are no built in strings
+  // TODO(UX-1003): Investigate i18n.
   final String? label;
 
   @override
@@ -76,7 +83,7 @@ class ZetaProgressBar extends ZetaProgress {
     super.debugFillProperties(properties);
     properties
       ..add(DiagnosticsProperty<bool>('rounded', rounded))
-      ..add(EnumProperty<ZetaBarType>('type', type))
+      ..add(EnumProperty<ZetaProgressBarType>('type', type))
       ..add(StringProperty('label', label))
       ..add(DiagnosticsProperty<bool>('isThin', isThin));
   }
@@ -85,15 +92,21 @@ class ZetaProgressBar extends ZetaProgress {
 class _ZetaProgressBarState extends ZetaProgressState<ZetaProgressBar> {
   @override
   Widget build(BuildContext context) {
+    final colors = Zeta.of(context).colors;
     return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        if (widget.label != null)
-          Text(
-            widget.label!,
-            textAlign: TextAlign.start,
-          ),
+        Text(
+          widget.label ??
+              (widget.label == null && widget.type != ZetaProgressBarType.indeterminate
+                  ? '${(animation.value * 100).toInt()}%'
+                  : ''),
+          style: ZetaTextStyles.titleMedium,
+          textAlign: TextAlign.start,
+        ).paddingBottom(ZetaSpacing.x4),
         Row(
           crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
           children: [
             Expanded(
               child: AnimatedContainer(
@@ -101,14 +114,13 @@ class _ZetaProgressBarState extends ZetaProgressState<ZetaProgressBar> {
                 height: _weight,
                 child: LinearProgressIndicator(
                   borderRadius: _border,
-                  value: widget.type == ZetaBarType.indeterminate ? null : animation.value,
-                  backgroundColor: widget.type == ZetaBarType.buffering
-                      ? Zeta.of(context).colors.surfaceDisabled
-                      : Colors.transparent,
+                  value: widget.type == ZetaProgressBarType.indeterminate ? null : animation.value,
+                  backgroundColor:
+                      widget.type == ZetaProgressBarType.buffering ? colors.surfaceDisabled : Colors.transparent,
                 ),
               ),
             ),
-            _extraWidgets(),
+            if (widget.type == ZetaProgressBarType.buffering) bufferingWidget(colors),
           ],
         ),
       ],
@@ -119,28 +131,21 @@ class _ZetaProgressBarState extends ZetaProgressState<ZetaProgressBar> {
   BorderRadius get _border => widget.rounded ? ZetaRadius.rounded : ZetaRadius.none;
 
   /// Returns thickness of progress bar based on its weight.
-  double get _weight => widget.isThin ? 8 : 16;
+  double get _weight => widget.isThin ? ZetaSpacing.x2 : ZetaSpacing.x4;
 
-  Widget _extraWidgets() {
-    final Iterable<List<Widget>> extraList = List.filled(3, false).map(
+  Widget bufferingWidget(ZetaColors colors) {
+    final Iterable<List<Widget>> extraList = List.generate(
+      3,
       (e) => [
-        const SizedBox(
-          width: 16,
-        ),
+        const SizedBox(width: ZetaSpacing.x4),
         Container(
           width: _weight,
           height: _weight,
-          decoration: const BoxDecoration(
-            color: Color.fromRGBO(224, 227, 233, 1),
-            borderRadius: ZetaRadius.rounded,
-          ),
+          decoration: BoxDecoration(color: colors.surfaceDisabled, borderRadius: ZetaRadius.rounded),
         ),
       ],
     );
 
-    final Widget extraWidgets = Row(
-      children: widget.type == ZetaBarType.buffering ? extraList.expand((list) => list).toList() : [],
-    );
-    return extraWidgets;
+    return Row(children: extraList.expand((list) => list).toList());
   }
 }
diff --git a/pubspec.yaml b/pubspec.yaml
index fe9400fb..310e0133 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -17,8 +17,8 @@ platforms:
   linux:
 
 environment:
-  sdk: ">=3.0.1 <4.0.0"
-  flutter: ">=3.7.0"
+  sdk: ">=3.2.0 <4.0.0"
+  flutter: ">=3.16.0"
 
 dependencies:
   flutter: