@elliemae/pui-app-sdk 5.36.2 → 5.37.0

package/demo/docs/view-fields-form-layout-block-item-index-stories.7032be1f.iframe.bundle.js

@@ -0,0 +1,266 @@
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[2487],{"./lib/view/fields/form-layout-block-item/index.tsx"(j,u,e){e.d(u,{B:()=>_});var m=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),n=e.n(m),t=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"),h=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),c=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),a=["inputID","label"],_=function(x){var d=x.inputID,s=x.label,f=n()(x,a),r=(0,h.lN)({name:d}),l=r.errors,p=(0,h.Jt)(l,d),B=!!p,y=p?.message;return(0,c.jsx)(t.U,Object.assign({inputID:d,label:s,hasError:B,validationMessage:y},f))};_.displayName="FormLayoutBlockItem"},"./lib/view/fields/text-box/index.tsx"(j,u,e){e.d(u,{f:()=>d});var m=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(m),t=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),h=e.n(t),c=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"),a=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),_=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),x=["name","defaultValue","rules"],d=function(s){var f=s.name,r=s.defaultValue,l=r===void 0?"":r,p=s.rules,B=p===void 0?{}:p,y=h()(s,x);return n()(a.xI,{name:f,defaultValue:l,rules:B,render:function(b){var L=b.field;return(0,_.jsx)(c.UN,Object.assign({},y,L))}})};d.displayName="TextBox"},"./lib/view/form/index.tsx"(j,u,e){e.d(u,{l:()=>c});var 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"),n=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),t=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),h=m.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),c=function(a){var _=a.classname,x=a.reactHookFormProps,d=x===void 0?{mode:"onBlur"}:x,s=a.children,f=a.onSubmit,r=(0,n.mN)(d),l={};f&&(l.onSubmit=r.handleSubmit(f));var p=Object.assign(r,{formProps:d});return(0,t.jsx)(n.Op,Object.assign({},p,{children:(0,t.jsx)(h,Object.assign({className:_},l,{children:s}))}))};c.displayName="Form"},"./lib/view/fields/form-layout-block-item/index.stories.tsx"(j,u,e){e.r(u),e.d(u,{Basic:()=>p,__namedExportsOrder:()=>B,default:()=>r});var m=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(m),t=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"),h=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"),c=e("./lib/view/form/index.tsx"),a=e("./lib/view/fields/text-box/index.tsx"),_=e("./lib/view/fields/form-layout-block-item/index.tsx"),x=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),d,s=`
+    
+    // @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 { FormLayoutBlockItem, FormLayoutBlockItemProps } from './index.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/FormLayoutBlockItem',\\n  component: FormLayoutBlockItem,\\n} as Meta;\\n\\nconst Template: Story<FormLayoutBlockItemProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem {...args} />\\n      <DSButtonV2>Submit</DSButtonV2>\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  children: (\\n    <TextBox\\n      id=\\"firstname\\"\\n      name=\\"firstname\\"\\n      rules={{\\n        required: { value: true, message: 'Please enter firstname' },\\n      }}\\n    />\\n  ),\\n  label: 'First Name',\\n  inputID: 'firstname',\\n  required: true,\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":50,"line":13},"endLoc":{"col":1,"line":20},"startBody":{"col":50,"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 { FormLayoutBlockItem, FormLayoutBlockItemProps } 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 { FormLayoutBlockItem, FormLayoutBlockItemProps } from './index.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/FormLayoutBlockItem',\\n  component: FormLayoutBlockItem,\\n} as Meta;\\n\\nconst Template: Story<FormLayoutBlockItemProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem {...args} />\\n      <DSButtonV2>Submit</DSButtonV2>\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  children: (\\n    <TextBox\\n      id=\\"firstname\\"\\n      name=\\"firstname\\"\\n      rules={{\\n        required: { value: true, message: 'Please enter firstname' },\\n      }}\\n    />\\n  ),\\n  label: 'First Name',\\n  inputID: 'firstname',\\n  required: true,\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":50,"line":13},"endLoc":{"col":1,"line":20},"startBody":{"col":50,"line":13},"endBody":{"col":1,"line":20}}}},},
+  title: 'Components/Form/Controls/FormLayoutBlockItem',
+  component: FormLayoutBlockItem,
+} as Meta;
+
+const Template: Story<FormLayoutBlockItemProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem {...args} />
+      <DSButtonV2>Submit</DSButtonV2>
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  children: (
+    <TextBox
+      id="firstname"
+      name="firstname"
+      rules={{
+        required: { value: true, message: 'Please enter firstname' },
+      }}
+    />
+  ),
+  label: 'First Name',
+  inputID: 'firstname',
+  required: true,
+};
+`,f={Basic:{startLoc:{col:50,line:21},endLoc:{col:1,line:28},startBody:{col:50,line:21},endBody:{col:1,line:28}}},s=`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 { FormLayoutBlockItem, FormLayoutBlockItemProps } from './index.js';
+
+export default {
+  title: 'Components/Form/Controls/FormLayoutBlockItem',
+  component: FormLayoutBlockItem,
+} as Meta;
+
+const Template: Story<FormLayoutBlockItemProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem {...args} />
+      <DSButtonV2>Submit</DSButtonV2>
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  children: (
+    <TextBox
+      id="firstname"
+      name="firstname"
+      rules={{
+        required: { value: true, message: 'Please enter firstname' },
+      }}
+    />
+  ),
+  label: 'First Name',
+  inputID: 'firstname',
+  required: true,
+};
+`,f={Basic:{startLoc:{col:50,line:13},endLoc:{col:1,line:20},startBody:{col:50,line:13},endBody:{col:1,line:20}}};const r={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 { FormLayoutBlockItem, FormLayoutBlockItemProps } from './index.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/FormLayoutBlockItem',\\n  component: FormLayoutBlockItem,\\n} as Meta;\\n\\nconst Template: Story<FormLayoutBlockItemProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem {...args} />\\n      <DSButtonV2>Submit</DSButtonV2>\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  children: (\\n    <TextBox\\n      id=\\"firstname\\"\\n      name=\\"firstname\\"\\n      rules={{\\n        required: { value: true, message: 'Please enter firstname' },\\n      }}\\n    />\\n  ),\\n  label: 'First Name',\\n  inputID: 'firstname',\\n  required: true,\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":50,"line":13},"endLoc":{"col":1,"line":20},"startBody":{"col":50,"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 { FormLayoutBlockItem, FormLayoutBlockItemProps } 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 { FormLayoutBlockItem, FormLayoutBlockItemProps } from './index.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/FormLayoutBlockItem',\\n  component: FormLayoutBlockItem,\\n} as Meta;\\n\\nconst Template: Story<FormLayoutBlockItemProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem {...args} />\\n      <DSButtonV2>Submit</DSButtonV2>\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  children: (\\n    <TextBox\\n      id=\\"firstname\\"\\n      name=\\"firstname\\"\\n      rules={{\\n        required: { value: true, message: 'Please enter firstname' },\\n      }}\\n    />\\n  ),\\n  label: 'First Name',\\n  inputID: 'firstname',\\n  required: true,\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":50,"line":13},"endLoc":{"col":1,"line":20},"startBody":{"col":50,"line":13},"endBody":{"col":1,"line":20}}}},},
+  title: 'Components/Form/Controls/FormLayoutBlockItem',
+  component: FormLayoutBlockItem,
+} as Meta;
+
+const Template: Story<FormLayoutBlockItemProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem {...args} />
+      <DSButtonV2>Submit</DSButtonV2>
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  children: (
+    <TextBox
+      id="firstname"
+      name="firstname"
+      rules={{
+        required: { value: true, message: 'Please enter firstname' },
+      }}
+    />
+  ),
+  label: 'First Name',
+  inputID: 'firstname',
+  required: true,
+};
+`,locationsMap:{basic:{startLoc:{col:50,line:21},endLoc:{col:1,line:28},startBody:{col:50,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 { FormLayoutBlockItem, FormLayoutBlockItemProps } from './index.js';
+
+export default {
+  title: 'Components/Form/Controls/FormLayoutBlockItem',
+  component: FormLayoutBlockItem,
+} as Meta;
+
+const Template: Story<FormLayoutBlockItemProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem {...args} />
+      <DSButtonV2>Submit</DSButtonV2>
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  children: (
+    <TextBox
+      id="firstname"
+      name="firstname"
+      rules={{
+        required: { value: true, message: 'Please enter firstname' },
+      }}
+    />
+  ),
+  label: 'First Name',
+  inputID: 'firstname',
+  required: true,
+};
+`,locationsMap:{basic:{startLoc:{col:50,line:13},endLoc:{col:1,line:20},startBody:{col:50,line:13},endBody:{col:1,line:20}}}}},title:"Components/Form/Controls/FormLayoutBlockItem",component:_.B};var l=function(y){return n()(t.Ay,{p:"m"},void 0,n()(c.l,{},void 0,(0,x.jsx)(_.B,Object.assign({},y)),d||(d=n()(h.e,{},void 0,"Submit"))))};l.displayName="Template";var p=l.bind({});p.args={children:n()(a.f,{id:"firstname",name:"firstname",rules:{required:{value:!0,message:"Please enter firstname"}}}),label:"First Name",inputID:"firstname",required:!0};var B=["Basic"]},"./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"(j,u,e){e.d(u,{U:()=>z});var m=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),n=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),t=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"),h=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/describe.js"),c=e("./node_modules/.pnpm/uid@2.0.2/node_modules/uid/dist/index.mjs"),a=e("./node_modules/.pnpm/@elliemae+ds-icons@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-icons/dist/esm/AlertsSmallFill.js"),_=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/globalProps/globalAttributesPropTypes.js"),x=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/xstyledProps/xstyledPropTypes.js"),d=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propsPerSlot/getPropsPerSlotPropTypes.js"),s=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/PropTypes.js"),f=e("./node_modules/.pnpm/@elliemae+ds-system@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.17.23/node_modules/@elliemae/ds-system/dist/esm/styled/helpers.js");const r="DSFormlayoutblockitem",l={CONTAINER:"container",LABEL:"label",MESSAGE:"message",ERROR_MESSAGE:"error-message",COUNTER:"counter",MARK:"mark"},p=(0,f.lD)(r,l),B={isGroup:!1},y={..._.P,...x.w,...(0,d.Y)(r,l),children:s.A.node.isRequired.description("Input component. "),label:s.A.string.description("Label property for the input component. This property is required for accesibility purposes."),inputID:s.A.string.description("String that matches the input component's id. This property is required for accesibility purposes."),maxCharCounter:s.A.number.description("Max of characters allowed."),currentChar:s.A.number.description("Current counter of input text area"),feedbackMessage:s.A.string.description("Feedback message to show below the input component."),validationMessage:s.A.string.description("Validation message to show below the input component. It requires hasError property set to true to be visible."),hasError:s.A.bool.description("Helper boolean property for the validation message."),required:s.A.bool.description("Adds required extra styling."),optional:s.A.bool.description("Adds optional extra styling."),fitContent:s.A.bool.description("Set the width of the layout to the input component."),leftLabel:s.A.bool.description("Adds the label at the left of the input component."),hideLabel:s.A.bool.description("Hides the input label. It still requires label and labelFor property for accesibility purposes"),withHighlight:s.A.bool.description("Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab."),isGroup:s.A.bool.description("Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input."),iconError:s.A.bool.description("Adds icon error extra styling.")};var b=e("./node_modules/.pnpm/@elliemae+ds-system@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.17.23/node_modules/@elliemae/ds-system/dist/esm/styled/styled.js"),L=e("./node_modules/.pnpm/@elliemae+ds-system@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.17.23/node_modules/@elliemae/ds-system/dist/esm/xStyledWrapper.js"),R=e("./node_modules/.pnpm/@elliemae+ds-system@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.17.23/node_modules/@elliemae/ds-system/dist/esm/styled/system.js");const $=(0,b.I)("div",{name:r,slot:l.CONTAINER})`
+  position: relative;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  ${L.L1}
+  ${({fitContent:o})=>o?"width: fit-content;":void 0}
+  ${({isGroup:o})=>o?"border: none":""};
+  ${({leftLabel:o,hideLabel:i})=>o&&!i?"grid-template-columns: auto 1fr;":void 0}
+  align-items: center;
+  ${({theme:o,withHighlight:i})=>i?`
+  &::after {
+        position: absolute;
+        content: '';
+        left: -${o.space.xxs};
+        top: -${o.space.xxxs};
+        z-index: -1;
+        width: calc(100% + ${o.space.xs});
+        height: calc(100%  + ${o.space.xxs});
+        background-color: #FEFBEE;
+        border : 1px solid #8F6326;
+        border-radius : 4px;
+        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);
+        }
+        &:hover, 
+        &:focus-within {
+          &::after {
+            position: absolute;
+            content: '';
+            left: -${o.space.xxs};
+            top: -${o.space.xxxs};
+            z-index: -1;
+            width: calc(100% + ${o.space.xs});
+            height: calc(100%  + ${o.space.xxs});
+            background-color: #FFF9D3;
+            border : 2px solid #8F6326;
+            border-radius : 4px;
+            box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);
+          }
+        }
+  `:void 0}
+`,G=(0,b.I)("label",{name:r,slot:l.LABEL})`
+  display: flex;
+  ${({theme:o,leftLabel:i})=>i?`padding-right: ${o.space.xxxs};`:void 0}
+  ${({hideLabel:o})=>o?`position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+  `:void 0}
+`,O=(0,R.AH)`
+  font-size: ${({theme:o})=>o.fontSizes.microText[200]};
+  text-align: right;
+  line-height: 1.231rem;
+  @media (max-width: ${({theme:o})=>o.breakpoints.small}) {
+    line-height: 1rem;
+  }
+  min-height: 15px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${({theme:o,hasError:i})=>i?o.colors.danger[900]:o.colors.neutral[500]};
+  ${({leftLabel:o,hideLabel:i})=>o&&!i?"grid-column: 1/3;":void 0}
+  font-style: normal;
+`,U=(0,b.I)("div",{name:r,slot:l.MESSAGE})`
+  ${O}
+`,V=(0,b.I)("div",{name:r,slot:l.ERROR_MESSAGE})`
+  ${O}
+`,K=(0,b.I)("span",{name:r,slot:l.MARK})`
+  margin-left: ${({theme:o})=>o.space.xxxs};
+  ${({theme:o,required:i})=>i?`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 1rem;
+  font-size: 1.5rem;
+  :after {
+    content: '*';
+    color: ${o.colors.danger[900]};
+  }
+  `:`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  border: 1px solid ${o.colors.brand[600]};
+  `}
+`,v=b.I.div`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`,N=(0,b.I)("span",{name:r,slot:l.COUNTER})`
+  justify-self: flex-end;
+  margin-left: 16px;
+  color: ${({theme:o,hasError:i})=>i?o.colors.danger[900]:o.colors.neutral[500]};
+`;var H=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/validation/typescriptValidator.js"),w=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/defaultProps/useMemoMergePropsWithDefault.js"),I=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/globalProps/useGetGlobalAttributes.js"),F=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/xstyledProps/useGetXstyledProps.js");const ee=o=>{(0,H.D)(o,y,r);const i=(0,w.b)(o,B),C=(0,I.u)(i),D=(0,F.d)(i);return m.useMemo(()=>({globalAttributes:C,xstyledProps:D,propsWithDefault:i}),[C,D,i])},z=o=>{const{globalAttributes:i,xstyledProps:C,propsWithDefault:D}=ee(o),{label:Y,feedbackMessage:X,maxCharCounter:P,currentChar:E,validationMessage:J,inputID:Q,children:te,hasError:S,leftLabel:k,required:Z,optional:q,hideLabel:W,fitContent:ne,withHighlight:se,isGroup:A}=D,{className:re,label:ae,...le}=i,g=(0,m.useMemo)(()=>Q??`form_layout_block_item_${(0,c.L)(6)}`,[Q]),ie=(0,m.useMemo)(()=>P!==void 0?["1fr","auto"]:["1fr"],[P]),T=(0,m.useCallback)(()=>D,[D]),M=(0,m.useCallback)(()=>({}),[]);return(0,n.jsxs)($,{leftLabel:k,fitContent:ne,hideLabel:W,withHighlight:se,as:A?"fieldset":"div",isGroup:A,className:re,...C,...le,getOwnerProps:T,getOwnerPropsArguments:M,children:[(0,n.jsxs)(t.Ay,{cols:ie,gutter:"xxs","aria-live":"polite",id:`${g}_remaining_characters`,children:[Y?(0,n.jsxs)(G,{id:`${g}_block_label`,htmlFor:g,leftLabel:k,hideLabel:W,"aria-hidden":A,getOwnerProps:T,getOwnerPropsArguments:M,children:[Y,(Z||q)&&(0,n.jsx)(K,{required:Z,"aria-hidden":Z,children:q?(0,n.jsx)(v,{children:"Optional"}):null})]}):null,P!==void 0&&E!==void 0?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(N,{hasError:E>P,getOwnerProps:T,getOwnerPropsArguments:M,children:`${E}/${P}`}),(0,n.jsx)(v,{children:E<P?`${P-E} characters remaining`:""})]}):null]}),A&&(0,n.jsx)(v,{as:"legend",id:`${g}_legend`,children:`${Y}. ${S&&J||!S&&X||""}`}),te,X&&!S?(0,n.jsx)(U,{"aria-live":"polite",leftLabel:k,hideLabel:W,"aria-hidden":A,id:`${g}_feedback_message`,getOwnerProps:T,getOwnerPropsArguments:M,children:X}):(0,n.jsx)(v,{id:`${g}_feedback_message`}),J&&S?(0,n.jsxs)(V,{hasError:S,leftLabel:k,hideLabel:W,role:"alert",id:`${g}_error_message`,getOwnerProps:T,getOwnerPropsArguments:M,children:[(0,n.jsx)(a.A,{width:8,height:8,color:["danger","900"],style:{marginBottom:"2px"}}),"\xA0",`${J}`]}):(0,n.jsx)(v,{id:`${g}_error_message`})]})};z.displayName="DSFormLayoutBlockItem";const oe=(0,h.A)(z);oe.propTypes=y},"./node_modules/.pnpm/@elliemae+ds-icons@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-icons/dist/esm/AlertsSmallFill.js"(j,u,e){e.d(u,{A:()=>c});var m=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),n=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),t=e("./node_modules/.pnpm/@elliemae+ds-icons@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-icons/dist/esm/utils/SvgIcon.js"),c=a=>(0,n.jsx)(t.Ah,{width:12,height:13,...a,viewBox:"0 0 12 13",children:(0,n.jsx)("path",{d:"M 7.2154 1.2771 L 11.8239 10.2545 C 12.1984 10.9839 11.956 11.904 11.2826 12.3096 C 11.0752 12.4345 10.8419 12.5 10.6046 12.5 L 1.3952 12.5 C 0.6246 12.5 0 11.8234 0 10.9889 C 0 10.7322 0.0603 10.4798 0.1753 10.2555 L 4.7762 1.278 C 5.1502 0.5483 5.9995 0.2851 6.6732 0.6902 C 6.901 0.8271 7.0888 1.0304 7.2154 1.2771 Z"})})},"./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"(j,u,e){e.d(u,{UN:()=>a});var m=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),n=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),t=e("./node_modules/.pnpm/@elliemae+ds-legacy-props-helpers@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-props-helpers/dist/esm/propTypes/PropTypes.js"),h=e("./node_modules/.pnpm/@elliemae+ds-legacy-props-helpers@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-props-helpers/dist/esm/propTypes/describe.js"),c=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/Input/DSInput.js");const a=({containerProps:s={},autoFocus:f=!1,disabled:r=!1,maxLength:l=255,minLength:p=0,fluidWidth:B=!1,placeholder:y,value:b="",hasError:L=!1,readOnly:R=!1,innerRef:$=null,type:G="text",min:O=void 0,max:U=void 0,clearable:V=!1,leftComponent:K=null,rightComponent:v=null,required:N=!1,variant:H,disableTooltip:w,id:I,...F})=>(0,n.jsx)(c._C,{...F,"aria-label":I?void 0:F["aria-label"]||"Text Box","aria-describedby":F["aria-describedby"]||`${I?`${I}_feedback_message`:""}`,autoFocus:f,clearable:V,containerProps:s,disabled:r,fluidWidth:B,hasError:L,innerRef:$,leftComponent:K,max:U,maxLength:l,min:O,minLength:p,placeholder:y,readOnly:R,required:N,rightComponent:v,role:"textbox",type:G,value:b,variant:H,disableTooltip:w,id:I}),_={containerProps:t.A.shape({}).description("inject props at textbox wrapper"),autoFocus:t.A.bool.description("Whether the text box uses auto focus or not"),disabled:t.A.bool.description("Whether the text box is disabled or not"),maxLength:t.A.number.description("Max length for the text box"),minLength:t.A.number.description("Min length for the text box"),fluidWidth:t.A.bool.description("Make the content of the text box fit the container or not"),placeholder:t.A.string.description("Placeholder for the text box"),value:t.A.string.description("Default value once the component is initialized"),hasError:t.A.bool.description("Whether the text box has error or not"),readOnly:t.A.bool.description("Whether the text box is read only or not"),min:t.A.number.description("html min prop for input"),max:t.A.number.description("html max prop for input"),clearable:t.A.bool.description("Whether the text box is clearable or not"),leftComponent:t.A.element.description("Component to be added at the left side of the text box"),rightComponent:t.A.element.description("Component to be added at the right side of the text box"),required:t.A.bool.description("Whether the text box is required or not"),variant:t.A.string.description("variant-default','variant-focus','variant-active','variant-disabled'"),type:t.A.string.description("html input type"),innerRef:t.A.oneOfType([t.A.func,t.A.object]).description("internal ref"),disableTooltip:t.A.bool.description("Whether to show a tooltip or not when text does not fit").defaultValue(!0)};a.propTypes=_,a.displayName="DSTextBox";const x=(0,h.A)(a);x.propTypes=_;var d=null}}]);

package/demo/docs/{view-fields-input-mask-index-stories.38198ecb.iframe.bundle.js → view-fields-input-mask-index-stories.4a1fbd54.iframe.bundle.js}

@@ -1,4 +1,4 @@
-"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[6729],{"./lib/view/fields/form-layout-block-item/index.tsx"(B,d,n){n.d(d,{B:()=>u});var k=n("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),e=n.n(k),l=n("./node_modules/.pnpm/@elliemae+ds-form-layout-blocks@3.57.7_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-blocks/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js"),p=n("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),c=n("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),o=["inputID","label"],u=function(a){var t=a.inputID,s=a.label,b=e()(a,o),M=(0,p.lN)({name:t}),m=M.errors,i=(0,p.Jt)(m,t),y=!!i,_=i?.message;return(0,c.jsx)(l.U,Object.assign({inputID:t,label:s,hasError:y,validationMessage:_},b))};u.displayName="FormLayoutBlockItem"},"./lib/view/fields/input-mask/index.stories.tsx"(B,d,n){n.r(d),n.d(d,{Basic:()=>T,__namedExportsOrder:()=>j,default:()=>D});var k=n("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/jsx.js"),e=n.n(k),l=n("./node_modules/.pnpm/@elliemae+ds-grid@3.57.7_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),p=n("./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"),c=n("./lib/view/form/index.tsx"),o=n("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),u=n.n(o),a=n("./node_modules/.pnpm/@elliemae+ds-legacy-form@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-form/dist/esm/InputMask/DSInputMask.js"),t=n("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),s=n("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),b=["name","defaultValue","rules","onChange","onBlur"],M=["onChange","onBlur"],m=function(r){var O=r.name,S=r.defaultValue,F=S===void 0?"":S,E=r.rules,V=E===void 0?{}:E,L=r.onChange,P=r.onBlur,C=u()(r,b);return e()(t.xI,{name:O,rules:V,defaultValue:F,render:function(A){var g=A.field,w=g.onChange,W=g.onBlur,R=u()(g,M);return(0,s.jsx)(a.e8,Object.assign({},C,R,{onChange:function(f){w(f),L&&L(f)},onBlur:function(f){W(),P&&P(f)}}))}})};m.displayName="InputMask";var i=n("./node_modules/.pnpm/@elliemae+ds-legacy-form@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-form/dist/esm/InputMask/MaskTypes.js"),y=n("./lib/view/fields/form-layout-block-item/index.tsx"),_=n("./lib/view/fields/watch-value.tsx"),v,h=`
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[6729],{"./lib/view/fields/form-layout-block-item/index.tsx"(B,d,n){n.d(d,{B:()=>u});var k=n("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),e=n.n(k),l=n("./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"),p=n("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),c=n("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),o=["inputID","label"],u=function(a){var t=a.inputID,s=a.label,b=e()(a,o),M=(0,p.lN)({name:t}),m=M.errors,i=(0,p.Jt)(m,t),y=!!i,_=i?.message;return(0,c.jsx)(l.U,Object.assign({inputID:t,label:s,hasError:y,validationMessage:_},b))};u.displayName="FormLayoutBlockItem"},"./lib/view/fields/watch-value.tsx"(B,d,n){n.d(d,{n:()=>t});var k=n("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/jsx.js"),e=n.n(k),l=n("./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=n("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),c=n("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),o,u=l.Ay.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),a=l.Ay.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),t=function(s){var b=s.name,M=s.label,m=(0,c.xW)(),i=m.watch,y=i(b,!1)||"";return e()(p.Ay,{},void 0,e()(u,{},void 0,o||(o=e()("h4",{},void 0,"Form Data:")),e()(a,{},void 0,e()("div",{},void 0,M," : ",e()("strong",{},void 0,JSON.stringify(y))))))};t.displayName="WatchValue"},"./lib/view/form/index.tsx"(B,d,n){n.d(d,{l:()=>c});var k=n("./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"),e=n("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),l=n("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),p=k.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),c=function(o){var u=o.classname,a=o.reactHookFormProps,t=a===void 0?{mode:"onBlur"}:a,s=o.children,b=o.onSubmit,M=(0,e.mN)(t),m={};b&&(m.onSubmit=M.handleSubmit(b));var i=Object.assign(M,{formProps:t});return(0,l.jsx)(e.Op,Object.assign({},i,{children:(0,l.jsx)(p,Object.assign({className:u},m,{children:s}))}))};c.displayName="Form"},"./lib/view/fields/input-mask/index.stories.tsx"(B,d,n){n.r(d),n.d(d,{Basic:()=>T,__namedExportsOrder:()=>j,default:()=>D});var k=n("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/jsx.js"),e=n.n(k),l=n("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),p=n("./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"),c=n("./lib/view/form/index.tsx"),o=n("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),u=n.n(o),a=n("./node_modules/.pnpm/@elliemae+ds-legacy-form@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-form/dist/esm/InputMask/DSInputMask.js"),t=n("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),s=n("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),b=["name","defaultValue","rules","onChange","onBlur"],M=["onChange","onBlur"],m=function(r){var O=r.name,S=r.defaultValue,F=S===void 0?"":S,E=r.rules,V=E===void 0?{}:E,L=r.onChange,P=r.onBlur,C=u()(r,b);return e()(t.xI,{name:O,rules:V,defaultValue:F,render:function(A){var g=A.field,w=g.onChange,W=g.onBlur,R=u()(g,M);return(0,s.jsx)(a.e8,Object.assign({},C,R,{onChange:function(f){w(f),L&&L(f)},onBlur:function(f){W(),P&&P(f)}}))}})};m.displayName="InputMask";var i=n("./node_modules/.pnpm/@elliemae+ds-legacy-form@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-form/dist/esm/InputMask/MaskTypes.js"),y=n("./lib/view/fields/form-layout-block-item/index.tsx"),_=n("./lib/view/fields/watch-value.tsx"),v,h=`
     
     // @ts-nocheck
     // @ts-ignore
@@ -222,4 +222,4 @@ Basic.args = {
     required: { value: true, message: 'Please enter OTP' },
   },
 };
-`,locationsMap:{basic:{startLoc:{col:40,line:14},endLoc:{col:1,line:28},startBody:{col:40,line:14},endBody:{col:1,line:28}}}}},title:"Components/Form/Controls/InputMask",component:m};var I=function(r){return e()(l.Ay,{p:"m"},void 0,e()(c.l,{},void 0,e()(y.B,{inputID:"otp",label:"Enter One time passcode",required:!0},void 0,(0,s.jsx)(m,Object.assign({},r))),v||(v=e()(p.e,{},void 0,"Submit")),(0,s.jsx)(_.n,Object.assign({label:"Enter One time passcode"},r))))};I.displayName="Template";var T=I.bind({});T.args={name:"otp",id:"otp",mask:function(r){return i.v.NUMBER({decimalLimit:2,integerLimit:8,allowDecimal:!0})(r)},rules:{required:{value:!0,message:"Please enter OTP"}}};var j=["Basic"]},"./lib/view/fields/watch-value.tsx"(B,d,n){n.d(d,{n:()=>t});var k=n("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/jsx.js"),e=n.n(k),l=n("./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=n("./node_modules/.pnpm/@elliemae+ds-grid@3.57.7_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),c=n("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),o,u=l.Ay.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),a=l.Ay.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),t=function(s){var b=s.name,M=s.label,m=(0,c.xW)(),i=m.watch,y=i(b,!1)||"";return e()(p.Ay,{},void 0,e()(u,{},void 0,o||(o=e()("h4",{},void 0,"Form Data:")),e()(a,{},void 0,e()("div",{},void 0,M," : ",e()("strong",{},void 0,JSON.stringify(y))))))};t.displayName="WatchValue"},"./lib/view/form/index.tsx"(B,d,n){n.d(d,{l:()=>c});var k=n("./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"),e=n("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),l=n("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),p=k.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),c=function(o){var u=o.classname,a=o.reactHookFormProps,t=a===void 0?{mode:"onBlur"}:a,s=o.children,b=o.onSubmit,M=(0,e.mN)(t),m={};b&&(m.onSubmit=M.handleSubmit(b));var i=Object.assign(M,{formProps:t});return(0,l.jsx)(e.Op,Object.assign({},i,{children:(0,l.jsx)(p,Object.assign({className:u},m,{children:s}))}))};c.displayName="Form"}}]);
+`,locationsMap:{basic:{startLoc:{col:40,line:14},endLoc:{col:1,line:28},startBody:{col:40,line:14},endBody:{col:1,line:28}}}}},title:"Components/Form/Controls/InputMask",component:m};var I=function(r){return e()(l.Ay,{p:"m"},void 0,e()(c.l,{},void 0,e()(y.B,{inputID:"otp",label:"Enter One time passcode",required:!0},void 0,(0,s.jsx)(m,Object.assign({},r))),v||(v=e()(p.e,{},void 0,"Submit")),(0,s.jsx)(_.n,Object.assign({label:"Enter One time passcode"},r))))};I.displayName="Template";var T=I.bind({});T.args={name:"otp",id:"otp",mask:function(r){return i.v.NUMBER({decimalLimit:2,integerLimit:8,allowDecimal:!0})(r)},rules:{required:{value:!0,message:"Please enter OTP"}}};var j=["Basic"]}}]);

package/demo/{view-fields-input-text-index-stories.da5b7794.iframe.bundle.js → docs/view-fields-input-text-index-stories.fc78135c.iframe.bundle.js}

@@ -1,4 +1,4 @@
-"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[1764],{"./lib/view/fields/form-layout-block-item/index.tsx"(B,i,e){e.d(i,{B:()=>p});var f=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),t=e.n(f),s=e("./node_modules/.pnpm/@elliemae+ds-form-layout-blocks@3.57.7_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-blocks/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js"),d=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"),o=["inputID","label"],p=function(m){var n=m.inputID,r=m.label,_=t()(m,o),l=(0,d.lN)({name:n}),c=l.errors,a=(0,d.Jt)(c,n),x=!!a,b=a?.message;return(0,u.jsx)(s.U,Object.assign({inputID:n,label:r,hasError:x,validationMessage:b},_))};p.displayName="FormLayoutBlockItem"},"./lib/view/fields/input-text/index.stories.tsx"(B,i,e){e.r(i),e.d(i,{Basic:()=>x,__namedExportsOrder:()=>b,default:()=>c});var f=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(f),s=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.7_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),d=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"),o=e("./lib/view/fields/input-text/index.tsx"),p=e("./lib/view/fields/form-layout-block-item/index.tsx"),m=e("./lib/view/fields/watch-value.tsx"),n=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),r,_=`
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[1764],{"./lib/view/fields/form-layout-block-item/index.tsx"(B,i,e){e.d(i,{B:()=>p});var f=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),t=e.n(f),s=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"),d=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"),o=["inputID","label"],p=function(m){var n=m.inputID,r=m.label,_=t()(m,o),l=(0,d.lN)({name:n}),c=l.errors,a=(0,d.Jt)(c,n),x=!!a,b=a?.message;return(0,u.jsx)(s.U,Object.assign({inputID:n,label:r,hasError:x,validationMessage:b},_))};p.displayName="FormLayoutBlockItem"},"./lib/view/fields/input-text/index.tsx"(B,i,e){e.d(i,{S:()=>n});var f=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(f),s=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),d=e.n(s),u=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"),o=e("./node_modules/.pnpm/react-hook-form@7.70.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"),m=["name","defaultValue","rules"],n=function(r){var _=r.name,l=r.defaultValue,c=l===void 0?"":l,a=r.rules,x=a===void 0?{}:a,b=d()(r,m);return t()(o.xI,{name:_,defaultValue:c,rules:x,render:function(I){var v=I.field,T=I.fieldState.error;return(0,p.jsx)(u.B,Object.assign({hasError:!!T},v,b))}})};n.displayName="InputText"},"./lib/view/fields/watch-value.tsx"(B,i,e){e.d(i,{n:()=>n});var f=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(f),s=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"),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"),u=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),o,p=s.Ay.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),m=s.Ay.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),n=function(r){var _=r.name,l=r.label,c=(0,u.xW)(),a=c.watch,x=a(_,!1)||"";return t()(d.Ay,{},void 0,t()(p,{},void 0,o||(o=t()("h4",{},void 0,"Form Data:")),t()(m,{},void 0,t()("div",{},void 0,l," : ",t()("strong",{},void 0,JSON.stringify(x))))))};n.displayName="WatchValue"},"./lib/view/form/index.tsx"(B,i,e){e.d(i,{l:()=>u});var f=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.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),s=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),d=f.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),u=function(o){var p=o.classname,m=o.reactHookFormProps,n=m===void 0?{mode:"onBlur"}:m,r=o.children,_=o.onSubmit,l=(0,t.mN)(n),c={};_&&(c.onSubmit=l.handleSubmit(_));var a=Object.assign(l,{formProps:n});return(0,s.jsx)(t.Op,Object.assign({},a,{children:(0,s.jsx)(d,Object.assign({className:p},c,{children:r}))}))};u.displayName="Form"},"./lib/view/fields/input-text/index.stories.tsx"(B,i,e){e.r(i),e.d(i,{Basic:()=>x,__namedExportsOrder:()=>b,default:()=>c});var f=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(f),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"),d=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"),o=e("./lib/view/fields/input-text/index.tsx"),p=e("./lib/view/fields/form-layout-block-item/index.tsx"),m=e("./lib/view/fields/watch-value.tsx"),n=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),r,_=`
     
     // @ts-nocheck
     // @ts-ignore
