@elliemae/pui-app-sdk 5.31.1 → 5.31.4

package/demo/view-fields-masked-input-text-with-percentage-mask-stories.5fd0b83c.iframe.bundle.js

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

package/demo/view-fields-radio-group-index-stories.b73d0ceb.iframe.bundle.js

@@ -0,0 +1,281 @@
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[2977],{"./lib/view/fields/connect-form.tsx":(R,l,e)=>{e.d(l,{$:()=>n});var c=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),n=function(t){var o=t.children,i=(0,c.xW)();return o(Object.assign({},i))}},"./lib/view/fields/radio-group/index.stories.tsx":(R,l,e)=>{e.r(l),e.d(l,{Basic:()=>S,__namedExportsOrder:()=>O,default:()=>T});var c=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(c),t=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),o=e.n(t),i=e("./node_modules/.pnpm/@elliemae+ds-grid@3.56.4_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),s=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"),g=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),u=e("./lib/view/fields/radio/index.tsx"),p=e("./node_modules/.pnpm/@elliemae+ds-legacy-form@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-form/dist/esm/RadioGroup/DSRadioGroup.js"),r=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),a=["name","rules","defaultValue"],b=["value"],m=function(d){var G=d.name,f=d.rules,y=f===void 0?{}:f,E=d.defaultValue,F=o()(d,a);return n()(g.xI,{name:G,rules:y,defaultValue:E,render:function(D){var V=D.field,W=V.value,L=o()(V,b);return(0,r.jsx)(p.Q_,Object.assign({},F,L,{activeValue:W}))}})};m.displayName="RadioGroup";var v=e("./lib/view/form/index.tsx"),_=e("./lib/view/fields/connect-form.tsx"),C=e("./lib/view/fields/watch-value.tsx"),P,j=["feedbackMessage","name"],k=["name"],x=`
+    
+    // @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 { get, FieldError } from 'react-hook-form';\\nimport { Radio } from '../radio';\\nimport { RadioGroup, RadioGroupProps } from './index.js';\\nimport { Form } from '../../form/index.js';\\nimport { ConnectForm } from '../connect-form.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\ntype GenderProps = {\\n  name: string;\\n  feedbackMessage?: string;\\n  // removing any type not possible for legacy component\\n  \\n  [x: string]: any;\\n};\\n\\nconst Gender = ({ feedbackMessage, name, ...rest }: GenderProps) => (\\n  <RadioGroup\\n    name={name}\\n    labelProps={{\\n      labelText: 'Gender',\\n      required: true,\\n      feedbackMessage,\\n    }}\\n    orientation=\\"horizontal\\"\\n    {...rest}\\n  >\\n    <Radio name={name} value=\\"male\\" labelText=\\"Male\\" />\\n    <Radio name={name} value=\\"female\\" labelText=\\"Female\\" />\\n  </RadioGroup>\\n);\\n\\nconst Template: Story<RadioGroupProps> = ({ name, ...rest }) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <div>\\n        <ConnectForm>\\n          {({ formState: { errors } }) => {\\n            const errField = get(errors, name) as FieldError;\\n            const feedbackMessage = errField?.message;\\n            return (\\n              <Gender feedbackMessage={feedbackMessage} name={name} {...rest} />\\n            );\\n          }}\\n        </ConnectForm>\\n      </div>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue name={name} label=\\"Gender\\" {...rest} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport default {\\n  title: 'Components/Form/Controls/RadioGroup',\\n  component: RadioGroup,\\n} as Meta;\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  name: 'gender',\\n  rules: { required: { value: true, message: 'Please select a gender' } },\\n  defaultValue: '',\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":41,"line":35},"endLoc":{"col":1,"line":53},"startBody":{"col":41,"line":35},"endBody":{"col":1,"line":53}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { get, FieldError } from 'react-hook-form';
+import { Radio } from '../radio';
+import { RadioGroup, RadioGroupProps } from './index.js';
+import { Form } from '../../form/index.js';
+import { ConnectForm } from '../connect-form.js';
+import { WatchValue } from '../watch-value.js';
+
+type GenderProps = {
+  name: string;
+  feedbackMessage?: string;
+  // removing any type not possible for legacy component
+  
+  [x: string]: any;
+};
+
+const Gender = ({ feedbackMessage, name, ...rest }: GenderProps) => (
+  <RadioGroup
+    name={name}
+    labelProps={{
+      labelText: 'Gender',
+      required: true,
+      feedbackMessage,
+    }}
+    orientation="horizontal"
+    {...rest}
+  >
+    <Radio name={name} value="male" labelText="Male" />
+    <Radio name={name} value="female" labelText="Female" />
+  </RadioGroup>
+);
+
+const Template: Story<RadioGroupProps> = ({ name, ...rest }) => (
+  <Grid p="m">
+    <Form>
+      <div>
+        <ConnectForm>
+          {({ formState: { errors } }) => {
+            const errField = get(errors, name) as FieldError;
+            const feedbackMessage = errField?.message;
+            return (
+              <Gender feedbackMessage={feedbackMessage} name={name} {...rest} />
+            );
+          }}
+        </ConnectForm>
+      </div>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue name={name} label="Gender" {...rest} />
+    </Form>
+  </Grid>
+);
+
+export default {parameters: {"storySource":{"source":"import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { get, FieldError } from 'react-hook-form';\\nimport { Radio } from '../radio';\\nimport { RadioGroup, RadioGroupProps } from './index.js';\\nimport { Form } from '../../form/index.js';\\nimport { ConnectForm } from '../connect-form.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\ntype GenderProps = {\\n  name: string;\\n  feedbackMessage?: string;\\n  // removing any type not possible for legacy component\\n  \\n  [x: string]: any;\\n};\\n\\nconst Gender = ({ feedbackMessage, name, ...rest }: GenderProps) => (\\n  <RadioGroup\\n    name={name}\\n    labelProps={{\\n      labelText: 'Gender',\\n      required: true,\\n      feedbackMessage,\\n    }}\\n    orientation=\\"horizontal\\"\\n    {...rest}\\n  >\\n    <Radio name={name} value=\\"male\\" labelText=\\"Male\\" />\\n    <Radio name={name} value=\\"female\\" labelText=\\"Female\\" />\\n  </RadioGroup>\\n);\\n\\nconst Template: Story<RadioGroupProps> = ({ name, ...rest }) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <div>\\n        <ConnectForm>\\n          {({ formState: { errors } }) => {\\n            const errField = get(errors, name) as FieldError;\\n            const feedbackMessage = errField?.message;\\n            return (\\n              <Gender feedbackMessage={feedbackMessage} name={name} {...rest} />\\n            );\\n          }}\\n        </ConnectForm>\\n      </div>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue name={name} label=\\"Gender\\" {...rest} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport default {\\n  title: 'Components/Form/Controls/RadioGroup',\\n  component: RadioGroup,\\n} as Meta;\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  name: 'gender',\\n  rules: { required: { value: true, message: 'Please select a gender' } },\\n  defaultValue: '',\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":41,"line":35},"endLoc":{"col":1,"line":53},"startBody":{"col":41,"line":35},"endBody":{"col":1,"line":53}}}},},
+  title: 'Components/Form/Controls/RadioGroup',
+  component: RadioGroup,
+} as Meta;
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  name: 'gender',
+  rules: { required: { value: true, message: 'Please select a gender' } },
+  defaultValue: '',
+};
+`,M={Basic:{startLoc:{col:41,line:43},endLoc:{col:1,line:61},startBody:{col:41,line:43},endBody:{col:1,line:61}}},x=`import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { get, FieldError } from 'react-hook-form';
+import { Radio } from '../radio';
+import { RadioGroup, RadioGroupProps } from './index.js';
+import { Form } from '../../form/index.js';
+import { ConnectForm } from '../connect-form.js';
+import { WatchValue } from '../watch-value.js';
+
+type GenderProps = {
+  name: string;
+  feedbackMessage?: string;
+  // removing any type not possible for legacy component
+  
+  [x: string]: any;
+};
+
+const Gender = ({ feedbackMessage, name, ...rest }: GenderProps) => (
+  <RadioGroup
+    name={name}
+    labelProps={{
+      labelText: 'Gender',
+      required: true,
+      feedbackMessage,
+    }}
+    orientation="horizontal"
+    {...rest}
+  >
+    <Radio name={name} value="male" labelText="Male" />
+    <Radio name={name} value="female" labelText="Female" />
+  </RadioGroup>
+);
+
+const Template: Story<RadioGroupProps> = ({ name, ...rest }) => (
+  <Grid p="m">
+    <Form>
+      <div>
+        <ConnectForm>
+          {({ formState: { errors } }) => {
+            const errField = get(errors, name) as FieldError;
+            const feedbackMessage = errField?.message;
+            return (
+              <Gender feedbackMessage={feedbackMessage} name={name} {...rest} />
+            );
+          }}
+        </ConnectForm>
+      </div>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue name={name} label="Gender" {...rest} />
+    </Form>
+  </Grid>
+);
+
+export default {
+  title: 'Components/Form/Controls/RadioGroup',
+  component: RadioGroup,
+} as Meta;
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  name: 'gender',
+  rules: { required: { value: true, message: 'Please select a gender' } },
+  defaultValue: '',
+};
+`,M={Basic:{startLoc:{col:41,line:35},endLoc:{col:1,line:53},startBody:{col:41,line:35},endBody:{col:1,line:53}}},B=function(d){var G=d.feedbackMessage,f=d.name,y=o()(d,j);return(0,r.jsxs)(m,Object.assign({name:f,labelProps:{labelText:"Gender",required:!0,feedbackMessage:G},orientation:"horizontal"},y,{children:[n()(u.s,{name:f,value:"male",labelText:"Male"}),n()(u.s,{name:f,value:"female",labelText:"Female"})]}))};B.displayName="Gender";var h=function(d){var G=d.name,f=o()(d,k);return n()(i.Ay,{p:"m"},void 0,n()(v.l,{},void 0,n()("div",{},void 0,n()(_.$,{},void 0,function(y){var E=y.formState.errors,F=(0,g.Jt)(E,G),D=F?.message;return(0,r.jsx)(B,Object.assign({feedbackMessage:D,name:G},f))})),P||(P=n()(s.e,{},void 0,"Submit")),(0,r.jsx)(C.n,Object.assign({name:G,label:"Gender"},f))))};h.displayName="Template";const T={parameters:{storySource:{source:`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { get, FieldError } from 'react-hook-form';\\nimport { Radio } from '../radio';\\nimport { RadioGroup, RadioGroupProps } from './index.js';\\nimport { Form } from '../../form/index.js';\\nimport { ConnectForm } from '../connect-form.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\ntype GenderProps = {\\n  name: string;\\n  feedbackMessage?: string;\\n  // removing any type not possible for legacy component\\n  \\n  [x: string]: any;\\n};\\n\\nconst Gender = ({ feedbackMessage, name, ...rest }: GenderProps) => (\\n  <RadioGroup\\n    name={name}\\n    labelProps={{\\n      labelText: 'Gender',\\n      required: true,\\n      feedbackMessage,\\n    }}\\n    orientation=\\"horizontal\\"\\n    {...rest}\\n  >\\n    <Radio name={name} value=\\"male\\" labelText=\\"Male\\" />\\n    <Radio name={name} value=\\"female\\" labelText=\\"Female\\" />\\n  </RadioGroup>\\n);\\n\\nconst Template: Story<RadioGroupProps> = ({ name, ...rest }) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <div>\\n        <ConnectForm>\\n          {({ formState: { errors } }) => {\\n            const errField = get(errors, name) as FieldError;\\n            const feedbackMessage = errField?.message;\\n            return (\\n              <Gender feedbackMessage={feedbackMessage} name={name} {...rest} />\\n            );\\n          }}\\n        </ConnectForm>\\n      </div>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue name={name} label=\\"Gender\\" {...rest} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport default {\\n  title: 'Components/Form/Controls/RadioGroup',\\n  component: RadioGroup,\\n} as Meta;\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  name: 'gender',\\n  rules: { required: { value: true, message: 'Please select a gender' } },\\n  defaultValue: '',\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":41,"line":35},"endLoc":{"col":1,"line":53},"startBody":{"col":41,"line":35},"endBody":{"col":1,"line":53}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { get, FieldError } from 'react-hook-form';
+import { Radio } from '../radio';
+import { RadioGroup, RadioGroupProps } from './index.js';
+import { Form } from '../../form/index.js';
+import { ConnectForm } from '../connect-form.js';
+import { WatchValue } from '../watch-value.js';
+
+type GenderProps = {
+  name: string;
+  feedbackMessage?: string;
+  // removing any type not possible for legacy component
+  
+  [x: string]: any;
+};
+
+const Gender = ({ feedbackMessage, name, ...rest }: GenderProps) => (
+  <RadioGroup
+    name={name}
+    labelProps={{
+      labelText: 'Gender',
+      required: true,
+      feedbackMessage,
+    }}
+    orientation="horizontal"
+    {...rest}
+  >
+    <Radio name={name} value="male" labelText="Male" />
+    <Radio name={name} value="female" labelText="Female" />
+  </RadioGroup>
+);
+
+const Template: Story<RadioGroupProps> = ({ name, ...rest }) => (
+  <Grid p="m">
+    <Form>
+      <div>
+        <ConnectForm>
+          {({ formState: { errors } }) => {
+            const errField = get(errors, name) as FieldError;
+            const feedbackMessage = errField?.message;
+            return (
+              <Gender feedbackMessage={feedbackMessage} name={name} {...rest} />
+            );
+          }}
+        </ConnectForm>
+      </div>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue name={name} label="Gender" {...rest} />
+    </Form>
+  </Grid>
+);
+
+export default {parameters: {"storySource":{"source":"import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button';\\nimport { get, FieldError } from 'react-hook-form';\\nimport { Radio } from '../radio';\\nimport { RadioGroup, RadioGroupProps } from './index.js';\\nimport { Form } from '../../form/index.js';\\nimport { ConnectForm } from '../connect-form.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\ntype GenderProps = {\\n  name: string;\\n  feedbackMessage?: string;\\n  // removing any type not possible for legacy component\\n  \\n  [x: string]: any;\\n};\\n\\nconst Gender = ({ feedbackMessage, name, ...rest }: GenderProps) => (\\n  <RadioGroup\\n    name={name}\\n    labelProps={{\\n      labelText: 'Gender',\\n      required: true,\\n      feedbackMessage,\\n    }}\\n    orientation=\\"horizontal\\"\\n    {...rest}\\n  >\\n    <Radio name={name} value=\\"male\\" labelText=\\"Male\\" />\\n    <Radio name={name} value=\\"female\\" labelText=\\"Female\\" />\\n  </RadioGroup>\\n);\\n\\nconst Template: Story<RadioGroupProps> = ({ name, ...rest }) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <div>\\n        <ConnectForm>\\n          {({ formState: { errors } }) => {\\n            const errField = get(errors, name) as FieldError;\\n            const feedbackMessage = errField?.message;\\n            return (\\n              <Gender feedbackMessage={feedbackMessage} name={name} {...rest} />\\n            );\\n          }}\\n        </ConnectForm>\\n      </div>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue name={name} label=\\"Gender\\" {...rest} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport default {\\n  title: 'Components/Form/Controls/RadioGroup',\\n  component: RadioGroup,\\n} as Meta;\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  name: 'gender',\\n  rules: { required: { value: true, message: 'Please select a gender' } },\\n  defaultValue: '',\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":41,"line":35},"endLoc":{"col":1,"line":53},"startBody":{"col":41,"line":35},"endBody":{"col":1,"line":53}}}},},
+  title: 'Components/Form/Controls/RadioGroup',
+  component: RadioGroup,
+} as Meta;
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  name: 'gender',
+  rules: { required: { value: true, message: 'Please select a gender' } },
+  defaultValue: '',
+};
+`,locationsMap:{basic:{startLoc:{col:41,line:43},endLoc:{col:1,line:61},startBody:{col:41,line:43},endBody:{col:1,line:61}}}},storySource:{source:`import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { get, FieldError } from 'react-hook-form';
+import { Radio } from '../radio';
+import { RadioGroup, RadioGroupProps } from './index.js';
+import { Form } from '../../form/index.js';
+import { ConnectForm } from '../connect-form.js';
+import { WatchValue } from '../watch-value.js';
+
+type GenderProps = {
+  name: string;
+  feedbackMessage?: string;
+  // removing any type not possible for legacy component
+  
+  [x: string]: any;
+};
+
+const Gender = ({ feedbackMessage, name, ...rest }: GenderProps) => (
+  <RadioGroup
+    name={name}
+    labelProps={{
+      labelText: 'Gender',
+      required: true,
+      feedbackMessage,
+    }}
+    orientation="horizontal"
+    {...rest}
+  >
+    <Radio name={name} value="male" labelText="Male" />
+    <Radio name={name} value="female" labelText="Female" />
+  </RadioGroup>
+);
+
+const Template: Story<RadioGroupProps> = ({ name, ...rest }) => (
+  <Grid p="m">
+    <Form>
+      <div>
+        <ConnectForm>
+          {({ formState: { errors } }) => {
+            const errField = get(errors, name) as FieldError;
+            const feedbackMessage = errField?.message;
+            return (
+              <Gender feedbackMessage={feedbackMessage} name={name} {...rest} />
+            );
+          }}
+        </ConnectForm>
+      </div>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue name={name} label="Gender" {...rest} />
+    </Form>
+  </Grid>
+);
+
+export default {
+  title: 'Components/Form/Controls/RadioGroup',
+  component: RadioGroup,
+} as Meta;
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  name: 'gender',
+  rules: { required: { value: true, message: 'Please select a gender' } },
+  defaultValue: '',
+};
+`,locationsMap:{basic:{startLoc:{col:41,line:35},endLoc:{col:1,line:53},startBody:{col:41,line:35},endBody:{col:1,line:53}}}}},title:"Components/Form/Controls/RadioGroup",component:m};var S=h.bind({});S.args={name:"gender",rules:{required:{value:!0,message:"Please select a gender"}},defaultValue:""};var O=["Basic"]},"./lib/view/fields/radio/index.tsx":(R,l,e)=>{e.d(l,{s:()=>r});var c=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(c),t=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),o=e.n(t),i=e("./node_modules/.pnpm/@elliemae+ds-form-radio@3.56.4_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-radio/dist/esm/index.js"),s=e("./node_modules/.pnpm/react-hook-form@7.63.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),g=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),u=["name","defaultChecked","rules","labelText"],p=["onChange","value"],r=function(a){var b=a.name,m=a.defaultChecked,v=m===void 0?!1:m,_=a.rules,C=_===void 0?{}:_,P=a.labelText,j=o()(a,u);return n()(s.xI,{name:b,rules:C,defaultValue:v,render:function(k){var x,M=k.field,B=M.onChange,h=M.value,T=o()(M,p);return(0,g.jsx)(i.vz,Object.assign({label:P},j,T,{value:(x=j.value)!==null&&x!==void 0?x:h.toString(),checked:h,onChange:function(S){return B(!((S||{}).target||{}).checked)}}))}})};r.displayName="Radio"},"./lib/view/fields/watch-value.tsx":(R,l,e)=>{e.d(l,{n:()=>p});var c=e("./node_modules/.pnpm/@babel+runtime@7.28.4/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(c),t=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/@elliemae+ds-grid@3.56.4_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.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"),s,g=t.Ay.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),u=t.Ay.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),p=function(r){var a=r.name,b=r.label,m=(0,i.xW)(),v=m.watch,_=v(a,!1)||"";return n()(o.Ay,{},void 0,n()(g,{},void 0,s||(s=n()("h4",{},void 0,"Form Data:")),n()(u,{},void 0,n()("div",{},void 0,b," : ",n()("strong",{},void 0,JSON.stringify(_))))))};p.displayName="WatchValue"},"./lib/view/form/index.tsx":(R,l,e)=>{e.d(l,{l:()=>i});var c=e("./node_modules/.pnpm/styled-components@5.3.11_react-dom@18.3.1_react@18.3.1/node_modules/styled-components/dist/styled-components.browser.esm.js"),n=e("./node_modules/.pnpm/react-hook-form@7.63.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"),o=c.Ay.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),i=function(s){var g=s.classname,u=s.reactHookFormProps,p=u===void 0?{mode:"onBlur"}:u,r=s.children,a=s.onSubmit,b=(0,n.mN)(p),m={};a&&(m.onSubmit=b.handleSubmit(a));var v=Object.assign(b,{formProps:p});return(0,t.jsx)(n.Op,Object.assign({},v,{children:(0,t.jsx)(o,Object.assign({className:g},m,{children:r}))}))};i.displayName="Form"}}]);