51 changed files with 236 additions and 740 deletions
--- a/packages/wyatt_bloc_layout/example/lib/components/theme_components.dart
+++ b/packages/wyatt_bloc_layout/example/lib/components/theme_components.dart
@ -5,10 +5,10 @@ import 'package:bloc_layout_example/components/custom_loading_widget.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';

 abstract class AppThemeComponent {
-  static ComponentThemeData components = ComponentThemeData.raw(
-    topAppBars: const CustomAppBar().registry(),
-    bottomNavigationBars: const CustomBottomBar().registry(),
-    loaders: const CustomLoadingWidget().registry(),
-    errors: const CustomErrorWidget().registry(),
+  static const ComponentThemeData components = ComponentThemeData.raw(
+    topAppBar: CustomAppBar(),
+    bottomNavigationBar: CustomBottomBar(),
+    loader: CustomLoadingWidget(),
+    error: CustomErrorWidget(),
  );
 }
--- a/packages/wyatt_bloc_layout/lib/src/core/crud_cubit_consumer_screen_mixin.dart
+++ b/packages/wyatt_bloc_layout/lib/src/core/crud_cubit_consumer_screen_mixin.dart
@ -23,13 +23,12 @@ import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 mixin CrudMixin<Cubit extends bloc_base.Cubit<dynamic>,
    SuccessState extends CrudSuccess> {
  Widget errorBuilder(BuildContext context, CrudError state) =>
-      context.components.errorComponent().call(
-            message:
-                (state.message != null) ? TextWrapper(state.message!) : null,
-          );
+      context.components.errorComponent.call(
+        message: (state.message != null) ? TextWrapper(state.message!) : null,
+      );

  Widget loadingBuilder(BuildContext context, CrudLoading state) =>
-      context.components.loaderComponent()();
+      context.components.loader ?? const SizedBox.shrink();

  Widget initialBuilder(BuildContext context, CrudInitial state) =>
      const SizedBox.shrink();
--- a/packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_grid_layout_cubit_screen_crud_list.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_grid_layout_cubit_screen_crud_list.dart
@ -24,8 +24,7 @@ abstract class BottomNavigationBarGridLayoutCubitScreenCrudList<
    with GridLayoutMixin<SuccessType> {
  const BottomNavigationBarGridLayoutCubitScreenCrudList({
    super.custom,
-    super.barId,
-    super.scaffoldFieldsWrapper,
+    super.height = 60,
    super.key,
  });
 }
--- a/packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_layout_cubit_screen.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_layout_cubit_screen.dart
@ -26,21 +26,18 @@ abstract class BottomNavigationBarLayoutCubitScreen<
    State extends Object> extends CubitScreenBase<Cubit, State> {
  const BottomNavigationBarLayoutCubitScreen({
    this.custom,
-    this.barId,
-    this.scaffoldFieldsWrapper,
+    this.height = 60,
    super.key,
  });

-  final ComponentCallBack<BottomNavigationBarComponent>? custom;
-  final ScaffoldFieldsWrapper? scaffoldFieldsWrapper;
-  final String? barId;
+  final double height;
+  final BottomNavigationBarComponent? Function(BottomNavigationBarComponent?)?
+      custom;

  @override
  Widget parent(BuildContext context, Widget child) =>
-      StructuralLayout.withBottomNavBar(
+      BottomNavigationBarLayout(
        custom: custom,
-        barId: barId,
-        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
        body: child,
      );
 }
--- a/packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_layout_cubit_screen_crud.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_layout_cubit_screen_crud.dart
@ -26,8 +26,7 @@ abstract class BottomNavigationBarLayoutCubitScreenCrud<
    with CrudMixin<Cubit, CrudSuccessState> {
  const BottomNavigationBarLayoutCubitScreenCrud({
    super.custom,
-    super.barId,
-    super.scaffoldFieldsWrapper,
+    super.height,
    super.key,
  });

--- a/packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_layout_cubit_screen_crud_item.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_layout_cubit_screen_crud_item.dart
@ -24,8 +24,7 @@ abstract class BottomNavigationBarLayoutCubitScreenCrudItem<
        CrudLoaded<SuccessType>> {
  const BottomNavigationBarLayoutCubitScreenCrudItem({
    super.custom,
-    super.barId,
-    super.scaffoldFieldsWrapper,
+    super.height = 60,
    super.key,
  });
 }
--- a/packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_layout_cubit_screen_crud_list.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/bottom_navigation_bar_bloc_layout/bottom_navigation_bar_layout_cubit_screen_crud_list.dart
@ -24,8 +24,7 @@ abstract class BottomNavigationBarLayoutCubitScreenCrudList<
        CrudListLoaded<SuccessType>> {
  const BottomNavigationBarLayoutCubitScreenCrudList({
    super.custom,
-    super.barId,
-    super.scaffoldFieldsWrapper,
+    super.height = 60,
    super.key,
  });
 }
--- a/packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_grid_layout_cubit_screen_crud_list.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_grid_layout_cubit_screen_crud_list.dart
@ -25,11 +25,7 @@ abstract class FrameLayoutGridCubitScreenCrudList<
  const FrameLayoutGridCubitScreenCrudList({
    super.customAppBar,
    super.customBottomNavBar,
-    super.floatingActionButtonId,
-    super.height,
-    super.appBarId,
-    super.bottomNavBarId,
-    super.customFloatingActionButton,
+    super.height = 60,
    super.scaffoldFieldsWrapper,
    super.key,
  });
--- a/packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_layout_cubit_screen.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_layout_cubit_screen.dart
@ -26,34 +26,21 @@ abstract class FrameLayoutCubitScreen<Cubit extends bloc_base.Cubit<State>,
  const FrameLayoutCubitScreen({
    this.customAppBar,
    this.customBottomNavBar,
-    this.customFloatingActionButton,
-    this.appBarId,
-    this.bottomNavBarId,
-    this.floatingActionButtonId,
    this.scaffoldFieldsWrapper,
    this.height = 60,
    super.key,
  });

-  final ComponentCallBack<TopAppBarComponent>? customAppBar;
-  final ComponentCallBack<BottomNavigationBarComponent>? customBottomNavBar;
-  final ComponentCallBack<FloatingActionButtonComponent>?
-      customFloatingActionButton;
-  final String? appBarId;
-  final String? bottomNavBarId;
-  final String? floatingActionButtonId;
+  final TopAppBarComponent? Function(TopAppBarComponent?)? customAppBar;
+  final BottomNavigationBarComponent? Function(BottomNavigationBarComponent?)?
+      customBottomNavBar;
  final double height;
  final ScaffoldFieldsWrapper? scaffoldFieldsWrapper;

  @override
-  Widget parent(BuildContext context, Widget child) =>
-      StructuralLayout.withFrame(
+  Widget parent(BuildContext context, Widget child) => FrameLayout(
        customAppBar: customAppBar,
        customBottomNavBar: customBottomNavBar,
-        customFloatingActionButton: customFloatingActionButton,
-        appBarId: appBarId,
-        bottomNavBarId: bottomNavBarId,
-        floatingActionButtonId: floatingActionButtonId,
        height: height,
        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
        body: child,
--- a/packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_layout_cubit_screen_crud.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_layout_cubit_screen_crud.dart
@ -27,13 +27,9 @@ abstract class FrameLayoutCubitScreenCrud<
  const FrameLayoutCubitScreenCrud({
    super.customAppBar,
    super.customBottomNavBar,
-    super.floatingActionButtonId,
    super.height,
-    super.appBarId,
-    super.bottomNavBarId,
-    super.customFloatingActionButton,
-    super.scaffoldFieldsWrapper,
    super.key,
+    super.scaffoldFieldsWrapper,
  });

  @override
--- a/packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_layout_cubit_screen_crud_item.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_layout_cubit_screen_crud_item.dart
@ -24,11 +24,7 @@ abstract class FrameLayoutCubitScreenCrudItem<
  const FrameLayoutCubitScreenCrudItem({
    super.customAppBar,
    super.customBottomNavBar,
-    super.floatingActionButtonId,
-    super.height,
-    super.appBarId,
-    super.bottomNavBarId,
-    super.customFloatingActionButton,
+    super.height = 60,
    super.scaffoldFieldsWrapper,
    super.key,
  });
--- a/packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_layout_cubit_screen_crud_list.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/frame_bloc_layout/frame_layout_cubit_screen_crud_list.dart
@ -24,11 +24,7 @@ abstract class FrameLayoutCubitScreenCrudList<
  const FrameLayoutCubitScreenCrudList({
    super.customAppBar,
    super.customBottomNavBar,
-    super.floatingActionButtonId,
-    super.height,
-    super.appBarId,
-    super.bottomNavBarId,
-    super.customFloatingActionButton,
+    super.height = 60,
    super.scaffoldFieldsWrapper,
    super.key,
  });
--- a/packages/wyatt_bloc_layout/lib/src/presentation/structural_bloc_layout.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/structural_bloc_layout.dart
@ -1 +0,0 @@
-
--- a/packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_grid_layout_cubit_screen_crud_list.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_grid_layout_cubit_screen_crud_list.dart
@ -25,8 +25,6 @@ abstract class TopAppBarGridLayoutCubitScreenCrudList<
  const TopAppBarGridLayoutCubitScreenCrudList({
    super.custom,
    super.height = 60,
-    super.barId,
-    super.scaffoldFieldsWrapper,
    super.key,
  });
 }
--- a/packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_layout_cubit_screen.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_layout_cubit_screen.dart
@ -25,23 +25,17 @@ abstract class TopAppBarLayoutCubitScreen<Cubit extends bloc_base.Cubit<State>,
    State extends Object> extends CubitScreenBase<Cubit, State> {
  const TopAppBarLayoutCubitScreen({
    this.custom,
-    this.barId,
-    this.scaffoldFieldsWrapper,
    this.height = 60,
    super.key,
  });

  final double height;
-  final ComponentCallBack<TopAppBarComponent>? custom;
-  final String? barId;
-  final ScaffoldFieldsWrapper? scaffoldFieldsWrapper;
+  final TopAppBarComponent? Function(TopAppBarComponent?)? custom;

  @override
  Widget parent(BuildContext context, Widget child) => TopAppBarLayout(
        height: height,
        custom: custom,
-        barId: barId,
-        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
        body: child,
      );
 }
--- a/packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_layout_cubit_screen_crud.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_layout_cubit_screen_crud.dart
@ -27,8 +27,6 @@ abstract class TopAppBarLayoutCubitScreenCrud<
  const TopAppBarLayoutCubitScreenCrud({
    super.custom,
    super.height,
-    super.barId,
-    super.scaffoldFieldsWrapper,
    super.key,
  });

--- a/packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_layout_cubit_screen_crud_item.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_layout_cubit_screen_crud_item.dart
@ -24,8 +24,6 @@ abstract class TopAppBarLayoutCubitScreenCrudItem<
  const TopAppBarLayoutCubitScreenCrudItem({
    super.custom,
    super.height = 60,
-    super.barId,
-    super.scaffoldFieldsWrapper,
    super.key,
  });
 }
--- a/packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_layout_cubit_screen_crud_list.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/top_app_bar_bloc_layout/top_app_bar_layout_cubit_screen_crud_list.dart
@ -24,8 +24,6 @@ abstract class TopAppBarLayoutCubitScreenCrudList<
  const TopAppBarLayoutCubitScreenCrudList({
    super.custom,
    super.height = 60,
-    super.barId,
-    super.scaffoldFieldsWrapper,
    super.key,
  });
 }
--- a/packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_grid_layout_cubit_screen_crud_list.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_grid_layout_cubit_screen_crud_list.dart
@ -25,8 +25,6 @@ abstract class TopNavigationBarGridLayoutCubitScreenCrudList<
  const TopNavigationBarGridLayoutCubitScreenCrudList({
    super.custom,
    super.height = 60,
-    super.barId,
-    super.scaffoldFieldsWrapper,
    super.key,
  });
 }
--- a/packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_layout_cubit_screen.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_layout_cubit_screen.dart
@ -27,23 +27,16 @@ abstract class TopNavigationBarLayoutCubitScreen<
  const TopNavigationBarLayoutCubitScreen({
    this.custom,
    this.height = 60,
-    this.barId,
-    this.scaffoldFieldsWrapper,
    super.key,
  });

  final double height;
-  final ComponentCallBack<TopNavigationBarComponent>? custom;
-  final String? barId;
-  final ScaffoldFieldsWrapper? scaffoldFieldsWrapper;
+  final TopNavigationBarComponent? Function(TopNavigationBarComponent?)? custom;

  @override
-  Widget parent(BuildContext context, Widget child) =>
-      StructuralLayout.withTopNavigationBar(
-        barId: barId,
-        custom: custom,
+  Widget parent(BuildContext context, Widget child) => TopNavigationBarLayout(
        height: height,
-        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
+        custom: custom,
        body: child,
      );
 }
--- a/packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_layout_cubit_screen_crud.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_layout_cubit_screen_crud.dart
@ -27,8 +27,6 @@ abstract class TopNavigationBarLayoutCubitScreenCrud<
  const TopNavigationBarLayoutCubitScreenCrud({
    super.custom,
    super.height,
-    super.barId,
-    super.scaffoldFieldsWrapper,
    super.key,
  });

--- a/packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_layout_cubit_screen_crud_item.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_layout_cubit_screen_crud_item.dart
@ -25,8 +25,6 @@ abstract class TopNavigationBarLayoutCubitScreenCrudItem<
  const TopNavigationBarLayoutCubitScreenCrudItem({
    super.custom,
    super.height = 60,
-    super.barId,
-    super.scaffoldFieldsWrapper,
    super.key,
  });
 }
--- a/packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_layout_cubit_screen_crud_list.dart
+++ b/packages/wyatt_bloc_layout/lib/src/presentation/top_navigation_bar_bloc_layout/top_navigation_bar_layout_cubit_screen_crud_list.dart
@ -25,8 +25,6 @@ abstract class TopNavigationBarLayoutCubitScreenCrudList<
  const TopNavigationBarLayoutCubitScreenCrudList({
    super.custom,
    super.height = 60,
-    super.barId,
-    super.scaffoldFieldsWrapper,
    super.key,
  });
 }
