WIP on EntryFieldBase: d1d749b initial commit

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>

VDSSample.xcodeproj/project.pbxproj

@@ -93,6 +93,7 @@
 		EAD062A52A3B5CDF0015965D /* Slider.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAD062A42A3B5CDF0015965D /* Slider.swift */; };
 		EAD062AD2A3B86950015965D /* BadgeIndicatorViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAD062AC2A3B86950015965D /* BadgeIndicatorViewController.swift */; };
 		EAD068902A55FC11002E3A2D /* LoaderViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAD0688F2A55FC11002E3A2D /* LoaderViewController.swift */; };
+		EAEC94CF2BFCFE090064FB2F /* Test.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAEC94CE2BFCFE090064FB2F /* Test.swift */; };
 		EAEEEC942B1F824500531FC2 /* Bundle.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAEEEC932B1F824500531FC2 /* Bundle.swift */; };
 		EAF7F07D2899698800B287F5 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = EAF7F07B2899698800B287F5 /* Assets.xcassets */; };
 		EAF7F09C2899B92400B287F5 /* CheckboxItemViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAF7F09B2899B92400B287F5 /* CheckboxItemViewController.swift */; };
@@ -189,6 +190,7 @@
 		EAD062A42A3B5CDF0015965D /* Slider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Slider.swift; sourceTree = "<group>"; };
 		EAD062AC2A3B86950015965D /* BadgeIndicatorViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BadgeIndicatorViewController.swift; sourceTree = "<group>"; };
 		EAD0688F2A55FC11002E3A2D /* LoaderViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoaderViewController.swift; sourceTree = "<group>"; };
+		EAEC94CE2BFCFE090064FB2F /* Test.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Test.swift; sourceTree = "<group>"; };
 		EAEEEC932B1F824500531FC2 /* Bundle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Bundle.swift; sourceTree = "<group>"; };
 		EAF7F07B2899698800B287F5 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
 		EAF7F09B2899B92400B287F5 /* CheckboxItemViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CheckboxItemViewController.swift; sourceTree = "<group>"; };
@@ -350,6 +352,7 @@
 				EA3C3BB328996775000CA526 /* ToggleViewController.swift */,
 				EAB2375F29E88D5D00AABE9A /* TooltipViewController.swift */,
 				EAB2376B29E9E74900AABE9A /* TrailingTooltipLabelViewController.swift */,
+				EAEC94CE2BFCFE090064FB2F /* Test.swift */,
 			);
 			path = ViewControllers;
 			sourceTree = "<group>";
@@ -532,6 +535,7 @@
 				EA4DB30428DCD25B00103EE3 /* BadgeViewController.swift in Sources */,
 				EAB2376029E88D5D00AABE9A /* TooltipViewController.swift in Sources */,
 				EA89204828B66CE2006B9984 /* ScrollViewKeyboardAvoiding.swift in Sources */,
+				EAEC94CF2BFCFE090064FB2F /* Test.swift in Sources */,
 				EA0FC2C12912DC5500DF80B4 /* TextLinkCaretViewController.swift in Sources */,
 				71B23C312B921D740027F7D9 /* PaginationViewController.swift in Sources */,
 				EAF7F09C2899B92400B287F5 /* CheckboxItemViewController.swift in Sources */,

VDSSample/ViewControllers/IconViewController.swift

