@elliemae/pui-app-sdk 6.0.0-alpha.2 → 6.0.0-alpha.4

package/demo/docs/view-fields-autocomplete-index-stories.041a9ac8.iframe.bundle.js

@@ -0,0 +1,245 @@
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[8048],{"./lib/view/fields/autocomplete/index.tsx"(B,c,e){e.d(c,{j:()=>i});var v=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(v),d=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),_=e.n(d),b=e("./node_modules/.pnpm/core-js@3.49.0/node_modules/core-js/modules/es.array.includes.js"),s=e.n(b),u=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),m=e("./node_modules/.pnpm/@elliemae+ds-form-layout-autocomplete@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-autocomplete/dist/esm/Autocomplete.js"),a=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),l=["children"],p=function(r,t){if(!t)return r;var n=r.filter(function(f){return f.type==="section"||f.label.toLowerCase().includes(t?.toLowerCase())});return n.length===1&&n[0].type==="section"?[]:n},i=function(r){var t=r.children,n=_()(r,l),f=(0,a.xW)(),x=f.watch,h=f.setValue,y=x(n.name),O=(0,u.useCallback)(function(A){for(var P=arguments.length,g=new Array(P>1?P-1:0),I=1;I<P;I++)g[I-1]=arguments[I];n.onSelect?n.onSelect.apply(n,[A].concat(g)):h(n.name,A,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0})},[n,h]);return o()(m.A,{id:"",filter:y??"",onSelect:O,options:p(n.options,y)},void 0,t)};i.displayName="Autocomplete"},"./lib/view/fields/form-layout-block-item/index.tsx"(B,c,e){e.d(c,{B:()=>u});var v=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),o=e.n(v),d=e("./node_modules/.pnpm/@elliemae+ds-form-layout-blocks@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-blocks/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js"),_=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),b=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),s=["inputID","label"],u=function(m){var a=m.inputID,l=m.label,p=o()(m,s),i=(0,_.lN)({name:a}),r=i.errors,t=(0,_.Jt)(r,a),n=!!t,f=t?.message;return(0,b.jsx)(d.U,Object.assign({inputID:a,label:l,hasError:n,validationMessage:f},p))};u.displayName="FormLayoutBlockItem"},"./lib/view/fields/input-text/index.tsx"(B,c,e){e.d(c,{S:()=>a});var v=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(v),d=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),_=e.n(d),b=e("./node_modules/.pnpm/@elliemae+ds-form-input-text@3.57.10_@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.70.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"),m=["name","defaultValue","rules"],a=function(l){var p=l.name,i=l.defaultValue,r=i===void 0?"":i,t=l.rules,n=t===void 0?{}:t,f=_()(l,m);return o()(s.xI,{name:p,defaultValue:r,rules:n,render:function(x){var h=x.field,y=x.fieldState.error;return(0,u.jsx)(b.B,Object.assign({hasError:!!y},h,f))}})};a.displayName="InputText"},"./lib/view/fields/watch-value.tsx"(B,c,e){e.d(c,{n:()=>a});var v=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(v),d=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.cjs.js"),_=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),b=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),s,u=d.default.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),m=d.default.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),a=function(l){var p=l.name,i=l.label,r=(0,b.xW)(),t=r.watch,n=t(p,!1)||"";return o()(_.Ay,{},void 0,o()(u,{},void 0,s||(s=o()("h4",{},void 0,"Form Data:")),o()(m,{},void 0,o()("div",{},void 0,i," : ",o()("strong",{},void 0,JSON.stringify(n))))))};a.displayName="WatchValue"},"./lib/view/form/index.tsx"(B,c,e){e.d(c,{l:()=>b});var v=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.cjs.js"),o=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),d=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),_=v.default.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),b=function(s){var u=s.classname,m=s.reactHookFormProps,a=m===void 0?{mode:"onBlur"}:m,l=s.children,p=s.onSubmit,i=(0,o.mN)(a),r={};p&&(r.onSubmit=i.handleSubmit(p));var t=Object.assign(i,{formProps:a});return(0,d.jsx)(o.Op,Object.assign({},t,{children:(0,d.jsx)(_,Object.assign({className:u},r,{children:l}))}))};b.displayName="Form"},"./lib/view/fields/autocomplete/index.stories.tsx"(B,c,e){e.r(c),e.d(c,{Basic:()=>f,__namedExportsOrder:()=>x,default:()=>t});var v=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(v),d=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),_=e("./node_modules/.pnpm/@elliemae+ds-button-v2@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-button-v2/dist/esm/parts/DSButtonV2/DSButtonV2.js"),b=e("./lib/view/form/index.tsx"),s=e("./lib/view/fields/form-layout-block-item/index.tsx"),u=e("./lib/view/fields/autocomplete/index.tsx"),m=e("./lib/view/fields/input-text/index.tsx"),a=e("./lib/view/fields/watch-value.tsx"),l=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),p,i=`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\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\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"star_wars_character\\"\\n        label=\\"Favourite Star Wars character\\"\\n      >\\n        <Autocomplete name={args.name} options={args.options}>\\n          <InputText name={args.name} defaultValue={args.defaultValue} />\\n        </Autocomplete>\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Favourite Star Wars character\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  name: 'star_wars_character',\\n  defaultValue: 'Obi',\\n  options: [\\n    {\\n      dsId: '1',\\n      type: 'option',\\n      value: 'Luke Skywalker too long this text is super long',\\n      label: 'Luke Skywalker too long this text is super long',\\n    },\\n    {\\n      dsId: '2',\\n      type: 'option',\\n      value: 'Obi-Wan Kenobi',\\n      label: 'Obi-Wan Kenobi',\\n    },\\n    {\\n      dsId: '3',\\n      type: 'option',\\n      value: 'Padme Amidala',\\n      label: 'Padme Amidala',\\n    },\\n  ],\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":43,"line":15},"endLoc":{"col":1,"line":30},"startBody":{"col":43,"line":15},"endBody":{"col":1,"line":30}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+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 { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\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\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"star_wars_character\\"\\n        label=\\"Favourite Star Wars character\\"\\n      >\\n        <Autocomplete name={args.name} options={args.options}>\\n          <InputText name={args.name} defaultValue={args.defaultValue} />\\n        </Autocomplete>\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Favourite Star Wars character\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  name: 'star_wars_character',\\n  defaultValue: 'Obi',\\n  options: [\\n    {\\n      dsId: '1',\\n      type: 'option',\\n      value: 'Luke Skywalker too long this text is super long',\\n      label: 'Luke Skywalker too long this text is super long',\\n    },\\n    {\\n      dsId: '2',\\n      type: 'option',\\n      value: 'Obi-Wan Kenobi',\\n      label: 'Obi-Wan Kenobi',\\n    },\\n    {\\n      dsId: '3',\\n      type: 'option',\\n      value: 'Padme Amidala',\\n      label: 'Padme Amidala',\\n    },\\n  ],\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":43,"line":15},"endLoc":{"col":1,"line":30},"startBody":{"col":43,"line":15},"endBody":{"col":1,"line":30}}}},},
+  title: 'Components/Form/Controls/Autocomplete',
+  component: Autocomplete,
+} as Meta;
+
+const Template: Story<AutocompleteProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem
+        inputID="star_wars_character"
+        label="Favourite Star Wars character"
+      >
+        <Autocomplete name={args.name} options={args.options}>
+          <InputText name={args.name} defaultValue={args.defaultValue} />
+        </Autocomplete>
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Favourite Star Wars character" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  name: 'star_wars_character',
+  defaultValue: 'Obi',
+  options: [
+    {
+      dsId: '1',
+      type: 'option',
+      value: 'Luke Skywalker too long this text is super long',
+      label: 'Luke Skywalker too long this text is super long',
+    },
+    {
+      dsId: '2',
+      type: 'option',
+      value: 'Obi-Wan Kenobi',
+      label: 'Obi-Wan Kenobi',
+    },
+    {
+      dsId: '3',
+      type: 'option',
+      value: 'Padme Amidala',
+      label: 'Padme Amidala',
+    },
+  ],
+};
+`,r={Basic:{startLoc:{col:43,line:23},endLoc:{col:1,line:38},startBody:{col:43,line:23},endBody:{col:1,line:38}}},i=`import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+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;
+
+const Template: Story<AutocompleteProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem
+        inputID="star_wars_character"
+        label="Favourite Star Wars character"
+      >
+        <Autocomplete name={args.name} options={args.options}>
+          <InputText name={args.name} defaultValue={args.defaultValue} />
+        </Autocomplete>
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Favourite Star Wars character" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  name: 'star_wars_character',
+  defaultValue: 'Obi',
+  options: [
+    {
+      dsId: '1',
+      type: 'option',
+      value: 'Luke Skywalker too long this text is super long',
+      label: 'Luke Skywalker too long this text is super long',
+    },
+    {
+      dsId: '2',
+      type: 'option',
+      value: 'Obi-Wan Kenobi',
+      label: 'Obi-Wan Kenobi',
+    },
+    {
+      dsId: '3',
+      type: 'option',
+      value: 'Padme Amidala',
+      label: 'Padme Amidala',
+    },
+  ],
+};
+`,r={Basic:{startLoc:{col:43,line:15},endLoc:{col:1,line:30},startBody:{col:43,line:15},endBody:{col:1,line:30}}};const t={parameters:{storySource:{source:`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\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\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"star_wars_character\\"\\n        label=\\"Favourite Star Wars character\\"\\n      >\\n        <Autocomplete name={args.name} options={args.options}>\\n          <InputText name={args.name} defaultValue={args.defaultValue} />\\n        </Autocomplete>\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Favourite Star Wars character\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  name: 'star_wars_character',\\n  defaultValue: 'Obi',\\n  options: [\\n    {\\n      dsId: '1',\\n      type: 'option',\\n      value: 'Luke Skywalker too long this text is super long',\\n      label: 'Luke Skywalker too long this text is super long',\\n    },\\n    {\\n      dsId: '2',\\n      type: 'option',\\n      value: 'Obi-Wan Kenobi',\\n      label: 'Obi-Wan Kenobi',\\n    },\\n    {\\n      dsId: '3',\\n      type: 'option',\\n      value: 'Padme Amidala',\\n      label: 'Padme Amidala',\\n    },\\n  ],\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":43,"line":15},"endLoc":{"col":1,"line":30},"startBody":{"col":43,"line":15},"endBody":{"col":1,"line":30}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+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 { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\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\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem\\n        inputID=\\"star_wars_character\\"\\n        label=\\"Favourite Star Wars character\\"\\n      >\\n        <Autocomplete name={args.name} options={args.options}>\\n          <InputText name={args.name} defaultValue={args.defaultValue} />\\n        </Autocomplete>\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Favourite Star Wars character\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  name: 'star_wars_character',\\n  defaultValue: 'Obi',\\n  options: [\\n    {\\n      dsId: '1',\\n      type: 'option',\\n      value: 'Luke Skywalker too long this text is super long',\\n      label: 'Luke Skywalker too long this text is super long',\\n    },\\n    {\\n      dsId: '2',\\n      type: 'option',\\n      value: 'Obi-Wan Kenobi',\\n      label: 'Obi-Wan Kenobi',\\n    },\\n    {\\n      dsId: '3',\\n      type: 'option',\\n      value: 'Padme Amidala',\\n      label: 'Padme Amidala',\\n    },\\n  ],\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":43,"line":15},"endLoc":{"col":1,"line":30},"startBody":{"col":43,"line":15},"endBody":{"col":1,"line":30}}}},},
+  title: 'Components/Form/Controls/Autocomplete',
+  component: Autocomplete,
+} as Meta;
+
+const Template: Story<AutocompleteProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem
+        inputID="star_wars_character"
+        label="Favourite Star Wars character"
+      >
+        <Autocomplete name={args.name} options={args.options}>
+          <InputText name={args.name} defaultValue={args.defaultValue} />
+        </Autocomplete>
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Favourite Star Wars character" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  name: 'star_wars_character',
+  defaultValue: 'Obi',
+  options: [
+    {
+      dsId: '1',
+      type: 'option',
+      value: 'Luke Skywalker too long this text is super long',
+      label: 'Luke Skywalker too long this text is super long',
+    },
+    {
+      dsId: '2',
+      type: 'option',
+      value: 'Obi-Wan Kenobi',
+      label: 'Obi-Wan Kenobi',
+    },
+    {
+      dsId: '3',
+      type: 'option',
+      value: 'Padme Amidala',
+      label: 'Padme Amidala',
+    },
+  ],
+};
+`,locationsMap:{basic:{startLoc:{col:43,line:23},endLoc:{col:1,line:38},startBody:{col:43,line:23},endBody:{col:1,line:38}}}},storySource:{source:`import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+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;
+
+const Template: Story<AutocompleteProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem
+        inputID="star_wars_character"
+        label="Favourite Star Wars character"
+      >
+        <Autocomplete name={args.name} options={args.options}>
+          <InputText name={args.name} defaultValue={args.defaultValue} />
+        </Autocomplete>
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Favourite Star Wars character" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  name: 'star_wars_character',
+  defaultValue: 'Obi',
+  options: [
+    {
+      dsId: '1',
+      type: 'option',
+      value: 'Luke Skywalker too long this text is super long',
+      label: 'Luke Skywalker too long this text is super long',
+    },
+    {
+      dsId: '2',
+      type: 'option',
+      value: 'Obi-Wan Kenobi',
+      label: 'Obi-Wan Kenobi',
+    },
+    {
+      dsId: '3',
+      type: 'option',
+      value: 'Padme Amidala',
+      label: 'Padme Amidala',
+    },
+  ],
+};
+`,locationsMap:{basic:{startLoc:{col:43,line:15},endLoc:{col:1,line:30},startBody:{col:43,line:15},endBody:{col:1,line:30}}}}},title:"Components/Form/Controls/Autocomplete",component:u.j};var n=function(h){return o()(d.Ay,{p:"m"},void 0,o()(b.l,{},void 0,o()(s.B,{inputID:"star_wars_character",label:"Favourite Star Wars character"},void 0,o()(u.j,{name:h.name,options:h.options},void 0,o()(m.S,{name:h.name,defaultValue:h.defaultValue}))),p||(p=o()(_.e,{},void 0,"Submit")),(0,l.jsx)(a.n,Object.assign({label:"Favourite Star Wars character"},h))))};n.displayName="Template";var f=n.bind({});f.args={name:"star_wars_character",defaultValue:"Obi",options:[{dsId:"1",type:"option",value:"Luke Skywalker too long this text is super long",label:"Luke Skywalker too long this text is super long"},{dsId:"2",type:"option",value:"Obi-Wan Kenobi",label:"Obi-Wan Kenobi"},{dsId:"3",type:"option",value:"Padme Amidala",label:"Padme Amidala"}]};var x=["Basic"]}}]);

