@elliemae/pui-app-sdk 6.0.0-alpha.2 → 6.0.0-alpha.4

package/demo/docs/view-fields-masked-input-text-with-percentage-mask-stories.42e47cb4.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"(C,P,e){e.d(P,{B:()=>d});var r=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),o=e.n(r),k=e("./node_modules/.pnpm/@elliemae+ds-form-layout-blocks@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-blocks/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js"),v=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),t=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),c=["inputID","label"],d=function(u){var s=u.inputID,M=u.label,g=o()(u,c),T=(0,v.lN)({name:s}),p=T.errors,f=(0,v.Jt)(p,s),O=!!f,y=f?.message;return(0,t.jsx)(k.U,Object.assign({inputID:s,label:M,hasError:O,validationMessage:y},g))};d.displayName="FormLayoutBlockItem"},"./lib/view/fields/masked-input-text/index.tsx"(C,P,e){e.d(P,{B:()=>T});var r=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(r),k=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/slicedToArray.js"),v=e.n(k),t=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),c=e.n(t),d=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),u=e("./node_modules/.pnpm/@elliemae+ds-form-input-text@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-input-text/dist/esm/DSInputText.js"),s=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),M=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),g=["name","defaultValue","rules","useMask","maskOpts"],T=function(p){var f=p.name,O=p.defaultValue,y=O===void 0?"":O,L=p.rules,V=L===void 0?{}:L,ee=p.useMask,J=p.maskOpts,F=c()(p,g),te=d.useState(y),ne=v()(te,2),oe=ne[1],w=(0,s.xW)(),Z=w.setValue,re=d.useMemo(function(){return Object.assign({},J,{onChange:function(G,R){return Z(f,R,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0})},valueSetter:oe})},[J,f,Z]),ae=ee(re);return o()(s.xI,{name:f,defaultValue:y,rules:V,render:function(G){var R=G.field,H=G.fieldState.error;return(0,M.jsx)(u.B,Object.assign({hasError:!!H},F,R,ae))}})};T.displayName="MaskedInputText"},"./lib/view/fields/watch-value.tsx"(C,P,e){e.d(P,{n:()=>s});var r=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(r),k=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.cjs.js"),v=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),t=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),c,d=k.default.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),u=k.default.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),s=function(M){var g=M.name,T=M.label,p=(0,t.xW)(),f=p.watch,O=f(g,!1)||"";return o()(v.Ay,{},void 0,o()(d,{},void 0,c||(c=o()("h4",{},void 0,"Form Data:")),o()(u,{},void 0,o()("div",{},void 0,T," : ",o()("strong",{},void 0,JSON.stringify(O))))))};s.displayName="WatchValue"},"./lib/view/form/index.tsx"(C,P,e){e.d(P,{l:()=>t});var r=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.cjs.js"),o=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),k=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),v=r.default.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),t=function(c){var d=c.classname,u=c.reactHookFormProps,s=u===void 0?{mode:"onBlur"}:u,M=c.children,g=c.onSubmit,T=(0,o.mN)(s),p={};g&&(p.onSubmit=T.handleSubmit(g));var f=Object.assign(T,{formProps:s});return(0,k.jsx)(o.Op,Object.assign({},f,{children:(0,k.jsx)(v,Object.assign({className:d},p,{children:M}))}))};t.displayName="Form"},"./lib/view/fields/masked-input-text/with-percentage-mask.stories.tsx"(C,P,e){e.r(P),e.d(P,{WithPercentageMask:()=>y,__namedExportsOrder:()=>L,default:()=>f});var r=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(r),k=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),v=e("./node_modules/.pnpm/@elliemae+ds-button-v2@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-button-v2/dist/esm/parts/DSButtonV2/DSButtonV2.js"),t=e("./node_modules/.pnpm/@elliemae+ds-form-helpers-mask-hooks@3.57.10_@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"),d=e("./lib/view/fields/masked-input-text/index.tsx"),u=e("./lib/view/fields/form-layout-block-item/index.tsx"),s=e("./lib/view/fields/watch-value.tsx"),M=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),g,T=`
+    
+    // @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-v2';\\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-v2';
+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-v2';\\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' },
+  },
+};
+`,p={WithPercentageMask:{startLoc:{col:64,line:25},endLoc:{col:1,line:40},startBody:{col:64,line:25},endBody:{col:1,line:40}}},T=`import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+// import '@elliemae/ds-form-input-text';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+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' },
+  },
+};
+`,p={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-v2';\\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-v2';
+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-v2';\\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-v2';
+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:d.B};var O=function(V){return o()(k.Ay,{p:"m"},void 0,o()(c.l,{},void 0,o()(u.B,{inputID:"percentage",label:"Percentage",required:!0},void 0,(0,M.jsx)(d.B,Object.assign({},V,{placeholder:"100.00%",useMask:t.XF,maskOpts:{decimalPlaces:2,suffix:"%"}}))),g||(g=o()(v.e,{},void 0,"Submit")),(0,M.jsx)(s.n,Object.assign({label:"Percentage"},V))))};O.displayName="Template";var y=O.bind({});y.args={id:"percentage",name:"percentage",rules:{required:{value:!0,message:"Please enter a percentage"}}};var L=["WithPercentageMask"]},"./node_modules/.pnpm/@elliemae+ds-form-helpers-mask-hooks@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-helpers-mask-hooks/dist/esm/hooks/useNumberMask.js"(C,P,e){e.d(P,{XF:()=>Q});var r=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),o=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/defaultProps/useMemoMergePropsWithDefault.js"),k=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/validation/typescriptValidator.js"),v=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/describe.js"),t=e("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/propTypes/PropTypes.js");const c=(_=!1)=>{const i=(0,r.useRef)(null);return(0,r.useMemo)(()=>_?r.useLayoutEffect:r.useEffect,[_])(()=>{i.current?.(),i.current=null}),j=>{i.current=j}},d=(_,i)=>{_.setSelectionRange(i,i,"forward")},u={onChange:()=>null,onKeyDown:()=>null,onBlur:()=>null},s={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")},M={...u,suffix:"",prefix:"",decimalPlaces:2,allowNegative:!1,includeThousandsSeparator:!0,decimalRequired:!1},g={...s,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")},T={...u,isInternational:!1},p={...s,isInternational:t.A.bool.description("Use or not internaltional phone mask number").defaultValue(!1)},f={...u,filledMask:!1},O={...s,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)},y={onChange:()=>null,onKeyDown:()=>null,onBlur:()=>null},L={...y,isInternational:!1},V={...y,filledMask:!1,regExp:[]},ee={...y},J={...y,suffix:"",prefix:"",decimalPlaces:2,allowNegative:!1,includeThousandsSeparator:!0,decimalRequired:!1},F={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")},te={...F,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)},ne={...F,isInternational:t.A.bool.description("Use or not internaltional phone mask number").defaultValue(!1)},oe={...F,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)},w="useNumberMask",Z="usePhoneMask",re="useRegExpMask",ae="useSSNMask",G="useZipCodeMask",R=(_,i)=>_.replace(/\B(?=(\d{3})+(?!\d))/g,i),H=(_,i,h,j,N=!1)=>{const{includeThousandsSeparator:K=!0,allowNegative:l=!1,prefix:A="",suffix:W="",decimalPlaces:E=2,decimalRequired:$=!1}=j,Y=",";let B=-1,m=[A?.length,0].includes(_.indexOf("-"))&&l?"-":"",a=!1,n=String(_).split("").filter((x,X)=>{if(a)return!1;const U=x>="0"&&x<="9";if(x==="."){if(E){const z=B===-1;return z&&(B=X),z}return a=!0,!1}return U});for(A&&n.length&&(m+=A);n.length>=2&&n[0]==="0"&&n[1]!==".";)n=n.splice(1);B=n.findIndex(x=>x===".");let D=n.slice(0,B!==-1?B:n.length);const b=n.slice(B,B+E+1);K&&(D=R(D.join(""),Y).split(""));let S=!1;B!==-1&&!(h==="Backspace"&&b.length===1)?D.length?n=[...D,...b]:(n=["0",...b],S=!0):n=$&&D.length?[...D,"."]:D,h==="Backspace"&&n.length===0&&(m="");let I=0;n[I]==="0"&&i===1+A.length&&(I+=1),S&&(I+=1);for(let x=0;x<i;x+=1)n[I]===Y&&(I+=1),n[I]===_[x]&&(I+=1);if(I+=m.length,N&&E>0&&$)if(!n.includes("."))n.length!==0&&(n=[...n,".",...Array(E).fill("0")],i>=0&&(I+=1+E));else{const X=n.indexOf("."),U=n.length-X-1;if(U<E){const z=E-U;n=[...n,...Array(z).fill("0")]}else U>E&&(n=[...n.slice(0,X+1+E)])}const q=n.length?W:"";return[m+n.join("")+q,I]},Q=_=>{const i=(0,o.b)(_,M);(0,k.D)(i,g,w);const{valueSetter:h,onChange:j,onKeyDown:N,onBlur:K,...l}=i,A=(0,r.useRef)("Unidentified"),W=c(!0),[,E]=(0,r.useState)(0),$=(0,r.useCallback)(m=>{const a=m.target.value,{decimalRequired:n=!0,decimalPlaces:D=2,suffix:b=""}=l,S=a.indexOf("."),I=a.indexOf("-"),q=b.length?a.indexOf(b):-1;if(n){if(S>-1){const le=a.slice(S+1,b.length?-b.length:a.length);let x="";for(;le.length+x.length!==D;)x+="0";h((b.length?a.slice(0,q):a)+x+b)}}else a.length-b.length-1===S?h(a.replace(".","")):a.length-1===I&&h(a.replace("-",""));K&&K(m)},[K,h,l]),Y=(0,r.useCallback)(m=>{A.current=m.code,N&&N(m)},[N]),B=(0,r.useCallback)(m=>{const[a,n]=H(m.target.value,m.target.selectionEnd??0,A.current,l),D=Number(a.replace(l.prefix,"").replace(l.suffix,"").replace(/,/g,""));if(l.min!==void 0&&D<l.min){h(`${l.prefix}${l.min}${l.suffix}`),W(()=>d(m.target,n));return}if(l.max!==void 0&&D>l.max){h(`${l.prefix}${l.max}${l.suffix}`),W(()=>d(m.target,n));return}h(b=>(a===b&&E(S=>S+1),a)),j&&j(m,a),W(()=>d(m.target,n))},[h,W,j,l]);return{onKeyDown:Y,onChange:B,onBlur:$}},ie=(_,i)=>{const[h]=H(_,_.length-1,"",i,!0);return h};Q.displayName=w;const se=(0,v.A)(Q);se.propTypes=g,se.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/docs/view-fields-radio-group-index-stories.2acd07e1.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"(y,l,e){e.d(l,{$:()=>n});var c=e("./node_modules/.pnpm/react-hook-form@7.70.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/index.tsx"(y,l,e){e.d(l,{s:()=>r});var c=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(c),t=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),o=e.n(t),i=e("./node_modules/.pnpm/@elliemae+ds-form-radio@3.57.10_@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.70.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,G=a.rules,C=G===void 0?{}:G,P=a.labelText,j=o()(a,u);return n()(s.xI,{name:b,rules:C,defaultValue:v,render:function(k){var x,h=k.field,B=h.onChange,M=h.value,T=o()(h,p);return(0,g.jsx)(i.vz,Object.assign({label:P},j,T,{value:(x=j.value)!==null&&x!==void 0?x:M.toString(),checked:M,onChange:function(S){return B(!((S||{}).target||{}).checked)}}))}})};r.displayName="Radio"},"./lib/view/fields/watch-value.tsx"(y,l,e){e.d(l,{n:()=>p});var c=e("./node_modules/.pnpm/@babel+runtime@7.29.2/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.cjs.js"),o=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),i=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),s,g=t.default.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),u=t.default.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,G=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(G))))))};p.displayName="WatchValue"},"./lib/view/form/index.tsx"(y,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.cjs.js"),n=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),t=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),o=c.default.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"},"./lib/view/fields/radio-group/index.stories.tsx"(y,l,e){e.r(l),e.d(l,{Basic:()=>S,__namedExportsOrder:()=>O,default:()=>T});var c=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(c),t=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),o=e.n(t),i=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),s=e("./node_modules/.pnpm/@elliemae+ds-button-v2@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-button-v2/dist/esm/parts/DSButtonV2/DSButtonV2.js"),g=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),u=e("./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 _=d.name,f=d.rules,F=f===void 0?{}:f,E=d.defaultValue,R=o()(d,a);return n()(g.xI,{name:_,rules:F,defaultValue:E,render:function(D){var V=D.field,W=V.value,L=o()(V,b);return(0,r.jsx)(p.Q_,Object.assign({},R,L,{activeValue:W}))}})};m.displayName="RadioGroup";var v=e("./lib/view/form/index.tsx"),G=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-v2';\\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-v2';
+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-v2';\\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: '',
+};
+`,h={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-v2';
+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: '',
+};
+`,h={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 _=d.feedbackMessage,f=d.name,F=o()(d,j);return(0,r.jsxs)(m,Object.assign({name:f,labelProps:{labelText:"Gender",required:!0,feedbackMessage:_},orientation:"horizontal"},F,{children:[n()(u.s,{name:f,value:"male",labelText:"Male"}),n()(u.s,{name:f,value:"female",labelText:"Female"})]}))};B.displayName="Gender";var M=function(d){var _=d.name,f=o()(d,k);return n()(i.Ay,{p:"m"},void 0,n()(v.l,{},void 0,n()("div",{},void 0,n()(G.$,{},void 0,function(F){var E=F.formState.errors,R=(0,g.Jt)(E,_),D=R?.message;return(0,r.jsx)(B,Object.assign({feedbackMessage:D,name:_},f))})),P||(P=n()(s.e,{},void 0,"Submit")),(0,r.jsx)(C.n,Object.assign({name:_,label:"Gender"},f))))};M.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-v2';\\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-v2';
+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-v2';\\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-v2';
+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=M.bind({});S.args={name:"gender",rules:{required:{value:!0,message:"Please select a gender"}},defaultValue:""};var O=["Basic"]}}]);