"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[3813],{"./lib/view/fields/form-item-layout/index.stories.tsx":(g,l,e)=>{e.r(l),e.d(l,{Basic:()=>S,__namedExportsOrder:()=>I,default:()=>_});var c=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(c),d=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"),x=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"),u=e("./lib/view/form/index.tsx"),n=e("./lib/view/fields/text-box/index.tsx"),f=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),p=e.n(f),m=e("./node_modules/.pnpm/@elliemae+ds-legacy-form@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-form/dist/esm/FormItem/DSFormItemLayout.js"),o=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),a=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),s=["name"],r=function(F){var v=F.name,j=p()(F,s),T=(0,o.lN)({name:v}),P=T.errors,b=(0,o.Jt)(P,v),D=!!b,M=b?.message;return(0,a.jsx)(m.T4,Object.assign({name:v,hasError:D,validationMessage:M},j))};r.displayName="FormItemLayout";var i,B=`
    
    // @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 { TextBox } from '../text-box/index.js';\\nimport { FormItemLayout, FormItemLayoutProps } from './index.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/FormItemLayout',\\n  component: FormItemLayout,\\n} as Meta;\\n\\nconst Template: Story<FormItemLayoutProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormItemLayout {...args} />\\n      <DSButtonV2>Submit</DSButtonV2>\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  floatingLabel: true,\\n  inputComponent: TextBox,\\n  labelText: 'First Name',\\n  name: 'firstname',\\n  required: true,\\n  rules: {\\n    required: { value: true, message: 'Please enter firstname' },\\n  },\\n};\\n";
    // @ts-ignore
    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":45,"line":13},"endLoc":{"col":1,"line":20},"startBody":{"col":45,"line":13},"endBody":{"col":1,"line":20}}};
    
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 { TextBox } from '../text-box/index.js';
import { FormItemLayout, FormItemLayoutProps } from './index.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 { TextBox } from '../text-box/index.js';\\nimport { FormItemLayout, FormItemLayoutProps } from './index.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/FormItemLayout',\\n  component: FormItemLayout,\\n} as Meta;\\n\\nconst Template: Story<FormItemLayoutProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormItemLayout {...args} />\\n      <DSButtonV2>Submit</DSButtonV2>\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  floatingLabel: true,\\n  inputComponent: TextBox,\\n  labelText: 'First Name',\\n  name: 'firstname',\\n  required: true,\\n  rules: {\\n    required: { value: true, message: 'Please enter firstname' },\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":45,"line":13},"endLoc":{"col":1,"line":20},"startBody":{"col":45,"line":13},"endBody":{"col":1,"line":20}}}},},
  title: 'Components/Form/Controls/FormItemLayout',
  component: FormItemLayout,
} as Meta;

const Template: Story<FormItemLayoutProps> = (args) => (
  <Grid p="m">
    <Form>
      <FormItemLayout {...args} />
      <DSButtonV2>Submit</DSButtonV2>
    </Form>
  </Grid>
);

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

Basic.args = {
  floatingLabel: true,
  inputComponent: TextBox,
  labelText: 'First Name',
  name: 'firstname',
  required: true,
  rules: {
    required: { value: true, message: 'Please enter firstname' },
  },
};
`,L={Basic:{startLoc:{col:45,line:21},endLoc:{col:1,line:28},startBody:{col:45,line:21},endBody:{col:1,line:28}}},B=`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 { TextBox } from '../text-box/index.js';
import { FormItemLayout, FormItemLayoutProps } from './index.js';

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

const Template: Story<FormItemLayoutProps> = (args) => (
  <Grid p="m">
    <Form>
      <FormItemLayout {...args} />
      <DSButtonV2>Submit</DSButtonV2>
    </Form>
  </Grid>
);

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

