@sakura-ui/sakura-ui 0.1.11 → 0.1.13

package/packages/forms/coverage/lcov-report/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">76.62% </span>
+                <span class="strong">84.41% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>118/154</span>
+                <span class='fraction'>130/154</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">70.9% </span>
+                <span class="strong">80.95% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>39/55</span>
+                <span class='fraction'>51/63</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">33.33% </span>
+                <span class="strong">48.71% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>13/39</span>
+                <span class='fraction'>19/39</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">74.28% </span>
+                <span class="strong">82.85% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>104/140</span>
+                <span class='fraction'>116/140</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line medium'></div>
+    <div class='status-line high'></div>
     <div class="pad1">
 <table class="coverage-summary">
 <thead>
@@ -87,25 +87,25 @@
 	<td data-value="14" class="abs high">14/14</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="33.33" class="pct low">33.33%</td>
-	<td data-value="12" class="abs low">4/12</td>
+	<td data-value="50" class="pct medium">50%</td>
+	<td data-value="12" class="abs medium">6/12</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="14" class="abs high">14/14</td>
 	</tr>
 
 <tr>
-	<td class="file medium" data-value="src/components"><a href="src/components/index.html">src/components</a></td>
-	<td data-value="74.73" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 74%"></div><div class="cover-empty" style="width: 26%"></div></div>
+	<td class="file high" data-value="src/components"><a href="src/components/index.html">src/components</a></td>
+	<td data-value="87.36" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 87%"></div><div class="cover-empty" style="width: 13%"></div></div>
 	</td>
-	<td data-value="74.73" class="pct medium">74.73%</td>
-	<td data-value="95" class="abs medium">71/95</td>
-	<td data-value="70.9" class="pct medium">70.9%</td>
-	<td data-value="55" class="abs medium">39/55</td>
-	<td data-value="57.14" class="pct medium">57.14%</td>
-	<td data-value="14" class="abs medium">8/14</td>
-	<td data-value="72.72" class="pct medium">72.72%</td>
-	<td data-value="88" class="abs medium">64/88</td>
+	<td data-value="87.36" class="pct high">87.36%</td>
+	<td data-value="95" class="abs high">83/95</td>
+	<td data-value="80.95" class="pct high">80.95%</td>
+	<td data-value="63" class="abs high">51/63</td>
+	<td data-value="85.71" class="pct high">85.71%</td>
+	<td data-value="14" class="abs high">12/14</td>
+	<td data-value="86.36" class="pct high">86.36%</td>
+	<td data-value="88" class="abs high">76/88</td>
 	</tr>
 
 <tr>
@@ -146,7 +146,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 2023-03-27T00:09:49.121Z
+                at 2023-03-30T13:17:37.839Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/packages/forms/coverage/lcov-report/src/components/Checkbox.tsx.html

@@ -211,13 +211,13 @@ export interface CheckboxProps extends React.ComponentProps<'input'> {}
  
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
 <span class="fstat-no" title="function not covered" >  (p</span>rops, ref) =&gt; {
-    const { className, children, ...newProps } = <span class="cstat-no" title="statement not covered" >props</span>
+    const { className, children, ...restProps } = <span class="cstat-no" title="statement not covered" >props</span>
     const ctx = <span class="cstat-no" title="statement not covered" >React.useContext(ControllerContext)</span>
 <span class="cstat-no" title="statement not covered" >    <span class="missing-if-branch" title="if path not taken" >I</span>if (ctx.isRequired) {</span>
-<span class="cstat-no" title="statement not covered" >      newProps.required = true</span>
+<span class="cstat-no" title="statement not covered" >      restProps.required = true</span>
     }
 <span class="cstat-no" title="statement not covered" >    <span class="missing-if-branch" title="if path not taken" >I</span>if (ctx.groupName) {</span>
-<span class="cstat-no" title="statement not covered" >      newProps.name = ctx.groupName</span>
+<span class="cstat-no" title="statement not covered" >      restProps.name = ctx.groupName</span>
     }
 &nbsp;
     const style = <span class="cstat-no" title="statement not covered" >`</span>
@@ -248,15 +248,15 @@ export const Checkbox = React.forwardRef&lt;HTMLInputElement, CheckboxProps&gt;(
     `
 &nbsp;
 <span class="cstat-no" title="statement not covered" >    return (</span>
-      &lt;label htmlFor={newProps.id} className={cx(style, className)}&gt;
-        &lt;div className="flex items-center"&gt;
+      &lt;label htmlFor={restProps.id} className={cx(style, className)}&gt;
+        &lt;span className="flex items-center"&gt;
           &lt;input
             className={styleInput}
             type="checkbox"
             aria-describedby={ctx.helperTextId}
             aria-errormessage={ctx.errorMessageId}
             aria-invalid={ctx.isInvalid ?? false}
-            {...newProps}
+            {...restProps}
             ref={ref}
           /&gt;
           &lt;span className={styleCheck}&gt;
@@ -268,7 +268,7 @@ export const Checkbox = React.forwardRef&lt;HTMLInputElement, CheckboxProps&gt;(
             &lt;/svg&gt;
           &lt;/span&gt;
           {children}
-        &lt;/div&gt;
+        &lt;/span&gt;
       &lt;/label&gt;
     )
   }
@@ -280,7 +280,7 @@ export const Checkbox = React.forwardRef&lt;HTMLInputElement, CheckboxProps&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 2023-03-27T00:09:49.121Z
+                at 2023-03-30T13:17:37.839Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/packages/forms/coverage/lcov-report/src/components/FieldsetControl.tsx.html

@@ -231,10 +231,10 @@ export const FieldsetControl = React.forwardRef<
     isRequired,
     direction,
     children,
-    ...newProps
+    ...restProps
   } = props
  
