From 9dd5f1fadd008719f2f517e92ba1e25a0cff4731 Mon Sep 17 00:00:00 2001
From: Matt Bruce <matt.bruce@verizon.com>
Date: Tue, 2 May 2023 11:32:21 -0500
Subject: [PATCH] refactored controllers to show border/touch areas

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
---
 VDSSample.xcodeproj/project.pbxproj           |  2 +-
 .../ViewControllers/BadgeViewController.swift | 30 +++----
 .../ViewControllers/BaseViewController.swift  | 16 +++-
 .../ButtonGroupViewController.swift           | 49 +++++-----
 .../ButtonViewController.swift                | 37 ++++----
 .../CheckBoxGroupViewController.swift         | 26 +++---
 .../CheckboxViewController.swift              | 46 +++++-----
 .../ViewControllers/IconViewController.swift  | 32 ++++---
 .../InputFieldViewController.swift            | 90 +++++++++----------
 .../ViewControllers/LabelViewController.swift | 30 +++----
 .../ViewControllers/LineViewController.swift  | 12 +--
 .../NotificationViewController.swift          | 45 +++++-----
 .../RadioBoxGroupViewController.swift         | 26 +++---
 .../RadioButtonViewController.swift           | 28 +++---
 .../RadioSwatchGroupViewController.swift      | 26 +++---
 .../TextAreaViewController.swift              | 71 ++++++++-------
 .../TextLinkCaretViewController.swift         | 29 +++---
 .../TextLinkViewController.swift              | 32 ++++---
 .../TileContainerViewController.swift         | 54 +++++------
 .../TileletViewController.swift               | 61 +++++++------
 .../TitleLockupViewController.swift           | 40 ++++-----
 .../ToggleViewController.swift                | 38 ++++----
 .../TooltipViewController.swift               | 40 ++++-----
 .../TrailingTooltipLabel.swift                | 52 ++++++-----
 24 files changed, 452 insertions(+), 460 deletions(-)

diff --git a/VDSSample.xcodeproj/project.pbxproj b/VDSSample.xcodeproj/project.pbxproj
index a262153..3720dbb 100644
--- a/VDSSample.xcodeproj/project.pbxproj
+++ b/VDSSample.xcodeproj/project.pbxproj
@@ -294,7 +294,6 @@
 				EAF7F09B2899B92400B287F5 /* CheckboxViewController.swift */,
 				EA985C00296CC21C00F2FF2E /* IconViewController.swift */,
 				EAA5EEAC28EB6924003B3210 /* InputFieldViewController.swift */,
-				EAC9257F29119FC400091998 /* TextLinkViewController.swift */,
 				EAB1D2D328AC409F00DAE764 /* LabelViewController.swift */,
 				44604AD829CE1CF900E62B51 /* LineViewController.swift */,
 				445BA07929C088470036A7C5 /* NotificationViewController.swift */,
@@ -302,6 +301,7 @@
 				EAF7F11928A14A0E00B287F5 /* RadioButtonViewController.swift */,
 				EA84F76128BE4AE500D67ABC /* RadioSwatchGroupViewController.swift */,
 				EA985C24296E06EA00F2FF2E /* TextAreaViewController.swift */,
+				EAC9257F29119FC400091998 /* TextLinkViewController.swift */,
 				EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */,
 				EA5E304F294D11540082B959 /* TileContainerViewController.swift */,
 				EA5E305B295111050082B959 /* TileletViewController.swift */,
diff --git a/VDSSample/ViewControllers/BadgeViewController.swift b/VDSSample/ViewControllers/BadgeViewController.swift
index 7b101df..e1c55fe 100644
--- a/VDSSample/ViewControllers/BadgeViewController.swift
+++ b/VDSSample/ViewControllers/BadgeViewController.swift
@@ -11,7 +11,7 @@ import VDS
 import VDSColorTokens
 import Combine
 
-class  BadgeViewController: BaseViewController {
+class  BadgeViewController: BaseViewController<Badge> {
             
     enum NumberOfLines: String, CaseIterable {
         case unlimited
@@ -51,20 +51,18 @@ class  BadgeViewController: BaseViewController {
     
     var textField = TextField()
     var maxWidthTextField = NumericField()
-    var badge = Badge()
     
     override func allTextFields() -> [TextField]? { [textField, maxWidthTextField] }
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        
-        addContentTopView(view: .makeWrapper(for: badge))
-        setupForm()
+        addContentTopView(view: .makeWrapper(for: component))
         setupPicker()
         setupModel()
     }
     
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         addFormRow(label: "Fill Color", view: fillColorPickerSelectorView)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Text", view: textField)
@@ -74,7 +72,7 @@ class  BadgeViewController: BaseViewController {
         textField
             .textPublisher
             .sink { [weak self] text in
-                self?.badge.text = text
+                self?.component.text = text
             }.store(in: &subscribers)
 
         maxWidthTextField
@@ -84,33 +82,33 @@ class  BadgeViewController: BaseViewController {
                 if let n = NumberFormatter().number(from: text) {
                     float = CGFloat(truncating: n)
                 }
-                self?.badge.maxWidth = float
+                self?.component.maxWidth = float
             }.store(in: &subscribers)
     }
     
     func setupModel() {
-        badge.fillColor = .red
-        badge.text = "Terms and conditions"
-        badge.numberOfLines = 1
+        component.fillColor = .red
+        component.text = "Terms and conditions"
+        component.numberOfLines = 1
         
         //setup UI
-        surfacePickerSelectorView.text = badge.surface.rawValue
-        textField.text = badge.text
+        surfacePickerSelectorView.text = component.surface.rawValue
+        textField.text = component.text
     }
     
     func setupPicker(){
 
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.badge.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }        
         
         fillColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.badge.fillColor = item
+            self?.component.fillColor = item
         }
         
         numberOfLinesPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.badge.numberOfLines = item.intValue
+            self?.component.numberOfLines = item.intValue
         }
     }
 }
diff --git a/VDSSample/ViewControllers/BaseViewController.swift b/VDSSample/ViewControllers/BaseViewController.swift
index d24647d..06fc770 100644
--- a/VDSSample/ViewControllers/BaseViewController.swift
+++ b/VDSSample/ViewControllers/BaseViewController.swift
@@ -10,7 +10,7 @@ import UIKit
 import Combine
 import VDS
 