Basic.args = {
  floatingLabel: true,
  inputComponent: TextBox,
  labelText: 'First Name',
  name: 'firstname',
  required: true,
  rules: {
    required: { value: true, message: 'Please enter firstname' },
  },
};
`,L={Basic:{startLoc:{col:45,line:13},endLoc:{col:1,line:20},startBody:{col:45,line:13},endBody:{col:1,line:20}}};const _={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 { TextBox } from '../text-box/index.js';\\nimport { FormItemLayout, FormItemLayoutProps } from './index.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/FormItemLayout',\\n  component: FormItemLayout,\\n} as Meta;\\n\\nconst Template: Story<FormItemLayoutProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormItemLayout {...args} />\\n      <DSButtonV2>Submit</DSButtonV2>\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  floatingLabel: true,\\n  inputComponent: TextBox,\\n  labelText: 'First Name',\\n  name: 'firstname',\\n  required: true,\\n  rules: {\\n    required: { value: true, message: 'Please enter firstname' },\\n  },\\n};\\n";
    // @ts-ignore
    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":45,"line":13},"endLoc":{"col":1,"line":20},"startBody":{"col":45,"line":13},"endBody":{"col":1,"line":20}}};
    
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 { TextBox } from '../text-box/index.js';
import { FormItemLayout, FormItemLayoutProps } from './index.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 { TextBox } from '../text-box/index.js';\\nimport { FormItemLayout, FormItemLayoutProps } from './index.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/FormItemLayout',\\n  component: FormItemLayout,\\n} as Meta;\\n\\nconst Template: Story<FormItemLayoutProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormItemLayout {...args} />\\n      <DSButtonV2>Submit</DSButtonV2>\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  floatingLabel: true,\\n  inputComponent: TextBox,\\n  labelText: 'First Name',\\n  name: 'firstname',\\n  required: true,\\n  rules: {\\n    required: { value: true, message: 'Please enter firstname' },\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":45,"line":13},"endLoc":{"col":1,"line":20},"startBody":{"col":45,"line":13},"endBody":{"col":1,"line":20}}}},},
  title: 'Components/Form/Controls/FormItemLayout',
  component: FormItemLayout,
} as Meta;

const Template: Story<FormItemLayoutProps> = (args) => (
  <Grid p="m">
    <Form>
      <FormItemLayout {...args} />
      <DSButtonV2>Submit</DSButtonV2>
    </Form>
  </Grid>
);

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

Basic.args = {
  floatingLabel: true,
  inputComponent: TextBox,
  labelText: 'First Name',
  name: 'firstname',
  required: true,
  rules: {
    required: { value: true, message: 'Please enter firstname' },
  },
};
`,locationsMap:{basic:{startLoc:{col:45,line:21},endLoc:{col:1,line:28},startBody:{col:45,line:21},endBody:{col:1,line:28}}}},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 { TextBox } from '../text-box/index.js';
import { FormItemLayout, FormItemLayoutProps } from './index.js';

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

const Template: Story<FormItemLayoutProps> = (args) => (
  <Grid p="m">
    <Form>
      <FormItemLayout {...args} />
      <DSButtonV2>Submit</DSButtonV2>
    </Form>
  </Grid>
);

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

Basic.args = {
  floatingLabel: true,
  inputComponent: TextBox,
  labelText: 'First Name',
  name: 'firstname',
  required: true,
  rules: {
    required: { value: true, message: 'Please enter firstname' },
  },
};
`,locationsMap:{basic:{startLoc:{col:45,line:13},endLoc:{col:1,line:20},startBody:{col:45,line:13},endBody:{col:1,line:20}}}}},title:"Components/Form/Controls/FormItemLayout",component:r};var y=function(F){return t()(d.Ay,{p:"m"},void 0,t()(u.l,{},void 0,(0,a.jsx)(r,Object.assign({},F)),i||(i=t()(x.e,{},void 0,"Submit"))))};y.displayName="Template";var S=y.bind({});S.args={floatingLabel:!0,inputComponent:n.f,labelText:"First Name",name:"firstname",required:!0,rules:{required:{value:!0,message:"Please enter firstname"}}};var I=["Basic"]},"./lib/view/fields/text-box/index.tsx":(g,l,e)=>{e.d(l,{f:()=>m});var c=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(c),d=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),x=e.n(d),u=e("./node_modules/.pnpm/@elliemae+ds-legacy-common@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-common/dist/esm/TextBox/DSTextBox.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"),f=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),p=["name","defaultValue","rules"],m=function(o){var a=o.name,s=o.defaultValue,r=s===void 0?"":s,i=o.rules,B=i===void 0?{}:i,L=x()(o,p);return t()(n.xI,{name:a,defaultValue:r,rules:B,render:function(_){var y=_.field;return(0,f.jsx)(u.UN,Object.assign({},L,y))}})};m.displayName="TextBox"},"./lib/view/form/index.tsx":(g,l,e)=>{e.d(l,{l:()=>u});var c=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"),d=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),x=c.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),u=function(n){var f=n.classname,p=n.reactHookFormProps,m=p===void 0?{mode:"onBlur"}:p,o=n.children,a=n.onSubmit,s=(0,t.mN)(m),r={};a&&(r.onSubmit=s.handleSubmit(a));var i=Object.assign(s,{formProps:m});return(0,d.jsx)(t.Op,Object.assign({},i,{children:(0,d.jsx)(x,Object.assign({className:f},r,{children:o}))}))};u.displayName="Form"}}]);
