@agility/plenum-ui 1.1.6 → 1.1.7

package/coverage/agility-component-lib-react/src/components/Forms/Radio/Radio.tsx.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">75.75% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>20/20</span>
+                <span class='fraction'>25/33</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">71.42% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>10/10</span>
+                <span class='fraction'>10/14</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">20% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>1/1</span>
+                <span class='fraction'>1/5</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">71.42% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>15/15</span>
+                <span class='fraction'>20/28</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line high'></div>
+    <div class='status-line medium'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -125,7 +125,33 @@
 <a name='L60'></a><a href='#L60'>60</a>
 <a name='L61'></a><a href='#L61'>61</a>
 <a name='L62'></a><a href='#L62'>62</a>
-<a name='L63'></a><a href='#L63'>63</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L63'></a><a href='#L63'>63</a>
+<a name='L64'></a><a href='#L64'>64</a>
+<a name='L65'></a><a href='#L65'>65</a>
+<a name='L66'></a><a href='#L66'>66</a>
+<a name='L67'></a><a href='#L67'>67</a>
+<a name='L68'></a><a href='#L68'>68</a>
+<a name='L69'></a><a href='#L69'>69</a>
+<a name='L70'></a><a href='#L70'>70</a>
+<a name='L71'></a><a href='#L71'>71</a>
+<a name='L72'></a><a href='#L72'>72</a>
+<a name='L73'></a><a href='#L73'>73</a>
+<a name='L74'></a><a href='#L74'>74</a>
+<a name='L75'></a><a href='#L75'>75</a>
+<a name='L76'></a><a href='#L76'>76</a>
+<a name='L77'></a><a href='#L77'>77</a>
+<a name='L78'></a><a href='#L78'>78</a>
+<a name='L79'></a><a href='#L79'>79</a>
+<a name='L80'></a><a href='#L80'>80</a>
+<a name='L81'></a><a href='#L81'>81</a>
+<a name='L82'></a><a href='#L82'>82</a>
+<a name='L83'></a><a href='#L83'>83</a>
+<a name='L84'></a><a href='#L84'>84</a>
+<a name='L85'></a><a href='#L85'>85</a>
+<a name='L86'></a><a href='#L86'>86</a>
+<a name='L87'></a><a href='#L87'>87</a>
+<a name='L88'></a><a href='#L88'>88</a>
+<a name='L89'></a><a href='#L89'>89</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -149,6 +175,12 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">13x</span>
 <span class="cline-any cline-yes">13x</span>
@@ -158,12 +190,30 @@
 <span class="cline-any cline-yes">13x</span>
 <span class="cline-any cline-yes">13x</span>
 <span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">13x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">13x</span>
 <span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -171,8 +221,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -208,6 +260,12 @@ export interface RadioProps {
     isError?: boolean;
     /** Message or description */
     message?: string;
+    /** value */
+    value?: string;
+    /** Callback on input change */
+    onChange?(value: string, isChecked: boolean): void;
+    /** Callback on click */
+    onClick?(value: string, isChecked: boolean): void;
 }
 &nbsp;
 /** Comment */
