npm - @iress-oss/ids-mcp-server - Versions diffs - 6.0.0-alpha.3 → 6.0.0-alpha.4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/generated/docs/components_components-checkboxgroup-recipes-docs.md CHANGED Viewed

@@ -46,11 +46,12 @@ import {
 } from '@/main';
 import { IressCheckboxGroup } from '../CheckboxGroup';
 import { toArray } from '../../../helpers/formatting/toArray';
+import { useWatch } from 'react-hook-form';
 interface FieldValues {
   'let-them-eat-cake'?: FormControlValue\[\];
 }
 const SelectedValues \= () \=> {
-  const value \= IressForm.useWatch<FieldValues\>({ name: 'let-them-eat-cake' });
+  const value \= useWatch<FieldValues\>({ name: 'let-them-eat-cake' });
   const valueString \= toArray(value).join(', ');
   return (
     <IressPanel\>

package/generated/docs/components_introduction-docs.md CHANGED Viewed

@@ -1,7 +1,7 @@
 Iress Design System
 ===================
-6.0.0-alpha.3
+6.0.0-alpha.4
 The Iress Design System (IDS) serves as a shared visual language, working code, design tools and resources, human interface guidelines, and a community. It supports designers and developers building digital products for both B2B (Financial Advisors, Paraplanners) and B2B2C (client customers) segments.

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

@@ -10,7 +10,7 @@ Use the `IressForm` component when you want to request, validate and process dat
 Hide codedrawOpen in CodeSandbox
-<ForwardedForm
+<IressForm
   actions\={<IressButton mode\="primary" type\="submit"\>Submit</IressButton\>}
   pattern\="short"
 \>
@@ -42,7 +42,7 @@ Hide codedrawOpen in CodeSandbox
       required: 'Email is required'
     }}
   />
-</ForwardedForm\>
+</IressForm\>
 ```
@@ -80,10 +80,19 @@ string
  | \- | short |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
+Installation
+------------
+As of version 6, `react-hook-form` has been moved to a peer dependency. You will need to install it alongside `@iress-oss/ids-components` in order to use the `IressForm` or `IressHookForm` component.
+yarn add @iress-oss/ids-components react-hook-form
+```
 Key concepts
 ------------