-public class BaseViewController: UIViewController, Initable {
+public class BaseViewController<Component: UIView>: UIViewController, Initable {
     deinit {
         print("\(Self.self) deinit")
     }
@@ -71,6 +71,14 @@ public class BaseViewController: UIViewController, Initable {
         }
     }()
 
+    public var component = Component()
+    
+    lazy var debugViewSwitch = Toggle().with{
+        $0.onChange =  { [weak self] sender in
+            self?.component.debugBorder(show: sender.isOn, color: .blue)
+        }
+    }
+
     public var contentView: UIView = {
         return UIView().with {
             $0.translatesAutoresizingMaskIntoConstraints = false
@@ -136,10 +144,16 @@ public class BaseViewController: UIViewController, Initable {
         picker.pinLeading()
         picker.pinTrailing()
         picker.isHidden = true
+        
+        setupForm()
     }
 
     private let scrollViewController = ScrollViewController()
 
+    public func setupForm() {
+        addFormRow(label: "Show Bounds", view: .makeWrapper(for: debugViewSwitch))
+    }
+    
     public func scrollToBottom() {
         let bottomOffset = CGPoint(x: 0, y: scrollViewController.scrollView.contentSize.height - scrollViewController.scrollView.bounds.height + scrollViewController.scrollView.contentInset.bottom)
         scrollViewController.scrollView.setContentOffset(bottomOffset, animated: true)
diff --git a/VDSSample/ViewControllers/ButtonGroupViewController.swift b/VDSSample/ViewControllers/ButtonGroupViewController.swift
index 29663d6..5e81102 100644
--- a/VDSSample/ViewControllers/ButtonGroupViewController.swift
+++ b/VDSSample/ViewControllers/ButtonGroupViewController.swift
@@ -10,7 +10,7 @@ import UIKit
 import VDS
 import VDSColorTokens
 
-class ButtonGroupViewController: BaseViewController {
+class ButtonGroupViewController: BaseViewController<ButtonGroup> {
     var collectionView: UICollectionView!
     
     public enum RowQuantity: String, CaseIterable {
@@ -64,7 +64,6 @@ class ButtonGroupViewController: BaseViewController {
     var widthTextField = NumericField()
     var percentageTextField = NumericField()
 
-    let largeButtonGroup = ButtonGroup()
     let smallButtonGroup = ButtonGroup()
     let largeLabel = Label().with{ $0.text = "Large Button Group"; $0.textStyle = .boldTitleSmall }
     let smallLabel = Label().with{ $0.text = "Small Button Group"; $0.textStyle = .boldTitleSmall }
@@ -74,12 +73,12 @@ class ButtonGroupViewController: BaseViewController {
     override func viewDidLoad() {
         super.viewDidLoad()
         
-        let stackView = UIStackView(arrangedSubviews: [largeLabel, largeButtonGroup, smallLabel, smallButtonGroup])
-        stackView.setCustomSpacing(50, after: largeButtonGroup)
+        let stackView = UIStackView(arrangedSubviews: [largeLabel, component, smallLabel, smallButtonGroup])
+        stackView.setCustomSpacing(50, after: component)
         stackView.axis = .vertical
         stackView.spacing = 30
         
-        largeButtonGroup.buttons = [
+        component.buttons = [
             makeButton("Secondary", label: label).with{ $0.use = .secondary },
             makeButton("Primary", label: label),
             makeTextLink("Large Text Link", label: label),
@@ -99,12 +98,18 @@ class ButtonGroupViewController: BaseViewController {
         percentageTextField.isEnabled = false
         percentageTextField.placeholder = "Active RowQty != none"
         widthTextField.placeholder = "Active RowQty == none"
-        setupForm()
         setupPicker()
         setupModel()
+        
+        debugViewSwitch.onChange =  { [weak self] sender in
+            self?.component.debugBorder(show: sender.isOn, color: .blue)
+            self?.smallButtonGroup.debugBorder(show: sender.isOn, color: .blue)
+        }
+
     }
     
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         addFormRow(label: "Button Action", view: label)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
@@ -116,7 +121,7 @@ class ButtonGroupViewController: BaseViewController {
         disabledSwitch.onChange = { [weak self] sender in
             self?.largeLabel.disabled = sender.isOn
             self?.smallLabel.disabled = sender.isOn
-            self?.largeButtonGroup.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
             self?.smallButtonGroup.disabled = sender.isOn
         }
 
@@ -124,24 +129,24 @@ class ButtonGroupViewController: BaseViewController {
             .textPublisher
             .sink { [weak self] text in
                 if let n = NumberFormatter().number(from: text) {
-                    self?.largeButtonGroup.buttonWidth = CGFloat(truncating: n)
+                    self?.component.buttonWidth = CGFloat(truncating: n)
                     self?.smallButtonGroup.buttonWidth = CGFloat(truncating: n)
                     self?.percentageTextField.text = ""
                 } else {
-                    self?.largeButtonGroup.buttonWidth = nil
+                    self?.component.buttonWidth = nil
                 }
             }.store(in: &subscribers)
         
         percentageTextField
             .textPublisher
             .sink { [weak self] text in
-                let rowQty = self?.largeButtonGroup.rowQuantity ?? 0
+                let rowQty = self?.component.rowQuantity ?? 0
                 if let n = NumberFormatter().number(from: text), n.intValue <= 100, rowQty > 0 {
-                    self?.largeButtonGroup.buttonPercentage = CGFloat(truncating: n)
+                    self?.component.buttonPercentage = CGFloat(truncating: n)
                     self?.smallButtonGroup.buttonPercentage = CGFloat(truncating: n)
                     self?.widthTextField.text = ""
                 } else {
-                    self?.largeButtonGroup.buttonPercentage = nil
+                    self?.component.buttonPercentage = nil
                     self?.smallButtonGroup.buttonPercentage = nil
                 }
             }.store(in: &subscribers)
@@ -150,10 +155,10 @@ class ButtonGroupViewController: BaseViewController {
         
     func setupModel() {
         //setup UI
-        surfacePickerSelectorView.text = largeButtonGroup.surface.rawValue
-        buttonPositionSelectorView.text = largeButtonGroup.buttonPosition.rawValue
-        disabledSwitch.isOn = largeButtonGroup.disabled
-        rowQuantitySelectorView.text = RowQuantity(quantity: largeButtonGroup.rowQuantity).rawValue
+        surfacePickerSelectorView.text = component.surface.rawValue
+        buttonPositionSelectorView.text = component.buttonPosition.rawValue
+        disabledSwitch.isOn = component.disabled
+        rowQuantitySelectorView.text = RowQuantity(quantity: component.rowQuantity).rawValue
         widthTextField.text = ""
     }
       
@@ -162,13 +167,13 @@ class ButtonGroupViewController: BaseViewController {
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.largeLabel.surface = item
             self?.smallLabel.surface = item
-            self?.largeButtonGroup.surface = item
+            self?.component.surface = item
             self?.smallButtonGroup.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
         buttonPositionSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.largeButtonGroup.buttonPosition = item
+            self?.component.buttonPosition = item
             self?.smallButtonGroup.buttonPosition = item
         }
         
@@ -180,15 +185,15 @@ class ButtonGroupViewController: BaseViewController {
                 self?.percentageTextField.text = ""
             } else {
                 self?.widthTextField.text = ""
-                self?.largeButtonGroup.buttonWidth = nil
+                self?.component.buttonWidth = nil
                 self?.smallButtonGroup.buttonWidth = nil
             }
             
             if UIDevice.isIPad {
-                self?.largeButtonGroup.rowQuantityTablet = item.intValue
+                self?.component.rowQuantityTablet = item.intValue
                 self?.smallButtonGroup.rowQuantityTablet = item.intValue
             } else {
-                self?.largeButtonGroup.rowQuantityPhone = item.intValue
+                self?.component.rowQuantityPhone = item.intValue
                 self?.smallButtonGroup.rowQuantityPhone = item.intValue
             }
         }
diff --git a/VDSSample/ViewControllers/ButtonViewController.swift b/VDSSample/ViewControllers/ButtonViewController.swift
index aacd340..b484f0b 100644
--- a/VDSSample/ViewControllers/ButtonViewController.swift
+++ b/VDSSample/ViewControllers/ButtonViewController.swift
@@ -10,7 +10,7 @@ import UIKit
 import VDS
 import VDSColorTokens
 
-class ButtonViewController: BaseViewController {
+class ButtonViewController: BaseViewController<Button> {
     
     lazy var usePickerSelectorView = {
         PickerSelectorView<Use>(title: "",
@@ -29,21 +29,18 @@ class ButtonViewController: BaseViewController {
     var textField = TextField()
     var widthTextField = NumericField()
 
-    var button: Button!
-
     override func viewDidLoad() {
         super.viewDidLoad()
-        button = makeButton("Button", label: label)
-        addContentTopView(view: .makeWrapper(for: button))
+        addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
         
-        setupForm()
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [textField, widthTextField] }
 
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         addFormRow(label: "Button Action", view: label)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Use", view: usePickerSelectorView)
@@ -54,20 +51,20 @@ class ButtonViewController: BaseViewController {
         
         
         disabledSwitch.onChange =  { [weak self] sender in
-            self?.button.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
 
         textField
             .textPublisher
             .sink { [weak self] text in
-                self?.button.text = text
+                self?.component.text = text
             }.store(in: &subscribers)
         
         widthTextField
             .textPublisher
             .sink { [weak self] text in
                 if let n = NumberFormatter().number(from: text) {
-                    self?.button.width = CGFloat(truncating: n)
+                    self?.component.width = CGFloat(truncating: n)
                 }
             }.store(in: &subscribers)
 
@@ -75,10 +72,13 @@ class ButtonViewController: BaseViewController {
     
     func setupModel() {        
         //setup UI
-        surfacePickerSelectorView.text = button.surface.rawValue
-        disabledSwitch.isOn = button.disabled
-        textField.text = button.text
-        usePickerSelectorView.text = button.use.rawValue
+        component.text = "Button"
+        component.labelPublisher(label)
+        
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = component.disabled
+        textField.text = component.text
+        usePickerSelectorView.text = component.use.rawValue
         widthTextField.text = ""
         buttonSizePickerSelectorView.text = ButtonSize.large.rawValue
     }
@@ -86,17 +86,18 @@ class ButtonViewController: BaseViewController {
     func setupPicker(){
         
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.button.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
         usePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.button.use = item
-            self?.button.backgroundColor = item.color
+            self?.component.use = item
+            self?.component.backgroundColor = item.color
         }
         
         buttonSizePickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.button.size = item
+            self?.component.size = item
+            self?.debugViewSwitch.toggle()
         }
     }
 }
diff --git a/VDSSample/ViewControllers/CheckBoxGroupViewController.swift b/VDSSample/ViewControllers/CheckBoxGroupViewController.swift
index bae643a..fe1ba08 100644
--- a/VDSSample/ViewControllers/CheckBoxGroupViewController.swift
+++ b/VDSSample/ViewControllers/CheckBoxGroupViewController.swift
@@ -11,7 +11,7 @@ import VDS
 import VDSColorTokens
 import Combine
 
-class  CheckboxGroupViewController: BaseViewController {
+class  CheckboxGroupViewController: BaseViewController<CheckboxGroup> {
         
     var disabledSwitch = Toggle()
     var labelTextField = TextField()
@@ -22,16 +22,16 @@ class  CheckboxGroupViewController: BaseViewController {
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: checkboxGroup)
+        addContentTopView(view: component)
         
-        setupForm()
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [labelTextField, childTextField] }
 
-    func setupForm() {
+    override func setupForm() {
+        super.setupForm()
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Label Text", view: labelTextField)
@@ -39,11 +39,11 @@ class  CheckboxGroupViewController: BaseViewController {
         addFormRow(label: "Error", view: .makeWrapper(for: showErrorSwitch))
         
         showErrorSwitch.onChange = { [weak self] sender in
-            self?.checkboxGroup.showError = sender.isOn
+            self?.component.showError = sender.isOn
         }
         
         disabledSwitch.onChange = { [weak self] sender in
-            self?.checkboxGroup.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
 
         labelTextField
@@ -72,9 +72,9 @@ class  CheckboxGroupViewController: BaseViewController {
         checkbox2.labelText = "iPhone 11 Bundle 2"
         checkbox2.childText = "Apple iPhone 11 - 128 GB\nOtterbox Case Black\nScreen Protector"
         
-        checkboxGroup.selectorModels = [checkbox1, checkbox2]
+        component.selectorModels = [checkbox1, checkbox2]
         
-        checkboxGroup.onChange =  { [weak self] group in
+        component.onChange =  { [weak self] group in
             let selected = group.selectedHandlers?
                 .compactMap{"\($0.labelText!)"}
                 .joined(separator: "\r") ?? "none selected"
@@ -87,22 +87,22 @@ class  CheckboxGroupViewController: BaseViewController {
         }
 
         //setup UI
-        surfacePickerSelectorView.text = checkboxGroup.surface.rawValue
-        disabledSwitch.isOn = checkboxGroup.disabled
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = component.disabled
         labelTextField.text = checkbox1.labelText
         childTextField.text = checkbox1.childText
-        showErrorSwitch.isOn = checkboxGroup.showError
+        showErrorSwitch.isOn = component.showError
         
     }
 
     var checkbox: Checkbox? {
-        checkboxGroup.selectorViews.first
+        component.selectorViews.first
     }
     
     //Picker
     func setupPicker(){
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.checkboxGroup.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
     }
diff --git a/VDSSample/ViewControllers/CheckboxViewController.swift b/VDSSample/ViewControllers/CheckboxViewController.swift
index 953e2e8..75118e9 100644
--- a/VDSSample/ViewControllers/CheckboxViewController.swift
+++ b/VDSSample/ViewControllers/CheckboxViewController.swift
@@ -11,28 +11,26 @@ import VDS
 import VDSColorTokens
 import Combine
 
-class  CheckboxViewController: BaseViewController {
+class  CheckboxViewController: BaseViewController<Checkbox> {
 
     var disabledSwitch = Toggle()
     var labelTextField = TextField()
     var childTextField = TextField()
     var errorTextField = TextField()
     var showErrorSwitch = Toggle()
-
-    var checkbox = Checkbox()
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: checkbox)
+        addContentTopView(view: component)
         
-        setupForm()
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [labelTextField, childTextField, errorTextField] }
 
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Label Text", view: labelTextField)
@@ -42,41 +40,41 @@ class  CheckboxViewController: BaseViewController {
         
         showErrorSwitch.onChange = { [weak self] sender in
             guard let self else { return }
-            self.checkbox.showError = sender.isOn
-            if self.checkbox.showError != sender.isOn {
-                self.showErrorSwitch.isOn = self.checkbox.showError
+            self.component.showError = sender.isOn
+            if self.component.showError != sender.isOn {
+                self.showErrorSwitch.isOn = self.component.showError
             }
         }
         
         disabledSwitch.onChange =  { [weak self] sender in
-            self?.checkbox.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
 
         labelTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.checkbox.labelText = text
+                self?.component.labelText = text
             }.store(in: &subscribers)
         
         childTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.checkbox.childText = text
+                self?.component.childText = text
             }.store(in: &subscribers)
 
         errorTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.checkbox.errorText = text
+                self?.component.errorText = text
             }.store(in: &subscribers)
     }
     
     func setupModel() {
-        checkbox.labelText = "Terms and conditions"
-        checkbox.childText = "I agree to Verizon's terms and conditions click here"
-        checkbox.errorText = "Error Text"
+        component.labelText = "Terms and conditions"
+        component.childText = "I agree to Verizon's terms and conditions click here"
+        component.errorText = "Error Text"
         
-        checkbox.onChange = { [weak self] checkbox in
+        component.onChange = { [weak self] checkbox in
             let alertController:UIAlertController = UIAlertController(title: "Alert",
                                                                       message: "\(checkbox.labelText!): \(checkbox.isSelected)",
                                                                       preferredStyle: UIAlertController.Style.alert)
@@ -87,19 +85,19 @@ class  CheckboxViewController: BaseViewController {
         }
         
         //setup UI
-        surfacePickerSelectorView.text = checkbox.surface.rawValue
-        disabledSwitch.isOn = checkbox.disabled
-        labelTextField.text = checkbox.labelText
-        childTextField.text = checkbox.childText
-        showErrorSwitch.isOn = checkbox.showError
-        errorTextField.text = checkbox.errorText
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = component.disabled
+        labelTextField.text = component.labelText
+        childTextField.text = component.childText
+        showErrorSwitch.isOn = component.showError
+        errorTextField.text = component.errorText
         
     }
             
     //Picker
     func setupPicker(){
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.checkbox.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
     }
diff --git a/VDSSample/ViewControllers/IconViewController.swift b/VDSSample/ViewControllers/IconViewController.swift
index e3b6172..6f8a691 100644
--- a/VDSSample/ViewControllers/IconViewController.swift
+++ b/VDSSample/ViewControllers/IconViewController.swift
@@ -10,7 +10,7 @@ import UIKit
 import VDS
 import Combine
 
-class IconViewController: BaseViewController {
+class IconViewController: BaseViewController<Icon> {
     
     lazy var colorPickerSelectorView = {
         PickerSelectorView(title: "",
@@ -31,20 +31,18 @@ class IconViewController: BaseViewController {
     }()
     
     var customSizeField = TextField()
-
-    var icon = Icon()
     
     override func allTextFields() -> [TextField]? { [customSizeField] }
 
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: icon))
-        setupForm()
+        addContentTopView(view: .makeWrapper(for: component))
         setupPicker()
         setupModel()
     }
     
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Size", view: sizePickerSelectorView)
         addFormRow(label: "Custom Size", view: customSizeField)
@@ -53,41 +51,41 @@ class IconViewController: BaseViewController {
         
         customSizeField.textPublisher.sink { [weak self] value in
             if let intValue = Int(value) {
-                self?.icon.customSize = intValue
+                self?.component.customSize = intValue
             } else if value.isEmpty {
-                self?.icon.customSize = nil
+                self?.component.customSize = nil
             }
         }.store(in: &subscribers)
     }
     
     func setupModel() {
         let name = Icon.Name.accessibility
-        icon.color = .black
-        icon.name = name
+        component.color = .black
+        component.name = name
         
         //setup UI
-        surfacePickerSelectorView.text = icon.surface.rawValue
-        sizePickerSelectorView.text = icon.size.rawValue
-        colorPickerSelectorView.text = icon.color.rawValue
+        surfacePickerSelectorView.text = component.surface.rawValue
+        sizePickerSelectorView.text = component.size.rawValue
+        colorPickerSelectorView.text = component.color.rawValue
         namePickerSelectorView.text = name.rawValue
     }
     func setupPicker(){
 
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.icon.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
         sizePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.icon.size = item
+            self?.component.size = item
         }
         
         colorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.icon.color = item
+            self?.component.color = item
         }
         
         namePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.icon.name = item
+            self?.component.name = item
         }
     }
 }
diff --git a/VDSSample/ViewControllers/InputFieldViewController.swift b/VDSSample/ViewControllers/InputFieldViewController.swift
index e8750ab..6f32201 100644
--- a/VDSSample/ViewControllers/InputFieldViewController.swift
+++ b/VDSSample/ViewControllers/InputFieldViewController.swift
@@ -11,7 +11,7 @@ import VDS
 import VDSColorTokens
 import Combine
 
-class  InputFieldViewController: BaseViewController {
+class  InputFieldViewController: BaseViewController<InputField> {
 
     lazy var helperTextPlacementPickerSelectorView = {
         PickerSelectorView(title: "",
@@ -30,20 +30,18 @@ class  InputFieldViewController: BaseViewController {
     var showSuccessSwitch = Toggle()
     var tooltipTitleTextField = TextField()
     var tooltipContentTextField = TextField()
-
-    var textEntryField = InputField()
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: textEntryField)
-        setupForm()
+        addContentTopView(view: component)
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [labelTextField, errorTextField, successTextField, helperTextField, widthTextField, tooltipTitleTextField, tooltipContentTextField] }
     
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
         addFormRow(label: "Required", view: .makeWrapper(for: requiredSwitch))
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
@@ -59,82 +57,82 @@ class  InputFieldViewController: BaseViewController {
         addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
         
         requiredSwitch.onChange = { [weak self] sender in
-            self?.textEntryField.required = sender.isOn
+            self?.component.required = sender.isOn
         }
 
         showErrorSwitch.onChange = { [weak self] sender in
             guard let self else { return }
-            self.textEntryField.showError = sender.isOn
-            if self.textEntryField.showError != sender.isOn {
-                self.showErrorSwitch.isOn = self.textEntryField.showError
+            self.component.showError = sender.isOn
+            if self.component.showError != sender.isOn {
+                self.showErrorSwitch.isOn = self.component.showError
             }
         }
         
         showSuccessSwitch.onChange = { [weak self] sender in
             guard let self else { return }
-            self.textEntryField.showSuccess = sender.isOn
-            if self.textEntryField.showSuccess != sender.isOn {
-                self.showSuccessSwitch.isOn = self.textEntryField.showSuccess
+            self.component.showSuccess = sender.isOn
+            if self.component.showSuccess != sender.isOn {
+                self.showSuccessSwitch.isOn = self.component.showSuccess
             }
         }
         
         disabledSwitch.onChange = { [weak self] sender in
-            self?.textEntryField.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
 
         labelTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.textEntryField.labelText = text
+                self?.component.labelText = text
             }.store(in: &subscribers)
         
         helperTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.textEntryField.helperText = text
+                self?.component.helperText = text
             }.store(in: &subscribers)
 
         errorTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.textEntryField.errorText = text
+                self?.component.errorText = text
             }.store(in: &subscribers)
 
         widthTextField
             .textPublisher
             .sink { [weak self] width in
                 guard let width = Float(width) else { return }
-                self?.textEntryField.width = CGFloat(width)
+                self?.component.width = CGFloat(width)
             }.store(in: &subscribers)
         
         tooltipTitleTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.textEntryField.tooltipTitle = text
+                self?.component.tooltipTitle = text
             }.store(in: &subscribers)
 
         tooltipContentTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.textEntryField.tooltipContent = text
+                self?.component.tooltipContent = text
             }.store(in: &subscribers)
         
     }
     
     func setupModel() {
-        textEntryField.type = .text
-        textEntryField.width = 328
-        textEntryField.labelText = "Street Address"
-        textEntryField.helperText = "For example: 123 Verizon St"
-        textEntryField.errorText = "Enter a valid address."
-        textEntryField.successText = "Good job entering a valid address!"
-        textEntryField.tooltipTitle = "Check the formatting of your address"
-        textEntryField.tooltipContent = "House/Building number then street name"
+        component.type = .text
+        component.width = 328
+        component.labelText = "Street Address"
+        component.helperText = "For example: 123 Verizon St"
+        component.errorText = "Enter a valid address."
+        component.successText = "Good job entering a valid address!"
+        component.tooltipTitle = "Check the formatting of your address"
+        component.tooltipContent = "House/Building number then street name"
 
-        textEntryField
+        component
             .publisher(for: .valueChanged)
-            .sink { textEntryField in
-                if let text = textEntryField.value {
+            .sink { component in
+                if let text = component.value {
                     print("text entry: \(text)")
                 } else {
                     print("text entry: null")
@@ -142,19 +140,19 @@ class  InputFieldViewController: BaseViewController {
             }.store(in: &subscribers)
  
         //setup UI
-        surfacePickerSelectorView.text = textEntryField.surface.rawValue
-        helperTextPlacementPickerSelectorView.text = textEntryField.helperTextPlacement.rawValue
-        disabledSwitch.isOn = textEntryField.disabled
-        requiredSwitch.isOn = textEntryField.required
-        labelTextField.text = textEntryField.labelText
-        helperTextField.text = textEntryField.helperText
-        showErrorSwitch.isOn = textEntryField.showError
-        errorTextField.text = textEntryField.errorText
-        showSuccessSwitch.isOn = textEntryField.showSuccess
-        successTextField.text = textEntryField.successText
-        tooltipTitleTextField.text = textEntryField.tooltipTitle
-        tooltipContentTextField.text = textEntryField.tooltipContent
-        if let width = textEntryField.width {
+        surfacePickerSelectorView.text = component.surface.rawValue
+        helperTextPlacementPickerSelectorView.text = component.helperTextPlacement.rawValue
+        disabledSwitch.isOn = component.disabled
+        requiredSwitch.isOn = component.required
+        labelTextField.text = component.labelText
+        helperTextField.text = component.helperText
+        showErrorSwitch.isOn = component.showError
+        errorTextField.text = component.errorText
+        showSuccessSwitch.isOn = component.showSuccess
+        successTextField.text = component.successText
+        tooltipTitleTextField.text = component.tooltipTitle
+        tooltipContentTextField.text = component.tooltipContent
+        if let width = component.width {
             widthTextField.text = String(describing: width)
         }
     }
@@ -162,12 +160,12 @@ class  InputFieldViewController: BaseViewController {
     //Picker
     func setupPicker(){
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.textEntryField.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
         helperTextPlacementPickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.textEntryField.helperTextPlacement = item
+            self?.component.helperTextPlacement = item
         }
     }
 }
diff --git a/VDSSample/ViewControllers/LabelViewController.swift b/VDSSample/ViewControllers/LabelViewController.swift
index b921ad0..2f8298f 100644
--- a/VDSSample/ViewControllers/LabelViewController.swift
+++ b/VDSSample/ViewControllers/LabelViewController.swift
@@ -10,7 +10,7 @@ import UIKit
 import VDS
 import VDSColorTokens
 
-class LabelViewController: BaseViewController {
+class LabelViewController: BaseViewController<Label> {
 
     lazy var textSizePickerSelectorView = {
         TextSizePickerSelectorView(title: "",
@@ -33,20 +33,18 @@ class LabelViewController: BaseViewController {
     var textField = TextField()
     private var isBold: Bool = false
 
-    var label = Label()
-
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: label)
+        addContentTopView(view: component)
 
-        setupForm()
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [textField] }
 
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
         addFormRow(label: "Bold", view: .makeWrapper(for: boldSwitch))
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
@@ -56,7 +54,7 @@ class LabelViewController: BaseViewController {
         addFormRow(label: "Text", view: textField)
         
         disabledSwitch.onChange = { [weak self] sender in
-            self?.label.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
 
         boldSwitch
@@ -69,19 +67,19 @@ class LabelViewController: BaseViewController {
         textField
             .textPublisher
             .sink { [weak self] text in
-                self?.label.text = text
+                self?.component.text = text
             }.store(in: &subscribers)
     }
         
     func setupModel() {
-        label.text = "Label Component"
-        label.textStyle = .featureSmall
+        component.text = "Label Component"
+        component.textStyle = .featureSmall
         
         //setup UI
-        surfacePickerSelectorView.text = label.surface.rawValue
-        disabledSwitch.isOn = label.disabled
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = component.disabled
         boldSwitch.isOn = isBold
-        textField.text = label.text
+        textField.text = component.text
         
         //set the font
         fontCategory = .feature
@@ -114,18 +112,18 @@ class LabelViewController: BaseViewController {
     
     func updateLabelStyle(){
         if let style = fontCategory.style(for: textSize, isBold: isBold) {
-            label.textStyle = style
+            component.textStyle = style
         }
     }
 
     func setupPicker(){
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.label.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
 
         textPositionPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.label.textPosition = item
+            self?.component.textPosition = item
         }
         
         textSizePickerSelectorView.onPickerDidSelect = {  [weak self] item in
diff --git a/VDSSample/ViewControllers/LineViewController.swift b/VDSSample/ViewControllers/LineViewController.swift
index 38acea9..d8e7b83 100644
--- a/VDSSample/ViewControllers/LineViewController.swift
+++ b/VDSSample/ViewControllers/LineViewController.swift
@@ -8,7 +8,7 @@
 import Foundation
 import VDS
 
-class LineViewController: BaseViewController {
+class LineViewController: BaseViewController<Line> {
     
     let lineView = Line()
     
@@ -21,24 +21,24 @@ class LineViewController: BaseViewController {
     override func viewDidLoad() {
         super.viewDidLoad()
         
-        addContentTopView(view: lineView)
-        setupForm()
+        addContentTopView(view: component)
         setupPicker()
     }
     
-    func setupForm() {
+    override func setupForm() {
+        super.setupForm()
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Style", view: lineStylePickerView)
     }
     
     func setupPicker() {
         surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.lineView.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
         lineStylePickerView.onPickerDidSelect = { [weak self] item in
-            self?.lineView.style = item
+            self?.component.style = item
         }
     }
 }
diff --git a/VDSSample/ViewControllers/NotificationViewController.swift b/VDSSample/ViewControllers/NotificationViewController.swift
index 03fb2ea..2ef5663 100644
--- a/VDSSample/ViewControllers/NotificationViewController.swift
+++ b/VDSSample/ViewControllers/NotificationViewController.swift
@@ -8,9 +8,8 @@
 import Foundation
 import VDS
 
-class NotificationViewController: BaseViewController {
+class NotificationViewController: BaseViewController<VDS.Notification> {
     
-    var notificationView = Notification()
     let label = Label()
     let titleTextField = TextField()
     let subTitleTextField = TextField()
@@ -37,10 +36,10 @@ class NotificationViewController: BaseViewController {
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: notificationView)
+        addContentTopView(view: component)
         
-        notificationView.title = titleDefaultText
-        notificationView.subTitle = subtitleDefaultText
+        component.title = titleDefaultText
+        component.subTitle = subtitleDefaultText
         titleTextField.text = titleDefaultText
         subTitleTextField.text = subtitleDefaultText
         
@@ -48,11 +47,11 @@ class NotificationViewController: BaseViewController {
         firstButtonTextField.text = firstButtonDefaultText
         secondButtonTextField.text = secondButtonDefaultText
         
-        setupForm()
         setupPicker()
     }
     
-    func setupForm() {
+    override func setupForm() {
+        super.setupForm()
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Type", view: notificationTypePickerSelectorView)
         addFormRow(label: "Layout", view: layoutTypePickerSelectorView)
@@ -65,22 +64,22 @@ class NotificationViewController: BaseViewController {
         addFormRow(label: "First Button Text", view: firstButtonTextField)
         addFormRow(label: "Second Button Text", view: secondButtonTextField)
         
-        notificationView.onCloseClick = { notification in
+        component.onCloseClick = { notification in
             print("onCloseClick: \(notification.title)")
         }
         
         titleTextField.textPublisher.sink { newString in
-            self.notificationView.title = newString
+            self.component.title = newString
         }.store(in: &subscribers)
         
         subTitleTextField.textPublisher.sink { newString in
-            self.notificationView.subTitle = newString
+            self.component.subTitle = newString
         }.store(in: &subscribers)
         
         buttonGroupToggle.onChange = { [weak self] toggle in
             if toggle.isOn {
-                self?.notificationView.primaryButtonModel = nil
-                self?.notificationView.secondaryButtonModel = nil
+                self?.component.primaryButtonModel = nil
+                self?.component.secondaryButtonModel = nil
                 self?.label.text = ""
             } else {
                 self?.setupButtons(with: self?.firstButtonDefaultText, secondButtonText: self?.secondButtonDefaultText)
@@ -90,8 +89,8 @@ class NotificationViewController: BaseViewController {
         firstButtonTextField.textPublisher.sink { newString in
             
             if newString.isEmpty {
-                self.notificationView.primaryButtonModel = nil
-                self.notificationView.secondaryButtonModel = nil
+                self.component.primaryButtonModel = nil
+                self.component.secondaryButtonModel = nil
             } else {
                 self.setupButtons(with: newString, secondButtonText: self.secondButtonTextField.text)
             }
@@ -105,42 +104,42 @@ class NotificationViewController: BaseViewController {
         }.store(in: &subscribers)
         
         hideCloseButtonToggle.onChange = { [weak self] toggle in
-            self?.notificationView.hideCloseButton = toggle.isOn
+            self?.component.hideCloseButton = toggle.isOn
         }
         
         fullBleedToggle.onChange = { [weak self] toggle in
-            self?.notificationView.fullBleed = toggle.isOn
+            self?.component.fullBleed = toggle.isOn
         }
     }
     
     func setupPicker() {
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.notificationView.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
         notificationTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.notificationView.type = item
+            self?.component.type = item
         }
         
         layoutTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
             guard let self else { return }
-            self.notificationView.layout = item
-            if self.notificationView.layout != item {
-                self.layoutTypePickerSelectorView.set(item: self.notificationView.layout)
+            self.component.layout = item
+            if self.component.layout != item {
+                self.layoutTypePickerSelectorView.set(item: self.component.layout)
             }
         }
     }
     
     func setupButtons(with firstButtonText: String? = nil, secondButtonText: String? = nil) {
         if let firstButtonText {
-            notificationView.primaryButtonModel = .init(text: firstButtonText, onClick: { [weak self] button in
+            component.primaryButtonModel = .init(text: firstButtonText, onClick: { [weak self] button in
                 self?.label.text = "\(button.text!) button click"
             })
         }
         
         if let secondButtonText {
-            notificationView.secondaryButtonModel = .init(text: secondButtonText, onClick: { [weak self] button in
+            component.secondaryButtonModel = .init(text: secondButtonText, onClick: { [weak self] button in
                 self?.label.text = "\(button.text!) button click"
             })
         }
diff --git a/VDSSample/ViewControllers/RadioBoxGroupViewController.swift b/VDSSample/ViewControllers/RadioBoxGroupViewController.swift
index 6b833ff..7a381a7 100644
--- a/VDSSample/ViewControllers/RadioBoxGroupViewController.swift
+++ b/VDSSample/ViewControllers/RadioBoxGroupViewController.swift
@@ -11,7 +11,7 @@ import VDS
 import VDSColorTokens
 import Combine
 
-class  RadioBoxGroupViewController: BaseViewController {
+class  RadioBoxGroupViewController: BaseViewController<RadioBoxGroup>{
     
     var disabledSwitch = Toggle()
     var strikeThroughSwitch = Toggle()
@@ -19,21 +19,19 @@ class  RadioBoxGroupViewController: BaseViewController {
     var subTextField = TextField()
     var subTextRightField = TextField()
     var showErrorSwitch = Toggle()
-    
-    var radioBoxGroup = RadioBoxGroup()
-    
+        
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: radioBoxGroup)
+        addContentTopView(view: component)
 
-        setupForm()
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [textField, subTextField, subTextRightField] }
     
-    func setupForm() {
+    override func setupForm() {
+        super.setupForm()
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Strikethrough", view: .makeWrapper(for: strikeThroughSwitch))
@@ -42,7 +40,7 @@ class  RadioBoxGroupViewController: BaseViewController {
         addFormRow(label: "Sub Text Right", view: subTextRightField)
 
         disabledSwitch.onChange = { [weak self] sender in
-            self?.radioBoxGroup.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
 
         strikeThroughSwitch.onChange = { [weak self] sender in
@@ -84,9 +82,9 @@ class  RadioBoxGroupViewController: BaseViewController {
         radioBox2.text = "iPhone 11 Bundle 2"
         radioBox2.subText = "Apple iPhone 11 - 128 GB\nOtterbox Case Black\nScreen Protector"
 
-        radioBoxGroup.selectorModels = [radioBox1, radioBox2]
+        component.selectorModels = [radioBox1, radioBox2]
 
-        radioBoxGroup
+        component
             .publisher(for: .valueChanged)
             .sink { [weak self] group in
                 let alertController:UIAlertController = UIAlertController(title: "Alert",
@@ -99,22 +97,22 @@ class  RadioBoxGroupViewController: BaseViewController {
             }.store(in: &subscribers)
 
         //set UI values
-        surfacePickerSelectorView.text = radioBoxGroup.surface.rawValue
-        disabledSwitch.isOn = radioBoxGroup.disabled
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = component.disabled
         textField.text = radioBox1.text
         subTextField.text = radioBox1.subText
         subTextRightField.text = radioBox1.subTextRight
     }
 
     var radioBox: RadioBox? {
-        radioBoxGroup.selectorViews.first
+        component.selectorViews.first
     }
     
     //Picker
     func setupPicker(){
         
         surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.radioBoxGroup.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
diff --git a/VDSSample/ViewControllers/RadioButtonViewController.swift b/VDSSample/ViewControllers/RadioButtonViewController.swift
index c45035a..af19810 100644
--- a/VDSSample/ViewControllers/RadioButtonViewController.swift
+++ b/VDSSample/ViewControllers/RadioButtonViewController.swift
@@ -11,27 +11,25 @@ import VDS
 import VDSColorTokens
 import Combine
 
-class  RadioButtonViewController: BaseViewController {
+class  RadioButtonViewController: BaseViewController<RadioButtonGroup> {
    
     var disabledSwitch = Toggle()
     var labelTextField = TextField()
     var childTextField = TextField()
     var showErrorSwitch = Toggle()
-
-    var radioButtonGroup = RadioButtonGroup()
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: radioButtonGroup)
+        addContentTopView(view: component)
 
-        setupForm()
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [labelTextField, childTextField] }
 
-    func setupForm() {
+    override func setupForm() {
+        super.setupForm()
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Label Text", view: labelTextField)
@@ -39,11 +37,11 @@ class  RadioButtonViewController: BaseViewController {
         addFormRow(label: "Error", view: .makeWrapper(for: showErrorSwitch))
         
         showErrorSwitch.onChange = { [weak self] sender in
-            self?.radioButtonGroup.showError = sender.isOn
+            self?.component.showError = sender.isOn
         }
         
         disabledSwitch.onChange = { [weak self] sender in
-            self?.radioButtonGroup.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
         
         labelTextField
@@ -79,9 +77,9 @@ class  RadioButtonViewController: BaseViewController {
         radioButton3.labelText = "iPhone 11 Bundle 3"
         radioButton3.childText = "Apple iPhone 11 - 256 GB\nOtterbox Case Black\nScreen Protector"
         
-        radioButtonGroup.selectorModels = [radioButton1, radioButton2, radioButton3]
+        component.selectorModels = [radioButton1, radioButton2, radioButton3]
         
-        radioButtonGroup.onChange = { [weak self] group in
+        component.onChange = { [weak self] group in
             let alertController:UIAlertController = UIAlertController(title: "Alert",
                                                                       message: "Selected:\r\(group.selectedHandler?.labelText ?? "none")",
                                                                       preferredStyle: UIAlertController.Style.alert)
@@ -92,15 +90,15 @@ class  RadioButtonViewController: BaseViewController {
         }
 
         //set UI values
-        surfacePickerSelectorView.text = radioButtonGroup.surface.rawValue
-        disabledSwitch.isOn = radioButtonGroup.disabled
-        showErrorSwitch.isOn = radioButtonGroup.showError
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = component.disabled
+        showErrorSwitch.isOn = component.showError
         labelTextField.text = radioButton1.labelText
         childTextField.text = radioButton1.childText
     }
     
     var radioButton: RadioButton? {
-        radioButtonGroup.selectorViews.first
+        component.selectorViews.first
     }
 
     //Picker
@@ -108,7 +106,7 @@ class  RadioButtonViewController: BaseViewController {
         
         picker.isHidden = true
         surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.radioButtonGroup.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
 
diff --git a/VDSSample/ViewControllers/RadioSwatchGroupViewController.swift b/VDSSample/ViewControllers/RadioSwatchGroupViewController.swift
index e364330..0cc1cb7 100644
--- a/VDSSample/ViewControllers/RadioSwatchGroupViewController.swift
+++ b/VDSSample/ViewControllers/RadioSwatchGroupViewController.swift
@@ -11,32 +11,32 @@ import VDS
 import VDSColorTokens
 import Combine
 
-class  RadioSwatchGroupViewController: BaseViewController {
+class  RadioSwatchGroupViewController: BaseViewController<RadioSwatchGroup> {
     
     var disabledSwitch = Toggle()
     var strikeThroughSwitch = Toggle()
-    var radioSwatchGroup = RadioSwatchGroup()
         
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: radioSwatchGroup)
-        setupForm()
+        addContentTopView(view: component)
+
         setupPicker()
         setupModel()
     }
     
-    func setupForm() {
+    override func setupForm() {
+        super.setupForm()
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Strikethrough", view: .makeWrapper(for: strikeThroughSwitch))
         
         disabledSwitch.onChange = { [weak self] sender in
-            self?.radioSwatchGroup.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
         
         strikeThroughSwitch.onChange = { [weak self] sender in
-            self?.radioSwatchGroup.selectorViews.first?.strikethrough = sender.isOn
-            self?.radioSwatchGroup.reload()
+            self?.component.selectorViews.first?.strikethrough = sender.isOn
+            self?.component.reload()
         }
     }
     
@@ -83,22 +83,22 @@ class  RadioSwatchGroupViewController: BaseViewController {
         radioSwatch8.text = "Pink"
         radioSwatch8.inputId = "radioSwatch8"
         
-        radioSwatchGroup.selectorModels = [radioSwatch1, radioSwatch2, radioSwatch3, radioSwatch4, radioSwatch5, radioSwatch6, radioSwatch7, radioSwatch8]
+        component.selectorModels = [radioSwatch1, radioSwatch2, radioSwatch3, radioSwatch4, radioSwatch5, radioSwatch6, radioSwatch7, radioSwatch8]
         
-        radioSwatchGroup.onChange = { group in
+        component.onChange = { group in
             print("Selected: \(group.selectedHandler?.text ?? "none")")
         }
         
         //set UI values
-        surfacePickerSelectorView.text = radioSwatchGroup.surface.rawValue
-        disabledSwitch.isOn = radioSwatchGroup.disabled
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = component.disabled
     }
     
     //Picker
     func setupPicker(){
         
         surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.radioSwatchGroup.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
diff --git a/VDSSample/ViewControllers/TextAreaViewController.swift b/VDSSample/ViewControllers/TextAreaViewController.swift
index 70607b6..7bde436 100644
--- a/VDSSample/ViewControllers/TextAreaViewController.swift
+++ b/VDSSample/ViewControllers/TextAreaViewController.swift
@@ -12,7 +12,7 @@ import VDS
 import VDSColorTokens
 import Combine
 
-class  TextAreaViewController: BaseViewController {
+class  TextAreaViewController: BaseViewController<TextArea> {
 
     var disabledSwitch = Toggle()
     var requiredSwitch = Toggle()
@@ -23,20 +23,19 @@ class  TextAreaViewController: BaseViewController {
     var showErrorSwitch = Toggle()
     var tooltipTitleTextField = TextField()
     var tooltipContentTextField = TextField()
-
-    var textArea = TextArea()
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: textArea)
-        setupForm()
+        addContentTopView(view: component)
+
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [labelTextField, errorTextField, helperTextField, widthTextField, tooltipTitleTextField, tooltipContentTextField] }
     
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
         addFormRow(label: "Required", view: .makeWrapper(for: requiredSwitch))
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
@@ -49,72 +48,72 @@ class  TextAreaViewController: BaseViewController {
         addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
         
         requiredSwitch.onChange = { [weak self] sender in
-            self?.textArea.required = sender.isOn
+            self?.component.required = sender.isOn
         }
         
         showErrorSwitch.onChange = { [weak self] sender in
             guard let self else { return }
-            self.textArea.showError = sender.isOn
-            if self.textArea.showError != sender.isOn {
-                self.showErrorSwitch.isOn = self.textArea.showError
+            self.component.showError = sender.isOn
+            if self.component.showError != sender.isOn {
+                self.showErrorSwitch.isOn = self.component.showError
             }
         }
         
         disabledSwitch.onChange = { [weak self] sender in
-            self?.textArea.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
 
         labelTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.textArea.labelText = text
+                self?.component.labelText = text
             }.store(in: &subscribers)
         
         helperTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.textArea.helperText = text
+                self?.component.helperText = text
             }.store(in: &subscribers)
 
         errorTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.textArea.errorText = text
+                self?.component.errorText = text
             }.store(in: &subscribers)
 
         widthTextField
             .textPublisher
             .sink { [weak self] width in
                 guard let width = Float(width) else { return }
-                self?.textArea.width = CGFloat(width)
+                self?.component.width = CGFloat(width)
             }.store(in: &subscribers)
         
         tooltipTitleTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.textArea.tooltipTitle = text
+                self?.component.tooltipTitle = text
             }.store(in: &subscribers)
 
         tooltipContentTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.textArea.tooltipContent = text
+                self?.component.tooltipContent = text
             }.store(in: &subscribers)
         
     }
     
     func setupModel() {
-        textArea.width = 328
-        textArea.labelText = "Street Address"
-        textArea.helperText = "For example: 123 Verizon St"
-        textArea.errorText = "Enter a valid address."
-        textArea.tooltipTitle = "Check the formatting of your address"
-        textArea.tooltipContent = "House/Building number then street name"
+        component.width = 328
+        component.labelText = "Street Address"
+        component.helperText = "For example: 123 Verizon St"
+        component.errorText = "Enter a valid address."
+        component.tooltipTitle = "Check the formatting of your address"
+        component.tooltipContent = "House/Building number then street name"
 
-        textArea
+        component
             .publisher(for: .valueChanged)
-            .sink { textArea in
-                if let text = textArea.value {
+            .sink { component in
+                if let text = component.value {
                     print("text entry: \(text)")
                 } else {
                     print("text entry: null")
@@ -122,21 +121,21 @@ class  TextAreaViewController: BaseViewController {
             }.store(in: &subscribers)
  
         //setup UI
-        surfacePickerSelectorView.text = textArea.surface.rawValue
-        disabledSwitch.isOn = textArea.disabled
-        requiredSwitch.isOn = textArea.required
-        labelTextField.text = textArea.labelText
-        helperTextField.text = textArea.helperText
-        showErrorSwitch.isOn = textArea.showError
-        errorTextField.text = textArea.errorText
-        tooltipTitleTextField.text = textArea.tooltipTitle
-        tooltipContentTextField.text = textArea.tooltipContent
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = component.disabled
+        requiredSwitch.isOn = component.required
+        labelTextField.text = component.labelText
+        helperTextField.text = component.helperText
+        showErrorSwitch.isOn = component.showError
+        errorTextField.text = component.errorText
+        tooltipTitleTextField.text = component.tooltipTitle
+        tooltipContentTextField.text = component.tooltipContent
     }
     
     //Picker
     func setupPicker(){
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.textArea.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
     }
diff --git a/VDSSample/ViewControllers/TextLinkCaretViewController.swift b/VDSSample/ViewControllers/TextLinkCaretViewController.swift
index af0f40c..23f78c5 100644
--- a/VDSSample/ViewControllers/TextLinkCaretViewController.swift
+++ b/VDSSample/ViewControllers/TextLinkCaretViewController.swift
@@ -10,7 +10,7 @@ import UIKit
 import VDS
 import VDSColorTokens
 
-class TextLinkCaretViewController: BaseViewController {
+class TextLinkCaretViewController: BaseViewController<TextLinkCaret> {
     
     lazy var caretPositionPickerSelectorView = {
         PickerSelectorView(title: "",
@@ -21,22 +21,19 @@ class TextLinkCaretViewController: BaseViewController {
     var label = Label()
     var disabledSwitch = Toggle()
     var textField = TextField()
-    lazy var textLinkCaret: TextLinkCaret = {
-        makeTextLinkCaret("Text Link Caret", label: label)
-    }()
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: textLinkCaret))
+        addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
 
-        setupForm()
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [textField] }
 
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         addFormRow(label: "Button Action", view: label)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
@@ -44,34 +41,36 @@ class TextLinkCaretViewController: BaseViewController {
         addFormRow(label: "Caret Position", view: caretPositionPickerSelectorView)
         
         disabledSwitch.onChange = { [weak self] sender in
-            self?.textLinkCaret.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
 
         textField
             .textPublisher
             .sink { [weak self] text in
-                self?.textLinkCaret.text = text
+                self?.component.text = text
             }.store(in: &subscribers)
     }
     
     func setupModel() {
+        component.text = "Text Link Caret"
+        component.labelPublisher(label)
         
         //setup UI
-        surfacePickerSelectorView.text = textLinkCaret.surface.rawValue
-        disabledSwitch.isOn = textLinkCaret.disabled
-        textField.text = textLinkCaret.text
-        caretPositionPickerSelectorView.text = textLinkCaret.iconPosition.rawValue
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = component.disabled
+        textField.text = component.text
+        caretPositionPickerSelectorView.text = component.iconPosition.rawValue
     }
       
     func setupPicker(){
         
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.textLinkCaret.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
         caretPositionPickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.textLinkCaret.iconPosition = item
+            self?.component.iconPosition = item
         }
     }
 }
diff --git a/VDSSample/ViewControllers/TextLinkViewController.swift b/VDSSample/ViewControllers/TextLinkViewController.swift
index 197b5a3..ac4fffd 100644
--- a/VDSSample/ViewControllers/TextLinkViewController.swift
+++ b/VDSSample/ViewControllers/TextLinkViewController.swift
@@ -10,7 +10,7 @@ import UIKit
 import VDS
 import VDSColorTokens
 
-class TextLinkViewController: BaseViewController {
+class TextLinkViewController: BaseViewController<TextLink> {
     
     lazy var buttonSizePickerSelectorView = {
         PickerSelectorView(title: "",
@@ -21,23 +21,19 @@ class TextLinkViewController: BaseViewController {
     var label = Label()
     var disabledSwitch = Toggle()
     var textField = TextField()
-    lazy var textLink: TextLink = {
-        makeTextLink("Text Link", label: label)
-    }()
-
+    
     override func viewDidLoad() {
         super.viewDidLoad()
+        addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
 
-        addContentTopView(view: .makeWrapper(for: textLink))
-
-        setupForm()
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [textField] }
 
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         addFormRow(label: "Button Action", view: label)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
@@ -45,34 +41,36 @@ class TextLinkViewController: BaseViewController {
         addFormRow(label: "Size", view: buttonSizePickerSelectorView)
         
         disabledSwitch.onChange = { [weak self] sender in
-            self?.textLink.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
         
         textField
             .textPublisher
             .sink { [weak self] text in
-                self?.textLink.text = text
+                self?.component.text = text
             }.store(in: &subscribers)
     }
     
     func setupModel() {
-        
+        component.text = "Text Link"
+        component.labelPublisher(label)
+
         //setup UI
-        surfacePickerSelectorView.text = textLink.surface.rawValue
-        disabledSwitch.isOn = textLink.disabled
-        textField.text = textLink.text
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = component.disabled
+        textField.text = component.text
         buttonSizePickerSelectorView.text = ButtonSize.large.rawValue
     }
       
     func setupPicker(){
         
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.textLink.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
         buttonSizePickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.textLink.size = item
+            self?.component.size = item
         }
     }
 }
diff --git a/VDSSample/ViewControllers/TileContainerViewController.swift b/VDSSample/ViewControllers/TileContainerViewController.swift
index 10b5e0c..136251d 100644
--- a/VDSSample/ViewControllers/TileContainerViewController.swift
+++ b/VDSSample/ViewControllers/TileContainerViewController.swift
@@ -11,7 +11,7 @@ import VDS
 import VDSColorTokens
 import Combine
 
-class TileContainerViewController: BaseViewController {
+class TileContainerViewController: BaseViewController<TileContainer> {
     
     lazy var backgroundColorPickerSelectorView = {
         PickerSelectorView(title: "white",
@@ -43,21 +43,21 @@ class TileContainerViewController: BaseViewController {
     var heightTextField = NumericField()
     var widthTextField = NumericField()
 
-    var tileContainer = TileContainer()
     var backgroundImage = UIImage(named: "backgroundTest")!
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: tileContainer))
-        tileContainer.width = 150
-        tileContainer.color = .black
-        setupForm()
+        addContentTopView(view: .makeWrapper(for: component))
+        component.width = 150
+        component.color = .black
+
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [widthTextField, heightTextField] }
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         formStackView.addArrangedSubview(Label().with{
             $0.textStyle = .boldBodyLarge
             $0.text = "This object does NOT reflect normal \"surface\" changes, all properties are maually set"
@@ -77,37 +77,37 @@ class TileContainerViewController: BaseViewController {
         clickableSwitch.onChange = { [weak self] sender in
             guard let self else { return }
             if sender.isOn {
-                self.tileContainer.onClick = { _ in
+                self.component.onClick = { _ in
                     print("you click on me!")
                 }
             } else {
-                self.tileContainer.onClick = nil
+                self.component.onClick = nil
             }
         }
         
         showBackgroundImageSwitch.onChange = { [weak self] sender in
             if let image = self?.backgroundImage, sender.isOn {
-                self?.tileContainer.backgroundImage = image
+                self?.component.backgroundImage = image
             } else {
-                self?.tileContainer.backgroundImage = nil
+                self?.component.backgroundImage = nil
             }
         }
 
         showBorderSwitch.onChange = { [weak self] sender in
-                self?.tileContainer.showBorder = sender.isOn
+                self?.component.showBorder = sender.isOn
         }
         
         showDropShadowSwitch.onChange =  { [weak self] sender in
-            self?.tileContainer.showDropShadows = sender.isOn
+            self?.component.showDropShadows = sender.isOn
         }
 
         heightTextField
             .textPublisher
             .sink { [weak self] text in
                 if let n = NumberFormatter().number(from: text) {
-                    self?.tileContainer.height = CGFloat(truncating: n)
+                    self?.component.height = CGFloat(truncating: n)
                 } else {
-                    self?.tileContainer.height = nil
+                    self?.component.height = nil
                 }
             }.store(in: &subscribers)
 
@@ -115,7 +115,7 @@ class TileContainerViewController: BaseViewController {
             .textPublisher
             .sink { [weak self] text in
                 if let n = NumberFormatter().number(from: text) {
-                    self?.tileContainer.width = CGFloat(truncating: n)
+                    self?.component.width = CGFloat(truncating: n)
                 }
             }.store(in: &subscribers)
 
@@ -123,35 +123,35 @@ class TileContainerViewController: BaseViewController {
     
     func setupModel() {
         //setup UI
-        surfacePickerSelectorView.text = tileContainer.surface.rawValue
-        backgroundColorPickerSelectorView.text = tileContainer.color.rawValue
-        paddingPickerSelectorView.text = tileContainer.padding.rawValue
-        scalingTypePickerSelectorView.text = tileContainer.aspectRatio.rawValue
-        widthTextField.text = tileContainer.width != nil ? "\(tileContainer.width!)" : ""
-        heightTextField.text = tileContainer.height != nil ? "\(tileContainer.height!)" : ""
+        surfacePickerSelectorView.text = component.surface.rawValue
+        backgroundColorPickerSelectorView.text = component.color.rawValue
+        paddingPickerSelectorView.text = component.padding.rawValue
+        scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
+        widthTextField.text = component.width != nil ? "\(component.width!)" : ""
+        heightTextField.text = component.height != nil ? "\(component.height!)" : ""
     }
       
     func setupPicker(){
         
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.tileContainer.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
         backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.tileContainer.color = item
+            self?.component.color = item
         }
         
         scalingTypePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.tileContainer.aspectRatio = item
+            self?.component.aspectRatio = item
         }
         
         paddingPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.tileContainer.padding = item
+            self?.component.padding = item
         }
 
         imageFallbackColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.tileContainer.imageFallbackColor = item
+            self?.component.imageFallbackColor = item
         }
     }
 }
diff --git a/VDSSample/ViewControllers/TileletViewController.swift b/VDSSample/ViewControllers/TileletViewController.swift
index b8dad5a..bffad19 100644
--- a/VDSSample/ViewControllers/TileletViewController.swift
+++ b/VDSSample/ViewControllers/TileletViewController.swift
@@ -11,7 +11,7 @@ import VDS
 import VDSColorTokens
 import Combine
 
-class TileletViewController: BaseViewController {
+class TileletViewController: BaseViewController<Tilelet> {
     
     lazy var titleTextStylePickerSelectorView = {
         PickerSelectorView(title: "",
@@ -43,20 +43,19 @@ class TileletViewController: BaseViewController {
     var showDescriptionIconSwitch = Toggle()
     var showDirectionalIconSwitch = Toggle()
     var badgeTextField = TextField()
-    var tilelet = Tilelet()
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: tilelet))
+        addContentTopView(view: .makeWrapper(for: component))
         
-        setupForm()
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [titleTextField, subTitleTextField, widthTextField, heightTextField, textWidthTextField, textPercentageTextField, badgeTextField] }
     
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Clickable", view: .makeWrapper(for: clickableSwitch))
         
@@ -75,13 +74,13 @@ class TileletViewController: BaseViewController {
         addFormRow(label: "Directional Icon", view: .makeWrapper(for: showDirectionalIconSwitch))
         
         clickableSwitch.onChange = { [weak self] sender in
-            guard let tilelet = self?.tilelet else { return }
+            guard let self else { return }
             if sender.isOn {
-                tilelet.onClick = { t in
+                self.component.onClick = { t in
                     print("you click on me!")
                 }
             } else {
-                tilelet.onClick = nil
+                self.component.onClick = nil
             }
         }
         
@@ -89,7 +88,7 @@ class TileletViewController: BaseViewController {
             .textPublisher
             .sink { [weak self] text in
                 if let n = NumberFormatter().number(from: text) {
-                    self?.tilelet.width = CGFloat(truncating: n)
+                    self?.component.width = CGFloat(truncating: n)
                 }
             }.store(in: &subscribers)
         
@@ -97,9 +96,9 @@ class TileletViewController: BaseViewController {
             .textPublisher
             .sink { [weak self] text in
                 if let n = NumberFormatter().number(from: text) {
-                    self?.tilelet.height = CGFloat(truncating: n)
+                    self?.component.height = CGFloat(truncating: n)
                 } else {
-                    self?.tilelet.height = nil
+                    self?.component.height = nil
                 }
             }.store(in: &subscribers)
         
@@ -108,10 +107,10 @@ class TileletViewController: BaseViewController {
             .sink { [weak self] text in
                 guard let self else { return }
                 if let n = NumberFormatter().number(from: text), n.floatValue > 50.0 {
-                    self.tilelet.textWidth = CGFloat(truncating: n)
+                    self.component.textWidth = CGFloat(truncating: n)
                     self.textPercentageTextField.text = ""
                 } else {
-                    self.tilelet.textWidth = nil
+                    self.component.textWidth = nil
                 }
             }.store(in: &subscribers)
         
@@ -119,10 +118,10 @@ class TileletViewController: BaseViewController {
             .textPublisher
             .sink { [weak self] text in
                 if let n = NumberFormatter().number(from: text), n.intValue > 15 && n.intValue <= 100 {
-                    self?.tilelet.textPercentage = CGFloat(truncating: n)
+                    self?.component.textPercentage = CGFloat(truncating: n)
                     self?.textWidthTextField.text = ""
                 } else {
-                    self?.tilelet.textPercentage = nil
+                    self?.component.textPercentage = nil
                 }
             }.store(in: &subscribers)
         
@@ -147,18 +146,18 @@ class TileletViewController: BaseViewController {
         showDescriptionIconSwitch.onChange = { [weak self] sender in
             if sender.isOn {
                 self?.showDirectionalIconSwitch.isOn = false
-                self?.tilelet.descriptiveIconModel = .init(size: .medium, surface: .dark)
+                self?.component.descriptiveIconModel = .init(size: .medium, surface: .dark)
             } else {
-                self?.tilelet.descriptiveIconModel = nil
+                self?.component.descriptiveIconModel = nil
             }
         }
         
         showDirectionalIconSwitch.onChange = { [weak self] sender in
             if sender.isOn {
                 self?.showDescriptionIconSwitch.isOn = false
-                self?.tilelet.directionalIconModel = .init(size: .medium, surface: .dark)
+                self?.component.directionalIconModel = .init(size: .medium, surface: .dark)
             } else {
-                self?.tilelet.directionalIconModel = nil
+                self?.component.directionalIconModel = nil
             }
         }
         
@@ -168,49 +167,49 @@ class TileletViewController: BaseViewController {
         let titleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
         let subTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
         
-        tilelet.surface = .light
-        tilelet.titleModel = titleModel
-        tilelet.subTitleModel = subTitleModel
+        component.surface = .light
+        component.titleModel = titleModel
+        component.subTitleModel = subTitleModel
         
         //setup UI
-        surfacePickerSelectorView.text = tilelet.surface.rawValue
+        surfacePickerSelectorView.text = component.surface.rawValue
         otherTextStylePickerSelectorView.text = subTitleModel.textStyle.rawValue
         titleTextStylePickerSelectorView.text = titleModel.textStyle.rawValue
         subtitleColorPickerSelectorView.text = subTitleModel.textColor.rawValue
         titleTextField.text = titleModel.text
         subTitleTextField.text = subTitleModel.text
-        widthTextField.text = tilelet.width != nil ? "\(tilelet.width!)" : ""
+        widthTextField.text = component.width != nil ? "\(component.width!)" : ""
     }
     
     //sub models
     func setBadgeModel() {
         if let text = badgeTextField.text, !text.isEmpty {
-            tilelet.badgeModel = Tilelet.BadgeModel(text: text)
+            component.badgeModel = Tilelet.BadgeModel(text: text)
         } else {
-            tilelet.badgeModel = nil
+            component.badgeModel = nil
         }
     }
     
     func setTitleModel() {
         if let text = titleTextField.text, !text.isEmpty {
-            tilelet.titleModel = Tilelet.TitleModel(text: text, textStyle: titleTextStylePickerSelectorView.selectedItem)
+            component.titleModel = Tilelet.TitleModel(text: text, textStyle: titleTextStylePickerSelectorView.selectedItem)
         } else {
-            tilelet.titleModel = nil
+            component.titleModel = nil
         }
     }
     
     func setSubTitleModel() {
         if let text = subTitleTextField.text, !text.isEmpty {
-            tilelet.subTitleModel = Tilelet.SubTitleModel(text: text, textStyle: otherTextStylePickerSelectorView.selectedItem)
+            component.subTitleModel = Tilelet.SubTitleModel(text: text, textStyle: otherTextStylePickerSelectorView.selectedItem)
         } else {
-            tilelet.subTitleModel = nil
+            component.subTitleModel = nil
         }
     }
     
     //Picker
     func setupPicker(){
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.tilelet.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
diff --git a/VDSSample/ViewControllers/TitleLockupViewController.swift b/VDSSample/ViewControllers/TitleLockupViewController.swift
index a5789f7..cae960d 100644
--- a/VDSSample/ViewControllers/TitleLockupViewController.swift
+++ b/VDSSample/ViewControllers/TitleLockupViewController.swift
@@ -10,7 +10,7 @@ import UIKit
 import VDS
 import VDSColorTokens
 
-class TitleLockupViewController: BaseViewController {
+class TitleLockupViewController: BaseViewController<TitleLockup> {
 
     lazy var textPositionPickerSelectorView = {
         PickerSelectorView(title: "left",
@@ -40,20 +40,18 @@ class TitleLockupViewController: BaseViewController {
     var titleTextField = TextField()
     var subTitleTextField = TextField()
 
-    var titleLockup = TitleLockup()
-
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: titleLockup)
+        addContentTopView(view: component)
 
-        setupForm()
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [eyebrowTextField, titleTextField, subTitleTextField] }
 
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Text Position", view: textPositionPickerSelectorView)
         
@@ -90,14 +88,14 @@ class TitleLockupViewController: BaseViewController {
         let titleModel = TitleLockup.TitleModel(text: "Get more of our best")
         let subTitleModel = TitleLockup.SubTitleModel(text: "Get both of our best and pay less. Pair 5G Home Internet with Verizon mobile to save every month.")
         
-        titleLockup.eyebrowModel = eyebrowModel
-        titleLockup.titleModel = titleModel
-        titleLockup.subTitleModel = subTitleModel
+        component.eyebrowModel = eyebrowModel
+        component.titleModel = titleModel
+        component.subTitleModel = subTitleModel
         
         //setup UI
-        surfacePickerSelectorView.text = titleLockup.surface.rawValue
-        textPositionPickerSelectorView.text = titleLockup.textPosition.rawValue
-        otherTextStylePickerSelectorView.text = titleLockup.otherTextStyle.rawValue
+        surfacePickerSelectorView.text = component.surface.rawValue
+        textPositionPickerSelectorView.text = component.textPosition.rawValue
+        otherTextStylePickerSelectorView.text = component.otherTextStyle.rawValue
         titleTextStylePickerSelectorView.text = titleModel.textStyle.rawValue
         subtitleColorPickerSelectorView.text = subTitleModel.textColor.rawValue
         eyebrowTextField.text = eyebrowModel.text
@@ -107,37 +105,37 @@ class TitleLockupViewController: BaseViewController {
 
     func setEyebrowModel() {
         if let text = eyebrowTextField.text, !text.isEmpty {
-            titleLockup.eyebrowModel = TitleLockup.EyebrowModel(text: text)
+            component.eyebrowModel = TitleLockup.EyebrowModel(text: text)
         } else {
-            titleLockup.eyebrowModel = nil
+            component.eyebrowModel = nil
         }
     }
     
     func setTitleModel() {
         if let text = titleTextField.text, !text.isEmpty {
-            titleLockup.titleModel = TitleLockup.TitleModel(text: text, textStyle: titleTextStylePickerSelectorView.selectedItem)
+            component.titleModel = TitleLockup.TitleModel(text: text, textStyle: titleTextStylePickerSelectorView.selectedItem)
         } else {
-            titleLockup.titleModel = nil
+            component.titleModel = nil
         }
     }
     
     func setSubTitleModel() {
         if let text = subTitleTextField.text, !text.isEmpty {
-            titleLockup.subTitleModel = TitleLockup.SubTitleModel(text: text, textColor: subtitleColorPickerSelectorView.selectedItem)
+            component.subTitleModel = TitleLockup.SubTitleModel(text: text, textColor: subtitleColorPickerSelectorView.selectedItem)
         } else {
-            titleLockup.subTitleModel = nil
+            component.subTitleModel = nil
         }
     }
     
     //Picker
     func setupPicker(){
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.titleLockup.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
         textPositionPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.titleLockup.textPosition = item
+            self?.component.textPosition = item
         }
         
         titleTextStylePickerSelectorView.onPickerDidSelect = {  [weak self] item in
@@ -145,7 +143,7 @@ class TitleLockupViewController: BaseViewController {
         }
 
         otherTextStylePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.titleLockup.otherTextStyle = item
+            self?.component.otherTextStyle = item
         }
         
         subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
diff --git a/VDSSample/ViewControllers/ToggleViewController.swift b/VDSSample/ViewControllers/ToggleViewController.swift
index c877c25..b256f26 100644
--- a/VDSSample/ViewControllers/ToggleViewController.swift
+++ b/VDSSample/ViewControllers/ToggleViewController.swift
@@ -10,7 +10,7 @@ import UIKit
 import VDS
 import VDSColorTokens
 
-class ToggleViewController: BaseViewController {
+class ToggleViewController: BaseViewController<Toggle> {
     
     lazy var textSizePickerSelectorView = {
         PickerSelectorView(title: "",
@@ -42,19 +42,17 @@ class ToggleViewController: BaseViewController {
     var onTextField = TextField()
     var offTextField = TextField()
 
-    var toggle = Toggle()
-
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: toggle))
+        addContentTopView(view: .makeWrapper(for: component))
                 
-        setupForm()
         setupPicker()
     }
     
     override func allTextFields() -> [TextField]? { [onTextField, offTextField] }
 
-    func setupForm() {
+    override func setupForm() {
+        super.setupForm()
         
         addFormRow(label: "Show Text", view: .makeWrapper(for: showTextSwitch))
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
@@ -69,7 +67,7 @@ class ToggleViewController: BaseViewController {
         //add textFormStackView to main form
         formStackView.addArrangedSubview(textFormStackView)
         
-        toggle.onChange = { [weak self] toggle in
+        component.onChange = { [weak self] toggle in
             let alertController:UIAlertController = UIAlertController(title: "Alert",
                                                                       message: "Toggle Value: \(toggle.isOn)",
                                                                       preferredStyle: UIAlertController.Style.alert)
@@ -79,54 +77,54 @@ class ToggleViewController: BaseViewController {
         }
         
         showTextSwitch.onChange = { [weak self] sender in
-            self?.toggle.showText = sender.isOn
+            self?.component.showText = sender.isOn
             self?.textFormStackView.isHidden = !sender.isOn
         }
         
         disabledSwitch.onChange = { [weak self] sender in
-            self?.toggle.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
         
         boldSwitch.onChange = { [weak self] sender in
-            self?.toggle.textWeight = sender.isOn ? .bold : .regular
+            self?.component.textWeight = sender.isOn ? .bold : .regular
         }
 
         onTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.toggle.onText = text
+                self?.component.onText = text
             }.store(in: &subscribers)
 
         offTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.toggle.offText = text
+                self?.component.offText = text
             }.store(in: &subscribers)
 
         textFormStackView.isHidden = true
         
         //setup UI
-        surfacePickerSelectorView.text = toggle.surface.rawValue
-        textSizePickerSelectorView.text = toggle.textSize.rawValue
-        textPositionPickerSelectorView.text = toggle.textPosition.rawValue
-        onTextField.text = toggle.onText
-        offTextField.text = toggle.offText
+        surfacePickerSelectorView.text = component.surface.rawValue
+        textSizePickerSelectorView.text = component.textSize.rawValue
+        textPositionPickerSelectorView.text = component.textPosition.rawValue
+        onTextField.text = component.onText
+        offTextField.text = component.offText
     }
     
     //Picker        
     func setupPicker(){
         
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.toggle.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
                 
         textSizePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.toggle.textSize = item
+            self?.component.textSize = item
         }
 
         textPositionPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.toggle.textPosition = item
+            self?.component.textPosition = item
         }
         
     }
diff --git a/VDSSample/ViewControllers/TooltipViewController.swift b/VDSSample/ViewControllers/TooltipViewController.swift
index ebf6c27..ee2dc2c 100644
--- a/VDSSample/ViewControllers/TooltipViewController.swift
+++ b/VDSSample/ViewControllers/TooltipViewController.swift
@@ -11,7 +11,7 @@ import VDS
 import VDSColorTokens
 import Combine
 
-class  TooltipViewController: BaseViewController {
+class  TooltipViewController: BaseViewController<Tooltip> {
 
     var disabledSwitch = Toggle()
     var titleTextField = TextField()
@@ -30,20 +30,18 @@ class  TooltipViewController: BaseViewController {
                            items: Tooltip.FillColor.allCases)
     }()
 
-    var tooltip = Tooltip()
-    
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: tooltip, edgeSpacing: 16.0), edgeSpacing: 0.0)
+        addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
         
-        setupForm()
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [titleTextField, contentTextField, closeButtonTextField] }
 
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Size", view: sizePickerSelectorView)
@@ -51,55 +49,55 @@ class  TooltipViewController: BaseViewController {
         addFormRow(label: "Title", view: titleTextField)
         addFormRow(label: "Content", view: contentTextField)
         addFormRow(label: "Close Button Text", view: closeButtonTextField)
-
+        
         disabledSwitch.onChange =  { [weak self] sender in
-            self?.tooltip.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
 
         titleTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.tooltip.title = text
+                self?.component.title = text
             }.store(in: &subscribers)
         
         contentTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.tooltip.content = text
+                self?.component.content = text
             }.store(in: &subscribers)
 
         closeButtonTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.tooltip.closeButtonText = text
+                self?.component.closeButtonText = text
             }.store(in: &subscribers)
     }
     
     func setupModel() {
-        tooltip.title = "5G Ultra Wideband is available in your area."
-        tooltip.content = "$799.99 (128 GB only) device payment purchase w/new or upgrade smartphone line on postpaid 5G Unlimited plans only req'd. Less up to $800 trade-in/promo credit applied over 36 mos.; promo credit ends if eligibility req’s are no longer met; 0% APR. Trade-in conditions apply.$799.99 (128 GB only) device payment purchase w/new or upgrade smartphone line on postpaid 5G Unlimited plans only req'd. Less up to $800 trade-in."
+        component.title = "5G Ultra Wideband is available in your area."
+        component.content = "$799.99 (128 GB only) device payment purchase w/new or upgrade smartphone line on postpaid 5G Unlimited plans only req'd. Less up to $800 trade-in/promo credit applied over 36 mos.; promo credit ends if eligibility req’s are no longer met; 0% APR. Trade-in conditions apply.$799.99 (128 GB only) device payment purchase w/new or upgrade smartphone line on postpaid 5G Unlimited plans only req'd. Less up to $800 trade-in."
         
         //setup UI
-        surfacePickerSelectorView.text = tooltip.surface.rawValue
-        disabledSwitch.isOn = tooltip.disabled
-        titleTextField.text = tooltip.title
-        contentTextField.text = tooltip.content
-        closeButtonTextField.text = tooltip.closeButtonText
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = component.disabled
+        titleTextField.text = component.title
+        contentTextField.text = component.content
+        closeButtonTextField.text = component.closeButtonText
     }
             
     //Picker
     func setupPicker(){
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.tooltip.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
         sizePickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.tooltip.size = item
+            self?.component.size = item
         }
         
         fillColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.tooltip.fillColor = item
+            self?.component.fillColor = item
         }
     }
     
diff --git a/VDSSample/ViewControllers/TrailingTooltipLabel.swift b/VDSSample/ViewControllers/TrailingTooltipLabel.swift
index 06e8d64..82a2fd5 100644
--- a/VDSSample/ViewControllers/TrailingTooltipLabel.swift
+++ b/VDSSample/ViewControllers/TrailingTooltipLabel.swift
@@ -10,7 +10,7 @@ import UIKit
 import VDS
 import VDSColorTokens
 
-class TrailingTooltipLabelViewController: BaseViewController {
+class TrailingTooltipLabelViewController: BaseViewController<TrailingTooltipLabel> {
 
     lazy var textSizePickerSelectorView = {
         TextSizePickerSelectorView(title: "",
@@ -44,20 +44,18 @@ class TrailingTooltipLabelViewController: BaseViewController {
 
     private var isBold: Bool = false
 
-    var tooltipLabel = TrailingTooltipLabel()
-
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: tooltipLabel)
+        addContentTopView(view: component)
 
-        setupForm()
         setupPicker()
         setupModel()
     }
     
     override func allTextFields() -> [TextField]? { [textField, titleTextField, contentTextField, closeButtonTextField] }
 
-    func setupForm(){
+    override func setupForm(){
+        super.setupForm()  
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
         addFormRow(label: "Bold", view: .makeWrapper(for: boldSwitch))
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
@@ -72,7 +70,7 @@ class TrailingTooltipLabelViewController: BaseViewController {
         addFormRow(label: "Tooltip Close Button Text", view: closeButtonTextField)
 
         disabledSwitch.onChange = { [weak self] sender in
-            self?.tooltipLabel.disabled = sender.isOn
+            self?.component.disabled = sender.isOn
         }
 
         boldSwitch
@@ -85,40 +83,40 @@ class TrailingTooltipLabelViewController: BaseViewController {
         textField
             .textPublisher
             .sink { [weak self] text in
-                self?.tooltipLabel.labelText = text
+                self?.component.labelText = text
             }.store(in: &subscribers)
         
         titleTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.tooltipLabel.tooltipTitle = text
+                self?.component.tooltipTitle = text
             }.store(in: &subscribers)
         
         contentTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.tooltipLabel.tooltipContent = text
+                self?.component.tooltipContent = text
             }.store(in: &subscribers)
 
         closeButtonTextField
             .textPublisher
             .sink { [weak self] text in
-                self?.tooltipLabel.tooltipCloseButtonText = text
+                self?.component.tooltipCloseButtonText = text
             }.store(in: &subscribers)
 
     }
     
     func setupModel() {
-        tooltipLabel.labelText = "Label Component"
-        tooltipLabel.labelTextStyle = .featureSmall
-        tooltipLabel.tooltipTitle = "5G Ultra Wideband is available in your area."
-        tooltipLabel.tooltipContent = "$799.99 (128 GB only) device payment purchase w/new or upgrade smartphone line on postpaid 5G Unlimited plans only req'd. Less up to $800 trade-in/promo credit applied over 36 mos.; promo credit ends if eligibility req’s are no longer met; 0% APR. Trade-in conditions apply.$799.99 (128 GB only) device payment purchase w/new or upgrade smartphone line on postpaid 5G Unlimited plans only req'd. Less up to $800 trade-in."
+        component.labelText = "Label Component"
+        component.labelTextStyle = .featureSmall
+        component.tooltipTitle = "5G Ultra Wideband is available in your area."
+        component.tooltipContent = "$799.99 (128 GB only) device payment purchase w/new or upgrade smartphone line on postpaid 5G Unlimited plans only req'd. Less up to $800 trade-in/promo credit applied over 36 mos.; promo credit ends if eligibility req’s are no longer met; 0% APR. Trade-in conditions apply.$799.99 (128 GB only) device payment purchase w/new or upgrade smartphone line on postpaid 5G Unlimited plans only req'd. Less up to $800 trade-in."
 
         //setup UI
-        surfacePickerSelectorView.text = tooltipLabel.surface.rawValue
-        disabledSwitch.isOn = tooltipLabel.disabled
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = component.disabled
         boldSwitch.isOn = isBold
-        textField.text = tooltipLabel.labelText
+        textField.text = component.labelText
         
         //set the font
         fontCategory = .feature
@@ -127,11 +125,11 @@ class TrailingTooltipLabelViewController: BaseViewController {
         textSizePickerSelectorView.text = "Small"
         
         //setup UI
-        surfacePickerSelectorView.text = tooltipLabel.surface.rawValue
-        disabledSwitch.isOn = tooltipLabel.disabled
-        titleTextField.text = tooltipLabel.tooltipTitle
-        contentTextField.text = tooltipLabel.tooltipContent
-        closeButtonTextField.text = tooltipLabel.tooltipCloseButtonText
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = component.disabled
+        titleTextField.text = component.tooltipTitle
+        contentTextField.text = component.tooltipContent
+        closeButtonTextField.text = component.tooltipCloseButtonText
 
     }
     
@@ -159,18 +157,18 @@ class TrailingTooltipLabelViewController: BaseViewController {
     
     func updateLabelStyle(){
         if let style = fontCategory.style(for: textSize, isBold: isBold) {
-            tooltipLabel.labelTextStyle = style
+            component.labelTextStyle = style
         }
     }
 
     func setupPicker(){
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.tooltipLabel.surface = item
+            self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
         textPositionPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.tooltipLabel.labelTextPosition = item
+            self?.component.labelTextPosition = item
         }
 
         textSizePickerSelectorView.onPickerDidSelect = {  [weak self] item in
@@ -182,7 +180,7 @@ class TrailingTooltipLabelViewController: BaseViewController {
         }
         
         sizePickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.tooltipLabel.tooltipSize = item
+            self?.component.tooltipSize = item
         }
 
     }