@@ -158,4 +158,4 @@ Basic.args = {
     required: { value: true, message: 'Please enter firstname' },
   },
 };
-`,locationsMap:{basic:{startLoc:{col:64,line:15},endLoc:{col:1,line:25},startBody:{col:64,line:15},endBody:{col:1,line:25}}}}},title:"Components/Form/Controls/InputText",component:o.S};var a=function(I){return t()(s.Ay,{p:"m"},void 0,t()(u.l,{},void 0,t()(p.B,{inputID:"firstname",label:"First Name",required:!0},void 0,(0,n.jsx)(o.S,Object.assign({},I))),r||(r=t()(d.e,{},void 0,"Submit")),(0,n.jsx)(m.n,Object.assign({label:"First Name"},I))))};a.displayName="Template";var x=a.bind({});x.args={id:"firstname",name:"firstname",defaultValue:"John",rules:{required:{value:!0,message:"Please enter firstname"}}};var b=["Basic"]},"./lib/view/fields/input-text/index.tsx"(B,i,e){e.d(i,{S:()=>n});var f=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(f),s=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),d=e.n(s),u=e("./node_modules/.pnpm/@elliemae+ds-form-input-text@3.57.7_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-input-text/dist/esm/DSInputText.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"),p=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),m=["name","defaultValue","rules"],n=function(r){var _=r.name,l=r.defaultValue,c=l===void 0?"":l,a=r.rules,x=a===void 0?{}:a,b=d()(r,m);return t()(o.xI,{name:_,defaultValue:c,rules:x,render:function(I){var v=I.field,T=I.fieldState.error;return(0,p.jsx)(u.B,Object.assign({hasError:!!T},v,b))}})};n.displayName="InputText"},"./lib/view/fields/watch-value.tsx"(B,i,e){e.d(i,{n:()=>n});var f=e("./node_modules/.pnpm/@babel+runtime@7.28.6/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(f),s=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"),d=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.7_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),u=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),o,p=s.Ay.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),m=s.Ay.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),n=function(r){var _=r.name,l=r.label,c=(0,u.xW)(),a=c.watch,x=a(_,!1)||"";return t()(d.Ay,{},void 0,t()(p,{},void 0,o||(o=t()("h4",{},void 0,"Form Data:")),t()(m,{},void 0,t()("div",{},void 0,l," : ",t()("strong",{},void 0,JSON.stringify(x))))))};n.displayName="WatchValue"},"./lib/view/form/index.tsx"(B,i,e){e.d(i,{l:()=>u});var f=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.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),s=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),d=f.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),u=function(o){var p=o.classname,m=o.reactHookFormProps,n=m===void 0?{mode:"onBlur"}:m,r=o.children,_=o.onSubmit,l=(0,t.mN)(n),c={};_&&(c.onSubmit=l.handleSubmit(_));var a=Object.assign(l,{formProps:n});return(0,s.jsx)(t.Op,Object.assign({},a,{children:(0,s.jsx)(d,Object.assign({className:p},c,{children:r}))}))};u.displayName="Form"}}]);
+`,locationsMap:{basic:{startLoc:{col:64,line:15},endLoc:{col:1,line:25},startBody:{col:64,line:15},endBody:{col:1,line:25}}}}},title:"Components/Form/Controls/InputText",component:o.S};var a=function(I){return t()(s.Ay,{p:"m"},void 0,t()(u.l,{},void 0,t()(p.B,{inputID:"firstname",label:"First Name",required:!0},void 0,(0,n.jsx)(o.S,Object.assign({},I))),r||(r=t()(d.e,{},void 0,"Submit")),(0,n.jsx)(m.n,Object.assign({label:"First Name"},I))))};a.displayName="Template";var x=a.bind({});x.args={id:"firstname",name:"firstname",defaultValue:"John",rules:{required:{value:!0,message:"Please enter firstname"}}};var b=["Basic"]}}]);