@dhasdk/simple-ui 1.0.7 → 1.0.8

package/dist/README.md

@@ -0,0 +1,1815 @@
+# simple-ui
+
+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>
+
+<!-- 
+AppointmentPicker
+ProgressBar
+RadioGroup
+Search
+Shield
+Tooltip
+ -->
+
+
+## Table of Contents
+
+- [Installation](#installation-and-setup)
+- [Accordion](#accordion)
+- [Badge](#badge)
+- [BreadCrumbs](#breadcrumbs)
+- [Button](#button)
+- [ButtonGroup](#buttongroup)
+- [Card](#card)
+- [CharacterCounter](#charactercounter)
+- [CheckBox](#checkbox)
+- [DatePicker](#datepicker)
+- [Input](#input)
+- [List](#list)
+- [Modal](#modal)
+- [Pill](#pill)
+- [SectionHeader](#sectionheader)
+- [Select](#select)
+- [SideBarNav](#sidebarnav)
+- [Skeleton](#skeleton)
+- [Slider](#slider)
+- [Status](#status)
+- [Tabs](#tabs)
+- [Toggle](#toggle)
+
+<!-- ## Quick Notes: -->
+
+
+
+<!-- I N S T A L L A T I O N ----------------------------------------------------------------------------------- -->
+
+[Back to Main Readme](./README.md)
+
+## Installation and Setup
+
+1. From the terminal run the following command:
+
+- **`npm install @dhasdk/simple-ui`**
+
+2. Integrate simple-ui into your local tailwind configuration
+
+- Add **`node_modules/@dhasdk/**/*.{js,jsx}`** (or similar) to the **content** block inside your **`tailwind.config.ts`** file.
+
+3. Open the page that you are going to place the **dhasdk/simple-ui** component, and do the following:
+
+- At the top of the file, import your desired component from **'@dhasdk'**, i.e. if you are using the **Badge** component, then:
+  - **`import { Badge } from '@dhasdk/simple-ui';`**
+- Elsewhere in your file, use the component as documented below
+
+
+<!--  A C C O R D I O N ----------------------------------------------------------------------------------- -->
+
+## Accordion
+
+The **Accordion** and **AccordionParent** components take a number of props, and work together to display a group of Accordions. The AccordionParent component is really only required for two purposes:
+
+- Multiple accordions are displayed, and it is desired that only one can be opened at a time. This requires state management between the various accordions listed, and the parent Accordion helps with this.
+
+- You have multiple accordions, and there are one or more identical prop values that you would like to pass to each of the Accordion components. Passing these props to the parent component instead, **AccordionParent**, will simplify **Accordion** component usage. These various props that are specified on the AccordionParent level will be automatically passed down to the children Accordion components.
+
+A **ref** can also be created and assigned to the Accordion component, and the component will point the reference to the outer html DIV.
+
+Separately below is the Props listing both the **AccordionParent** and **Accordion** components. All of the props listed for Accordion can be passed as values to the AccordionParent, and they will be safely passed to the child Accordion components so that they do not have to be individually specified.
+
+Finally, if Accordion props are specified inside the parent component, those values can be overridden on an individual basis by specifying alternate values for the individual Accordion component you wish to indepentently control.
+
+### Props for AccordionParent
+
+| Prop        | Type     | Optional | Default  | Description                                  |
+| ----------- | -------- | -------- | -------- | -------------------------------------------- |
+| children         | ReactNode   |  No      | undefined | This is intended to contain the child **Accordion** components |
+| 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. |
+| 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. | -->
+| 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
+
+| Prop        | Type     | Optional | Default  | Description                                  |
+| ----------- | -------- | -------- | -------- | -------------------------------------------- |
+| 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. |
+| 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. | -->
+| 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
+<AccordionParent 
+    classNameChildHeading='bg-white' 
+    classNameChildContent='bg-white'>
+    <Accordion label='First Example'>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
+    </Accordion>
+    <Accordion label='Second Example'>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
+    </Accordion>
+    <Accordion label='Third Example'>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
+    </Accordion>
+</AccordionParent>
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+<!-- E N D   A C C O R D I O N -->
+
+<!--  A P P O I N T M E N T   P I C K E R  ----------------------------------------------------------------- -->
+
+## Appointment Picker
+
+The **AppointmentPicker** component allows a user to make a single selection from a list of multiple times.
+
+This component takes multiple optional props in addition to any other html attributes a normal html element would use, for example an **aria-tag**.
+
+
+### Props for AppointmentPicker
+
+| Prop        | Type     | Optional | Default  | Description                                  |
+| ----------- | -------- | -------- | -------- | -------------------------------------------- |
+| className   | string | Yes | see below | a group of alternate css classes that can be specified by the developer for use in the dropdown button portion of the component. |
+| classNameContainer | string | Yes | '' | a group of alternate css classes that can be specified by the developer for use in the parent container of the component. |
+| interval | 'hour' \| 'half-hour' \| 'quarter-hour'	| Yes | **`'hour'`** | Controls the interval between times, for example 'hour' intervals would produce results like 01:00, 02:00 etc, while half hour and quarter hour would produce gaps of 30 and 15 minutes respectively. |
+| timeFormat | '12hr' \| '24hr' | Yes | **`'24hr'`** | Controls whether the times are listed as military or standard 12 hour, am/pm times. (13:00 vs 1:00pm & 03:00 vs 3:00am) |
+| hourRange | [number, number] | Yes | **`undefined`** | If specified, only hours within and including the range specified will be available for selection. |
+| label | string | Yes | **`undefined`** | text used as the label for the input, i.e. 'Pick a time (hourly)' above |
+| optionsLabel | string | Yes | **`'Select a time'`** | appears as the label in the AppointmentPicker component, i.e. 'Select a time' above. Note, this is not the label above the component. |
+| setSelectedOption | **`(string) => void`** | No | **`undefined`** | calls the given function with the selected value if present, otherwise with name |
+| variant | **`string`** | Yes | **`undefined`** | The predefined variant of Select to display. Current options are 'default', 'fill', and 'outline' |
+| 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 AppointmentPicker component. For instance, the width prop is a good way to ensure that the button and drop down are of the same width. Pay attention to the default classes below. |
+
+
+***Base CSS Classes***
+
+**`outline-hidden 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 disabled:border-dha-mc-secondary-border disabled:border-2`**
+***fill:***
+**`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:***
+**`bg-white text-[#808080] disabled:border-dha-mc-secondary-border disabled:text-dha-mc-checkbox-inactive`**
+
+
+### Example Usage
+
+```jsx
+ <AppointmentPicker label="Pick a time (half-hour)" interval='half-hour' />
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+<!-- E N D   A P P O I N T M E N T   P I C K E R -->
+
+
+<!-- B A D G E ----------------------------------------------------------------------------------- -->
+
+## Badge
+
+The **badge** component takes three required props, **variant**, **subVariant**, and **child** content.
+
+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.
+
+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. |
+| 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-1 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-1 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-1 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-1 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]`**
+
+
+
+### Example Usage
+
+Default Variant
+
+```jsx
+  <Badge
+    aria-label="appropriate aria label here">
+      Badge!
+    </Badge>
+```
+
+caution Variant
+
+```jsx
+  <Badge
+    variant="caution"
+    aria-label="appropriate aria label here">
+      Badge!
+    </Badge>
+```
+danger Variant
+
+```jsx
+  <Badge
+    variant="danger"
+    aria-label="appropriate aria label here">
+      Badge!
+    </Badge>
+```
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
+
+<!-- B R E A D C R U M B S ------------------------------------------------------------------------------ -->
+
+## 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.
+
+When the container or window is too narrow to display the full Breadcrumbs list, the middle items are truncated into an ellipsis.
+
+The BreadCrumbs component takes in various props 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 `classNameContainer` takes a list of css classes that are applied to the enclosing `nav` element.
+
+The `routes` prop when specified supplies the list of supplied paths + names that are used inside the BreadCrumbs component instead of the component attempting to auto-create a routes list.
+
+If `routes` are not specified, the Breadcrumbs component will attempt to auto-generate and display its parent routes.
+
+Full list of props below
+
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description                                  |
+| ----------- | -------- | -------- | -------- | -------------------------------------------- |
+| className   | string   | Yes      |   | This is used to apply user supplied styling to the `Link` components. Note that words are capitalized using CSS, and can be made using the prop. |
+| classNameContainer | string   | Yes   |   | This is used to apply user supplied styling to the container `nav` element. |
+| routes | []{ name: string, route: string} | Yes | undefined | When present the Breadcrumbs component will use this list of supplied routes + names instead of attempting to auto-create a routes list. |
+| ...props    | string   | Yes | undefined | takes additional props that are not specifically defined in the component, i.e. aria-label |
+| separator  | string   | Yes       |  | A string value providing the path name to an alternate separator |
+| variant    | string   | Yes       | 'default' | Allows the user to enter a pre-defined variant that includes its own pre-defined styling, options are 'default' and 'bold'. |
+
+### Example Usage
+
+With Auto Routes
+
+```jsx
+  <BreadCrumbs />
+```
+
+Manually Specified Routes
+
+```jsx
+  <Breadcrumbs 
+    routes = 
+      {[
+        { name: 'Path 1', route: '/path1' },
+        { name: 'Path 2', route: '/path2' },
+        { name: 'Path 3', route: '/path3' },
+      ]}
+  />
+```
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
+<!-- B U T T O N  ------------------------------------------------------------------------------ -->
+
+## Button
+
+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.
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| 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-hidden 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' - **`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
+
+filled variant example
+
+```jsx
+  <Button
+    disabled={disabledState}
+    label = {buttonName}
+    onClick={handleButtonClick}
+    variant='filled'
+  />
+```
+
+outline variant example
+
+```jsx
+  <Button
+    disabled={disabledState}
+    label = {buttonName}
+    onClick={handleButtonClick}
+    variant='outline'
+  />
+```
+
+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.
+
+The variants labeled **default** and **column** demonstrated in the examples below are UX defined variants.
+
+
+### 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. |
+| variant | string | Yes | 'default' | One of three possible variants that can be specified, **'default'** and **'column'** are UX defined variants that pre-layout up to three buttons for each variant. A **'custom'** variant is also present that leaves all layout and styling to the developer. |
+
+
+### Example Usage
+
+default variant w/ 3 Buttons (ux styled)
+
+```jsx
+  <ButtonGroup className='w-full'>
+    <Button variant='outline' onClick={doSomething}>Secondary</Button>
+    <Button variant='filled' onClick={doSomething}>Primary</Button>
+    <Button variant='transparent' onClick={doSomething}>Tertiary</Button>
+  </ButtonGroup>
+```
+
+default variant w/ 2 Buttons
+
+```jsx
+  <ButtonGroup>
+    <Button variant='outline' onClick={doSomething}>Secondary</Button>
+    <Button variant='filled' onClick={doSomething}>Primary</Button>
+  </ButtonGroup>
+```
+
+column variant w/ 3 Buttons
+
+```jsx
+  <ButtonGroup variant='column'>
+    <Button variant='outline' onClick={doSomething} >Secondary</Button>
+    <Button variant='filled' onClick={doSomething} >Primary</Button>
+    <Button variant='transparent' onClick={doSomething} >Tertiary</Button>
+  </ButtonGroup>
+```
+
+column variant w/ 2  Buttons
+
+```jsx
+  <ButtonGroup variant='column'>
+    <Button variant='outline' onClick={doSomething}>Secondary</Button>
+    <Button variant='filled' onClick={doSomething}>Primary</Button>
+  </ButtonGroup>
+```
+
+use of common examples
+
+```jsx
+  <ButtonGroup 
+    className='w-full' 
+    classNameButtons="border-2 border-green-500 bg-green-200 font-black"
+    variant='custom'
+    >
+    <Button onClick={doSomething}>A</Button>
+    <Button onClick={doSomething}>B</Button>
+    <Button onClick={doSomething}>C</Button>
+  </ButtonGroup>
+```
+
+use of custom class
+
+```jsx
+  <ButtonGroup className='w-full' variant='custom'>
+    <Button 
+      className='border-2 border-green-500 bg-green-200 font-black'
+       onClick={doSomething} 
+      >A</Button>
+    <Button onClick={doSomething}>B</Button>
+    <Button onClick={doSomething}>C</Button>
+  </ButtonGroup>
+```
+
+
+
+### Dependencies
+
+**_none_**
+
+<!-- C A R D  -------------------------------------------------------------------------------- -->
+
+
+[Top of Page](#table-of-contents)
+
+## Card
+
+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, 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.
+
+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.
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| alt   | string   | No      |   | Alt tag to use inside the image displayed inside the Card component. |
+| 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 |
+| 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' |
+
+
+**(1) classnames for different variants**
+
+- default --> **`flex flex-col w-64 max-w-64`**
+- imageBottom --> **`flex flex-col-reverse w-64 mx-w-64`**
+- imageLeft --> **`flex flex-row h-auto max-w-lg min-w-96`**
+- imageRight --> **`flex flex-row-reverse h-auto max-w-lg min-w-96`**
+
+
+### Example Usage
+
+Basic example
+
+```jsx
+  <Card 
+    imagePath={imagePath}>
+    <h1 className="text-lg font-bold">Flu Season</h1>
+    <p>Flu season is approaching, and flu vaccines are 
+      available now.</p>
+  </Card>
+```
+
+Using an alternate varint, custom css, etc.
+
+```jsx
+  <Card variant='imageLeft'
+    imagePath={imagePath} 
+    classNameImage="rounded-lg" 
+    variantStyle="outline" 
+    alt="Doctor wearing face mask"
+    imageInset>
+    <h1 className="text-lg font-bold">Flu Season</h1>
+    <p>Flu season is approaching, and flu vaccines are 
+      available now.</p>
+  </Card>
+```
+
+
+### Dependencies
+
+**_none_**
+
+
+<!-- C H A R A C T E R  C O U N T E R -------------------------------------------------------- -->
+
+
+[Top of Page](#table-of-contents)
+
+## 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 **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.
+
+The children prop will be an **input** or **textArea** element, wrapped by CharacterCounter, and is what CharacterCounter will monitor.
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| children   | ReactNode   | No      |   | the child Input or TextArea component |
+| maxCharacters | number   | No      |   | the number of characters allowed by CharacterCounter prior to it changing the displayed message and warning the user they are over the limit. |
+| className  | string  | Yes  | (1) below | This is used to apply user supplied styling to the CharacterCounter div element. |
+| 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 default classNameOverLimitMessage). |
+
+
+### Example Usage
+
+Basic example
+
+```jsx
+  <CharacterCounter 
+      maxCharacters={15}>
+    <Input size={10} />
+  </CharacterCounter>      
+```
+
+Using an altOverageMessageText and altRemainingMessageText
+
+```jsx
+  <CharacterCounter 
+      maxCharacters={15} 
+      altOverageMessageText="CHARACTERS OVER THE LIMIT!"
+      altRemainingMessageText="characters remaining, use them wisely!">
+    <Input size={10} />
+  </CharacterCounter>
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+
+<!-- C H E C K    B O X -------------------------------------------------------- -->
+
+[Top of Page](#table-of-contents)
+
+## CheckBox
+
+A **CheckBox** is a component that can be either selected or de-selected allowing the user to control a value or selection. A group of **CheckBox** components can be used together to let the user select or deselect a series of related values.
+
+**CheckBoxGroup** is a component that allows CheckBoxes to be placed in a hierarchical order with each individual **CheckBox** placed at a different "level". This allows a user to visually see the relationship between various checkbox items, in addition to seeing the state at various levels when different selections are made.
+
+Note the use of the **key** attribute in the above examples. Without this, toggling between the various **CheckBoxGroup** examples would potential cause errors as the components could be sharing state. If you are having inconsistencies with these components and you are using more than one, try specifying a unique key attribute value.
+
+The **CheckBoxGroup** component can be optionally used with any number of **CheckBox** components to control indented relationships between various individual CheckBoxes. This enables parent CheckBoxes being set to 'indeterminate' state when its various children are both **checked** and **unchecked**.
+
+**CheckBoxGroup** also takes three props that are directly passed down to **CheckBox**, allowing you to specify any of these values in one place instead of in each instance of **CheckBox**. These three props are all boolean values, described below. They are **`fill`**, **`icon`**, and **`marker`**.
+
+Used by itself, **CheckBox** behaves as a normal checkbox component and can be used individually or in groups. It also takes the same attributes that a normal **`html input type="checkbox"`** would.
+
+### Props for CheckBoxGroup
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| bridgePraent   | boolean   | Yes      | {false} | When true, the lines that denote the relationships between parent CheckBoxes and their children are extended at the root level to match root level CheckBoxes to one another. In the above examples, compare 'Multi-Level' and 'bridgeParent' to see the differences. |
+| fill | boolean   | Yes      | {false}  | specifies using the **`fill`** variant or not. If used, the checkbox itself will have a darker solid background. |
+| icon  | boolean  | Yes  | {true} | When **`true`** (default value) this prop will utilize one of two UX created icons to represent a checked, indeterminate, and blank checkbox. When **marker** is true as well, a marker icon is used in place of the checked. |
+| marker | boolean | Yes  | {false} | When true this boolean will cause the normal checked checkbox to instead display an 'x' marker icon. |
+| showBranch | boolean | Yes  | {true} | When true this will cause the normal relationship lines between CheckBoxes to appear. If it is false, the indentation will still exist between various levels, but the lines will be absent. In the above examples, compare 'Multi-Level' and 'showBranch false' to see the differences. |
+
+
+### Props for CheckBox
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| ariaLabel   | string   | Yes  | 'CheckBox Component' | The **aria-label** to assign to this CheckBox |
+| className | string | Yes | **`'flex items-center'`** | alternate css classes to add/change styling of the **div** that wraps the **input** element. |
+| classNameInput | string | Yes | **`''`** | alternate css classes to add/change styling of the **input** html element. |
+| classNameSvg | string | Yes | **`'stroke-[#a1a6a8] h-full border'`** | This prop is applied to the lines that are drawn inside the SVGs that denote the relationships between separate **CheckBox** components. The easiest change to effect is the color of the lines by applying a different custom stroke value. |
+| fill | boolean | Yes | {false} | specifies using the **fill** variant or not. If used, the checkbox itself will have a darker solid background. |
+| icon | boolean | Yes | {true} | When true (default value) this prop will utilize one of two UX created icons to represent a checked, indeterminate, and blank checkbox. When **marker** is true as well, a marker icon is used in place of the checked. |
+| marker | boolean | Yes | {false} | When true this boolean will cause the normal checked checkbox to instead display an 'x' marker icon. |
+| ...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 |
+| value | string | Yes | 'on' | The value passed along if this CheckBox is checked. If checked, both the **name** and the **value** will be submitted as a name/value pair. |
+
+
+
+
+### Example Usage
+
+Basic example
+
+```jsx
+  <CheckBoxGroup key='1'>
+    <CheckBox level={0} name='g1'>Group 1</CheckBox>
+    <CheckBox level={1} name='g1i1'>group 1, item 1</CheckBox>
+    <CheckBox level={1} name='g1i2'>group 1, item 2</CheckBox>
+    <CheckBox level={2} name='h1i2i1'>group 1, item 2, item 1</CheckBox>
+    <CheckBox level={2} name='g1i2i2'>group 1, item 2, item 2</CheckBox>
+    <CheckBox level={1} name='h1i3'>group 1, item 3</CheckBox>
+    <CheckBox level={0} name='g2'>Group 2</CheckBox>
+    <CheckBox level={1} name='g2i1'>group 2, item 1</CheckBox>
+    <CheckBox level={1} name='g2i2'>group 2, item 2</CheckBox>
+    <CheckBox level={2} name='h2i2i1'>group 2, item 2, item 1</CheckBox>
+  </CheckBoxGroup>  
+```
+
+Using markers via the marker prop
+
+```jsx
+  <CheckBoxGroup key='1' marker>
+    <CheckBox level={0} name='g1'>Group 1</CheckBox>
+    <CheckBox level={1} name='g1i1'>group 1, item 1</CheckBox>
+    <CheckBox level={1} name='g1i2'>group 1, item 2</CheckBox>
+    <CheckBox level={2} name='h1i2i1'>group 1, item 2, item 1</CheckBox>
+    <CheckBox level={2} name='g1i2i2'>group 1, item 2, item 2</CheckBox>
+    <CheckBox level={1} name='h1i3'>group 1, item 3</CheckBox>
+    <CheckBox level={0} name='g2'>Group 2</CheckBox>
+    <CheckBox level={1} name='g2i1'>group 2, item 1</CheckBox>
+    <CheckBox level={1} name='g2i2'>group 2, item 2</CheckBox>
+    <CheckBox level={2} name='h2i2i1'>group 2, item 2, item 1</CheckBox>
+  </CheckBoxGroup>
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+
+<!-- D A T E P I C K E R ------------------------------------------------------------------------------- -->
+
+## DatePicker
+
+DatePicker is an input that can be set typing or clicking on the day of the week displayed.
+
+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 |
+| 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
+
+Default Variant
+
+```jsx
+  import dayjs from "dayjs";
+  const [displayDate, setDisplayDate] = useState('');
+
+  <DatePicker id={""} label={""} 
+      value={dayjs().startOf("day").format("MM-DD-YYYY")} 
+      onChange={setDisplayDate}/>
+```
+
+
+### Dependencies
+
+**dayjs**
+
+[Top of Page](#table-of-contents)
+
+
+
+<!-- I N P U T  ------------------------------------------------------------------------------ -->
+
+## Input
+
+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.
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| className  | string  | Yes  | **(1) below**  | pass any css class names to add/change styling
+| 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 |
+| textShadow  | boolean | Yes  | false  | indicates whether a drop shadow should be applied or not to the label text, and if used, utilizes the **labelBaseColor** above. |
+| variant  | string | Yes  |   | The predefined variant of Badge to display. Current options are 'default', 'MedCard', 'Outline', and 'nonHover' |
+
+
+**(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.
+
+### Example Usage
+
+#### Simple version
+
+```jsx
+  <Input 
+    label="Default Input" 
+    placeholder="placeholder text here" 
+    labelBaseColor="#f5f5f5" 
+    insetLabel={true}
+    />
+```
+
+#### More complex
+
+```jsx
+<Input
+  label="Default Input"
+  placeholder="custom classnames"
+  className="rounded-lg border-[#0256ab] bg-[#caecf5]"
+  labelBaseColor="#f5f5f5"
+  labelInputColor="#caecf5"
+  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
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+<!-- L I S T ----------------------------------------------------------------------------------- -->
+
+## 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, 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
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| items   | ListItemProps[]   | Yes      | undefined | takes an array of objects of type ListItemProps, anything can be fed to the children prop of the objects in the array |
+| header | string   | Yes      | undefined | takes in a string of text to be displayed above the list of items |
+| children | React.ReactNode   | Yes      | undefined | this allows the component to receive any number of react components as children |
+| className | string    | Yes | undefined  | takes additional classnames to add/change styling |
+| withDividers | boolean   | Yes   | false | if true, this prop will display a divider to separate each item within the list | 
+| classNameDividerColor  | string   | Yes  | undefined | this prop is used to change the color of dividers when used, for example 'red-400' |
+| 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 **sdk component demo app**, and examples of array and children implementations are shown below. 
+
+#### Array fed to decimal list with dividers:
+
+```jsx
+  listItems:[{
+      children: 'asdf',
+    }, {
+      children: 'asdf2'
+    }, {
+      children: 'asdf3'
+    }, {
+      children: 'asdf4'
+    }, {
+      children: 'asdf5'
+    }
+  ]
+  <List items={listItems} isDecimal={true} withDividers={true}
+  />
+```
+
+#### Children fed to disc list with dividers and specified divider color:
+
+```jsx
+  <List isDecimal={true} withDividers={true} dividerColorClass='red-400'>
+    <ListItem>
+      <img src='src/assets/img/first-aid-kit.svg' alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 inline'></img>
+      <p className='inline'>Hello</p>
+    </ListItem>
+    <ListItem>
+      <img src='src/assets/img/first-aid-kit.svg' alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 inline'></img>
+      <p className='inline'>this</p>
+    </ListItem>
+    <ListItem>
+      <img src='src/assets/img/first-aid-kit.svg' alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 inline'></img>
+      <p className='inline'>is an</p>
+    </ListItem>
+    <ListItem>
+      <img src='src/assets/img/first-aid-kit.svg' alt='first aid kit' className='max-h-[2em] max-w-[2em] pr-1 inline'></img>
+      <p className='inline'>example with icons</p>
+    </ListItem>
+  </List>
+```
+
+
+#### 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)
+
+## Modal
+
+The **Modal** component is intended to be a re-usable component that developers can include in an app that provides alert dialog functionality to users.
+
+The Modal component takes four required props, **isOpen**, **onClose**, **title**, and **child** content.
+
+Optional props are **className**, **clickOutsideCloses**, **displayClosingX**, **closeButtonText**,**continueButton**, **continueButtonText**, and **continueButtonHandler**.
+
+As with the Button component, this component can also take additional html attributes that when included are passed to the parent div.
+
+This div is also styled using the tailwind **`twMerge()`** utility, and is used to apply custom css classes via the className prop.
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| children   | ReactNode   | No      |   | This prop takes children content, i.e. html and content that becomes the body of the Modal. |
+| 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. |
+| 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-hidden`**
+- darker: **`bg-slate-600 rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-hidden text-slate-200`**
+- dark: **`bg-zinc-800 rounded-lg shadow-lg w-full max-w-lg p-6 focus:outline-hidden text-slate-200`**
+
+### Example Usage
+
+Basic Modal
+
+```jsx
+  <Modal 
+    isOpen={isOpen} 
+    onClose={() => setIsOpen(false)} 
+    title="Test Modal" 
+    clickOutsideCloses
+    >
+    <p>This is a Modal dialog that can be used for many varying 
+      purposes, from informational messages to taking user input, 
+      ideal for required quick tasks on a page.
+    </p>
+  </Modal>
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+
+<!-- P I L L  --------------------------------------------------------------------------- -->
+
+## Pill
+
+The **`Pill`** component displays a **`children`** prop as its primary content, with optional left and/or right icons. It also has the ability to display selected state via a **selected** prop, and can also take an **onClick** handler.
+
+Optional props are **className**, **iconLeft**, **iconLeftSelected**, **iconRight**, **iconRightSelected**, **onClick**, and **selected**. 
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| children   | ReactNode   | No      |   | The primary content to display in this Pill, i.e. the word 'Pill' above.|
+| className | string | Yes   |   | Alternate CSS classnames to apply to the Pill component, which is itself built inside a Button. **`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.|
+| iconLeftSelected   | ReactNode   | Yes      |   | This prop takes an image to display as its left icon when the component is in its selected state. It takes this value as a ReactNode.|
+| iconRight   | ReactNode   | Yes      |   | This prop takes an image to display as its right icon. It takes this value as a ReactNode.|
+| iconRightSelected   | ReactNode   | Yes      |   | This prop takes an image to display as its right icon when the component is in its selected state. It takes this value as a ReactNode|
+| onClick   | () => void()   | Yes      |   | When included this serves as the **`onClick`** handler for the **`Pill`** component. |
+| selected   | boolean   | Yes      | false  | This prop is a boolean that can be used to indicate if thisPill component should be in a selected state or not. This value is controled in by the developer, and assigned via this prop. See the selected state example above for example usage. |
+
+1. Default classNames
+
+- **`relative inline-flex items-center justify-center whitespace-nowrap rounded-3xl transition-colors focus-visible:outline-hidden font-[`Arial`] disabled:pointer-events-none disabled:opacity-50 py-[10px] md:py-[14px] lg:py-[16px] border-2 border-[#092068] text-[#092068] text-lg bg-white hover:bg-[#D1DBFB] active:bg-[#9fc5f0] focus:bg-white disabled:bg-[#939194] disabled:bg-dha-mc-bottom-nav-background disabled:text-dha-mc-checkbox-inactive focus:border-black disabled:border-dha-mc-secondary-border disabled:border-2 py-0 md:py-0 lg:py-0 h-[48px] mt-1`**
+
+
+### Example Usage
+
+Basic Pill
+
+```jsx
+  <Pill
+    iconLeft={<img src={frame} alt='left header icon' />}
+    iconRight={<img src={frame} alt='right header icon' />}
+    >
+    Pill
+  </Pill>
+```
+
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)
+
+
+<!-- S E C T I O N H E A D E R  ------------------------------------------------------- -->
+
+
+## SectionHeader
+
+The **`SectionHeader`** component displays a **`children`** prop as a heading, and uses various additional props to customize the remaining portion of the Header.
+
+Various examples and combinations of this components props in use can be seen via code examples below.
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| children   | ReactNode   | No      |  | The primary content to display in this SectionHeader, i.e.the word 'Prologue' above. |
+| className   | string   | Yes  | (1) below | Alternate CSS classnames to apply to the SectionHeader component.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
+| classNameChildren   | string   | Yes  | (2) below  | Alternate CSS classnames to apply to the **`children`** component which contains the Header content.  **`twMerge`** is used to apply these styles, so they reliably overwrite existing classes. |
+| 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. |
+| 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. |
+| button | boolean | Yes | false | Boolean value specifying whether to display a button or not on the right side of the SectionHeader. |
+| buttonOnClick | () => void | Yes | undefined | An onClick handler for the optional button. |
+| buttonContent | string | Yes | 'Click Me!' | The text content to display in the Button component if enabled |
+| 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, 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. |
+| type | 'page', 'section', or 'subsection' | Yes | 'page' | This specifies the SectionHeader type to display. Each variation is intended for a lower ordered item than the one before it. The options are 'page', 'section', and 'subsection'. |
+
+
+1. Default classNames 
+
+   - type 'page' - **`pt-4 pb-2 flex pl-6 pr-2 justify-start items-center gap-4 inline-flex w-full`**
+
+   - type 'section'/'subsection' - **`py-2 flex pl-6 pr-2 justify-start items-center gap-4 inline-flex w-full`**
+
+2. children classNames
+
+   - **`self-stretch text-[40px] font-normal font-["Arial"] leading-[48px] pb-1`**
+
+3. subHeader classNames
+
+   - **`text-xl font-normal font-["Arial"] leading-[30px]`**
+
+### Example Usage
+
+```jsx
+  <SectionHeader  
+    iconLeft={<img src={frameLight} alt='left header icon' className="size-10" />}
+    iconRight={<img src={importantLight} alt='right header icon' className='size-10' />}
+    subHeader="1st things first though"
+    underline
+    fill
+    button
+    buttonContent="Alert"
+    buttonOnClick={() => alert('Clicked!')}
+  >
+      Prologue
+  </SectionHeader>
+```
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
+<!-- S E L E C T ---------------------------------------------------------------------------- -->
+
+## Select
+
+The **Select** component or drop-down allow a user to make a single selection from multiple choices while preserving space on the form. Our Select component comes with several variants: default, fill, and outline.
+
+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
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| className   | string   | Yes      | (1) below | a group of alternate css classes that can be specified by the developer for use in the input element. |
+| classNameContainer   | string   | Yes      | undefined | a group of alternate css classes that can be specified by the developer for use in the parent container of the component. |
+| disabled   | boolean   | Yes      | undefined | if true the Select component is placed in a disabled state |
+| error   | boolean   | Yes      | false | if true a red border is applied to the outside of the select component indicating an error state. |
+| label | string   | Yes      | undefined | text used as the label for the input, i.e. 'Border Color' above |
+| options  | {{name: ..., value:...}, ...}   | Yes  | undefined | options is an array of objects, each with a **name** and an optional **value** property. If value is not present, name is used in the handler function. |
+| 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. |
+
+
+1. Base CSS Classes
+
+- **`outline-hidden 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 disabled:border-dha-mc-secondary-border disabled:border-2`**
+- fill:
+  - **`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:
+  - **`bg-white text-[#808080] disabled:border-dha-mc-secondary-border disabled:text-dha-mc-checkbox-inactive`**
+
+### Example Usage
+
+```jsx
+  <Select 
+    label='Border Color' 
+    optionsLabel='Choose a Color' 
+    variant='MedCard' 
+    options={[
+      {name: 'gray', value: 'border-gray-500'}, 
+      {name: 'Blue', value: 'border-blue-500'}
+      ]} 
+    setSelectedOption={setSelectedBorder} />
+```
+
+
+### 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
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
+
+
+<!-- S I D E B A R N A V ---------------------------------------------------------------------------- -->
+
+## SideBarNav
+
+The **SideBarNav** component provides a navigation component that slides in from the side of the display when activated. It includes an application logo, the application name, a list of links, and the version number of the application displayed at the bottom of the navbar.  
+
+Future versions should include search functionality.
+
+  version: string;
+  appName: string;
+  menuItems: ListItemProps[];
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| appName | string   | No  | undefined | The application name to dispilay |
+| className   | string   | Yes      | (1) below | a group of alternate css classes that can be specified by the developer and applied to the outer **`div`** element. |
+| 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 |
+| 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 |
+
+
+1. Default Classes outer **`div`**
+
+- w/o menu **`relative w-56 h-screen flex flex-col px-4 pb-4 pt-10 bg-white overflow-y-auto`**
+- w/ menu, include also **`fixed z-20 right-0 top-0 translate-x-full transition-transform duration-300`**
+
+2. Default classes applied to **`img`** - **`border border-[#bbbabc] w-16 h-16 bg-[#eeeeef] ring-1`**
+
+3. Default classes applied to **`button`** - **`size-8 mb-4`**
+
+
+### Example Usage
+
+```jsx
+import doctor from '../../assets/Doctor.png';
+// ...
+
+const menuItems = [
+{
+  children: <>
+    <img className='max-h-[2em] max-w-[2em] pr-1 inline' src={arrowRight} alt='home link icon' />
+    <p className='inline hover:underline'>Accordion</p>
+  </>,
+  target: '/accordion'
+},
+{
+  children: <>
+    <img className='max-h-[2em] max-w-[2em] pr-1 inline' src={arrowRight} alt='home link icon' />
+    <p className='inline hover:underline'>Badge</p>
+  </>,
+  target: '/badge'
+},
+{
+  children: <>
+    <img className='max-h-[2em] max-w-[2em] pr-1 inline' src={arrowRight} alt='home link icon' />
+    <p className='inline hover:underline'>Breadcrumbs</p>
+  </>,
+  target: '/libraries/simple-ui/bread-crumbs-page'
+},
+....
+}
+
+// in the return JSX
+<SideBarNav
+  appName='A.C.M.E. Tools'
+  version="0.0.0"
+  menuItems={menuItems}
+  image={doctor}
+  clickOutsideCloses
+  menu
+  className='bg-slate-200 border border-slate-400 rounded-l-md h-full'
+  />
+```
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+<!-- S K E L E T O N ---------------------------------------------------------------------------- -->
+
+## Skeleton
+
+A Skeleton is used as a placeholder, showing a basic graphic representation of a page or resource while content is loading.
+
+The `Skeleton` component serves as a container for the Skeleton content, which consists of SkelCircle, SkelLine, SkelSection, and SkelRow. Skeleton takes two optional prop values, className and variant.
+
+Note that the `Skeleton` component uses `Flexbox`, and you can in theory use your own custom elements inside it, or change the layout on child components with this in mind.
+
+The nested components inside of Skeleton are `SkelCircle`, `SkelLine`, `SkelSection`, and `SkelRow`. These small components serve to display shaded shapes that represent larger content on the page representation.
+
+When using the `className` prop on one of the internal props inside the `Skeleton` component to alter style or size, as the container uses flexbox, note the usage examples above. For instance, to make a bar partially expand across the line, you can for example use `className="grow-0 basis-2/12"`.
+
+In addition, you can apply a different color and opacity by using simple tailwindcss classes, i.e. to change the background color and opacity as above in the last example, applying **`bg-blue-500/50`** changes the color of the individual Skeleton sub-components to a shade of blue with 50% 
+opacity.
+
+- `SkelCircle` - a small circle (i.e. a badge or icon)
+- `SkelLine` - a line (i.e. text or content)
+- `SkelSection` - a larger section on a page, or paragraph
+- `SkelRow` - non graphical, used to force following items to a new row after using inline variants above. Usually not required.
+
+Full list of props below
+
+### Props for Skeleton
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| className   | string   | Yes      |  | This is used to apply user supplied styling to the `Skeleton` component. |
+| variant | string | Yes |  | Allows the user to enter a pre-defined variant that includes its own pre-defined styling |
+
+### Props for SkelCircle & SkelLine components
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| className   | string   | Yes      |  | This is used to apply user supplied styling to the `SkelCircle` and `SkelLine` components. |
+| inline | boolean | Yes | false | if specified or true this component will be layed out inline. The `className` prop can be used to set a width, and if desired, additional inline components can be placed on the same line inside the Skeleton. |
+
+### Props for SkelCircle & SkelLine components
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| className   | string   | Yes      |  | This is used to apply user supplied styling to the `SkelSection` and `SkelRow` components. |
+
+Tailwind CSS Classes used for Skeleton components
+
+- Skeleton
+  - **`flex flex-row flex-wrap animate-pulse h-48 w-56 pt-2`**
+- SkelCircle & SkelLine
+  - **`rounded-lg bg-slate-300 h-6 inline-block mx-2 my-1 grow`**
+- SkelSection
+  - **`rounded-lg bg-slate-300 grow h-24 my-1 mx-2`**
+- SkelRow
+  - **`basis-full h-0`**
+
+
+### Example Usage
+
+Usage example for Example 1 below
+
+```jsx
+  import { Skeleton, SkelCircle, SkelLine, SkelRow, SkelSection } from '@dhasdk/simple-ui'
+  // ... 
+  <Skeleton>
+    <SkelCircle inline /><SkelLine inline />
+    <SkelLine />
+    <SkelSection />
+  </Skeleton>
+```
+
+Usage example for Example 2 below
+
+```jsx
+  import { Skeleton, SkelCircle, SkelLine, SkelRow, SkelSection } from '@dhasdk/simple-ui'
+  // ... 
+  <Skeleton>
+    <SkelLine className="grow-0 basis-2/12" inline />
+    <SkelLine className="grow-0 basis-2/12" inline />
+    <SkelLine />
+    <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
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
+
+[Top of Page](#table-of-contents)
+<!-- S L I D E R ------------------------------------------------------------------------------ -->
+
+## Slider
+
+A Slider is an html **`input`** element of type 'range' that allows a user to enter a numeric value. It consists of a stationary 'track' and a movable 'thumb', the thumb being the ux element the user drags to indicate a desired value.
+
+The Slider utilizes an input element of type range, and applies additional css styling via a css module.
+
+For accessibility purposes the thumb recieves alternate styling on a focus event. Safari does not provide focus to a slider thumb though, so styling also changes on active, though that is more transient and perhaps less useful for accessibility purposes.
+
+[Additional input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range) not defined below can be passed in as well and applied directly to the html input element.
+
+For the className props, the tailwind **`twMerge`** function is used, so if tailwind classes are passed in, they will replace or add to the existing classes as appropriate.
+
+Full list of props below
+
+### Props for Slider
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| className   | string   | Yes      |  | This is used to apply user supplied styling to the **input** element that makes up the **Slider** component. |
+| classNameLabel | string | Yes |  | A string value of tailwind classes used to apply styling to the **label** inside the **Slider** component. |
+| changeHandler | **`(value: number) => void;`** | Yes |  | A **callback** function can be used to pass values back to the parent. Example in the usage display of the callback example above. |
+| id | string | Yes |  | The **id** value used to link the **label** and **input** elements together. If an **id** is not provided, the **label** is not displayed. |
+
+
+Tailwind CSS Classes used for Slider components
+
+- className defaults
+  - **`w-full block mb-2`**
+- classNameLabel defaults
+  - **`block mb-2'`**
+
+
+### Example Usage
+
+Default example, no callback or label
+
+```jsx
+  <Slider />
+```
+
+Example with callback function
+
+```jsx
+  const [value, setValue] = useState<number>(50);
+  // ...
+
+  return (
+    <>
+        <Slider className='block mb-4' startValue={value} changeHandler={setValue} />
+        <div className='block'>value: {value}</div>
+    </>
+  );
+```
+Slider w/ startValue (an input attribute) & changeHandler
+
+```jsx
+  const [value, setValue] = useState<number>(50);
+  // ...
+
+  <Slider 
+      startValue={value} 
+      changeHandler={setValue} 
+      id='1' 
+      label='Volume Level' 
+      classNameLabel='font-bold text-blue-900' 
+      />
+  <div>value: {value}</div>
+```
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
+
+<!-- S T A T U S ---------------------------------------------------------------------------- -->
+
+## Status
+
+The `Status` component comes with three default variants, and the ability for the developer to create their own. Status is used to display in a small graphical format the status of content or a short message, accompanied by an icon - similar to a Badge.
+
+This component takes five optional props that allow for customization and/or the use of pre-defined variants. The three predefined variants, specified via the `variant` prop, are `available`, `inProgress`, and `notAvailable`. If `variant` is left blank, `available` is used.
+
+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 `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`.
+
+Full list of props below
+
+### Props
+
+| 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. |
+| 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. |
+| 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. classNameChild
+
+   **`text-green-900 text-lg font-normal font-['Arial']`**
+
+3. classNameImage
+
+   **`w-5 h-5 relative overflow-hidden`**
+
+### Example Usage
+
+Available variant
+
+```jsx
+  <Status 
+    className='me-4'>
+    Available</Status>
+```
+
+inProgress variant
+
+```jsx
+  <Status 
+    className='me-4' 
+    variant='inProgress'>
+    In Progress</Status>
+```
+
+notAvailable variant
+
+```jsx
+  <Status 
+    className='me-4' 
+    variant='inProgress'>
+    In Progress</Status>
+```
+
+Custom variant
+
+```jsx
+  <Status 
+    image={ <img src={tune} 
+        alt='information' /> }
+    className='border-blue-700 bg-blue-200'
+    classNameChild='text-blue-700'
+    >
+    Custom
+  </Status>
+```
+
+
+### Dependencies
+
+**_none_**
+
+[Top of Page](#table-of-contents)
+
+<!-- T A B S  --------------------------------------------------------------------------------- -->
+
+## Tabs
+
+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**, **classNameContainer**, and **variant**.
+
+Full list of props below
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| 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 - a simple example
+
+```jsx
+  const tabExample = [
+    {
+        id: 'tab1',
+        label: 'Tab 1',
+        content: <TabsContent1/>,
+    },
+    {
+        id: 'tab2',
+        label: 'Tab 2',
+        content: <TabsContent2/>,
+    },
+    {
+        id: 'tab3',
+        label: 'Tab 3',
+        content: <TabsContent3/>,
+    }
+  ]
+
+  <Tabs
+    tabs={tabExample}
+    variant='filled'
+  />
+```
+
+### Dependencies
+
+**_none_**
+
+
+
+[Top of Page](#table-of-contents)
+
+<!--  T O G G L E -------------------------------------------------------------------- -->
+
+## Toggle
+
+A Toggle is an element that allows the user to make a choice between two mutually exclusive states. Our Toggle comes with several variants: default, outlined, and text.
+
+The Toggle component takes a "variant" prop used to indicate pre-defined styles, an optional click handler, and various other optional props described below and uses those to display a Toggle button. The variant prop currently takes one of four values, those possible values currently being 'default', 'Outline', 'nonHover', and 'MedCard'.
+
+As with the button component, Toggle takes any other additional html attributes and passes them to the parent **`<button>`** tag. This div is styled using the tailwind twMerge() utility, so custom classes can be added via the classNames prop as and applied as well.
+
+### Props
+
+| Prop        | Type     | Optional | Default  | Description |
+| ----------- | -------- | -------- | -------- | ----------- |
+| 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 || 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 |
+| variant | string | Yes | 'default' | The predefined variant of Badge to display. Options are: 'default', 'Outline', 'nonHover', and 'MedCard'. |
+
+
+(1) Base CSS Classes
+   - w-16 h-8 flex items-center p-1 rounded-full cursor-pointer transition-colors duration-300
+   Toggle portion Base CSS Classes
+   - bg-white w-6 h-6 rounded-full shadow-md transform transition-transform duration-300
+
+
+Separate Variant Styles
+
+- default:
+  - classes: 'bg-[#d0cfd1] hover:bg-[#bbbabc]'
+  - toggledClasses: 'bg-[#053ea6] hover:bg-[#0752dc]'
+  - buttonClasses: 'translate-x-0'
+  - 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 lg:translate-x-6'
+
+### Example Usage
+
+```jsx
+  <Toggle 
+    onCheckedChange={(checked: boolean) => {
+      setColor(checked ? 
+        'border-green-500' : 'border-gray-400'); 
+      console.log(checked);}
+    } 
+    variant={toggleVariant} />
+```
+
+### Dependencies
+
+**_none_**
+
+
+[Top of Page](#table-of-contents)