diff --git a/example/widgetbook/pages/components/avatar_widgetbook.dart b/example/widgetbook/pages/components/avatar_widgetbook.dart
index fb07fec6..f533cf08 100644
--- a/example/widgetbook/pages/components/avatar_widgetbook.dart
+++ b/example/widgetbook/pages/components/avatar_widgetbook.dart
@@ -8,27 +8,19 @@ 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: 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,
-            initials: context.knobs.stringOrNull(label: 'Initials', initialValue: null),
-            backgroundColor: context.knobs.colorOrNull(label: 'Background color'),
-          ),
-        ),
-      ],
+    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(),
+      ),
+      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 7c6e60ae..293cc5b5 100644
--- a/example/widgetbook/pages/components/badges_widgetbook.dart
+++ b/example/widgetbook/pages/components/badges_widgetbook.dart
@@ -5,177 +5,133 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 import '../../test/test_components.dart';
 
 Widget statusLabelUseCase(BuildContext context) => 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 '';
-                },
-              ),
-            ),
-          ),
-        ],
+      widget: ZetaStatusLabel(
+        label: context.knobs.string(label: 'Label', initialValue: 'Label'),
+        rounded: context.knobs.boolean(label: 'Rounded'),
+        status: context.knobs.list(
+          label: 'Status',
+          labelBuilder: (value) => value.name.split('.').last.capitalize(),
+          options: ZetaWidgetStatus.values,
+        ),
+        customIcon: context.knobs.list(
+          label: 'Icon',
+          options: [
+            ZetaIcons.star_half_round,
+            ZetaIcons.add_alert_round,
+            ZetaIcons.add_box_round,
+            ZetaIcons.barcode_round,
+          ],
+          labelBuilder: (value) {
+            if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
+            if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
+            if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
+            if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
+            return '';
+          },
+        ),
       ),
     );
 
 Widget priorityPillUseCase(BuildContext 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: 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: 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(),
-              ),
-            ),
-          ),
-        ],
+      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(),
+        ),
       ),
     );
 
 Widget indicatorsUseCase(BuildContext 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: Center(
+        child: ZetaIndicator(
+          type: context.knobs.list(
+            label: 'Type',
+            options: ZetaIndicatorType.values,
+            labelBuilder: (value) => value.name.split('.').last.capitalize(),
           ),
-        ],
+          icon: context.knobs.list(
+            label: 'Icon',
+            options: [
+              Icon(ZetaIcons.star_half_round),
+              Icon(ZetaIcons.add_alert_round),
+              Icon(ZetaIcons.add_box_round),
+              Icon(ZetaIcons.barcode_round),
+            ],
+            labelBuilder: (value) {
+              if (value?.icon == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
+              if (value?.icon == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
+              if (value?.icon == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
+              if (value?.icon == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
+              return '';
+            },
+          ),
+          inverse: context.knobs.boolean(label: 'Inverse Border'),
+          size: context.knobs.list(
+            label: 'Size',
+            labelBuilder: (value) => value.name.split('.').last.capitalize(),
+            options: ZetaWidgetSize.values,
+          ),
+          value: context.knobs.int.slider(label: 'Value'),
+        ),
       ),
     );
 
 Widget tagsUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: Column(
+      widget: Row(
         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(),
-              ),
+          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: 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: 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/bottom_sheet_widgetbook.dart b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
index 8f6e4c96..85069247 100644
--- a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
+++ b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart
@@ -10,17 +10,15 @@ Widget bottomSheetContentUseCase(BuildContext context) => WidgetbookTestWidget(
         child: _bottomSheet(context),
       ),
     );
+
 Widget bottomSheetLiveUseCase(BuildContext 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: 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 51aab986..8d0e6502 100644
--- a/example/widgetbook/pages/components/button_widgetbook.dart
+++ b/example/widgetbook/pages/components/button_widgetbook.dart
@@ -5,71 +5,53 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 import '../../test/test_components.dart';
 
 Widget buttonUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: Row(
-        mainAxisSize: MainAxisSize.min,
-        mainAxisAlignment: MainAxisAlignment.center,
-        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(),
-              ),
-            ),
-          ),
-        ],
+      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(),
+        ),
       ),
     );
 
 Widget iconButtonUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: Row(
-        mainAxisSize: MainAxisSize.min,
-        mainAxisAlignment: MainAxisAlignment.center,
-        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: 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(),
+        ),
       ),
     );
 
