@elliemae/pui-app-sdk 5.31.1 → 5.32.0

package/demo/view-fields-large-text-box-index-stories.84253145.iframe.bundle.js

@@ -0,0 +1,254 @@
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[1491],{"./lib/view/fields/form-layout-block-item/index.tsx":(C,c,e)=>{e.d(c,{B:()=>j});var d=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),o=e.n(d),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"),x=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),g=["inputID","label"],j=function(f){var a=f.inputID,n=f.label,y=o()(f,g),m=(0,u.lN)({name:a}),p=m.errors,r=(0,u.Jt)(p,a),k=!!r,M=r?.message;return(0,x.jsx)(l.U,Object.assign({inputID:a,label:n,hasError:k,validationMessage:M},y))};j.displayName="FormLayoutBlockItem"},"./lib/view/fields/large-text-box/index.stories.tsx":(C,c,e)=>{e.r(c),e.d(c,{Basic:()=>H,__namedExportsOrder:()=>z,default:()=>ee});var d=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(d),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"),x=e("./lib/view/form/index.tsx"),g=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),j=e.n(g),f=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),a=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),n=e("./node_modules/.pnpm/@elliemae+ds-legacy-props-helpers@1.0.16_@elliemae+pui-theme@2.7.0_react-dom@17.0.2/node_modules/@elliemae/ds-legacy-props-helpers/dist/esm/useDeprecateComponent/index.js"),y=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"),m=e("./node_modules/.pnpm/@elliemae+ds-legacy-classnames@1.0.16/node_modules/@elliemae/ds-legacy-classnames/dist/esm/aggregatedClasses.js"),p=e("./node_modules/.pnpm/@elliemae+ds-legacy-classnames@1.0.16/node_modules/@elliemae/ds-legacy-classnames/dist/esm/classNameManager.js"),r=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");const k={containerProps:r.A.object.description("Injected props to wrapper element of component"),autoFocus:r.A.bool.description("Whether uses auto focus or not"),className:r.A.string.description("CSS class"),disabled:r.A.bool.description("Whether is disabled or not"),name:r.A.string.description("HTML form name property"),id:r.A.number.description("HTML id"),maxLength:r.A.number.description("Max length for text to be entered"),minLength:r.A.number.description("Min length for text to be entered"),placeholder:r.A.string.description("Placeholder for the text"),onClick:r.A.func.description("Allows a function that is triggered once the input text is clicked"),onChange:r.A.func.description("Allows a function that is triggered once the input text changes"),onFocus:r.A.func.description("Allows a function that is triggered once the input text is focused"),onBlur:r.A.func.description("Allows a function that is triggered once the input text loses focus"),onKeyUp:r.A.func.description("Allows a function that is triggered once in the input a keyboard key is released"),onKeyDown:r.A.func.description("Allows a function that is triggered once a key is being pressed"),onPaste:r.A.func.description("Allows a function that is triggered once the input text is pasted"),value:r.A.string.description("Default value once the component is initialized"),hasError:r.A.bool.description("Whether the input text has error or not"),required:r.A.bool.description("Whether the input text is required or not"),readOnly:r.A.bool.description("Whether the input text is read only or not"),resize:r.A.string.description("The resizable handle feature is being deprocated due to the inability to fully comply with accessibility standards and would be less than optimal for the best user experience. The auto-resize functionality will repalce it and complies with accessibility standards and guidelines.").deprecated({version:"4.x"}),innerRef:r.A.func.description("ref forwarded to component"),ariaLabel:r.A.string.description("a11y aria label"),ariaAutocomplete:r.A.string.description(""),role:r.A.string.description("Type of input. Ex: textbox"),characterLimitCounter:r.A.number.description("it will show a counter/limit if the value is greater than 0"),tabIndex:r.A.string.description("Tab index html property.")},M={containerProps:{},autoFocus:!1,className:"",disabled:!1,name:"",id:null,maxLength:null,minLength:0,placeholder:"",onClick:()=>null,onChange:()=>null,onFocus:()=>null,onBlur:()=>null,onKeyUp:()=>null,onKeyDown:()=>null,onPaste:()=>null,value:"",hasError:!1,required:!1,readOnly:!1,resize:"vertical",innerRef:null,ariaLabel:"Enter text",ariaAutocomplete:"none",role:"textbox",characterLimitCounter:0,rows:3,errorLimit:"Please limit your entry to",tabIndex:""},v=(0,m.A)("div")("counter","textarea",({limitError:h})=>({"limit-error":h})),I=({containerProps:h,autoFocus:O,className:t,disabled:s,name:A,id:B,maxLength:L,minLength:_,placeholder:T,onClick:$,onChange:q,onFocus:te,onBlur:re,onKeyUp:V,onKeyDown:Y,onPaste:oe,value:G,hasError:X,required:ne,readOnly:se,resize:R,innerRef:ae,ariaLabel:de,ariaAutocomplete:le,role:F,characterLimitCounter:W,rows:N,errorLimit:U,tabIndex:ue})=>{(0,n.y)({componentName:"ds-form/LargeInputText",version:"TBD Date: 2023 Q3"});const ie=(0,f.useMemo)(()=>W<String(G).length&&W>0,[W,G]),{cssClassName:me,classNameElement:pe,classNameBlock:ce}=(0,p.Ay)("form-element-textarea","text",{hasError:ie||X,readOnly:se,disabled:s}),he=ge=>{V(ge)};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{...h,className:`${me} ${t}`,children:(0,a.jsx)("div",{className:ce("wrapper"),children:(0,a.jsx)("textarea",{ref:ae,"aria-autocomplete":le,"aria-label":de,"aria-multiline":!0,"aria-placeholder":T,"aria-required":ne,autoFocus:O,className:pe("textarea"),"data-testid":"ds-large-input_main-component",disabled:s,id:B,maxLength:L,minLength:_,name:A,onBlur:re,onChange:q,onClick:$,onFocus:te,onKeyDown:Y,onKeyUp:he,onPaste:oe,placeholder:T,role:F,rows:String(N),style:{resize:R},value:G,tabIndex:ue})})}),W>0&&(0,a.jsx)(v,{classProps:{limitError:ie},"data-testid":"counter-area",children:`${ie?`${U} ${W} characters.   `:""}${String(G).length} / ${W}`})]})};I.propTypes=k,I.defaultProps=M,I.displayName="DSLargeInputText";const J=(0,y.A)(I).description("A large input");J.propTypes=k;var i=null,P=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),b=["name","defaultValue","rules"],S=function(h){var O=h.name,t=h.defaultValue,s=t===void 0?"":t,A=h.rules,B=A===void 0?{}:A,L=j()(h,b);return o()(P.xI,{name:O,rules:B,defaultValue:s,render:function(_){var T=_.field;return(0,a.jsx)(I,Object.assign({},L,T))}})};S.displayName="LargeTextBox";var E=e("./lib/view/fields/form-layout-block-item/index.tsx"),Q=e("./lib/view/fields/watch-value.tsx"),D,Z=`
+    
+    // @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 { LargeTextBox, LargeTextBoxProps } 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/LargeTextBox',\\n  component: LargeTextBox,\\n} as Meta;\\n\\nconst Template: Story<LargeTextBoxProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"feedback\\" label=\\"Enter Feedback\\" required>\\n        <LargeTextBox {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Enter Feedback\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'feedback',\\n  name: 'feedback',\\n  rules: {\\n    required: { value: true, message: 'Please enter feedback' },\\n  },\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":43,"line":14},"endLoc":{"col":1,"line":24},"startBody":{"col":43,"line":14},"endBody":{"col":1,"line":24}}};
+    
+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 { LargeTextBox, LargeTextBoxProps } 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 { LargeTextBox, LargeTextBoxProps } 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/LargeTextBox',\\n  component: LargeTextBox,\\n} as Meta;\\n\\nconst Template: Story<LargeTextBoxProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"feedback\\" label=\\"Enter Feedback\\" required>\\n        <LargeTextBox {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Enter Feedback\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'feedback',\\n  name: 'feedback',\\n  rules: {\\n    required: { value: true, message: 'Please enter feedback' },\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":43,"line":14},"endLoc":{"col":1,"line":24},"startBody":{"col":43,"line":14},"endBody":{"col":1,"line":24}}}},},
+  title: 'Components/Form/Controls/LargeTextBox',
+  component: LargeTextBox,
+} as Meta;
+
+const Template: Story<LargeTextBoxProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="feedback" label="Enter Feedback" required>
+        <LargeTextBox {...args} />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Enter Feedback" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'feedback',
+  name: 'feedback',
+  rules: {
+    required: { value: true, message: 'Please enter feedback' },
+  },
+};
+`,K={Basic:{startLoc:{col:43,line:22},endLoc:{col:1,line:32},startBody:{col:43,line:22},endBody:{col:1,line:32}}},Z=`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 { LargeTextBox, LargeTextBoxProps } from './index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {
+  title: 'Components/Form/Controls/LargeTextBox',
+  component: LargeTextBox,
+} as Meta;
+
+const Template: Story<LargeTextBoxProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="feedback" label="Enter Feedback" required>
+        <LargeTextBox {...args} />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Enter Feedback" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'feedback',
+  name: 'feedback',
+  rules: {
+    required: { value: true, message: 'Please enter feedback' },
+  },
+};
+`,K={Basic:{startLoc:{col:43,line:14},endLoc:{col:1,line:24},startBody:{col:43,line:14},endBody:{col:1,line:24}}};const ee={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 { LargeTextBox, LargeTextBoxProps } 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/LargeTextBox',\\n  component: LargeTextBox,\\n} as Meta;\\n\\nconst Template: Story<LargeTextBoxProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"feedback\\" label=\\"Enter Feedback\\" required>\\n        <LargeTextBox {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Enter Feedback\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'feedback',\\n  name: 'feedback',\\n  rules: {\\n    required: { value: true, message: 'Please enter feedback' },\\n  },\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":43,"line":14},"endLoc":{"col":1,"line":24},"startBody":{"col":43,"line":14},"endBody":{"col":1,"line":24}}};
+    
+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 { LargeTextBox, LargeTextBoxProps } 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 { LargeTextBox, LargeTextBoxProps } 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/LargeTextBox',\\n  component: LargeTextBox,\\n} as Meta;\\n\\nconst Template: Story<LargeTextBoxProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"feedback\\" label=\\"Enter Feedback\\" required>\\n        <LargeTextBox {...args} />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Enter Feedback\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'feedback',\\n  name: 'feedback',\\n  rules: {\\n    required: { value: true, message: 'Please enter feedback' },\\n  },\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":43,"line":14},"endLoc":{"col":1,"line":24},"startBody":{"col":43,"line":14},"endBody":{"col":1,"line":24}}}},},
+  title: 'Components/Form/Controls/LargeTextBox',
+  component: LargeTextBox,
+} as Meta;
+
+const Template: Story<LargeTextBoxProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="feedback" label="Enter Feedback" required>
+        <LargeTextBox {...args} />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Enter Feedback" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'feedback',
+  name: 'feedback',
+  rules: {
+    required: { value: true, message: 'Please enter feedback' },
+  },
+};
+`,locationsMap:{basic:{startLoc:{col:43,line:22},endLoc:{col:1,line:32},startBody:{col:43,line:22},endBody:{col:1,line:32}}}},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 { LargeTextBox, LargeTextBoxProps } from './index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {
+  title: 'Components/Form/Controls/LargeTextBox',
+  component: LargeTextBox,
+} as Meta;
+
+const Template: Story<LargeTextBoxProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="feedback" label="Enter Feedback" required>
+        <LargeTextBox {...args} />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Enter Feedback" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'feedback',
+  name: 'feedback',
+  rules: {
+    required: { value: true, message: 'Please enter feedback' },
+  },
+};
+`,locationsMap:{basic:{startLoc:{col:43,line:14},endLoc:{col:1,line:24},startBody:{col:43,line:14},endBody:{col:1,line:24}}}}},title:"Components/Form/Controls/LargeTextBox",component:S};var w=function(h){return o()(l.Ay,{p:"m"},void 0,o()(x.l,{},void 0,o()(E.B,{inputID:"feedback",label:"Enter Feedback",required:!0},void 0,(0,a.jsx)(S,Object.assign({},h))),D||(D=o()(u.e,{},void 0,"Submit")),(0,a.jsx)(Q.n,Object.assign({label:"Enter Feedback"},h))))};w.displayName="Template";var H=w.bind({});H.args={id:"feedback",name:"feedback",rules:{required:{value:!0,message:"Please enter feedback"}}};var z=["Basic"]},"./lib/view/fields/watch-value.tsx":(C,c,e)=>{e.d(c,{n:()=>a});var d=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(d),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"),x=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),g,j=l.Ay.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),f=l.Ay.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),a=function(n){var y=n.name,m=n.label,p=(0,x.xW)(),r=p.watch,k=r(y,!1)||"";return o()(u.Ay,{},void 0,o()(j,{},void 0,g||(g=o()("h4",{},void 0,"Form Data:")),o()(f,{},void 0,o()("div",{},void 0,m," : ",o()("strong",{},void 0,JSON.stringify(k))))))};a.displayName="WatchValue"},"./lib/view/form/index.tsx":(C,c,e)=>{e.d(c,{l:()=>x});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.esm.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"),l=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),u=d.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),x=function(g){var j=g.classname,f=g.reactHookFormProps,a=f===void 0?{mode:"onBlur"}:f,n=g.children,y=g.onSubmit,m=(0,o.mN)(a),p={};y&&(p.onSubmit=m.handleSubmit(y));var r=Object.assign(m,{formProps:a});return(0,l.jsx)(o.Op,Object.assign({},r,{children:(0,l.jsx)(u,Object.assign({className:j},p,{children:n}))}))};x.displayName="Form"},"./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":(C,c,e)=>{e.d(c,{U:()=>h});var d=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),o=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),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-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/describe.js"),x=e("./node_modules/.pnpm/uid@2.0.2/node_modules/uid/dist/index.mjs"),g=e("./node_modules/.pnpm/@elliemae+ds-icons@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-icons/dist/esm/AlertsSmallFill.js"),j=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/globalProps/globalAttributesPropTypes.js"),f=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/xstyledProps/xstyledPropTypes.js"),a=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propsPerSlot/getPropsPerSlotPropTypes.js"),n=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/PropTypes.js"),y=e("./node_modules/.pnpm/@elliemae+ds-system@3.54.6_@elliemae+pui-theme@2.13.0_lodash-es@4.17.21/node_modules/@elliemae/ds-system/dist/esm/styled/helpers.js");const m="DSFormlayoutblockitem",p={CONTAINER:"container",LABEL:"label",MESSAGE:"message",ERROR_MESSAGE:"error-message",COUNTER:"counter",MARK:"mark"},r=(0,y.lD)(m,p),k={isGroup:!1},M={...j.P,...f.w,...(0,a.Y)(m,p),children:n.A.node.isRequired.description("Input component. "),label:n.A.string.description("Label property for the input component. This property is required for accesibility purposes."),inputID:n.A.string.description("String that matches the input component's id. This property is required for accesibility purposes."),maxCharCounter:n.A.number.description("Max of characters allowed."),currentChar:n.A.number.description("Current counter of input text area"),feedbackMessage:n.A.string.description("Feedback message to show below the input component."),validationMessage:n.A.string.description("Validation message to show below the input component. It requires hasError property set to true to be visible."),hasError:n.A.bool.description("Helper boolean property for the validation message."),required:n.A.bool.description("Adds required extra styling."),optional:n.A.bool.description("Adds optional extra styling."),fitContent:n.A.bool.description("Set the width of the layout to the input component."),leftLabel:n.A.bool.description("Adds the label at the left of the input component."),hideLabel:n.A.bool.description("Hides the input label. It still requires label and labelFor property for accesibility purposes"),withHighlight:n.A.bool.description("Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab."),isGroup:n.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:n.A.bool.description("Adds icon error extra styling.")};var v=e("./node_modules/.pnpm/@elliemae+ds-system@3.54.6_@elliemae+pui-theme@2.13.0_lodash-es@4.17.21/node_modules/@elliemae/ds-system/dist/esm/styled/styled.js"),I=e("./node_modules/.pnpm/@elliemae+ds-system@3.54.6_@elliemae+pui-theme@2.13.0_lodash-es@4.17.21/node_modules/@elliemae/ds-system/dist/esm/xStyledWrapper.js"),J=e("./node_modules/.pnpm/@elliemae+ds-system@3.54.6_@elliemae+pui-theme@2.13.0_lodash-es@4.17.21/node_modules/@elliemae/ds-system/dist/esm/styled/system.js");const i=(0,v.I)("div",{name:m,slot:p.CONTAINER})`
+  position: relative;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  ${I.L1}
+  ${({fitContent:t})=>t?"width: fit-content;":void 0}
+  ${({isGroup:t})=>t?"border: none":""};
+  ${({leftLabel:t,hideLabel:s})=>t&&!s?"grid-template-columns: auto 1fr;":void 0}
+  align-items: center;
+  ${({theme:t,withHighlight:s})=>s?`
+  &::after {
+        position: absolute;
+        content: '';
+        left: -${t.space.xxs};
+        top: -${t.space.xxxs};
+        z-index: -1;
+        width: calc(100% + ${t.space.xs});
+        height: calc(100%  + ${t.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: -${t.space.xxs};
+            top: -${t.space.xxxs};
+            z-index: -1;
+            width: calc(100% + ${t.space.xs});
+            height: calc(100%  + ${t.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}
+`,P=(0,v.I)("label",{name:m,slot:p.LABEL})`
+  display: flex;
+  ${({theme:t,leftLabel:s})=>s?`padding-right: ${t.space.xxxs};`:void 0}
+  ${({hideLabel:t})=>t?`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}
+`,b=(0,J.AH)`
+  font-size: ${({theme:t})=>t.fontSizes.microText[200]};
+  text-align: right;
+  line-height: 1.231rem;
+  @media (max-width: ${({theme:t})=>t.breakpoints.small}) {
+    line-height: 1rem;
+  }
+  min-height: 15px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${({theme:t,hasError:s})=>s?t.colors.danger[900]:t.colors.neutral[500]};
+  ${({leftLabel:t,hideLabel:s})=>t&&!s?"grid-column: 1/3;":void 0}
+  font-style: normal;
+`,S=(0,v.I)("div",{name:m,slot:p.MESSAGE})`
+  ${b}
+`,E=(0,v.I)("div",{name:m,slot:p.ERROR_MESSAGE})`
+  ${b}
+`,Q=(0,v.I)("span",{name:m,slot:p.MARK})`
+  margin-left: ${({theme:t})=>t.space.xxxs};
+  ${({theme:t,required:s})=>s?`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 1rem;
+  font-size: 1.5rem;
+  :after {
+    content: '*';
+    color: ${t.colors.danger[900]};
+  }
+  `:`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  border: 1px solid ${t.colors.brand[600]};
+  `}
+`,D=v.I.div`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`,Z=(0,v.I)("span",{name:m,slot:p.COUNTER})`
+  justify-self: flex-end;
+  margin-left: 16px;
+  color: ${({theme:t,hasError:s})=>s?t.colors.danger[900]:t.colors.neutral[500]};
+`;var K=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/validation/typescriptValidator.js"),ee=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/defaultProps/useMemoMergePropsWithDefault.js"),w=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/globalProps/useGetGlobalAttributes.js"),H=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/xstyledProps/useGetXstyledProps.js");const z=t=>{(0,K.D)(t,M,m);const s=(0,ee.b)(t,k),A=(0,w.u)(s),B=(0,H.d)(s);return d.useMemo(()=>({globalAttributes:A,xstyledProps:B,propsWithDefault:s}),[A,B,s])},h=t=>{const{globalAttributes:s,xstyledProps:A,propsWithDefault:B}=z(t),{label:L,feedbackMessage:_,maxCharCounter:T,currentChar:$,validationMessage:q,inputID:te,children:re,hasError:V,leftLabel:Y,required:oe,optional:G,hideLabel:X,fitContent:ne,withHighlight:se,isGroup:R}=B,{className:ae,label:de,...le}=s,F=(0,d.useMemo)(()=>te??`form_layout_block_item_${(0,x.L)(6)}`,[te]),W=(0,d.useMemo)(()=>T!==void 0?["1fr","auto"]:["1fr"],[T]),N=(0,d.useCallback)(()=>B,[B]),U=(0,d.useCallback)(()=>({}),[]);return(0,o.jsxs)(i,{leftLabel:Y,fitContent:ne,hideLabel:X,withHighlight:se,as:R?"fieldset":"div",isGroup:R,className:ae,...A,...le,getOwnerProps:N,getOwnerPropsArguments:U,children:[(0,o.jsxs)(l.Ay,{cols:W,gutter:"xxs","aria-live":"polite",id:`${F}_remaining_characters`,children:[L?(0,o.jsxs)(P,{id:`${F}_block_label`,htmlFor:F,leftLabel:Y,hideLabel:X,"aria-hidden":R,getOwnerProps:N,getOwnerPropsArguments:U,children:[L,(oe||G)&&(0,o.jsx)(Q,{required:oe,children:G?(0,o.jsx)(D,{children:"Optional"}):null})]}):null,T!==void 0&&$!==void 0?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(Z,{hasError:$>T,getOwnerProps:N,getOwnerPropsArguments:U,children:`${$}/${T}`}),(0,o.jsx)(D,{children:$<T?`${T-$} characters remaining`:""})]}):null]}),R&&(0,o.jsx)(D,{as:"legend",children:`${L}. ${V&&q||!V&&_||""}`}),re,_&&!V?(0,o.jsx)(S,{"aria-live":"polite",leftLabel:Y,hideLabel:X,"aria-hidden":R,id:`${F}_feedback_message`,getOwnerProps:N,getOwnerPropsArguments:U,children:_}):(0,o.jsx)(D,{id:`${F}_feedback_message`}),q&&V?(0,o.jsxs)(E,{hasError:V,leftLabel:Y,hideLabel:X,role:"alert",id:`${F}_error_message`,getOwnerProps:N,getOwnerPropsArguments:U,children:[(0,o.jsx)(g.A,{width:8,height:8,color:["danger","900"],style:{marginBottom:"2px"}}),"\xA0",`${q}`]}):(0,o.jsx)(D,{id:`${F}_error_message`})]})};h.displayName="DSFormLayoutBlockItem";const O=(0,u.A)(h);O.propTypes=M},"./node_modules/.pnpm/@elliemae+ds-icons@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-icons/dist/esm/AlertsSmallFill.js":(C,c,e)=>{e.d(c,{A:()=>x});var d=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),o=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),l=e("./node_modules/.pnpm/@elliemae+ds-icons@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-icons/dist/esm/utils/SvgIcon.js"),x=g=>(0,o.jsx)(l.Ah,{width:12,height:13,...g,viewBox:"0 0 12 13",children:(0,o.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-classnames@1.0.16/node_modules/@elliemae/ds-legacy-classnames/dist/esm/aggregatedClasses.js":(C,c,e)=>{e.d(c,{A:()=>J});var d=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),o=e("./node_modules/.pnpm/obj-str@1.1.0/node_modules/obj-str/dist/obj-str.mjs"),l=e("./node_modules/.pnpm/@elliemae+ds-legacy-classnames@1.0.16/node_modules/@elliemae/ds-legacy-classnames/dist/esm/classNameManager.js"),u=e("./node_modules/.pnpm/@elliemae+ds-legacy-classnames@1.0.16/node_modules/@elliemae/ds-legacy-classnames/dist/esm/dimsum.config.js");const a={...{accept:!0,acceptCharset:!0,accessKey:!0,action:!0,allowFullScreen:!0,allowTransparency:!0,alt:!0,async:!0,autoComplete:!0,autoFocus:!0,autoPlay:!0,capture:!0,cellPadding:!0,cellSpacing:!0,charSet:!0,challenge:!0,checked:!0,classID:!0,className:!0,cols:!0,colSpan:!0,content:!0,contentEditable:!0,contextMenu:!0,controls:!0,coords:!0,crossOrigin:!0,data:!0,dateTime:!0,defer:!0,dir:!0,disabled:!0,download:!0,draggable:!0,encType:!0,form:!0,formAction:!0,formEncType:!0,formMethod:!0,formNoValidate:!0,formTarget:!0,frameBorder:!0,headers:!0,height:!0,hidden:!0,high:!0,href:!0,hrefLang:!0,htmlFor:!0,httpEquiv:!0,icon:!0,id:!0,inputMode:!0,keyParams:!0,keyType:!0,label:!0,lang:!0,list:!0,loop:!0,low:!0,manifest:!0,marginHeight:!0,marginWidth:!0,max:!0,maxLength:!0,media:!0,mediaGroup:!0,method:!0,min:!0,minLength:!0,multiple:!0,muted:!0,name:!0,noValidate:!0,open:!0,optimum:!0,pattern:!0,placeholder:!0,poster:!0,preload:!0,radioGroup:!0,readOnly:!0,rel:!0,required:!0,role:!0,rows:!0,rowSpan:!0,sandbox:!0,scope:!0,scoped:!0,scrolling:!0,seamless:!0,selected:!0,shape:!0,size:!0,sizes:!0,span:!0,spellCheck:!0,src:!0,srcDoc:!0,srcSet:!0,start:!0,step:!0,style:!0,summary:!0,tabIndex:!0,target:!0,title:!0,type:!0,useMap:!0,value:!0,width:!0,wmode:!0,wrap:!0},...{clipPath:!0,cx:!0,cy:!0,d:!0,dx:!0,dy:!0,fill:!0,fillOpacity:!0,fontFamily:!0,fontSize:!0,fx:!0,fy:!0,gradientTransform:!0,gradientUnits:!0,markerEnd:!0,markerMid:!0,markerStart:!0,offset:!0,opacity:!0,patternContentUnits:!0,patternUnits:!0,points:!0,preserveAspectRatio:!0,r:!0,rx:!0,ry:!0,spreadMethod:!0,stopColor:!0,stopOpacity:!0,stroke:!0,strokeDasharray:!0,strokeLinecap:!0,strokeOpacity:!0,strokeWidth:!0,textAnchor:!0,transform:!0,version:!0,viewBox:!0,x1:!0,x2:!0,x:!0,xlinkActuate:!0,xlinkArcrole:!0,xlinkHref:!0,xlinkRole:!0,xlinkShow:!0,xlinkTitle:!0,xlinkType:!0,xmlBase:!0,xmlLang:!0,xmlSpace:!0,y1:!0,y2:!0,y:!0},...{autoCapitalize:!0,autoCorrect:!0,property:!0,itemProp:!0,itemScope:!0,itemType:!0,itemRef:!0,itemID:!0,unselectable:!0,results:!0,autoSave:!0},...{onCopy:!0,onCut:!0,onPaste:!0,onCompositionEnd:!0,onCompositionStart:!0,onCompositionUpdate:!0,onKeyDown:!0,onKeyPress:!0,onKeyUp:!0,onFocus:!0,onBlur:!0,onChange:!0,onInput:!0,onInvalid:!0,onReset:!0,onSubmit:!0,onError:!0,onLoad:!0,onClick:!0,onContextMenu:!0,onDoubleClick:!0,onDrag:!0,onDragEnd:!0,onDragEnter:!0,onDragExit:!0,onDragLeave:!0,onDragOver:!0,onDragStart:!0,onDrop:!0,onMouseDown:!0,onMouseEnter:!0,onMouseLeave:!0,onMouseMove:!0,onMouseOut:!0,onMouseOver:!0,onMouseUp:!0,onPointerDown:!0,onPointerMove:!0,onPointerUp:!0,onPointerCancel:!0,onGotPointerCapture:!0,onLostPointerCapture:!0,onPointerEnter:!0,onPointerLeave:!0,onPointerOver:!0,onPointerOut:!0,onSelect:!0,onTouchCancel:!0,onTouchEnd:!0,onTouchMove:!0,onTouchStart:!0,onScroll:!0,onWheel:!0,onAbort:!0,onCanPlay:!0,onCanPlayThrough:!0,onDurationChange:!0,onEmptied:!0,onEncrypted:!0,onEnded:!0,onLoadedData:!0,onLoadedMetadata:!0,onLoadStart:!0,onPause:!0,onPlay:!0,onPlaying:!0,onProgress:!0,onRateChange:!0,onSeeked:!0,onSeeking:!0,onStalled:!0,onSuspend:!0,onTimeUpdate:!0,onVolumeChange:!0,onWaiting:!0,onAnimationStart:!0,onAnimationEnd:!0,onAnimationIteration:!0,onTransitionEnd:!0,onToggle:!0}},n=i=>i.substring(0,5)==="data-",y=i=>i.substring(0,6)==="aria-",m=i=>a[i]===!0||n(i)||y(i)||i.toLowerCase()===i,p={a:!0,abbr:!0,address:!0,area:!0,article:!0,aside:!0,audio:!0,b:!0,base:!0,bdi:!0,bdo:!0,big:!0,blockquote:!0,body:!0,br:!0,button:!0,canvas:!0,caption:!0,cite:!0,code:!0,col:!0,colgroup:!0,data:!0,datalist:!0,dd:!0,del:!0,details:!0,dfn:!0,dialog:!0,div:!0,dl:!0,dt:!0,em:!0,embed:!0,fieldset:!0,figcaption:!0,figure:!0,footer:!0,form:!0,h1:!0,h2:!0,h3:!0,h4:!0,h5:!0,h6:!0,head:!0,header:!0,hr:!0,html:!0,i:!0,iframe:!0,img:!0,input:!0,ins:!0,kbd:!0,keygen:!0,label:!0,legend:!0,li:!0,link:!0,main:!0,map:!0,mark:!0,menu:!0,menuitem:!0,meta:!0,meter:!0,nav:!0,noscript:!0,object:!0,ol:!0,optgroup:!0,option:!0,output:!0,p:!0,param:!0,picture:!0,pre:!0,progress:!0,q:!0,rp:!0,rt:!0,ruby:!0,s:!0,samp:!0,script:!0,section:!0,select:!0,small:!0,source:!0,span:!0,strong:!0,style:!0,sub:!0,summary:!0,sup:!0,table:!0,tbody:!0,td:!0,textarea:!0,tfoot:!0,th:!0,thead:!0,time:!0,title:!0,tr:!0,track:!0,u:!0,ul:!0,var:!0,video:!0,wbr:!0},r=i=>p[i]===!0,k=u.A.classNamePrefix,M=(i,P,b)=>`${k}-${i}${P?`__${P}`:""}--${b}`,v=(i,P,b)=>i?Object.keys(i).reduce((S,E)=>({...S,[`${M(P,b,E)}`]:i[E]}),{}):[];var J=(i,P)=>(b,S,E,Q={})=>d.forwardRef(({innerRef:D,children:Z,classProps:K,useComponent:ee,className:w,as:H,...z},h)=>{let O=v(E,b,S);typeof E=="function"&&(O=v(E({...z,...K,className:w}),b,S));const t=(0,o.A)(O),{prefix:s,propsToRemoveFromFinalElement:A=[]}=Q,{cssClassName:B}=(0,l.SR)(b,null,{...K},{prefix:s,element:S}),L={...P,...z};return A.forEach(_=>{delete L[_]}),r(b)&&Object.keys(L).forEach(_=>{m(_)||delete L[_]}),d.createElement(H||i,{ref:D||h,className:[B,t,w].join(" "),...L},Z)})},"./node_modules/.pnpm/@elliemae+ds-legacy-props-helpers@1.0.16_@elliemae+pui-theme@2.7.0_react-dom@17.0.2/node_modules/@elliemae/ds-legacy-props-helpers/dist/esm/useDeprecateComponent/index.js":(C,c,e)=>{e.d(c,{y:()=>o});var d=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");const o=({componentName:l,version:u})=>{(0,d.useEffect)(()=>{console.warn(`Warning: ${l}:: this component will be deprecated in version: ${u}.`)},[l,u])}},"./node_modules/.pnpm/obj-str@1.1.0/node_modules/obj-str/dist/obj-str.mjs":(C,c,e)=>{e.d(c,{A:()=>d});function d(o){var l,u="";for(l in o)o[l]&&(u&&(u+=" "),u+=l);return u}}}]);

package/demo/view-fields-masked-input-text-with-money-mask-stories.a092de7d.iframe.bundle.js

@@ -0,0 +1,213 @@
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[5974],{"./lib/view/fields/form-layout-block-item/index.tsx":(W,k,e)=>{e.d(k,{B:()=>m});var a=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),r=e.n(a),x=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"),b=e("./node_modules/.pnpm/react-hook-form@7.63.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"),c=["inputID","label"],m=function(u){var i=u.inputID,y=u.label,M=r()(u,c),g=(0,b.lN)({name:i}),d=g.errors,f=(0,b.Jt)(d,i),P=!!f,v=f?.message;return(0,n.jsx)(x.U,Object.assign({inputID:i,label:y,hasError:P,validationMessage:v},M))};m.displayName="FormLayoutBlockItem"},"./lib/view/fields/masked-input-text/index.tsx":(W,k,e)=>{e.d(k,{B:()=>g});var a=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),r=e.n(a),x=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/slicedToArray.js"),b=e.n(x),n=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),c=e.n(n),m=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),u=e("./node_modules/.pnpm/@elliemae+ds-form-input-text@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-input-text/dist/esm/DSInputText.js"),i=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),y=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),M=["name","defaultValue","rules","useMask","maskOpts"],g=function(d){var f=d.name,P=d.defaultValue,v=P===void 0?"":P,C=d.rules,L=C===void 0?{}:C,Z=d.useMask,H=d.maskOpts,R=c()(d,M),q=m.useState(v),Q=b()(q,2),ee=Q[1],w=(0,i.xW)(),Y=w.setValue,ne=m.useMemo(function(){return Object.assign({},H,{onChange:function(K,V){return Y(f,V,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0})},valueSetter:ee})},[H,f,Y]),te=Z(ne);return r()(i.xI,{name:f,defaultValue:v,rules:L,render:function(K){var V=K.field,U=K.fieldState.error;return(0,y.jsx)(u.B,Object.assign({hasError:!!U},R,V,te))}})};g.displayName="MaskedInputText"},"./lib/view/fields/masked-input-text/with-money-mask.stories.tsx":(W,k,e)=>{e.r(k),e.d(k,{WithMoneyMask:()=>v,__namedExportsOrder:()=>C,default:()=>f});var a=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),r=e.n(a),x=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"),b=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"),n=e("./node_modules/.pnpm/@elliemae+ds-form-helpers-mask-hooks@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-helpers-mask-hooks/dist/esm/hooks/useNumberMask.js"),c=e("./lib/view/form/index.tsx"),m=e("./lib/view/fields/masked-input-text/index.tsx"),u=e("./lib/view/fields/form-layout-block-item/index.tsx"),i=e("./lib/view/fields/watch-value.tsx"),y=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),M,g=`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\n// import '@elliemae/ds-form-input-text';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { useNumberMask } from '@elliemae/ds-controlled-form';\\nimport { Form } from '../../form/index.js';\\nimport { InputTextProps } from '../input-text/index.js';\\nimport { MaskedInputText } 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/MaskedInputText',\\n  component: MaskedInputText,\\n} as Meta;\\n\\nconst Template: Story<InputTextProps & { labelText: string }> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"money\\" label=\\"Money\\" required>\\n        <MaskedInputText\\n          {...args}\\n          useMask={useNumberMask}\\n          maskOpts={{\\n            decimalPlaces: 2,\\n            prefix: '$',\\n            allowNegative: true,\\n            suffix: '',\\n            includeThousandsSeparator: true,\\n            decimalRequired: false,\\n          }}\\n        />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Money\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WithMoneyMask = Template.bind({});\\n\\nWithMoneyMask.args = {\\n  id: 'money',\\n  name: 'money',\\n  placeholder: '$10,000',\\n  rules: {\\n    required: { value: true, message: 'Please enter money' },\\n  },\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"WithMoneyMask":{"startLoc":{"col":64,"line":17},"endLoc":{"col":1,"line":38},"startBody":{"col":64,"line":17},"endBody":{"col":1,"line":38}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+// import '@elliemae/ds-form-input-text';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { useNumberMask } from '@elliemae/ds-controlled-form';
+import { Form } from '../../form/index.js';
+import { InputTextProps } from '../input-text/index.js';
+import { MaskedInputText } 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';\\n// import '@elliemae/ds-form-input-text';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { useNumberMask } from '@elliemae/ds-controlled-form';\\nimport { Form } from '../../form/index.js';\\nimport { InputTextProps } from '../input-text/index.js';\\nimport { MaskedInputText } 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/MaskedInputText',\\n  component: MaskedInputText,\\n} as Meta;\\n\\nconst Template: Story<InputTextProps & { labelText: string }> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"money\\" label=\\"Money\\" required>\\n        <MaskedInputText\\n          {...args}\\n          useMask={useNumberMask}\\n          maskOpts={{\\n            decimalPlaces: 2,\\n            prefix: '$',\\n            allowNegative: true,\\n            suffix: '',\\n            includeThousandsSeparator: true,\\n            decimalRequired: false,\\n          }}\\n        />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Money\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WithMoneyMask = Template.bind({});\\n\\nWithMoneyMask.args = {\\n  id: 'money',\\n  name: 'money',\\n  placeholder: '$10,000',\\n  rules: {\\n    required: { value: true, message: 'Please enter money' },\\n  },\\n};\\n","locationsMap":{"with-money-mask":{"startLoc":{"col":64,"line":17},"endLoc":{"col":1,"line":38},"startBody":{"col":64,"line":17},"endBody":{"col":1,"line":38}}}},},
+  title: 'Components/Form/Controls/MaskedInputText',
+  component: MaskedInputText,
+} as Meta;
+
+const Template: Story<InputTextProps & { labelText: string }> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="money" label="Money" required>
+        <MaskedInputText
+          {...args}
+          useMask={useNumberMask}
+          maskOpts={{
+            decimalPlaces: 2,
+            prefix: '$',
+            allowNegative: true,
+            suffix: '',
+            includeThousandsSeparator: true,
+            decimalRequired: false,
+          }}
+        />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Money" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const WithMoneyMask = Template.bind({});
+
+WithMoneyMask.args = {
+  id: 'money',
+  name: 'money',
+  placeholder: '$10,000',
+  rules: {
+    required: { value: true, message: 'Please enter money' },
+  },
+};
+`,d={WithMoneyMask:{startLoc:{col:64,line:25},endLoc:{col:1,line:46},startBody:{col:64,line:25},endBody:{col:1,line:46}}},g=`import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+// import '@elliemae/ds-form-input-text';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { useNumberMask } from '@elliemae/ds-controlled-form';
+import { Form } from '../../form/index.js';
+import { InputTextProps } from '../input-text/index.js';
+import { MaskedInputText } from './index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {
+  title: 'Components/Form/Controls/MaskedInputText',
+  component: MaskedInputText,
+} as Meta;
+
+const Template: Story<InputTextProps & { labelText: string }> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="money" label="Money" required>
+        <MaskedInputText
+          {...args}
+          useMask={useNumberMask}
+          maskOpts={{
+            decimalPlaces: 2,
+            prefix: '$',
+            allowNegative: true,
+            suffix: '',
+            includeThousandsSeparator: true,
+            decimalRequired: false,
+          }}
+        />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Money" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const WithMoneyMask = Template.bind({});
+
+WithMoneyMask.args = {
+  id: 'money',
+  name: 'money',
+  placeholder: '$10,000',
+  rules: {
+    required: { value: true, message: 'Please enter money' },
+  },
+};
+`,d={WithMoneyMask:{startLoc:{col:64,line:17},endLoc:{col:1,line:38},startBody:{col:64,line:17},endBody:{col:1,line:38}}};const f={parameters:{storySource:{source:`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\n// import '@elliemae/ds-form-input-text';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { useNumberMask } from '@elliemae/ds-controlled-form';\\nimport { Form } from '../../form/index.js';\\nimport { InputTextProps } from '../input-text/index.js';\\nimport { MaskedInputText } 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/MaskedInputText',\\n  component: MaskedInputText,\\n} as Meta;\\n\\nconst Template: Story<InputTextProps & { labelText: string }> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"money\\" label=\\"Money\\" required>\\n        <MaskedInputText\\n          {...args}\\n          useMask={useNumberMask}\\n          maskOpts={{\\n            decimalPlaces: 2,\\n            prefix: '$',\\n            allowNegative: true,\\n            suffix: '',\\n            includeThousandsSeparator: true,\\n            decimalRequired: false,\\n          }}\\n        />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Money\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WithMoneyMask = Template.bind({});\\n\\nWithMoneyMask.args = {\\n  id: 'money',\\n  name: 'money',\\n  placeholder: '$10,000',\\n  rules: {\\n    required: { value: true, message: 'Please enter money' },\\n  },\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"WithMoneyMask":{"startLoc":{"col":64,"line":17},"endLoc":{"col":1,"line":38},"startBody":{"col":64,"line":17},"endBody":{"col":1,"line":38}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+// import '@elliemae/ds-form-input-text';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { useNumberMask } from '@elliemae/ds-controlled-form';
+import { Form } from '../../form/index.js';
+import { InputTextProps } from '../input-text/index.js';
+import { MaskedInputText } 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';\\n// import '@elliemae/ds-form-input-text';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { useNumberMask } from '@elliemae/ds-controlled-form';\\nimport { Form } from '../../form/index.js';\\nimport { InputTextProps } from '../input-text/index.js';\\nimport { MaskedInputText } 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/MaskedInputText',\\n  component: MaskedInputText,\\n} as Meta;\\n\\nconst Template: Story<InputTextProps & { labelText: string }> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <FormLayoutBlockItem inputID=\\"money\\" label=\\"Money\\" required>\\n        <MaskedInputText\\n          {...args}\\n          useMask={useNumberMask}\\n          maskOpts={{\\n            decimalPlaces: 2,\\n            prefix: '$',\\n            allowNegative: true,\\n            suffix: '',\\n            includeThousandsSeparator: true,\\n            decimalRequired: false,\\n          }}\\n        />\\n      </FormLayoutBlockItem>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Money\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const WithMoneyMask = Template.bind({});\\n\\nWithMoneyMask.args = {\\n  id: 'money',\\n  name: 'money',\\n  placeholder: '$10,000',\\n  rules: {\\n    required: { value: true, message: 'Please enter money' },\\n  },\\n};\\n","locationsMap":{"with-money-mask":{"startLoc":{"col":64,"line":17},"endLoc":{"col":1,"line":38},"startBody":{"col":64,"line":17},"endBody":{"col":1,"line":38}}}},},
+  title: 'Components/Form/Controls/MaskedInputText',
+  component: MaskedInputText,
+} as Meta;
+
+const Template: Story<InputTextProps & { labelText: string }> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="money" label="Money" required>
+        <MaskedInputText
+          {...args}
+          useMask={useNumberMask}
+          maskOpts={{
+            decimalPlaces: 2,
+            prefix: '$',
+            allowNegative: true,
+            suffix: '',
+            includeThousandsSeparator: true,
+            decimalRequired: false,
+          }}
+        />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Money" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const WithMoneyMask = Template.bind({});
+
+WithMoneyMask.args = {
+  id: 'money',
+  name: 'money',
+  placeholder: '$10,000',
+  rules: {
+    required: { value: true, message: 'Please enter money' },
+  },
+};
+`,locationsMap:{"with-money-mask":{startLoc:{col:64,line:25},endLoc:{col:1,line:46},startBody:{col:64,line:25},endBody:{col:1,line:46}}}},storySource:{source:`import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+// import '@elliemae/ds-form-input-text';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { useNumberMask } from '@elliemae/ds-controlled-form';
+import { Form } from '../../form/index.js';
+import { InputTextProps } from '../input-text/index.js';
+import { MaskedInputText } from './index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {
+  title: 'Components/Form/Controls/MaskedInputText',
+  component: MaskedInputText,
+} as Meta;
+
+const Template: Story<InputTextProps & { labelText: string }> = (args) => (
+  <Grid p="m">
+    <Form>
+      <FormLayoutBlockItem inputID="money" label="Money" required>
+        <MaskedInputText
+          {...args}
+          useMask={useNumberMask}
+          maskOpts={{
+            decimalPlaces: 2,
+            prefix: '$',
+            allowNegative: true,
+            suffix: '',
+            includeThousandsSeparator: true,
+            decimalRequired: false,
+          }}
+        />
+      </FormLayoutBlockItem>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Money" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const WithMoneyMask = Template.bind({});
+
+WithMoneyMask.args = {
+  id: 'money',
+  name: 'money',
+  placeholder: '$10,000',
+  rules: {
+    required: { value: true, message: 'Please enter money' },
+  },
+};
+`,locationsMap:{"with-money-mask":{startLoc:{col:64,line:17},endLoc:{col:1,line:38},startBody:{col:64,line:17},endBody:{col:1,line:38}}}}},title:"Components/Form/Controls/MaskedInputText",component:m.B};var P=function(L){return r()(x.Ay,{p:"m"},void 0,r()(c.l,{},void 0,r()(u.B,{inputID:"money",label:"Money",required:!0},void 0,(0,y.jsx)(m.B,Object.assign({},L,{useMask:n.XF,maskOpts:{decimalPlaces:2,prefix:"$",allowNegative:!0,suffix:"",includeThousandsSeparator:!0,decimalRequired:!1}}))),M||(M=r()(b.e,{},void 0,"Submit")),(0,y.jsx)(i.n,Object.assign({label:"Money"},L))))};P.displayName="Template";var v=P.bind({});v.args={id:"money",name:"money",placeholder:"$10,000",rules:{required:{value:!0,message:"Please enter money"}}};var C=["WithMoneyMask"]},"./lib/view/fields/watch-value.tsx":(W,k,e)=>{e.d(k,{n:()=>i});var a=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),r=e.n(a),x=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"),b=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"),n=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),c,m=x.Ay.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),u=x.Ay.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),i=function(y){var M=y.name,g=y.label,d=(0,n.xW)(),f=d.watch,P=f(M,!1)||"";return r()(b.Ay,{},void 0,r()(m,{},void 0,c||(c=r()("h4",{},void 0,"Form Data:")),r()(u,{},void 0,r()("div",{},void 0,g," : ",r()("strong",{},void 0,JSON.stringify(P))))))};i.displayName="WatchValue"},"./lib/view/form/index.tsx":(W,k,e)=>{e.d(k,{l:()=>n});var a=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"),r=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),x=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),b=a.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),n=function(c){var m=c.classname,u=c.reactHookFormProps,i=u===void 0?{mode:"onBlur"}:u,y=c.children,M=c.onSubmit,g=(0,r.mN)(i),d={};M&&(d.onSubmit=g.handleSubmit(M));var f=Object.assign(g,{formProps:i});return(0,x.jsx)(r.Op,Object.assign({},f,{children:(0,x.jsx)(b,Object.assign({className:m},d,{children:y}))}))};n.displayName="Form"},"./node_modules/.pnpm/@elliemae+ds-form-helpers-mask-hooks@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-helpers-mask-hooks/dist/esm/hooks/useNumberMask.js":(W,k,e)=>{e.d(k,{XF:()=>X});var a=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),r=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/defaultProps/useMemoMergePropsWithDefault.js"),x=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/validation/typescriptValidator.js"),b=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/describe.js"),n=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.54.6_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/PropTypes.js");const c=(_=!1)=>{const p=(0,a.useRef)(null);return(0,a.useMemo)(()=>_?a.useLayoutEffect:a.useEffect,[_])(()=>{p.current?.(),p.current=null}),S=>{p.current=S}},m=(_,p)=>{_.setSelectionRange(p,p,"forward")},u={onChange:()=>null,onKeyDown:()=>null,onBlur:()=>null},i={valueSetter:n.A.func.description("React set state function for the value").isRequired,onChange:n.A.func.description("Callback for onChange"),onKeyDown:n.A.func.description("Callback for onKeyDown")},y={...u,suffix:"",prefix:"",decimalPlaces:2,allowNegative:!1,includeThousandsSeparator:!0,decimalRequired:!1},M={...i,suffix:n.A.string.description("String will be added at the end of the input value").defaultValue(""),prefix:n.A.string.description("String will be added at the start of the input value").defaultValue(""),decimalPlaces:n.A.number.description("Number of decimals allowed").defaultValue(2),allowNegative:n.A.bool.description("Wether the input allows negative number").defaultValue(!1),includeThousandsSeparator:n.A.bool.description("Wether the integer part will be separated by thousands").defaultValue(!0),decimalRequired:n.A.bool.description("Wether decimal part is mandatory").defaultValue(!1),max:n.A.number.description("Maximum value allowed"),min:n.A.number.description("Minimum value allowed")},g={...u,isInternational:!1},d={...i,isInternational:n.A.bool.description("Use or not internaltional phone mask number").defaultValue(!1)},f={...u,filledMask:!1},P={...i,regExp:n.A.arrayOf(n.A.oneOfType([n.A.string,n.A.instanceOf(RegExp)])).description("Array with regexp or special chars per character").isRequired,filledMask:n.A.bool.description("Show blank chars positions").defaultValue(!1)},v={onChange:()=>null,onKeyDown:()=>null,onBlur:()=>null},C={...v,isInternational:!1},L={...v,filledMask:!1,regExp:[]},Z={...v},H={...v,suffix:"",prefix:"",decimalPlaces:2,allowNegative:!1,includeThousandsSeparator:!0,decimalRequired:!1},R={valueSetter:n.A.func.description("React set state function for the value").isRequired,onChange:n.A.func.description("Callback for onChange"),onKeyDown:n.A.func.description("Callback for onKeyDown")},q={...R,regExp:n.A.arrayOf(n.A.oneOfType([n.A.string,n.A.instanceOf(RegExp)])).description("Array with regexp or special chars per character").isRequired,filledMask:n.A.bool.description("Show blank chars positions").defaultValue(!1)},Q={...R,isInternational:n.A.bool.description("Use or not internaltional phone mask number").defaultValue(!1)},ee={...R,suffix:n.A.string.description("String will be added at the end of the input value").defaultValue(""),prefix:n.A.string.description("String will be added at the start of the input value").defaultValue(""),decimalPlaces:n.A.number.description("Number of decimals allowed").defaultValue(2),allowNegative:n.A.bool.description("Wether the input allows negative number").defaultValue(!1),includeThousandsSeparator:n.A.bool.description("Wether the integer part will be separated by thousands").defaultValue(!0),decimalRequired:n.A.bool.description("Wether decimal part is mandatory").defaultValue(!1)},w="useNumberMask",Y="usePhoneMask",ne="useRegExpMask",te="useSSNMask",K="useZipCodeMask",V=(_,p)=>_.replace(/\B(?=(\d{3})+(?!\d))/g,p),U=(_,p,h,S)=>{const{includeThousandsSeparator:F=!0,allowNegative:N=!1,prefix:s="",suffix:$="",decimalPlaces:E=2,decimalRequired:z=!1}=S,G=",";let D=-1,j=[s?.length,0].includes(_.indexOf("-"))&&N?"-":"",t=String(_).split("").filter((T,J)=>{const A=T>="0"&&T<="9"||T==="."&&D===-1&&E;return T==="."&&A&&(D=J),A});for(s&&t.length&&(j+=s);t.length>=2&&t[0]==="0"&&t[1]!==".";)t=t.splice(1);D=t.findIndex(T=>T===".");let o=t.slice(0,D!==-1?D:t.length);const I=t.slice(D,D+E+1);F&&(o=V(o.join(""),G).split(""));let O=!1;D!==-1&&!(h==="Backspace"&&I.length===1)?o.length?t=[...o,...I]:(t=["0",...I],O=!0):t=z&&o.length?[...o,"."]:o,h==="Backspace"&&t.length===0&&(j="");let l=0;t[l]==="0"&&p===1+s.length&&(l+=1),O&&(l+=1);for(let T=0;T<p;T+=1)t[l]===G&&(l+=1),t[l]===_[T]&&(l+=1);l+=j.length;const B=t.length?$:"";return[j+t.join("")+B,l]},X=_=>{const p=(0,r.b)(_,y);(0,x.D)(p,M,w);const{valueSetter:h,onChange:S,onKeyDown:F,onBlur:N,...s}=p,$=(0,a.useRef)("Unidentified"),E=c(!0),[,z]=(0,a.useState)(0),G=(0,a.useCallback)(t=>{const o=t.target.value,{decimalRequired:I=!0,decimalPlaces:O=2,suffix:l=""}=s,B=o.indexOf("."),se=o.indexOf("-"),T=l.length?o.indexOf(l):-1;if(I){if(B>-1){const J=o.slice(B+1,l.length?-l.length:o.length);let A="";for(;J.length+A.length!==O;)A+="0";h((l.length?o.slice(0,T):o)+A+l)}}else o.length-l.length-1===B?h(o.replace(".","")):o.length-1===se&&h(o.replace("-",""));N&&N(t)},[N,h,s]),D=(0,a.useCallback)(t=>{$.current=t.code,F&&F(t)},[F]),j=(0,a.useCallback)(t=>{const[o,I]=U(t.target.value,t.target.selectionEnd??0,$.current,s),O=Number(o.replace(s.prefix,"").replace(s.suffix,"").replace(/,/g,""));if(s.min!==void 0&&O<s.min){h(`${s.prefix}${s.min}${s.suffix}`),E(()=>m(t.target,I));return}if(s.max!==void 0&&O>s.max){h(`${s.prefix}${s.max}${s.suffix}`),E(()=>m(t.target,I));return}h(l=>(o===l&&z(B=>B+1),o)),S&&S(t,o),E(()=>m(t.target,I))},[h,E,S,s]);return{onKeyDown:D,onChange:j,onBlur:G}},re=(_,p)=>{const[h]=U(_,_.length-1,"",p);return h};X.displayName=w;const oe=(0,b.A)(X);oe.propTypes=M,oe.returnType={onKeyDown:n.A.func.description("On key down event for input").isRequired,onChange:n.A.func.description("On change event for input").isRequired,onBlur:n.A.func.description("On blur event for input").isRequired}}}]);