@@ -219,12 +277,25 @@ export const Radio: FC&lt;RadioProps&gt; = ({
     isChecked = false,
     isRequired = false,
     isError = false,
-    message
+    message,
+    onChange,
+    onClick,
+    value
 }: RadioProps) =&gt; {
     const checboxStyles = cn('focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300', {
         'border-red-500 shadow-none': isError
     });
     const wrapperStyles = cn('relative flex items-start', { 'opacity-50': isDisabled });
+    const handleChange = <span class="fstat-no" title="function not covered" >(e</span>: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
+        const targetValue = <span class="cstat-no" title="statement not covered" >e.currentTarget.value;</span>
+        const targetChecked = <span class="cstat-no" title="statement not covered" >e.currentTarget.checked;</span>
+<span class="cstat-no" title="statement not covered" >        typeof onChange === 'function' &amp;&amp; onChange(targetValue, targetChecked);</span>
+    };
+    const handleClick = <span class="fstat-no" title="function not covered" >(e</span>: React.MouseEvent&lt;HTMLInputElement&gt;) =&gt; {
+        const targetValue = <span class="cstat-no" title="statement not covered" >e.currentTarget.value;</span>
+        const targetChecked = <span class="cstat-no" title="statement not covered" >e.currentTarget.checked;</span>
+<span class="cstat-no" title="statement not covered" >        typeof onClick === 'function' &amp;&amp; onClick(targetValue, targetChecked);</span>
+    };
     return (
         &lt;div className={wrapperStyles}&gt;
             &lt;div className="flex items-center h-5"&gt;
@@ -233,9 +304,16 @@ export const Radio: FC&lt;RadioProps&gt; = ({
                     aria-describedby={`${id}-description`}
                     name={name}
                     type="radio"
+                    value={value}
                     className={checboxStyles}
                     disabled={isDisabled}
                     defaultChecked={isChecked}
+                    onChange={<span class="fstat-no" title="function not covered" >(e</span>) =&gt; {
+<span class="cstat-no" title="statement not covered" >                        handleChange(e);</span>
+                    }}
+                    onClick={<span class="fstat-no" title="function not covered" >(e</span>) =&gt; {
+<span class="cstat-no" title="statement not covered" >                        handleClick(e);</span>
+                    }}
                 /&gt;
             &lt;/div&gt;
             &lt;div className="ml-3 text-sm"&gt;
@@ -256,7 +334,7 @@ export const Radio: FC&lt;RadioProps&gt; = ({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Feb 28 2022 11:30:39 GMT-0500 (Eastern Standard Time)
+                at Tue May 31 2022 10:20:14 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/agility-component-lib-react/src/components/Forms/Radio/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">75.75% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>20/20</span>
+                <span class='fraction'>25/33</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">71.42% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>10/10</span>
+                <span class='fraction'>10/14</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">20% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>1/1</span>
+                <span class='fraction'>1/5</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">71.42% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>15/15</span>
+                <span class='fraction'>20/28</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line high'></div>
+    <div class='status-line medium'></div>
     <div class="pad1">
 <table class="coverage-summary">
 <thead>
@@ -79,18 +79,18 @@
 </tr>
 </thead>
 <tbody><tr>
-	<td class="file high" data-value="Radio.tsx"><a href="Radio.tsx.html">Radio.tsx</a></td>
-	<td data-value="100" class="pic high">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
+	<td class="file medium" data-value="Radio.tsx"><a href="Radio.tsx.html">Radio.tsx</a></td>
+	<td data-value="75.75" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 75%"></div><div class="cover-empty" style="width: 25%"></div></div>
 	</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="20" class="abs high">20/20</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="10" class="abs high">10/10</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="1" class="abs high">1/1</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="15" class="abs high">15/15</td>
+	<td data-value="75.75" class="pct medium">75.75%</td>
+	<td data-value="33" class="abs medium">25/33</td>
+	<td data-value="71.42" class="pct medium">71.42%</td>
+	<td data-value="14" class="abs medium">10/14</td>
+	<td data-value="20" class="pct low">20%</td>
+	<td data-value="5" class="abs low">1/5</td>
+	<td data-value="71.42" class="pct medium">71.42%</td>
+	<td data-value="28" class="abs medium">20/28</td>
 	</tr>
 
 </tbody>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Feb 28 2022 11:30:39 GMT-0500 (Eastern Standard Time)
+                at Tue May 31 2022 10:20:14 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/agility-component-lib-react/src/components/Forms/Select/Select.tsx.html

@@ -235,12 +235,12 @@
 import { default as cn } from 'classnames';
 import { InputLabel } from '../InputLabel';
  
-export type SelectOptions = {
+export type SimpleSelectOptions = {
     label: string;
     value: string;
 };
  
-export interface SelectProps {
+export interface SimpleSelectProps {
     /** Label */
     label?: string;
     /** Select ID prop */
@@ -248,7 +248,7 @@ export interface SelectProps {
     /** Select name prop */
     name: string;
     /** List of options to display in the select menu */
-    options: SelectOptions[];
+    options: SimpleSelectOptions[];
     /** Select name prop */
     onChange?(value: string): void;
     /** Select disabled state */
@@ -260,7 +260,7 @@ export interface SelectProps {
 }
  
 /** Comment */
-export const Select: FC<SelectProps> = ({
+export const Select: FC<SimpleSelectProps> = ({
     label,
     id,
     name,
@@ -269,7 +269,7 @@ export const Select: FC<SelectProps> = ({
     isDisabled,
     isError,
     isRequired
-}: SelectProps) => {
+}: SimpleSelectProps) => {
     const [selectedOption, setSelectedOption] = useState<string>(options[0].value);
     const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
         const targetValue = e.target.value;
@@ -322,7 +322,7 @@ export const Select: FC<SelectProps> = ({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Feb 28 2022 11:30:39 GMT-0500 (Eastern Standard Time)
+                at Tue May 31 2022 10:20:14 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/agility-component-lib-react/src/components/Forms/Select/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Feb 28 2022 11:30:39 GMT-0500 (Eastern Standard Time)
+                at Tue May 31 2022 10:20:14 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/agility-component-lib-react/src/components/Forms/TextInputAddon/InputCta/InputCta.tsx.html

@@ -216,7 +216,7 @@ export const InputCta: FC<InputCtaProps> = ({
 <span class="cstat-no" title="statement not covered" >        onClickHandler &amp;&amp; onClickHandler();</span>
     };
     const buttonStyle = cn(
-        'relative z-10 inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500',
+        'relative z-10 inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500',
         {
             'rounded-r-md text-gray-700 -ml-px': align === 'right'
         },
@@ -230,10 +230,10 @@ export const InputCta: FC&lt;InputCtaProps&gt; = ({
             'hover:bg-gray-100': onClickHandler &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >!isClear</span>
         },
         {
-            'border-l-white': isClear &amp;&amp; align === 'right'
+            '!border-l-white': isClear &amp;&amp; align === 'right'
         },
         {
-            'border-r-white': isClear &amp;&amp; align === 'left'
+            '!border-r-white': isClear &amp;&amp; align === 'left'
         },
         {
             'bg-gray-50': !isClear
@@ -256,7 +256,7 @@ export const InputCta: FC&lt;InputCtaProps&gt; = ({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Feb 28 2022 11:30:39 GMT-0500 (Eastern Standard Time)
+                at Tue May 31 2022 10:20:14 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../../../../prettify.js"></script>
         <script>

package/coverage/agility-component-lib-react/src/components/Forms/TextInputAddon/InputCta/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Feb 28 2022 11:30:39 GMT-0500 (Eastern Standard Time)
+                at Tue May 31 2022 10:20:14 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../../../../prettify.js"></script>
         <script>

package/coverage/agility-component-lib-react/src/components/Forms/TextInputSelect/InputSelect/InputSelect.tsx.html

@@ -176,7 +176,7 @@ export const InputSelect: FC<InputSelectProps> = ({
         setSelectedOption(targetValue);
     };
     const selectStyle = cn(
-        'relative z-10 inline-flex items-center space-x-2 bg-white px-4 py-2 pr-7 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500',
+        'relative z-10 inline-flex items-center space-x-2 bg-white px-4 py-2 pr-7 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500',
         { 'rounded-r-md text-gray-700 -ml-px': align === 'right' },
         { 'rounded-l-md text-gray-500 -mr-px focus-within:z-10': align === 'left' },
         { 'cursor-default': !onSelectOption },
@@ -202,7 +202,7 @@ export const InputSelect: FC<InputSelectProps> = ({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Feb 28 2022 11:30:39 GMT-0500 (Eastern Standard Time)
+                at Tue May 31 2022 10:20:14 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../../../../prettify.js"></script>
         <script>

package/coverage/agility-component-lib-react/src/components/Forms/TextInputSelect/InputSelect/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Feb 28 2022 11:30:39 GMT-0500 (Eastern Standard Time)
+                at Tue May 31 2022 10:20:14 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../../../../prettify.js"></script>
         <script>

package/coverage/agility-component-lib-react/src/components/Switch/Switch.tsx.html

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">93.75% </span>
+                <span class="strong">94.44% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>15/16</span>
+                <span class='fraction'>17/18</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">50% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>2/4</span>
+                <span class='fraction'>5/10</span>
             </div>
         
             
@@ -106,7 +106,16 @@
 <a name='L41'></a><a href='#L41'>41</a>
 <a name='L42'></a><a href='#L42'>42</a>
 <a name='L43'></a><a href='#L43'>43</a>
-<a name='L44'></a><a href='#L44'>44</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L44'></a><a href='#L44'>44</a>
+<a name='L45'></a><a href='#L45'>45</a>
+<a name='L46'></a><a href='#L46'>46</a>
+<a name='L47'></a><a href='#L47'>47</a>
+<a name='L48'></a><a href='#L48'>48</a>
+<a name='L49'></a><a href='#L49'>49</a>
+<a name='L50'></a><a href='#L50'>50</a>
+<a name='L51'></a><a href='#L51'>51</a>
+<a name='L52'></a><a href='#L52'>52</a>
+<a name='L53'></a><a href='#L53'>53</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -118,6 +127,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
@@ -133,6 +144,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -140,6 +154,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -158,29 +176,38 @@ export interface SwitchProps {
     onChange(value: boolean): void;
     /** default state */
     defaultValue?: boolean;
+    /** size state */
+    size?: 'sm' | 'md' | 'lg';
 }
 &nbsp;
 /** Comment */
-export const Switch: FC&lt;SwitchProps&gt; = ({ defaultValue = false, onChange }: SwitchProps) =&gt; {
+export const Switch: FC&lt;SwitchProps&gt; = ({ defaultValue = false, onChange, size = 'md'<span class="branch-1 cbranch-no" title="branch not covered" > }: SwitchProps)</span> =&gt; {
     const [enabled, setEnabled] = useState&lt;boolean&gt;(defaultValue);
     useEffect(<span class="fstat-no" title="function not covered" >() =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >        onChange &amp;&amp; onChange(enabled);</span>
     }, [enabled]);
 &nbsp;
     const switchStyles = cn(
-        'relative inline-flex flex-shrink-0 h-[38px] w-[74px]',
+        'relative inline-flex flex-shrink-0',
         'border-2 border-transparent rounded-full cursor-pointer',
         'transition-colors ease-in-out duration-200 focus:outline-none',
         'focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75',
         { 'bg-purple-600': enabled },
-        { 'bg-gray-200': !enabled }
+        { 'bg-gray-200': !enabled },
+        {'h-[38px] w-[74px]': size === 'lg'},
+        {'h-[28px] w-[64px]': size === 'md'},
+        {'h-[18px] w-[34px]': size === 'sm'}
     );
     // the circular button inside the switch
     const toggleStyles = cn(
-        'pointer-events-none inline-block h-[34px] w-[34px] rounded-full bg-white',
+        'pointer-events-none inline-block rounded-full bg-white',
         'shadow-lg transform ring-0 transition ease-in-out duration-200',
         { 'translate-x-9': enabled },
-        { 'translate-x-0': !enabled }
+        { 'translate-x-0': !enabled },
+        {'h-[34px] w-[34px]': size === 'lg'},
+        {'h-[24px] w-[24px]': size === 'md'},
+        {'h-[14px] w-[14px] translate-x-4': size === 'sm' &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >enabled}</span>,
+        {'h-[14px] w-[14px] translate-x-0': size === 'sm' &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >!enabled}</span>
     );
 &nbsp;
     return (
@@ -199,7 +226,7 @@ export const Switch: FC&lt;SwitchProps&gt; = ({ defaultValue = false, onChange }
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Feb 28 2022 11:30:39 GMT-0500 (Eastern Standard Time)
+                at Tue May 31 2022 10:20:14 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/agility-component-lib-react/src/components/Switch/index.html

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">93.75% </span>
+                <span class="strong">94.44% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>15/16</span>
+                <span class='fraction'>17/18</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">50% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>2/4</span>
+                <span class='fraction'>5/10</span>
             </div>
         
             
@@ -80,13 +80,13 @@
 </thead>
 <tbody><tr>
 	<td class="file high" data-value="Switch.tsx"><a href="Switch.tsx.html">Switch.tsx</a></td>
-	<td data-value="93.75" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 93%"></div><div class="cover-empty" style="width: 7%"></div></div>
+	<td data-value="94.44" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 94%"></div><div class="cover-empty" style="width: 6%"></div></div>
 	</td>
-	<td data-value="93.75" class="pct high">93.75%</td>
-	<td data-value="16" class="abs high">15/16</td>
+	<td data-value="94.44" class="pct high">94.44%</td>
+	<td data-value="18" class="abs high">17/18</td>
 	<td data-value="50" class="pct medium">50%</td>
-	<td data-value="4" class="abs medium">2/4</td>
+	<td data-value="10" class="abs medium">5/10</td>
 	<td data-value="50" class="pct medium">50%</td>
 	<td data-value="2" class="abs medium">1/2</td>
 	<td data-value="90" class="pct high">90%</td>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Feb 28 2022 11:30:39 GMT-0500 (Eastern Standard Time)
+                at Tue May 31 2022 10:20:14 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/agility-component-lib-react/src/util/DynamicIcons.tsx.html

@@ -85,10 +85,10 @@
 <a name='L20'></a><a href='#L20'>20</a>
 <a name='L21'></a><a href='#L21'>21</a>
 <a name='L22'></a><a href='#L22'>22</a>
-<a name='L23'></a><a href='#L23'>23</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L23'></a><a href='#L23'>23</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -98,7 +98,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -136,7 +136,7 @@ export const DynamicIcons = <span class="fstat-no" title="function not covered"
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Wed May 11 2022 15:20:43 GMT-0400 (Eastern Daylight Time)
+                at Tue May 31 2022 10:20:14 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>