@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204040305-3639454 → 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,7 +617,7 @@ The minimum number to accept for this input.
 
 [](./iframe.html?id=patterns-form-rules--min)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <ForwardedForm\>
   <IressFormField
@@ -666,7 +666,7 @@ The accepted regex pattern for the input.
 
 [](./iframe.html?id=patterns-form-rules--pattern)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <ForwardedForm\>
   <IressFormField
@@ -708,7 +708,7 @@ The minimum date to accept for this input.
 
 [](./iframe.html?id=patterns-form-rules--min-date)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 {
   ...Default,
@@ -749,7 +749,7 @@ The maximum date to accept for this input.
 
 [](./iframe.html?id=patterns-form-rules--max-date)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 {
   ...Default,
@@ -790,7 +790,7 @@ Ensures the input is a valid email address.
 
 [](./iframe.html?id=patterns-form-rules--email)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <ForwardedForm\>
   <IressFormField
@@ -840,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
@@ -902,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,
@@ -912,7 +912,7 @@ import {
   IressFormField,
   IressInput,
   IressButton,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { useState } from 'react';
 interface FieldValues {
   name?: string;
@@ -1028,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\>}
@@ -1109,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,
@@ -1121,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 {
@@ -1242,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;
@@ -1361,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,
@@ -1373,7 +1385,7 @@ import {
   IressInput,
   IressToasterProvider,
   useToaster,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { useRef } from 'react';
 interface FieldValues {
   name?: string;
@@ -1866,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,
@@ -1876,7 +1888,7 @@ import {
   IressButton,
   IressFormField,
   IressInput,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { useRef } from 'react';
 interface FieldValues {
   name?: string;
@@ -1960,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\>
@@ -2044,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;
@@ -2199,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;
 }