@elliemae/pui-app-sdk 5.31.0 → 5.31.4

package/demo/view-fields-autocomplete-advanced-autocomplete-stories.86694d7a.iframe.bundle.js

@@ -0,0 +1,669 @@
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[3071],{"./lib/view/fields/autocomplete/advanced-autocomplete.stories.tsx":(x,c,e)=>{e.r(c),e.d(c,{AdvancedAutocomplete:()=>A,__namedExportsOrder:()=>M,default:()=>C});var y=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(y),m=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),p=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),u=e("./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=e("./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"),f=e("./lib/view/form/index.tsx"),d=e("./lib/view/fields/form-layout-block-item/index.tsx"),a=e("./lib/view/fields/autocomplete/index.tsx"),r=e("./lib/view/fields/input-text/index.tsx"),i=e("./lib/view/fields/watch-value.tsx"),l=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),o,t,_=`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { useCallback } from 'react';\\nimport { Story, Meta } from '@storybook/react';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { Form } from '../../form/index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { Autocomplete, AutocompleteProps } from './index.js';\\nimport { InputText } from '../input-text/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/Autocomplete',\\n  component: Autocomplete,\\n} as Meta;\\n\\n// autocomplete \\"value\\" from dimsum officially accepts \\"strings\\",\\n//   if you need to support object,\\n//   you have to handle the map on your side\\nconst autocompleteMap = {\\n  '0': {\\n    City: 'Buffalo Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '1': {\\n    City: 'Summer Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '2': {\\n    City: 'Winter Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n} as const;\\n\\nconst Button = () => {\\n  const {\\n    formState: { isValid },\\n  } = useFormContext();\\n  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;\\n};\\nconst ZipCodeSearch = (args: AutocompleteProps) => {\\n  const { setValue } = useFormContext();\\n  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(\\n    (label) => {\\n      // find which option includes label in it's label\\n      const selectedOption = args.options.find(\\n        (option) => option.label === label,\\n      );\\n      if (selectedOption?.type === 'option' && selectedOption?.value) {\\n        const derivedData =\\n          autocompleteMap[\\n            selectedOption.value as unknown as keyof typeof autocompleteMap\\n          ];\\n        setValue('city', derivedData.City, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('county', derivedData.County, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('zipcode', derivedData.zipCode, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n      }\\n    },\\n    [args.options, setValue],\\n  );\\n  const onInputChangeHandler = useCallback<\\n    React.FormEventHandler<HTMLInputElement>\\n  >(\\n    (e) => {\\n      const { value } = e.target as HTMLInputElement;\\n      setValue('zipcode', value, {\\n        shouldValidate: true,\\n        shouldDirty: true,\\n        shouldTouch: true,\\n      });\\n    },\\n    [setValue],\\n  );\\n  return (\\n    <FormLayoutBlockItem inputID=\\"zipcode\\" label=\\"Zipcode\\" required>\\n      <Autocomplete\\n        options={args.options}\\n        onSelect={onSelectHandler}\\n        name={args.name}\\n      >\\n        <InputText\\n          autoComplete=\\"off\\"\\n          name={args.name}\\n          defaultValue=\\"12344\\"\\n          onChange={onInputChangeHandler}\\n          rules={{\\n            required: { value: true, message: 'This field is required' },\\n          }}\\n        />\\n      </Autocomplete>\\n    </FormLayoutBlockItem>\\n  );\\n};\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Form>\\n    <Grid p=\\"m\\" gutter=\\"xs\\">\\n      <Grid></Grid>\\n      <Grid>\\n        <ZipCodeSearch {...args} />\\n      </Grid>\\n      <Grid>\\n        <FormLayoutBlockItem inputID=\\"county\\" label=\\"county\\" required>\\n          <InputText\\n            name=\\"county\\"\\n            defaultValue=\\"county\\"\\n            rules={{\\n              required: { value: true, message: 'This field is required' },\\n            }}\\n          />\\n        </FormLayoutBlockItem>\\n      </Grid>\\n      <Grid>\\n        <Button />\\n      </Grid>\\n      <WatchValue label=\\"Zipcode\\" {...args} />\\n    </Grid>\\n  </Form>\\n);\\nexport const AdvancedAutocomplete = Template.bind({});\\nAdvancedAutocomplete.args = {\\n  name: 'zipcode',\\n  options: [\\n    {\\n      dsId: '0',\\n      label: 'Buffalo Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '0',\\n    },\\n    {\\n      dsId: '1',\\n      label: 'Summer Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '1',\\n    },\\n    {\\n      dsId: '2',\\n      label: 'Winter Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '2',\\n    },\\n  ],\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"AdvancedAutocomplete":{"startLoc":{"col":43,"line":115},"endLoc":{"col":1,"line":139},"startBody":{"col":43,"line":115},"endBody":{"col":1,"line":139}}};
+    
+import { useCallback } from 'react';
+import { Story, Meta } from '@storybook/react';
+import { useFormContext } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { Form } from '../../form/index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { Autocomplete, AutocompleteProps } from './index.js';
+import { InputText } from '../input-text/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {parameters: {"storySource":{"source":"import { useCallback } from 'react';\\nimport { Story, Meta } from '@storybook/react';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { Form } from '../../form/index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { Autocomplete, AutocompleteProps } from './index.js';\\nimport { InputText } from '../input-text/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/Autocomplete',\\n  component: Autocomplete,\\n} as Meta;\\n\\n// autocomplete \\"value\\" from dimsum officially accepts \\"strings\\",\\n//   if you need to support object,\\n//   you have to handle the map on your side\\nconst autocompleteMap = {\\n  '0': {\\n    City: 'Buffalo Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '1': {\\n    City: 'Summer Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '2': {\\n    City: 'Winter Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n} as const;\\n\\nconst Button = () => {\\n  const {\\n    formState: { isValid },\\n  } = useFormContext();\\n  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;\\n};\\nconst ZipCodeSearch = (args: AutocompleteProps) => {\\n  const { setValue } = useFormContext();\\n  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(\\n    (label) => {\\n      // find which option includes label in it's label\\n      const selectedOption = args.options.find(\\n        (option) => option.label === label,\\n      );\\n      if (selectedOption?.type === 'option' && selectedOption?.value) {\\n        const derivedData =\\n          autocompleteMap[\\n            selectedOption.value as unknown as keyof typeof autocompleteMap\\n          ];\\n        setValue('city', derivedData.City, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('county', derivedData.County, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('zipcode', derivedData.zipCode, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n      }\\n    },\\n    [args.options, setValue],\\n  );\\n  const onInputChangeHandler = useCallback<\\n    React.FormEventHandler<HTMLInputElement>\\n  >(\\n    (e) => {\\n      const { value } = e.target as HTMLInputElement;\\n      setValue('zipcode', value, {\\n        shouldValidate: true,\\n        shouldDirty: true,\\n        shouldTouch: true,\\n      });\\n    },\\n    [setValue],\\n  );\\n  return (\\n    <FormLayoutBlockItem inputID=\\"zipcode\\" label=\\"Zipcode\\" required>\\n      <Autocomplete\\n        options={args.options}\\n        onSelect={onSelectHandler}\\n        name={args.name}\\n      >\\n        <InputText\\n          autoComplete=\\"off\\"\\n          name={args.name}\\n          defaultValue=\\"12344\\"\\n          onChange={onInputChangeHandler}\\n          rules={{\\n            required: { value: true, message: 'This field is required' },\\n          }}\\n        />\\n      </Autocomplete>\\n    </FormLayoutBlockItem>\\n  );\\n};\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Form>\\n    <Grid p=\\"m\\" gutter=\\"xs\\">\\n      <Grid></Grid>\\n      <Grid>\\n        <ZipCodeSearch {...args} />\\n      </Grid>\\n      <Grid>\\n        <FormLayoutBlockItem inputID=\\"county\\" label=\\"county\\" required>\\n          <InputText\\n            name=\\"county\\"\\n            defaultValue=\\"county\\"\\n            rules={{\\n              required: { value: true, message: 'This field is required' },\\n            }}\\n          />\\n        </FormLayoutBlockItem>\\n      </Grid>\\n      <Grid>\\n        <Button />\\n      </Grid>\\n      <WatchValue label=\\"Zipcode\\" {...args} />\\n    </Grid>\\n  </Form>\\n);\\nexport const AdvancedAutocomplete = Template.bind({});\\nAdvancedAutocomplete.args = {\\n  name: 'zipcode',\\n  options: [\\n    {\\n      dsId: '0',\\n      label: 'Buffalo Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '0',\\n    },\\n    {\\n      dsId: '1',\\n      label: 'Summer Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '1',\\n    },\\n    {\\n      dsId: '2',\\n      label: 'Winter Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '2',\\n    },\\n  ],\\n};\\n","locationsMap":{"advanced-autocomplete":{"startLoc":{"col":43,"line":115},"endLoc":{"col":1,"line":139},"startBody":{"col":43,"line":115},"endBody":{"col":1,"line":139}}}},},
+  title: 'Components/Form/Controls/Autocomplete',
+  component: Autocomplete,
+} as Meta;
+
+// autocomplete "value" from dimsum officially accepts "strings",
+//   if you need to support object,
+//   you have to handle the map on your side
+const autocompleteMap = {
+  '0': {
+    City: 'Buffalo Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '1': {
+    City: 'Summer Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '2': {
+    City: 'Winter Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+} as const;
+
+const Button = () => {
+  const {
+    formState: { isValid },
+  } = useFormContext();
+  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;
+};
+const ZipCodeSearch = (args: AutocompleteProps) => {
+  const { setValue } = useFormContext();
+  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(
+    (label) => {
+      // find which option includes label in it's label
+      const selectedOption = args.options.find(
+        (option) => option.label === label,
+      );
+      if (selectedOption?.type === 'option' && selectedOption?.value) {
+        const derivedData =
+          autocompleteMap[
+            selectedOption.value as unknown as keyof typeof autocompleteMap
+          ];
+        setValue('city', derivedData.City, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('county', derivedData.County, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('zipcode', derivedData.zipCode, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+      }
+    },
+    [args.options, setValue],
+  );
+  const onInputChangeHandler = useCallback<
+    React.FormEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      const { value } = e.target as HTMLInputElement;
+      setValue('zipcode', value, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      });
+    },
+    [setValue],
+  );
+  return (
+    <FormLayoutBlockItem inputID="zipcode" label="Zipcode" required>
+      <Autocomplete
+        options={args.options}
+        onSelect={onSelectHandler}
+        name={args.name}
+      >
+        <InputText
+          autoComplete="off"
+          name={args.name}
+          defaultValue="12344"
+          onChange={onInputChangeHandler}
+          rules={{
+            required: { value: true, message: 'This field is required' },
+          }}
+        />
+      </Autocomplete>
+    </FormLayoutBlockItem>
+  );
+};
+const Template: Story<AutocompleteProps> = (args) => (
+  <Form>
+    <Grid p="m" gutter="xs">
+      <Grid></Grid>
+      <Grid>
+        <ZipCodeSearch {...args} />
+      </Grid>
+      <Grid>
+        <FormLayoutBlockItem inputID="county" label="county" required>
+          <InputText
+            name="county"
+            defaultValue="county"
+            rules={{
+              required: { value: true, message: 'This field is required' },
+            }}
+          />
+        </FormLayoutBlockItem>
+      </Grid>
+      <Grid>
+        <Button />
+      </Grid>
+      <WatchValue label="Zipcode" {...args} />
+    </Grid>
+  </Form>
+);
+export const AdvancedAutocomplete = Template.bind({});
+AdvancedAutocomplete.args = {
+  name: 'zipcode',
+  options: [
+    {
+      dsId: '0',
+      label: 'Buffalo Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '0',
+    },
+    {
+      dsId: '1',
+      label: 'Summer Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '1',
+    },
+    {
+      dsId: '2',
+      label: 'Winter Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '2',
+    },
+  ],
+};
+`,D={AdvancedAutocomplete:{startLoc:{col:43,line:123},endLoc:{col:1,line:147},startBody:{col:43,line:123},endBody:{col:1,line:147}}},_=`import { useCallback } from 'react';
+import { Story, Meta } from '@storybook/react';
+import { useFormContext } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { Form } from '../../form/index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { Autocomplete, AutocompleteProps } from './index.js';
+import { InputText } from '../input-text/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {
+  title: 'Components/Form/Controls/Autocomplete',
+  component: Autocomplete,
+} as Meta;
+
+// autocomplete "value" from dimsum officially accepts "strings",
+//   if you need to support object,
+//   you have to handle the map on your side
+const autocompleteMap = {
+  '0': {
+    City: 'Buffalo Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '1': {
+    City: 'Summer Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '2': {
+    City: 'Winter Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+} as const;
+
+const Button = () => {
+  const {
+    formState: { isValid },
+  } = useFormContext();
+  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;
+};
+const ZipCodeSearch = (args: AutocompleteProps) => {
+  const { setValue } = useFormContext();
+  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(
+    (label) => {
+      // find which option includes label in it's label
+      const selectedOption = args.options.find(
+        (option) => option.label === label,
+      );
+      if (selectedOption?.type === 'option' && selectedOption?.value) {
+        const derivedData =
+          autocompleteMap[
+            selectedOption.value as unknown as keyof typeof autocompleteMap
+          ];
+        setValue('city', derivedData.City, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('county', derivedData.County, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('zipcode', derivedData.zipCode, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+      }
+    },
+    [args.options, setValue],
+  );
+  const onInputChangeHandler = useCallback<
+    React.FormEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      const { value } = e.target as HTMLInputElement;
+      setValue('zipcode', value, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      });
+    },
+    [setValue],
+  );
+  return (
+    <FormLayoutBlockItem inputID="zipcode" label="Zipcode" required>
+      <Autocomplete
+        options={args.options}
+        onSelect={onSelectHandler}
+        name={args.name}
+      >
+        <InputText
+          autoComplete="off"
+          name={args.name}
+          defaultValue="12344"
+          onChange={onInputChangeHandler}
+          rules={{
+            required: { value: true, message: 'This field is required' },
+          }}
+        />
+      </Autocomplete>
+    </FormLayoutBlockItem>
+  );
+};
+const Template: Story<AutocompleteProps> = (args) => (
+  <Form>
+    <Grid p="m" gutter="xs">
+      <Grid></Grid>
+      <Grid>
+        <ZipCodeSearch {...args} />
+      </Grid>
+      <Grid>
+        <FormLayoutBlockItem inputID="county" label="county" required>
+          <InputText
+            name="county"
+            defaultValue="county"
+            rules={{
+              required: { value: true, message: 'This field is required' },
+            }}
+          />
+        </FormLayoutBlockItem>
+      </Grid>
+      <Grid>
+        <Button />
+      </Grid>
+      <WatchValue label="Zipcode" {...args} />
+    </Grid>
+  </Form>
+);
+export const AdvancedAutocomplete = Template.bind({});
+AdvancedAutocomplete.args = {
+  name: 'zipcode',
+  options: [
+    {
+      dsId: '0',
+      label: 'Buffalo Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '0',
+    },
+    {
+      dsId: '1',
+      label: 'Summer Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '1',
+    },
+    {
+      dsId: '2',
+      label: 'Winter Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '2',
+    },
+  ],
+};
+`,D={AdvancedAutocomplete:{startLoc:{col:43,line:115},endLoc:{col:1,line:139},startBody:{col:43,line:115},endBody:{col:1,line:139}}};const C={parameters:{storySource:{source:`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { useCallback } from 'react';\\nimport { Story, Meta } from '@storybook/react';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { Form } from '../../form/index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { Autocomplete, AutocompleteProps } from './index.js';\\nimport { InputText } from '../input-text/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/Autocomplete',\\n  component: Autocomplete,\\n} as Meta;\\n\\n// autocomplete \\"value\\" from dimsum officially accepts \\"strings\\",\\n//   if you need to support object,\\n//   you have to handle the map on your side\\nconst autocompleteMap = {\\n  '0': {\\n    City: 'Buffalo Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '1': {\\n    City: 'Summer Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '2': {\\n    City: 'Winter Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n} as const;\\n\\nconst Button = () => {\\n  const {\\n    formState: { isValid },\\n  } = useFormContext();\\n  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;\\n};\\nconst ZipCodeSearch = (args: AutocompleteProps) => {\\n  const { setValue } = useFormContext();\\n  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(\\n    (label) => {\\n      // find which option includes label in it's label\\n      const selectedOption = args.options.find(\\n        (option) => option.label === label,\\n      );\\n      if (selectedOption?.type === 'option' && selectedOption?.value) {\\n        const derivedData =\\n          autocompleteMap[\\n            selectedOption.value as unknown as keyof typeof autocompleteMap\\n          ];\\n        setValue('city', derivedData.City, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('county', derivedData.County, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('zipcode', derivedData.zipCode, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n      }\\n    },\\n    [args.options, setValue],\\n  );\\n  const onInputChangeHandler = useCallback<\\n    React.FormEventHandler<HTMLInputElement>\\n  >(\\n    (e) => {\\n      const { value } = e.target as HTMLInputElement;\\n      setValue('zipcode', value, {\\n        shouldValidate: true,\\n        shouldDirty: true,\\n        shouldTouch: true,\\n      });\\n    },\\n    [setValue],\\n  );\\n  return (\\n    <FormLayoutBlockItem inputID=\\"zipcode\\" label=\\"Zipcode\\" required>\\n      <Autocomplete\\n        options={args.options}\\n        onSelect={onSelectHandler}\\n        name={args.name}\\n      >\\n        <InputText\\n          autoComplete=\\"off\\"\\n          name={args.name}\\n          defaultValue=\\"12344\\"\\n          onChange={onInputChangeHandler}\\n          rules={{\\n            required: { value: true, message: 'This field is required' },\\n          }}\\n        />\\n      </Autocomplete>\\n    </FormLayoutBlockItem>\\n  );\\n};\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Form>\\n    <Grid p=\\"m\\" gutter=\\"xs\\">\\n      <Grid></Grid>\\n      <Grid>\\n        <ZipCodeSearch {...args} />\\n      </Grid>\\n      <Grid>\\n        <FormLayoutBlockItem inputID=\\"county\\" label=\\"county\\" required>\\n          <InputText\\n            name=\\"county\\"\\n            defaultValue=\\"county\\"\\n            rules={{\\n              required: { value: true, message: 'This field is required' },\\n            }}\\n          />\\n        </FormLayoutBlockItem>\\n      </Grid>\\n      <Grid>\\n        <Button />\\n      </Grid>\\n      <WatchValue label=\\"Zipcode\\" {...args} />\\n    </Grid>\\n  </Form>\\n);\\nexport const AdvancedAutocomplete = Template.bind({});\\nAdvancedAutocomplete.args = {\\n  name: 'zipcode',\\n  options: [\\n    {\\n      dsId: '0',\\n      label: 'Buffalo Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '0',\\n    },\\n    {\\n      dsId: '1',\\n      label: 'Summer Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '1',\\n    },\\n    {\\n      dsId: '2',\\n      label: 'Winter Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '2',\\n    },\\n  ],\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"AdvancedAutocomplete":{"startLoc":{"col":43,"line":115},"endLoc":{"col":1,"line":139},"startBody":{"col":43,"line":115},"endBody":{"col":1,"line":139}}};
+    
+import { useCallback } from 'react';
+import { Story, Meta } from '@storybook/react';
+import { useFormContext } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { Form } from '../../form/index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { Autocomplete, AutocompleteProps } from './index.js';
+import { InputText } from '../input-text/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {parameters: {"storySource":{"source":"import { useCallback } from 'react';\\nimport { Story, Meta } from '@storybook/react';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { Form } from '../../form/index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { Autocomplete, AutocompleteProps } from './index.js';\\nimport { InputText } from '../input-text/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/Autocomplete',\\n  component: Autocomplete,\\n} as Meta;\\n\\n// autocomplete \\"value\\" from dimsum officially accepts \\"strings\\",\\n//   if you need to support object,\\n//   you have to handle the map on your side\\nconst autocompleteMap = {\\n  '0': {\\n    City: 'Buffalo Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '1': {\\n    City: 'Summer Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '2': {\\n    City: 'Winter Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n} as const;\\n\\nconst Button = () => {\\n  const {\\n    formState: { isValid },\\n  } = useFormContext();\\n  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;\\n};\\nconst ZipCodeSearch = (args: AutocompleteProps) => {\\n  const { setValue } = useFormContext();\\n  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(\\n    (label) => {\\n      // find which option includes label in it's label\\n      const selectedOption = args.options.find(\\n        (option) => option.label === label,\\n      );\\n      if (selectedOption?.type === 'option' && selectedOption?.value) {\\n        const derivedData =\\n          autocompleteMap[\\n            selectedOption.value as unknown as keyof typeof autocompleteMap\\n          ];\\n        setValue('city', derivedData.City, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('county', derivedData.County, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('zipcode', derivedData.zipCode, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n      }\\n    },\\n    [args.options, setValue],\\n  );\\n  const onInputChangeHandler = useCallback<\\n    React.FormEventHandler<HTMLInputElement>\\n  >(\\n    (e) => {\\n      const { value } = e.target as HTMLInputElement;\\n      setValue('zipcode', value, {\\n        shouldValidate: true,\\n        shouldDirty: true,\\n        shouldTouch: true,\\n      });\\n    },\\n    [setValue],\\n  );\\n  return (\\n    <FormLayoutBlockItem inputID=\\"zipcode\\" label=\\"Zipcode\\" required>\\n      <Autocomplete\\n        options={args.options}\\n        onSelect={onSelectHandler}\\n        name={args.name}\\n      >\\n        <InputText\\n          autoComplete=\\"off\\"\\n          name={args.name}\\n          defaultValue=\\"12344\\"\\n          onChange={onInputChangeHandler}\\n          rules={{\\n            required: { value: true, message: 'This field is required' },\\n          }}\\n        />\\n      </Autocomplete>\\n    </FormLayoutBlockItem>\\n  );\\n};\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Form>\\n    <Grid p=\\"m\\" gutter=\\"xs\\">\\n      <Grid></Grid>\\n      <Grid>\\n        <ZipCodeSearch {...args} />\\n      </Grid>\\n      <Grid>\\n        <FormLayoutBlockItem inputID=\\"county\\" label=\\"county\\" required>\\n          <InputText\\n            name=\\"county\\"\\n            defaultValue=\\"county\\"\\n            rules={{\\n              required: { value: true, message: 'This field is required' },\\n            }}\\n          />\\n        </FormLayoutBlockItem>\\n      </Grid>\\n      <Grid>\\n        <Button />\\n      </Grid>\\n      <WatchValue label=\\"Zipcode\\" {...args} />\\n    </Grid>\\n  </Form>\\n);\\nexport const AdvancedAutocomplete = Template.bind({});\\nAdvancedAutocomplete.args = {\\n  name: 'zipcode',\\n  options: [\\n    {\\n      dsId: '0',\\n      label: 'Buffalo Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '0',\\n    },\\n    {\\n      dsId: '1',\\n      label: 'Summer Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '1',\\n    },\\n    {\\n      dsId: '2',\\n      label: 'Winter Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '2',\\n    },\\n  ],\\n};\\n","locationsMap":{"advanced-autocomplete":{"startLoc":{"col":43,"line":115},"endLoc":{"col":1,"line":139},"startBody":{"col":43,"line":115},"endBody":{"col":1,"line":139}}}},},
+  title: 'Components/Form/Controls/Autocomplete',
+  component: Autocomplete,
+} as Meta;
+
+// autocomplete "value" from dimsum officially accepts "strings",
+//   if you need to support object,
+//   you have to handle the map on your side
+const autocompleteMap = {
+  '0': {
+    City: 'Buffalo Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '1': {
+    City: 'Summer Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '2': {
+    City: 'Winter Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+} as const;
+
+const Button = () => {
+  const {
+    formState: { isValid },
+  } = useFormContext();
+  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;
+};
+const ZipCodeSearch = (args: AutocompleteProps) => {
+  const { setValue } = useFormContext();
+  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(
+    (label) => {
+      // find which option includes label in it's label
+      const selectedOption = args.options.find(
+        (option) => option.label === label,
+      );
+      if (selectedOption?.type === 'option' && selectedOption?.value) {
+        const derivedData =
+          autocompleteMap[
+            selectedOption.value as unknown as keyof typeof autocompleteMap
+          ];
+        setValue('city', derivedData.City, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('county', derivedData.County, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('zipcode', derivedData.zipCode, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+      }
+    },
+    [args.options, setValue],
+  );
+  const onInputChangeHandler = useCallback<
+    React.FormEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      const { value } = e.target as HTMLInputElement;
+      setValue('zipcode', value, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      });
+    },
+    [setValue],
+  );
+  return (
+    <FormLayoutBlockItem inputID="zipcode" label="Zipcode" required>
+      <Autocomplete
+        options={args.options}
+        onSelect={onSelectHandler}
+        name={args.name}
+      >
+        <InputText
+          autoComplete="off"
+          name={args.name}
+          defaultValue="12344"
+          onChange={onInputChangeHandler}
+          rules={{
+            required: { value: true, message: 'This field is required' },
+          }}
+        />
+      </Autocomplete>
+    </FormLayoutBlockItem>
+  );
+};
+const Template: Story<AutocompleteProps> = (args) => (
+  <Form>
+    <Grid p="m" gutter="xs">
+      <Grid></Grid>
+      <Grid>
+        <ZipCodeSearch {...args} />
+      </Grid>
+      <Grid>
+        <FormLayoutBlockItem inputID="county" label="county" required>
+          <InputText
+            name="county"
+            defaultValue="county"
+            rules={{
+              required: { value: true, message: 'This field is required' },
+            }}
+          />
+        </FormLayoutBlockItem>
+      </Grid>
+      <Grid>
+        <Button />
+      </Grid>
+      <WatchValue label="Zipcode" {...args} />
+    </Grid>
+  </Form>
+);
+export const AdvancedAutocomplete = Template.bind({});
+AdvancedAutocomplete.args = {
+  name: 'zipcode',
+  options: [
+    {
+      dsId: '0',
+      label: 'Buffalo Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '0',
+    },
+    {
+      dsId: '1',
+      label: 'Summer Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '1',
+    },
+    {
+      dsId: '2',
+      label: 'Winter Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '2',
+    },
+  ],
+};
+`,locationsMap:{"advanced-autocomplete":{startLoc:{col:43,line:123},endLoc:{col:1,line:147},startBody:{col:43,line:123},endBody:{col:1,line:147}}}},storySource:{source:`import { useCallback } from 'react';
+import { Story, Meta } from '@storybook/react';
+import { useFormContext } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { Form } from '../../form/index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { Autocomplete, AutocompleteProps } from './index.js';
+import { InputText } from '../input-text/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {
+  title: 'Components/Form/Controls/Autocomplete',
+  component: Autocomplete,
+} as Meta;
+
+// autocomplete "value" from dimsum officially accepts "strings",
+//   if you need to support object,
+//   you have to handle the map on your side
+const autocompleteMap = {
+  '0': {
+    City: 'Buffalo Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '1': {
+    City: 'Summer Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '2': {
+    City: 'Winter Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+} as const;
+
+const Button = () => {
+  const {
+    formState: { isValid },
+  } = useFormContext();
+  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;
+};
+const ZipCodeSearch = (args: AutocompleteProps) => {
+  const { setValue } = useFormContext();
+  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(
+    (label) => {
+      // find which option includes label in it's label
+      const selectedOption = args.options.find(
+        (option) => option.label === label,
+      );
+      if (selectedOption?.type === 'option' && selectedOption?.value) {
+        const derivedData =
+          autocompleteMap[
+            selectedOption.value as unknown as keyof typeof autocompleteMap
+          ];
+        setValue('city', derivedData.City, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('county', derivedData.County, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('zipcode', derivedData.zipCode, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+      }
+    },
+    [args.options, setValue],
+  );
+  const onInputChangeHandler = useCallback<
+    React.FormEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      const { value } = e.target as HTMLInputElement;
+      setValue('zipcode', value, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      });
+    },
+    [setValue],
+  );
+  return (
+    <FormLayoutBlockItem inputID="zipcode" label="Zipcode" required>
+      <Autocomplete
+        options={args.options}
+        onSelect={onSelectHandler}
+        name={args.name}
+      >
+        <InputText
+          autoComplete="off"
+          name={args.name}
+          defaultValue="12344"
+          onChange={onInputChangeHandler}
+          rules={{
+            required: { value: true, message: 'This field is required' },
+          }}
+        />
+      </Autocomplete>
+    </FormLayoutBlockItem>
+  );
+};
+const Template: Story<AutocompleteProps> = (args) => (
+  <Form>
+    <Grid p="m" gutter="xs">
+      <Grid></Grid>
+      <Grid>
+        <ZipCodeSearch {...args} />
+      </Grid>
+      <Grid>
+        <FormLayoutBlockItem inputID="county" label="county" required>
+          <InputText
+            name="county"
+            defaultValue="county"
+            rules={{
+              required: { value: true, message: 'This field is required' },
+            }}
+          />
+        </FormLayoutBlockItem>
+      </Grid>
+      <Grid>
+        <Button />
+      </Grid>
+      <WatchValue label="Zipcode" {...args} />
+    </Grid>
+  </Form>
+);
+export const AdvancedAutocomplete = Template.bind({});
+AdvancedAutocomplete.args = {
+  name: 'zipcode',
+  options: [
+    {
+      dsId: '0',
+      label: 'Buffalo Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '0',
+    },
+    {
+      dsId: '1',
+      label: 'Summer Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '1',
+    },
+    {
+      dsId: '2',
+      label: 'Winter Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '2',
+    },
+  ],
+};
+`,locationsMap:{"advanced-autocomplete":{startLoc:{col:43,line:115},endLoc:{col:1,line:139},startBody:{col:43,line:115},endBody:{col:1,line:139}}}}},title:"Components/Form/Controls/Autocomplete",component:a.j};var g={0:{City:"Buffalo Hill",County:"El Dorado",IsUserDefined:"false",State:"CA",zipCode:"12345"},1:{City:"Summer Hill",County:"El Dorado",IsUserDefined:"false",State:"CA",zipCode:"12345"},2:{City:"Winter Hill",County:"El Dorado",IsUserDefined:"false",State:"CA",zipCode:"12345"}},b=function(){var h=(0,p.xW)(),T=h.formState.isValid;return n()(s.e,{disabled:!T},void 0,"Submit")};b.displayName="Button";var I=function(h){var T=(0,p.xW)(),E=T.setValue,O=(0,m.useCallback)(function(B){var v=h.options.find(function(j){return j.label===B});if(v?.type==="option"&&v!==null&&v!==void 0&&v.value){var V=g[v.value];E("city",V.City,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0}),E("county",V.County,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0}),E("zipcode",V.zipCode,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0})}},[h.options,E]),P=(0,m.useCallback)(function(B){var v=B.target,V=v.value;E("zipcode",V,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0})},[E]);return n()(d.B,{inputID:"zipcode",label:"Zipcode",required:!0},void 0,n()(a.j,{options:h.options,onSelect:O,name:h.name},void 0,n()(r.S,{autoComplete:"off",name:h.name,defaultValue:"12344",onChange:P,rules:{required:{value:!0,message:"This field is required"}}})))};I.displayName="ZipCodeSearch";var S=function(h){return n()(f.l,{},void 0,n()(u.Ay,{p:"m",gutter:"xs"},void 0,o||(o=n()(u.Ay,{})),n()(u.Ay,{},void 0,(0,l.jsx)(I,Object.assign({},h))),n()(u.Ay,{},void 0,n()(d.B,{inputID:"county",label:"county",required:!0},void 0,n()(r.S,{name:"county",defaultValue:"county",rules:{required:{value:!0,message:"This field is required"}}}))),t||(t=n()(u.Ay,{},void 0,n()(b,{}))),(0,l.jsx)(i.n,Object.assign({label:"Zipcode"},h))))};S.displayName="Template";var A=S.bind({});A.args={name:"zipcode",options:[{dsId:"0",label:"Buffalo Hill, CA, El Dorado, 12345",type:"option",value:"0"},{dsId:"1",label:"Summer Hill, CA, El Dorado, 12345",type:"option",value:"1"},{dsId:"2",label:"Winter Hill, CA, El Dorado, 12345",type:"option",value:"2"}]};var M=["AdvancedAutocomplete"]},"./lib/view/fields/autocomplete/index.tsx":(x,c,e)=>{e.d(c,{j:()=>r});var y=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(y),m=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),p=e.n(m),u=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),s=e("./node_modules/.pnpm/@elliemae+ds-form-layout-autocomplete@3.56.4_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-autocomplete/dist/esm/Autocomplete.js"),f=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),d=["children"],a=function(i,l){if(!l)return i;var o=i.filter(function(t){return t.type==="section"||t.label.toLowerCase().includes(l?.toLowerCase())});return o.length===1&&o[0].type==="section"?[]:o},r=function(i){var l=i.children,o=p()(i,d),t=(0,f.xW)(),_=t.watch,D=t.setValue,C=_(o.name),g=(0,u.useCallback)(function(b){for(var I=arguments.length,S=new Array(I>1?I-1:0),A=1;A<I;A++)S[A-1]=arguments[A];o.onSelect?o.onSelect.apply(o,[b].concat(S)):D(o.name,b,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0})},[o,D]);return n()(s.A,{id:"",filter:C??"",onSelect:g,options:a(o.options,C)},void 0,l)};r.displayName="Autocomplete"},"./lib/view/fields/form-layout-block-item/index.tsx":(x,c,e)=>{e.d(c,{B:()=>f});var y=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),n=e.n(y),m=e("./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"),p=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),u=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),s=["inputID","label"],f=function(d){var a=d.inputID,r=d.label,i=n()(d,s),l=(0,p.lN)({name:a}),o=l.errors,t=(0,p.Jt)(o,a),_=!!t,D=t?.message;return(0,u.jsx)(m.U,Object.assign({inputID:a,label:r,hasError:_,validationMessage:D},i))};f.displayName="FormLayoutBlockItem"},"./lib/view/fields/input-text/index.tsx":(x,c,e)=>{e.d(c,{S:()=>a});var y=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(y),m=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),p=e.n(m),u=e("./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=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),f=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),d=["name","defaultValue","rules"],a=function(r){var i=r.name,l=r.defaultValue,o=l===void 0?"":l,t=r.rules,_=t===void 0?{}:t,D=p()(r,d);return n()(s.xI,{name:i,defaultValue:o,rules:_,render:function(C){var g=C.field,b=C.fieldState.error;return(0,f.jsx)(u.B,Object.assign({hasError:!!b},g,D))}})};a.displayName="InputText"},"./lib/view/fields/watch-value.tsx":(x,c,e)=>{e.d(c,{n:()=>a});var y=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(y),m=e("./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"),p=e("./node_modules/.pnpm/@elliemae+ds-grid@3.56.4_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),u=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),s,f=m.Ay.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),d=m.Ay.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),a=function(r){var i=r.name,l=r.label,o=(0,u.xW)(),t=o.watch,_=t(i,!1)||"";return n()(p.Ay,{},void 0,n()(f,{},void 0,s||(s=n()("h4",{},void 0,"Form Data:")),n()(d,{},void 0,n()("div",{},void 0,l," : ",n()("strong",{},void 0,JSON.stringify(_))))))};a.displayName="WatchValue"},"./lib/view/form/index.tsx":(x,c,e)=>{e.d(c,{l:()=>u});var y=e("./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=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),m=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),p=y.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),u=function(s){var f=s.classname,d=s.reactHookFormProps,a=d===void 0?{mode:"onBlur"}:d,r=s.children,i=s.onSubmit,l=(0,n.mN)(a),o={};i&&(o.onSubmit=l.handleSubmit(i));var t=Object.assign(l,{formProps:a});return(0,m.jsx)(n.Op,Object.assign({},t,{children:(0,m.jsx)(p,Object.assign({className:f},o,{children:r}))}))};u.displayName="Form"}}]);