@iress-oss/ids-mcp-server 6.0.0-alpha.2 → 6.0.0-alpha.3

package/generated/docs/components_patterns-form-docs.md

@@ -8,7 +8,7 @@ Use the `IressForm` component when you want to request, validate and process dat
 
 [](./iframe.html?id=patterns-form--simple)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <ForwardedForm
   actions\={<IressButton mode\="primary" type\="submit"\>Submit</IressButton\>}
@@ -106,7 +106,7 @@ New
 
 <table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { IressForm, IressField, IressInput, IressCheckboxGroup, IressCheckbox } from '@iress/components';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { IressForm, IressFormField, IressInput, IressCheckboxGroup, IressCheckbox } from '@iress-oss/ids-components';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">export const App = () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">const ConditionalFields = () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // We need to create our own state to manage the visibility of the fields, </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // Instead of creating our own state, we can now use the form state via the useWatch hook, </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // which means we have two sources of truth potentially making our code harder to maintain</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // meaning we still have a single source of truth</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const [show, setShow] = useState(['name']);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const show = IressForm.useWatch({ name: 'show'});</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  return (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">      &lt;IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    &lt;&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        &lt;IressField label="Show fields"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;IressCheckboxGroup value={show} onChange={(newValues) =&gt; setShow(newValues)}&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        label="Show fields" </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        name="show"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        render={(controlledProps) =&gt; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          &lt;IressCheckboxGroup {...controlledProps}&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">            &lt;IressCheckbox value="name"&gt;Name&lt;/IressCheckbox&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">            &lt;IressCheckbox value="email"&gt;Email&lt;/IressCheckbox&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">          &lt;/IressCheckboxGroup&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        {show.includes('name') &amp;&amp; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;IressField label="Name"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      {show?.includes('name') &amp;&amp; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">            &lt;IressInput name="name" /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          label="Name" </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          name="name"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        {show.includes('email') &amp;&amp; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          render={(controlledProps) =&gt; &lt;IressInput {...controlledProps} /&gt;}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;IressField label="Email"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">            &lt;IressInput name="email" type="email" /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      {show?.includes('email') &amp;&amp; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">      &lt;/IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          label="Email" </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          name="email"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          render={(controlledProps) =&gt; &lt;IressInput {...controlledProps} type="email" /&gt;}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">     &lt;/&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  );</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">};</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-10regm7-empty-line css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">export const App = () =&gt; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  &lt;IressForm defaultValues={{ show: ['name'] }}&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    &lt;ConditionalFields /&gt; </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  &lt;/IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">);</pre></td></tr></tbody></table>
 
