@elliemae/pui-app-sdk 5.31.0 → 5.31.4

package/demo/docs/view-form-index-stories.ebbc665b.iframe.bundle.js

@@ -0,0 +1,373 @@
+(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[6220],{"./lib/view/fields/combo-box-v3/index.tsx":(f,d,t)=>{"use strict";t.d(d,{N:()=>m});var h=t("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),n=t.n(h),c=t("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),l=t.n(c),p=t("./node_modules/.pnpm/@elliemae+ds-form-combobox@3.56.4_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-combobox/dist/esm/ComboBox.js"),s=t("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),u=t("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),a=["name","defaultValue","rules","clearable","filteredOptions"],i=["onChange","value"],m=function(r){var e=r.name,o=r.defaultValue,_=o===void 0?null:o,b=r.rules,v=b===void 0?{}:b,S=r.clearable,x=S===void 0?!0:S,D=r.filteredOptions,P=D===void 0?null:D,O=l()(r,a);return n()(s.xI,{name:e,rules:v,defaultValue:_,render:function(g){var y=g.field,B=y.onChange,M=y.value,j=l()(y,i),E=g.fieldState.error;return(0,u.jsx)(p.NB,Object.assign({},j,O,{hasError:!!E,filteredOptions:P,selectedValues:M,onChange:B,isNonClearable:!x}))}})};m.displayName="ComboBoxV3"},"./lib/view/fields/date-time-picker/index.tsx":(f,d,t)=>{"use strict";t.d(d,{K:()=>r});var h=t("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),n=t.n(h),c=t("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),l=t.n(c),p=t("./node_modules/.pnpm/@elliemae+ds-form-date-time-picker@3.56.4_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-date-time-picker/dist/esm/ControlledDateTimePicker.js"),s=t("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),u=t("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),a=["name","defaultValue","rules","type"],i=["value","onChange"],m=function(e,o){return{"full-date-time":{dateTime:e,onDateTimeChange:o},"date-time-inputs":{dateTime:e,onDateTimeChange:o},"date-time-picker":{dateTime:e,onDateTimeChange:o},"date-time-picker-controller-only":{dateTime:e,onDateTimeChange:o},"date-inputs":{date:e,onDateChange:o},"date-picker":{date:e,onDateChange:o},"date-picker-controller-only":{date:e,onDateChange:o},"full-date":{date:e,onDateChange:o},"full-time":{time:e,onTimeChange:o},"time-inputs":{time:e,onTimeChange:o},"time-picker-controller-only":{time:e,onTimeChange:o},"time-picker":{time:e,onTimeChange:o}}},r=function(e){var o=e.name,_=e.defaultValue,b=_===void 0?"":_,v=e.rules,S=v===void 0?{}:v,x=e.type,D=x===void 0?"full-date-time":x,P=l()(e,a);return n()(s.xI,{name:o,defaultValue:b,rules:S,render:function(O){var g=O.field,y=g.value,B=g.onChange,M=l()(g,i),j=O.fieldState.error;return(0,u.jsx)(p.l,Object.assign({hasError:!!j},M,{type:D},m(y,B)[D],P))}})};r.displayName="DateTimePicker"},"./lib/view/fields/form-layout-block-item/index.tsx":(f,d,t)=>{"use strict";t.d(d,{B:()=>u});var h=t("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),n=t.n(h),c=t("./node_modules/.pnpm/@elliemae+ds-form-layout-blocks@3.56.4_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-blocks/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js"),l=t("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),p=t("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),s=["inputID","label"],u=function(a){var i=a.inputID,m=a.label,r=n()(a,s),e=(0,l.lN)({name:i}),o=e.errors,_=(0,l.Jt)(o,i),b=!!_,v=_?.message;return(0,p.jsx)(c.U,Object.assign({inputID:i,label:m,hasError:b,validationMessage:v},r))};u.displayName="FormLayoutBlockItem"},"./lib/view/fields/input-text/index.tsx":(f,d,t)=>{"use strict";t.d(d,{S:()=>i});var h=t("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),n=t.n(h),c=t("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),l=t.n(c),p=t("./node_modules/.pnpm/@elliemae+ds-form-input-text@3.56.4_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-input-text/dist/esm/DSInputText.js"),s=t("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),u=t("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),a=["name","defaultValue","rules"],i=function(m){var r=m.name,e=m.defaultValue,o=e===void 0?"":e,_=m.rules,b=_===void 0?{}:_,v=l()(m,a);return n()(s.xI,{name:r,defaultValue:o,rules:b,render:function(S){var x=S.field,D=S.fieldState.error;return(0,u.jsx)(p.B,Object.assign({hasError:!!D},x,v))}})};i.displayName="InputText"},"./lib/view/form/index.stories.tsx":(f,d,t)=>{"use strict";t.r(d),t.d(d,{WatchFormControls:()=>M,__namedExportsOrder:()=>j,default:()=>O});var h=t("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),n=t.n(h),c=t("./node_modules/.pnpm/styled-components@5.3.11_react-dom@18.3.1_react@18.3.1/node_modules/styled-components/dist/styled-components.browser.esm.js"),l=t("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),p=t("./node_modules/.pnpm/@elliemae+ds-grid@3.56.4_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),s=t("./lib/view/form/submit-button/index.tsx"),u=t("./lib/view/form/index.tsx"),a=t("./lib/view/form/personal-info-section.tsx"),i=t("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),m,r,e,o,_,b,v=`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import styled from 'styled-components';\\nimport { Meta, Story } from '@storybook/react';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { FormSubmitButton } from './submit-button/index.js';\\nimport { Form } from './index.js';\\nimport {\\n  FirstName,\\n  DOB,\\n  State,\\n  MaritalStatus,\\n} from './personal-info-section.js';\\n\\nconst StyledSection = styled.section\`\\n  margin-top: 10px;\\n  border-top: 2px blue dotted;\\n  width: 100%;\\n\`;\\n\\nconst Div = styled.div\`\\n  display: flex;\\n  flex-direction: column;\\n  padding-left: 10px;\\n  align-items: flex-start;\\n\`;\\n\\nconst btnProps = {\\n  children: 'Submit Application',\\n  size: 'l',\\n};\\n\\nexport default {\\n  title: 'Components/Form',\\n  component: Form,\\n} as Meta;\\n\\nconst StyledButton = styled(FormSubmitButton)\`\\n  margin-top: \${({ theme }) => theme.space.xs};\\n\`;\\n\\nconst WatchDashBoard = () => {\\n  const { watch } = useFormContext();\\n  const watchFirstName = watch('firstname', '') as string;\\n  const watchDOB = watch('dob', '') as string;\\n  const watchState = watch('state', '') as string;\\n  const watchMaritalStatus = watch('marital_status', '') as string;\\n\\n  return (\\n    <StyledSection>\\n      <h4>Form Data:</h4>\\n      <Div>\\n        <div>\\n          FirstName : <strong>{watchFirstName}</strong>\\n        </div>\\n        <div>\\n          DOB : <strong>{JSON.stringify(watchDOB)}</strong>\\n        </div>\\n        <div>\\n          State : <strong>{watchState}</strong>\\n        </div>\\n        <div>\\n          Marital Status : <strong>{watchMaritalStatus}</strong>\\n        </div>\\n      </Div>\\n    </StyledSection>\\n  );\\n};\\n\\n\\nconst Template: Story = () => (\\n  <Grid p=\\"m\\">\\n    <Form\\n      onSubmit={(data) => {\\n        \\n        console.log('form submitted with', data);\\n      }}\\n    >\\n      <FirstName />\\n      <DOB />\\n      <State />\\n      <MaritalStatus />\\n      <StyledButton {...btnProps} />\\n      <WatchDashBoard />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WatchFormControls = Template.bind({});\\nWatchFormControls.args = {};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"WatchFormControls":{"startLoc":{"col":24,"line":70},"endLoc":{"col":1,"line":86},"startBody":{"col":24,"line":70},"endBody":{"col":1,"line":86}}};
+    
+import styled from 'styled-components';
+import { Meta, Story } from '@storybook/react';
+import { useFormContext } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { FormSubmitButton } from './submit-button/index.js';
+import { Form } from './index.js';
+import {
+  FirstName,
+  DOB,
+  State,
+  MaritalStatus,
+} from './personal-info-section.js';
+
+const StyledSection = styled.section\`
+  margin-top: 10px;
+  border-top: 2px blue dotted;
+  width: 100%;
+\`;
+
+const Div = styled.div\`
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
+  align-items: flex-start;
+\`;
+
+const btnProps = {
+  children: 'Submit Application',
+  size: 'l',
+};
+
+export default {parameters: {"storySource":{"source":"import styled from 'styled-components';\\nimport { Meta, Story } from '@storybook/react';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { FormSubmitButton } from './submit-button/index.js';\\nimport { Form } from './index.js';\\nimport {\\n  FirstName,\\n  DOB,\\n  State,\\n  MaritalStatus,\\n} from './personal-info-section.js';\\n\\nconst StyledSection = styled.section\`\\n  margin-top: 10px;\\n  border-top: 2px blue dotted;\\n  width: 100%;\\n\`;\\n\\nconst Div = styled.div\`\\n  display: flex;\\n  flex-direction: column;\\n  padding-left: 10px;\\n  align-items: flex-start;\\n\`;\\n\\nconst btnProps = {\\n  children: 'Submit Application',\\n  size: 'l',\\n};\\n\\nexport default {\\n  title: 'Components/Form',\\n  component: Form,\\n} as Meta;\\n\\nconst StyledButton = styled(FormSubmitButton)\`\\n  margin-top: \${({ theme }) => theme.space.xs};\\n\`;\\n\\nconst WatchDashBoard = () => {\\n  const { watch } = useFormContext();\\n  const watchFirstName = watch('firstname', '') as string;\\n  const watchDOB = watch('dob', '') as string;\\n  const watchState = watch('state', '') as string;\\n  const watchMaritalStatus = watch('marital_status', '') as string;\\n\\n  return (\\n    <StyledSection>\\n      <h4>Form Data:</h4>\\n      <Div>\\n        <div>\\n          FirstName : <strong>{watchFirstName}</strong>\\n        </div>\\n        <div>\\n          DOB : <strong>{JSON.stringify(watchDOB)}</strong>\\n        </div>\\n        <div>\\n          State : <strong>{watchState}</strong>\\n        </div>\\n        <div>\\n          Marital Status : <strong>{watchMaritalStatus}</strong>\\n        </div>\\n      </Div>\\n    </StyledSection>\\n  );\\n};\\n\\n\\nconst Template: Story = () => (\\n  <Grid p=\\"m\\">\\n    <Form\\n      onSubmit={(data) => {\\n        \\n        console.log('form submitted with', data);\\n      }}\\n    >\\n      <FirstName />\\n      <DOB />\\n      <State />\\n      <MaritalStatus />\\n      <StyledButton {...btnProps} />\\n      <WatchDashBoard />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WatchFormControls = Template.bind({});\\nWatchFormControls.args = {};\\n","locationsMap":{"watch-form-controls":{"startLoc":{"col":24,"line":70},"endLoc":{"col":1,"line":86},"startBody":{"col":24,"line":70},"endBody":{"col":1,"line":86}}}},},
+  title: 'Components/Form',
+  component: Form,
+} as Meta;
+
+const StyledButton = styled(FormSubmitButton)\`
+  margin-top: \${({ theme }) => theme.space.xs};
+\`;
+
+const WatchDashBoard = () => {
+  const { watch } = useFormContext();
+  const watchFirstName = watch('firstname', '') as string;
+  const watchDOB = watch('dob', '') as string;
+  const watchState = watch('state', '') as string;
+  const watchMaritalStatus = watch('marital_status', '') as string;
+
+  return (
+    <StyledSection>
+      <h4>Form Data:</h4>
+      <Div>
+        <div>
+          FirstName : <strong>{watchFirstName}</strong>
+        </div>
+        <div>
+          DOB : <strong>{JSON.stringify(watchDOB)}</strong>
+        </div>
+        <div>
+          State : <strong>{watchState}</strong>
+        </div>
+        <div>
+          Marital Status : <strong>{watchMaritalStatus}</strong>
+        </div>
+      </Div>
+    </StyledSection>
+  );
+};
+
+
+const Template: Story = () => (
+  <Grid p="m">
+    <Form
+      onSubmit={(data) => {
+        
+        console.log('form submitted with', data);
+      }}
+    >
+      <FirstName />
+      <DOB />
+      <State />
+      <MaritalStatus />
+      <StyledButton {...btnProps} />
+      <WatchDashBoard />
+    </Form>
+  </Grid>
+);
+
+export const WatchFormControls = Template.bind({});
+WatchFormControls.args = {};
+`,S={WatchFormControls:{startLoc:{col:24,line:78},endLoc:{col:1,line:94},startBody:{col:24,line:78},endBody:{col:1,line:94}}},v=`import styled from 'styled-components';
+import { Meta, Story } from '@storybook/react';
+import { useFormContext } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { FormSubmitButton } from './submit-button/index.js';
+import { Form } from './index.js';
+import {
+  FirstName,
+  DOB,
+  State,
+  MaritalStatus,
+} from './personal-info-section.js';
+
+const StyledSection = styled.section\`
+  margin-top: 10px;
+  border-top: 2px blue dotted;
+  width: 100%;
+\`;
+
+const Div = styled.div\`
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
+  align-items: flex-start;
+\`;
+
+const btnProps = {
+  children: 'Submit Application',
+  size: 'l',
+};
+
+export default {
+  title: 'Components/Form',
+  component: Form,
+} as Meta;
+
+const StyledButton = styled(FormSubmitButton)\`
+  margin-top: \${({ theme }) => theme.space.xs};
+\`;
+
+const WatchDashBoard = () => {
+  const { watch } = useFormContext();
+  const watchFirstName = watch('firstname', '') as string;
+  const watchDOB = watch('dob', '') as string;
+  const watchState = watch('state', '') as string;
+  const watchMaritalStatus = watch('marital_status', '') as string;
+
+  return (
+    <StyledSection>
+      <h4>Form Data:</h4>
+      <Div>
+        <div>
+          FirstName : <strong>{watchFirstName}</strong>
+        </div>
+        <div>
+          DOB : <strong>{JSON.stringify(watchDOB)}</strong>
+        </div>
+        <div>
+          State : <strong>{watchState}</strong>
+        </div>
+        <div>
+          Marital Status : <strong>{watchMaritalStatus}</strong>
+        </div>
+      </Div>
+    </StyledSection>
+  );
+};
+
+
+const Template: Story = () => (
+  <Grid p="m">
+    <Form
+      onSubmit={(data) => {
+        
+        console.log('form submitted with', data);
+      }}
+    >
+      <FirstName />
+      <DOB />
+      <State />
+      <MaritalStatus />
+      <StyledButton {...btnProps} />
+      <WatchDashBoard />
+    </Form>
+  </Grid>
+);
+
+export const WatchFormControls = Template.bind({});
+WatchFormControls.args = {};
+`,S={WatchFormControls:{startLoc:{col:24,line:70},endLoc:{col:1,line:86},startBody:{col:24,line:70},endBody:{col:1,line:86}}},x=c.Ay.section.withConfig({componentId:"sc-1mzmcta-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),D=c.Ay.div.withConfig({componentId:"sc-1mzmcta-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),P={children:"Submit Application",size:"l"};const O={parameters:{storySource:{source:`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import styled from 'styled-components';\\nimport { Meta, Story } from '@storybook/react';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { FormSubmitButton } from './submit-button/index.js';\\nimport { Form } from './index.js';\\nimport {\\n  FirstName,\\n  DOB,\\n  State,\\n  MaritalStatus,\\n} from './personal-info-section.js';\\n\\nconst StyledSection = styled.section\`\\n  margin-top: 10px;\\n  border-top: 2px blue dotted;\\n  width: 100%;\\n\`;\\n\\nconst Div = styled.div\`\\n  display: flex;\\n  flex-direction: column;\\n  padding-left: 10px;\\n  align-items: flex-start;\\n\`;\\n\\nconst btnProps = {\\n  children: 'Submit Application',\\n  size: 'l',\\n};\\n\\nexport default {\\n  title: 'Components/Form',\\n  component: Form,\\n} as Meta;\\n\\nconst StyledButton = styled(FormSubmitButton)\`\\n  margin-top: \${({ theme }) => theme.space.xs};\\n\`;\\n\\nconst WatchDashBoard = () => {\\n  const { watch } = useFormContext();\\n  const watchFirstName = watch('firstname', '') as string;\\n  const watchDOB = watch('dob', '') as string;\\n  const watchState = watch('state', '') as string;\\n  const watchMaritalStatus = watch('marital_status', '') as string;\\n\\n  return (\\n    <StyledSection>\\n      <h4>Form Data:</h4>\\n      <Div>\\n        <div>\\n          FirstName : <strong>{watchFirstName}</strong>\\n        </div>\\n        <div>\\n          DOB : <strong>{JSON.stringify(watchDOB)}</strong>\\n        </div>\\n        <div>\\n          State : <strong>{watchState}</strong>\\n        </div>\\n        <div>\\n          Marital Status : <strong>{watchMaritalStatus}</strong>\\n        </div>\\n      </Div>\\n    </StyledSection>\\n  );\\n};\\n\\n\\nconst Template: Story = () => (\\n  <Grid p=\\"m\\">\\n    <Form\\n      onSubmit={(data) => {\\n        \\n        console.log('form submitted with', data);\\n      }}\\n    >\\n      <FirstName />\\n      <DOB />\\n      <State />\\n      <MaritalStatus />\\n      <StyledButton {...btnProps} />\\n      <WatchDashBoard />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WatchFormControls = Template.bind({});\\nWatchFormControls.args = {};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"WatchFormControls":{"startLoc":{"col":24,"line":70},"endLoc":{"col":1,"line":86},"startBody":{"col":24,"line":70},"endBody":{"col":1,"line":86}}};
+    
+import styled from 'styled-components';
+import { Meta, Story } from '@storybook/react';
+import { useFormContext } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { FormSubmitButton } from './submit-button/index.js';
+import { Form } from './index.js';
+import {
+  FirstName,
+  DOB,
+  State,
+  MaritalStatus,
+} from './personal-info-section.js';
+
+const StyledSection = styled.section\`
+  margin-top: 10px;
+  border-top: 2px blue dotted;
+  width: 100%;
+\`;
+
+const Div = styled.div\`
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
+  align-items: flex-start;
+\`;
+
+const btnProps = {
+  children: 'Submit Application',
+  size: 'l',
+};
+
+export default {parameters: {"storySource":{"source":"import styled from 'styled-components';\\nimport { Meta, Story } from '@storybook/react';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { FormSubmitButton } from './submit-button/index.js';\\nimport { Form } from './index.js';\\nimport {\\n  FirstName,\\n  DOB,\\n  State,\\n  MaritalStatus,\\n} from './personal-info-section.js';\\n\\nconst StyledSection = styled.section\`\\n  margin-top: 10px;\\n  border-top: 2px blue dotted;\\n  width: 100%;\\n\`;\\n\\nconst Div = styled.div\`\\n  display: flex;\\n  flex-direction: column;\\n  padding-left: 10px;\\n  align-items: flex-start;\\n\`;\\n\\nconst btnProps = {\\n  children: 'Submit Application',\\n  size: 'l',\\n};\\n\\nexport default {\\n  title: 'Components/Form',\\n  component: Form,\\n} as Meta;\\n\\nconst StyledButton = styled(FormSubmitButton)\`\\n  margin-top: \${({ theme }) => theme.space.xs};\\n\`;\\n\\nconst WatchDashBoard = () => {\\n  const { watch } = useFormContext();\\n  const watchFirstName = watch('firstname', '') as string;\\n  const watchDOB = watch('dob', '') as string;\\n  const watchState = watch('state', '') as string;\\n  const watchMaritalStatus = watch('marital_status', '') as string;\\n\\n  return (\\n    <StyledSection>\\n      <h4>Form Data:</h4>\\n      <Div>\\n        <div>\\n          FirstName : <strong>{watchFirstName}</strong>\\n        </div>\\n        <div>\\n          DOB : <strong>{JSON.stringify(watchDOB)}</strong>\\n        </div>\\n        <div>\\n          State : <strong>{watchState}</strong>\\n        </div>\\n        <div>\\n          Marital Status : <strong>{watchMaritalStatus}</strong>\\n        </div>\\n      </Div>\\n    </StyledSection>\\n  );\\n};\\n\\n\\nconst Template: Story = () => (\\n  <Grid p=\\"m\\">\\n    <Form\\n      onSubmit={(data) => {\\n        \\n        console.log('form submitted with', data);\\n      }}\\n    >\\n      <FirstName />\\n      <DOB />\\n      <State />\\n      <MaritalStatus />\\n      <StyledButton {...btnProps} />\\n      <WatchDashBoard />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WatchFormControls = Template.bind({});\\nWatchFormControls.args = {};\\n","locationsMap":{"watch-form-controls":{"startLoc":{"col":24,"line":70},"endLoc":{"col":1,"line":86},"startBody":{"col":24,"line":70},"endBody":{"col":1,"line":86}}}},},
+  title: 'Components/Form',
+  component: Form,
+} as Meta;
+
+const StyledButton = styled(FormSubmitButton)\`
+  margin-top: \${({ theme }) => theme.space.xs};
+\`;
+
+const WatchDashBoard = () => {
+  const { watch } = useFormContext();
+  const watchFirstName = watch('firstname', '') as string;
+  const watchDOB = watch('dob', '') as string;
+  const watchState = watch('state', '') as string;
+  const watchMaritalStatus = watch('marital_status', '') as string;
+
+  return (
+    <StyledSection>
+      <h4>Form Data:</h4>
+      <Div>
+        <div>
+          FirstName : <strong>{watchFirstName}</strong>
+        </div>
+        <div>
+          DOB : <strong>{JSON.stringify(watchDOB)}</strong>
+        </div>
+        <div>
+          State : <strong>{watchState}</strong>
+        </div>
+        <div>
+          Marital Status : <strong>{watchMaritalStatus}</strong>
+        </div>
+      </Div>
+    </StyledSection>
+  );
+};
+
+
+const Template: Story = () => (
+  <Grid p="m">
+    <Form
+      onSubmit={(data) => {
+        
+        console.log('form submitted with', data);
+      }}
+    >
+      <FirstName />
+      <DOB />
+      <State />
+      <MaritalStatus />
+      <StyledButton {...btnProps} />
+      <WatchDashBoard />
+    </Form>
+  </Grid>
+);
+
+export const WatchFormControls = Template.bind({});
+WatchFormControls.args = {};
+`,locationsMap:{"watch-form-controls":{startLoc:{col:24,line:78},endLoc:{col:1,line:94},startBody:{col:24,line:78},endBody:{col:1,line:94}}}},storySource:{source:`import styled from 'styled-components';
+import { Meta, Story } from '@storybook/react';
+import { useFormContext } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { FormSubmitButton } from './submit-button/index.js';
+import { Form } from './index.js';
+import {
+  FirstName,
+  DOB,
+  State,
+  MaritalStatus,
+} from './personal-info-section.js';
+
+const StyledSection = styled.section\`
+  margin-top: 10px;
+  border-top: 2px blue dotted;
+  width: 100%;
+\`;
+
+const Div = styled.div\`
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
+  align-items: flex-start;
+\`;
+
+const btnProps = {
+  children: 'Submit Application',
+  size: 'l',
+};
+
+export default {
+  title: 'Components/Form',
+  component: Form,
+} as Meta;
+
+const StyledButton = styled(FormSubmitButton)\`
+  margin-top: \${({ theme }) => theme.space.xs};
+\`;
+
+const WatchDashBoard = () => {
+  const { watch } = useFormContext();
+  const watchFirstName = watch('firstname', '') as string;
+  const watchDOB = watch('dob', '') as string;
+  const watchState = watch('state', '') as string;
+  const watchMaritalStatus = watch('marital_status', '') as string;
+
+  return (
+    <StyledSection>
+      <h4>Form Data:</h4>
+      <Div>
+        <div>
+          FirstName : <strong>{watchFirstName}</strong>
+        </div>
+        <div>
+          DOB : <strong>{JSON.stringify(watchDOB)}</strong>
+        </div>
+        <div>
+          State : <strong>{watchState}</strong>
+        </div>
+        <div>
+          Marital Status : <strong>{watchMaritalStatus}</strong>
+        </div>
+      </Div>
+    </StyledSection>
+  );
+};
+
+
+const Template: Story = () => (
+  <Grid p="m">
+    <Form
+      onSubmit={(data) => {
+        
+        console.log('form submitted with', data);
+      }}
+    >
+      <FirstName />
+      <DOB />
+      <State />
+      <MaritalStatus />
+      <StyledButton {...btnProps} />
+      <WatchDashBoard />
+    </Form>
+  </Grid>
+);
+
+export const WatchFormControls = Template.bind({});
+WatchFormControls.args = {};
+`,locationsMap:{"watch-form-controls":{startLoc:{col:24,line:70},endLoc:{col:1,line:86},startBody:{col:24,line:70},endBody:{col:1,line:86}}}}},title:"Components/Form",component:u.l};var g=(0,c.Ay)(s.J).withConfig({componentId:"sc-1mzmcta-2"})(["margin-top:",";"],function(E){var F=E.theme;return F.space.xs}),y=function(){var E=(0,l.xW)(),F=E.watch,C=F("firstname",""),w=F("dob",""),W=F("state",""),T=F("marital_status","");return n()(x,{},void 0,m||(m=n()("h4",{},void 0,"Form Data:")),n()(D,{},void 0,n()("div",{},void 0,"FirstName : ",n()("strong",{},void 0,C)),n()("div",{},void 0,"DOB : ",n()("strong",{},void 0,JSON.stringify(w))),n()("div",{},void 0,"State : ",n()("strong",{},void 0,W)),n()("div",{},void 0,"Marital Status : ",n()("strong",{},void 0,T))))};y.displayName="WatchDashBoard";var B=function(){return n()(p.Ay,{p:"m"},void 0,n()(u.l,{onSubmit:function(E){}},void 0,r||(r=n()(a.MK,{})),e||(e=n()(a.ks,{})),o||(o=n()(a.Uw,{})),_||(_=n()(a.j9,{})),(0,i.jsx)(g,Object.assign({},P)),b||(b=n()(y,{}))))};B.displayName="Template";var M=B.bind({});M.args={};var j=["WatchFormControls"]},"./lib/view/form/index.tsx":(f,d,t)=>{"use strict";t.d(d,{l:()=>p});var h=t("./node_modules/.pnpm/styled-components@5.3.11_react-dom@18.3.1_react@18.3.1/node_modules/styled-components/dist/styled-components.browser.esm.js"),n=t("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),c=t("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),l=h.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),p=function(s){var u=s.classname,a=s.reactHookFormProps,i=a===void 0?{mode:"onBlur"}:a,m=s.children,r=s.onSubmit,e=(0,n.mN)(i),o={};r&&(o.onSubmit=e.handleSubmit(r));var _=Object.assign(e,{formProps:i});return(0,c.jsx)(n.Op,Object.assign({},_,{children:(0,c.jsx)(l,Object.assign({className:u},o,{children:m}))}))};p.displayName="Form"},"./lib/view/form/personal-info-section.tsx":(f,d,t)=>{"use strict";t.d(d,{MK:()=>u,Uw:()=>i,j9:()=>m,ks:()=>a});var h=t("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),n=t.n(h),c=t("./lib/view/fields/input-text/index.tsx"),l=t("./lib/view/fields/combo-box-v3/index.tsx"),p=t("./lib/view/fields/date-time-picker/index.tsx"),s=t("./lib/view/fields/form-layout-block-item/index.tsx"),u=function(){return n()(s.B,{label:"First Name",inputID:"firstname",required:!0},void 0,n()(c.S,{id:"firstname",name:"firstname",rules:{required:{value:!0,message:"First Name is required"},minLength:{value:2,message:"Minimum 2 characters"},maxLength:{value:50,message:"Maximum 50 characters"}}}))};u.displayName="FirstName";var a=function(){return n()(s.B,{label:"Date of Birth",inputID:"dob",required:!0},void 0,n()(p.K,{id:"dob",name:"dob",type:"date-inputs",rules:{required:{value:!0,message:"Date of Birth is required"},validate:function(r){return r!=="12/25/1990"||"Date of Birth can not be 12/25/1990"}}}))};a.displayName="DOB";var i=function(){return n()(s.B,{label:"State",inputID:"state",required:!0},void 0,n()(l.N,{id:"state",name:"state",rules:{required:{value:!0,message:"State is required"}},allOptions:[{dsId:"1",type:"option",value:"--select--",label:"--Select--"},{dsId:"2",type:"option",value:"ca",label:"California"},{dsId:"3",type:"option",value:"nj",label:"New Jersey"}]}))};i.displayName="State";var m=function(){return n()(s.B,{label:"Marital Status",inputID:"marital_status",required:!0},void 0,n()(l.N,{id:"marital_status",name:"marital_status",rules:{required:{value:!0,message:"Marital Status is required"}},allOptions:[{dsId:"1",type:"option",value:"--select--",label:"--Select--"},{dsId:"2",type:"option",value:"married",label:"Married"},{dsId:"3",type:"option",value:"unmarried",label:"Unmarried"},{dsId:"4",type:"option",value:"separated",label:"Separated"}]}))};m.displayName="MaritalStatus"},"./lib/view/form/submit-button/index.tsx":(f,d,t)=>{"use strict";t.d(d,{J:()=>a});var h=t("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectDestructuringEmpty.js"),n=t.n(h),c=t("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/extends.js"),l=t.n(c),p=t("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),s=t("./node_modules/.pnpm/@elliemae+ds-legacy-button-v2@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-button-v2/dist/esm/DSButtonV2.js"),u=t("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),a=function(i){var m=l()({},(n()(i),i)),r=(0,p.xW)(),e=r.formState,o=r.formProps.mode;return(0,u.jsx)(s.e,Object.assign({},m,{type:"submit",disabled:o!=="onSubmit"&&(!e.isDirty||e.isDirty&&!e.isValid)}))};a.displayName="FormSubmitButton"},"./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectDestructuringEmpty.js":f=>{function d(t){if(t==null)throw new TypeError("Cannot destructure "+t)}f.exports=d,f.exports.__esModule=!0,f.exports.default=f.exports}}]);