-As of version 5, `IressForm` is built on top of [React Hook Forms](https://react-hook-form.com/). This provides you the power of React Hook Forms with the convenience of IDS form components. However, there are some key differences to be aware of as it may affect how you build your forms.
+`IressForm` is built on top of [React Hook Forms](https://react-hook-form.com/). This provides you the power of React Hook Forms with the convenience of IDS form components. However, there are some key differences to be aware of as it may affect how you build your forms.
 ### State management
@@ -91,8 +100,8 @@ As of version 5, `IressForm` is built on top of [React Hook Forms](https://react
 Due to this change, there are a few things you should consider during development:
-*   Avoid using the `useState` hook to manage form state. Instead, use the `IressForm.useForm` hook or the `ref` of the `IressForm` component to interact with the form state. The initial value of the form can be set using the `defaultValues` prop, but from then on you should be using either the hook or ref to interact with the form state.
-*   Avoid using `onChange` handlers on form fields to react to form values. Instead, use the `IressForm.useWatch` hook to watch the value of a field and conditionally render fields based on the value of another field.
+*   Avoid using the `useState` hook to manage form state. Instead, use the `useFormContext()` hook from `react-hook-form` or the `ref` of the `IressForm` component to interact with the form state. The initial value of the form can be set using the `defaultValues` prop, but from then on you should be using either the hook or ref to interact with the form state.
+*   Avoid using `onChange` handlers on form fields to react to form values. Instead, use the `useWatch` hook from `react-hook-form` to watch the value of a field and conditionally render fields based on the value of another field.
 See below an example comparing a version 4 and version 5 `IressForm` when managing form state.
@@ -104,7 +113,7 @@ Old
 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>
+<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-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { useWatch } from 'react-hook-form';</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-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">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">  // 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">  // 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">  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">  // meaning we still have a single source of truth</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 = useWatch({ name: 'show'});</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
@@ -114,8 +123,9 @@ export const App = () => {
   // We need to create our own state to manage the visibility of the fields,  // which means we have two sources of truth potentially making our code harder to maintain  const \[show, setShow\] = useState(\['name'\]);
   return (      <IressForm>        <IressField label="Show fields">          <IressCheckboxGroup value={show} onChange={(newValues) => setShow(newValues)}>            <IressCheckbox value="name">Name</IressCheckbox>            <IressCheckbox value="email">Email</IressCheckbox>          </IressCheckboxGroup>        </IressField>        {show.includes('name') && (          <IressField label="Name">            <IressInput name="name" />          </IressField>        )}        {show.includes('email') && (          <IressField label="Email">            <IressInput name="email" type="email" />          </IressField>        )}      </IressForm>  );
 };\`} newValue\={\`import { IressForm, IressFormField, IressInput, IressCheckboxGroup, IressCheckbox } from '@iress-oss/ids-components';
+import { useWatch } from 'react-hook-form';
 const ConditionalFields = () => {
-  // Instead of creating our own state, we can now use the form state via the useWatch hook,  // meaning we still have a single source of truth  const show = IressForm.useWatch({ name: 'show'});
+  // Instead of creating our own state, we can now use the form state via the useWatch hook,  // meaning we still have a single source of truth  const show = useWatch({ name: 'show'});
   return (    <>      <IressFormField        label="Show fields"        name="show"        render={(controlledProps) => (          <IressCheckboxGroup {...controlledProps}>            <IressCheckbox value="name">Name</IressCheckbox>            <IressCheckbox value="email">Email</IressCheckbox>          </IressCheckboxGroup>        )}      />      {show?.includes('name') && (        <IressFormField          label="Name"          name="name"          render={(controlledProps) => <IressInput {...controlledProps} />}        />      )}      {show?.includes('email') && (        <IressFormField          label="Email"          name="email"          render={(controlledProps) => <IressInput {...controlledProps} type="email" />}        />      )}     </>  );
 };
 export const App = () => (
@@ -213,7 +223,7 @@ array
 For most scenarios, you should use the `onSubmit` event to sync the form data with other state management systems (eg. server, browser storage or state management libraries such as Redux). This event is emitted when the form passes validation, and contains a map of the field names and the data entered by the user.
-For more complex scenarios, you may need to sync a field value before the form is submitted. In this case, you can use the `IressForm.useWatch` hook to watch the value of a field and sync it with your state.
+For more complex scenarios, you may need to sync a field value before the form is submitted. In this case, you can use the `useWatch` hook to watch the value of a field and sync it with your state.
 Consider the following for your development:
@@ -277,7 +287,7 @@ Here are some examples of how to use `IressFormField` with different form contro
 Hide codedrawOpen in CodeSandbox
-<ForwardedForm
+<IressForm
   actions\={<IressButton mode\="primary" type\="submit"\>Submit</IressButton\>}
   heading\="All supported form fields"
   pattern\="long"
@@ -368,7 +378,7 @@ Hide codedrawOpen in CodeSandbox
       required: true
     }}
   />
-</ForwardedForm\>
+</IressForm\>
 ```
@@ -424,7 +434,7 @@ A boolean which, if `true`, indicates that the input must have a value before th
 Hide codedrawOpen in CodeSandbox
-<ForwardedForm\>
+<IressForm\>
   <IressFormField
     hint\=""
     label\="Default message"
@@ -448,7 +458,7 @@ Hide codedrawOpen in CodeSandbox
     type\="submit"
   \>
     Validate  </IressButton\>
-</ForwardedForm\>
+</IressForm\>
 ```
@@ -471,7 +481,7 @@ The maximum character length of the value to accept for this input.
 Hide codedrawOpen in CodeSandbox
-<ForwardedForm\>
+<IressForm\>
   <IressFormField
     hint\="Enter a maximum length of 5 characters"
     label\="Default message"
@@ -498,7 +508,7 @@ Hide codedrawOpen in CodeSandbox
     type\="submit"
   \>
     Validate  </IressButton\>
-</ForwardedForm\>
+</IressForm\>
 ```
@@ -521,7 +531,7 @@ The minimum character length of the value to accept for this input.
 Hide codedrawOpen in CodeSandbox
-<ForwardedForm\>
+<IressForm\>
   <IressFormField
     hint\="Enter a minimum length of 7 characters"
     label\="Default message"
@@ -548,7 +558,7 @@ Hide codedrawOpen in CodeSandbox
     type\="submit"
   \>
     Validate  </IressButton\>
-</ForwardedForm\>
+</IressForm\>
 ```
@@ -570,7 +580,7 @@ The maximum number to accept for this input.
 Hide codedrawOpen in CodeSandbox
-<ForwardedForm\>
+<IressForm\>
   <IressFormField
     hint\="Select a maximum of 2"
     label\="Default message"
@@ -597,7 +607,7 @@ Hide codedrawOpen in CodeSandbox
     type\="submit"
   \>
     Validate  </IressButton\>
-</ForwardedForm\>
+</IressForm\>
 ```
@@ -619,7 +629,7 @@ The minimum number to accept for this input.
 Hide codedrawOpen in CodeSandbox
-<ForwardedForm\>
+<IressForm\>
   <IressFormField
     hint\="Select a minimum of 20"
     label\="Default message"
@@ -646,7 +656,7 @@ Hide codedrawOpen in CodeSandbox
     type\="submit"
   \>
     Validate  </IressButton\>
-</ForwardedForm\>
+</IressForm\>
 ```
@@ -668,7 +678,7 @@ The accepted regex pattern for the input.
 Hide codedrawOpen in CodeSandbox
-<ForwardedForm\>
+<IressForm\>
   <IressFormField
     hint\="Enter a valid email address"
     label\="Default message"
@@ -690,7 +700,7 @@ Hide codedrawOpen in CodeSandbox
     type\="submit"
   \>
     Validate  </IressButton\>
-</ForwardedForm\>
+</IressForm\>
 ```
@@ -792,7 +802,7 @@ Ensures the input is a valid email address.
 Hide codedrawOpen in CodeSandbox
-<ForwardedForm\>
+<IressForm\>
   <IressFormField
     hint\="Enter an email address"
     label\="Default message"
@@ -816,7 +826,7 @@ Hide codedrawOpen in CodeSandbox
     type\="submit"
   \>
     Validate  </IressButton\>
-</ForwardedForm\>
+</IressForm\>
 ```
@@ -842,7 +852,7 @@ You can pass a callback function as the argument to validate, or you can pass an
 Hide codedrawOpen in CodeSandbox
-<ForwardedForm\>
+<IressForm\>
   <IressFormFieldset
     hint\="If checkbox, click two items to pass. Anything else, make sure it is Google."
     label\="Default message"
@@ -882,7 +892,7 @@ Hide codedrawOpen in CodeSandbox
     type\="submit"
   \>
     Validate  </IressButton\>
-</ForwardedForm\>
+</IressForm\>
 ```
@@ -1030,7 +1040,7 @@ You can set the `defaultValues` prop to pre-fill the form values.
 Hide codedrawOpen in CodeSandbox
-<ForwardedForm
+<IressForm
   actions\={<IressButton mode\="primary" type\="submit"\>Submit</IressButton\>}
   defaultValues\={{
     email: 'luke.skywalker@iress.com',
@@ -1066,7 +1076,7 @@ Hide codedrawOpen in CodeSandbox
       required: 'Email is required'
     }}
   />
-</ForwardedForm\>
+</IressForm\>
 ```
@@ -1981,7 +1991,7 @@ Hide codedrawOpen in CodeSandbox
     <p\>
       Try hitting submit to see that only email is being validated    </p\>
   </IressText\>
-  <ForwardedForm
+  <IressForm
     actions\={<IressButton mode\="primary" type\="submit"\>Submit</IressButton\>}
     pattern\="short"
   \>
@@ -2006,7 +2016,7 @@ Hide codedrawOpen in CodeSandbox
         required: 'Email is required'
       }}
     />
-  </ForwardedForm\>
+  </IressForm\>
 </IressStack\>
 ```
@@ -2070,6 +2080,7 @@ import {
   IressPanel,
   IressText,
 } from '@/main';
+import { useForm } from 'react-hook-form';
 interface FieldValues {
   firstName: string;
   lastName: string;
@@ -2080,8 +2091,9 @@ interface FieldValues {
 export const HookFormExample \= () \=> {
   const initialInsuredAtPolicyLevel \= false;
   const initialSumInsured \= 5000;
-  const form \= IressHookForm.useForm<FieldValues\>();
+  const form \= useForm<FieldValues\>();
   const { watch, control } \= form;
+  // eslint-disable-next-line react-hooks/incompatible-library
   const firstName \= watch('firstName');
   const lastName \= watch('lastName');
   const insuredAtPolicyLevel \= watch('insuredAtPolicyLevel');
@@ -2225,7 +2237,7 @@ boolean
 Hide codedrawOpen in CodeSandbox
-<ForwardedForm
+<IressForm
   actions\={<IressButton mode\="primary" type\="submit"\>Submit</IressButton\>}
   alert\={<IressFormValidationSummary />}
   heading\="Try hitting submit to see the validation summary"
@@ -2317,7 +2329,7 @@ Hide codedrawOpen in CodeSandbox
       required: true
     }}
   />
-</ForwardedForm\>
+</IressForm\>
 ```
@@ -2465,7 +2477,7 @@ When resetting fields that accept non-string values (like `IressRichSelect`), yo
 **Problem:**
-const { resetField } \= IressForm.useFormContext();
+const { resetField } \= useFormContext();
 resetField('rich-select', {
   label: '',
   value: '',
@@ -2477,17 +2489,9 @@ In this case, it will look like it cleared the field, but actually it has not. T
 **Solution:** Override the `onChange` handler to pass the actual value as a second parameter:
-const { resetField } \= IressForm.useFormContext();
+const { resetField } \= useFormContext();
 resetField('rich-select', null); // or undefined
 ```
 This will properly reset the field to null and clear the field value.
-### Conflicting versions of React Hook Forms
-If you are using React Hook Forms in your application, please ensure it is the same version IDS uses, otherwise there will be conflicts.
-The version we are using in IDS is:
-yarn add react-hook-form@7.55.0

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

@@ -672,7 +672,12 @@ import {
   IressCloseButton,
   IressHookForm,
 } from '@/main';
-import { type Control, type UseFormGetValues } from 'react-hook-form';
+import {
+  useFieldArray,
+  useForm,
+  type Control,
+  type UseFormGetValues,
+} from 'react-hook-form';
 interface Client {
   name: string | undefined;
   salary: number | undefined;
@@ -796,12 +801,12 @@ const DependantSection: React.FC<DependantProps\> \= ({
   );
 };
 export const FormGroups \= () \=> {
-  const form \= IressHookForm.useForm<FormValues\>({
+  const form \= useForm<FormValues\>({
     defaultValues: defaultValues,
     mode: 'onBlur',
   });
   const { control, getValues } \= form;
-  const { fields, append, update, remove } \= IressHookForm.useFieldArray({
+  const { fields, append, update, remove } \= useFieldArray({
     name: 'dependants',
     control,
   });
@@ -968,10 +973,10 @@ array
  | \- | Choose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
-Conditional fields (useWatch)
------------------------------
+Conditional fields (`useWatch`)
+-------------------------------
-When you have fields that are conditionally shown, you can use the `IressForm.useWatch` hook to watch the value of another field and conditionally render the field.
+When you have fields that are conditionally shown, you can use the `useWatch` hook to watch the value of another field and conditionally render the field.
 **Notes:**
@@ -982,7 +987,7 @@ When you have fields that are conditionally shown, you can use the `IressForm.us
 Conditional fields using `useWatch`
 -----------------------------------
-This example demonstrates how to use the `IressForm.useWatch()` hook to watch the value of a field and conditionally render other fields based on that value.
+This example demonstrates how to use the `useWatch()` hook to watch the value of a field and conditionally render other fields based on that value.
 \*RequiredSelect fields to show
@@ -1003,6 +1008,7 @@ import {
   IressInput,
   IressText,
 } from '@/main';
+import { useWatch } from 'react-hook-form';
 interface FieldValues {
   show?: string\[\];
   name?: string;
@@ -1011,15 +1017,14 @@ interface FieldValues {
 /\*\*
  \* Conditional fields need to be rendered in a sub-component, to allow it to use the \`useWatch\` \* hook to watch the value of the field dictating the display of conditional fields. \*/
 const FormSectionWithConditionalFields \= () \=> {
-  const show \= IressForm.useWatch<FieldValues\>({ name: 'show' });
+  const show \= useWatch<FieldValues\>({ name: 'show' });
   return (
     <IressText\>
       <h2\>
         Conditional fields using <code\>useWatch</code\>
       </h2\>
       <p\>
-        This example demonstrates how to use the{' '}
-        <code\>IressForm.useWatch()</code\> hook to watch the value of a field and        conditionally render other fields based on that value.      </p\>
+        This example demonstrates how to use the <code\>useWatch()</code\> hook to        watch the value of a field and conditionally render other fields based        on that value.      </p\>
       <IressFormField
         name\="show"
         label\="Select fields to show"
@@ -1115,14 +1120,14 @@ Hide codedrawOpen in CodeSandbox
 import {
   IressButton,
-  IressForm,
   IressFormField,
   IressHookForm,
   IressInput,
   IressStack,
 } from '@/main';
+import { useForm } from 'react-hook-form';
 export const HiddenInputsForm \= () \=> {
-  const form \= IressForm.useForm();
+  const form \= useForm();
   const { register } \= form;
   // This is a hidden input field that the user cannot see or interact with.
   // This is the recommended way to handle hidden inputs in Iress forms.
@@ -1219,10 +1224,10 @@ import {
   IressButton,
   IressText,
   IressDivider,
-  IressForm,
   IressHookForm,
 } from '@/main';
 import { useState } from 'react';
+import { useForm } from 'react-hook-form';
 interface FormData {
   primaryField: string;
   dependentField: string;
@@ -1255,7 +1260,7 @@ const validateBudgetInput \= (
 };
 export const ValidationDependOnOtherFields \= () \=> {
   const \[submitted, setSubmitted\] \= useState<FormData | undefined\>(undefined);
-  const form \= IressForm.useForm<FormData\>({
+  const form \= useForm<FormData\>({
     defaultValues: {
       primaryField: '',
       dependentField: '',

package/generated/docs/components_sandbox-docs.md CHANGED Viewed

@@ -1,226 +1,4 @@
-CodeSandbox was updated!
+Redirecting to CodeSandbox...
+-----------------------------
-Sandbox
-[Drafts](https://codesandbox.io/dashboard/drafts)
-/
-dank-haze-jls882
-A
-VS CodeShare
-Sign In
-index.html - nodebox - CodeSandbox
-*
-*
-*   1
-*
-*
-*
-*
-Explorer
---------
-*
-Drag a view here to display.
-### Sandbox Info
-### nodebox
-*
-*
-*
-*
-*
-index.html
-index.tsx
-package.json
-### Dependencies
-react
-latest
-[
-](https://www.npmjs.com/package/react)
-react-dom
-latest
-[
-](https://www.npmjs.com/package/react-dom)
-@iress-oss/ids-components
-alpha
-[
-](https://www.npmjs.com/package/@iress-oss/ids-components)
-### Outline
-*
-*
-*
-Show All Commands
-Ctrl+Shift+P
-Go to File
-Ctrl+P
-Find in Files
-Ctrl+Shift+F
-Toggle Full Screen
-F11
-Show Settings
-Ctrl+,
-index.html
-*
-*
-*
-*
-index.html
-html
-1
-2
-3
-4
-5
-6
-7
-8
-9
-<html\>
-  <head\>
-    <title\>Iress Design System</title\>
-  </head\>
-  <body\>
-    <div id\="root"\></div\>
-  </body\>
-</html\>
-Press desired key combination and then press ENTER.
-*
-*
-Show All Commands
-Ctrl+Shift+P
-Go to File
-Ctrl+P
-Find in Files
-Ctrl+Shift+F
-Toggle Full Screen
-F11
-Show Settings
-Ctrl+,
-Preview
-*
-*
-*
-[
-](https://jls882.csb.app/)
-*
-*
-Drag a view here to display.
-*
-Drag a view here to display.
-CodeSandbox - Sandbox (Web)
-0 0
-1
-Prettier
-Layout: us
-html
-LF
-UTF-8
-Spaces: 2
-Ln 1, Col 1
-Open preview
+[Click here to open CodeSandbox](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgC5xZKgDGA9qnjJUiBALYAOZATngAQBKMAhiR2BZl67AOQte_UQG4AOqgbM2XSXgAiAeQCy7QcLES-eALTphAehJQI1PDPmLWHYOwCSEuHAAKPVDCgANG4e3kIAbhCYLOwAvrpCIqIAAhAhxmSe5pFwxuRMFLZw9gr5ysmp8DkZcFnoOXnMfpQ16BBweObtAJ6wOCSexfLm5uzw1pSmbTwARrDGflgm4zDshvzGEoLwABbmFFBdxthKJg0FzfLkqO3sAIKMjOwAvOwAFACUzwB87MDy7KsYHgAK4sVDsAA87kqPj8UHY0wA5k9ZCAeFA8KivtDPOw1PAIIjwQBlLrtGAiWH-CHmHHeXz-L5yVAxZnybhGTRaPqGKicMhkPCvMwkYH0Ww4RFAgCisHFlAAQl1XOhXuIBXZ3gBCd44CQYGAsV7_SEc_g4Yl4FgQfhaMiYL4mgFQkJecKRQ2O8EAn0Q-6Pcxen2Q2mu91RIMhs14C1Wm14O0OgLyd7MkABOhwBVoHgsLpIMDouAwGIZtCYXDbPD0KDEEBXKg0RAgCFVmuR1u8dCR514CB4WDYkJ4glE9ik8n0Gl9gcwDvmbZdjvTe1dHuQ1phdiRFEgISCrE0zfzlfoNfyGltqBe9OZ7OoXP5xCFqDF0sgRh8ADWPClOAAVnAFB1g2ti0H83qopgjDUJgqAkDYcCoogvxOuwqJrJiSDoSAUA8FQ7Sosm3oAhhqimMIyE4XhBFYcRwaoikaTVLU9TCI0hRUai6KMNsPCoiaMTyDEt5tPej4FkWJYxDEQA).

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@iress-oss/ids-mcp-server",
-  "version": "6.0.0-alpha.3",
+  "version": "6.0.0-alpha.4",
   "description": "Model Context Protocol (MCP) server for Iress Design System (IDS) component library - provides AI assistants with contextual information about IDS components, design tokens, and usage patterns",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,19 +45,18 @@
     "@types/minimist": "1.2.5",
     "@types/node": "^24.10.1",
     "@types/turndown": "5.0.6",
-    "@vitest/coverage-v8": "4.0.10",
+    "@vitest/coverage-v8": "4.0.13",
     "minimist": "1.2.8",
     "playwright": "1.56.1",
-    "rimraf": "6.1.0",
+    "rimraf": "6.1.2",
     "tsx": "4.20.6",
     "turndown": "7.2.2",
     "turndown-plugin-gfm": "1.0.2",
     "typescript": "5.9.3",
-    "vitest": "4.0.10"
+    "vitest": "4.0.13"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/iress/design-system"
-  },
-  "stableVersion": "6.0.0-alpha.2"
+  }
 }