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

package/demo/docs/view-fields-radio-set-value-stories.e4be5a2e.iframe.bundle.js

@@ -0,0 +1,366 @@
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[5055],{"./lib/view/fields/connect-form.tsx"(G,v,o){o.d(v,{$:()=>t});var r=o("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),t=function(b){var i=b.children,x=(0,r.xW)();return i(Object.assign({},x))}},"./lib/view/fields/radio/index.tsx"(G,v,o){o.d(v,{s:()=>P});var r=o("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),t=o.n(r),b=o("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),i=o.n(b),x=o("./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"),f=o("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),V=o("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),D=["name","defaultChecked","rules","labelText"],u=["onChange","value"],P=function(g){var E=g.name,y=g.defaultChecked,R=y===void 0?!1:y,p=g.rules,a=p===void 0?{}:p,h=g.labelText,C=i()(g,D);return t()(f.xI,{name:E,rules:a,defaultValue:R,render:function(T){var c,F=T.field,_=F.onChange,l=F.value,j=i()(F,u);return(0,V.jsx)(x.vz,Object.assign({label:h},C,j,{value:(c=C.value)!==null&&c!==void 0?c:l.toString(),checked:l,onChange:function(M){return _(!((M||{}).target||{}).checked)}}))}})};P.displayName="Radio"},"./lib/view/form/index.tsx"(G,v,o){o.d(v,{l:()=>x});var r=o("./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"),t=o("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),b=o("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),i=r.default.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),x=function(f){var V=f.classname,D=f.reactHookFormProps,u=D===void 0?{mode:"onBlur"}:D,P=f.children,g=f.onSubmit,E=(0,t.mN)(u),y={};g&&(y.onSubmit=E.handleSubmit(g));var R=Object.assign(E,{formProps:u});return(0,b.jsx)(t.Op,Object.assign({},R,{children:(0,b.jsx)(i,Object.assign({className:V},y,{children:P}))}))};x.displayName="Form"},"./lib/view/fields/radio/set-value.stories.tsx"(G,v,o){o.r(v),o.d(v,{SetValue:()=>c,__namedExportsOrder:()=>F,default:()=>T});var r=o("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),t=o.n(r),b=o("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),i=o.n(b),x=o("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),f=o("./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=o("./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"),D=o("./lib/view/form/index.tsx"),u=o("./lib/view/fields/radio/index.tsx"),P=o("./lib/view/fields/connect-form.tsx"),g=o("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),E,y=["name"],R=`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { useFormContext, get, FieldError } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { Form } from '../../form/index.js';\\nimport { Radio, RadioProps } from './index.js';\\nimport { ConnectForm } from '../connect-form.js';\\n\\nconst radioName = 'gender';\\n\\nconst ToggleValue = () => {\\n  const { setValue, watch } = useFormContext();\\n  const currentValue = watch(radioName) as string;\\n  return (\\n    <DSButtonV2\\n      onClick={() => setValue(radioName, !currentValue, { shouldDirty: true })}\\n    >\\n      Toggle\\n    </DSButtonV2>\\n  );\\n};\\n\\nconst Template: Story<RadioProps> = ({ name, ...rest }) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <Grid gutter=\\"xs\\">\\n        <Grid>\\n          <ConnectForm>\\n            {({ formState: { errors } }) => {\\n              const hasError = !!(get(errors, name) as FieldError);\\n              return <Radio name={name} {...rest} hasError={hasError} />;\\n            }}\\n          </ConnectForm>\\n        </Grid>\\n        <ToggleValue />\\n      </Grid>\\n    </Form>\\n  </Grid>\\n);\\n\\nexport default {\\n  title: 'Components/Form/Controls/Radio',\\n} as Meta;\\n\\nexport const SetValue = Template.bind({});\\n\\nSetValue.args = {\\n  name: radioName,\\n  labelText: 'Male',\\n  rules: { required: { value: true, message: 'Please select a gender' } },\\n  defaultChecked: true,\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"SetValue":{"startLoc":{"col":36,"line":23},"endLoc":{"col":1,"line":39},"startBody":{"col":36,"line":23},"endBody":{"col":1,"line":39}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { useFormContext, get, FieldError } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { Radio, RadioProps } from './index.js';
+import { ConnectForm } from '../connect-form.js';
+
+const radioName = 'gender';
+
+const ToggleValue = () => {
+  const { setValue, watch } = useFormContext();
+  const currentValue = watch(radioName) as string;
+  return (
+    <DSButtonV2
+      onClick={() => setValue(radioName, !currentValue, { shouldDirty: true })}
+    >
+      Toggle
+    </DSButtonV2>
+  );
+};
+
+const Template: Story<RadioProps> = ({ name, ...rest }) => (
+  <Grid p="m">
+    <Form>
+      <Grid gutter="xs">
+        <Grid>
+          <ConnectForm>
+            {({ formState: { errors } }) => {
+              const hasError = !!(get(errors, name) as FieldError);
+              return <Radio name={name} {...rest} hasError={hasError} />;
+            }}
+          </ConnectForm>
+        </Grid>
+        <ToggleValue />
+      </Grid>
+    </Form>
+  </Grid>
+);
+
+export default {parameters: {"storySource":{"source":"import { Story, Meta } from '@storybook/react';\\nimport { useFormContext, get, FieldError } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { Form } from '../../form/index.js';\\nimport { Radio, RadioProps } from './index.js';\\nimport { ConnectForm } from '../connect-form.js';\\n\\nconst radioName = 'gender';\\n\\nconst ToggleValue = () => {\\n  const { setValue, watch } = useFormContext();\\n  const currentValue = watch(radioName) as string;\\n  return (\\n    <DSButtonV2\\n      onClick={() => setValue(radioName, !currentValue, { shouldDirty: true })}\\n    >\\n      Toggle\\n    </DSButtonV2>\\n  );\\n};\\n\\nconst Template: Story<RadioProps> = ({ name, ...rest }) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <Grid gutter=\\"xs\\">\\n        <Grid>\\n          <ConnectForm>\\n            {({ formState: { errors } }) => {\\n              const hasError = !!(get(errors, name) as FieldError);\\n              return <Radio name={name} {...rest} hasError={hasError} />;\\n            }}\\n          </ConnectForm>\\n        </Grid>\\n        <ToggleValue />\\n      </Grid>\\n    </Form>\\n  </Grid>\\n);\\n\\nexport default {\\n  title: 'Components/Form/Controls/Radio',\\n} as Meta;\\n\\nexport const SetValue = Template.bind({});\\n\\nSetValue.args = {\\n  name: radioName,\\n  labelText: 'Male',\\n  rules: { required: { value: true, message: 'Please select a gender' } },\\n  defaultChecked: true,\\n};\\n","locationsMap":{"set-value":{"startLoc":{"col":36,"line":23},"endLoc":{"col":1,"line":39},"startBody":{"col":36,"line":23},"endBody":{"col":1,"line":39}}}},},
+  title: 'Components/Form/Controls/Radio',
+} as Meta;
+
+export const SetValue = Template.bind({});
+
+SetValue.args = {
+  name: radioName,
+  labelText: 'Male',
+  rules: { required: { value: true, message: 'Please select a gender' } },
+  defaultChecked: true,
+};
+`,p={SetValue:{startLoc:{col:36,line:31},endLoc:{col:1,line:47},startBody:{col:36,line:31},endBody:{col:1,line:47}}},R=`import { Story, Meta } from '@storybook/react';
+import { useFormContext, get, FieldError } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { Radio, RadioProps } from './index.js';
+import { ConnectForm } from '../connect-form.js';
+
+const radioName = 'gender';
+
+const ToggleValue = () => {
+  const { setValue, watch } = useFormContext();
+  const currentValue = watch(radioName) as string;
+  return (
+    <DSButtonV2
+      onClick={() => setValue(radioName, !currentValue, { shouldDirty: true })}
+    >
+      Toggle
+    </DSButtonV2>
+  );
+};
+
+const Template: Story<RadioProps> = ({ name, ...rest }) => (
+  <Grid p="m">
+    <Form>
+      <Grid gutter="xs">
+        <Grid>
+          <ConnectForm>
+            {({ formState: { errors } }) => {
+              const hasError = !!(get(errors, name) as FieldError);
+              return <Radio name={name} {...rest} hasError={hasError} />;
+            }}
+          </ConnectForm>
+        </Grid>
+        <ToggleValue />
+      </Grid>
+    </Form>
+  </Grid>
+);
+
+export default {
+  title: 'Components/Form/Controls/Radio',
+} as Meta;
+
+export const SetValue = Template.bind({});
+
+SetValue.args = {
+  name: radioName,
+  labelText: 'Male',
+  rules: { required: { value: true, message: 'Please select a gender' } },
+  defaultChecked: true,
+};
+`,p={SetValue:{startLoc:{col:36,line:23},endLoc:{col:1,line:39},startBody:{col:36,line:23},endBody:{col:1,line:39}}},a="gender",h=function(){var _=(0,x.xW)(),l=_.setValue,j=_.watch,M=j(a);return i()(V.e,{onClick:function(){return l(a,!M,{shouldDirty:!0})}},void 0,"Toggle")};h.displayName="ToggleValue";var C=function(_){var l=_.name,j=t()(_,y);return i()(f.Ay,{p:"m"},void 0,i()(D.l,{},void 0,i()(f.Ay,{gutter:"xs"},void 0,i()(f.Ay,{},void 0,i()(P.$,{},void 0,function(M){var A=M.formState.errors,d=!!(0,x.Jt)(A,l);return(0,g.jsx)(u.s,Object.assign({name:l},j,{hasError:d}))})),E||(E=i()(h,{})))))};C.displayName="Template";const T={parameters:{storySource:{source:`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { Story, Meta } from '@storybook/react';\\nimport { useFormContext, get, FieldError } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { Form } from '../../form/index.js';\\nimport { Radio, RadioProps } from './index.js';\\nimport { ConnectForm } from '../connect-form.js';\\n\\nconst radioName = 'gender';\\n\\nconst ToggleValue = () => {\\n  const { setValue, watch } = useFormContext();\\n  const currentValue = watch(radioName) as string;\\n  return (\\n    <DSButtonV2\\n      onClick={() => setValue(radioName, !currentValue, { shouldDirty: true })}\\n    >\\n      Toggle\\n    </DSButtonV2>\\n  );\\n};\\n\\nconst Template: Story<RadioProps> = ({ name, ...rest }) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <Grid gutter=\\"xs\\">\\n        <Grid>\\n          <ConnectForm>\\n            {({ formState: { errors } }) => {\\n              const hasError = !!(get(errors, name) as FieldError);\\n              return <Radio name={name} {...rest} hasError={hasError} />;\\n            }}\\n          </ConnectForm>\\n        </Grid>\\n        <ToggleValue />\\n      </Grid>\\n    </Form>\\n  </Grid>\\n);\\n\\nexport default {\\n  title: 'Components/Form/Controls/Radio',\\n} as Meta;\\n\\nexport const SetValue = Template.bind({});\\n\\nSetValue.args = {\\n  name: radioName,\\n  labelText: 'Male',\\n  rules: { required: { value: true, message: 'Please select a gender' } },\\n  defaultChecked: true,\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"SetValue":{"startLoc":{"col":36,"line":23},"endLoc":{"col":1,"line":39},"startBody":{"col":36,"line":23},"endBody":{"col":1,"line":39}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { useFormContext, get, FieldError } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { Radio, RadioProps } from './index.js';
+import { ConnectForm } from '../connect-form.js';
+
+const radioName = 'gender';
+
+const ToggleValue = () => {
+  const { setValue, watch } = useFormContext();
+  const currentValue = watch(radioName) as string;
+  return (
+    <DSButtonV2
+      onClick={() => setValue(radioName, !currentValue, { shouldDirty: true })}
+    >
+      Toggle
+    </DSButtonV2>
+  );
+};
+
+const Template: Story<RadioProps> = ({ name, ...rest }) => (
+  <Grid p="m">
+    <Form>
+      <Grid gutter="xs">
+        <Grid>
+          <ConnectForm>
+            {({ formState: { errors } }) => {
+              const hasError = !!(get(errors, name) as FieldError);
+              return <Radio name={name} {...rest} hasError={hasError} />;
+            }}
+          </ConnectForm>
+        </Grid>
+        <ToggleValue />
+      </Grid>
+    </Form>
+  </Grid>
+);
+
+export default {parameters: {"storySource":{"source":"import { Story, Meta } from '@storybook/react';\\nimport { useFormContext, get, FieldError } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { Form } from '../../form/index.js';\\nimport { Radio, RadioProps } from './index.js';\\nimport { ConnectForm } from '../connect-form.js';\\n\\nconst radioName = 'gender';\\n\\nconst ToggleValue = () => {\\n  const { setValue, watch } = useFormContext();\\n  const currentValue = watch(radioName) as string;\\n  return (\\n    <DSButtonV2\\n      onClick={() => setValue(radioName, !currentValue, { shouldDirty: true })}\\n    >\\n      Toggle\\n    </DSButtonV2>\\n  );\\n};\\n\\nconst Template: Story<RadioProps> = ({ name, ...rest }) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <Grid gutter=\\"xs\\">\\n        <Grid>\\n          <ConnectForm>\\n            {({ formState: { errors } }) => {\\n              const hasError = !!(get(errors, name) as FieldError);\\n              return <Radio name={name} {...rest} hasError={hasError} />;\\n            }}\\n          </ConnectForm>\\n        </Grid>\\n        <ToggleValue />\\n      </Grid>\\n    </Form>\\n  </Grid>\\n);\\n\\nexport default {\\n  title: 'Components/Form/Controls/Radio',\\n} as Meta;\\n\\nexport const SetValue = Template.bind({});\\n\\nSetValue.args = {\\n  name: radioName,\\n  labelText: 'Male',\\n  rules: { required: { value: true, message: 'Please select a gender' } },\\n  defaultChecked: true,\\n};\\n","locationsMap":{"set-value":{"startLoc":{"col":36,"line":23},"endLoc":{"col":1,"line":39},"startBody":{"col":36,"line":23},"endBody":{"col":1,"line":39}}}},},
+  title: 'Components/Form/Controls/Radio',
+} as Meta;
+
+export const SetValue = Template.bind({});
+
+SetValue.args = {
+  name: radioName,
+  labelText: 'Male',
+  rules: { required: { value: true, message: 'Please select a gender' } },
+  defaultChecked: true,
+};
+`,locationsMap:{"set-value":{startLoc:{col:36,line:31},endLoc:{col:1,line:47},startBody:{col:36,line:31},endBody:{col:1,line:47}}}},storySource:{source:`import { Story, Meta } from '@storybook/react';
+import { useFormContext, get, FieldError } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { Radio, RadioProps } from './index.js';
+import { ConnectForm } from '../connect-form.js';
+
+const radioName = 'gender';
+
+const ToggleValue = () => {
+  const { setValue, watch } = useFormContext();
+  const currentValue = watch(radioName) as string;
+  return (
+    <DSButtonV2
+      onClick={() => setValue(radioName, !currentValue, { shouldDirty: true })}
+    >
+      Toggle
+    </DSButtonV2>
+  );
+};
+
+const Template: Story<RadioProps> = ({ name, ...rest }) => (
+  <Grid p="m">
+    <Form>
+      <Grid gutter="xs">
+        <Grid>
+          <ConnectForm>
+            {({ formState: { errors } }) => {
+              const hasError = !!(get(errors, name) as FieldError);
+              return <Radio name={name} {...rest} hasError={hasError} />;
+            }}
+          </ConnectForm>
+        </Grid>
+        <ToggleValue />
+      </Grid>
+    </Form>
+  </Grid>
+);
+
+export default {
+  title: 'Components/Form/Controls/Radio',
+} as Meta;
+
+export const SetValue = Template.bind({});
+
+SetValue.args = {
+  name: radioName,
+  labelText: 'Male',
+  rules: { required: { value: true, message: 'Please select a gender' } },
+  defaultChecked: true,
+};
+`,locationsMap:{"set-value":{startLoc:{col:36,line:23},endLoc:{col:1,line:39},startBody:{col:36,line:23},endBody:{col:1,line:39}}}}},title:"Components/Form/Controls/Radio"};var c=C.bind({});c.args={name:a,labelText:"Male",rules:{required:{value:!0,message:"Please select a gender"}},defaultChecked:!0};var F=["SetValue"]},"./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"(G,v,o){o.d(v,{vz:()=>le});var r=o("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),t=o("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),b=o("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/defaultProps/useMemoMergePropsWithDefault.js"),i=o("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/globalProps/useGetGlobalAttributes.js"),x=o("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/xstyledProps/useGetXstyledProps.js"),f=o("./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"),V=o("./node_modules/.pnpm/uid@2.0.2/node_modules/uid/dist/index.mjs"),D=o("./node_modules/.pnpm/@elliemae+ds-truncated-tooltip-text@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-truncated-tooltip-text/dist/esm/SimpleTruncatedTooltipText.js"),u=o("./node_modules/.pnpm/@elliemae+ds-system@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-system/dist/esm/styled/styled.js"),P=o("./node_modules/.pnpm/@elliemae+ds-system@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-system/dist/esm/xStyledWrapper.js"),g=o("./node_modules/.pnpm/@elliemae+ds-system@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-system/dist/esm/styled/system.js"),E=o("./node_modules/.pnpm/@elliemae+ds-system@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-system/dist/esm/th.js");const y=({colors:e},n,s,m,O,S)=>S?e.danger[900]:m||O?e.neutral[500]:e.brand[600],R=(e,n,s,m,O,S=!1,k="mediaquery")=>{const w=`
+  content:"";
+  width: 0.615rem; /* 8px / 13 */
+  height: 0.615rem; /* 8px / 13 */
+  border-radius:50%;
+  display:inline-block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  background: ${y(e,n,S,s,m,O)};
+`,W=`
+    @media (max-width: ${e.breakpoints.small}) {
+      width: 0.75rem; /* 12px / 16 */
+      height: 0.75rem; /* 12px / 16 */
+    }
+    ${w}
+`,ee=`
+    ${w}
+    width: 0.923rem; /* 12px / 13 */
+    height: 0.923rem; /* 12px / 13 */
+    @media (max-width: ${e.breakpoints.small}) {
+      width: 0.75rem; /* 12px / 16 */
+      height: 0.75rem; /* 12px / 16 */
+    }
+  `;return n?`&:before {
+        ${k==="mediaquery"?W:k==="mobile"?ee:w}
+    }`:""},p=({colors:e},n,s)=>n?e.neutral["080"]:s?e.neutral["050"]:e.neutral["000"],a="DSRadio",h={CONTAINER:"root",INPUT:"input",LABEL:"label"},C=(0,u.I)("div",{name:a,slot:h.CONTAINER})`
+  ${({device:e,theme:n})=>e==="mobile"?`    
+      @media (max-width: ${n.breakpoints.small}) {
+      grid-template-columns: 1.5rem auto; /* 24px / 16px */
+    }
+      grid-template-columns: 1.846rem auto;
+      `:e==="mediaquery"?`
+        @media (max-width: ${n.breakpoints.small}) {
+          grid-template-columns: 1.5rem auto;
+        }
+        grid-template-columns: 1.23rem auto;
+    `:`
+    @media (max-width: ${n.breakpoints.small}) {
+      grid-template-columns: 1rem auto; /* 16px / 16px */
+    }
+    grid-template-columns: 1.2307rem auto; /* 16px / 13 */
+
+    `}
+  ${({hasLabel:e})=>e?"column-gap: 8px;":""}
+  display: inline-grid;
+  grid-template-rows: min-content;
+
+  align-items: center;
+  ${P.L1}
+`,T=(0,u.I)("span")`
+  ${({device:e,theme:n})=>e==="mobile"?`    
+      @media (max-width: ${n.breakpoints.small}) {
+        width: 1.5rem;  /* 24px / 16 */
+        height: 1.5rem;  /* 24px / 16 */
+      }
+      width: 1.846rem; /* 24px / 13 */
+      height: 1.846rem;  /* 24px / 13 */`:e==="mediaquery"?`
+        @media (max-width: ${n.breakpoints.small}) {
+          width: 1.5rem;  /* 24px / 16 */
+          height: 1.5rem;  /* 24px / 16 */
+        }
+        width: 1.2307rem; /* 16px / 13 */
+        height: 1.2307rem; /* 16px / 13 */
+      `:`
+    @media (max-width: ${n.breakpoints.small}) {
+      width: 1rem;  /* 16px / 16 */
+      height: 1rem;  /* 16px / 16 */
+    }
+    width: 1.2307rem; /* 16px / 13 */
+    height: 1.2307rem; /* 16px / 13 */
+  `}
+  border: 1px solid ${({theme:e,hasError:n})=>n?e.colors.danger[900]:e.colors.neutral[400]};
+  border-radius: 50px;
+  position: relative;
+  background: ${({theme:e,disabled:n,applyAriaDisabled:s,readOnly:m})=>p(e,n,m||s)};
+  ${({theme:e,checked:n,disabled:s,applyAriaDisabled:m,readOnly:O,hasError:S,device:k})=>R(e,n,s||m,O,S,!1,k)}
+  &:focus-within {
+    ${({theme:e,hasError:n,disabled:s})=>s?void 0:`border: 1px solid ${n?e.colors.danger[900]:e.colors.brand[700]}; outline : 1px solid ${n?e.colors.danger[900]:e.colors.brand[700]} `};
+    &:hover {
+      ${({theme:e,checked:n,disabled:s,applyAriaDisabled:m,readOnly:O,hasError:S,device:k})=>R(e,n,s||m,O,S,!0,k)}
+    }
+  }
+  &:hover {
+    background: ${({theme:e,applyAriaDisabled:n,readOnly:s,disabled:m})=>n||s?e.colors.neutral["050"]:!m&&!n?e.colors.brand[200]:void 0};
+    ${({theme:e,hasError:n,disabled:s})=>!n&&!s?` border: 1px solid  ${e.colors.brand[600]}`:void 0};
+  }
+`,c=(0,g.AH)`
+  &:hover {
+    cursor: pointer;
+  }
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+`,F=(0,u.I)("input",{name:a,slot:h.INPUT})`
+  ${c}
+  &:disabled, &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+`,_=(0,u.I)("label",{name:a,slot:h.LABEL})`
+  color: ${({theme:e,disabled:n,readOnly:s})=>n||s?e.colors.neutral[700]:e.colors.neutral[800]};
+  line-height: 1.2307rem;
+  @media (max-width: ${E.th.breakpoint("small")}) {
+    line-height: 1rem; /* 13px / 16 */
+  }
+  ${({device:e,theme:n})=>e==="mobile"?`
+        @media (max-width: ${n.breakpoints.small}) {
+          font-size: 1rem;  /* 16px / 16 */
+        }
+        font-size: 1.2307rem; /* 16px / 13 */
+        `:e===void 0?`
+          font-size: 1rem; 
+        `:`
+      @media (max-width: ${n.breakpoints.small}) {
+        font-size: 0.8125rem;  /* 13px / 16 */
+      }
+  
+      font-size: 1rem;  /* 13px / 13 */
+    `}
+  display: inherit;
+  width: fit-content;
+
+  ${({disabled:e})=>e?`&:hover {
+    cursor: not-allowed;
+  }`:`&:hover {
+    cursor: pointer;
+  }`}
+`,l=(0,u.I)("span")``,j=u.I.p`
+  display: none;
+`;var M=o("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/globalProps/globalAttributesPropTypes.js"),A=o("./node_modules/.pnpm/@elliemae+ds-props-helpers@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-props-helpers/dist/esm/xstyledProps/xstyledPropTypes.js"),d=o("./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 U={wrapLabel:!1,hasError:!1,checked:!1,disabled:!1,visualOnly:!1,applyAriaDisabled:!1,device:"mediaquery"},L={...M.P,...A.w,name:d.A.string.description("Radio name attribute. Without this WCAG will fail, name is required for a bunch of success criterias"),value:d.A.string.description("Radio value. Without this WCAG will fail, value is required for a bunch of success criterias"),onChange:d.A.func.description("Radio onchange callback").signature("((newValue: string,e:  React.ChangeEvent | React.KeyboardEvent) => void)"),label:d.A.string.description("Radio Label property. This label is also going to be used as an aria-label for screen readers."),checked:d.A.bool.description("Whether the radio is checked or not"),hasError:d.A.bool.description("Whether the radio has error or not."),innerRef:d.A.oneOfType([d.A.func,d.A.object]).description("Radio input ref."),wrapLabel:d.A.bool.description("Whether to wrap or truncate the label"),device:d.A.oneOf(["mobile","desktop","mediaquery"]).description("used for responsive designs, this controls how the styling should behave. you can force mobile/desktop styling or rely on mediaquery to auto-detect").defaultValue("mediaquery"),applyAriaDisabled:d.A.bool.description("Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION").defaultValue(!1)},K=L;var N=o("./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");const Z=e=>{throw new Error(`DSControlledRadio:: ${e}
+  `)},z=(e,n)=>{(0,N.D)(e,n,a),typeof e.label>"u"&&typeof e["aria-label"]>"u"&&Z("Please provide a label or ariaLabel property to use this component.")},H={CONTAINER:"ds-radio-container",INPUT:"ds-radio",READONLY_HELPER_MSG:"ds-radio-readonly-helper-msg"},Y=e=>{const n=(0,b.b)(e,U);z(e,L);const{checked:s,applyAriaDisabled:m,visualOnly:O,device:S,hasError:k,innerRef:w,value:W,wrapLabel:ee,onChange:oe}=n,ne=(0,r.useCallback)(Q=>{oe&&W&&!m&&oe(W,Q)},[m,oe,W]),te=(0,r.useCallback)(Q=>{Q.key==="Enter"&&ne(Q)},[ne]),se=r.useMemo(()=>({onKeyDown:te}),[te]),{id:ae,disabled:re,readOnly:$,label:X,className:de,...ie}=(0,i.u)(n,se),J=(0,r.useMemo)(()=>ae||`ds-form-radio-${(0,V.L)(5)}`,[ae]),me=(0,x.d)(n);return(0,t.jsxs)(C,{device:S,"data-testid":"ds-radio-container",hasLabel:Boolean(X),className:de,...me,children:[(0,t.jsx)(T,{device:S,checked:s,hasError:k,disabled:re,applyAriaDisabled:m,readOnly:$,children:O?null:(0,t.jsx)(F,{"data-testid":"ds-radio",type:"radio",...se,...ie,id:J,innerRef:w,onChange:ne,checked:s,disabled:re,"aria-disabled":m||$,"aria-invalid":k,"aria-describedby":$?`${J}-read-only-helper-msg`:void 0})}),X&&(0,t.jsx)(_,{device:S,htmlFor:J,disabled:re||m,readOnly:$,checked:s,"data-testid":"ds-radio-label",children:ee?(0,t.jsx)(l,{children:X}):(0,t.jsx)(D.n,{value:X})}),$?(0,t.jsx)(j,{"data-testid":H.READONLY_HELPER_MSG,id:`${J}-read-only-helper-msg`,children:"Read only"}):null]})};Y.displayName="DSControlledRadio";const B=(0,f.A)(Y);B.propTypes=K;var q,I;const le=({...e})=>(0,t.jsx)(Y,{...e}),ue=({...e})=>q(I,{...e,visualOnly:!0})},"./node_modules/.pnpm/@elliemae+ds-truncated-tooltip-text@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-truncated-tooltip-text/dist/esm/SimpleTruncatedTooltipText.js"(G,v,o){o.d(v,{n:()=>y});var r=o("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),t=o("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),b=o("./node_modules/.pnpm/@elliemae+ds-legacy-popover@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-popover/dist/esm/DSPopover.js"),i=o("./node_modules/.pnpm/@elliemae+ds-legacy-popper@1.0.16_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-legacy-popper/dist/esm/positions.js"),x=o("./node_modules/.pnpm/@elliemae+ds-system@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-system/dist/esm/styled/styled.js"),f=o("./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");const V=(p,a)=>{const h=(0,r.useRef)(),C=(0,r.useCallback)(()=>{const c=h.current;c&&(h.current=void 0,clearTimeout(c))},[h]);return[(0,r.useCallback)((...c)=>{h.current=setTimeout(()=>p(...c),a)},[p,a]),C]};var D=null;const u="DS-SimpleTruncateText",P=({offsetWidth:p,scrollWidth:a})=>p<a,g=(p="",a={})=>({reference:null,visible:!1,value:p,options:a}),E=x.I.span`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  max-width: 100%;
+`,y=p=>{const{containerProps:a,tooltipDelay:h,placement:C,value:T,zIndex:c,tooltipOptions:F,textOptions:_}=p,[l,j]=(0,r.useState)(g(T,F)),M=(0,r.useCallback)(B=>{j({...l,...B,visible:!0})},[l]),A=(0,r.useCallback)(B=>{j({...l,...B,visible:!1})},[l]),[d,U]=V(M,h),L=(0,r.useCallback)(B=>{const{target:q}=B,I=q.closest(`[data-testid="${u}"]`);I&&P(I)&&d({value:T,reference:I})},[d,T]),K=(0,r.useCallback)(()=>{U(),A({reference:null})},[A,U]),N=(0,r.useMemo)(()=>d?{onMouseEnter:L,onMouseLeave:K}:{},[d,L,K]),Z=(0,r.useContext)(f.ThemeContext),z=(0,r.useMemo)(()=>(0,t.jsx)(t.Fragment,{children:l.visible?(0,t.jsx)(b.F0,{boundaries:"window",style:{pointerEvents:"none",zIndex:c??Z.zIndex.tooltip},placement:C,content:l.value,referenceEl:l.reference,visible:l.visible,showArrow:!0}):null}),[l,C,c]),H=(0,r.useMemo)(()=>(0,t.jsx)(t.Fragment,{children:(0,t.jsx)(E,{...a&&{...a},..._&&{..._},...N&&{...N},"data-testid":u,children:T})}),[a,_,N,T]);return(0,r.useMemo)(()=>(0,t.jsxs)(t.Fragment,{children:[H,z]}),[H,z])};y.defaultProps={containerProps:{},tooltipOptions:{},textOptions:{},value:"",placement:i.y.TOP,tooltipDelay:200};var R=null}}]);