-  const groupName = newProps.name ?? `group-${id}`
+  const groupName = restProps.name ?? `group-${id}`
  
   const context = {
     groupName: groupName,
@@ -248,7 +248,7 @@ export const FieldsetControl = React.forwardRef<
  
   return (
     <ControllerContext.Provider value={context}>
-      <fieldset className={cx('mb-4', className)} ref={ref} {...newProps}>
+      <fieldset className={cx('mb-4', className)} ref={ref} {...restProps}>
         <legend>
           <p className={cx('block mb-2', isInvalid && 'text-sun-800')}>
             {labelText}
@@ -280,7 +280,7 @@ export const FieldsetControl = React.forwardRef<
             <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 2023-03-27T00:09:49.121Z
+                at 2023-03-30T13:17:37.839Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/packages/forms/coverage/lcov-report/src/components/LabelControl.tsx.html

@@ -32,7 +32,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>14/14</span>
+                <span class='fraction'>16/16</span>
             </div>
         
             
@@ -146,9 +146,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">17x</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>
@@ -156,19 +156,19 @@
 <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">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">17x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">17x</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">11x</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">17x</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>
@@ -204,7 +204,7 @@ import { cx } from '../utils'
 import { ControllerContext } from './context'
 &nbsp;
 export interface LabelControlProps
-  extends React.ComponentPropsWithoutRef&lt;'div'&gt; {
+  extends React.ComponentPropsWithoutRef&lt;'label'&gt; {
   labelText: string
   helperText?: string
   errorMessage?: string
@@ -212,61 +212,61 @@ export interface LabelControlProps
   isRequired?: boolean
 }
 &nbsp;
-export const LabelControl = React.forwardRef&lt;HTMLDivElement, LabelControlProps&gt;(
-  (props, ref) =&gt; {
-    const id = React.useId()
-    const {
-      labelText,
-      className,
-      helperText,
-      errorMessage,
-      isInvalid,
-      isRequired,
-      children,
-      ...newProps
-    } = props
+export const LabelControl = React.forwardRef&lt;
+  HTMLLabelElement,
+  LabelControlProps
+&gt;((props, ref) =&gt; {
+  const id = React.useId()
+  const {
+    labelText,
+    className,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isRequired,
+    children,
+    ...restProps
+  } = props
 &nbsp;
-    const context = {
-      helperTextId: `helper-text-${id}`,
-      errorMessageId: `error-message-${id}`,
-      isInvalid: isInvalid ?? false,
-      isRequired: isRequired ?? false
-    }
-&nbsp;
-    return (
-      &lt;ControllerContext.Provider value={context}&gt;
-        &lt;div className={cx('mb-4', className)} ref={ref} {...newProps}&gt;
-          &lt;label&gt;
-            &lt;p className={cx('block mb-2', isInvalid &amp;&amp; 'text-sun-800')}&gt;
-              {labelText}
-              {isRequired &amp;&amp; &lt;span className="text-sun-800"&gt;&amp;nbsp;*&lt;/span&gt;}
-            &lt;/p&gt;
-            {children}
-            {helperText &amp;&amp; (
-              &lt;p
-                id={context.helperTextId}
-                className="text-sm text-sumi-700 mt-2"
-              &gt;
-                {helperText}
-              &lt;/p&gt;
-            )}
-            {isInvalid &amp;&amp; (
-              &lt;p
-                id={context.errorMessageId}
-                className={cx(
-                  'text-sm text-sun-800',
-                  helperText ? 'mt-1' : 'mt-2'
-                )}
-              &gt;
-                {errorMessage}
-              &lt;/p&gt;
-            )}
-          &lt;/label&gt;
-        &lt;/div&gt;
-      &lt;/ControllerContext.Provider&gt;
-    )
+  const context = {
+    id: props.htmlFor ?? `input-${id}`,
+    helperTextId: `helper-text-${id}`,
+    errorMessageId: `error-message-${id}`,
+    isInvalid: isInvalid ?? false,
+    isRequired: isRequired ?? false
   }
-)
+&nbsp;
+  return (
+    &lt;ControllerContext.Provider value={context}&gt;
+      &lt;div className={cx('mb-4', className)}&gt;
+        &lt;label
+          className={cx('block mb-2', isInvalid &amp;&amp; 'text-sun-800')}
+          htmlFor={context.id}
+          ref={ref}
+          {...restProps}
+        &gt;
+          {labelText}
+          {isRequired &amp;&amp; &lt;span className="text-sun-800"&gt;&amp;nbsp;*&lt;/span&gt;}
+        &lt;/label&gt;
+        {children}
+&nbsp;
+        {helperText &amp;&amp; (
+          &lt;p id={context.helperTextId} className="text-sm text-sumi-700 mt-2"&gt;
+            {helperText}
+          &lt;/p&gt;
+        )}
+        {isInvalid &amp;&amp; (
+          &lt;p
+            id={context.errorMessageId}
+            className={cx('text-sm text-sun-800', helperText ? 'mt-1' : 'mt-2')}
+          &gt;
+            {errorMessage}
+          &lt;/p&gt;
+        )}
+      &lt;/div&gt;
+    &lt;/ControllerContext.Provider&gt;
+  )
+})
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -274,7 +274,7 @@ export const LabelControl = React.forwardRef&lt;HTMLDivElement, LabelControlProp
             <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 2023-03-27T00:09:49.121Z
+                at 2023-03-30T13:17:37.839Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/packages/forms/coverage/lcov-report/src/components/Radio.tsx.html

@@ -224,7 +224,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref
   `
   return (
     <label htmlFor={newProps.id} className={cx(style, className)}>
-      <div className="flex items-center">
+      <span className="flex items-center">
         <input
           className={styleInput}
           type="radio"
@@ -236,7 +236,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref
         />
         <span className={styleRadio}></span>
         {children}
-      </div>
+      </span>
     </label>
   )
 })
@@ -247,7 +247,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref
             <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 2023-03-27T00:09:49.121Z
+                at 2023-03-30T13:17:37.839Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/packages/forms/coverage/lcov-report/src/components/Select.tsx.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">36.36% </span>
+                <span class="strong">90.9% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>4/11</span>
+                <span class='fraction'>10/11</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">57.14% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/5</span>
+                <span class='fraction'>4/7</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/1</span>
+                <span class='fraction'>1/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">36.36% </span>
+                <span class="strong">90.9% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>4/11</span>
+                <span class='fraction'>10/11</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line low'></div>
+    <div class='status-line high'></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>
@@ -119,7 +119,9 @@
 <a name='L54'></a><a href='#L54'>54</a>
 <a name='L55'></a><a href='#L55'>55</a>
 <a name='L56'></a><a href='#L56'>56</a>
-<a name='L57'></a><a href='#L57'>57</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
+<a name='L57'></a><a href='#L57'>57</a>
+<a name='L58'></a><a href='#L58'>58</a>
+<a name='L59'></a><a href='#L59'>59</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -127,15 +129,15 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</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-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</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-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&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>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -149,7 +151,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-no">&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>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -182,16 +186,17 @@ import { ControllerContext } from './context'
 export interface SelectProps extends React.ComponentPropsWithoutRef&lt;'select'&gt; {}
 &nbsp;
 export const Select = React.forwardRef&lt;HTMLSelectElement, SelectProps&gt;(
-<span class="fstat-no" title="function not covered" >  (p</span>rops, ref) =&gt; {
-    const { className, children, ...newProps } = <span class="cstat-no" title="statement not covered" >props</span>
-    const ctx = <span class="cstat-no" title="statement not covered" >React.useContext(ControllerContext)</span>
-<span class="cstat-no" title="statement not covered" >    <span class="missing-if-branch" title="if path not taken" >I</span>if (ctx.isRequired) {</span>
-<span class="cstat-no" title="statement not covered" >      newProps.required = true</span>
+  (props, ref) =&gt; {
+    const { className, children, ...restProps } = props
+    const ctx = React.useContext(ControllerContext)
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (ctx.isRequired) {
+<span class="cstat-no" title="statement not covered" >      restProps.required = true</span>
     }
 &nbsp;
-    const invalidStyle = <span class="cstat-no" title="statement not covered" >ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'</span>
+    const invalidStyle = ctx.isInvalid ? <span class="branch-0 cbranch-no" title="branch not covered" >'border-sun-800' </span>: 'border-sumi-900'
 &nbsp;
-    const style = <span class="cstat-no" title="statement not covered" >`</span>
+    const style = `
+      cursor-pointer
       appearance-none
       text-base
       w-full
@@ -205,19 +210,20 @@ export const Select = React.forwardRef&lt;HTMLSelectElement, SelectProps&gt;(
       focus:outline-wood-500
     `
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    return (</span>
-      &lt;div className="inline-block relative"&gt;
+    return (
+      &lt;span className="inline-block relative"&gt;
         &lt;select
+          id={restProps.id ?? ctx.id}
           className={cx(style, invalidStyle, props.className)}
           aria-describedby={ctx.helperTextId}
           aria-errormessage={ctx.errorMessageId}
-          aria-invalid={ctx.isInvalid ?? false}
-          {...newProps}
+          aria-invalid={ctx.isInvalid ?? <span class="branch-1 cbranch-no" title="branch not covered" >false}</span>
+          {...restProps}
           ref={ref}
         &gt;
           {children}
         &lt;/select&gt;
-        &lt;div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2"&gt;
+        &lt;span className="flex items-center absolute inset-y-0 right-0 px-2 pointer-events-none"&gt;
           &lt;svg
             xmlns="http://www.w3.org/2000/svg"
             className="fill-sumi-900"
@@ -226,8 +232,8 @@ export const Select = React.forwardRef&lt;HTMLSelectElement, SelectProps&gt;(
           &gt;
             &lt;path d="M12 15.05 6.35 9.4 7.4 8.35l4.6 4.6 4.6-4.6 1.05 1.05Z" /&gt;
           &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
+        &lt;/span&gt;
+      &lt;/span&gt;
     )
   }
 )
@@ -238,7 +244,7 @@ export const Select = React.forwardRef&lt;HTMLSelectElement, SelectProps&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 2023-03-27T00:09:49.121Z
+                at 2023-03-30T13:17:37.839Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/packages/forms/coverage/lcov-report/src/components/Text.tsx.html

@@ -30,9 +30,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80% </span>
+                <span class="strong">85.71% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>4/5</span>
+                <span class='fraction'>6/7</span>
             </div>
         
             
@@ -107,7 +107,8 @@
 <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>
-<a name='L45'></a><a href='#L45'>45</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
+<a name='L45'></a><a href='#L45'>45</a>
+<a name='L46'></a><a href='#L46'>46</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -115,15 +116,15 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</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-yes">6x</span>
+<span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">8x</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>
@@ -138,7 +139,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-yes">6x</span>
+<span class="cline-any cline-yes">8x</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>
@@ -159,10 +161,10 @@ export interface TextProps extends React.ComponentPropsWithoutRef&lt;'input'&gt;
 &nbsp;
 export const Text = React.forwardRef&lt;HTMLInputElement, TextProps&gt;(
   (props, ref) =&gt; {
-    const { className, ...newProps } = props
+    const { className, ...restProps } = props
     const ctx = React.useContext(ControllerContext)
     if (ctx.isRequired) {
-      newProps.required = true
+      restProps.required = true
     }
 &nbsp;
     const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
@@ -185,11 +187,12 @@ export const Text = React.forwardRef&lt;HTMLInputElement, TextProps&gt;(
     return (
       &lt;input
         type="text"
+        id={restProps.id ?? ctx.id}
         className={cx(style, invalidStyle, className)}
         aria-describedby={ctx.helperTextId}
         aria-errormessage={ctx.errorMessageId}
         aria-invalid={ctx.isInvalid ?? <span class="branch-1 cbranch-no" title="branch not covered" >false}</span>
-        {...newProps}
+        {...restProps}
         ref={ref}
       /&gt;
     )
@@ -202,7 +205,7 @@ export const Text = React.forwardRef&lt;HTMLInputElement, TextProps&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 2023-03-27T00:09:49.121Z
+                at 2023-03-30T13:17:37.839Z
             </div>
         <script src="../../prettify.js"></script>
         <script>