package/demo/docs/view-fields-check-box-index-stories.5d87b7de.iframe.bundle.js

@@ -0,0 +1,181 @@
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[2382],{"./lib/view/fields/check-box/index.tsx"(v,a,e){e.d(a,{o:()=>i});var d=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(d),n=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),s=e.n(n),m=e("./node_modules/.pnpm/@elliemae+ds-form-checkbox@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-checkbox/dist/esm/index.js"),r=e("./node_modules/.pnpm/react-hook-form@7.70.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"),_=["name","defaultValue","rules"],l=["value"],i=function(t){var c=t.name,u=t.defaultValue,p=t.rules,h=p===void 0?{}:p,C=s()(t,_);return o()(r.xI,{name:c,rules:h,defaultValue:u,render:function(B){var x=B.field,E=x.value,k=s()(x,l);return(0,f.jsx)(m.$W,Object.assign({},C,k,{checked:Boolean(E)}))}})};i.displayName="CheckBox"},"./lib/view/fields/connect-form.tsx"(v,a,e){e.d(a,{$:()=>o});var d=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),o=function(n){var s=n.children,m=(0,d.xW)();return s(Object.assign({},m))}},"./lib/view/fields/watch-value.tsx"(v,a,e){e.d(a,{n:()=>l});var d=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(d),n=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.cjs.js"),s=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),m=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),r,f=n.default.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),_=n.default.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),l=function(i){var t=i.name,c=i.label,u=(0,m.xW)(),p=u.watch,h=p(t,!1)||"";return o()(s.Ay,{},void 0,o()(f,{},void 0,r||(r=o()("h4",{},void 0,"Form Data:")),o()(_,{},void 0,o()("div",{},void 0,c," : ",o()("strong",{},void 0,JSON.stringify(h))))))};l.displayName="WatchValue"},"./lib/view/form/index.tsx"(v,a,e){e.d(a,{l:()=>m});var d=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.cjs.js"),o=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),n=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),s=d.default.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),m=function(r){var f=r.classname,_=r.reactHookFormProps,l=_===void 0?{mode:"onBlur"}:_,i=r.children,t=r.onSubmit,c=(0,o.mN)(l),u={};t&&(u.onSubmit=c.handleSubmit(t));var p=Object.assign(c,{formProps:l});return(0,n.jsx)(o.Op,Object.assign({},p,{children:(0,n.jsx)(s,Object.assign({className:f},u,{children:i}))}))};m.displayName="Form"},"./lib/view/fields/check-box/index.stories.tsx"(v,a,e){e.r(a),e.d(a,{Basic:()=>E,__namedExportsOrder:()=>k,default:()=>x});var d=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(d),n=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),s=e.n(n),m=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),r=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),f=e("./node_modules/.pnpm/@elliemae+ds-button-v2@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-button-v2/dist/esm/parts/DSButtonV2/DSButtonV2.js"),_=e("./lib/view/form/index.tsx"),l=e("./lib/view/fields/check-box/index.tsx"),i=e("./lib/view/fields/connect-form.tsx"),t=e("./lib/view/fields/watch-value.tsx"),c=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),u,p=["name"],h=`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { FieldError, get } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { Form } from '../../form/index.js';\\nimport { CheckBox, CheckBoxProps } from './index.js';\\nimport { ConnectForm } from '../connect-form.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nconst Template: Story<CheckBoxProps> = ({ name, ...rest }) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <div>\\n        <ConnectForm>\\n          {({ formState: { errors } }) => {\\n            const errField = get(errors, name) as FieldError;\\n            const hasError = !!errField;\\n            return <CheckBox name={name} {...rest} hasError={hasError} />;\\n          }}\\n        </ConnectForm>\\n      </div>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue name={name} {...rest} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport default {\\n  title: 'Components/Form/Controls/CheckBox',\\n  component: CheckBox,\\n} as Meta;\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'ackwnowledge',\\n  name: 'acknowledge',\\n  label: 'Acknowledge Electronic delivery of documents',\\n  rules: { required: { value: true, message: 'Please acknowledge' } },\\n  defaultValue: false,\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":39,"line":10},"endLoc":{"col":1,"line":26},"startBody":{"col":39,"line":10},"endBody":{"col":1,"line":26}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { FieldError, get } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { CheckBox, CheckBoxProps } from './index.js';
+import { ConnectForm } from '../connect-form.js';
+import { WatchValue } from '../watch-value.js';
+
+const Template: Story<CheckBoxProps> = ({ name, ...rest }) => (
+  <Grid p="m">
+    <Form>
+      <div>
+        <ConnectForm>
+          {({ formState: { errors } }) => {
+            const errField = get(errors, name) as FieldError;
+            const hasError = !!errField;
+            return <CheckBox name={name} {...rest} hasError={hasError} />;
+          }}
+        </ConnectForm>
+      </div>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue name={name} {...rest} />
+    </Form>
+  </Grid>
+);
+
+export default {parameters: {"storySource":{"source":"import { Story, Meta } from '@storybook/react';\\nimport { FieldError, get } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { Form } from '../../form/index.js';\\nimport { CheckBox, CheckBoxProps } from './index.js';\\nimport { ConnectForm } from '../connect-form.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nconst Template: Story<CheckBoxProps> = ({ name, ...rest }) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <div>\\n        <ConnectForm>\\n          {({ formState: { errors } }) => {\\n            const errField = get(errors, name) as FieldError;\\n            const hasError = !!errField;\\n            return <CheckBox name={name} {...rest} hasError={hasError} />;\\n          }}\\n        </ConnectForm>\\n      </div>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue name={name} {...rest} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport default {\\n  title: 'Components/Form/Controls/CheckBox',\\n  component: CheckBox,\\n} as Meta;\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'ackwnowledge',\\n  name: 'acknowledge',\\n  label: 'Acknowledge Electronic delivery of documents',\\n  rules: { required: { value: true, message: 'Please acknowledge' } },\\n  defaultValue: false,\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":39,"line":10},"endLoc":{"col":1,"line":26},"startBody":{"col":39,"line":10},"endBody":{"col":1,"line":26}}}},},
+  title: 'Components/Form/Controls/CheckBox',
+  component: CheckBox,
+} as Meta;
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'ackwnowledge',
+  name: 'acknowledge',
+  label: 'Acknowledge Electronic delivery of documents',
+  rules: { required: { value: true, message: 'Please acknowledge' } },
+  defaultValue: false,
+};
+`,C={Basic:{startLoc:{col:39,line:18},endLoc:{col:1,line:34},startBody:{col:39,line:18},endBody:{col:1,line:34}}},h=`import { Story, Meta } from '@storybook/react';
+import { FieldError, get } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { CheckBox, CheckBoxProps } from './index.js';
+import { ConnectForm } from '../connect-form.js';
+import { WatchValue } from '../watch-value.js';
+
+const Template: Story<CheckBoxProps> = ({ name, ...rest }) => (
+  <Grid p="m">
+    <Form>
+      <div>
+        <ConnectForm>
+          {({ formState: { errors } }) => {
+            const errField = get(errors, name) as FieldError;
+            const hasError = !!errField;
+            return <CheckBox name={name} {...rest} hasError={hasError} />;
+          }}
+        </ConnectForm>
+      </div>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue name={name} {...rest} />
+    </Form>
+  </Grid>
+);
+
+export default {
+  title: 'Components/Form/Controls/CheckBox',
+  component: CheckBox,
+} as Meta;
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'ackwnowledge',
+  name: 'acknowledge',
+  label: 'Acknowledge Electronic delivery of documents',
+  rules: { required: { value: true, message: 'Please acknowledge' } },
+  defaultValue: false,
+};
+`,C={Basic:{startLoc:{col:39,line:10},endLoc:{col:1,line:26},startBody:{col:39,line:10},endBody:{col:1,line:26}}},B=function(g){var b=g.name,F=s()(g,p);return o()(r.Ay,{p:"m"},void 0,o()(_.l,{},void 0,o()("div",{},void 0,o()(i.$,{},void 0,function(P){var j=P.formState.errors,D=(0,m.Jt)(j,b),M=!!D;return(0,c.jsx)(l.o,Object.assign({name:b},F,{hasError:M}))})),u||(u=o()(f.e,{},void 0,"Submit")),(0,c.jsx)(t.n,Object.assign({name:b},F))))};B.displayName="Template";const x={parameters:{storySource:{source:`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { FieldError, get } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { Form } from '../../form/index.js';\\nimport { CheckBox, CheckBoxProps } from './index.js';\\nimport { ConnectForm } from '../connect-form.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nconst Template: Story<CheckBoxProps> = ({ name, ...rest }) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <div>\\n        <ConnectForm>\\n          {({ formState: { errors } }) => {\\n            const errField = get(errors, name) as FieldError;\\n            const hasError = !!errField;\\n            return <CheckBox name={name} {...rest} hasError={hasError} />;\\n          }}\\n        </ConnectForm>\\n      </div>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue name={name} {...rest} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport default {\\n  title: 'Components/Form/Controls/CheckBox',\\n  component: CheckBox,\\n} as Meta;\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'ackwnowledge',\\n  name: 'acknowledge',\\n  label: 'Acknowledge Electronic delivery of documents',\\n  rules: { required: { value: true, message: 'Please acknowledge' } },\\n  defaultValue: false,\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":39,"line":10},"endLoc":{"col":1,"line":26},"startBody":{"col":39,"line":10},"endBody":{"col":1,"line":26}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { FieldError, get } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { CheckBox, CheckBoxProps } from './index.js';
+import { ConnectForm } from '../connect-form.js';
+import { WatchValue } from '../watch-value.js';
+
+const Template: Story<CheckBoxProps> = ({ name, ...rest }) => (
+  <Grid p="m">
+    <Form>
+      <div>
+        <ConnectForm>
+          {({ formState: { errors } }) => {
+            const errField = get(errors, name) as FieldError;
+            const hasError = !!errField;
+            return <CheckBox name={name} {...rest} hasError={hasError} />;
+          }}
+        </ConnectForm>
+      </div>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue name={name} {...rest} />
+    </Form>
+  </Grid>
+);
+
+export default {parameters: {"storySource":{"source":"import { Story, Meta } from '@storybook/react';\\nimport { FieldError, get } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { Form } from '../../form/index.js';\\nimport { CheckBox, CheckBoxProps } from './index.js';\\nimport { ConnectForm } from '../connect-form.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nconst Template: Story<CheckBoxProps> = ({ name, ...rest }) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <div>\\n        <ConnectForm>\\n          {({ formState: { errors } }) => {\\n            const errField = get(errors, name) as FieldError;\\n            const hasError = !!errField;\\n            return <CheckBox name={name} {...rest} hasError={hasError} />;\\n          }}\\n        </ConnectForm>\\n      </div>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue name={name} {...rest} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport default {\\n  title: 'Components/Form/Controls/CheckBox',\\n  component: CheckBox,\\n} as Meta;\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'ackwnowledge',\\n  name: 'acknowledge',\\n  label: 'Acknowledge Electronic delivery of documents',\\n  rules: { required: { value: true, message: 'Please acknowledge' } },\\n  defaultValue: false,\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":39,"line":10},"endLoc":{"col":1,"line":26},"startBody":{"col":39,"line":10},"endBody":{"col":1,"line":26}}}},},
+  title: 'Components/Form/Controls/CheckBox',
+  component: CheckBox,
+} as Meta;
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'ackwnowledge',
+  name: 'acknowledge',
+  label: 'Acknowledge Electronic delivery of documents',
+  rules: { required: { value: true, message: 'Please acknowledge' } },
+  defaultValue: false,
+};
+`,locationsMap:{basic:{startLoc:{col:39,line:18},endLoc:{col:1,line:34},startBody:{col:39,line:18},endBody:{col:1,line:34}}}},storySource:{source:`import { Story, Meta } from '@storybook/react';
+import { FieldError, get } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { CheckBox, CheckBoxProps } from './index.js';
+import { ConnectForm } from '../connect-form.js';
+import { WatchValue } from '../watch-value.js';
+
+const Template: Story<CheckBoxProps> = ({ name, ...rest }) => (
+  <Grid p="m">
+    <Form>
+      <div>
+        <ConnectForm>
+          {({ formState: { errors } }) => {
+            const errField = get(errors, name) as FieldError;
+            const hasError = !!errField;
+            return <CheckBox name={name} {...rest} hasError={hasError} />;
+          }}
+        </ConnectForm>
+      </div>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue name={name} {...rest} />
+    </Form>
+  </Grid>
+);
+
+export default {
+  title: 'Components/Form/Controls/CheckBox',
+  component: CheckBox,
+} as Meta;
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'ackwnowledge',
+  name: 'acknowledge',
+  label: 'Acknowledge Electronic delivery of documents',
+  rules: { required: { value: true, message: 'Please acknowledge' } },
+  defaultValue: false,
+};
+`,locationsMap:{basic:{startLoc:{col:39,line:10},endLoc:{col:1,line:26},startBody:{col:39,line:10},endBody:{col:1,line:26}}}}},title:"Components/Form/Controls/CheckBox",component:l.o};var E=B.bind({});E.args={id:"ackwnowledge",name:"acknowledge",label:"Acknowledge Electronic delivery of documents",rules:{required:{value:!0,message:"Please acknowledge"}},defaultValue:!1};var k=["Basic"]}}]);