@@ -57,14 +57,12 @@ class IconViewController: BaseViewController<Icon> {
     
     func setupModel() {
         let name = Icon.Name.accessibility
-        let color = UIColor.VDSColor.paletteBlack
-        component.color = color.uiColor
         component.name = name
         
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         sizePickerSelectorView.text = component.size.rawValue
-        colorPickerSelectorView.text = color.rawValue
+        colorPickerSelectorView.text = UIColor.VDSColor.paletteBlack.rawValue
         namePickerSelectorView.text = name.rawValue
     }
     func setupPicker(){

VDSSample/ViewControllers/InputFieldViewController.swift

@@ -261,8 +261,9 @@ class  InputFieldViewController: BaseViewController<InputField> {
         }
         
         inputTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.component.fieldType = item
+            let _ = self?.component.resignFirstResponder()
             self?.component.text = ""
+            self?.component.fieldType = item
             self?.updateFormSections()
         }
         
@@ -319,7 +320,6 @@ extension InputFieldViewController: ComponentSampleable {
     static func makeSample() -> ComponentSample {
         let component = Self.makeComponent()
         component.fieldType = .text
-        component.width = 328
         component.labelText = "Street Address"
         component.helperText = "For example: 123 Verizon St"
         component.errorText = "Enter a valid address."
@@ -328,3 +328,425 @@ extension InputFieldViewController: ComponentSampleable {
         return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
     }
 }
+
+
+
+import VDSTokens
+import Combine
+
+/// Base Class used to build out a Input controls.
+open class TEntryFieldBase: Control, Changeable, FormFieldInternalValidatable {
+    
+    //--------------------------------------------------
+    // MARK: - Initializers
+    //--------------------------------------------------
+    required public init() {
+        super.init(frame: .zero)
+    }
+    
+    public override init(frame: CGRect) {
+        super.init(frame: .zero)
+    }
+    
+    public required init?(coder: NSCoder) {
+        super.init(coder: coder)
+    }
+
+    //--------------------------------------------------
+    // MARK: - Enums
+    //--------------------------------------------------
+    /// Enum used to describe the position of the helper text.
+    public enum HelperTextPlacement: String, CaseIterable {
+        case bottom, right
+    }
+
+    //--------------------------------------------------
+    // MARK: - Private Properties
+    //--------------------------------------------------
+    internal var primaryStackView: UIStackView = {
+        return UIStackView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+            $0.axis = .vertical
+            $0.distribution = .fill
+            $0.alignment = .leading
+        }
+    }()
+    
+    /// This is the veritcal stack view that has 2 rows, the containerView and the return view
+    /// of the getBottomContainer() method, by default returns the bottomContainerStackView.
+    internal let secondaryStackView = UIStackView().with {
+        $0.translatesAutoresizingMaskIntoConstraints = false
+        $0.axis = .vertical
+        $0.distribution = .fill
+    }
+    
+    /// This is the view that will be wrapped with the border for userInteraction.
+    /// The only subview of this view is the fieldStackView
+    internal var containerView: UIView = {
+        return UIView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+        }
+    }()
+    
+    /// This is a horizontal Stack View that is placed inside the containterView (bordered view)
+    /// The first arrangedView will be the view from getFieldContainer()
+    /// The second view is the statusIcon.
+    internal var fieldStackView: UIStackView = {
+        return UIStackView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+            $0.axis = .horizontal
+            $0.distribution = .fill
+            $0.alignment = .top
+        }
+    }()
+    
+    /// This is a vertical stack used for the errorLabel and helperLabel.
+    internal var bottomContainerStackView: UIStackView = {
+        return UIStackView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+            $0.axis = .vertical
+            $0.distribution = .fill
+            $0.spacing = VDSLayout.space2X
+        }
+    }()
+    
+    open var rules = [AnyRule<String>]()
+
+    //--------------------------------------------------
+    // MARK: - Configuration Properties
+    //--------------------------------------------------
+    // Sizes are from InVision design specs.
+    internal var maxWidth: CGFloat { frame.size.width }
+    internal var minWidth: CGFloat { containerSize.width }
+    internal var containerSize: CGSize { CGSize(width: minWidth, height: 44) }
+    
+    internal let primaryColorConfiguration =  ViewColorConfiguration().with {
+        $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forDisabled: true)
+        $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forDisabled: false)
+    }
+    
+    internal let secondaryColorConfiguration = ViewColorConfiguration().with {
+        $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forDisabled: true)
+        $0.setSurfaceColors(VDSColor.elementsSecondaryOnlight, VDSColor.elementsSecondaryOndark, forDisabled: false)
+    }
+
+    internal var backgroundColorConfiguration = ControlColorConfiguration().with {
+        $0.setSurfaceColors(VDSFormControlsColor.backgroundOnlight, VDSFormControlsColor.backgroundOndark, forState: .normal)
+        $0.setSurfaceColors(VDSFormControlsColor.backgroundOnlight, VDSFormControlsColor.backgroundOndark, forState: .disabled)
+        $0.setSurfaceColors(VDSColor.feedbackErrorBackgroundOnlight, VDSColor.feedbackErrorBackgroundOndark, forState: .error)
+        $0.setSurfaceColors(VDSColor.feedbackErrorBackgroundOnlight, VDSColor.feedbackErrorBackgroundOndark, forState: [.error, .focused])
+    }
+
+    internal var borderColorConfiguration = ControlColorConfiguration().with {
+        $0.setSurfaceColors(VDSFormControlsColor.borderOnlight, VDSFormControlsColor.borderOndark, forState: .normal)
+        $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOnlight, forState: .focused)
+        $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOnlight, forState: [.focused, .error])
+        $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled)
+        $0.setSurfaceColors(VDSColor.feedbackErrorOnlight, VDSColor.feedbackErrorOndark, forState: .error)
+        $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.disabled,.error])
+    }
+    
+    internal let iconColorConfiguration =  ControlColorConfiguration().with {
+        $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .normal)
+        $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled)
+        $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .error)
+    }
+
+    internal var readOnlyBorderColorConfiguration = ControlColorConfiguration().with {
+        $0.setSurfaceColors(VDSFormControlsColor.borderReadonlyOnlight, VDSFormControlsColor.borderReadonlyOndark, forState: .normal)
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Public Properties
+    //--------------------------------------------------
+    open var onChangeSubscriber: AnyCancellable?
+
+    open var titleLabel = Label().with {
+        $0.setContentCompressionResistancePriority(.required, for: .vertical)
+        $0.textStyle = .bodySmall
+    }
+    
+    open var errorLabel = Label().with {
+        $0.setContentCompressionResistancePriority(.required, for: .vertical)
+        $0.textStyle = .bodySmall
+        $0.accessibilityValue = "error"
+    }
+    
+    open var helperLabel = Label().with {
+        $0.setContentCompressionResistancePriority(.required, for: .vertical)
+        $0.textStyle = .bodySmall
+    }
+    
+    open var statusIcon: Icon = Icon().with {
+        $0.size = .medium
+    }
+        
+    open var labelText: String? { didSet { setNeedsUpdate() } }
+    
+    open var helperText: String? { didSet { setNeedsUpdate() } }
+    
+    /// Whether not to show the error.
+    open var showError: Bool = false { didSet { setNeedsUpdate() } }
+    
+    /// FormFieldValidator
+    open var validator: (any FormFieldValidatorable)?
+
+    /// Override UIControl state to add the .error state if showError is true.
+    open override var state: UIControl.State {
+        get {
+            var state = super.state
+            if showError || hasInternalError {
+                state.insert(.error)
+            }
+            return state
+        }
+    }
+        
+    open var errorText: String? { didSet { setNeedsUpdate() } }
+            
+    open var tooltipModel: Tooltip.TooltipModel? { didSet { setNeedsUpdate() } }
+        
+    open var transparentBackground: Bool = false { didSet { setNeedsUpdate() } }
+    
+    open var width: CGFloat? { didSet { setNeedsUpdate() } }
+        
+    open var inputId: String? { didSet { setNeedsUpdate() } }
+        
+    /// The text of this textField.
+    open var value: String? {
+        get { fatalError("must be read from subclass")}
+    }
+    
+    open var defaultValue: AnyHashable? { didSet { setNeedsUpdate() } }
+    
+    open var isRequired: Bool = false { didSet { setNeedsUpdate() } }
+    
+    open var isReadOnly: Bool = false { didSet { setNeedsUpdate() } }
+    
+    //--------------------------------------------------
+    // MARK: - Constraints
+    //--------------------------------------------------
+    internal var heightConstraint: NSLayoutConstraint?
+    internal var widthConstraint: NSLayoutConstraint?
+    
+    //--------------------------------------------------
+    // MARK: - Overrides
+    //--------------------------------------------------
+    /// Called once when a view is initialized and is used to Setup additional UI or other constants and configurations.
+    open override func setup() {
+        super.setup()
+                
+        isAccessibilityElement = false
+        addSubview(primaryStackView)
+        
+        //create the wrapping view
+        heightConstraint = containerView.heightGreaterThanEqualTo(constant: containerSize.height)
+        widthConstraint = containerView.width(constant: frame.size.width)
+        
+        secondaryStackView.addArrangedSubview(containerView)
+        secondaryStackView.setCustomSpacing(8, after: containerView)
+
+        //add ContainerStackView
+        //this is the horizontal stack that contains
+        //the left, InputContainer, Icons, Buttons
+        containerView.addSubview(fieldStackView)
+        fieldStackView.pinToSuperView(.uniform(VDSLayout.space3X))
+    
+        let fieldContainerView = getFieldContainer()
+        fieldContainerView.translatesAutoresizingMaskIntoConstraints = false
+        
+        //add the view to add input fields
+        fieldStackView.addArrangedSubview(fieldContainerView)
+        fieldStackView.addArrangedSubview(statusIcon)
+        fieldStackView.setCustomSpacing(VDSLayout.space3X, after: fieldContainerView)
+
+        //get the container this is what show helper text, error text
+        //can include other for character count, max length
+        let bottomContainer = getBottomContainer()
+
+        //this is the vertical stack that contains error text, helper text
+        bottomContainerStackView.addArrangedSubview(errorLabel)
+        bottomContainerStackView.addArrangedSubview(helperLabel)
+        
+        primaryStackView.addArrangedSubview(titleLabel)
+        primaryStackView.addArrangedSubview(secondaryStackView)
+        secondaryStackView.addArrangedSubview(bottomContainer)
+
+        primaryStackView.setCustomSpacing(4, after: titleLabel)
+
+        primaryStackView
+            .pinTop()
+            .pinLeading()
+            .pinTrailing(0, .defaultHigh)
+            .pinBottom(0, .defaultHigh)
+
+        titleLabel.textColorConfiguration = primaryColorConfiguration.eraseToAnyColorable()
+        errorLabel.textColorConfiguration = primaryColorConfiguration.eraseToAnyColorable()
+        helperLabel.textColorConfiguration = secondaryColorConfiguration.eraseToAnyColorable()
+    }
+            
+    /// Resets to default settings.
+    open override func reset() {
+        super.reset()
+        titleLabel.reset()
+        errorLabel.reset()
+        helperLabel.reset()
+        
+        titleLabel.textStyle = .bodySmall
+        errorLabel.textStyle = .bodySmall
+        helperLabel.textStyle = .bodySmall
+
+        labelText = nil
+        helperText = nil
+        showError = false
+        errorText = nil
+        tooltipModel = nil
+        transparentBackground = false
+        width = nil
+        inputId = nil
+        defaultValue = nil
+        isRequired = false
+        isReadOnly = false
+        onChange = nil
+    }
+    
+    /// Used to make changes to the View based off a change events or from local properties.
+    open override func updateView() {
+        super.updateView()
+        updateContainerView()
+        updateTitleLabel()
+        updateErrorLabel()
+        updateHelperLabel()
+        updateContainerWidth()
+    }
+    
+    open func validate(){
+        updateRules()
+        validator = FormFieldValidator<TEntryFieldBase>(field: self, rules: rules)
+        validator?.validate()
+        setNeedsUpdate()
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Private Methods
+    //--------------------------------------------------
+    internal func updateContainerView()  {
+        containerView.backgroundColor = backgroundColorConfiguration.getColor(self)
+        containerView.layer.borderColor = isReadOnly ? readOnlyBorderColorConfiguration.getColor(self).cgColor : borderColorConfiguration.getColor(self).cgColor
+        containerView.layer.borderWidth = VDSFormControls.borderWidth
+        containerView.layer.cornerRadius = VDSFormControls.borderRadius
+    }
+        
+    //--------------------------------------------------
+    // MARK: - Public Methods
+    //--------------------------------------------------
+    open func updateContainerWidth() {
+        if let width, width > minWidth && width < maxWidth {
+            widthConstraint?.constant = width
+        } else {
+            widthConstraint?.constant = maxWidth >= minWidth ? maxWidth : minWidth
+        }
+        widthConstraint?.activate()
+    }
+    
+    /// Container for the area in which the user interacts.
+    open func getFieldContainer() -> UIView {
+        fatalError("Subclass must return the view that contains the field/view the user will interact with.")
+    }
+   
+    /// Container for the area in which helper or error text presents.
+    open func getBottomContainer() -> UIView {
+        return bottomContainerStackView
+    }
+    
+    internal func updateRules() {
+        rules.removeAll()
+        if self.isRequired {
+            let rule = RequiredRule()
+            if let errorText, !errorText.isEmpty {
+                rule.errorMessage = errorText
+            } else if let labelText{
+                rule.errorMessage = "You must enter a \(labelText)"
+            } else {
+                rule.errorMessage = "You must enter a value"
+            }
+            rules.append(.init(rule))
+        }
+    }
+    
+    open func updateTitleLabel() {
+               
+        //update the local vars for the label since we no
+        //long have a model
+        var attributes: [any LabelAttributeModel] = []
+        var updatedLabelText = labelText
+        
+        //dealing with the "Optional" addition to the text
+        if let oldText = updatedLabelText, !isRequired, !oldText.hasSuffix("Optional")  {
+            if isEnabled {
+                let optionColorAttr = ColorLabelAttribute(location: oldText.count + 2,
+                                                          length: 8,
+                                                          color: VDSColor.elementsSecondaryOnlight)
+                
+                attributes.append(optionColorAttr)
+            }
+            updatedLabelText = "\(oldText)  Optional"
+        }
+        
+        if let tooltipModel {
+            attributes.append(TooltipLabelAttribute(surface: surface, model: tooltipModel, presenter: self))
+        }
+
+        //set the titleLabel
+        titleLabel.text = updatedLabelText
+        titleLabel.attributes = attributes
+        titleLabel.surface = surface
+        titleLabel.isEnabled = isEnabled
+    }
+    
+    open func updateErrorLabel(){
+        if showError, let errorText {
+            errorLabel.text = errorText
+            errorLabel.surface = surface
+            errorLabel.isEnabled = isEnabled
+            errorLabel.isHidden = false
+            statusIcon.name = .error
+            statusIcon.surface = surface
+            statusIcon.isHidden = !isEnabled || state.contains(.focused)
+        } else if hasInternalError, let internalErrorText {
+            errorLabel.text = internalErrorText
+            errorLabel.surface = surface
+            errorLabel.isEnabled = isEnabled
+            errorLabel.isHidden = false
+            statusIcon.name = .error
+            statusIcon.surface = surface
+            statusIcon.isHidden = !isEnabled || state.contains(.focused)
+        } else {
+            statusIcon.isHidden = true
+            errorLabel.isHidden = true
+        }
+        statusIcon.color = iconColorConfiguration.getColor(self)
+    }
+    
+    open func updateHelperLabel(){
+        //set the helper label position
+        if let helperText {
+            helperLabel.text = helperText
+            helperLabel.surface = surface
+            helperLabel.isEnabled = isEnabled
+            helperLabel.isHidden = false
+        } else {
+            helperLabel.isHidden = true
+        }
+    }
+}
+
+class RequiredRule: Rule {
+    var maxLength: Int?
+    var errorMessage: String = "This field is required."
+    
+    func isValid(value: String?) -> Bool {
+        guard let value, !value.isEmpty, value.count > 0 else { return false }
+        return true
+    }
+}

VDSSample/ViewControllers/MenuViewController.swift

@@ -66,6 +66,9 @@ class MenuCell: UITableViewCell {
 
 class MenuViewController: UITableViewController, TooltipLaunchable {
     static let items: [MenuComponent] = [
+        MenuComponent(title: "Width", completed: true, viewController: WidthViewController.self),
+        MenuComponent(title: "CircleIcon", completed: true, viewController: CircleIconViewController.self),
+        MenuComponent(title: "Test", completed: true, viewController: TestViewController.self),
         MenuComponent(title: "DropShadow Tester", completed: true, viewController: DropShadowViewController.self),
         MenuComponent(title: "TableView Tester", completed: true, viewController: TableViewTestController.self),
         MenuComponent(title: "Badge", completed: true, viewController: BadgeViewController.self),

VDSSample/ViewControllers/Test.swift

@@ -0,0 +1,850 @@
+//
+//  Test.swift
+//  VDSSample
+//
+//  Created by Matt Bruce on 5/21/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+import VDSTokens
+import Combine
+
+class  TestViewController: BaseViewController<EntryFieldBase2> {
+            
+  
+    
+    lazy var helperTextPositionPickerSelectorView = {
+        PickerSelectorView(title: "",
+                            picker: self.picker,
+                           items: EntryFieldBase2.HelperTextPlacement.allCases)
+    }()
+    
+    var labelTextField = TextField()
+    var errorTextField = TextField()
+    var successTextField = TextField()
+    var helperTextField = TextField()
+    var showErrorSwitch = Toggle()
+    var showSuccessSwitch = Toggle()
+    var widthTextField = NumericField()
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: component)
+        component.labelText = "Title For the Component Blah blah blah"
+        component.errorText = "Error For the Component"
+        component.helperText = "Helper For the Component"
+        setupPicker()
+        setupModel()
+    }
+    
+    override func setupForm(){
+        super.setupForm()
+        let general = FormSection().with {
+            $0.title = "\n\nGeneral Settings"
+        }
+        
+        general.addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        general.addFormRow(label: "Width", view: widthTextField)
+        general.addFormRow(label: "Label Text", view: labelTextField)
+        general.addFormRow(label: "Helper Text Placement", view: helperTextPositionPickerSelectorView)
+        general.addFormRow(label: "Helper Text", view: helperTextField)
+        general.addFormRow(label: "Error", view: showErrorSwitch)
+        general.addFormRow(label: "Error Text", view: errorTextField)
+//        general.addFormRow(label: "Success", view: showSuccessSwitch)
+//        general.addFormRow(label: "Success Text", view: successTextField)
+
+        append(section: general)
+        
+        showErrorSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            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.component.showSuccess = sender.isOn
+//            if self.component.showSuccess != sender.isOn {
+//                self.showSuccessSwitch.isOn = self.component.showSuccess
+//            }
+//        }
+
+        labelTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.labelText = text
+            }.store(in: &subscribers)
+        
+        helperTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.helperText = text
+            }.store(in: &subscribers)
+
+        errorTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.errorText = text
+            }.store(in: &subscribers)
+
+        widthTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.component.width = number?.cgFloatValue
+            }.store(in: &subscribers)
+
+    }
+    
+    func setupModel() {
+        //setup UI
+        surfacePickerSelectorView.text = component.surface.rawValue
+        helperTextPositionPickerSelectorView.text = component.helperTextPlacement.rawValue
+        labelTextField.text = component.labelText
+        helperTextField.text = component.helperText
+        errorTextField.text = component.errorText
+    }
+    
+    func setupPicker(){
+
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        helperTextPositionPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.helperTextPlacement = item
+        }
+    }
+}
+
+open class EntryFieldBase2: Control, Changeable, FormFieldInternalValidatable {
+    
+    //--------------------------------------------------
+    // MARK: - Initializers
+    //--------------------------------------------------
+    required public init() {
+        super.init(frame: .zero)
+    }
+    
+    public override init(frame: CGRect) {
+        super.init(frame: .zero)
+    }
+    
+    public required init?(coder: NSCoder) {
+        super.init(coder: coder)
+    }
+
+    //--------------------------------------------------
+    // MARK: - Enums
+    //--------------------------------------------------
+    /// Enum used to describe the position of the helper text.
+    public enum HelperTextPlacement: String, CaseIterable {
+        case bottom, right
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Private Properties
+    //--------------------------------------------------
+    internal let mainStackView = UIStackView().with {
+        $0.axis = .vertical
+        $0.alignment = .fill
+        $0.spacing = 8
+        $0.translatesAutoresizingMaskIntoConstraints = false
+    }
+    
+    internal let contentStackView = UIStackView().with {
+        $0.axis = .vertical
+        $0.alignment = .fill
+        $0.distribution = .fill
+        $0.spacing = 8
+        $0.translatesAutoresizingMaskIntoConstraints = false
+    }
+    
+    /// only used for helperTextPosition == .right
+    internal let row1StackView = UIStackView().with {
+        $0.axis = .horizontal
+        $0.spacing = 8
+        $0.alignment = .top
+        $0.distribution = .fillEqually
+    }
+    
+    /// only used for helperTextPosition == .right
+    internal let row2StackView = UIStackView().with {
+        $0.axis = .horizontal
+        $0.spacing = 8
+        $0.alignment = .top
+        $0.distribution = .fillEqually
+    }
+    
+    internal var fieldStackView: UIStackView = {
+        return UIStackView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+            $0.axis = .horizontal
+            $0.distribution = .fill
+            $0.alignment = .top
+        }
+    }()
+    
+    /// This is a vertical stack used for the errorLabel and helperLabel.
+    internal var bottomContainerStackView: UIStackView = {
+        return UIStackView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+            $0.axis = .vertical
+            $0.distribution = .fill
+            $0.spacing = VDSLayout.space2X
+        }
+    }()
+        
+    /// This is the view that will be wrapped with the border for userInteraction.
+    /// The only subview of this view is the fieldStackView
+    internal var containerView: UIView = {
+        return UIView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+        }
+    }()
+    
+    /// This is set by a local method.
+    internal var bottomContainerView: UIView!
+    
+    //--------------------------------------------------
+    // MARK: - Constraints
+    //--------------------------------------------------
+    internal var widthConstraint: NSLayoutConstraint?
+
+    //--------------------------------------------------
+    // MARK: - Configuration Properties
+    //--------------------------------------------------
+    // Sizes are from InVision design specs.
+    internal var maxWidth: CGFloat { frame.size.width }
+    internal var minWidth: CGFloat { containerSize.width }
+    internal var containerSize: CGSize { CGSize(width: 150, height: 44) }
+    
+    internal let primaryColorConfiguration =  ViewColorConfiguration().with {
+        $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forDisabled: true)
+        $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forDisabled: false)
+    }
+    
+    internal let secondaryColorConfiguration = ViewColorConfiguration().with {
+        $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forDisabled: true)
+        $0.setSurfaceColors(VDSColor.elementsSecondaryOnlight, VDSColor.elementsSecondaryOndark, forDisabled: false)
+    }
+
+    internal var backgroundColorConfiguration = ControlColorConfiguration().with {
+        $0.setSurfaceColors(VDSFormControlsColor.backgroundOnlight, VDSFormControlsColor.backgroundOndark, forState: .normal)
+        $0.setSurfaceColors(VDSFormControlsColor.backgroundOnlight, VDSFormControlsColor.backgroundOndark, forState: .disabled)
+        $0.setSurfaceColors(VDSColor.feedbackErrorBackgroundOnlight, VDSColor.feedbackErrorBackgroundOndark, forState: .error)
+        $0.setSurfaceColors(VDSColor.feedbackErrorBackgroundOnlight, VDSColor.feedbackErrorBackgroundOndark, forState: [.error, .focused])
+    }
+
+    internal var borderColorConfiguration = ControlColorConfiguration().with {
+        $0.setSurfaceColors(VDSFormControlsColor.borderOnlight, VDSFormControlsColor.borderOndark, forState: .normal)
+        $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOnlight, forState: .focused)
+        $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOnlight, forState: [.focused, .error])
+        $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled)
+        $0.setSurfaceColors(VDSColor.feedbackErrorOnlight, VDSColor.feedbackErrorOndark, forState: .error)
+        $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.disabled,.error])
+    }
+    
+    internal let iconColorConfiguration =  ControlColorConfiguration().with {
+        $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .normal)
+        $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled)
+        $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .error)
+    }
+
+    internal var readOnlyBorderColorConfiguration = ControlColorConfiguration().with {
+        $0.setSurfaceColors(VDSFormControlsColor.borderReadonlyOnlight, VDSFormControlsColor.borderReadonlyOndark, forState: .normal)
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Public Properties
+    //--------------------------------------------------
+    open var onChangeSubscriber: AnyCancellable?
+
+    open var titleLabel = Label().with {
+        $0.setContentCompressionResistancePriority(.required, for: .vertical)
+        $0.textStyle = .bodySmall
+    }
+    
+    open var errorLabel = Label().with {
+        $0.setContentCompressionResistancePriority(.required, for: .vertical)
+        $0.textStyle = .bodySmall
+        $0.accessibilityValue = "error"
+    }
+    
+    open var helperLabel = Label().with {
+        $0.setContentCompressionResistancePriority(.required, for: .vertical)
+        $0.textStyle = .bodySmall
+    }
+    
+    open var statusIcon: Icon = Icon().with {
+        $0.size = .medium
+    }
+        
+    open var labelText: String? { didSet { setNeedsUpdate() } }
+    
+    open var helperText: String? { didSet { setNeedsUpdate() } }
+    
+    /// Whether not to show the error.
+    open var showError: Bool = false { didSet { setNeedsUpdate() } }
+    
+    /// FormFieldValidator
+    open var validator: (any FormFieldValidatorable)?
+
+    /// Override UIControl state to add the .error state if showError is true.
+    open override var state: UIControl.State {
+        get {
+            var state = super.state
+            if showError || hasInternalError {
+                state.insert(.error)
+            }
+            return state
+        }
+    }
+        
+    open var errorText: String? { didSet { setNeedsUpdate() } }
+            
+    open var tooltipModel: Tooltip.TooltipModel? { didSet { setNeedsUpdate() } }
+        
+    open var transparentBackground: Bool = false { didSet { setNeedsUpdate() } }
+    
+    open var width: CGFloat? { didSet { setNeedsUpdate() } }
+        
+    open var inputId: String? { didSet { setNeedsUpdate() } }
+        
+    /// The text of this textField.
+    open var value: String? {
+        get { fatalError("must be read from subclass")}
+    }
+    
+    open var defaultValue: AnyHashable? { didSet { setNeedsUpdate() } }
+    
+    open var isRequired: Bool = false { didSet { setNeedsUpdate() } }
+    
+    open var isReadOnly: Bool = false { didSet { setNeedsUpdate() } }
+
+    open var helperTextPlacement: HelperTextPlacement = .bottom {
+        didSet {
+            updateHelperTextPosition()
+        }
+    }
+        
+    open var rules = [AnyRule<String>]()
+
+    //--------------------------------------------------
+    // MARK: - Overrides
+    //--------------------------------------------------
+
+    /// Called once when a view is initialized and is used to Setup additional UI or other constants and configurations.
+    open override func setup() {
+        super.setup()
+        // Add mainStackView to the view
+        addSubview(mainStackView)
+       
+        let layoutGuide = UILayoutGuide()
+        addLayoutGuide(layoutGuide)
+        layoutGuide
+            .pinTop()
+            .pinLeading()
+            .pinBottom()
+            .pinTrailingLessThanOrEqualTo(anchor: trailingAnchor, constant: 0, priority: .defaultHigh)
+
+        addSubview(mainStackView)
+        mainStackView.pin(layoutGuide)
+        
+        widthConstraint = layoutGuide.width(constant: containerSize.width).deactivate()
+        
+        //add ContainerStackView
+        //this is the horizontal stack that contains
+        //InputContainer, Icons, Buttons
+        containerView.addSubview(fieldStackView)
+        fieldStackView.pinToSuperView(.uniform(VDSLayout.space3X))
+
+        let fieldContainerView = getFieldContainer()
+        fieldContainerView.translatesAutoresizingMaskIntoConstraints = false
+        
+        //add the view to add input fields
+        fieldStackView.addArrangedSubview(fieldContainerView)
+        fieldStackView.addArrangedSubview(statusIcon)
+        fieldStackView.setCustomSpacing(VDSLayout.space3X, after: fieldContainerView)
+
+        //get the container this is what show helper text, error text
+        //can include other for character count, max length
+        bottomContainerView = getBottomContainer()
+
+        //this is the vertical stack that contains error text, helper text
+        bottomContainerStackView.addArrangedSubview(errorLabel)
+        bottomContainerStackView.addArrangedSubview(helperLabel)
+        
+        // Add arranged subviews to textFieldStackView
+        contentStackView.addArrangedSubview(containerView)
+        contentStackView.addArrangedSubview(bottomContainerView)
+       
+        // Add arranged subviews to mainStackView
+        mainStackView.addArrangedSubview(titleLabel)
+        mainStackView.addArrangedSubview(contentStackView)
+               
+        // Initial position of the helper label
+        updateHelperTextPosition()
+        
+        // Set the UIImageView as the left view of the UITextField
+        let iconContainerView: UIView = UIView()
+        iconContainerView.addSubview(creditCardImageView)
+        creditCardImageView.pinToSuperView(.init(top: 0, left: 0, bottom: 0, right: 10))
+        
+        textField.leftView = iconContainerView
+        textField.leftViewMode = .always
+    }
+    
+    /// Updates the UI
+    open override func updateView() {
+        super.updateView()
+        updateContainerView()
+        updateTitleLabel()
+        updateErrorLabel()
+        updateHelperLabel()
+        updateContainerWidth()
+        
+        let imageName = InputField.CreditCardType.generic.imageName(surface: surface)
+        creditCardImageView.image = BundleManager.shared.image(for: imageName)
+    }
+    
+    /// Resets to default settings.
+    open override func reset() {
+        super.reset()
+        titleLabel.reset()
+        errorLabel.reset()
+        helperLabel.reset()
+        
+        titleLabel.textStyle = .bodySmall
+        errorLabel.textStyle = .bodySmall
+        helperLabel.textStyle = .bodySmall
+
+        labelText = nil
+        helperText = nil
+        showError = false
+        errorText = nil
+        tooltipModel = nil
+        transparentBackground = false
+        width = nil
+        inputId = nil
+        defaultValue = nil
+        isRequired = false
+        isReadOnly = false
+        onChange = nil
+    }
+
+    //--------------------------------------------------
+    // MARK: - Public Methods
+    //--------------------------------------------------
+    /// Container for the area in which the user interacts.
+    open func getFieldContainer() -> UIView {
+        return textField
+        //fatalError("Subclass must return the view that contains the field/view the user will interact with.")
+    }
+   
+    /// Container for the area in which helper or error text presents.
+    open func getBottomContainer() -> UIView {
+        return bottomContainerStackView
+    }
+
+    open func validate(){
+        updateRules()
+        validator = FormFieldValidator<EntryFieldBase2>(field: self, rules: rules)
+        validator?.validate()
+        setNeedsUpdate()
+    }
+        
+    open func updateTitleLabel() {
+               
+        //update the local vars for the label since we no
+        //long have a model
+        var attributes: [any LabelAttributeModel] = []
+        var updatedLabelText = labelText
+        
+        //dealing with the "Optional" addition to the text
+        if let oldText = updatedLabelText, !isRequired, !oldText.hasSuffix("Optional")  {
+            if isEnabled {
+                let optionColorAttr = ColorLabelAttribute(location: oldText.count + 2,
+                                                          length: 8,
+                                                          color: VDSColor.elementsSecondaryOnlight)
+                
+                attributes.append(optionColorAttr)
+            }
+            updatedLabelText = "\(oldText)  Optional"
+        }
+        
+        if let tooltipModel {
+            attributes.append(TooltipLabelAttribute(surface: surface, model: tooltipModel, presenter: self))
+        }
+
+        //set the titleLabel
+        titleLabel.text = updatedLabelText
+        titleLabel.attributes = attributes
+        titleLabel.surface = surface
+        titleLabel.isEnabled = isEnabled
+    }
+
+    open func updateErrorLabel(){
+        if showError, let errorText {
+            errorLabel.text = errorText
+            errorLabel.surface = surface
+            errorLabel.isEnabled = isEnabled
+            errorLabel.isHidden = false
+            statusIcon.name = .error
+            statusIcon.surface = surface
+            statusIcon.isHidden = !isEnabled || state.contains(.focused)
+        } else if hasInternalError, let internalErrorText {
+            errorLabel.text = internalErrorText
+            errorLabel.surface = surface
+            errorLabel.isEnabled = isEnabled
+            errorLabel.isHidden = false
+            statusIcon.name = .error
+            statusIcon.surface = surface
+            statusIcon.isHidden = !isEnabled || state.contains(.focused)
+        } else {
+            statusIcon.isHidden = true
+            errorLabel.isHidden = true
+        }
+        statusIcon.color = iconColorConfiguration.getColor(self)
+    }
+    
+    open func updateHelperLabel(){
+        //set the helper label position
+        if let helperText {
+            helperLabel.text = helperText
+            helperLabel.surface = surface
+            helperLabel.isEnabled = isEnabled
+            helperLabel.isHidden = false
+        } else {
+            helperLabel.isHidden = true
+        }
+    }
+    
+    open func updateContainerWidth() {
+        if let width, width >= minWidth, width <= maxWidth, helperTextPlacement != .right {
+            widthConstraint?.constant = width
+            widthConstraint?.activate()
+        } else {
+            widthConstraint?.deactivate()
+        }
+    }
+
+    //--------------------------------------------------
+    // MARK: - Private Methods
+    //--------------------------------------------------
+    internal func updateRules() {
+        rules.removeAll()
+        if self.isRequired {
+            let rule = RequiredRule()
+            if let errorText, !errorText.isEmpty {
+                rule.errorMessage = errorText
+            } else if let labelText{
+                rule.errorMessage = "You must enter a \(labelText)"
+            } else {
+                rule.errorMessage = "You must enter a value"
+            }
+            rules.append(.init(rule))
+        }
+    }
+
+    internal func updateContainerView()  {
+        containerView.backgroundColor = backgroundColorConfiguration.getColor(self)
+        containerView.layer.borderColor = borderColorConfiguration.getColor(self).cgColor
+        containerView.layer.borderWidth = VDSFormControls.borderWidth
+        containerView.layer.cornerRadius = VDSFormControls.borderRadius
+    }
+    
+    internal func updateHelperTextPosition() {
+        
+        titleLabel.removeFromSuperview()
+        helperLabel.removeFromSuperview()
+        
+        contentStackView.removeFromSuperview()
+        mainStackView.removeArrangedSubviews()
+        
+        //rows for helper-right
+        row1StackView.removeArrangedSubviews()
+        row2StackView.removeArrangedSubviews()
+        row1StackView.removeFromSuperview()
+        row2StackView.removeFromSuperview()
+        
+        switch helperTextPlacement {
+        case .bottom:
+            //add helper back into the contentView
+            bottomContainerStackView.addArrangedSubview(helperLabel)
+            mainStackView.addArrangedSubview(titleLabel)
+            mainStackView.addArrangedSubview(contentStackView)
+            
+        case .right:
+            //first row
+            row1StackView.addArrangedSubview(titleLabel)
+            //add spacer
+            row1StackView.addArrangedSubview(UIView())
+            
+            //second row
+            row2StackView.addArrangedSubview(contentStackView)
+            //add under spacer
+            row2StackView.addArrangedSubview(helperLabel)
+            
+            //add 2 rows to vertical stack to create the grid
+            mainStackView.addArrangedSubview(row1StackView)
+            mainStackView.addArrangedSubview(row2StackView)
+        }
+    }
+    
+    internal let textField = VDS.TextField().with {
+        $0.translatesAutoresizingMaskIntoConstraints = false
+    }
+    
+    internal var creditCardImageView = UIImageView().with {
+        $0.height(20)
+        $0.width(32)
+        $0.isAccessibilityElement = false
+        $0.translatesAutoresizingMaskIntoConstraints = false
+        $0.contentMode = .scaleAspectFill
+        $0.clipsToBounds = true
+    }
+}
+
+extension UIStackView {
+    public func removeArrangedSubviews() {
+        arrangedSubviews.forEach { removeArrangedSubview($0) }
+    }
+}
+
+class WidthView: View {
+
+    let stackView = UIStackView()
+    let customView = UIView()
+    var customViewWidthConstraint: NSLayoutConstraint!
+
+    override func setup() {
+        super.setup()
+
+        setupStackView()
+        setupCustomView()
+    }
+
+    func setupStackView() {
+        stackView.axis = .vertical
+        stackView.distribution = .fillProportionally
+        stackView.alignment = .fill
+        stackView.translatesAutoresizingMaskIntoConstraints = false
+
+        addSubview(stackView)
+        stackView.pinToSuperView()
+    }
+
+    func setupCustomView() {
+        customView.translatesAutoresizingMaskIntoConstraints = false
+        customView.backgroundColor = .red
+
+        let otherView = View()
+        otherView.backgroundColor = .green
+        
+        stackView.addArrangedSubview(otherView)
+        otherView.addSubview(customView)
+        customView.pinTop().pinBottom().pinLeading().pinTrailingLessThanOrEqualTo()
+
+        // Add width constraint with lower priority
+        customViewWidthConstraint = customView.widthAnchor.constraint(equalToConstant: 60)
+        customViewWidthConstraint.priority = UILayoutPriority(999)
+        // Initially activate or deactivate based on your requirement
+        customViewWidthConstraint.isActive = false
+    }
+
+    func setCustomWidth(to width: CGFloat) {
+        customViewWidthConstraint.constant = width
+        customViewWidthConstraint.isActive = true
+        layoutIfNeeded()
+    }
+
+    func resetWidthToFill() {
+        customViewWidthConstraint.isActive = false
+        layoutIfNeeded()
+    }
+}
+
+class  WidthViewController: BaseViewController<WidthView> {
+    var widthTextField = NumericField()
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: component)
+        component.height(150)
+    }
+    
+    override func setupForm(){
+        super.setupForm()
+
+        addFormRow(label: "Width", view: widthTextField)
+
+        widthTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                if let width = number?.cgFloatValue, width > 50, width < 250 {
+                    self?.component.setCustomWidth(to: width)
+                } else {
+                    self?.component.resetWidthToFill()
+                }
+            }.store(in: &subscribers)
+    }
+}
+
+
+class CircleIconViewController: BaseViewController<CircleIcon> {
+    
+    lazy var usePickerSelectorView = {
+        PickerSelectorView<Use>(title: "",
+                                 picker: self.picker,
+                                 items: [.primary, .secondary])
+    }()
+
+    lazy var colorPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+    }()
+    
+    lazy var namePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Icon.Name.all.sorted{ $0.rawValue < $1.rawValue })
+    }()
+    
+    lazy var sizePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Icon.Size.allCases)
+    }()
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: .makeWrapper(for: component))
+        setupPicker()
+        setupModel()
+    }
+    
+    override func setupForm(){
+        super.setupForm()
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Use", view: usePickerSelectorView)
+        addFormRow(label: "Name", view: namePickerSelectorView)
+        addFormRow(label: "Size", view: sizePickerSelectorView)
+    }
+    
+    func setupModel() {
+        //setup UI
+        surfacePickerSelectorView.text = component.surface.rawValue
+        sizePickerSelectorView.text = component.iconModel.size.rawValue
+        namePickerSelectorView.text = component.iconModel.name.rawValue
+        usePickerSelectorView.text = component.use.rawValue
+    }
+    
+    func setupPicker(){
+
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        sizePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.updateIconModel()
+        }
+        
+        usePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.use = item
+        }
+        
+        namePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.updateIconModel()
+        }
+    }
+    
+    func updateIconModel() {
+        let model = CircleIcon.IconModel(name: namePickerSelectorView.selectedItem, size: sizePickerSelectorView.selectedItem)
+        component.iconModel = model
+    }
+}
+
+open class CircleIcon: View {
+    
+    open var use: Use = .primary { didSet { setNeedsUpdate() } }
+
+    open var icon = Icon()
+    
+    open var iconModel = IconModel() { didSet { setNeedsUpdate() } }
+    
+    private var contentView = View()
+    
+    open override func setup() {
+        super.setup()
+        addSubview(contentView)
+        
+        contentView.addSubview(icon)
+        
+        icon.pinToSuperView(.uniform(VDSLayout.space1X))
+            .pinCenterX()
+            .pinCenterY()
+        
+        contentView.pinTop()
+        contentView.pinLeading()
+        contentView.pinTrailingLessThanOrEqualTo()
+        contentView.pinBottomLessThanOrEqualTo()
+        
+    }
+    
+    open override var intrinsicContentSize: CGSize { contentView.frame.size }
+
+    private let primaryIconColor = SurfaceColorConfiguration(VDSColor.paletteWhite, VDSColor.paletteWhite)
+    private let primaryBackgroundColor = SurfaceColorConfiguration(VDSColor.paletteRed, VDSColor.paletteRed)
+
+    private let secondaryIconColor = SurfaceColorConfiguration(VDSColor.paletteBlack, VDSColor.paletteWhite)
+    private let secondaryBackgroundColor = SurfaceColorConfiguration(VDSColor.paletteGray65, VDSColor.paletteGray44)
+    
+    private var iconColor: UIColor {
+        use == .primary 
+        ? primaryIconColor.getColor(surface)
+        : secondaryIconColor.getColor(surface)
+    }
+    
+    private var layerBackgroundColor: UIColor {
+        use == .primary
+        ? primaryBackgroundColor.getColor(surface)
+        : secondaryBackgroundColor.getColor(surface)
+    }
+    
+    open override func updateView() {
+        super.updateView()
+        icon.surface = .dark
+        icon.name = iconModel.name
+        icon.size = iconModel.size
+        icon.color = iconColor
+        contentView.layer.backgroundColor = layerBackgroundColor.cgColor
+    }
+    
+    open override func layoutSubviews() {
+        super.layoutSubviews()
+        contentView.layer.cornerRadius = min(bounds.width, bounds.height) / 2
+        contentView.layer.masksToBounds = true
+    }
+    
+    /// Model that represents the options available for the descriptive icon.
+    public struct IconModel {
+        /// A representation that will be used to render the icon with corresponding name.
+        public var name: Icon.Name
+
+        /// Enum for a preset height and width for the icon.
+        public var size: Icon.Size
+                
+        public init(name: Icon.Name = .threedAd, size: Icon.Size = .XLarge) {
+            self.name = name
+            self.size = size
+        }
+    }
+}
+