--- a/packages/wyatt_ui_components/lib/src/features/component_theme_data.dart
+++ b/packages/wyatt_ui_components/lib/src/features/component_theme_data.dart
@ -68,23 +68,23 @@ class ComponentThemeData {
  // /// {@macro component_theme_data}
  factory ComponentThemeData.fromOther(ComponentThemeData other) =>
      ComponentThemeData(
-        topAppBars: other._topAppBars,
-        topNavigationBars: other._topNavigationBars,
-        bottomNavigationBars: other._bottomNavigationBars,
-        errors: other._errors,
-        loaders: other._loaders,
-        richTextBuilders: other._richTextBuilders,
-        textInputs: other._textInputs,
-        fileSelectionButtons: other._fileSelectionButtons,
-        flatButtons: other._flatButtons,
-        simpleIconButtons: other._simpleIconButtons,
-        symbolButtons: other._symbolButtons,
-        informationCards: other._informationCards,
-        portfolioCards: other._portfolioCards,
-        quoteCards: other._quoteCards,
-        skillCards: other._skillCards,
-        pricingCards: other._pricingCards,
-        floatingActionButtons: other._floatingActionButtons,
+        topAppBars: other.topAppBars,
+        topNavigationBars: other.topNavigationBars,
+        bottomNavigationBars: other.bottomNavigationBars,
+        errors: other.errors,
+        loaders: other.loaders,
+        richTextBuilders: other.richTextBuilders,
+        textInputs: other.textInputs,
+        fileSelectionButtons: other.fileSelectionButtons,
+        flatButtons: other.flatButtons,
+        simpleIconButtons: other.simpleIconButtons,
+        symbolButtons: other.symbolButtons,
+        informationCards: other.informationCards,
+        portfolioCards: other.portfolioCards,
+        quoteCards: other.quoteCards,
+        skillCards: other.skillCards,
+        pricingCards: other.pricingCards,
+        floatingActionButtons: other.floatingActionButtons,
      );

  /// Create a [ComponentThemeData] given a set of exact values. Most values
@ -94,40 +94,24 @@ class ComponentThemeData {
  /// create intermediate themes based on two themes created with the
  /// [ComponentThemeData] constructor.
  const ComponentThemeData.raw({
-    ComponentRegistry<TopAppBarComponent>? topAppBars,
-    ComponentRegistry<TopNavigationBarComponent>? topNavigationBars,
-    ComponentRegistry<BottomNavigationBarComponent>? bottomNavigationBars,
-    ComponentRegistry<ErrorComponent>? errors,
-    ComponentRegistry<LoaderComponent>? loaders,
-    ComponentRegistry<RichTextBuilderComponent>? richTextBuilders,
-    ComponentRegistry<TextInputComponent>? textInputs,
-    ComponentRegistry<FileSelectionButtonComponent>? fileSelectionButtons,
-    ComponentRegistry<FlatButtonComponent>? flatButtons,
-    ComponentRegistry<SimpleIconButtonComponent>? simpleIconButtons,
-    ComponentRegistry<SymbolButtonComponent>? symbolButtons,
-    ComponentRegistry<InformationCardComponent>? informationCards,
-    ComponentRegistry<PortfolioCardComponent>? portfolioCards,
-    ComponentRegistry<QuoteCardComponent>? quoteCards,
-    ComponentRegistry<SkillCardComponent>? skillCards,
-    ComponentRegistry<PricingCardComponent>? pricingCards,
-    ComponentRegistry<FloatingActionButtonComponent>? floatingActionButtons,
-  })  : _floatingActionButtons = floatingActionButtons,
-        _symbolButtons = symbolButtons,
-        _simpleIconButtons = simpleIconButtons,
-        _flatButtons = flatButtons,
-        _fileSelectionButtons = fileSelectionButtons,
-        _textInputs = textInputs,
-        _richTextBuilders = richTextBuilders,
-        _pricingCards = pricingCards,
-        _skillCards = skillCards,
-        _quoteCards = quoteCards,
-        _portfolioCards = portfolioCards,
-        _informationCards = informationCards,
-        _loaders = loaders,
-        _errors = errors,
-        _bottomNavigationBars = bottomNavigationBars,
-        _topNavigationBars = topNavigationBars,
-        _topAppBars = topAppBars;
+    this.topAppBars,
+    this.topNavigationBars,
+    this.bottomNavigationBars,
+    this.errors,
+    this.loaders,
+    this.richTextBuilders,
+    this.textInputs,
+    this.fileSelectionButtons,
+    this.flatButtons,
+    this.simpleIconButtons,
+    this.symbolButtons,
+    this.informationCards,
+    this.portfolioCards,
+    this.quoteCards,
+    this.skillCards,
+    this.pricingCards,
+    this.floatingActionButtons,
+  });

  R _get<T extends Component, R>(T? component, R? returned) {
    if (component == null) {
@ -145,97 +129,90 @@ class ComponentThemeData {
  }

  // Bars
-  final ComponentRegistry<TopAppBarComponent>? _topAppBars;
+  final ComponentRegistry<TopAppBarComponent>? topAppBars;
  $TopAppBarComponentCWProxy topAppBarComponent([String? id]) =>
-      _get(_topAppBars?.call(id), _topAppBars?.call(id)?.copyWith);
+      _get(topAppBars?.call(id), topAppBars?.call(id)?.copyWith);

-  final ComponentRegistry<TopNavigationBarComponent>? _topNavigationBars;
+  final ComponentRegistry<TopNavigationBarComponent>? topNavigationBars;
  $TopNavigationBarComponentCWProxy topNavigationBarComponent([String? id]) =>
-      _get(
-        _topNavigationBars?.call(id),
-        _topNavigationBars?.call(id)?.copyWith,
-      );
+      _get(topNavigationBars?.call(id), topNavigationBars?.call(id)?.copyWith);

-  final ComponentRegistry<BottomNavigationBarComponent>? _bottomNavigationBars;
+  final ComponentRegistry<BottomNavigationBarComponent>? bottomNavigationBars;
  $BottomNavigationBarComponentCWProxy bottomNavigationBarComponent([
    String? id,
  ]) =>
      _get(
-        _bottomNavigationBars?.call(id),
-        _bottomNavigationBars?.call(id)?.copyWith,
+        bottomNavigationBars?.call(id),
+        bottomNavigationBars?.call(id)?.copyWith,
      );

  // CRUD Widgets
-  final ComponentRegistry<ErrorComponent>? _errors;
+  final ComponentRegistry<ErrorComponent>? errors;
  $ErrorComponentCWProxy errorComponent([String? id]) =>
-      _get(_errors?.call(id), _errors?.call(id)?.copyWith);
+      _get(errors?.call(id), errors?.call(id)?.copyWith);

-  final ComponentRegistry<LoaderComponent>? _loaders;
+  final ComponentRegistry<LoaderComponent>? loaders;
  $LoaderComponentCWProxy loaderComponent([String? id]) =>
-      _get(_loaders?.call(id), _loaders?.call(id)?.copyWith);
+      _get(loaders?.call(id), loaders?.call(id)?.copyWith);

  // Cards
-  final ComponentRegistry<InformationCardComponent>? _informationCards;
+  final ComponentRegistry<InformationCardComponent>? informationCards;
  $InformationCardComponentCWProxy informationCardComponent([String? id]) =>
-      _get(_informationCards?.call(id), _informationCards?.call(id)?.copyWith);
+      _get(informationCards?.call(id), informationCards?.call(id)?.copyWith);

-  final ComponentRegistry<PortfolioCardComponent>? _portfolioCards;
+  final ComponentRegistry<PortfolioCardComponent>? portfolioCards;
  $PortfolioCardComponentCWProxy portfolioCardComponent([String? id]) =>
-      _get(_portfolioCards?.call(id), _portfolioCards?.call(id)?.copyWith);
+      _get(portfolioCards?.call(id), portfolioCards?.call(id)?.copyWith);

-  final ComponentRegistry<QuoteCardComponent>? _quoteCards;
+  final ComponentRegistry<QuoteCardComponent>? quoteCards;
  $QuoteCardComponentCWProxy quoteCardComponent([String? id]) =>
-      _get(_quoteCards?.call(id), _quoteCards?.call(id)?.copyWith);
+      _get(quoteCards?.call(id), quoteCards?.call(id)?.copyWith);

-  final ComponentRegistry<SkillCardComponent>? _skillCards;
+  final ComponentRegistry<SkillCardComponent>? skillCards;
  $SkillCardComponentCWProxy skillCardComponent([String? id]) =>
-      _get(_skillCards?.call(id), _skillCards?.call(id)?.copyWith);
-  final ComponentRegistry<PricingCardComponent>? _pricingCards;
+      _get(skillCards?.call(id), skillCards?.call(id)?.copyWith);
+  final ComponentRegistry<PricingCardComponent>? pricingCards;
  $PricingCardComponentCWProxy pricingCardComponent([String? id]) =>
-      _get(_pricingCards?.call(id), _pricingCards?.call(id)?.copyWith);
+      _get(pricingCards?.call(id), pricingCards?.call(id)?.copyWith);

  // Rich Text
-  final ComponentRegistry<RichTextBuilderComponent>? _richTextBuilders;
+  final ComponentRegistry<RichTextBuilderComponent>? richTextBuilders;
  $RichTextBuilderComponentCWProxy richTextBuilderComponent([String? id]) =>
-      _get(_richTextBuilders?.call(id), _richTextBuilders?.call(id)?.copyWith);
+      _get(richTextBuilders?.call(id), richTextBuilders?.call(id)?.copyWith);

  // Text Inputs
-  final ComponentRegistry<TextInputComponent>? _textInputs;
+  final ComponentRegistry<TextInputComponent>? textInputs;
  $TextInputComponentCWProxy textInputComponent([String? id]) =>
-      _get(_textInputs?.call(id), _textInputs?.call(id)?.copyWith);
+      _get(textInputs?.call(id), textInputs?.call(id)?.copyWith);

  // Buttons
-  final ComponentRegistry<FileSelectionButtonComponent>? _fileSelectionButtons;
+  final ComponentRegistry<FileSelectionButtonComponent>? fileSelectionButtons;
  $FileSelectionButtonComponentCWProxy fileSelectionButtonComponent([
    String? id,
  ]) =>
      _get(
-        _fileSelectionButtons?.call(id),
-        _fileSelectionButtons?.call(id)?.copyWith,
+        fileSelectionButtons?.call(id),
+        fileSelectionButtons?.call(id)?.copyWith,
      );

-  final ComponentRegistry<FlatButtonComponent>? _flatButtons;
+  final ComponentRegistry<FlatButtonComponent>? flatButtons;
  $FlatButtonComponentCWProxy flatButtonComponent([String? id]) =>
-      _get(_flatButtons?.call(id), _flatButtons?.call(id)?.copyWith);
+      _get(flatButtons?.call(id), flatButtons?.call(id)?.copyWith);

-  final ComponentRegistry<SimpleIconButtonComponent>? _simpleIconButtons;
+  final ComponentRegistry<SimpleIconButtonComponent>? simpleIconButtons;
  $SimpleIconButtonComponentCWProxy simpleIconButtonComponent([String? id]) =>
-      _get(
-        _simpleIconButtons?.call(id),
-        _simpleIconButtons?.call(id)?.copyWith,
-      );
+      _get(simpleIconButtons?.call(id), simpleIconButtons?.call(id)?.copyWith);

-  final ComponentRegistry<SymbolButtonComponent>? _symbolButtons;
+  final ComponentRegistry<SymbolButtonComponent>? symbolButtons;
  $SymbolButtonComponentCWProxy symbolButtonComponent([String? id]) =>
-      _get(_symbolButtons?.call(id), _symbolButtons?.call(id)?.copyWith);
+      _get(symbolButtons?.call(id), symbolButtons?.call(id)?.copyWith);

-  final ComponentRegistry<FloatingActionButtonComponent>?
-      _floatingActionButtons;
+  final ComponentRegistry<FloatingActionButtonComponent>? floatingActionButtons;
  $FloatingActionButtonComponentCWProxy floatingActionButtonComponent([
    String? id,
  ]) =>
      _get(
-        _floatingActionButtons?.call(id),
-        _floatingActionButtons?.call(id)?.copyWith,
+        floatingActionButtons?.call(id),
+        floatingActionButtons?.call(id)?.copyWith,
      );
 }
--- a/packages/wyatt_ui_kit/example/lib/cards/portfolio_card/portfolio_cards.dart
+++ b/packages/wyatt_ui_kit/example/lib/cards/portfolio_card/portfolio_cards.dart
@ -30,13 +30,13 @@ class PortfolioCards extends StatelessWidget {
                    'quis elit ut amet velit. Incididunt fugiat proident '
                    'proident deserunt tempor Lorem cillum qui do '),
                ctas: [
-                  context.components.flatButtonComponent().call(
-                        label: const TextWrapper('En savoir plus'),
-                        suffix: const Icon(
-                          Icons.arrow_forward_ios,
-                          size: 15,
-                        ),
-                      ),
+                  context.components.flatButtonComponent.call(
+                    label: const TextWrapper('En savoir plus'),
+                    suffix: const Icon(
+                      Icons.arrow_forward_ios,
+                      size: 15,
+                    ),
+                  ),
                ],
                assets: [
                  Image.asset(
@ -65,13 +65,13 @@ class PortfolioCards extends StatelessWidget {
                    'quis elit ut amet velit. Incididunt fugiat proident '
                    'proident deserunt tempor Lorem cillum qui do '),
                ctas: [
-                  context.components.flatButtonComponent().call(
-                        label: const TextWrapper('En savoir plus'),
-                        suffix: const Icon(
-                          Icons.arrow_forward_ios,
-                          size: 15,
-                        ),
-                      ),
+                  context.components.flatButtonComponent.call(
+                    label: const TextWrapper('En savoir plus'),
+                    suffix: const Icon(
+                      Icons.arrow_forward_ios,
+                      size: 15,
+                    ),
+                  ),
                ],
                assets: [
                  Image.asset(
@ -100,13 +100,13 @@ class PortfolioCards extends StatelessWidget {
                    'quis elit ut amet velit. Incididunt fugiat proident '
                    'proident deserunt tempor Lorem cillum qui do '),
                ctas: [
-                  context.components.flatButtonComponent().call(
-                        label: const TextWrapper('En savoir plus'),
-                        suffix: const Icon(
-                          Icons.arrow_forward_ios,
-                          size: 15,
-                        ),
-                      ),
+                  context.components.flatButtonComponent.call(
+                    label: const TextWrapper('En savoir plus'),
+                    suffix: const Icon(
+                      Icons.arrow_forward_ios,
+                      size: 15,
+                    ),
+                  ),
                ],
                assets: [
                  Image.asset(
@ -145,13 +145,13 @@ class PortfolioCards extends StatelessWidget {
                    'quis elit ut amet velit. Incididunt fugiat proident '
                    'proident deserunt tempor Lorem cillum qui do '),
                ctas: [
-                  context.components.flatButtonComponent().call(
-                        label: const TextWrapper('En savoir plus'),
-                        suffix: const Icon(
-                          Icons.arrow_forward_ios,
-                          size: 15,
-                        ),
-                      ),
+                  context.components.flatButtonComponent.call(
+                    label: const TextWrapper('En savoir plus'),
+                    suffix: const Icon(
+                      Icons.arrow_forward_ios,
+                      size: 15,
+                    ),
+                  ),
                ],
                assets: [
                  Image.asset(
--- a/packages/wyatt_ui_kit/example/lib/cards/pricing_card/pricing_cards.dart
+++ b/packages/wyatt_ui_kit/example/lib/cards/pricing_card/pricing_cards.dart
@ -73,20 +73,20 @@ class PricingCards extends StatelessWidget {
                    ),
                  ),
                ],
-                cta: context.components.flatButtonComponent().call(
-                      label: const TextWrapper(
-                        'Contactez-nous',
-                        style: TextStyle(color: Colors.white),
+                cta: context.components.flatButtonComponent.call(
+                  label: const TextWrapper(
+                    'Contactez-nous',
+                    style: TextStyle(color: Colors.white),
+                  ),
+                  normalStyle: FlatButtonThemeExtensionImpl.dark(
+                    theme: Theme.of(context),
+                  ).normalStyle?.copyWith(
+                        backgroundColors:
+                            const MultiColor(Constants.blueBtnGradient),
+                        borderColors:
+                            const MultiColor(Constants.blueBtnGradient),
                      ),
-                      normalStyle: FlatButtonThemeExtensionImpl.dark(
-                        theme: Theme.of(context),
-                      ).normalStyle?.copyWith(
-                            backgroundColors:
-                                const MultiColor(Constants.blueBtnGradient),
-                            borderColors:
-                                const MultiColor(Constants.blueBtnGradient),
-                          ),
-                    ),
+                ),
              ),
              const Gap(20),
              PricingCard(
@ -130,20 +130,20 @@ class PricingCards extends StatelessWidget {
                    ),
                  ),
                ],
-                cta: context.components.flatButtonComponent().call(
-                      label: const TextWrapper(
-                        'Contactez-nous',
-                        style: TextStyle(color: Colors.white),
+                cta: context.components.flatButtonComponent.call(
+                  label: const TextWrapper(
+                    'Contactez-nous',
+                    style: TextStyle(color: Colors.white),
+                  ),
+                  normalStyle: FlatButtonThemeExtensionImpl.dark(
+                    theme: Theme.of(context),
+                  ).normalStyle?.copyWith(
+                        backgroundColors:
+                            const MultiColor(Constants.purpleGradient),
+                        borderColors:
+                            const MultiColor(Constants.purpleGradient),
                      ),
-                      normalStyle: FlatButtonThemeExtensionImpl.dark(
-                        theme: Theme.of(context),
-                      ).normalStyle?.copyWith(
-                            backgroundColors:
-                                const MultiColor(Constants.purpleGradient),
-                            borderColors:
-                                const MultiColor(Constants.purpleGradient),
-                          ),
-                    ),
+                ),
              ),
            ],
          ),
--- a/packages/wyatt_ui_kit/lib/src/features/wyatt_component_theme_data.dart
+++ b/packages/wyatt_ui_kit/lib/src/features/wyatt_component_theme_data.dart
@ -22,22 +22,23 @@ import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
 /// {@endtemplate}
 abstract class WyattComponentThemeData {
  /// {@macro wyatt_component_theme_data}
-  static ComponentThemeData wyattComponentThemeData = ComponentThemeData.raw(
-    topAppBars: const TopAppBar().registry(),
-    topNavigationBars: const TopNavigationBar().registry(),
-    // bottomNavigationBars: ,
-    // errors: ,
-    loaders: const Loader().registry(),
-    richTextBuilders: const RichTextBuilder().registry(),
-    textInputs: const TextInput().registry(),
-    fileSelectionButtons: const FileSelectionButton().registry(),
-    flatButtons: const FlatButton().registry(),
-    simpleIconButtons: const SimpleIconButton().registry(),
-    symbolButtons: const SymbolButton().registry(),
-    informationCards: const InformationCard().registry(),
-    portfolioCards: const PortfolioCard().registry(),
-    quoteCards: const QuoteCard().registry(),
-    skillCards: const SkillCard().registry(),
-    pricingCards: const PricingCard().registry(),
+  static const ComponentThemeData wyattComponentThemeData =
+      ComponentThemeData.raw(
+    topAppBar: TopAppBar(),
+    topNavigationBar: TopNavigationBar(),
+    // bottomNavigationBar: ,
+    // error: ,
+    loader: Loader(),
+    richTextBuilder: RichTextBuilder(),
+    textInput: TextInput(),
+    fileSelectionButton: FileSelectionButton(),
+    flatButton: FlatButton(),
+    simpleIconButton: SimpleIconButton(),
+    symbolButton: SymbolButton(),
+    informationCard: InformationCard(),
+    portfolioCard: PortfolioCard(),
+    quoteCard: QuoteCard(),
+    skillCard: SkillCard(),
+    pricingCard: PricingCard(),
  );
 }
--- a/packages/wyatt_ui_layout/example/lib/components/custom_mobile_app_bar.dart
+++ b/packages/wyatt_ui_layout/example/lib/components/custom_mobile_app_bar.dart
@ -3,19 +3,17 @@ import 'package:flutter/services.dart';
 import 'package:wyatt_component_copy_with_extension/wyatt_component_copy_with_extension.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';

-part 'custom_mobile_app_bar.g.dart';
+part 'custom_app_bar.g.dart';

@ComponentCopyWithExtension()
-class CustomMobileAppBar extends TopAppBarComponent
-    with $CustomMobileAppBarCWMixin {
-  const CustomMobileAppBar({
+class CustomAppBar extends TopAppBarComponent with $CustomAppBarCWMixin {
+  const CustomAppBar({
    super.title,
    super.key,
  });

  @override
  Widget build(BuildContext context) => AppBar(
-        backgroundColor: Colors.red,
        title: Text(title?.data ?? ''),
      );
 }
--- a/packages/wyatt_ui_layout/example/lib/components/custom_bottom_navigation_bar.g.dart
+++ b/packages/wyatt_ui_layout/example/lib/components/custom_bottom_navigation_bar.g.dart
@ -17,15 +17,11 @@ class $CustomBottomNavigationBarCWProxyImpl
  CustomBottomNavigationBar currentIndex(int? currentIndex) =>
      this(currentIndex: currentIndex);
  @override
-  CustomBottomNavigationBar items(List<BottomNavigationBarItem>? items) =>
-      this(items: items);
-  @override
  CustomBottomNavigationBar key(Key? key) => this(key: key);
  @override
  CustomBottomNavigationBar call({
    void Function(BuildContext, int)? onTap,
    int? currentIndex,
-    List<BottomNavigationBarItem>? items,
    Key? key,
  }) =>
      CustomBottomNavigationBar(
--- a/packages/wyatt_ui_layout/example/lib/components/custom_desktop_app_bar.dart
+++ b/packages/wyatt_ui_layout/example/lib/components/custom_desktop_app_bar.dart
@ -1,21 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:wyatt_component_copy_with_extension/wyatt_component_copy_with_extension.dart';
-import 'package:wyatt_ui_components/wyatt_ui_components.dart';
-
-part 'custom_desktop_app_bar.g.dart';
-
-@ComponentCopyWithExtension()
-class CustomDesktopAppBar extends TopAppBarComponent
-    with $CustomDesktopAppBarCWMixin {
-  const CustomDesktopAppBar({
-    super.title,
-    super.key,
-  });
-
-  @override
-  Widget build(BuildContext context) => AppBar(
-        backgroundColor: Colors.green,
-        title: Text(title?.data ?? ''),
-      );
-}
--- a/packages/wyatt_ui_layout/example/lib/components/custom_desktop_app_bar.g.dart
+++ b/packages/wyatt_ui_layout/example/lib/components/custom_desktop_app_bar.g.dart
@ -1,104 +0,0 @@
-// GENERATED CODE - DO NOT MODIFY BY HAND
-
-part of 'custom_desktop_app_bar.dart';
-
-// **************************************************************************
-// ComponentCopyWithGenerator
-// **************************************************************************
-
-class $CustomDesktopAppBarCWProxyImpl implements $TopAppBarComponentCWProxy {
-  const $CustomDesktopAppBarCWProxyImpl(this._value);
-  final CustomDesktopAppBar _value;
-  @override
-  CustomDesktopAppBar title(TextWrapper? title) => this(title: title);
-  @override
-  CustomDesktopAppBar centerTitle(bool? centerTitle) =>
-      this(centerTitle: centerTitle);
-  @override
-  CustomDesktopAppBar shape(ShapeBorder? shape) => this(shape: shape);
-  @override
-  CustomDesktopAppBar systemOverlayStyle(
-          SystemUiOverlayStyle? systemOverlayStyle) =>
-      this(systemOverlayStyle: systemOverlayStyle);
-  @override
-  CustomDesktopAppBar automaticallyImplyLeading(
-          bool? automaticallyImplyLeading) =>
-      this(automaticallyImplyLeading: automaticallyImplyLeading);
-  @override
-  CustomDesktopAppBar flexibleSpace(Widget? flexibleSpace) =>
-      this(flexibleSpace: flexibleSpace);
-  @override
-  CustomDesktopAppBar bottom(PreferredSizeWidget? bottom) =>
-      this(bottom: bottom);
-  @override
-  CustomDesktopAppBar elevation(double? elevation) =>
-      this(elevation: elevation);
-  @override
-  CustomDesktopAppBar scrolledUnderElevation(double? scrolledUnderElevation) =>
-      this(scrolledUnderElevation: scrolledUnderElevation);
-  @override
-  CustomDesktopAppBar shadowColor(Color? shadowColor) =>
-      this(shadowColor: shadowColor);
-  @override
-  CustomDesktopAppBar surfaceTintColor(Color? surfaceTintColor) =>
-      this(surfaceTintColor: surfaceTintColor);
-  @override
-  CustomDesktopAppBar backgroundColor(MultiColor? backgroundColor) =>
-      this(backgroundColor: backgroundColor);
-  @override
-  CustomDesktopAppBar iconTheme(IconThemeData? iconTheme) =>
-      this(iconTheme: iconTheme);
-  @override
-  CustomDesktopAppBar primary(bool? primary) => this(primary: primary);
-  @override
-  CustomDesktopAppBar excludeHeaderSemantics(bool? excludeHeaderSemantics) =>
-      this(excludeHeaderSemantics: excludeHeaderSemantics);
-  @override
-  CustomDesktopAppBar toolbarHeight(double? toolbarHeight) =>
-      this(toolbarHeight: toolbarHeight);
-  @override
-  CustomDesktopAppBar leadingWidth(double? leadingWidth) =>
-      this(leadingWidth: leadingWidth);
-  @override
-  CustomDesktopAppBar leading(Widget? leading) => this(leading: leading);
-  @override
-  CustomDesktopAppBar actions(List<Widget>? actions) => this(actions: actions);
-  @override
-  CustomDesktopAppBar expandedWidget(List<Widget>? expandedWidget) =>
-      this(expandedWidget: expandedWidget);
-  @override
-  CustomDesktopAppBar key(Key? key) => this(key: key);
-  @override
-  CustomDesktopAppBar call({
-    TextWrapper? title,
-    bool? centerTitle,
-    ShapeBorder? shape,
-    SystemUiOverlayStyle? systemOverlayStyle,
-    bool? automaticallyImplyLeading,
-    Widget? flexibleSpace,
-    PreferredSizeWidget? bottom,
-    double? elevation,
-    double? scrolledUnderElevation,
-    Color? shadowColor,
-    Color? surfaceTintColor,
-    MultiColor? backgroundColor,
-    IconThemeData? iconTheme,
-    bool? primary,
-    bool? excludeHeaderSemantics,
-    double? toolbarHeight,
-    double? leadingWidth,
-    Widget? leading,
-    List<Widget>? actions,
-    List<Widget>? expandedWidget,
-    Key? key,
-  }) =>
-      CustomDesktopAppBar(
-        title: title ?? _value.title,
-        key: key ?? _value.key,
-      );
-}
-
-mixin $CustomDesktopAppBarCWMixin on Component {
-  $TopAppBarComponentCWProxy get copyWith =>
-      $CustomDesktopAppBarCWProxyImpl(this as CustomDesktopAppBar);
-}
--- a/packages/wyatt_ui_layout/example/lib/components/custom_mobile_app_bar.g.dart
+++ b/packages/wyatt_ui_layout/example/lib/components/custom_mobile_app_bar.g.dart
@ -1,103 +0,0 @@
-// GENERATED CODE - DO NOT MODIFY BY HAND
-
-part of 'custom_mobile_app_bar.dart';
-
-// **************************************************************************
-// ComponentCopyWithGenerator
-// **************************************************************************
-
-class $CustomMobileAppBarCWProxyImpl implements $TopAppBarComponentCWProxy {
-  const $CustomMobileAppBarCWProxyImpl(this._value);
-  final CustomMobileAppBar _value;
-  @override
-  CustomMobileAppBar title(TextWrapper? title) => this(title: title);
-  @override
-  CustomMobileAppBar centerTitle(bool? centerTitle) =>
-      this(centerTitle: centerTitle);
-  @override
-  CustomMobileAppBar shape(ShapeBorder? shape) => this(shape: shape);
-  @override
-  CustomMobileAppBar systemOverlayStyle(
-          SystemUiOverlayStyle? systemOverlayStyle) =>
-      this(systemOverlayStyle: systemOverlayStyle);
-  @override
-  CustomMobileAppBar automaticallyImplyLeading(
-          bool? automaticallyImplyLeading) =>
-      this(automaticallyImplyLeading: automaticallyImplyLeading);
-  @override
-  CustomMobileAppBar flexibleSpace(Widget? flexibleSpace) =>
-      this(flexibleSpace: flexibleSpace);
-  @override
-  CustomMobileAppBar bottom(PreferredSizeWidget? bottom) =>
-      this(bottom: bottom);
-  @override
-  CustomMobileAppBar elevation(double? elevation) => this(elevation: elevation);
-  @override
-  CustomMobileAppBar scrolledUnderElevation(double? scrolledUnderElevation) =>
-      this(scrolledUnderElevation: scrolledUnderElevation);
-  @override
-  CustomMobileAppBar shadowColor(Color? shadowColor) =>
-      this(shadowColor: shadowColor);
-  @override
-  CustomMobileAppBar surfaceTintColor(Color? surfaceTintColor) =>
-      this(surfaceTintColor: surfaceTintColor);
-  @override
-  CustomMobileAppBar backgroundColor(MultiColor? backgroundColor) =>
-      this(backgroundColor: backgroundColor);
-  @override
-  CustomMobileAppBar iconTheme(IconThemeData? iconTheme) =>
-      this(iconTheme: iconTheme);
-  @override
-  CustomMobileAppBar primary(bool? primary) => this(primary: primary);
-  @override
-  CustomMobileAppBar excludeHeaderSemantics(bool? excludeHeaderSemantics) =>
-      this(excludeHeaderSemantics: excludeHeaderSemantics);
-  @override
-  CustomMobileAppBar toolbarHeight(double? toolbarHeight) =>
-      this(toolbarHeight: toolbarHeight);
-  @override
-  CustomMobileAppBar leadingWidth(double? leadingWidth) =>
-      this(leadingWidth: leadingWidth);
-  @override
-  CustomMobileAppBar leading(Widget? leading) => this(leading: leading);
-  @override
-  CustomMobileAppBar actions(List<Widget>? actions) => this(actions: actions);
-  @override
-  CustomMobileAppBar expandedWidget(List<Widget>? expandedWidget) =>
-      this(expandedWidget: expandedWidget);
-  @override
-  CustomMobileAppBar key(Key? key) => this(key: key);
-  @override
-  CustomMobileAppBar call({
-    TextWrapper? title,
-    bool? centerTitle,
-    ShapeBorder? shape,
-    SystemUiOverlayStyle? systemOverlayStyle,
-    bool? automaticallyImplyLeading,
-    Widget? flexibleSpace,
-    PreferredSizeWidget? bottom,
-    double? elevation,
-    double? scrolledUnderElevation,
-    Color? shadowColor,
-    Color? surfaceTintColor,
-    MultiColor? backgroundColor,
-    IconThemeData? iconTheme,
-    bool? primary,
-    bool? excludeHeaderSemantics,
-    double? toolbarHeight,
-    double? leadingWidth,
-    Widget? leading,
-    List<Widget>? actions,
-    List<Widget>? expandedWidget,
-    Key? key,
-  }) =>
-      CustomMobileAppBar(
-        title: title ?? _value.title,
-        key: key ?? _value.key,
-      );
-}
-
-mixin $CustomMobileAppBarCWMixin on Component {
-  $TopAppBarComponentCWProxy get copyWith =>
-      $CustomMobileAppBarCWProxyImpl(this as CustomMobileAppBar);
-}
--- a/packages/wyatt_ui_layout/example/lib/core/app_theme_component.dart
+++ b/packages/wyatt_ui_layout/example/lib/core/app_theme_component.dart
@ -1,18 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_layout_example/components/custom_app_bar.dart';
 import 'package:wyatt_ui_layout_example/components/custom_bottom_navigation_bar.dart';
-import 'package:wyatt_ui_layout_example/components/custom_desktop_app_bar.dart';
-import 'package:wyatt_ui_layout_example/components/custom_mobile_app_bar.dart';
 import 'package:wyatt_ui_layout_example/pages/bottom_navigation_bar_layout_page_1.dart';
 import 'package:wyatt_ui_layout_example/pages/bottom_navigation_bar_layout_page_2.dart';

 class AppThemeComponent {
  static ComponentThemeData get components => ComponentThemeData.raw(
-        topAppBars: {
-          'mobile': const CustomMobileAppBar(),
-          'desktop': const CustomDesktopAppBar(),
-        }.registry(),
-        bottomNavigationBars: CustomBottomNavigationBar(
+        topAppBar: const CustomAppBar(),
+        bottomNavigationBar: CustomBottomNavigationBar(
          onTap: (context, index) {
            switch (index) {
              case 0:
@ -41,6 +37,6 @@ class AppThemeComponent {
                break;
            }
          },
-        ).registry(),
+        ),
      );
 }
--- a/packages/wyatt_ui_layout/example/lib/pages/app_bar_layout_page.dart
+++ b/packages/wyatt_ui_layout/example/lib/pages/app_bar_layout_page.dart
@ -6,15 +6,12 @@ class AppBarLayoutPage extends StatelessWidget {
  const AppBarLayoutPage({super.key});

  @override
-  Widget build(BuildContext context) => LayoutBuilder(
-        builder: (context, constraint) => StructuralLayout.withTopAppBar(
-          barId: constraint.maxWidth < 600 ? 'mobile' : 'desktop',
-          custom: (topBar) =>
-              topBar?.copyWith.title(const TextWrapper('New Title')),
-          body: const Center(
-            child: Text(
-              'Body',
-            ),
+  Widget build(BuildContext context) => TopAppBarLayout(
+        custom: (topBar) =>
+            topBar?.copyWith.title(const TextWrapper('New Title')),
+        body: const Center(
+          child: Text(
+            'Body',
          ),
        ),
      );
--- a/packages/wyatt_ui_layout/example/lib/pages/bottom_navigation_bar_layout_page_1.dart
+++ b/packages/wyatt_ui_layout/example/lib/pages/bottom_navigation_bar_layout_page_1.dart
@ -5,7 +5,7 @@ class BottomNavigationBarLayoutPage1 extends StatelessWidget {
  const BottomNavigationBarLayoutPage1({super.key});

  @override
-  Widget build(BuildContext context) => StructuralLayout.withBottomNavBar(
+  Widget build(BuildContext context) => BottomNavigationBarLayout(
        custom: (p0) => p0?.copyWith.call(currentIndex: 0),
        body: const TopAppBarLayout(
          body: Center(
--- a/packages/wyatt_ui_layout/example/lib/pages/bottom_navigation_bar_layout_page_2.dart
+++ b/packages/wyatt_ui_layout/example/lib/pages/bottom_navigation_bar_layout_page_2.dart
@ -5,7 +5,7 @@ class BottomNavigationBarLayoutPage2 extends StatelessWidget {
  const BottomNavigationBarLayoutPage2({super.key});

  @override
-  Widget build(BuildContext context) => StructuralLayout.withBottomNavBar(
+  Widget build(BuildContext context) => BottomNavigationBarLayout(
        custom: (p0) => p0?.copyWith.currentIndex(1),
        body: const TopAppBarLayout(
          body: Center(
--- a/packages/wyatt_ui_layout/example/macos/Flutter/ephemeral/Flutter-Generated.xcconfig
+++ b/packages/wyatt_ui_layout/example/macos/Flutter/ephemeral/Flutter-Generated.xcconfig
@ -2,12 +2,10 @@
 FLUTTER_ROOT=/Users/maloleon/Library/flutter
 FLUTTER_APPLICATION_PATH=/Users/maloleon/Studio/wyatt-packages/packages/wyatt_ui_layout/example
 COCOAPODS_PARALLEL_CODE_SIGN=true
-FLUTTER_TARGET=/Users/maloleon/Studio/wyatt-packages/packages/wyatt_ui_layout/example/lib/main.dart
 FLUTTER_BUILD_DIR=build
 FLUTTER_BUILD_NAME=1.0.0
 FLUTTER_BUILD_NUMBER=1
-DART_DEFINES=RkxVVFRFUl9XRUJfQVVUT19ERVRFQ1Q9dHJ1ZQ==,RkxVVFRFUl9XRUJfQ0FOVkFTS0lUX1VSTD1odHRwczovL3d3dy5nc3RhdGljLmNvbS9mbHV0dGVyLWNhbnZhc2tpdC9iMjAxODNlMDQwOTYwOTRiY2MzN2Q5Y2RlMmE0Yjk2ZjVjYzY4NGNmLw==
 DART_OBFUSCATION=false
 TRACK_WIDGET_CREATION=true
 TREE_SHAKE_ICONS=false
-PACKAGE_CONFIG=/Users/maloleon/Studio/wyatt-packages/packages/wyatt_ui_layout/example/.dart_tool/package_config.json
+PACKAGE_CONFIG=.dart_tool/package_config.json
--- a/packages/wyatt_ui_layout/example/macos/Flutter/ephemeral/flutter_export_environment.sh
+++ b/packages/wyatt_ui_layout/example/macos/Flutter/ephemeral/flutter_export_environment.sh
@ -3,12 +3,10 @@
 export "FLUTTER_ROOT=/Users/maloleon/Library/flutter"
 export "FLUTTER_APPLICATION_PATH=/Users/maloleon/Studio/wyatt-packages/packages/wyatt_ui_layout/example"
 export "COCOAPODS_PARALLEL_CODE_SIGN=true"
-export "FLUTTER_TARGET=/Users/maloleon/Studio/wyatt-packages/packages/wyatt_ui_layout/example/lib/main.dart"
 export "FLUTTER_BUILD_DIR=build"
 export "FLUTTER_BUILD_NAME=1.0.0"
 export "FLUTTER_BUILD_NUMBER=1"
-export "DART_DEFINES=RkxVVFRFUl9XRUJfQVVUT19ERVRFQ1Q9dHJ1ZQ==,RkxVVFRFUl9XRUJfQ0FOVkFTS0lUX1VSTD1odHRwczovL3d3dy5nc3RhdGljLmNvbS9mbHV0dGVyLWNhbnZhc2tpdC9iMjAxODNlMDQwOTYwOTRiY2MzN2Q5Y2RlMmE0Yjk2ZjVjYzY4NGNmLw=="
 export "DART_OBFUSCATION=false"
 export "TRACK_WIDGET_CREATION=true"
 export "TREE_SHAKE_ICONS=false"
-export "PACKAGE_CONFIG=/Users/maloleon/Studio/wyatt-packages/packages/wyatt_ui_layout/example/.dart_tool/package_config.json"
+export "PACKAGE_CONFIG=.dart_tool/package_config.json"
--- a/packages/wyatt_ui_layout/example/macos/Runner.xcodeproj/project.pbxproj
+++ b/packages/wyatt_ui_layout/example/macos/Runner.xcodeproj/project.pbxproj
@ -182,7 +182,7 @@
 			isa = PBXProject;
 			attributes = {
 				LastSwiftUpdateCheck = 0920;
-				LastUpgradeCheck = 1430;
+				LastUpgradeCheck = 1300;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					33CC10EC2044A3C60003C045 = {
--- a/packages/wyatt_ui_layout/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
+++ b/packages/wyatt_ui_layout/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1430"
+   LastUpgradeVersion = "1300"
   version = "1.3">
   <BuildAction
      parallelizeBuildables = "YES"
--- a/packages/wyatt_ui_layout/example/pubspec.yaml
+++ b/packages/wyatt_ui_layout/example/pubspec.yaml
@ -18,7 +18,7 @@ publish_to: "none" # Remove this line if you wish to publish to pub.dev
 version: 1.0.0+1

 environment:
-  sdk: ">=3.0.0 <4.0.0"
+  sdk: ">=2.17.0 <3.0.0"

 # Dependencies specify other packages that your package needs in order to work.
 # To automatically upgrade your package dependencies to the latest versions
--- a/packages/wyatt_ui_layout/lib/src/presentation/layouts/content_layouts/content_layout.dart
+++ b/packages/wyatt_ui_layout/lib/src/presentation/layouts/content_layouts/content_layout.dart
@ -1,39 +0,0 @@
-// Copyright (C) 2022 WYATT GROUP
-// Please see the AUTHORS file for details.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import 'package:flutter/material.dart';
-import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';
-import 'package:wyatt_ui_layout/wyatt_ui_layout.dart';
-
-/// {@template content_layout}
-/// An abstract class that provides a base for creating custom content layout
-/// widgets.
-/// {@endtemplate}
-abstract class ContentLayout extends Layout {
-  /// {@macro content_layout}
-  const ContentLayout({super.key});
-
-  factory ContentLayout.withGrid({
-    required List<Widget> children,
-    double verticalGap = 30,
-    double horizontalGap = 30,
-  }) =>
-      GridLayout(
-        verticalGap: verticalGap,
-        horizontalGap: horizontalGap,
-        children: children,
-      );
-}
--- a/packages/wyatt_ui_layout/lib/src/presentation/layouts/content_layouts/content_layouts.dart
+++ b/packages/wyatt_ui_layout/lib/src/presentation/layouts/content_layouts/content_layouts.dart
@ -14,5 +14,4 @@
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.

-export './content_layout.dart';
 export './grid_layout.dart';
--- a/packages/wyatt_ui_layout/lib/src/presentation/layouts/content_layouts/grid_layout.dart
+++ b/packages/wyatt_ui_layout/lib/src/presentation/layouts/content_layouts/grid_layout.dart
@ -16,7 +16,7 @@

 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
-import 'package:wyatt_ui_layout/src/presentation/layouts/content_layouts/content_layout.dart';
+import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';

 /// {@template grid_layout}
 /// A concrete implementation of the [ContentLayout] abstract class for a layout
--- a/packages/wyatt_ui_layout/lib/src/presentation/layouts/layout.dart
+++ b/packages/wyatt_ui_layout/lib/src/presentation/layouts/layout.dart
@ -28,3 +28,21 @@ abstract class Layout extends StatelessWidget {
  /// {@macro layout}
  const Layout({super.key});
 }
+
+/// {@template structural_layout}
+/// An abstract class that provides a base for creating custom structural layout
+/// widgets.
+/// {@endtemplate}
+abstract class StructuralLayout extends Layout {
+  /// {@macro structural_layout}
+  const StructuralLayout({super.key});
+}
+
+/// {@template content_layout}
+/// An abstract class that provides a base for creating custom content layout
+/// widgets.
+/// {@endtemplate}
+abstract class ContentLayout extends Layout {
+  /// {@macro content_layout}
+  const ContentLayout({super.key});
+}
--- a/packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/bottom_navigation_bar_layout.dart
+++ b/packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/bottom_navigation_bar_layout.dart
@ -19,7 +19,6 @@ import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 import 'package:wyatt_ui_layout/src/core/scaffold_fields_wrapper.dart';
 import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';
-import 'package:wyatt_ui_layout/src/presentation/layouts/structural_layouts/structural_layout.dart';

 /// {@template bottom_navigation_bar_layout}
 /// A concrete implementation of the [Layout] abstract class for a layout which
@ -30,7 +29,6 @@ class BottomNavigationBarLayout extends StructuralLayout {
  const BottomNavigationBarLayout({
    required this.body,
    this.custom,
-    this.barId,
    this.scaffoldFieldsWrapper,
    super.key,
  });
@ -43,23 +41,15 @@ class BottomNavigationBarLayout extends StructuralLayout {
  final BottomNavigationBarComponent? Function(BottomNavigationBarComponent?)?
      custom;

-  /// The parameter [barId] enables to specify the particular
-  /// bottom bar to utilize.
-  final String? barId;
-
-  /// The [scaffoldFieldsWrapper] is a final variable that serves as a wrapper
-  /// for customizing the scaffold.
-  /// It allows for tailored modifications and enhancements to the standard
-  /// scaffold functionality.
  final ScaffoldFieldsWrapper? scaffoldFieldsWrapper;

  @override
  Widget build(BuildContext context) => Scaffold(
        body: body,
        bottomNavigationBar: custom?.call(
-              context.components.bottomNavigationBarComponent(barId).call(),
+              context.components.bottomNavigationBar,
            ) ??
-            context.components.bottomNavigationBarComponent(barId).call(),
+            context.components.bottomNavigationBar,
        floatingActionButtonLocation:
            scaffoldFieldsWrapper?.floatingActionButtonLocation,
        floatingActionButtonAnimator:
--- a/packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/frame_layout.dart
+++ b/packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/frame_layout.dart
@ -18,7 +18,7 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 import 'package:wyatt_ui_layout/src/core/scaffold_fields_wrapper.dart';
-import 'package:wyatt_ui_layout/src/presentation/layouts/structural_layouts/structural_layout.dart';
+import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';

 /// {@template frame_layout}
 /// A layout that contains a top app bar, a body and a bottom navigation bar.
@ -36,9 +36,6 @@ class FrameLayout extends StructuralLayout {
    this.customAppBar,
    this.customBottomNavBar,
    this.customFloatingActionButton,
-    this.appBarId,
-    this.bottomNavBarId,
-    this.floatingActionButtonId,
    this.height = 60,
    this.scaffoldFieldsWrapper,
    super.key,
@ -56,18 +53,6 @@ class FrameLayout extends StructuralLayout {
  final FloatingActionButtonComponent? Function(FloatingActionButtonComponent?)?
      customFloatingActionButton;

-  /// The parameter [appBarId] enables to specify the particular
-  /// app bar to utilize.
-  final String? appBarId;
-
-  /// The parameter [bottomNavBarId] enables to specify the particular
-  /// bottom bar to utilize.
-  final String? bottomNavBarId;
-
-  /// The parameter [floatingActionButtonId] enables to specify
-  /// the particular floating action button to utilize.
-  final String? floatingActionButtonId;
-
  /// The main content of the layout.
  final Widget body;

@ -78,27 +63,20 @@ class FrameLayout extends StructuralLayout {

  @override
  Widget build(BuildContext context) => Scaffold(
-        appBar: (customAppBar
-                    ?.call(context.components.topAppBarComponent(appBarId)()) !=
-                null)
+        appBar: (customAppBar?.call(context.components.topAppBar) != null ||
+                context.components.topAppBar != null)
            ? PreferredSize(
                preferredSize: Size.fromHeight(height),
-                child: customAppBar?.call(
-                      context.components.topAppBarComponent(appBarId)(),
-                    ) ??
-                    context.components.topAppBarComponent(appBarId)(),
+                child: customAppBar?.call(context.components.topAppBar) ??
+                    context.components.topAppBar!,
              )
            : null,
-        floatingActionButton: customFloatingActionButton?.call(
-              context.components
-                  .floatingActionButtonComponent(floatingActionButtonId)(),
-            ) ??
-            context.components
-                .floatingActionButtonComponent(floatingActionButtonId)(),
-        bottomNavigationBar: customBottomNavBar?.call(
-              context.components.bottomNavigationBarComponent(bottomNavBarId)(),
-            ) ??
-            context.components.bottomNavigationBarComponent(bottomNavBarId)(),
+        floatingActionButton: customFloatingActionButton
+                ?.call(context.components.floatingActionButton) ??
+            context.components.floatingActionButton,
+        bottomNavigationBar:
+            customBottomNavBar?.call(context.components.bottomNavigationBar) ??
+                context.components.bottomNavigationBar,
        body: body,
        floatingActionButtonLocation:
            scaffoldFieldsWrapper?.floatingActionButtonLocation,
--- a/packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/structural_layout.dart
+++ b/packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/structural_layout.dart
@ -1,99 +0,0 @@
-// Copyright (C) 2022 WYATT GROUP
-// Please see the AUTHORS file for details.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import 'package:flutter/widgets.dart';
-import 'package:wyatt_ui_components/wyatt_ui_components.dart';
-import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';
-import 'package:wyatt_ui_layout/wyatt_ui_layout.dart';
-
-typedef ComponentCallBack<T extends Component> = T? Function(T? component);
-
-/// {@template structural_layout}
-/// An abstract class that provides a base for creating custom structural layout
-/// widgets.
-/// {@endtemplate}
-abstract class StructuralLayout extends Layout {
-  /// {@macro structural_layout}
-  const StructuralLayout({super.key});
-
-  factory StructuralLayout.withTopAppBar({
-    required Widget body,
-    ComponentCallBack<TopAppBarComponent>? custom,
-    String? barId,
-    double height = 60,
-    ScaffoldFieldsWrapper? scaffoldFieldsWrapper,
-  }) =>
-      TopAppBarLayout(
-        body: body,
-        barId: barId,
-        custom: custom,
-        height: height,
-        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
-      );
-
-  factory StructuralLayout.withTopNavigationBar({
-    required Widget body,
-    ComponentCallBack<TopNavigationBarComponent>? custom,
-    String? barId,
-    double height = 60,
-    ScaffoldFieldsWrapper? scaffoldFieldsWrapper,
-  }) =>
-      TopNavigationBarLayout(
-        body: body,
-        barId: barId,
-        custom: custom,
-        height: height,
-        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
-      );
-
-  factory StructuralLayout.withFrame({
-    required Widget body,
-    ComponentCallBack<TopAppBarComponent>? customAppBar,
-    ComponentCallBack<BottomNavigationBarComponent>? customBottomNavBar,
-    ComponentCallBack<FloatingActionButtonComponent>?
-        customFloatingActionButton,
-    String? appBarId,
-    String? bottomNavBarId,
-    String? floatingActionButtonId,
-    double height = 60,
-    ScaffoldFieldsWrapper? scaffoldFieldsWrapper,
-  }) =>
-      FrameLayout(
-        body: body,
-        customAppBar: customAppBar,
-        customBottomNavBar: customBottomNavBar,
-        customFloatingActionButton: customFloatingActionButton,
-        appBarId: appBarId,
-        bottomNavBarId: bottomNavBarId,
-        floatingActionButtonId: floatingActionButtonId,
-        height: height,
-        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
-      );
-
-  factory StructuralLayout.withBottomNavBar({
-    required Widget? body,
-    BottomNavigationBarComponent? Function(BottomNavigationBarComponent?)?
-        custom,
-    String? barId,
-    ScaffoldFieldsWrapper? scaffoldFieldsWrapper,
-  }) =>
-      BottomNavigationBarLayout(
-        body: body,
-        custom: custom,
-        barId: barId,
-        scaffoldFieldsWrapper: scaffoldFieldsWrapper,
-      );
-}
--- a/packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/structural_layouts.dart
+++ b/packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/structural_layouts.dart
@ -16,5 +16,4 @@

 export './bottom_navigation_bar_layout.dart';
 export './frame_layout.dart';
-export './structural_layout.dart';
 export './top_app_bar_layout.dart';
--- a/packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/top_app_bar_layout.dart
+++ b/packages/wyatt_ui_layout/lib/src/presentation/layouts/structural_layouts/top_app_bar_layout.dart
@ -18,7 +18,7 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 import 'package:wyatt_ui_layout/src/core/scaffold_fields_wrapper.dart';
-import 'package:wyatt_ui_layout/src/presentation/layouts/structural_layouts/structural_layout.dart';
+import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';

 /// {@template top_bar_layout}
 /// An abstract class for creating layouts with a top bar component.
@ -27,7 +27,7 @@ import 'package:wyatt_ui_layout/src/presentation/layouts/structural_layouts/stru
 /// component, such as an app bar or navigation bar.
 ///
 /// Implementations of this class must provide a concrete implementation of
-/// the [appBar] method, which returns the specific top bar component for the
+/// the [child] method, which returns the specific top bar component for the
 /// given [BuildContext].
 ///
 /// [T] represents the type of the top bar component.
@ -38,7 +38,6 @@ abstract class TopBarLayout<T extends TopBarComponent>
  const TopBarLayout({
    required this.body,
    this.custom,
-    this.barId,
    this.height = 60,
    this.scaffoldFieldsWrapper,
    super.key,
@ -52,31 +51,20 @@ abstract class TopBarLayout<T extends TopBarComponent>
  /// a customized top bar component.
  final T? Function(T?)? custom;

-  /// The parameter [barId] enables to specify the particular app bar to use.
-  final String? barId;
-
  /// The height of the top bar.
  final double height;

  /// Returns the top bar component for the given [BuildContext].
-  T appBar(BuildContext context, String? barId);
+  T? child(BuildContext context);

-  /// The [scaffoldFieldsWrapper] is a final variable that serves as a wrapper
-  /// for customizing the scaffold.
-  /// It allows for tailored modifications and enhancements to the standard
-  /// scaffold functionality.
  final ScaffoldFieldsWrapper? scaffoldFieldsWrapper;

  @override
  Widget build(BuildContext context) => Scaffold(
-        appBar: (custom?.call(
-                  appBar(context, barId),
-                ) !=
-                null)
+        appBar: (custom?.call(child(context)) != null || child(context) != null)
            ? PreferredSize(
                preferredSize: Size.fromHeight(height),
-                child: custom?.call(appBar(context, barId)) ??
-                    appBar(context, barId),
+                child: custom?.call(child(context)) ?? child(context)!,
              )
            : null,
        body: body,
@ -123,16 +111,14 @@ class TopAppBarLayout extends TopBarLayout<TopAppBarComponent> {
  /// [height] represents the height of the top bar.
  const TopAppBarLayout({
    required super.body,
-    super.barId,
    super.custom,
    super.height,
-    super.scaffoldFieldsWrapper,
    super.key,
  });

  @override
-  TopAppBarComponent appBar(BuildContext context, String? barId) =>
-      context.components.topAppBarComponent(barId).call();
+  TopAppBarComponent? child(BuildContext context) =>
+      context.components.topAppBar;
 }

 /// A concrete implementation of [TopBarLayout] for a navigation bar.
@ -145,14 +131,12 @@ class TopNavigationBarLayout extends TopBarLayout<TopNavigationBarComponent> {
  /// [height] represents the height of the top bar.
  const TopNavigationBarLayout({
    required super.body,
-    super.barId,
    super.custom,
    super.height,
-    super.scaffoldFieldsWrapper,
    super.key,
  });

  @override
-  TopNavigationBarComponent appBar(BuildContext context, String? barId) =>
-      context.components.topNavigationBarComponent(barId).call();
+  TopNavigationBarComponent? child(BuildContext context) =>
+      context.components.topNavigationBar;
 }
--- a/packages/wyatt_ui_layout/pubspec.yaml
+++ b/packages/wyatt_ui_layout/pubspec.yaml
@ -6,7 +6,7 @@ version: 0.1.1
 publish_to: https://git.wyatt-studio.fr/api/packages/Wyatt-FOSS/pub

 environment:
-  sdk: ">=3.0.0 <4.0.0"
+  sdk: ">=2.17.0 <3.0.0"

 dependencies:
  flutter: { sdk: flutter }