-```
+Hide codedrawOpen in CodeSandbox
 
 {
   render: () \=> <DiffViewer allowModeChange oldValue\={\`import { IressForm, IressField, IressInput, IressCheckboxGroup, IressCheckbox } from '@iress/components';
@@ -171,7 +171,7 @@ New
 
 <table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { IressForm, IressField, IressInput, IressButton } from '@iress/components';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { IressForm, IressFormField, IressInput, IressButton } from '@iress-oss/ids-components';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">export const App = () =&gt; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  &lt;IressForm valueMissing="{{fieldName}} needs to be filled in!"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  &lt;IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    &lt;IressField label="Name"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">      &lt;IressInput name="name" required /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      label="Name"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      name="name"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    &lt;IressField label="Email"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      render={(controlledProps) =&gt; &lt;IressInput {...controlledProps} /&gt;}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">      &lt;IressInput name="email" maxLength={10} /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      rules={{ required: 'Name needs to be filled in!' }}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      label="Email"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      name="email"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      render={(controlledProps) =&gt; &lt;IressInput {...controlledProps} type="email" maxLength={10} /&gt;}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      rules={{ maxLength: 10 }}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    &lt;IressButton type="submit" mode="primary"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">      Sign up</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    &lt;/IressButton&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  &lt;/IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">);</pre></td></tr></tbody></table>
 
-```
+Hide codedrawOpen in CodeSandbox
 
 {
   render: () \=> <DiffViewer allowModeChange oldValue\={\`import { IressForm, IressField, IressInput, IressButton } from '@iress/components';
@@ -275,7 +275,7 @@ Here are some examples of how to use `IressFormField` with different form contro
 
 [](./iframe.html?id=patterns-form--fields)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <ForwardedForm
   actions\={<IressButton mode\="primary" type\="submit"\>Submit</IressButton\>}
@@ -422,7 +422,7 @@ A boolean which, if `true`, indicates that the input must have a value before th
 
 [](./iframe.html?id=patterns-form-rules--required)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <ForwardedForm\>
   <IressFormField
@@ -469,7 +469,7 @@ The maximum character length of the value to accept for this input.
 
 [](./iframe.html?id=patterns-form-rules--max-length)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <ForwardedForm\>
   <IressFormField
@@ -519,7 +519,7 @@ The minimum character length of the value to accept for this input.
 
 [](./iframe.html?id=patterns-form-rules--min-length)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <ForwardedForm\>
   <IressFormField
@@ -568,7 +568,7 @@ The maximum number to accept for this input.
 
 [](./iframe.html?id=patterns-form-rules--max)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <ForwardedForm\>
   <IressFormField
@@ -617,26 +617,36 @@ The minimum number to accept for this input.
 
 [](./iframe.html?id=patterns-form-rules--min)
 
-```
+Hide codedrawOpen in CodeSandbox
 
-{
-  ...Default,
-  args: {
-    element: 'IressInput',
-    field: {
-      hint: 'Select a minimum of 20'
-    },
-    rules: {
+<ForwardedForm\>
+  <IressFormField
+    hint\="Select a minimum of 20"
+    label\="Default message"
+    name\="IressInput-default"
+    render\={(controlledProps) \=> <IressInput {...controlledProps} />}
+    rules\={{
       min: 20
-    },
-    customRules: {
+    }}
+  />
+  <IressFormField
+    hint\="Select a minimum of 20"
+    label\="Custom message"
+    name\="IressInput-custom"
+    render\={(controlledProps) \=> <IressInput {...controlledProps} />}
+    rules\={{
       min: {
-        value: 20,
-        message: 'Please enter a min of 20!'
+        message: 'Please enter a min of 20!',
+        value: 20
       }
-    }
-  }
-}
+    }}
+  />
+  <IressButton
+    mode\="primary"
+    type\="submit"
+  \>
+    Validate  </IressButton\>
+</ForwardedForm\>
 
 ```
 
@@ -656,26 +666,31 @@ The accepted regex pattern for the input.
 
 [](./iframe.html?id=patterns-form-rules--pattern)
 
-```
+Hide codedrawOpen in CodeSandbox
 
-{
-  ...Default,
-  args: {
-    element: 'IressInput',
-    field: {
-      hint: 'Enter a valid email address'
-    },
-    rules: {
+<ForwardedForm\>
+  <IressFormField
+    hint\="Enter a valid email address"
+    label\="Default message"
+    name\="IressInput-default"
+    render\={(controlledProps) \=> <IressInput {...controlledProps} />}
+    rules\={{
       pattern: /^\[a-zA-Z0-9.!#$%&'\*+/=?^\_\`{|}~-\]+@\[a-zA-Z0-9\](?:\[a-zA-Z0-9-\]{0,61}\[a-zA-Z0-9\])?(?:\\.\[a-zA-Z0-9\](?:\[a-zA-Z0-9-\]{0,61}\[a-zA-Z0-9\])?)\*$/
-    },
-    customRules: {
+    }}
+  />
+  <IressFormField    hint="Enter a valid email address"    label="Custom message"    name="IressInput-custom"    render={(controlledProps) \=> <IressInput {...controlledProps} />}
+    rules={{
       pattern: {
-        value: /^\[a-zA-Z0-9.!#$%&'\*+/=?^\_\`{|}~-\]+@\[a-zA-Z0-9\](?:\[a-zA-Z0-9-\]{0,61}\[a-zA-Z0-9\])?(?:\\.\[a-zA-Z0-9\](?:\[a-zA-Z0-9-\]{0,61}\[a-zA-Z0-9\])?)\*$/,
-        message: 'Please enter a valid email address!'
+        message: 'Please enter a valid email address!',
+        value: /^\[a-zA-Z0-9.!#$%&'\*+/=?^\_\`{|}~-\]+@\[a-zA-Z0-9\](?:\[a-zA-Z0-9-\]{0,61}\[a-zA-Z0-9\])?(?:\\.\[a-zA-Z0-9\](?:\[a-zA-Z0-9-\]{0,61}\[a-zA-Z0-9\])?)\*$/
       }
-    }
-  }
-}
+    }}
+  />  <IressButton
+    mode\="primary"
+    type\="submit"
+  \>
+    Validate  </IressButton\>
+</ForwardedForm\>
 
 ```
 
@@ -693,7 +708,7 @@ The minimum date to accept for this input.
 
 [](./iframe.html?id=patterns-form-rules--min-date)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 {
   ...Default,
@@ -734,7 +749,7 @@ The maximum date to accept for this input.
 
 [](./iframe.html?id=patterns-form-rules--max-date)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 {
   ...Default,
@@ -775,7 +790,7 @@ Ensures the input is a valid email address.
 
 [](./iframe.html?id=patterns-form-rules--email)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <ForwardedForm\>
   <IressFormField
@@ -825,7 +840,7 @@ You can pass a callback function as the argument to validate, or you can pass an
 
 [](./iframe.html?id=patterns-form-rules--validate)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <ForwardedForm\>
   <IressFormFieldset
@@ -887,7 +902,7 @@ When the form passes validation (if not disabled), the `onSubmit` event is emitt
 
 [](./iframe.html?id=patterns-form--handling-submission)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressTable,
@@ -897,7 +912,7 @@ import {
   IressFormField,
   IressInput,
   IressButton,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { useState } from 'react';
 interface FieldValues {
   name?: string;
@@ -1013,7 +1028,7 @@ You can set the `defaultValues` prop to pre-fill the form values.
 
 [](./iframe.html?id=patterns-form--default-values)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <ForwardedForm
   actions\={<IressButton mode\="primary" type\="submit"\>Submit</IressButton\>}
@@ -1094,7 +1109,7 @@ One use case for this prop is to create your own visible error summary at the to
 
 [](./iframe.html?id=patterns-form--custom-error-handling)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressTable,
@@ -1106,7 +1121,7 @@ import {
   IressInput,
   IressButton,
   IressText,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { useState } from 'react';
 import { type FieldErrors } from 'react-hook-form';
 interface FieldValues {
@@ -1227,8 +1242,20 @@ Use cases where you may need the `values` prop:
 
 [](./iframe.html?id=patterns-form--values)
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import {
+  type IressFormProps,
+  IressForm,
+  IressModal,
+  IressDivider,
+  IressButton,
+  IressTable,
+  IressInline,
+  IressFormField,
+  IressInput,
+} from '@/main';
+import { useState } from 'react';
 interface FieldValues {
   name?: string;
   email?: string;
@@ -1346,7 +1373,7 @@ Here we have an example showcasing option one.
 
 [](./iframe.html?id=patterns-form--disable-validation)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   type FormRef,
@@ -1358,7 +1385,7 @@ import {
   IressInput,
   IressToasterProvider,
   useToaster,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { useRef } from 'react';
 interface FieldValues {
   name?: string;
@@ -1851,7 +1878,7 @@ You can reset the form using the `ref` of the form. You must provide a `defaultV
 
 [](./iframe.html?id=patterns-form--reset-form)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   type IressFormProps,
@@ -1861,7 +1888,7 @@ import {
   IressButton,
   IressFormField,
   IressInput,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { useRef } from 'react';
 interface FieldValues {
   name?: string;
@@ -1945,7 +1972,7 @@ You can pass the `readOnly` prop to remove the asterisk symbol (\*) even when th
 
 [](./iframe.html?id=patterns-form--exclude-read-only-validation)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <IressText\>
@@ -2029,8 +2056,20 @@ Some use cases:
 
 [](./iframe.html?id=patterns-form--hook-form)
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import {
+  IressButton,
+  IressCheckbox,
+  IressContainer,
+  IressDivider,
+  IressFormField,
+  IressHookForm,
+  IressInput,
+  IressInputCurrency,
+  IressPanel,
+  IressText,
+} from '@/main';
 interface FieldValues {
   firstName: string;
   lastName: string;
@@ -2184,7 +2223,7 @@ boolean
 
 [](./iframe.html?id=patterns-form--validation-summary)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <ForwardedForm
   actions\={<IressButton mode\="primary" type\="submit"\>Submit</IressButton\>}

package/generated/docs/components_patterns-form-recipes-docs.md

@@ -29,8 +29,24 @@ Email
 
 Submit
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressCol,
+  IressContainer,
+  IressDivider,
+  IressForm,
+  IressFormField,
+  IressInput,
+  IressModal,
+  IressRow,
+  IressStack,
+  IressTable,
+  IressText,
+} from '@/main';
+import { useState } from 'react';
+import { type FieldValues } from 'react-hook-form';
 export const WithReadonlyDataForm \= () \=> {
   const \[values, setValues\] \= useState<FieldValues\>({
     firstName: 'Leia',
@@ -161,8 +177,27 @@ Dependents
 
 Edit
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressCol,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressIcon,
+  IressInline,
+  IressInput,
+  IressRow,
+  IressSelect,
+  IressStack,
+  IressText,
+  IressToasterProvider,
+  useToaster,
+} from '@/main';
+import { useState } from 'react';
+import { type FieldValues } from 'react-hook-form';
+import { type FormControlValue } from '@/main';
 const Form \= () \=> {
   const dependentOptions \= \[
     { value: 0, label: '0' },
@@ -324,8 +359,16 @@ Here is an example showcasing a form using the native form constraints API to ac
 
 Sign up
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import {
+  IressInput,
+  IressButton,
+  IressField,
+  IressAlert,
+  type InputBaseElement,
+} from '@/main';
+import { useState } from 'react';
 export const NativeValidationForm \= () \=> {
   const \[formData, setFormData\] \= useState({
     name: '',
@@ -444,8 +487,23 @@ Save
 
 Submit main formSubmit all forms
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressDivider,
+  IressFieldGroup,
+  IressForm,
+  IressFormField,
+  IressFormValidationSummary,
+  IressInline,
+  IressInput,
+  IressModal,
+  IressPanel,
+  IressStack,
+  IressTable,
+} from '@/main';
+import { useState } from 'react';
 interface FormData {
   name: string;
 }
@@ -598,8 +656,23 @@ Add Dependant
 
 Submit All
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressDivider,
+  IressFieldGroup,
+  IressFormField,
+  IressInline,
+  IressInput,
+  IressPanel,
+  IressStack,
+  IressText,
+  IressIcon,
+  IressCloseButton,
+  IressHookForm,
+} from '@/main';
+import { type Control, type UseFormGetValues } from 'react-hook-form';
 interface Client {
   name: string | undefined;
   salary: number | undefined;
@@ -805,8 +878,17 @@ Sender
 
 Recipient
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressExpander,
+  IressForm,
+  IressFormField,
+  type IressFormProps,
+  IressInput,
+  IressStack,
+} from '@/main';
+import { useState } from 'react';
 interface FieldValues {
   name?: string;
   email?: string;
@@ -910,8 +992,17 @@ Email
 
 Submit
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressCheckbox,
+  IressCheckboxGroup,
+  IressForm,
+  IressFormField,
+  type IressFormProps,
+  IressInput,
+  IressText,
+} from '@/main';
 interface FieldValues {
   show?: string\[\];
   name?: string;
@@ -1020,8 +1111,16 @@ Visible Input
 
 Submit
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import {
+  IressButton,
+  IressForm,
+  IressFormField,
+  IressHookForm,
+  IressInput,
+  IressStack,
+} from '@/main';
 export const HiddenInputsForm \= () \=> {
   const form \= IressForm.useForm();
   const { register } \= form;
@@ -1108,8 +1207,22 @@ Submit
 
 * * *
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressStack,
+  IressRow,
+  IressCol,
+  IressFormField,
+  IressInputCurrency,
+  IressSelect,
+  IressButton,
+  IressText,
+  IressDivider,
+  IressForm,
+  IressHookForm,
+} from '@/main';
+import { useState } from 'react';
 interface FormData {
   primaryField: string;
   dependentField: string;
@@ -1282,10 +1395,22 @@ Upload
 
 Submit
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressForm,
+  IressInput,
+  IressFormField,
+  IressStack,
+  IressIcon,
+  IressText,
+  IressPanel,
+  IressInline,
+  type IressInputProps,
+} from '@/main';
 import React, { useState } from 'react';
-
+import { useDropzone } from 'react-dropzone';
 interface TranscriptFormValues {
   transcript: TranscriptData | string;
 }