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

package/demo/view-fields-text-box-index-stories.2361b028.iframe.bundle.js

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

package/demo/view-fields-toggle-index-stories.49385e35.iframe.bundle.js

@@ -0,0 +1,145 @@
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[5936],{"./lib/view/fields/watch-value.tsx"(h,i,e){e.d(i,{n:()=>a});var p=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(p),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"),f=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"),m=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),n,d=r.default.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),c=r.default.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),a=function(t){var g=t.name,u=t.label,l=(0,m.xW)(),v=l.watch,T=v(g,!1)||"";return o()(f.Ay,{},void 0,o()(d,{},void 0,n||(n=o()("h4",{},void 0,"Form Data:")),o()(c,{},void 0,o()("div",{},void 0,u," : ",o()("strong",{},void 0,JSON.stringify(T))))))};a.displayName="WatchValue"},"./lib/view/form/index.tsx"(h,i,e){e.d(i,{l:()=>m});var p=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"),r=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),f=p.default.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),m=function(n){var d=n.classname,c=n.reactHookFormProps,a=c===void 0?{mode:"onBlur"}:c,t=n.children,g=n.onSubmit,u=(0,o.mN)(a),l={};g&&(l.onSubmit=u.handleSubmit(g));var v=Object.assign(u,{formProps:a});return(0,r.jsx)(o.Op,Object.assign({},v,{children:(0,r.jsx)(f,Object.assign({className:d},l,{children:t}))}))};m.displayName="Form"},"./lib/view/fields/toggle/index.stories.tsx"(h,i,e){e.r(i),e.d(i,{Basic:()=>S,__namedExportsOrder:()=>P,default:()=>D});var p=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),o=e.n(p),r=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"),f=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"),m=e("./lib/view/form/index.tsx"),n=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),d=e.n(n),c=e("./node_modules/.pnpm/@elliemae+ds-form-toggle@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-toggle/dist/esm/ControlledToggle.js"),a=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),t=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),g=["name","defaultValue","rules"],u=["value","onChange"],l=function(s){var C=s.name,x=s.defaultValue,F=x===void 0?!1:x,y=s.rules,M=y===void 0?{}:y,O=d()(s,g);return o()(a.xI,{name:C,rules:M,defaultValue:F,render:function(k){var b=k.field,_=b.value,w=b.onChange,E=d()(b,u);return(0,t.jsx)(c.m,Object.assign({},O,E,{checked:_,value:_.toString(),onChange:function(){return w(!_)}}))}})};l.displayName="Toggle";var v=e("./lib/view/fields/watch-value.tsx"),T,j=`
+    
+    // @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 { Form } from '../../form/index.js';\\nimport { Toggle, ToggleProps } from './index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/Toggle',\\n  component: Toggle,\\n} as Meta;\\n\\nconst Template: Story<ToggleProps & { label: string }> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <div>\\n        <Toggle {...args} />\\n      </div>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'acknowledge',\\n  name: 'acknowledge',\\n  defaultValue: false,\\n  label: 'Acknowledge Electronic delivery of documents',\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":57,"line":13},"endLoc":{"col":1,"line":23},"startBody":{"col":57,"line":13},"endBody":{"col":1,"line":23}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { Toggle, ToggleProps } from './index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {parameters: {"storySource":{"source":"import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { Form } from '../../form/index.js';\\nimport { Toggle, ToggleProps } from './index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/Toggle',\\n  component: Toggle,\\n} as Meta;\\n\\nconst Template: Story<ToggleProps & { label: string }> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <div>\\n        <Toggle {...args} />\\n      </div>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'acknowledge',\\n  name: 'acknowledge',\\n  defaultValue: false,\\n  label: 'Acknowledge Electronic delivery of documents',\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":57,"line":13},"endLoc":{"col":1,"line":23},"startBody":{"col":57,"line":13},"endBody":{"col":1,"line":23}}}},},
+  title: 'Components/Form/Controls/Toggle',
+  component: Toggle,
+} as Meta;
+
+const Template: Story<ToggleProps & { label: string }> = (args) => (
+  <Grid p="m">
+    <Form>
+      <div>
+        <Toggle {...args} />
+      </div>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'acknowledge',
+  name: 'acknowledge',
+  defaultValue: false,
+  label: 'Acknowledge Electronic delivery of documents',
+};
+`,V={Basic:{startLoc:{col:57,line:21},endLoc:{col:1,line:31},startBody:{col:57,line:21},endBody:{col:1,line:31}}},j=`import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { Toggle, ToggleProps } from './index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {
+  title: 'Components/Form/Controls/Toggle',
+  component: Toggle,
+} as Meta;
+
+const Template: Story<ToggleProps & { label: string }> = (args) => (
+  <Grid p="m">
+    <Form>
+      <div>
+        <Toggle {...args} />
+      </div>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'acknowledge',
+  name: 'acknowledge',
+  defaultValue: false,
+  label: 'Acknowledge Electronic delivery of documents',
+};
+`,V={Basic:{startLoc:{col:57,line:13},endLoc:{col:1,line:23},startBody:{col:57,line:13},endBody:{col:1,line:23}}};const D={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 { Form } from '../../form/index.js';\\nimport { Toggle, ToggleProps } from './index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/Toggle',\\n  component: Toggle,\\n} as Meta;\\n\\nconst Template: Story<ToggleProps & { label: string }> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <div>\\n        <Toggle {...args} />\\n      </div>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'acknowledge',\\n  name: 'acknowledge',\\n  defaultValue: false,\\n  label: 'Acknowledge Electronic delivery of documents',\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"Basic":{"startLoc":{"col":57,"line":13},"endLoc":{"col":1,"line":23},"startBody":{"col":57,"line":13},"endBody":{"col":1,"line":23}}};
+    
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { Toggle, ToggleProps } from './index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {parameters: {"storySource":{"source":"import { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { Form } from '../../form/index.js';\\nimport { Toggle, ToggleProps } from './index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/Toggle',\\n  component: Toggle,\\n} as Meta;\\n\\nconst Template: Story<ToggleProps & { label: string }> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <div>\\n        <Toggle {...args} />\\n      </div>\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const Basic = Template.bind({});\\n\\nBasic.args = {\\n  id: 'acknowledge',\\n  name: 'acknowledge',\\n  defaultValue: false,\\n  label: 'Acknowledge Electronic delivery of documents',\\n};\\n","locationsMap":{"basic":{"startLoc":{"col":57,"line":13},"endLoc":{"col":1,"line":23},"startBody":{"col":57,"line":13},"endBody":{"col":1,"line":23}}}},},
+  title: 'Components/Form/Controls/Toggle',
+  component: Toggle,
+} as Meta;
+
+const Template: Story<ToggleProps & { label: string }> = (args) => (
+  <Grid p="m">
+    <Form>
+      <div>
+        <Toggle {...args} />
+      </div>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'acknowledge',
+  name: 'acknowledge',
+  defaultValue: false,
+  label: 'Acknowledge Electronic delivery of documents',
+};
+`,locationsMap:{basic:{startLoc:{col:57,line:21},endLoc:{col:1,line:31},startBody:{col:57,line:21},endBody:{col:1,line:31}}}},storySource:{source:`import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { Form } from '../../form/index.js';
+import { Toggle, ToggleProps } from './index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {
+  title: 'Components/Form/Controls/Toggle',
+  component: Toggle,
+} as Meta;
+
+const Template: Story<ToggleProps & { label: string }> = (args) => (
+  <Grid p="m">
+    <Form>
+      <div>
+        <Toggle {...args} />
+      </div>
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue {...args} />
+    </Form>
+  </Grid>
+);
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  id: 'acknowledge',
+  name: 'acknowledge',
+  defaultValue: false,
+  label: 'Acknowledge Electronic delivery of documents',
+};
+`,locationsMap:{basic:{startLoc:{col:57,line:13},endLoc:{col:1,line:23},startBody:{col:57,line:13},endBody:{col:1,line:23}}}}},title:"Components/Form/Controls/Toggle",component:l};var B=function(s){return o()(r.Ay,{p:"m"},void 0,o()(m.l,{},void 0,o()("div",{},void 0,(0,t.jsx)(l,Object.assign({},s))),T||(T=o()(f.e,{},void 0,"Submit")),(0,t.jsx)(v.n,Object.assign({},s))))};B.displayName="Template";var S=B.bind({});S.args={id:"acknowledge",name:"acknowledge",defaultValue:!1,label:"Acknowledge Electronic delivery of documents"};var P=["Basic"]}}]);