diff --git a/example/widgetbook/pages/components/checkbox_widgetbook.dart b/example/widgetbook/pages/components/checkbox_widgetbook.dart
index 0ca30b06..47de4701 100644
--- a/example/widgetbook/pages/components/checkbox_widgetbook.dart
+++ b/example/widgetbook/pages/components/checkbox_widgetbook.dart
@@ -5,14 +5,7 @@ import 'package:zeta_flutter/zeta_flutter.dart';
 import '../../test/test_components.dart';
 
 Widget checkboxUseCase(BuildContext context) => WidgetbookTestWidget(
-      widget: Column(
-        children: [
-          Padding(
-            padding: EdgeInsets.only(top: 10),
-            child: _CheckState(context: context, initialState: true),
-          ),
-        ],
-      ),
+      widget: _CheckState(context: context, initialState: true),
     );
 
 class _CheckState extends StatefulWidget {
@@ -38,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 95c548fe..f6cae53c 100644
--- a/example/widgetbook/pages/components/chip_widgetbook.dart
+++ b/example/widgetbook/pages/components/chip_widgetbook.dart
@@ -23,54 +23,32 @@ Widget inputChipUseCase(BuildContext context) {
     },
   );
   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,
-          ),
-        ],
-      ),
+    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: 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'),
-            )
-          ],
-        ),
+      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: 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: 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 1f1de3ea..55ac5c33 100644
--- a/example/widgetbook/pages/components/dial_pad_widgetbook.dart
+++ b/example/widgetbook/pages/components/dial_pad_widgetbook.dart
@@ -6,25 +6,24 @@ import '../../test/test_components.dart';
 
 Widget dialPadUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: SingleChildScrollView(
-        scrollDirection: Axis.horizontal,
-        child: ZetaDialPad(
-          buttonValues: context.knobs.boolean(label: 'Change to emoji')
-              ? {
-                  '😀': '',
-                  '🥲': '',
-                  '🥳': '',
-                  '🤠': '',
-                  '😨': '',
-                  '👀': '',
-                  '🐤': '',
-                  '🐞': '',
-                  '🦊': '',
-                  '🏆': '',
-                  '⛺️': '',
-                  '🧽': ''
-                }
-              : null,
-          buttonsPerRow: context.knobs.int.slider(label: 'Buttons per row', initialValue: 3, min: 1, max: 9),
-        ).paddingAll(ZetaSpacing.l),
-      ),
+          scrollDirection: Axis.horizontal,
+          child: ZetaDialPad(
+            buttonValues: context.knobs.boolean(label: 'Change to emoji')
+                ? {
+                    '😀': '',
+                    '🥲': '',
+                    '🥳': '',
+                    '🤠': '',
+                    '😨': '',
+                    '👀': '',
+                    '🐤': '',
+                    '🐞': '',
+                    '🦊': '',
+                    '🏆': '',
+                    '⛺️': '',
+                    '🧽': ''
+                  }
+                : null,
+            buttonsPerRow: context.knobs.int.slider(label: 'Buttons per row', initialValue: 3, min: 1, max: 9),
+          )),
     );
diff --git a/example/widgetbook/pages/components/in_page_banner_widgetbook.dart b/example/widgetbook/pages/components/in_page_banner_widgetbook.dart
index a4eb78e2..16938b86 100644
--- a/example/widgetbook/pages/components/in_page_banner_widgetbook.dart
+++ b/example/widgetbook/pages/components/in_page_banner_widgetbook.dart
@@ -7,57 +7,50 @@ import '../../test/test_components.dart';
 Widget inPageBannerUseCase(BuildContext 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]);
+        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 '';
-                },
-              ),
-            )
-          ],
+            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 5d287007..d3a56b05 100644
--- a/example/widgetbook/pages/components/password_input_widgetbook.dart
+++ b/example/widgetbook/pages/components/password_input_widgetbook.dart
@@ -24,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
index bc7933f4..06a007c5 100644
--- a/example/widgetbook/pages/components/progress_widgetbook.dart
+++ b/example/widgetbook/pages/components/progress_widgetbook.dart
@@ -7,22 +7,14 @@ import '../../test/test_components.dart';
 Widget progressBarUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: LayoutBuilder(builder: (context, constraints) {
         return SizedBox(
-          width: constraints.maxWidth - 40,
-          child: Center(
-            child: ConstrainedBox(
-              constraints: BoxConstraints(
-                maxHeight: 100,
-                maxWidth: constraints.maxWidth - 40,
-              ),
-              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'),
-              ),
-            ),
+          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/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)),
                 ),
               ),
             ),