"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[77],{"./lib/view/fields/date-range-picker/index.stories.tsx":(k,c,e)=>{e.r(c),e.d(c,{Basic:()=>M,__namedExportsOrder:()=>A,default:()=>N});var v=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(v),l=e("./node_modules/.pnpm/@elliemae+ds-grid@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),u=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"),p=e("./lib/view/form/index.tsx"),a=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/slicedToArray.js"),d=e.n(a),i=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),n=e.n(i),m=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),g=e("./node_modules/.pnpm/@elliemae+ds-form-date-range-picker@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-date-range-picker/dist/esm/ControlledDateRangePicker.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"),r=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),s=["value","onChange"],D=["field"],x=["name","defaultValue","rules"],I=function(o){var b=o.field,y=b.value,F=b.onChange,_=n()(b,s),j=n()(o,D),S=(0,m.useState)(y[0]),B=d()(S,2),P=B[0],G=B[1],U=(0,m.useState)(y[1]),V=d()(U,2),R=V[0],w=V[1];return(0,m.useEffect)(function(){F([P,R])},[P,R]),(0,r.jsx)(g.V,Object.assign({},_,{fromDate:P,onFromDateChange:G,toDate:R,onToDateChange:w},j))};I.displayName="WrappedDateRangePicker";var h=function(o){var b=o.name,y=o.defaultValue,F=y===void 0?["",""]:y,_=o.rules,j=_===void 0?{}:_,S=n()(o,x);return t()(f.xI,{name:b,defaultValue:F,rules:j,render:function(B){var P=B.field;return(0,r.jsx)(I,Object.assign({field:P},S))}})};h.displayName="DateRangePicker";var O=e("./lib/view/fields/form-layout-block-item/index.tsx"),C=e("./lib/view/fields/watch-value.tsx"),L,E=`
    
    // @ts-nocheck
    // @ts-ignore
    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { Form } from '../../form/index.js';\\nimport { DateRangePicker, DateRangePickerProps } from './index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/DateRangePicker',\\n  component: DateRangePicker,\\n} as Meta;\\n\\nconst Template: Story<DateRangePickerProps & { labelText: string }> = (\\n  args,\\n) => (\\n  <Grid p=\\"m\\" width=\\"fit-content\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"firstname\\" label=\\"First Name\\" required>\\n        <DateRangePicker {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"First Name\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'meeting-date',\\n  name: 'meeting-date',\\n  rules: {\\n    validate: (values: [string, string]) => values[0] && values[1],\\n  },\\n};\\n";
    // @ts-ignore
    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":70,"line":14},"endLoc":{"col":1,"line":26},"startBody":{"col":70,"line":14},"endBody":{"col":1,"line":26}}};
    
import { Story, Meta } from '@storybook/react';
import { Grid } from '@elliemae/ds-grid';
import { DSButtonV2 } from '@elliemae/ds-button';
import { Form } from '../../form/index.js';
import { DateRangePicker, DateRangePickerProps } from './index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/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';\\nimport { Form } from '../../form/index.js';\\nimport { DateRangePicker, DateRangePickerProps } from './index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/DateRangePicker',\\n  component: DateRangePicker,\\n} as Meta;\\n\\nconst Template: Story<DateRangePickerProps & { labelText: string }> = (\\n  args,\\n) => (\\n  <Grid p=\\"m\\" width=\\"fit-content\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"firstname\\" label=\\"First Name\\" required>\\n        <DateRangePicker {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"First Name\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'meeting-date',\\n  name: 'meeting-date',\\n  rules: {\\n    validate: (values: [string, string]) => values[0] && values[1],\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":70,"line":14},"endLoc":{"col":1,"line":26},"startBody":{"col":70,"line":14},"endBody":{"col":1,"line":26}}}},},
  title: 'Components/Form/Controls/DateRangePicker',
  component: DateRangePicker,
} as Meta;

const Template: Story<DateRangePickerProps & { labelText: string }> = (
  args,
) => (
  <Grid p="m" width="fit-content">
    <Form>
      <FormLayoutBlockItem inputID="firstname" label="First Name" required>
        <DateRangePicker {...args} />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="First Name" {...args} />
    </Form>
  </Grid>
);

export const Basic = Template.bind({});

Basic.args = {
  id: 'meeting-date',
  name: 'meeting-date',
  rules: {
    validate: (values: [string, string]) => values[0] && values[1],
  },
};
`,W={Basic:{startLoc:{col:70,line:22},endLoc:{col:1,line:34},startBody:{col:70,line:22},endBody:{col:1,line:34}}},E=`import { Story, Meta } from '@storybook/react';
import { Grid } from '@elliemae/ds-grid';
import { DSButtonV2 } from '@elliemae/ds-button';
import { Form } from '../../form/index.js';
import { DateRangePicker, DateRangePickerProps } from './index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
import { WatchValue } from '../watch-value.js';

export default {
  title: 'Components/Form/Controls/DateRangePicker',
  component: DateRangePicker,
} as Meta;

const Template: Story<DateRangePickerProps & { labelText: string }> = (
  args,
) => (
  <Grid p="m" width="fit-content">
    <Form>
      <FormLayoutBlockItem inputID="firstname" label="First Name" required>
        <DateRangePicker {...args} />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="First Name" {...args} />
    </Form>
  </Grid>
);

export const Basic = Template.bind({});

Basic.args = {
  id: 'meeting-date',
  name: 'meeting-date',
  rules: {
    validate: (values: [string, string]) => values[0] && values[1],
  },
};
`,W={Basic:{startLoc:{col:70,line:14},endLoc:{col:1,line:26},startBody:{col:70,line:14},endBody:{col:1,line:26}}};const N={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';\\nimport { Form } from '../../form/index.js';\\nimport { DateRangePicker, DateRangePickerProps } from './index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/DateRangePicker',\\n  component: DateRangePicker,\\n} as Meta;\\n\\nconst Template: Story<DateRangePickerProps & { labelText: string }> = (\\n  args,\\n) => (\\n  <Grid p=\\"m\\" width=\\"fit-content\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"firstname\\" label=\\"First Name\\" required>\\n        <DateRangePicker {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"First Name\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'meeting-date',\\n  name: 'meeting-date',\\n  rules: {\\n    validate: (values: [string, string]) => values[0] && values[1],\\n  },\\n};\\n";
    // @ts-ignore
    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":70,"line":14},"endLoc":{"col":1,"line":26},"startBody":{"col":70,"line":14},"endBody":{"col":1,"line":26}}};
    
import { Story, Meta } from '@storybook/react';
import { Grid } from '@elliemae/ds-grid';
import { DSButtonV2 } from '@elliemae/ds-button';
import { Form } from '../../form/index.js';
import { DateRangePicker, DateRangePickerProps } from './index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/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';\\nimport { Form } from '../../form/index.js';\\nimport { DateRangePicker, DateRangePickerProps } from './index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/DateRangePicker',\\n  component: DateRangePicker,\\n} as Meta;\\n\\nconst Template: Story<DateRangePickerProps & { labelText: string }> = (\\n  args,\\n) => (\\n  <Grid p=\\"m\\" width=\\"fit-content\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"firstname\\" label=\\"First Name\\" required>\\n        <DateRangePicker {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"First Name\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'meeting-date',\\n  name: 'meeting-date',\\n  rules: {\\n    validate: (values: [string, string]) => values[0] && values[1],\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":70,"line":14},"endLoc":{"col":1,"line":26},"startBody":{"col":70,"line":14},"endBody":{"col":1,"line":26}}}},},
  title: 'Components/Form/Controls/DateRangePicker',
  component: DateRangePicker,
} as Meta;

const Template: Story<DateRangePickerProps & { labelText: string }> = (
  args,
) => (
  <Grid p="m" width="fit-content">
    <Form>
      <FormLayoutBlockItem inputID="firstname" label="First Name" required>
        <DateRangePicker {...args} />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="First Name" {...args} />
    </Form>
  </Grid>
);

export const Basic = Template.bind({});

Basic.args = {
  id: 'meeting-date',
  name: 'meeting-date',
  rules: {
    validate: (values: [string, string]) => values[0] && values[1],
  },
};
`,locationsMap:{basic:{startLoc:{col:70,line:22},endLoc:{col:1,line:34},startBody:{col:70,line:22},endBody:{col:1,line:34}}}},storySource:{source:`import { Story, Meta } from '@storybook/react';
import { Grid } from '@elliemae/ds-grid';
import { DSButtonV2 } from '@elliemae/ds-button';
import { Form } from '../../form/index.js';
import { DateRangePicker, DateRangePickerProps } from './index.js';
import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
import { WatchValue } from '../watch-value.js';

export default {
  title: 'Components/Form/Controls/DateRangePicker',
  component: DateRangePicker,
} as Meta;

const Template: Story<DateRangePickerProps & { labelText: string }> = (
  args,
) => (
  <Grid p="m" width="fit-content">
    <Form>
      <FormLayoutBlockItem inputID="firstname" label="First Name" required>
        <DateRangePicker {...args} />
      </FormLayoutBlockItem>
      <DSButtonV2>Submit</DSButtonV2>
      <WatchValue label="First Name" {...args} />
    </Form>
  </Grid>
);

export const Basic = Template.bind({});

Basic.args = {
  id: 'meeting-date',
  name: 'meeting-date',
  rules: {
    validate: (values: [string, string]) => values[0] && values[1],
  },
};
`,locationsMap:{basic:{startLoc:{col:70,line:14},endLoc:{col:1,line:26},startBody:{col:70,line:14},endBody:{col:1,line:26}}}}},title:"Components/Form/Controls/DateRangePicker",component:h};var T=function(o){return t()(l.Ay,{p:"m",width:"fit-content"},void 0,t()(p.l,{},void 0,t()(O.B,{inputID:"firstname",label:"First Name",required:!0},void 0,(0,r.jsx)(h,Object.assign({},o))),L||(L=t()(u.e,{},void 0,"Submit")),(0,r.jsx)(C.n,Object.assign({label:"First Name"},o))))};T.displayName="Template";var M=T.bind({});M.args={id:"meeting-date",name:"meeting-date",rules:{validate:function(o){return o[0]&&o[1]}}};var A=["Basic"]},"./lib/view/fields/form-layout-block-item/index.tsx":(k,c,e)=>{e.d(c,{B:()=>d});var v=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),t=e.n(v),l=e("./node_modules/.pnpm/@elliemae+ds-form-layout-blocks@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-blocks/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.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"),p=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),a=["inputID","label"],d=function(i){var n=i.inputID,m=i.label,g=t()(i,a),f=(0,u.lN)({name:n}),r=f.errors,s=(0,u.Jt)(r,n),D=!!s,x=s?.message;return(0,p.jsx)(l.U,Object.assign({inputID:n,label:m,hasError:D,validationMessage:x},g))};d.displayName="FormLayoutBlockItem"},"./lib/view/fields/watch-value.tsx":(k,c,e)=>{e.d(c,{n:()=>n});var v=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(v),l=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"),u=e("./node_modules/.pnpm/@elliemae+ds-grid@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.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"),a,d=l.Ay.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),i=l.Ay.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),n=function(m){var g=m.name,f=m.label,r=(0,p.xW)(),s=r.watch,D=s(g,!1)||"";return t()(u.Ay,{},void 0,t()(d,{},void 0,a||(a=t()("h4",{},void 0,"Form Data:")),t()(i,{},void 0,t()("div",{},void 0,f," : ",t()("strong",{},void 0,JSON.stringify(D))))))};n.displayName="WatchValue"},"./lib/view/form/index.tsx":(k,c,e)=>{e.d(c,{l:()=>p});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.esm.js"),t=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),l=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),u=v.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),p=function(a){var d=a.classname,i=a.reactHookFormProps,n=i===void 0?{mode:"onBlur"}:i,m=a.children,g=a.onSubmit,f=(0,t.mN)(n),r={};g&&(r.onSubmit=f.handleSubmit(g));var s=Object.assign(f,{formProps:n});return(0,l.jsx)(t.Op,Object.assign({},s,{children:(0,l.jsx)(u,Object.assign({className:d},r,{children:m}))}))};p.displayName="Form"}}]);
