@dhasdk/simple-ui 0.0.31 → 0.0.32

package/README.md

@@ -4,12 +4,14 @@ This library was generated with [Nx](https://nx.dev) on React 18.x.
 
 ## <span style="color: orange;">*This library is under active development and not ready for production use\*</span>
 
+
+
 ## Table of Contents
 
 - [Installation](#installation-and-setup)
 - [Accordion](#accordion)
 - [Badge](#badge)
-- [Breadcrumbs](#breadcrumbs)
+- [BreadCrumbs](#breadcrumbs)
 - [Button](#button)
 - [Card](#card)
 - [CharacterCounter](#charactercounter)
@@ -18,8 +20,9 @@ This library was generated with [Nx](https://nx.dev) on React 18.x.
 - [List](#list)
 - [Modal](#modal)
 - [Pill](#pill)
-- [Section Header](#sectionheader)
+- [SectionHeader](#sectionheader)
 - [Select](#select)
+- [SideBarNav](#sidebarnav)
 - [Skeleton](#skeleton)
 - [Status](#status)
 - [Tabs](#tabs)
@@ -75,10 +78,13 @@ Finally, if Accordion props are specified inside the parent component, those val
 | iconAccordionOpened & iconAccordionClosed    | ReactNode   | Yes       | N/A      | custom icons to display for opened and closed state. See usage example above for a demonstration. |
 | classNameChildHeading   | string   | Yes      | CSS classes to apply to the child Accordion component headings. These can be overridden on an individual basis using the same prop on the Accordion component. |
 | classNameChildContent     | string   | No       | N/A      | CSS classes to apply to the child Accordion component content body. These can be overridden on an individual basis using the same prop on the Accordion component. |
-| className | string | Yes   | undefined | CSS classes applied to the container div for the **AccordionParent** component. | 
+| classNameContainer | string | Yes   | undefined | CSS classes applied to the container div for the **AccordionParent** component. | 
+| classNameHr   | string   | Yes      | CSS classes applied to the HR that sits between the accordion heading and content body when open and the prop useBackground is true. |
+| hr | boolean | Yes | true | This boolean value when true directs the display an hr element between the Accordion heading and body when in the open state. |
 | ...props	       | string   | No       |       | takes additional props that are not specifically defined in the component, i.e. aria-label |
-| rounded        | boolean   | Yes      | false | This boolean value indicates whether to display rounded corners or not. By using this prop vs custom classes, only the top of the heading is rounded in an opened state, and only the bottom of the content block is rounded also. |
+<!-- | rounded        | boolean   | Yes      | false | This boolean value indicates whether to display rounded corners or not. By using this prop vs custom classes, only the top of the heading is rounded in an opened state, and only the bottom of the content block is rounded also. | -->
 | singleOpen     | boolean   | Yes      | false | This boolean value directs the accordion to allow only one opened child content body at a time. Setting a value of false will allow multiple to be opened at once. |
+| useBackground | boolean | Yes | true | This boolean value causes the accordion content block to use the same background as the accordion heading. When true, an hr is also present at the top of the content block to separate the heading from the content. This hr can be styled separately using the classNameHr prop. |
 | variant     | string   | Yes      | 'default' | currently unused | 
 
 ### Props for Accordion
@@ -88,16 +94,20 @@ Finally, if Accordion props are specified inside the parent component, those val
 | children         | ReactNode   |  No      | undefined | This contains the body of the **Accordion** content. |
 | chevron | boolean | Yes      | undefined | If true, displays chevron icons for open/closed status, otherwise displays plus and minus icons. |
 | iconAccordionOpened & iconAccordionClosed    | ReactNode   | Yes       | N/A      | custom icons to display for opened and closed state. See usage example above for a demonstration. |
-| classNameChildHeading   | string   | Yes      | CSS classes to apply to the child Accordion component headings. These can be overridden on an individual basis using the same prop on the Accordion component. |
-| classNameChildContent     | string   | No       | N/A      | CSS classes to apply to the child Accordion component content body. These can be overridden on an individual basis using the same prop on the Accordion component. |
-| className | string | Yes   | undefined | CSS classes applied to the container div for the **Accordion** component. | 
+| classNameContainer | string | Yes   | undefined | CSS classes applied to the container div for the **Accordion** component. | 
+| classNameHeading   | string   | Yes      | CSS classes to apply to the child Accordion component headings. |
+| classNameContent     | string   | No       | N/A      | CSS classes to apply to the Accordion component content body. |
+| classNameHr   | string   | Yes      | CSS classes applied to the HR that sits between the accordion heading and content body when open and the prop useBackground is true. |
+| hr | boolean | Yes | true | This boolean value when true directs the display an hr element between the Accordion heading and body when in the open state. |
+| index | number | yes | undefined | optional index value for a specific accordion in the stack. if not present, label is used. |
+| onExpand | (setOpen: CallbackFunction) => void | Yes | undefined | Callback function that is executed when Accordin is expanded. |
 | ...props	       | string   | No       |       | takes additional props that are not specifically defined in the component, i.e. aria-label |
-| rounded        | boolean   | Yes      | false | This boolean value indicates whether to display rounded corners or not. By using this prop vs custom classes, only the top of the heading is rounded in an opened state, and only the bottom of the content block is rounded also. |
+<!-- | rounded        | boolean   | Yes      | false | This boolean value indicates whether to display rounded corners or not. By using this prop vs custom classes, only the top of the heading is rounded in an opened state, and only the bottom of the content block is rounded also. | -->
 | singleOpen     | boolean   | Yes      | false | This boolean value directs the accordion to allow only one opened child content body at a time. Setting a value of false will allow multiple to be opened at once. |
+| useBackground | boolean | Yes | true | This boolean value causes the accordion content block to use the same background as the accordion heading. When true, an hr is also present at the top of the content block to separate the heading from the content. This hr can be styled separately using the classNameHr prop. |
 | variant     | string   | Yes      | 'default' | currently unused | 
 
 
-
 ### Example Usage
 
 ```jsx
@@ -132,7 +142,7 @@ Finally, if Accordion props are specified inside the parent component, those val
 
 The **badge** component takes three required props, **variant**, **subVariant**, and **child** content.
 
-Optional props are **className**, **classNameSvg**, **imagePath**, **imageAlt**, and **classNameImage**.
+Optional props are **className**, **svgClasses**, **imagePath**, **imageAlt**, and **classNameImage**.
 
 As with the button component, this component also takes additional html attributes that when included are passed to the parent div.
 
@@ -142,28 +152,31 @@ This div is also styled using the tailwind **`twMerge()`** utility, so custom cl
 
 | Prop        | Type     | Optional | Default  | Description                                  |
 | ----------- | -------- | -------- | -------- | -------------------------------------------- |
-| children    | ReactNode   | No       |       | html and content that becomes the body of the Badge. |
-| subVariant    | string   | No       | See **(1)** below | The predefined variant of Badge to display. |
-| variant    | string   | No       | See **(1)** below | The predefined variant of Badge to display. UX designed variants are **go**, **hazard**, and **warning** |
-| className   | string   | Yes      | See **(2)** below | Alternate CSS classnames to apply to the Badge component.twMerge is used to apply these styles, so they reliably overwrite existing styles |
-| imageAlt         | string   | See Comment  | undefined | When an imagePath is specified, please specify an imageAlt that can be used for accessibility purposes. |
-| classNameImage         | string   | Yes      | undefined | Alternate CSS classes that are applied to the image for variant type media. |
-| imagePath        | string   | See Comment  | undefined | When variant is of type "media", an imagePath has to be specified that the component can load and display. |
-| classNameSvg        | string   | Yes  | (2) below | alternate classes to apply style to the svg icons used in the Badge component for type icon. Applied using twMerge, and will reliabily overwrite any default CSS classes. |
-
-
-1. Variants --> subVariants
-     - default --> default, gray, red, yellow, green, blue
-     - warning **UX Variant** --> half, full
-     - hazard **UX Variant** --> half, full,
-     - go **UX Variant** --> half, full
-     - icon --> default, gray, red, yellow, green, blue
-     - media --> default, gray, green
-
-2. classNames per variant default
-     - default --> **`mx-2 inline-flex items-center rounded-md bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-400/20`**
-     - icon --> **`inline-flex items-center gap-x-1.5 rounded-full bg-gray-500 px-2 py-1 text-xs font-medium text-gray-700`**
-     - media --> **`w-[250px] mx-2 border-l-8 border-black grid grid-cols-6 rounded-md bg-gray-400/10 pr-2 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-400/20 overflow-hidden`**
+| children    | ReactNode   | No    |  | html and content that becomes the body of the Badge. |
+| variant    | string   | No       | 'success ' | The predefined variant of Badge to display. UX designed variants are **success**, **caution**, **danger**, and **disabled** |
+| className   | string   | Yes      | See **(1)** below | Alternate CSS classnames to apply to the Badge component.twMerge is used to apply these styles, so they reliably overwrite existing styles |
+| classNameChildren | string | Yes | See **(2)** below | Alternate CSS classnames to apply to the Children content inside the Badge component.twMerge is used to apply these styles, so they reliably overwrite existing styles. | 
+| classNameImage         | string   | Yes | See **(3)** below | Alternate CSS classes that are applied to the image for variant type media. |
+| icon | ReactNode | Yes | undefined | An alternate icon to use for the instance of this Badge |
+| iconAlt | string | Yes | undefined | When an imagePath is specified, please specify an imageAlt that can be used for accessibility purposes. |
+
+1. Variants 
+     - success
+       - className: **`w-[79px] h-[26px] px-3 py-1 bg-[#d6f4d5] rounded-[40px] outline outline-1 outline-offset-[-1px] outline-[#387740] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0`**
+       - classNameChildren: **`text-[#387740] text-xs font-normal font-['Arial'] leading-[18px] md:text-md md:leading-normal lg:text-lg lg:leading-[27px`**
+       - classNameImage: **`relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1`**
+     - caution
+       - className: **`w-[79px] h-[26px] px-3 py-1 bg-[#fff1be] rounded-[40px] outline outline-1 outline-offset-[-1px] outline-[#966121] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0`**
+       - classNameImage: **`relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1`**
+       - classNameChildren: **`text-[#966222] text-xs font-normal font-['Arial'] leading-[18px] md:text-base md:leading-normal lg:text-lg lg:leading-[27px}`**
+     - danger
+       - className: **`w-[79px] h-[26px] px-3 py-1 bg-[#f4c2c2] rounded-[40px] outline outline-1 outline-offset-[-1px] outline-[#a22b23] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0`**
+       - classNameImage: **`relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1`**
+       - classNameChildren: **`text-[#A32C24] text-xs font-normal font-['Arial'] leading-[18px] md:text-base md:leading-normal lg:text-lg lg:leading-[27px]`**
+     - disabled
+       - className: **`w-[79px] h-[26px] px-3 py-1 rounded-[40px] outline outline-1 outline-offset-[-1px] outline-[#394150] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0`**
+       - classNameImage: **`relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1`**
+       - classNameChildren: **`text-[#394150] text-xs font-normal font-['Arial'] leading-[18px] md:text-md md:leading-normal lg:text-lg lg:leading-[27px]`**
 
 
 
@@ -172,48 +185,31 @@ This div is also styled using the tailwind **`twMerge()`** utility, so custom cl
 Default Variant
 
 ```jsx
-  <Badge ref={ref}
-    variant="default"
-    subVariant="blue"
+  <Badge
     aria-label="appropriate aria label here">
       Badge!
-  </Badge>
+    </Badge>
 ```
 
-icon Variant
+caution Variant
 
 ```jsx
-  <Badge ref={ref}
-    variant="icon"
-    subVariant="blue"
+  <Badge
+    variant="caution"
     aria-label="appropriate aria label here">
       Badge!
-  </Badge>
+    </Badge>
 ```
-media Variant
-
-```jsx
-  <Badge ref={ref} variant="media"
-    subVariant="blue"
-    imagePath="/src/assets/Doctor.png"
-    aria-label="health professional icon">
-      <h5 className='text-sm font-bold my-2'>Flu Season!</h5>
-      <p className="mb-2">Don't be caught unprepared. </p>
-  </Badge>
-```
-go Variant
+danger Variant
 
 ```jsx
   <Badge
-      className="text-left "
-      variant='go'
-      subVariant='full
-      >Lorem ipsum dolor sit amet, consectetur adipiscing 
-      elit, sed do eiusmod tempor incididunt ut labore 
-      et dolore magna aliqua</Badge>
+    variant="danger"
+    aria-label="appropriate aria label here">
+      Badge!
+    </Badge>
 ```
 
-
 ### Dependencies
 
 **_none_**
@@ -223,17 +219,17 @@ go Variant
 
 <!-- B R E A D C R U M B S ------------------------------------------------------------------------------ -->
 
-## Breadcrumbs
+## BreadCrumbs
 
-Breadcrumbs allow users to quickly and easily see their current location in an app or sites heirarchy, as well as quickly navigate to previous levels, enabling quick navigation back to those sections.
+BreadCrumbs allow users to quickly and easily see their current location in an app or sites heirarchy, as well as quickly navigate to previous levels, enabling quick navigation back to those sections.
 
-The Breadrcumbs component takes in various props (`className`, `containerClassName`, `variant`, `auto`, and `separator`), in addition to any other html attributes a normal NAV element would use.
+The BreadCrumbs component takes in various props (`className`, `classNameContainer`, `variant`, `auto`, and `separator`), in addition to any other html attributes a normal NAV element would use.
 
 A `ref` can also be created and assigned to the button component, and the component will point the reference to the html nav element.
 
 The `className` prop takes a list of alternate CSS classes the developer would like applied to the component. These are applied using the tailwind `twMerge` function, and will safely overwrite any conflicting classes ensuring proper styling. These classes are applied to the individual links.
 
-The `containerClassName` takes a list of css classes that are applied to the enclosing `nav` element.
+The `classNameContainer` takes a list of css classes that are applied to the enclosing `nav` element.
 
 Finally, the `separator` prop is a string value that represents the separator used between bread crumbs. The default value is a greater than sign, >.
 
@@ -250,14 +246,12 @@ Full list of props below
 | separator  | string   | Yes       | > | A string separator value to place between the separate breadcrumbs. The default value is '>' |
 | variant    | string   | Yes       |  | Allows the user to enter a pre-defined variant that includes its own pre-defined styling. |
 
-
-
 ### Example Usage
 
 Default Variant
 
 ```jsx
-  <Breadrcumbs />
+  <BreadCrumbs />
 ```
 
 
@@ -271,7 +265,7 @@ Default Variant
 
 ## Button
 
-The **button** component as built takes in three custom optional props (variant, size, className), in addition to any other html attributes a normal html button would use, for example an aria tag.
+The **button** component as built takes in a number of optional props in addition to any other html attributes a normal html button would use, for example an aria tag.
 
 A reference can also be created and passed to the button component, and the component will point the reference to the html button.
 
@@ -281,47 +275,138 @@ A reference can also be created and passed to the button component, and the comp
 | ----------- | -------- | -------- | -------- | ----------- |
 | children   | ReactNode   | Yes      |  | Content to display in the Button, overrides 'label' if both are present. |
 | className | string | Yes  | **(1) below** | Class names to style component |
+| classNameSelected | string | Yes | undefined | Class names to apply to the components if they are in the optional selected state, see **selected** below |
+| icon | ReactNode | Yes | undefined | image, icon, etc. to use for left or right icon as defined by **`iconPosition`** |
+| iconPosition | 'left', 'right', 'iconOnly', undefined | Yes |  | indicates the location for icon if specified |
 | label  | string  | Yes  |  | Display text for button. If 'children' is present, that is used instead |
 | onClick | () => void | Yes  |  | A click handler for the Button |
 | ...props | string | Yes  | undefined | additional props that are not specifically defined in the component, i.e. aria-label |
 | type  | string  | Yes  | 'button' | specifies the button type, and is one of 'button', 'submit', or 'reset' |
+| selected | boolean | Yes | false | when specified true, button will display selected state as described by **`classNameSelected`**. See example use in the SDK demo app with the 'Usage', 'Code', and 'Docs' buttons. |
 | variant | string | Yes | 'default' | CSS Button variant, available variants are 'default', 'filled', 'outline', and 'transparent' |
 
-
-
 **(1) classname defaults**
 
 - Base CSS Classes
 
-     - **`inline-flex items-center justify-center whitespace-nowrap rounded-md ring-offset-background transition-colors focus-visible:outline-none font-[`Arial`] disabled:pointer-events-none text-sm md:text-base lg:text-lg disabled:opacity-50 px-6 py-[12px] md:py-[14px] lg:py-[16px]`**
+     - **`inline-flex items-center justify-center whitespace-nowrap rounded-md ring-offset-background transition-colors focus-visible:outline-none font-["Arial"] disabled:pointer-events-none text-sm md:text-base lg:text-lg disabled:opacity-50 px-6 py-[8px] md:py-[12px] lg:py-[16px] h-[40px] md:h-[48px] lg:h-[56px]`**
 
 - Additional Classes per variant
-    - 'default' - **`rounded-md bg-gray-200 hover:bg-slate-400 text-black text-lg hover:text-white hover:border-slate-600 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive disabled:border-dha-mc-secondary-border disabled:border-2 py-0 md:py-0 lg:py-0 h-[48px] mt-1`**
-    - 'filled' - **`rounded-md bg-[#092068] hover:bg-[#0c2c8e] text-white text-lg hover:text-white focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] active:bg-[#092068]/80 disabled:bg-[#e4e4e5] disabled:text-[#939194] disabled:border-[#e4e4e5] disabled:border-2 lg:h-14`**
-    - 'outline' - **`rounded-md border-[#092068] bg-white border-2 text-[#092068] text-lg disabled:border-dha-mc-secondary-border disabled:text-[#939194] hover:bg-[#d1dbfb] active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] lg:h-14`**
-    - 'transparent' - **`rounded-md text-lg text-[#092068] hover:bg-[#d1dbfb] active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] disabled:text-[#939194] w-[157px] md:w-[163px] lg:w-[169px] h-12 md:h-[52px] lg:h-14`**
+    - 'default' - **`border-2 border-gray-300 rounded-md bg-gray-200 hover:bg-slate-400 text-black text-lg hover:text-white hover:border-slate-600 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive focus:border-black disabled:border-dha-mc-bottom-nav-background disabled:border-2 py-0 md:py-0 lg:py-0 h-[48px] mt-1`**
+      - 'selected' - **`bg-gray-500 text-white`**
+    - 'filled' - **`rounded-md bg-[#092068] hover:bg-[#0c2c8e] text-white text-lg hover:text-white focus:shadow-[0px_0px_0px_3px_rgba(238,131,255,1.00)] active:bg-[#092068]/80 disabled:bg-[#e4e4e5] disabled:text-[#939194] disabled:border-[#e4e4e5]`**
+    - 'outline' - **`rounded-md border-[#092068] bg-white border-2 text-[#092068] text-lg disabled:border-dha-mc-secondary-border disabled:text-[#939194] hover:bg-[#d1dbfb] active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(238,131,255,1.00)] text-lg`**
+    - 'transparent' - **`rounded-md text-lg text-[#092068] hover:bg-[#d1dbfb] active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] 'disabled:text-[#939194]`**
 
 
 ### Example Usage
 
-Basic example
+filled variant example
 
 ```jsx
-  <Button ref={ref} variant="MedCard" 
-        onClick={console.log('Clicked!')}
-    label='Click Me!'  />
+  <Button
+    disabled={disabledState}
+    label = {buttonName}
+    onClick={handleButtonClick}
+    variant='filled'
+  />
 ```
 
-Using an alternate varint, className, and aria-label
+outline variant example
 
 ```jsx
+  <Button
+    disabled={disabledState}
+    label = {buttonName}
+    onClick={handleButtonClick}
+    variant='outline'
+  />
+```
 
-  <Button ref={ref} variant="MedCard" 
-    onClick={console.log('Clicked!')}
-    className='px-10 py-6'
-    aria-label='Show example pop-up'
-    >
-    Click Me!</Button>
+icon left on filled variant
+
+```jsx
+  <Button
+    disabled={disabledState}
+    label = {buttonName}
+    onClick={handleButtonClick}
+    variant='filled'
+    icon={<img src={filledIconLeft} alt='icon left' />}
+    iconPosition='left'
+  />
+```
+
+using selected option w/ filled variant
+
+```jsx
+  <Button
+    disabled={disabledState}
+    label = {buttonName}
+    onClick={setOpenUsage(!openUsage)}
+    classNameSelected='bg-slate-200'
+    selected={openUsage}
+    variant='filled'
+  />
+```
+
+
+### Dependencies
+
+**_none_**
+
+<!-- B U T T O N    G R O U P ------------------------------------------------------------------------------ -->
+
+## ButtonGroup
+
+The **ButtonGroup** is a component that wraps a series of **Button** components, creating both a visual and functional grouping.
+
+The **ButtonGroup** also allows the ability to pass common css classes to the individual **Button** components, while allowing individual **Button** components to still utilize their own custom/unique css classes.
+
+A reference can also be created and passed to the button component, and the component will point the reference to the html button.
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| children   | ReactNode   | Yes      |  | This contains one or more Button components that comprise this ButtonGroup. |
+| className | string | Yes  |'' | This prop applies the given classNames to the DIV that wraps and comprises the ButtonGroup component. |
+| classNameButtons | string | Yes | undefined | These are common classes that are applied to each of the children Button components. These classes can be overridden on a one by one basis by using an individual Button components own className prop. |
+
+
+### Example Usage
+
+simple example
+
+```jsx
+  <ButtonGroup className='w-full'>
+    <Button>A</Button>
+    <Button>B</Button>
+    <Button>C</Button>
+  </ButtonGroup>
+```
+
+use of common examples
+
+```jsx
+  <ButtonGroup 
+    className='w-full' 
+    classNameButtons="border-2 border-green-500 bg-green-200 font-black">
+    <Button>A</Button>
+    <Button>B</Button>
+    <Button>C</Button>
+  </ButtonGroup>
+```
+
+use of custom class
+
+```jsx
+  <ButtonGroup className='w-full'>
+    <Button 
+      className='border-2 border-green-500 bg-green-200 font-black'
+      >A</Button>
+    <Button>B</Button>
+    <Button>C</Button>
+  </ButtonGroup>
 ```
 
 
@@ -338,7 +423,7 @@ Using an alternate varint, className, and aria-label
 
 Cards contain content or information on a specific topic, often with a relevant image.
 
-The **Card** component as built takes in various props (variant, variantStyle, imagePath, imageClassname, imageInset, alt, ariaLabel, and children), in addition to any other html attributes a normal html button would use, for example an **`aria-label`** tag.
+The **Card** component as built takes in various props (variant, variantStyle, imagePath, classNameImage, imageInset, alt, ariaLabel, and children), in addition to any other html attributes a normal html button would use, for example an **`aria-label`** tag.
 
 A **`ref`** can also be created and assigned to the **Card** component, and the component will point the reference to the outer html DIV.
 
@@ -354,8 +439,8 @@ Full list of props below
 | children   | ReactNode   | No      |   | Content to display in the Card aside from the image |
 | ariaLabel | string | Yes  | 'card component' | This is the aria-label applied to the parentDIV element in the Card component. |
 | className  | string  | Yes  | (1) below | Class names to style component |
-| imageInset | string | Yes  |   | A boolean value indicating whether the image inside the card should be inset or not. See above for functional examples. |
 | classNameImage | string | Yes  |   | CSS Classes to apply to the **img** element inside the Card component. These classes are applied using **`twMerge()`** and will safely override any conflicting tailwind css classes. |
+| imageInset | string | Yes  |   | A boolean value indicating whether the image inside the card should be inset or not. See above for functional examples. |
 | ...props | string | Yes  | undefined | additional props that are not specifically defined in the component, i.e. aria-label |
 | variant | string | Yes | 'default' | valid Card variant choices are 'default', 'imageLeft', 'imageBottom', and 'imageRight'. The default variant has its image on the top of the Card. |
 | variantStyle  | string  | Yes  | 'default' | Optoins are 'default' and 'outline' |
@@ -387,7 +472,7 @@ Using an alternate varint, custom css, etc.
 ```jsx
   <Card variant='imageLeft'
     imagePath={imagePath} 
-    imageClassname="rounded-lg" 
+    classNameImage="rounded-lg" 
     variantStyle="outline" 
     alt="Doctor wearing face mask"
     imageInset>
@@ -397,6 +482,7 @@ Using an alternate varint, custom css, etc.
   </Card>
 ```
 
+
 ### Dependencies
 
 **_none_**
@@ -409,7 +495,7 @@ Using an alternate varint, custom css, etc.
 
 ## CharacterCounter
 
-The **CharacterCounter** component is one that you use to wrap an Input or TextArea component or element to inform a user of the number of characters they have typed. If the user goes over the specified limit the message style (further styling can be specified via the prop **overLimitMessageClassName**) and message will change to inform the visitor of this.
+The **CharacterCounter** component is one that you use to wrap an Input or TextArea component or element to inform a user of the number of characters they have typed. If the user goes over the specified limit the message style (further styling can be specified via the prop **classNameOverLimitMessage**) and message will change to inform the visitor of this.
 
 The **CharacterCounter** component takes two required prop values, **children**, and **maxCharacters**, and informs the user of the number of characters they have typed or the number of characters they are over the limit for an Input or TextArea component.
 
@@ -427,7 +513,7 @@ Full list of props below
 | classNameMessage | string | Yes  |   | CSS classes to apply to the message text prior to the user exceeding the specified limit |
 | classNameOverLimitMessage | string | Yes  |   | CSS classes to apply to the message text after the user has exceeded the specified limit. |
 | altRemainingMessageText | string | Yes  | 'remaining' | A string value containing an alternate message to display to the user as they type. If the user has typed 5 characters and is not over the limit, the default reads "5 remaining". |
-| altOverageMessageText | string | Yes | 'characters too many' | A string value containing an alternate message to display to the user they have exceeded the specified limit. If the user has typed 15 characters and is over the limit, the default reads "5 characters too many" in red text (with dfeault overLimitMessageClassName). |
+| altOverageMessageText | string | Yes | 'characters too many' | A string value containing an alternate message to display to the user they have exceeded the specified limit. If the user has typed 15 characters and is over the limit, the default reads "5 characters too many" in red text (with default classNameOverLimitMessage). |
 
 
 ### Example Usage
@@ -468,15 +554,15 @@ DatePicker is an input that can be set typing or clicking on the day of the week
 
 The DatePicker component as built takes in various props (id, label, value, onChange)
 
+
 ### Props
 
 | Prop        | Type     | Optional | Default  | Description                                  |
 | ----------- | -------- | -------- | -------- | -------------------------------------------- |
 | id    | string   | No       |       | An ID to differentiate/target the component. |
 | label    | string   | No    |  | A label for the component |
-| value    | string   | No    |  | The date the component is currently set to. |
-| onChange   | (date: string) => void \| null | No |  | Handler function to be fed to the component, executed when the date changes |
-
+| onChange   | (date: string) => void \| No | undefined | Handler function to be fed to the component, executed when the date changes |
+| value    | string   | Yes    |  | The date the component is currently set to, if not supplied, it defaults to the current date. |
 
 ### Example Usage
 
@@ -504,7 +590,7 @@ Default Variant
 
 ## Input
 
-The **input** component as built takes seven optional props (className, labelClassName, required, label, labelBaseColor, labelInputcolor, and textShadow), in addition to any other html attributes a normal html form input would use, for example an aria tag.
+The **input** component as built takes seven optional props (className, classNameLabel, required, label, labelBaseColor, labelInputcolor, and textShadow), in addition to any other html attributes a normal html form input would use, for example an aria tag.
 
 A reference can also be created and passed to the input component, and the component will point the reference to the input.
 
@@ -513,9 +599,13 @@ A reference can also be created and passed to the input component, and the compo
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | className  | string  | Yes  | **(1) below**  | pass any css class names to add/change styling
-| label | string | Yes  | '' | string value of label, blank for no label  |
-| labelBaseColor  | string | Yes  |  | Use if the page or input color is not white, this will help to blend the label background to the surrounding area |
 | classNameLabel | string | Yes  | **(2) below** | pass any css class names to add/change styling for the input label  |
+| classNameRequired | string | Yes |  |   |
+| insetLabel | boolean | Yes | false | indicates whether the label is inset into the border or resides above the input component |
+| label | string | Yes  | '' | string value of label, blank for no label |
+| labelBaseColor  | string | Yes  |  | Use if the page or input color is not white, this will help to blend the label background to the surrounding area, color is a string hex value, i.e. **#fefefe** |
+| error | boolean | Yes | false | boolean prop indicating if the current input is in an error state. if true, applies visual error formatting to the input component. |
+| mask | string | Yes | undefined | a text string used to define an input mask. using the provided mask, input will format the users input into the formatted mask. In the case that the user adds invalid input, it is ignored. Non letter/number characters are also automatically entered if a valid following character type is added instead. # represents an individual number character, and @ represents a letter. All other values are themselves. |
 | placeHolder  | string | Yes  | Yes  |  | sets the placeholder text inside the input element |
 | ...props | string | Yes |  | takes additional props that are not specifically defined in the component, i.e. aria-label |
 | required  | boolean | Yes  |  | if specified, a red asterisk is prepended to the label, and the required attribute is set to true |
@@ -525,9 +615,23 @@ A reference can also be created and passed to the input component, and the compo
 
 **(1)** Default classes are different for each variant, but the base classes are **`h-10 px-4 py-2 arial rounded-sm border-2 border-[#c6c6c6] p-1 ps-2 mx-2 bg-white hover:outline-[#c6c6c6] focus:outline-[#0256ab] active:outline-[#0256ab]`**
 
+- **default**
+  - base classes - **`hover:bg-dha-mc-pale-blue text-black hover:dha-mc-primary-text hover:border-dha-mc-secondary-border disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive disabled:border-dha-mc-secondary-border disabled:border-2 w-[90vw] lg:max-w-[25em]`**
+  - label classes - **`ms-2.5 text-base`**
+  - insetLabelClasses - **`absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto`**
+- **outline**
+  - base classes - **`border-dha-mc-true-blue bg-white border-2 text-dha-mc-true-blue disabled:border-dha-mc-secondary-border disabled:text-dha-mc-checkbox-inactive w-[35vw] min-w-min sm:max-w-[15em]`**
+  - label classes - **`ms-2.5 text-base`**
+  - insetLabelClasses - **`absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto`**
+- **nonHover**
+  - base classes - **`text-black disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive disabled:border-dha-mc-secondary-border disabled:border-2 w-[90vw] lg:max-w-[25em]`**
+  - label classes - **`ms-2.5 text-base`**
+  - insetLabelClasses - **`absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto`**
 
 **(2)** Default classes for the label are **`absolute ms-5 -translate-y-1/2 px-2 text-[0.8em] w-auto h-auto`**
 
+**(3)** Default classes for the required asterisk **`absolute text-red-500 ms-0.5 -mt-1`**
+
 ### Additional Properties & Attributes
 
 This component as mentioned also takes any other property or attribute that a normnal input form field would take, including the **required** property. Setting this property to true will not only requires this input field to have a value for form completion, but also adds an asterisk to the beginning of the label.
@@ -541,6 +645,7 @@ This component as mentioned also takes any other property or attribute that a no
     label="Default Input" 
     placeholder="placeholder text here" 
     labelBaseColor="#f5f5f5" 
+    insetLabel={true}
     />
 ```
 
@@ -553,12 +658,25 @@ This component as mentioned also takes any other property or attribute that a no
   className="rounded-lg border-[#0256ab] bg-[#caecf5]"
   labelBaseColor="#f5f5f5"
   labelInputColor="#caecf5"
-  labelClassName="text-[#0256ab]"
+  classNameLabel="text-[#0256ab]"
+  insetLabel={true}
   required
   textShadow={true}
 />
 ```
 
+#### Mask example
+
+```jsx
+  <Input
+    label='Phone Number'
+    placeholder='(###) ###-####'
+    mask='(###) ###-####'
+    error={errorState}
+    disabled={disabledState}
+    className="mx-2 max-w-[15em] md:max-w-[20em] lg:max-w-[25em]"
+    />
+```
 
 ### Dependencies
 
@@ -571,7 +689,7 @@ This component as mentioned also takes any other property or attribute that a no
 
 ## List
 
-The **List** component is a component that creates a list of items, ordered or unordered based on the information the developer feeds to the component. Like other components, it takes in various props for configuration. Possible props are items, children, className, withDividers, dividerColorClass, itemClassName, variant, isDecimal and isDisc. These props are all optional and each will significantly change how the component looks. If the items prop is used, the component takes in an array of type ListItemProps, if the children prop is used, any react component can be fed to the List directly as a child. With respect to CSS, specified classnames are combined using **`twMerge`**/**`cn`**, so prior values are reliably overwritten.
+The **List** component is a component that creates a list of items, ordered or unordered based on the information the developer feeds to the component. Like other components, it takes in various props for configuration. Possible props are items, children, className, withDividers, classNameDividerColor, classNameItem, variant, isDecimal and isDisc. These props are all optional and each will significantly change how the component looks. If the items prop is used, the component takes in an array of type ListItemProps, if the children prop is used, any react component can be fed to the List directly as a child. With respect to CSS, specified classnames are combined using **`twMerge`**/**`cn`**, so prior values are reliably overwritten.
 
 ### Props
 
@@ -586,10 +704,13 @@ The **List** component is a component that creates a list of items, ordered or u
 | classNameItem | string   | Yes   | undefined | takes additional classnames to add/change styling of the items within the list |
 | isDecimal | boolean   | Yes   | false | if true, this prop will change the component to be ordered as a decimal list, placing a number next toe each item | 
 | isDisc | boolean   | Yes   | false | if true, this prob will change the list to be unordered, placing bullet points next to each item | 
+| isAlphabetical | boolean | false | if true, this prop will change the list indicators to be alphabetical, placing a letter next to each item starting with 'a'. |
+| isRomanNumeral | boolean | false | if true, this prop will change the list indicators to be roman numerals, placing a numeral next to each item starting with 'i'. **note:** roman numbers are currently only supported up to the decimal value 12. |
+| isInline | boolean | false | if true, this prop will change the list to be inline, placing each item next to each other horizontally instead of stacking them vertically. |
 
 ### Example Usage
 
-Usage can be viewed inside the storybook app (**`npm run storybook`**), and examples of array and children implementations are shown below. 
+Usage can be viewed inside the **sdk component demo app**, and examples of array and children implementations are shown below. 
 
 #### Array fed to decimal list with dividers:
 
@@ -633,8 +754,43 @@ Usage can be viewed inside the storybook app (**`npm run storybook`**), and exam
   </List>
 ```
 
-<!-- M O D A L  --------------------------------------------------------------------------- -->
 
+#### Roman Numeral example
+
+```jsx
+  <List isRomanNumeral header="List with roman numeral indicators">
+    <ListItem>
+      <img
+        src='/mobile_apps/sdk-component-demo/src/assets/first-aid-kit.svg'
+        alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 pb-1 inline'
+      />
+      <p className='inline'>icon</p>
+    </ListItem>
+    <ListItem>
+      <img
+        src='/mobile_apps/sdk-component-demo/src/assets/heartbeat.svg'
+        alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 pb-1 inline'
+      />
+      <p className='inline'>icon</p>
+    </ListItem>
+    <ListItem>
+      <img
+        src='/mobile_apps/sdk-component-demo/src/assets/pill.svg'
+        alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 pb-1 inline'
+      />
+      <p className='inline'>icon</p>
+    </ListItem>
+    <ListItem>
+      <img
+        src='/mobile_apps/sdk-component-demo/src/assets/prescription.svg'
+        alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 pb-1 inline'
+      />
+      <p className='inline'>icon</p>
+    </ListItem>
+  </List>
+```
+
+<!-- M O D A L  --------------------------------------------------------------------------- -->
 
 [Top of Page](#table-of-contents)
 
@@ -660,14 +816,23 @@ Full list of props below
 | isOpen   | boolean   | No      |   | indicates whether the Modal is displayed or not. This value also controls the overflow: hidden css property, as well as enabling/disabling keyboard event listeners for accessibility purposes. |
 | onClose   | () => void()   | No      |   | This is the close handler for the Modal component. |
 | title   | string   | No      |   | This is the title to display in the Modal component. |
-| className | string | Yes   |   | Alternate CSS classnames to apply to the Modal component. twMerge is used to apply these classes, so they reliably overwrite existing styles. |
-| clickOutsideCloses | boolean | Yes      |   | When true, any mouse click outside of the Modal will close the Modal component. |
-| displayClosingX | boolean | Yes      |   | When true, an 'x' icon is displayed in the upper right of the Modal component that when clicked will close the component. |
-| closeButtonText | string | Yes      |   | The string value to display in the Close button |
-| continueButton | boolean | Yes      |   | When true, a 'Continue' button is displayed in the Modal along with a 'Close' button |
+| blurLevel | 'sm', 'md', 'lg', 'xl', '2xl', '3xl' | Yes | undefined | sets backdrop blur behind the modal |
+| className | string | Yes   | **see below** | Alternate CSS classnames to apply to the Modal component. twMerge is used to apply these classes, so they reliably overwrite existing styles. |
+| clickOutsideCloses | boolean | Yes   | false | When true, any mouse click outside of the Modal will close the Modal component. |
+| closeButton | boolean | Yes | true | if true, a close button is presented in the modal |
+| closeButtonText | string | Yes   |   | The string value to display in the Close button |
+| displayClosingX | boolean | Yes   |   | When true, an 'x' icon is displayed in the upper right of the Modal component that when clicked will close the component. |
+| continueButton | boolean | Yes   |   | When true, a 'Continue' button is displayed in the Modal along with a 'Close' button |
 | continueButtonText | string | Yes      |   | The string value to display in the Continue button |
 | continueButtonHandler | () => void | Yes      |   | The function handler to execute when the Continue button is clicked. |
+| variant | string | Yes | 'default' - **see below** | indicates the modal variant classes to apply.  |
+
 
+#### Default classes per Variant
+
+- default: **`bg-white rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-none`**
+- darker: **`bg-slate-600 rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-none text-slate-200`**
+- dark: **`bg-zinc-800 rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-none text-slate-200`**
 
 ### Example Usage
 
@@ -695,8 +860,6 @@ Basic Modal
 [Top of Page](#table-of-contents)
 
 
-
-
 <!-- P I L L  --------------------------------------------------------------------------- -->
 
 ## Pill
@@ -738,6 +901,7 @@ Basic Pill
   </Pill>
 ```
 
+
 ### Dependencies
 
 **_none_**
@@ -746,7 +910,7 @@ Basic Pill
 [Top of Page](#table-of-contents)
 
 
-<!-- S E C T I O N   H E A D E R  --------------------------------------------------------------------------- -->
+<!-- S E C T I O N H E A D E R  ------------------------------------------------------- -->
 
 ## SectionHeader
 
@@ -768,51 +932,47 @@ Full list of props below
 | classNameSubHeader   | string   | Yes | (3) below | Alternate CSS classnames to apply to the subHeader portion when present.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
 | iconLeft   | ReactNode   | Yes  |  | This prop takes an image to display as its left icon. It takes this value as a ReactNode, see examples above. |
 | iconRight   | ReactNode   | Yes  |  | This prop takes an image to display as its right icon. It takes this value as a ReactNode, see examples above. |
-| underline   | boolean   | Yes  | false | When true, an underline is displayed underneath the entire SubHeader. |
+| underline   | boolean   | Yes  | false | When true, an underline is displayed underneath the entire SubHeader, this is done by applying the classes **`border-b-2 border-black`** to the default classes. A custom underline can be applied via the **`className`** prop. |
 | subHeader | string   | Yes  | undefined | This prop takes a string value that is displayed as a SubHeader when present.  If no subHeader is passed in, nothing is displayed in this location. |
+| fill | boolean | Yes | false | if true, the background on the sectionHeader is filled. Fill is applied by applying **`bg-[#092068] text-[#f0f0f0]`** to the default classes. A custom fill can be applied by applying your own classList via the **`className`** prop and leaving **`fill`** at its default false setting. |
+| childButton | ReactNode &#124; undefined | Yes |  |  |
 
 
 1. Default classNames
 
-- **`px-2 justify-start items-start gap-4 inline-flex w-full`**
+- **`pl-6 pr-2 pt-4 pb-2 justify-start items-start gap-4 inline-flex w-full`**
 
 2. children classNames
 
-- **`self-stretch text-[#07192d] text-[40px] font-normal font-['Arial'] leading-[48px] pb-1`**
+- **`self-stretch text-[40px] font-normal font-["Arial"] leading-[48px] pb-1`**
 
 3. subHeader classNames
 
-- **`text-[#07192d] text-xl font-normal font-['Arial'] leading-[30px]`**
-
+- **`text-xl font-normal font-["Arial"] leading-[30px]`**
 
 ### Example Usage
 
 ```jsx
-  <SectionHeader 
-      iconLeft={
-        <img src={frame} 
-          alt='left header icon' />}
-      iconRight={
-        <img src={important} 
-          alt='left header icon' 
-          className='size-8 mt-2' />}
-      subHeader="1st things first though" 
-      underline
-      >
-        Prologue
-      </SectionHeader>
+  <SectionHeader
+    iconLeft={<img src={frame} alt='left header icon' />}
+    iconRight={<img src={important} alt='left header icon' className='size-8 mt-2' />}
+    subHeader="1st things first though"
+    underline
+    childButton={<Button variant='transparent' className='h-10' 
+      icon={<img src={chevronRight} alt='right chevron' />}
+      iconPosition='right' >Click Me</Button>}
+  >
+    Prologue
+  </SectionHeader>
 ```
 
 
-
 ### Dependencies
 
 **_none_**
 
-
 [Top of Page](#table-of-contents)
 
-
 <!-- S E L E C T ---------------------------------------------------------------------------- -->
 
 ## Select
@@ -821,6 +981,7 @@ The **Select** component or drop-down allow a user to make a single selection fr
 
 The **Select** component takes two required props (**options** and **setSelectedOption**) as well as seven optional props (**className**, **classNameContainer**, **error**, **label**, **optionsLabel**, **width**, and **variant**), in addition to any other html attributes a normal html element would use, for example an aria-tag.
 
+
 Full list of props below
 
 ### Props
@@ -836,24 +997,21 @@ Full list of props below
 | optionsLabel   | string   | Yes | undefined | appears as the label in the Select component, i.e. 'Choose a Color' above. Note, this is not the label above the component. |
 | setSelectedOption | (string) => void | Yes  | undefined | calls the function passed in as **`setSelectedOption`** with the selected **value** if present, otherwise with **name** |
 | variant | string | Yes | undefined | The predefined variant of Select to display. Current options are 'default', 'MedCard', 'Outline', and 'nonHover' |
-| width | string | Yes |  | This prop is intended to like **`className`** take in css class name values. These are 
-intended though to only take class names relevant to the component width, as they will be applied to both the **button**
-and the **drop down** elements of the **`Select`** component.  For instance, the **`width`** prop is a good way to ensure that
-the button and drop down are of the same width. Note the default classes below, i.e. widths specified on various break points. |
+| width | string | Yes |  | This prop is intended to like **`className`** take in css class name values. These are intended though to only take class names relevant to the component width, as they will be applied to both the **button** and the **drop down** elements of the **`Select`** component.  For instance, the **`width`** prop is a good way to ensure that the button and drop down are of the same width. Note the default classes below, i.e. widths specified on various break points. |
+
 
 1. Base CSS Classes
 
-- **`outline-none outline-offset-0  flex justify-between items-center w-[292px] md:w-[343px] lg:w-[600px] h-14 border focus:outline-4 focus:outline-[#fa89f1] shadow-sm px-4 py-2 bg-white text-lg font-medium text-gray-700 hover:bg-gray-50 border-[#b3b3b3]`**
+- **`outline-none outline-offset-0  flex justify-between items-center w-[292px] md:w-[343px] lg:w-[600px] h-14 border focus:outline-4 focus:mb-2 focus:outline-[#fa89f1] shadow-sm pl-4 pr-2 py-2 bg-white text-base md:text-lg font-medium text-gray-700 hover:bg-gray-50 border-[#b3b3b3] h-12 mt-1 font-["Arial"] `**
 
 Separate Variant Styles
 
 - default:
-  - **`hover:bg-gray-200 text-black hover:border-gray-400 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive h-12 mt-1 disabled:border-dha-mc-secondary-border disabled:border-2`**
+  - **`hover:bg-gray-200 text-black hover:border-gray-400 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive disabled:border-dha-mc-secondary-border disabled:border-2`**
 - fill:
-  - **`hover:bg-[#0c2c8e] text-base text-white bg-[#092068] hover:border-gray-400 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive h-12 mt-1 disabled:border-dha-mc-secondary-border disabled:border-2 py-3 pl-[15px] pr-[9px]`**
+  - **`hover:bg-[#0c2c8e] text-white bg-[#092068] hover:border-gray-400 disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive disabled:border-dha-mc-secondary-border disabled:border-2 py-3`**
 - outline:
-  - **`border-dha-mc-true-blue bg-white border-2 text-dha-mc-true-blue disabled:border-dha-mc-secondary-border disabled:text-dha-mc-checkbox-inactive`**
-
+  - **`bg-white text-[#808080] disabled:border-dha-mc-secondary-border disabled:text-dha-mc-checkbox-inactive`**
 
 ### Example Usage
 
@@ -870,6 +1028,97 @@ Separate Variant Styles
 ```
 
 
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
+
+<!-- S H I E L D ----------------------------------------------------------------------------------- -->
+
+## Shield
+
+The **shield** component takes three required props, **variant**, **subVariant**, and **child** content.
+
+Optional props are **className**, **classNameSvg**, **imagePath**, **imageAlt**, and **classNameImage**.
+
+As with the button component, this component also takes additional html attributes that when included are passed to the parent div.
+
+This div is also styled using the tailwind **`twMerge()`** utility, so custom classes can be added via the classNames prop as well.
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description                                  |
+| ----------- | -------- | -------- | -------- | -------------------------------------------- |
+| children    | ReactNode   | No       |       | html and content that becomes the body of the Badge. |
+| subVariant    | string   | No       | See **(1)** below | The predefined variant of Badge to display. |
+| variant    | string   | No       | See **(1)** below | The predefined variant of Badge to display. UX designed variants are **go**, **hazard**, and **warning** |
+| className   | string   | Yes      | See **(2)** below | Alternate CSS classnames to apply to the Badge component.twMerge is used to apply these styles, so they reliably overwrite existing styles |
+| imageAlt         | string   | See Comment  | undefined | When an imagePath is specified, please specify an imageAlt that can be used for accessibility purposes. |
+| classNameImage         | string   | Yes      | undefined | Alternate CSS classes that are applied to the image for variant type media. |
+| imagePath | string   | See Comment  | undefined | When variant is of type "media", an imagePath has to be specified that the component can load and display. |
+| classNameSvg  | string   | Yes  | (2) below | alternate classes to apply style to the svg icons used in the Badge component for type icon. Applied using twMerge, and will reliabily overwrite any default CSS classes. |
+
+1. Variants --> subVariants
+     - default --> default, gray, red, yellow, green, blue
+     - warning **UX Variant** --> half, full
+     - hazard **UX Variant** --> half, full,
+     - go **UX Variant** --> half, full
+     - icon --> default, gray, red, yellow, green, blue
+     - media --> default, gray, green
+
+2. classNames per variant default
+     - default --> **`mx-2 inline-flex items-center rounded-md bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-400/20`**
+     - icon --> **`inline-flex items-center gap-x-1.5 rounded-full bg-gray-500 px-2 py-1 text-xs font-medium text-gray-700`**
+     - media --> **`w-[250px] mx-2 border-l-8 border-black grid grid-cols-6 rounded-md bg-gray-400/10 pr-2 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-400/20 overflow-hidden`**
+
+### Example Usage
+
+Default Variant
+
+```jsx
+  <Shield ref={ref}
+    variant="default"
+    subVariant="blue"
+    aria-label="appropriate aria label here">
+      Shield!
+  </Shield>
+```
+
+icon Variant
+
+```jsx
+  <Shield ref={ref}
+    variant="icon"
+    subVariant="blue"
+    aria-label="appropriate aria label here">
+      Shield!
+  </Shield>
+```
+media Variant
+
+```jsx
+  <Shield ref={ref} variant="media"
+    subVariant="blue"
+    imagePath="/src/assets/Doctor.png"
+    aria-label="health professional icon">
+      <h5 className='text-sm font-bold my-2'>Flu Season!</h5>
+      <p className="mb-2">Don't be caught unprepared. </p>
+  </Shield>
+```
+go Variant
+
+```jsx
+  <Shield
+      className="text-left "
+      variant='go'
+      subVariant='full'
+      >Lorem ipsum dolor sit amet, consectetur adipiscing 
+      elit, sed do eiusmod tempor incididunt ut labore 
+      et dolore magna aliqua</Shield>
+```
+
 
 ### Dependencies
 
@@ -877,6 +1126,8 @@ Separate Variant Styles
 
 [Top of Page](#table-of-contents)
 
+
+
 <!-- S I D E B A R N A V ---------------------------------------------------------------------------- -->
 
 ## SideBarNav
@@ -900,12 +1151,13 @@ Full list of props below
 | clickOutsideCloses   | boolean   | Yes  | **`false`** | clicking or tapping elsewhere on the application will close the SideBarNav |
 | image | string   | No      | undefined | string path to the application logo to display |
 | classNameImage | string   | Yes      | (2) below | a group of alternate classes that can be specified for the logo image, and applied to the **`img`** element |
-| classNameImageContainer | string   | Yes      | (2) below | a group of alternate classes that can be specified for the logo image's
-container, and applied to the **`img`** element |
+| classNameImageContainer | string   | Yes      | (2) below | a group of alternate classes that can be specified for the logo image's container, and applied to the **`img`** element |
 | menu | boolean   | Yes      | false | when **`true`**, the default in-component hamburger menu is displayed and used to display or hide the SideBarNav |
 | classNameMenu | string   | Yes      | empty string | alternate css classes to apply to the element that makes up the hamburger menu |
 | classNameMenuContainer | string   | Yes      | (3) below | alternate css classes to apply to the **`button`** element that wraps up the hamburger menu |
+| classNameMenuItem | string | Yes | 'pb-4' | allows the user to add alternate classes via **`twMerge`** to individual menu items |
 | menuItems | ListItemProps[]  | No  | undefined, see (4) below | The menu items to display |
+| right | boolean | Yes | false | when true right-aligns the text inside the sidebarNav |
 | version | string   | No  | undefined | The version number to display |
 
 
@@ -962,14 +1214,11 @@ const menuItems = [
   />
 ```
 
-
-
 ### Dependencies
 
 **_none_**
 
 [Top of Page](#table-of-contents)
-
 <!-- S K E L E T O N ---------------------------------------------------------------------------- -->
 
 ## Skeleton
@@ -1052,6 +1301,18 @@ Usage example for Example 2 below
     <SkelSection />
   </Skeleton>
 ```
+Skeleton w/ Alternate Coloring
+
+```jsx
+  import { Skeleton, SkelCircle, SkelLine, SkelRow, SkelSection } from '@dhasdk/simple-ui'
+  // ...
+  <Skeleton>
+    <SkelLine className='grow-0 basis-2/12 bg-red-500/50' inline />
+    <SkelLine className='grow-0 basis-2/12 bg-red-500/50' inline />
+    <SkelLine className='bg-orange-500/50' />
+    <SkelSection className='bg-yellow-500/50' />
+  </Skeleton>,
+```
 
 ### Dependencies
 
@@ -1070,7 +1331,7 @@ This component takes five optional props that allow for customization and/or the
 
 To create a custom iteration of Status, leave `variant` blank and utilize a combination of the remaining props. The `Status` component consists of three separate div elements, one serving as a container, and then one each for the image/icon and child data.
 
-The `className` prop can be used to add alternate styling to the outer div, i.e. `border-blue-700 bg-blue-200`. Likewise, the `imageClasses` prop can be used to provide alternate styling to the div containing the image, and the `childClasses` prop can provide alternate styling for the child div that contains the text, i.e. `text-blue-700`
+The `className` prop can be used to add alternate styling to the outer div, i.e. `border-blue-700 bg-blue-200`. Likewise, the `classNameImage` prop can be used to provide alternate styling to the div containing the image, and the `classNameChild` prop can provide alternate styling for the child div that contains the text, i.e. `text-blue-700`
 
 `image` and `children` are the final two props, and are both of type `ReactNode`.
 
@@ -1081,21 +1342,21 @@ Full list of props below
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | children   | string   | No      | | This prop takes children content, i.e. html and content that becomes the body of the Status. |
-| variant | string | No | 'available' | The predefined variant of Status to display. Predefined variants are `available`, `inProgress`, and `notAvailable` |
 | className   | string   | Yes      | (1) below | Alternate CSS classnames to apply to the Status component. `twMerge` is used to apply these styles, so they reliably overwrite existing styles. |
 | classNameChild   | string   | Yes      | (2) below | This prop takes in alternate classes to apply style to the `div` that contains the child content. |
-| image   | ReactNode   | Yes      |  | This prop takes type `ReactNode`, and is used to display a custom user supplied image. See usage examples above for more. |
 | classNameImage | string   | Yes      | (3) below | Alternate CSS classes that are applied to the div containing the childe div that contains the Status component image. |
+| image   | ReactNode   | Yes      |  | This prop takes type `ReactNode`, and is used to display a custom user supplied image. See usage examples above for more. |
+| variant | string | No | 'available' | The predefined variant of Status to display. Predefined variants are `available`, `inProgress`, and `notAvailable` |
 
 1. className
 
    **`h-[45px] px-4 py-3 bg-green-50 rounded-[100px] border border-green-700 justify-center items-center gap-2 inline-flex`**
 
-2. childClasses
+2. classNameChild
 
    **`text-green-900 text-lg font-normal font-['Arial']`**
 
-3. imageClasses
+3. classNameImage
 
    **`w-5 h-5 relative overflow-hidden`**
 
@@ -1134,12 +1395,13 @@ Custom variant
     image={ <img src={tune} 
         alt='information' /> }
     className='border-blue-700 bg-blue-200'
-    childClasses='text-blue-700'
+    classNameChild='text-blue-700'
     >
     Custom
   </Status>
 ```
 
+
 ### Dependencies
 
 **_none_**
@@ -1152,7 +1414,7 @@ Custom variant
 
 Tabs component lets the user split the UI into independent pieces, and view each piece in isolation.
 
-This component has one required prop, **tabs**, which contains the content of the various tabs as type ReactNode.  Optional props are **className**, **containerClassName**, and **variant**.
+This component has one required prop, **tabs**, which contains the content of the various tabs as type ReactNode.  Optional props are **className**, **classNameContainer**, and **variant**.
 
 Full list of props below
 
@@ -1160,74 +1422,38 @@ Full list of props below
 
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
-| className | string | Yes | undefined |  |
-| classNameContainer | string | Yes | undefined |  |
-| tabs | {id: string; label: string; content: ReactNode;}[] | Yes | undefined | An array of  |
-| variant | string | Yes | 'default' | The predefined variant of Tabs to display. Current options are 'default', 'outline', and 'filled' |
+| className | string | Yes | undefined | 'flex border-b border-gray-200' | Additional css classes to apply to the div containing the individual tabs |
+| classNameContainer | string | Yes | 'w-full' | Additional css classes to apply to the containing div for the tabs component |
+| tabs | {id: string; label: string; content: ReactNode;}[] | Yes | undefined | An array of objects representing the individual tabs to display |
+| variant | string | Yes | 'default' | The predefined variant of Tabs to display. Current options are 'default', 'outline', and 'transparent' |
 
 ### Example Usage
 
-Tabs - very simple example
+Tabs - a simple example
 
 ```jsx
-  <Tabs tabs={[
-    {id: 'tab1', label: 'Tab 1', content: <p>I am a tab!</p>}, 
-    {id: 'tab2', label: 'Tab 2', content: <p>I am a 2nd tab!</p>}
-    ]} />
-```
-
-Tabs - more complicated example
-
-```jsx
-
-  const TabsContent1 = () => {
-      return(
-          <>
-              <p>Test Data 1</p>
-              <ul className="list-disc mt-2 ms-4">
-                  <li>Seattle</li>
-                  <li>Tacoma</li>
-                  <li>Olympia</li>
-                  <li>Bellevue</li>
-                  <li>Redmond</li>
-              </ul>
-          </>
-      )
-  }; 
-
-  const TabsContent2 = () => {
-      return(
-          <>
-              <p>Test Data 2</p>
-              <ul className="list-disc mt-2 ms-4">
-                  <li>Tokyo - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
-                  <li>Paris - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
-                  <li>London - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
-                  <li>Sydney - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
-                  <li>Honolulu - Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
-              </ul>
-          </>
-      )
-  }; 
-
   const tabExample = [
-      {
-          id: 'tab1',
-          label: 'Tab 1',
-          content: <TabsContent1/>,
-      },
-      {
-          id: 'tab2',
-          label: 'Tab 2',
-          content: <TabsContent2/>,
-      }
+    {
+        id: 'tab1',
+        label: 'Tab 1',
+        content: <TabsContent1/>,
+    },
+    {
+        id: 'tab2',
+        label: 'Tab 2',
+        content: <TabsContent2/>,
+    },
+    {
+        id: 'tab3',
+        label: 'Tab 3',
+        content: <TabsContent3/>,
+    }
   ]
-  // ...
-  return { 
-      ...
-      <Tabs tabs={tabExample} />
-      ...
-  }
+
+  <Tabs
+    tabs={tabExample}
+    variant='filled'
+  />
 ```
 
 ### Dependencies
@@ -1255,7 +1481,7 @@ As with the button component, Toggle takes any other additional html attributes
 | className   | string   | Yes      | (1) below	| alternate css classes to add/change styling of button element inside component |
 | classNameButton   | string   | Yes      | (1) below	| alternate css classes to add/change styling of div used inside button/toggle |
 | defaultChecked | boolean   | Yes      | **`false`** | sets default state as checked or unchecked state when first displayed |
-| disabled | boolean | Yes | **`false`** | sets disabled state of Toggle component |
+| disabled | boolean | Yes | **`false`** | sets disabled state of Toggle component || label | string | Yes | 'Toggle on/off' | The **label** prop denotes the aria label to set for the toggle component. | 
 | onCheckedChange | (checked: boolean) => void    | Yes | undefined  | callback function that is called with the new value of `checked` whenever it changes. To capture the correct state, it is recommended that you use an arrow function here. |
 | ...props | string   | Yes   | undefined | takes additional props that are not specifically defined in the component, i.e. **`aria-label`**  | 
 | ref         | string   | Yes      | undefined | ref is exposed as a prop, and can be assigned and used on this component as normal |
@@ -1271,25 +1497,15 @@ As with the button component, Toggle takes any other additional html attributes
 Separate Variant Styles
 
 - default:
-  - classes: 'bg-gray-300 hover:bg-gray-400'
-  - toggledClasses: 'bg-[#092068] hover:bg-blue-700'
-  - buttonClasses: 'translate-x-0'
-  - toggledButtonClasses: 'translate-x-8'
-- Outline:
-  - classes: 'bg-slate-200 border-2 border-blue-700 hover:bg-slate-300'
-  - toggledClasses: 'bg-blue-500 border-2 border-blue-700 hover:bg-blue-400'
-  - buttonClasses: 'translate-x-0'
-  - toggledButtonClasses: 'translate-x-8'
-- nonHover:
-  - classes: 'bg-gray-300'
-  - toggledClasses: 'bg-[#092068]'
+  - classes: 'bg-[#d0cfd1] hover:bg-[#bbbabc]'
+  - toggledClasses: 'bg-[#053ea6] hover:bg-[#0752dc]'
   - buttonClasses: 'translate-x-0'
-  - toggledButtonClasses: 'translate-x-8'
-- MedCard:
-  - classes: 'bg-[#E3EBF3] border-2 border-[#0256AB]'
-  - toggledClasses: 'bg-[#0256AB] border-2 border-[#0256AB]'
+  - toggledButtonClasses: 'translate-x-8 lg:translate-x-6'
+- outlined:
+  - classes: 'bg-slate-300 border border-black hover:bg-[#abb5c2]'
+  - toggledClasses: 'bg-blue-500/50 hover:bg-blue-400 border border-black'
   - buttonClasses: 'translate-x-0'
-  - toggledButtonClasses: 'translate-x-8'
+  - toggledButtonClasses: 'translate-x-8 lg:translate-x-6'
 
 ### Example Usage
 
@@ -1300,7 +1516,7 @@ Separate Variant Styles
         'border-green-500' : 'border-gray-400'); 
       console.log(checked);}
     } 
-    variant={badgeVariant} />
+    variant={toggleVariant} />
 ```
 
 ### Dependencies