diff --git a/apps/daffio/src/app/api/api.module.ts b/apps/daffio/src/app/api/api.module.ts
index 59950ea7e5..8f126ce51e 100644
--- a/apps/daffio/src/app/api/api.module.ts
+++ b/apps/daffio/src/app/api/api.module.ts
@@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { DaffContainerModule } from '@daffodil/design';
import { DaffArticleModule } from '@daffodil/design/article';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioDocsApiRoutingModule } from './api-routing.module';
import { DaffioApiListModule } from './components/api-list/api-list.module';
diff --git a/apps/daffio/src/app/api/components/api-list/api-list.component.spec.ts b/apps/daffio/src/app/api/components/api-list/api-list.component.spec.ts
index c1b7c0913b..2f11e9f79d 100644
--- a/apps/daffio/src/app/api/components/api-list/api-list.component.spec.ts
+++ b/apps/daffio/src/app/api/components/api-list/api-list.component.spec.ts
@@ -7,7 +7,7 @@ import {
import { By } from '@angular/platform-browser';
import { RouterTestingModule } from '@angular/router/testing';
-import { DaffContainerModule } from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioApiListComponent } from './api-list.component';
import { DaffioApiReference } from '../../models/api-reference';
diff --git a/apps/daffio/src/app/api/components/api-list/api-list.module.ts b/apps/daffio/src/app/api/components/api-list/api-list.module.ts
index ff990da2c8..bc6497bd50 100644
--- a/apps/daffio/src/app/api/components/api-list/api-list.module.ts
+++ b/apps/daffio/src/app/api/components/api-list/api-list.module.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
-import { DaffContainerModule } from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioApiListComponent } from './api-list.component';
diff --git a/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.module.ts b/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.module.ts
index 7fcff9523d..8bdff92664 100644
--- a/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.module.ts
+++ b/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.module.ts
@@ -3,14 +3,13 @@ import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import {
- DaffContainerModule,
DaffCalloutModule,
DaffImageModule,
} from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioHomeCalloutPlatformsComponent } from './home-callout-platforms.component';
-
@NgModule({
imports: [
CommonModule,
diff --git a/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.module.ts b/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.module.ts
index 19619b5c79..edb75aa3f0 100644
--- a/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.module.ts
+++ b/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.module.ts
@@ -3,12 +3,12 @@ import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import {
- DaffContainerModule,
DaffCalloutModule,
DaffImageModule,
DaffCardModule,
} from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioHomeCalloutPwaComponent } from './home-callout-pwa.component';
diff --git a/apps/daffio/src/app/content/home/components/home-hero/home-hero.module.ts b/apps/daffio/src/app/content/home/components/home-hero/home-hero.module.ts
index 3d657a3e2a..074b521e5c 100644
--- a/apps/daffio/src/app/content/home/components/home-hero/home-hero.module.ts
+++ b/apps/daffio/src/app/content/home/components/home-hero/home-hero.module.ts
@@ -3,11 +3,11 @@ import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import {
- DaffContainerModule,
DaffHeroModule,
DaffImageModule,
} from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioHomeHeroComponent } from './home-hero.component';
diff --git a/apps/daffio/src/app/content/not-found/not-found.module.ts b/apps/daffio/src/app/content/not-found/not-found.module.ts
index bf365c7720..aa0ae98831 100644
--- a/apps/daffio/src/app/content/not-found/not-found.module.ts
+++ b/apps/daffio/src/app/content/not-found/not-found.module.ts
@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
-import {
- DaffHeroModule,
- DaffContainerModule,
-} from '@daffodil/design';
+import { DaffHeroModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioNotFoundComponent } from './component/not-found.component';
import { DaffioNotFoundRoutingModule } from './not-found-routing.module';
diff --git a/apps/daffio/src/app/content/support/support.module.ts b/apps/daffio/src/app/content/support/support.module.ts
index 2eb08ad1ca..50e9fd1910 100644
--- a/apps/daffio/src/app/content/support/support.module.ts
+++ b/apps/daffio/src/app/content/support/support.module.ts
@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
-import {
- DaffHeroModule,
- DaffContainerModule,
-} from '@daffodil/design';
+import { DaffHeroModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioSupportComponent } from './component/support.component';
import { DaffioSupportRoutingModule } from './support-routing.module';
diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.module.ts b/apps/daffio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.module.ts
index 9d99c78478..5e05c63d48 100644
--- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.module.ts
+++ b/apps/daffio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.module.ts
@@ -3,14 +3,13 @@ import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import {
- DaffContainerModule,
DaffCalloutModule,
DaffCardModule,
} from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioWhyPwaExamplesComponent } from './why-pwa-examples.component';
-
@NgModule({
imports: [
CommonModule,
diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-hero/why-pwa-hero.module.ts b/apps/daffio/src/app/content/why-pwa/components/why-pwa-hero/why-pwa-hero.module.ts
index c1a7dc33b0..2022d645cf 100644
--- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-hero/why-pwa-hero.module.ts
+++ b/apps/daffio/src/app/content/why-pwa/components/why-pwa-hero/why-pwa-hero.module.ts
@@ -2,11 +2,9 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
-import {
- DaffContainerModule,
- DaffHeroModule,
-} from '@daffodil/design';
+import { DaffHeroModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioWhyPwaHeroComponent } from './why-pwa-hero.component';
diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.module.ts b/apps/daffio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.module.ts
index f644e3ecc4..34e69cff67 100644
--- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.module.ts
+++ b/apps/daffio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.module.ts
@@ -4,14 +4,13 @@ import { RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import {
- DaffContainerModule,
DaffCalloutModule,
DaffCardModule,
} from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioWhyPwaOverviewComponent } from './why-pwa-overview.component';
-
@NgModule({
imports: [
CommonModule,
diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-solution/why-pwa-solution.module.ts b/apps/daffio/src/app/content/why-pwa/components/why-pwa-solution/why-pwa-solution.module.ts
index 42673dae31..677678ae3c 100644
--- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-solution/why-pwa-solution.module.ts
+++ b/apps/daffio/src/app/content/why-pwa/components/why-pwa-solution/why-pwa-solution.module.ts
@@ -3,10 +3,10 @@ import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import {
- DaffContainerModule,
DaffCalloutModule,
DaffListModule,
} from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioWhyPwaSolutionComponent } from './why-pwa-solution.component';
import { DaffioFeatureComparisonModule } from '../feature-comparison/feature-comparison.module';
diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.module.ts b/apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.module.ts
index a6c5caeae2..e96b0226c5 100644
--- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.module.ts
+++ b/apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.module.ts
@@ -4,14 +4,13 @@ import { RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import {
- DaffContainerModule,
DaffCalloutModule,
DaffCardModule,
} from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioWhyPwaStatsComponent } from './why-pwa-stats.component';
-
@NgModule({
imports: [
CommonModule,
diff --git a/apps/daffio/src/app/core/footer/footer.module.ts b/apps/daffio/src/app/core/footer/footer.module.ts
index 1ae5fd7cf7..ec935ac831 100644
--- a/apps/daffio/src/app/core/footer/footer.module.ts
+++ b/apps/daffio/src/app/core/footer/footer.module.ts
@@ -11,10 +11,10 @@ import {
DaffCalloutModule,
DaffListModule,
DaffButtonSetModule,
- DaffContainerModule,
DaffInputModule,
} from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioSimpleFooterComponent } from './simple-footer/simple-footer.component';
import { DaffioSubFooterComponent } from './sub-footer/sub-footer.component';
diff --git a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.spec.ts b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.spec.ts
index f61f68f8ae..3d1f78f8a9 100644
--- a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.spec.ts
+++ b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.spec.ts
@@ -15,7 +15,7 @@ import {
DaffLogoModule,
DaffCopyrightModule,
} from '@daffodil/branding';
-import { DaffContainerModule } from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioSimpleFooterComponent } from './simple-footer.component';
diff --git a/apps/daffio/src/app/core/header/components/header.module.ts b/apps/daffio/src/app/core/header/components/header.module.ts
index f6790b0d13..0169abfc43 100644
--- a/apps/daffio/src/app/core/header/components/header.module.ts
+++ b/apps/daffio/src/app/core/header/components/header.module.ts
@@ -2,10 +2,8 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
-import {
- DaffNavbarModule,
- DaffContainerModule,
-} from '@daffodil/design';
+import { DaffNavbarModule } from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioHeaderComponent } from './header/header.component';
import { DaffioHeaderItemDirective } from './header-item/header-item.directive';
diff --git a/apps/daffio/src/app/core/header/components/header/header.component.spec.ts b/apps/daffio/src/app/core/header/components/header/header.component.spec.ts
index 07d0a822eb..2384e402a6 100644
--- a/apps/daffio/src/app/core/header/components/header/header.component.spec.ts
+++ b/apps/daffio/src/app/core/header/components/header/header.component.spec.ts
@@ -5,10 +5,8 @@ import {
} from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import {
- DaffContainerModule,
- DaffNavbarModule,
-} from '@daffodil/design';
+import { DaffNavbarModule } from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioHeaderComponent } from './header.component';
diff --git a/apps/daffio/src/app/newsletter/newsletter.module.ts b/apps/daffio/src/app/newsletter/newsletter.module.ts
index 69e2adb6e4..ab706d0daf 100644
--- a/apps/daffio/src/app/newsletter/newsletter.module.ts
+++ b/apps/daffio/src/app/newsletter/newsletter.module.ts
@@ -1,11 +1,9 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import {
- DaffInputModule,
- DaffContainerModule,
-} from '@daffodil/design';
+import { DaffInputModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffioNewsletterComponent } from './newsletter.component';
diff --git a/apps/demo/src/app/cart/cart.module.ts b/apps/demo/src/app/cart/cart.module.ts
index f132cfb621..aa2d413f0b 100644
--- a/apps/demo/src/app/cart/cart.module.ts
+++ b/apps/demo/src/app/cart/cart.module.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { DaffLoadingIconModule } from '@daffodil/design';
-import { DaffContainerModule } from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DemoCartRoutingModule } from './cart-routing.module';
import { CartModule } from './components/cart/cart.module';
diff --git a/apps/demo/src/app/cart/pages/cart-view/cart-view.component.spec.ts b/apps/demo/src/app/cart/pages/cart-view/cart-view.component.spec.ts
index 9964c9aa33..9293ba7d6d 100644
--- a/apps/demo/src/app/cart/pages/cart-view/cart-view.component.spec.ts
+++ b/apps/demo/src/app/cart/pages/cart-view/cart-view.component.spec.ts
@@ -16,10 +16,8 @@ import {
MockDaffCartFacade,
} from '@daffodil/cart/state/testing';
import { DaffCartFactory } from '@daffodil/cart/testing';
-import {
- DaffContainerModule,
- DaffLoadingIconModule,
-} from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DemoCartViewComponent } from './cart-view.component';
diff --git a/apps/demo/src/app/category/pages/category-view/category-view.component.spec.ts b/apps/demo/src/app/category/pages/category-view/category-view.component.spec.ts
index 85a94ae486..1e1efb7e93 100644
--- a/apps/demo/src/app/category/pages/category-view/category-view.component.spec.ts
+++ b/apps/demo/src/app/category/pages/category-view/category-view.component.spec.ts
@@ -11,10 +11,8 @@ import {
MockDaffCategoryFacade,
} from '@daffodil/category/state/testing';
import { DaffCategoryFactory } from '@daffodil/category/testing';
-import {
- DaffContainerModule,
- DaffLoadingIconModule,
-} from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffProduct } from '@daffodil/product';
import {
DaffProductFactory,
@@ -25,7 +23,6 @@ import { CategoryViewComponent } from './category-view.component';
import { ProductGridComponent } from '../../../product/components/product-grid/product-grid.component';
import { ProductGridModule } from '../../../product/components/product-grid/product-grid.module';
-
describe('CategoryViewComponent', () => {
let categoryFactory: DaffCategoryFactory;
let productFactory: DaffProductFactory;
diff --git a/apps/demo/src/app/category/pages/category-view/category-view.module.ts b/apps/demo/src/app/category/pages/category-view/category-view.module.ts
index edde094bc9..a3006a1790 100644
--- a/apps/demo/src/app/category/pages/category-view/category-view.module.ts
+++ b/apps/demo/src/app/category/pages/category-view/category-view.module.ts
@@ -2,10 +2,8 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { DaffCategoryStateModule } from '@daffodil/category/state';
-import {
- DaffContainerModule,
- DaffLoadingIconModule,
-} from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffProductStateModule } from '@daffodil/product/state';
import { CategoryViewComponent } from './category-view.component';
diff --git a/apps/demo/src/app/checkout/checkout.module.ts b/apps/demo/src/app/checkout/checkout.module.ts
index f1a1a81f8e..8e45b80207 100644
--- a/apps/demo/src/app/checkout/checkout.module.ts
+++ b/apps/demo/src/app/checkout/checkout.module.ts
@@ -6,8 +6,8 @@ import { StateCheckoutModule } from '@daffodil/checkout';
import {
DaffAccordionModule,
DaffLoadingIconModule,
- DaffContainerModule,
} from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { CheckoutRoutingModule } from './checkout-routing.module';
import { DemoCheckoutStateModule } from './checkout-state.module';
diff --git a/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.spec.ts b/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.spec.ts
index 7ac3653c36..fffd093759 100644
--- a/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.spec.ts
+++ b/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.spec.ts
@@ -41,9 +41,9 @@ import { DaffAddressFactory } from '@daffodil/core/testing';
import {
DaffAccordionModule,
DaffAccordionItemComponent,
- DaffContainerModule,
DaffLoadingIconModule,
} from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { CheckoutViewComponent } from './checkout-view.component';
import { ShowPaymentView } from '../../actions/payment.actions';
diff --git a/apps/demo/src/app/core/footer/footer.component.spec.ts b/apps/demo/src/app/core/footer/footer.component.spec.ts
index 9dcd1ce89f..33865576dc 100644
--- a/apps/demo/src/app/core/footer/footer.component.spec.ts
+++ b/apps/demo/src/app/core/footer/footer.component.spec.ts
@@ -8,10 +8,10 @@ import { RouterTestingModule } from '@angular/router/testing';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import {
- DaffContainerModule,
DaffListModule,
DaffButtonSetModule,
} from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { FooterComponent } from './footer.component';
diff --git a/apps/demo/src/app/core/footer/footer.module.ts b/apps/demo/src/app/core/footer/footer.module.ts
index 32c897fa8a..e20acdcfe8 100644
--- a/apps/demo/src/app/core/footer/footer.module.ts
+++ b/apps/demo/src/app/core/footer/footer.module.ts
@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import {
- DaffListModule,
- DaffContainerModule,
-} from '@daffodil/design';
+import { DaffListModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { FooterComponent } from './footer.component';
diff --git a/apps/demo/src/app/newsletter/newsletter.component.spec.ts b/apps/demo/src/app/newsletter/newsletter.component.spec.ts
index e2626a98f7..fa32880a31 100644
--- a/apps/demo/src/app/newsletter/newsletter.component.spec.ts
+++ b/apps/demo/src/app/newsletter/newsletter.component.spec.ts
@@ -6,13 +6,12 @@ import {
import { ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
-import { DaffContainerModule } from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import {
DaffNewsletterStateTestingModule,
MockDaffNewsletterFacade,
} from '@daffodil/newsletter/state/testing';
-
import { NewsletterComponent } from './newsletter.component';
describe('NewsletterComponent', () => {
diff --git a/apps/demo/src/app/newsletter/newsletter.module.ts b/apps/demo/src/app/newsletter/newsletter.module.ts
index 60d0e7bf3d..d3a75e3ac8 100644
--- a/apps/demo/src/app/newsletter/newsletter.module.ts
+++ b/apps/demo/src/app/newsletter/newsletter.module.ts
@@ -2,11 +2,9 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
-import {
- DaffInputModule,
- DaffContainerModule,
-} from '@daffodil/design';
+import { DaffInputModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffNewsletterStateModule } from '@daffodil/newsletter/state';
import { NewsletterComponent } from './newsletter.component';
diff --git a/apps/demo/src/app/product/components/product/product.component.spec.ts b/apps/demo/src/app/product/components/product/product.component.spec.ts
index dded7ee754..b1592179bd 100644
--- a/apps/demo/src/app/product/components/product/product.component.spec.ts
+++ b/apps/demo/src/app/product/components/product/product.component.spec.ts
@@ -15,15 +15,14 @@ import { RouterTestingModule } from '@angular/router/testing';
import {
DaffAccordionModule,
DaffQtyDropdownModule,
- DaffContainerModule,
DaffQtyDropdownComponent,
} from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffProduct } from '@daffodil/product';
import { DaffProductFactory } from '@daffodil/product/testing';
import { ProductComponent } from './product.component';
-
@Component({ template: '' })
class WrapperComponent {
productValue: DaffProduct;
diff --git a/apps/demo/src/app/product/components/product/product.module.ts b/apps/demo/src/app/product/components/product/product.module.ts
index ac7e308444..52bd87c24d 100644
--- a/apps/demo/src/app/product/components/product/product.module.ts
+++ b/apps/demo/src/app/product/components/product/product.module.ts
@@ -5,14 +5,13 @@ import { NgModule } from '@angular/core';
import {
DaffQtyDropdownModule,
DaffAccordionModule,
- DaffContainerModule,
DaffLoadingIconModule,
} from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { ProductComponent } from './product.component';
import { ImageGalleryModule } from '../../../core/image-gallery/image-gallery.module';
-
@NgModule({
imports: [
CommonModule,
diff --git a/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.component.spec.ts b/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.component.spec.ts
index af08cf8cff..3470ed81f1 100644
--- a/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.component.spec.ts
+++ b/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.component.spec.ts
@@ -5,10 +5,8 @@ import {
} from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import {
- DaffContainerModule,
- DaffLoadingIconModule,
-} from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import {
DaffProductStateTestingModule,
MockDaffProductGridFacade,
diff --git a/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.module.ts b/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.module.ts
index 9e355c2977..54b79dca2e 100644
--- a/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.module.ts
+++ b/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.module.ts
@@ -1,10 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import {
- DaffContainerModule,
- DaffLoadingIconModule,
-} from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DaffProductStateModule } from '@daffodil/product/state';
import { ProductGridViewComponent } from './product-grid-view.component';
diff --git a/apps/demo/src/app/thank-you/pages/thank-you-view.component.spec.ts b/apps/demo/src/app/thank-you/pages/thank-you-view.component.spec.ts
index 5a53a1781e..2f83f8be52 100644
--- a/apps/demo/src/app/thank-you/pages/thank-you-view.component.spec.ts
+++ b/apps/demo/src/app/thank-you/pages/thank-you-view.component.spec.ts
@@ -24,9 +24,11 @@ import {
DaffAccordionModule,
DaffAccordionItemComponent,
DaffLoadingIconModule,
- DaffContainerModule,
- DaffContainerComponent,
} from '@daffodil/design';
+import {
+ DaffContainerComponent,
+ DaffContainerModule,
+} from '@daffodil/design/container';
import { ThankYouViewComponent } from './thank-you-view.component';
diff --git a/apps/demo/src/app/thank-you/thank-you.module.ts b/apps/demo/src/app/thank-you/thank-you.module.ts
index e3a89c558f..28194b49d6 100644
--- a/apps/demo/src/app/thank-you/thank-you.module.ts
+++ b/apps/demo/src/app/thank-you/thank-you.module.ts
@@ -3,10 +3,10 @@ import { NgModule } from '@angular/core';
import { StateCheckoutModule } from '@daffodil/checkout';
import {
- DaffContainerModule,
DaffAccordionModule,
DaffLoadingIconModule,
} from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { ThankYouComponentModule } from './components/thank-you/thank-you.module';
import { ThankYouViewComponent } from './pages/thank-you-view.component';
diff --git a/apps/design-land/src/app/container/container.module.ts b/apps/design-land/src/app/container/container.module.ts
index 98085a48b4..8f67fb9233 100644
--- a/apps/design-land/src/app/container/container.module.ts
+++ b/apps/design-land/src/app/container/container.module.ts
@@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { DaffContainerModule } from '@daffodil/design';
import { DaffArticleModule } from '@daffodil/design/article';
+import { DaffContainerModule } from '@daffodil/design/container';
import { DesignLandContainerRoutingModule } from './container-routing.module';
import { DesignLandContainerComponent } from './container.component';
diff --git a/libs/design/callout/examples/src/callout-text-alignment/callout-text-alignment.module.ts b/libs/design/callout/examples/src/callout-text-alignment/callout-text-alignment.module.ts
index 0e9dfcbc2a..4b107a1748 100644
--- a/libs/design/callout/examples/src/callout-text-alignment/callout-text-alignment.module.ts
+++ b/libs/design/callout/examples/src/callout-text-alignment/callout-text-alignment.module.ts
@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import {
- DaffCalloutModule,
- DaffContainerModule,
-} from '@daffodil/design';
+import { DaffCalloutModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { CalloutTextAlignmentComponent } from './callout-text-alignment.component';
diff --git a/libs/design/callout/examples/src/callout-with-grid/callout-with-grid.module.ts b/libs/design/callout/examples/src/callout-with-grid/callout-with-grid.module.ts
index 064f04a675..074d1c6622 100644
--- a/libs/design/callout/examples/src/callout-with-grid/callout-with-grid.module.ts
+++ b/libs/design/callout/examples/src/callout-with-grid/callout-with-grid.module.ts
@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import {
- DaffCalloutModule,
- DaffContainerModule,
-} from '@daffodil/design';
+import { DaffCalloutModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { CalloutWithGridComponent } from './callout-with-grid.component';
diff --git a/libs/design/callout/examples/src/compact-callout/compact-callout.module.ts b/libs/design/callout/examples/src/compact-callout/compact-callout.module.ts
index a3d473158e..a0a8f6578c 100644
--- a/libs/design/callout/examples/src/compact-callout/compact-callout.module.ts
+++ b/libs/design/callout/examples/src/compact-callout/compact-callout.module.ts
@@ -2,11 +2,9 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import {
- DaffCalloutModule,
- DaffContainerModule,
-} from '@daffodil/design';
+import { DaffCalloutModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { CompactCalloutComponent } from './compact-callout.component';
diff --git a/libs/design/src/atoms/container/README.md b/libs/design/container/README.md
similarity index 100%
rename from libs/design/src/atoms/container/README.md
rename to libs/design/container/README.md
diff --git a/libs/design/container/examples/src/container-sizes/container-sizes.module.ts b/libs/design/container/examples/src/container-sizes/container-sizes.module.ts
index ecb1702c5e..c01ca5b6b5 100644
--- a/libs/design/container/examples/src/container-sizes/container-sizes.module.ts
+++ b/libs/design/container/examples/src/container-sizes/container-sizes.module.ts
@@ -2,11 +2,10 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
-import { DaffContainerModule } from '@daffodil/design';
+import { DaffContainerModule } from '@daffodil/design/container';
import { ContainerSizesComponent } from './container-sizes.component';
-
@NgModule({
declarations: [
ContainerSizesComponent,
diff --git a/libs/design/container/ng-package.json b/libs/design/container/ng-package.json
new file mode 100644
index 0000000000..5ad3f8676c
--- /dev/null
+++ b/libs/design/container/ng-package.json
@@ -0,0 +1,9 @@
+{
+ "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+ "dest": "../../dist/design/container",
+ "deleteDestPath": false,
+ "lib": {
+ "entryFile": "src/index.ts",
+ "styleIncludePaths": ["../src/scss"]
+ }
+}
\ No newline at end of file
diff --git a/libs/design/src/atoms/container/container.module.ts b/libs/design/container/src/container.module.ts
similarity index 78%
rename from libs/design/src/atoms/container/container.module.ts
rename to libs/design/container/src/container.module.ts
index bc1e584c71..de5b09c37c 100644
--- a/libs/design/src/atoms/container/container.module.ts
+++ b/libs/design/container/src/container.module.ts
@@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { DaffContainerComponent } from './container.component';
+import { DaffContainerComponent } from './container/container.component';
@NgModule({
imports: [
diff --git a/libs/design/src/atoms/container/container.component.scss b/libs/design/container/src/container/container.component.scss
similarity index 100%
rename from libs/design/src/atoms/container/container.component.scss
rename to libs/design/container/src/container/container.component.scss
diff --git a/libs/design/src/atoms/container/container.component.spec.ts b/libs/design/container/src/container/container.component.spec.ts
similarity index 96%
rename from libs/design/src/atoms/container/container.component.spec.ts
rename to libs/design/container/src/container/container.component.spec.ts
index b69d7177bd..0c429e9a18 100644
--- a/libs/design/src/atoms/container/container.component.spec.ts
+++ b/libs/design/container/src/container/container.component.spec.ts
@@ -9,8 +9,9 @@ import {
} from '@angular/core/testing';
import { By } from '@angular/platform-browser';
+import { DaffSizeAllType } from '@daffodil/design';
+
import { DaffContainerComponent } from './container.component';
-import { DaffSizeAllType } from '../../core/sizeable/sizeable';
@Component({
template: ``,
diff --git a/libs/design/src/atoms/container/container.component.ts b/libs/design/container/src/container/container.component.ts
similarity index 91%
rename from libs/design/src/atoms/container/container.component.ts
rename to libs/design/container/src/container/container.component.ts
index df12c170d4..ad369b4267 100644
--- a/libs/design/src/atoms/container/container.component.ts
+++ b/libs/design/container/src/container/container.component.ts
@@ -8,10 +8,10 @@ import {
} from '@angular/core';
import {
- DaffSizeAllType,
DaffSizeable,
-} from '../../core/sizeable/sizeable';
-import { daffSizeMixin } from '../../core/sizeable/sizeable-mixin';
+ DaffSizeAllType,
+ daffSizeMixin,
+} from '@daffodil/design';
/**
* An _elementRef and an instance of renderer2 are needed for the Sizeable mixin
diff --git a/libs/design/container/src/index.ts b/libs/design/container/src/index.ts
new file mode 100644
index 0000000000..4aaf8f92ed
--- /dev/null
+++ b/libs/design/container/src/index.ts
@@ -0,0 +1 @@
+export * from './public_api';
diff --git a/libs/design/container/src/public_api.ts b/libs/design/container/src/public_api.ts
new file mode 100644
index 0000000000..785b975f63
--- /dev/null
+++ b/libs/design/container/src/public_api.ts
@@ -0,0 +1,2 @@
+export { DaffContainerComponent } from './container/container.component';
+export { DaffContainerModule } from './container.module';
diff --git a/libs/design/hero/examples/src/hero-text-alignment/hero-text-alignment.module.ts b/libs/design/hero/examples/src/hero-text-alignment/hero-text-alignment.module.ts
index 75e5b4d5ef..ee0c87ccef 100644
--- a/libs/design/hero/examples/src/hero-text-alignment/hero-text-alignment.module.ts
+++ b/libs/design/hero/examples/src/hero-text-alignment/hero-text-alignment.module.ts
@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import {
- DaffHeroModule,
- DaffContainerModule,
-} from '@daffodil/design';
+import { DaffHeroModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { HeroTextAlignmentComponent } from './hero-text-alignment.component';
diff --git a/libs/design/hero/examples/src/hero-with-grid/hero-with-grid.module.ts b/libs/design/hero/examples/src/hero-with-grid/hero-with-grid.module.ts
index 87cac7e147..6659c2dc52 100644
--- a/libs/design/hero/examples/src/hero-with-grid/hero-with-grid.module.ts
+++ b/libs/design/hero/examples/src/hero-with-grid/hero-with-grid.module.ts
@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import {
- DaffHeroModule,
- DaffContainerModule,
-} from '@daffodil/design';
+import { DaffHeroModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { HeroWithGridComponent } from './hero-with-grid.component';
diff --git a/libs/design/navbar/examples/src/basic-navbar/basic-navbar.module.ts b/libs/design/navbar/examples/src/basic-navbar/basic-navbar.module.ts
index 028986fa39..25bd177343 100644
--- a/libs/design/navbar/examples/src/basic-navbar/basic-navbar.module.ts
+++ b/libs/design/navbar/examples/src/basic-navbar/basic-navbar.module.ts
@@ -1,11 +1,9 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import {
- DaffContainerModule,
- DaffNavbarModule,
-} from '@daffodil/design';
+import { DaffNavbarModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { BasicNavbarComponent } from './basic-navbar.component';
diff --git a/libs/design/navbar/examples/src/contained-navbar/contained-navbar.module.ts b/libs/design/navbar/examples/src/contained-navbar/contained-navbar.module.ts
index 18b8b0d9c0..05fe659428 100644
--- a/libs/design/navbar/examples/src/contained-navbar/contained-navbar.module.ts
+++ b/libs/design/navbar/examples/src/contained-navbar/contained-navbar.module.ts
@@ -1,11 +1,9 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import {
- DaffContainerModule,
- DaffNavbarModule,
-} from '@daffodil/design';
+import { DaffNavbarModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
import { ContainedNavbarComponent } from './contained-navbar.component';
diff --git a/libs/design/src/atoms/container/public_api.ts b/libs/design/src/atoms/container/public_api.ts
deleted file mode 100644
index 81dfc02b07..0000000000
--- a/libs/design/src/atoms/container/public_api.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './container.component';
-export { DaffContainerModule } from './container.module';
diff --git a/libs/design/src/public_api.ts b/libs/design/src/public_api.ts
index 05fa2bd21f..9d342a0881 100644
--- a/libs/design/src/public_api.ts
+++ b/libs/design/src/public_api.ts
@@ -11,7 +11,6 @@ export * from './atoms/form/input/public_api';
export * from './atoms/form/native-select/public_api';
export * from './atoms/form/checkbox/public_api';
export * from './atoms/form/quantity-field/public_api';
-export * from './atoms/container/public_api';
export * from './atoms/loading-icon/public_api';
export * from './atoms/progress-indicator/public_api';
export * from './atoms/form/radio/public_api';