@pega/cosmos-react-demos 4.0.0-dev.11.1 → 4.0.0-dev.12.0

package/lib/core/FieldGroup/FieldGroup.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAY/C,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CAqDtD,CAAC"}
+{"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAQL,eAAe,EAChB,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACrD,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACtD,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CAuDtD,CAAC"}

package/lib/core/FieldGroup/FieldGroup.stories.js

@@ -5,28 +5,42 @@ export default {
     component: FieldGroup
 };
 export const FieldGroupDemo = (args) => {
-    return (_jsxs(Grid, { container: { rowGap: 1 }, children: [_jsx(FieldGroup, { name: args.firstGroupName, description: args.firstGroupDescription, collapsible: args.firstGroupCollapsible, additionalInfo: args.showFirstAdditionalInfo
+    return (_jsxs(Grid, { container: { rowGap: 1 }, children: [_jsx(FieldGroup, { name: args.firstGroupName, headingTag: args.showfirstGroupHeadingTag ? args.firstGroupHeadingTag : undefined, description: args.firstGroupDescription, collapsible: args.firstGroupCollapsible, additionalInfo: args.showFirstAdditionalInfo
                     ? { heading: 'Additional Info', content: 'This is a field group' }
-                    : undefined, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 1' }), _jsxs(Select, { label: 'Select 1', children: [_jsx(Option, { value: 'A', children: "Option 1A" }), _jsx(Option, { value: 'B', children: "Option 1B" })] }), _jsx(DateInput, { label: 'Date 1' }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 1' }) }), _jsx(Input, { required: true, type: 'text', label: 'Required 1' }), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 1' })] }) }), _jsx(FieldGroup, { name: args.secondGroupName, description: args.secondGroupDescription, collapsible: args.secondGroupCollapsible, additionalInfo: args.showSecondAdditionalInfo
+                    : undefined, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 1' }), _jsxs(Select, { label: 'Select 1', children: [_jsx(Option, { value: 'A', children: "Option 1A" }), _jsx(Option, { value: 'B', children: "Option 1B" })] }), _jsx(DateInput, { label: 'Date 1' }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 1' }) }), _jsx(Input, { required: true, type: 'text', label: 'Required 1' }), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 1' })] }) }), _jsx(FieldGroup, { name: args.secondGroupName, headingTag: args.showsecondGroupHeadingTag ? args.secondGroupHeadingTag : undefined, description: args.secondGroupDescription, collapsible: args.secondGroupCollapsible, additionalInfo: args.showSecondAdditionalInfo
                     ? { heading: 'Additional Info', content: 'This is another field group' }
                     : undefined, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 2' }), _jsxs(Select, { label: 'Select 2', children: [_jsx(Option, { value: 'A', children: "Option 2A" }), _jsx(Option, { value: 'B', children: "Option 2B" })] }), _jsx(DateInput, { label: 'Date 2' }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 2' }) }), _jsx(Input, { required: true, type: 'text', label: 'Required 2' }), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 2' })] }) })] }));
 };
 FieldGroupDemo.args = {
     firstGroupName: 'Field group 1',
+    firstGroupHeadingTag: 'h1',
+    showfirstGroupHeadingTag: true,
     firstGroupCollapsible: true,
     firstGroupDescription: '',
     showFirstAdditionalInfo: true,
     secondGroupName: 'Field group 2',
+    secondGroupHeadingTag: 'h1',
+    showsecondGroupHeadingTag: true,
     secondGroupCollapsible: true,
     secondGroupDescription: '',
     showSecondAdditionalInfo: true
 };
 FieldGroupDemo.argTypes = {
     firstGroupName: { control: { type: 'text' } },
+    firstGroupHeadingTag: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+        control: { type: 'select' }
+    },
+    showfirstGroupHeadingTag: { control: { type: 'boolean' } },
     firstGroupCollapsible: { control: { type: 'boolean' } },
     firstGroupDescription: { control: { type: 'text' } },
     showFirstAdditionalInfo: { control: { type: 'boolean' } },
     secondGroupName: { control: { type: 'text' } },
+    secondGroupHeadingTag: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+        control: { type: 'select' }
+    },
+    showsecondGroupHeadingTag: { control: { type: 'boolean' } },
     secondGroupCollapsible: { control: { type: 'boolean' } },
     secondGroupDescription: { control: { type: 'text' } },
     showSecondAdditionalInfo: { control: { type: 'boolean' } }

package/lib/core/FieldGroup/FieldGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  DateInput,\n  FieldGroup,\n  Grid,\n  Input,\n  Select,\n  Option,\n  TextArea\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/FieldGroup',\n  component: FieldGroup\n} as Meta;\n\ninterface FieldGroupStoryProps {\n  firstGroupName?: string;\n  firstGroupCollapsible?: boolean;\n  firstGroupDescription?: string;\n  showFirstAdditionalInfo?: boolean;\n  secondGroupName?: string;\n  secondGroupCollapsible?: boolean;\n  secondGroupDescription?: string;\n  showSecondAdditionalInfo?: boolean;\n}\n\nexport const FieldGroupDemo: Story<FieldGroupStoryProps> = (args: FieldGroupStoryProps) => {\n  return (\n    <Grid container={{ rowGap: 1 }}>\n      <FieldGroup\n        name={args.firstGroupName}\n        description={args.firstGroupDescription}\n        collapsible={args.firstGroupCollapsible}\n        additionalInfo={\n          args.showFirstAdditionalInfo\n            ? { heading: 'Additional Info', content: 'This is a field group' }\n            : undefined\n        }\n      >\n        <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>\n          <Input type='text' label='Text 1' />\n          <Select label='Select 1'>\n            <Option value='A'>Option 1A</Option>\n            <Option value='B'>Option 1B</Option>\n          </Select>\n          <DateInput label='Date 1' />\n          <Grid item={{ colStart: '1', colEnd: '-1' }}>\n            <TextArea label='TextArea 1' />\n          </Grid>\n          <Input required type='text' label='Required 1' />\n          <Input disabled type='text' label='Disabled 1' />\n        </Grid>\n      </FieldGroup>\n      <FieldGroup\n        name={args.secondGroupName}\n        description={args.secondGroupDescription}\n        collapsible={args.secondGroupCollapsible}\n        additionalInfo={\n          args.showSecondAdditionalInfo\n            ? { heading: 'Additional Info', content: 'This is another field group' }\n            : undefined\n        }\n      >\n        <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>\n          <Input type='text' label='Text 2' />\n          <Select label='Select 2'>\n            <Option value='A'>Option 2A</Option>\n            <Option value='B'>Option 2B</Option>\n          </Select>\n          <DateInput label='Date 2' />\n          <Grid item={{ colStart: '1', colEnd: '-1' }}>\n            <TextArea label='TextArea 2' />\n          </Grid>\n          <Input required type='text' label='Required 2' />\n          <Input disabled type='text' label='Disabled 2' />\n        </Grid>\n      </FieldGroup>\n    </Grid>\n  );\n};\n\nFieldGroupDemo.args = {\n  firstGroupName: 'Field group 1',\n  firstGroupCollapsible: true,\n  firstGroupDescription: '',\n  showFirstAdditionalInfo: true,\n  secondGroupName: 'Field group 2',\n  secondGroupCollapsible: true,\n  secondGroupDescription: '',\n  showSecondAdditionalInfo: true\n};\n\nFieldGroupDemo.argTypes = {\n  firstGroupName: { control: { type: 'text' } },\n  firstGroupCollapsible: { control: { type: 'boolean' } },\n  firstGroupDescription: { control: { type: 'text' } },\n  showFirstAdditionalInfo: { control: { type: 'boolean' } },\n  secondGroupName: { control: { type: 'text' } },\n  secondGroupCollapsible: { control: { type: 'boolean' } },\n  secondGroupDescription: { control: { type: 'text' } },\n  showSecondAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"FieldGroup.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,SAAS,EACT,UAAU,EACV,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EAET,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;CACd,CAAC;AAiBV,MAAM,CAAC,MAAM,cAAc,GAAgC,CAAC,IAA0B,EAAE,EAAE;IACxF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC5B,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,UAAU,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,EACjF,WAAW,EAAE,IAAI,CAAC,qBAAqB,EACvC,WAAW,EAAE,IAAI,CAAC,qBAAqB,EACvC,cAAc,EACZ,IAAI,CAAC,uBAAuB;oBAC1B,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,uBAAuB,EAAE;oBAClE,CAAC,CAAC,SAAS,YAGf,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,gDAAgD,EAAE,aACjF,KAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,GAAG,EACpC,MAAC,MAAM,IAAC,KAAK,EAAC,UAAU,aACtB,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,0BAAmB,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,0BAAmB,IAC7B,EACT,KAAC,SAAS,IAAC,KAAK,EAAC,QAAQ,GAAG,EAC5B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,YACzC,KAAC,QAAQ,IAAC,KAAK,EAAC,YAAY,GAAG,GAC1B,EACP,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,EACjD,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,IAC5C,GACI,EACb,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,UAAU,EAAE,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EACnF,WAAW,EAAE,IAAI,CAAC,sBAAsB,EACxC,WAAW,EAAE,IAAI,CAAC,sBAAsB,EACxC,cAAc,EACZ,IAAI,CAAC,wBAAwB;oBAC3B,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,6BAA6B,EAAE;oBACxE,CAAC,CAAC,SAAS,YAGf,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,iDAAiD,EAAE,aAClF,KAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,GAAG,EACpC,MAAC,MAAM,IAAC,KAAK,EAAC,UAAU,aACtB,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,0BAAmB,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,0BAAmB,IAC7B,EACT,KAAC,SAAS,IAAC,KAAK,EAAC,QAAQ,GAAG,EAC5B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,YACzC,KAAC,QAAQ,IAAC,KAAK,EAAC,YAAY,GAAG,GAC1B,EACP,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,EACjD,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,IAC5C,GACI,IACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,cAAc,EAAE,eAAe;IAC/B,oBAAoB,EAAE,IAAI;IAC1B,wBAAwB,EAAE,IAAI;IAC9B,qBAAqB,EAAE,IAAI;IAC3B,qBAAqB,EAAE,EAAE;IACzB,uBAAuB,EAAE,IAAI;IAC7B,eAAe,EAAE,eAAe;IAChC,qBAAqB,EAAE,IAAI;IAC3B,yBAAyB,EAAE,IAAI;IAC/B,sBAAsB,EAAE,IAAI;IAC5B,sBAAsB,EAAE,EAAE;IAC1B,wBAAwB,EAAE,IAAI;CAC/B,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC7C,oBAAoB,EAAE;QACpB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;QAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,wBAAwB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1D,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACvD,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpD,uBAAuB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACzD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,qBAAqB,EAAE;QACrB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;QAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,yBAAyB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3D,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACxD,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACrD,wBAAwB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3D,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  DateInput,\n  FieldGroup,\n  Grid,\n  Input,\n  Select,\n  Option,\n  TextArea,\n  FieldGroupProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/FieldGroup',\n  component: FieldGroup\n} as Meta;\n\ninterface FieldGroupStoryProps {\n  firstGroupName?: string;\n  firstGroupHeadingTag?: FieldGroupProps['headingTag'];\n  showfirstGroupHeadingTag?: boolean;\n  firstGroupCollapsible?: boolean;\n  firstGroupDescription?: string;\n  showFirstAdditionalInfo?: boolean;\n  secondGroupName?: string;\n  secondGroupHeadingTag?: FieldGroupProps['headingTag'];\n  showsecondGroupHeadingTag?: boolean;\n  secondGroupCollapsible?: boolean;\n  secondGroupDescription?: string;\n  showSecondAdditionalInfo?: boolean;\n}\n\nexport const FieldGroupDemo: Story<FieldGroupStoryProps> = (args: FieldGroupStoryProps) => {\n  return (\n    <Grid container={{ rowGap: 1 }}>\n      <FieldGroup\n        name={args.firstGroupName}\n        headingTag={args.showfirstGroupHeadingTag ? args.firstGroupHeadingTag : undefined}\n        description={args.firstGroupDescription}\n        collapsible={args.firstGroupCollapsible}\n        additionalInfo={\n          args.showFirstAdditionalInfo\n            ? { heading: 'Additional Info', content: 'This is a field group' }\n            : undefined\n        }\n      >\n        <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>\n          <Input type='text' label='Text 1' />\n          <Select label='Select 1'>\n            <Option value='A'>Option 1A</Option>\n            <Option value='B'>Option 1B</Option>\n          </Select>\n          <DateInput label='Date 1' />\n          <Grid item={{ colStart: '1', colEnd: '-1' }}>\n            <TextArea label='TextArea 1' />\n          </Grid>\n          <Input required type='text' label='Required 1' />\n          <Input disabled type='text' label='Disabled 1' />\n        </Grid>\n      </FieldGroup>\n      <FieldGroup\n        name={args.secondGroupName}\n        headingTag={args.showsecondGroupHeadingTag ? args.secondGroupHeadingTag : undefined}\n        description={args.secondGroupDescription}\n        collapsible={args.secondGroupCollapsible}\n        additionalInfo={\n          args.showSecondAdditionalInfo\n            ? { heading: 'Additional Info', content: 'This is another field group' }\n            : undefined\n        }\n      >\n        <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>\n          <Input type='text' label='Text 2' />\n          <Select label='Select 2'>\n            <Option value='A'>Option 2A</Option>\n            <Option value='B'>Option 2B</Option>\n          </Select>\n          <DateInput label='Date 2' />\n          <Grid item={{ colStart: '1', colEnd: '-1' }}>\n            <TextArea label='TextArea 2' />\n          </Grid>\n          <Input required type='text' label='Required 2' />\n          <Input disabled type='text' label='Disabled 2' />\n        </Grid>\n      </FieldGroup>\n    </Grid>\n  );\n};\n\nFieldGroupDemo.args = {\n  firstGroupName: 'Field group 1',\n  firstGroupHeadingTag: 'h1',\n  showfirstGroupHeadingTag: true,\n  firstGroupCollapsible: true,\n  firstGroupDescription: '',\n  showFirstAdditionalInfo: true,\n  secondGroupName: 'Field group 2',\n  secondGroupHeadingTag: 'h1',\n  showsecondGroupHeadingTag: true,\n  secondGroupCollapsible: true,\n  secondGroupDescription: '',\n  showSecondAdditionalInfo: true\n};\n\nFieldGroupDemo.argTypes = {\n  firstGroupName: { control: { type: 'text' } },\n  firstGroupHeadingTag: {\n    options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n    control: { type: 'select' }\n  },\n  showfirstGroupHeadingTag: { control: { type: 'boolean' } },\n  firstGroupCollapsible: { control: { type: 'boolean' } },\n  firstGroupDescription: { control: { type: 'text' } },\n  showFirstAdditionalInfo: { control: { type: 'boolean' } },\n  secondGroupName: { control: { type: 'text' } },\n  secondGroupHeadingTag: {\n    options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n    control: { type: 'select' }\n  },\n  showsecondGroupHeadingTag: { control: { type: 'boolean' } },\n  secondGroupCollapsible: { control: { type: 'boolean' } },\n  secondGroupDescription: { control: { type: 'text' } },\n  showSecondAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/FieldGroup/FieldGroupList.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,uBAAuB,EAMxB,MAAM,yBAAyB,CAAC;AAEjC,KAAK,wBAAwB,GACzB;IACE,MAAM,EAAE,KAAK,CAAC;CACf,GACD;IACE,MAAM,EAAE,QAAQ,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEN,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;CACxD;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,cAChB,SAAS,yBAAyB,SAAS,KAAK,WAAW,GAAG,IAAI,aAErE,uBAAuB,EAAE,WACvB,wBAAwB,KAChC,uBAAuB,EAoBzB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,oBAAqB,SAAS,uBAM3D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,oBAAqB,SAAS,uBAmC/D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,oBAAqB,SAAS,uBAoBhE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,SAOhC,CAAC"}
+{"version":3,"file":"FieldGroupList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,uBAAuB,EAMxB,MAAM,yBAAyB,CAAC;AAEjC,KAAK,wBAAwB,GACzB;IACE,MAAM,EAAE,KAAK,CAAC;CACf,GACD;IACE,MAAM,EAAE,QAAQ,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEN,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;CACxD;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,cAChB,SAAS,yBAAyB,SAAS,KAAK,WAAW,GAAG,IAAI,aAErE,uBAAuB,EAAE,WACvB,wBAAwB,KAChC,uBAAuB,EAyBzB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,oBAAqB,SAAS,uBAM3D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,oBAAqB,SAAS,uBAmC/D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,oBAAqB,SAAS,uBAoBhE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,SAOhC,CAAC"}

package/lib/core/FieldGroup/FieldGroupList.mocks.js

@@ -8,6 +8,7 @@ export const fieldGroupReducer = (groupMeta, FieldRenderer) => (items, payload)
                 ...items,
                 {
                     name: `${groupMeta.label} ${items.length + 1}`,
+                    headingTag: 'h3',
                     id: createUID(),
                     children: groupMeta.fields.map(props => _createElement(FieldRenderer, { ...props, key: props.label }))
                 }
@@ -15,7 +16,11 @@ export const fieldGroupReducer = (groupMeta, FieldRenderer) => (items, payload)
         case 'delete':
             return items
                 .filter(group => group.id !== payload.id)
-                .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));
+                .map((group, i) => ({
+                ...group,
+                name: `${groupMeta.label} ${i + 1}`,
+                headingTag: 'h3'
+            }));
         default:
             return items;
     }

package/lib/core/FieldGroup/FieldGroupList.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.mocks.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createUID,\n  DateInput,\n  FieldGroupListItemProps,\n  FileInput,\n  Input,\n  Option,\n  Select,\n  TextArea\n} from '@pega/cosmos-react-core';\n\ntype FieldGroupReducerPayload =\n  | {\n      action: 'add';\n    }\n  | {\n      action: 'delete';\n      id: string;\n    };\n\nexport interface FieldMeta {\n  label: string;\n  type: 'text' | 'date' | 'file' | 'select' | 'textarea';\n}\n\nexport interface GroupMeta {\n  label: string;\n  fields: FieldMeta[];\n}\n\nexport const fieldGroupReducer =\n  (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) =>\n  (\n    items: FieldGroupListItemProps[],\n    payload: FieldGroupReducerPayload\n  ): FieldGroupListItemProps[] => {\n    switch (payload.action) {\n      case 'add':\n        return [\n          ...items,\n          {\n            name: `${groupMeta.label} ${items.length + 1}`,\n            id: createUID(),\n            children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n          }\n        ];\n\n      case 'delete':\n        return items\n          .filter(group => group.id !== payload.id)\n          .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));\n\n      default:\n        return items;\n    }\n  };\n\nexport const DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} key={label} />;\n  }\n\n  return null;\n};\n\nexport const demoGroupMeta: GroupMeta = {\n  label: 'Applicant',\n  fields: [\n    {\n      type: 'text',\n      label: 'Applicant name'\n    }\n  ]\n};\n\nexport const ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Advertising</Option>\n        <Option>Car and truck expenses</Option>\n        <Option>Commissions and fees</Option>\n        <Option>Contract labor</Option>\n        <Option>Legal and professional services</Option>\n        <Option>Office expense</Option>\n        <Option>Rent or lease</Option>\n        <Option>Vehicles, machinery, and equipment</Option>\n        <Option>Repairs and maintenance</Option>\n        <Option>Travel and meals</Option>\n        <Option>Deductible meals</Option>\n        <Option>Utilities</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n  if (type === 'file') {\n    return <FileInput label={label} multiple />;\n  }\n  if (type === 'textarea') {\n    return <TextArea label={label} />;\n  }\n  if (type === 'date') {\n    return <DateInput label={label} />;\n  }\n\n  return null;\n};\n\nexport const expensesGroupMeta: GroupMeta = {\n  label: 'Expense',\n  fields: [\n    { type: 'select', label: 'Type of expense' },\n    { type: 'date', label: 'Date of expense' },\n    { type: 'file', label: 'Receipts' },\n    { type: 'textarea', label: 'Notes' }\n  ]\n};\n\nexport const InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Mother</Option>\n        <Option>Father</Option>\n        <Option>Guardian</Option>\n        <Option>Child</Option>\n        <Option>Spouse</Option>\n        <Option>Sibling</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n\n  return null;\n};\n\nexport const insuranceGroupMeta: GroupMeta = {\n  label: 'Entry',\n  fields: [\n    { type: 'text', label: 'First name' },\n    { type: 'text', label: 'Last name' },\n    { type: 'select', label: 'Relationship' }\n  ]\n};\n"]}
+{"version":3,"file":"FieldGroupList.mocks.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";;AAAA,OAAO,EACL,SAAS,EACT,SAAS,EAET,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAqBjC,MAAM,CAAC,MAAM,iBAAiB,GAC5B,CAAC,SAAoB,EAAE,aAAuD,EAAE,EAAE,CAClF,CACE,KAAgC,EAChC,OAAiC,EACN,EAAE;IAC7B,QAAQ,OAAO,CAAC,MAAM,EAAE;QACtB,KAAK,KAAK;YACR,OAAO;gBACL,GAAG,KAAK;gBACR;oBACE,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC9C,UAAU,EAAE,IAAI;oBAChB,EAAE,EAAE,SAAS,EAAE;oBACf,QAAQ,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,eAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC;iBACxF;aACF,CAAC;QAEJ,KAAK,QAAQ;YACX,OAAO,KAAK;iBACT,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC;iBACxC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;gBAClB,GAAG,KAAK;gBACR,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE;gBACnC,UAAU,EAAE,IAAI;aACjB,CAAC,CAAC,CAAC;QAER;YACE,OAAO,KAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAa,EAAE,EAAE;IAC9D,IAAI,IAAI,KAAK,MAAM,EAAE;QACnB,OAAO,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,IAAO,KAAK,CAAI,CAAC;KAC5C;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE;QACN;YACE,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,gBAAgB;SACxB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAa,EAAE,EAAE;IAClE,IAAI,IAAI,KAAK,MAAM,EAAE;QACnB,OAAO,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;KAChC;IACD,IAAI,IAAI,KAAK,QAAQ,EAAE;QACrB,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,KAAK,aAClB,KAAC,MAAM,yBAAgB,EACvB,KAAC,MAAM,8BAAqB,EAC5B,KAAC,MAAM,yCAAgC,EACvC,KAAC,MAAM,uCAA8B,EACrC,KAAC,MAAM,iCAAwB,EAC/B,KAAC,MAAM,kDAAyC,EAChD,KAAC,MAAM,iCAAwB,EAC/B,KAAC,MAAM,gCAAuB,EAC9B,KAAC,MAAM,qDAA4C,EACnD,KAAC,MAAM,0CAAiC,EACxC,KAAC,MAAM,mCAA0B,EACjC,KAAC,MAAM,mCAA0B,EACjC,KAAC,MAAM,4BAAmB,EAC1B,KAAC,MAAM,wBAAe,IACf,CACV,CAAC;KACH;IACD,IAAI,IAAI,KAAK,MAAM,EAAE;QACnB,OAAO,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,SAAG,CAAC;KAC7C;IACD,IAAI,IAAI,KAAK,UAAU,EAAE;QACvB,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;KACnC;IACD,IAAI,IAAI,KAAK,MAAM,EAAE;QACnB,OAAO,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;KACpC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE;QACN,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,iBAAiB,EAAE;QAC5C,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE;QAC1C,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE;QACnC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE;KACrC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAa,EAAE,EAAE;IACnE,IAAI,IAAI,KAAK,MAAM,EAAE;QACnB,OAAO,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;KAChC;IACD,IAAI,IAAI,KAAK,QAAQ,EAAE;QACrB,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,KAAK,aAClB,KAAC,MAAM,yBAAgB,EACvB,KAAC,MAAM,yBAAgB,EACvB,KAAC,MAAM,yBAAgB,EACvB,KAAC,MAAM,2BAAkB,EACzB,KAAC,MAAM,wBAAe,EACtB,KAAC,MAAM,yBAAgB,EACvB,KAAC,MAAM,0BAAiB,EACxB,KAAC,MAAM,wBAAe,IACf,CACV,CAAC;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAc;IAC3C,KAAK,EAAE,OAAO;IACd,MAAM,EAAE;QACN,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE;QACrC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE;QACpC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE;KAC1C;CACF,CAAC","sourcesContent":["import {\n  createUID,\n  DateInput,\n  FieldGroupListItemProps,\n  FileInput,\n  Input,\n  Option,\n  Select,\n  TextArea\n} from '@pega/cosmos-react-core';\n\ntype FieldGroupReducerPayload =\n  | {\n      action: 'add';\n    }\n  | {\n      action: 'delete';\n      id: string;\n    };\n\nexport interface FieldMeta {\n  label: string;\n  type: 'text' | 'date' | 'file' | 'select' | 'textarea';\n}\n\nexport interface GroupMeta {\n  label: string;\n  fields: FieldMeta[];\n}\n\nexport const fieldGroupReducer =\n  (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) =>\n  (\n    items: FieldGroupListItemProps[],\n    payload: FieldGroupReducerPayload\n  ): FieldGroupListItemProps[] => {\n    switch (payload.action) {\n      case 'add':\n        return [\n          ...items,\n          {\n            name: `${groupMeta.label} ${items.length + 1}`,\n            headingTag: 'h3',\n            id: createUID(),\n            children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n          }\n        ];\n\n      case 'delete':\n        return items\n          .filter(group => group.id !== payload.id)\n          .map((group, i) => ({\n            ...group,\n            name: `${groupMeta.label} ${i + 1}`,\n            headingTag: 'h3'\n          }));\n\n      default:\n        return items;\n    }\n  };\n\nexport const DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} key={label} />;\n  }\n\n  return null;\n};\n\nexport const demoGroupMeta: GroupMeta = {\n  label: 'Applicant',\n  fields: [\n    {\n      type: 'text',\n      label: 'Applicant name'\n    }\n  ]\n};\n\nexport const ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Advertising</Option>\n        <Option>Car and truck expenses</Option>\n        <Option>Commissions and fees</Option>\n        <Option>Contract labor</Option>\n        <Option>Legal and professional services</Option>\n        <Option>Office expense</Option>\n        <Option>Rent or lease</Option>\n        <Option>Vehicles, machinery, and equipment</Option>\n        <Option>Repairs and maintenance</Option>\n        <Option>Travel and meals</Option>\n        <Option>Deductible meals</Option>\n        <Option>Utilities</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n  if (type === 'file') {\n    return <FileInput label={label} multiple />;\n  }\n  if (type === 'textarea') {\n    return <TextArea label={label} />;\n  }\n  if (type === 'date') {\n    return <DateInput label={label} />;\n  }\n\n  return null;\n};\n\nexport const expensesGroupMeta: GroupMeta = {\n  label: 'Expense',\n  fields: [\n    { type: 'select', label: 'Type of expense' },\n    { type: 'date', label: 'Date of expense' },\n    { type: 'file', label: 'Receipts' },\n    { type: 'textarea', label: 'Notes' }\n  ]\n};\n\nexport const InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Mother</Option>\n        <Option>Father</Option>\n        <Option>Guardian</Option>\n        <Option>Child</Option>\n        <Option>Spouse</Option>\n        <Option>Sibling</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n\n  return null;\n};\n\nexport const insuranceGroupMeta: GroupMeta = {\n  label: 'Entry',\n  fields: [\n    { type: 'text', label: 'First name' },\n    { type: 'text', label: 'Last name' },\n    { type: 'select', label: 'Relationship' }\n  ]\n};\n"]}

package/lib/core/FieldGroup/FieldGroupList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAc/C,wBAWU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,uBAAuB,CAyDvD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,uBAAuB,CA0DxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAkC7D,CAAC"}
+{"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAc/C,wBAWU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,uBAAuB,CAyDvD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,uBAAuB,CA0DxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CA+B7D,CAAC"}

package/lib/core/FieldGroup/FieldGroupList.stories.js

@@ -16,10 +16,11 @@ export default {
     }
 };
 export const ExpensesDemo = (args) => {
-    const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), undefined, () => [
+    const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), [
         {
             name: `${expensesGroupMeta.label} 1`,
             id: createUID(),
+            headingTag: 'h3',
             children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)
         }
     ]);
@@ -39,10 +40,11 @@ export const ExpensesDemo = (args) => {
                     : undefined })] }));
 };
 export const InsuranceDemo = (args) => {
-    const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), undefined, () => [
+    const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), [
         {
             name: `${insuranceGroupMeta.label} 1`,
             id: createUID(),
+            headingTag: 'h3',
             children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)
         }
     ]);
@@ -62,10 +64,11 @@ export const InsuranceDemo = (args) => {
                     : undefined })] }));
 };
 export const FieldGroupListDemo = (args) => {
-    const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), undefined, () => [
+    const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), [
         {
             name: `${demoGroupMeta.label} 1`,
             id: createUID(),
+            headingTag: 'h3',
             children: demoGroupMeta.fields.map(DemoFieldRenderer)
         }
     ]);

package/lib/core/FieldGroup/FieldGroupList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, createUID, FieldGroupList, Form, Text } from '@pega/cosmos-react-core';\n\nimport {\n  DemoFieldRenderer,\n  demoGroupMeta,\n  ExpensesFieldRenderer,\n  expensesGroupMeta,\n  fieldGroupReducer,\n  InsuranceFieldRenderer,\n  insuranceGroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n  title: 'Core/FieldGroupList',\n  component: FieldGroupList,\n  args: {\n    allowAdd: true,\n    allowDelete: true\n  },\n  argTypes: {\n    allowAdd: { control: { type: 'boolean' } },\n    allowDelete: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FieldGroupListDemoProps {\n  allowAdd?: boolean;\n  allowDelete?: boolean;\n}\n\nexport const ExpensesDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${expensesGroupMeta.label} 1`,\n        id: createUID(),\n        children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h2'>Expense report</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nexport const InsuranceDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${insuranceGroupMeta.label} 1`,\n        id: createUID(),\n        children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h1'>Insurance step 1</Text>\n      <Text variant='h2'>Dependants</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nexport const FieldGroupListDemo: Story<FieldGroupListDemoProps> = (\n  args: FieldGroupListDemoProps\n) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${demoGroupMeta.label} 1`,\n        id: createUID(),\n        children: demoGroupMeta.fields.map(DemoFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <FieldGroupList\n      items={state}\n      onAdd={\n        args.allowAdd\n          ? () => {\n              dispatch({ action: 'add' });\n            }\n          : undefined\n      }\n      onDelete={\n        args.allowDelete\n          ? id => {\n              dispatch({ action: 'delete', id });\n            }\n          : undefined\n      }\n    />\n  );\n};\n"]}
+{"version":3,"file":"FieldGroupList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAyB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAExF,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,wBAAwB,CAAC;AAEhC,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,IAAI;KAClB;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC9C;CACM,CAAC;AAOV,MAAM,CAAC,MAAM,YAAY,GAAmC,CAAC,IAA6B,EAAE,EAAE;IAC5F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAClC,iBAAiB,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,EAC3D;QACE;YACE,IAAI,EAAE,GAAG,iBAAiB,CAAC,KAAK,IAAI;YACpC,EAAE,EAAE,SAAS,EAAE;YACf,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,qBAAqB,CAAC;SAC9D;KACF,CACF,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,OAAO,EACL,8BACE,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;oBACvD,CAAC,uBAGM,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,uBAE5C,IACR,EAEL,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACrC,CAAC,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,aAE9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,+BAAsB,EACxC,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,KAAK,EACH,IAAI,CAAC,QAAQ;oBACX,CAAC,CAAC,GAAG,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;oBAC9B,CAAC;oBACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EACN,IAAI,CAAC,WAAW;oBACd,CAAC,CAAC,EAAE,CAAC,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;oBACrC,CAAC;oBACH,CAAC,CAAC,SAAS,GAEf,IACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAmC,CAAC,IAA6B,EAAE,EAAE;IAC7F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAClC,iBAAiB,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,EAC7D;QACE;YACE,IAAI,EAAE,GAAG,kBAAkB,CAAC,KAAK,IAAI;YACrC,EAAE,EAAE,SAAS,EAAE;YACf,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAG,CAAC,sBAAsB,CAAC;SAChE;KACF,CACF,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,OAAO,EACL,8BACE,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;oBACvD,CAAC,uBAGM,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,uBAE5C,IACR,EAEL,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACrC,CAAC,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,aAE9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,iCAAwB,EAC1C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,2BAAkB,EACpC,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,KAAK,EACH,IAAI,CAAC,QAAQ;oBACX,CAAC,CAAC,GAAG,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;oBAC9B,CAAC;oBACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EACN,IAAI,CAAC,WAAW;oBACd,CAAC,CAAC,EAAE,CAAC,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;oBACrC,CAAC;oBACH,CAAC,CAAC,SAAS,GAEf,IACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,iBAAiB,CAAC,aAAa,EAAE,iBAAiB,CAAC,EAAE;QACxF;YACE,IAAI,EAAE,GAAG,aAAa,CAAC,KAAK,IAAI;YAChC,EAAE,EAAE,SAAS,EAAE;YACf,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,iBAAiB,CAAC;SACtD;KACF,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,KAAK,EACH,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,GAAG,EAAE;gBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;YAC9B,CAAC;YACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EACN,IAAI,CAAC,WAAW;YACd,CAAC,CAAC,EAAE,CAAC,EAAE;gBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;YACrC,CAAC;YACH,CAAC,CAAC,SAAS,GAEf,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, createUID, FieldGroupList, Form, Text } from '@pega/cosmos-react-core';\n\nimport {\n  DemoFieldRenderer,\n  demoGroupMeta,\n  ExpensesFieldRenderer,\n  expensesGroupMeta,\n  fieldGroupReducer,\n  InsuranceFieldRenderer,\n  insuranceGroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n  title: 'Core/FieldGroupList',\n  component: FieldGroupList,\n  args: {\n    allowAdd: true,\n    allowDelete: true\n  },\n  argTypes: {\n    allowAdd: { control: { type: 'boolean' } },\n    allowDelete: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FieldGroupListDemoProps {\n  allowAdd?: boolean;\n  allowDelete?: boolean;\n}\n\nexport const ExpensesDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n    [\n      {\n        name: `${expensesGroupMeta.label} 1`,\n        id: createUID(),\n        headingTag: 'h3',\n        children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h2'>Expense report</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nexport const InsuranceDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n    [\n      {\n        name: `${insuranceGroupMeta.label} 1`,\n        id: createUID(),\n        headingTag: 'h3',\n        children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h1'>Insurance step 1</Text>\n      <Text variant='h2'>Dependants</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nexport const FieldGroupListDemo: Story<FieldGroupListDemoProps> = (\n  args: FieldGroupListDemoProps\n) => {\n  const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), [\n    {\n      name: `${demoGroupMeta.label} 1`,\n      id: createUID(),\n      headingTag: 'h3',\n      children: demoGroupMeta.fields.map(DemoFieldRenderer)\n    }\n  ]);\n\n  return (\n    <FieldGroupList\n      items={state}\n      onAdd={\n        args.allowAdd\n          ? () => {\n              dispatch({ action: 'add' });\n            }\n          : undefined\n      }\n      onDelete={\n        args.allowDelete\n          ? id => {\n              dispatch({ action: 'delete', id });\n            }\n          : undefined\n      }\n    />\n  );\n};\n"]}

package/lib/core/MultiStepForm/MultiStepForm.mocks.js

@@ -15,7 +15,7 @@ export const ApplicantDetailsFields = ({ formData, formErrors, dispatch }) => {
                         type: 'setFieldValue',
                         payload: { field: 'experienceLevel', value: e.target.value }
                     });
-                }, status: formErrors.experienceLevel ? 'error' : undefined, info: formErrors.experienceLevel ? formErrors.experienceLevel : undefined, required: true, children: [_jsx(Option, { value: '', children: "--" }), _jsx(Option, { value: 'junior', children: "0-3 years (junior)" }), _jsx(Option, { value: 'mid-level', children: "4-6 years (mid)" }), _jsx(Option, { value: 'senior', children: "7-10 years (senior)" }), _jsx(Option, { value: 'expert', children: "10+ years (expert)" })] }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(FieldGroup, { name: 'Work priorities', children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(3, minmax(0, 1fr))' }, children: [_jsx(Input, { name: 'priorityOne', label: 'First', value: formData.priorityOne, onChange: (e) => {
+                }, status: formErrors.experienceLevel ? 'error' : undefined, info: formErrors.experienceLevel ? formErrors.experienceLevel : undefined, required: true, children: [_jsx(Option, { value: '', children: "--" }), _jsx(Option, { value: 'junior', children: "0-3 years (junior)" }), _jsx(Option, { value: 'mid-level', children: "4-6 years (mid)" }), _jsx(Option, { value: 'senior', children: "7-10 years (senior)" }), _jsx(Option, { value: 'expert', children: "10+ years (expert)" })] }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(FieldGroup, { name: 'Work priorities', headingTag: 'h3', children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(3, minmax(0, 1fr))' }, children: [_jsx(Input, { name: 'priorityOne', label: 'First', value: formData.priorityOne, onChange: (e) => {
                                     dispatch({
                                         type: 'setFieldValue',
                                         payload: { field: 'priorityOne', value: e.target.value }

package/lib/core/MultiStepForm/MultiStepForm.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStepForm.mocks.js","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent } from 'react';\n\nimport {\n  Input,\n  Grid,\n  FieldGroup,\n  TextArea,\n  RadioButtonGroup,\n  RadioButton,\n  CurrencyInput,\n  Select,\n  Option,\n  Checkbox\n} from '@pega/cosmos-react-core';\n\nexport interface DemoFormDataType {\n  [key: string]: string | boolean | undefined;\n  firstName?: string;\n  lastName?: string;\n  currentTitle?: string;\n  currentCompany?: string;\n  salaryRequested?: string;\n  experienceLevel?: string;\n  priorityOne?: string;\n  priorityTwo?: string;\n  priorityThree?: string;\n  interviewNotes?: string;\n  additionalInterview?: boolean;\n  nextInterviewer?: string;\n  salaryRequestReview?: string;\n  cultureFit?: string;\n  finalRecommendation?: string;\n  recommendationComments?: string;\n}\n\nexport interface DemoFormErrorsType {\n  [field: string]: string | undefined;\n}\n\ninterface MockFormArgs {\n  formData: DemoFormDataType;\n  formErrors: DemoFormErrorsType;\n  dispatch: (value: { type: string; payload?: any }) => void;\n}\n\nexport const ApplicantDetailsFields = ({ formData, formErrors, dispatch }: MockFormArgs) => {\n  return (\n    <Grid container={{ gap: 1, cols: 'repeat(2, minmax(0, 1fr))' }}>\n      <Input name='firstName' label='First name' value={formData.firstName} readOnly />\n      <Input name='lastName' label='Last name' value={formData.lastName} readOnly />\n      <Input\n        name='currentTitle'\n        label='Current title'\n        value={formData.currentTitle}\n        onChange={(e: ChangeEvent<HTMLInputElement>) =>\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'currentTitle', value: e.target.value }\n          })\n        }\n      />\n      <Input\n        name='currentCompany'\n        label='Current company'\n        value={formData.currentCompany}\n        onChange={(e: ChangeEvent<HTMLInputElement>) =>\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'currentCompany', value: e.target.value }\n          })\n        }\n      />\n      <CurrencyInput\n        name='salaryRequested'\n        label='Salary requested'\n        value={formData.salaryRequested}\n        currencyISOCode='USD'\n        onChange={value =>\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'salaryRequested', value }\n          })\n        }\n        status={formErrors.salaryRequested ? 'error' : undefined}\n        info={formErrors.salaryRequested ? formErrors.salaryRequested : undefined}\n        required\n      />\n      <Select\n        id='experienceLevel'\n        label='Weighted experience'\n        value={formData.experienceLevel}\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'experienceLevel', value: e.target.value }\n          });\n        }}\n        status={formErrors.experienceLevel ? 'error' : undefined}\n        info={formErrors.experienceLevel ? formErrors.experienceLevel : undefined}\n        required\n      >\n        <Option value=''>--</Option>\n        <Option value='junior'>0-3 years (junior)</Option>\n        <Option value='mid-level'>4-6 years (mid)</Option>\n        <Option value='senior'>7-10 years (senior)</Option>\n        <Option value='expert'>10+ years (expert)</Option>\n      </Select>\n      <Grid item={{ colStart: '1', colEnd: '-1' }}>\n        <FieldGroup name='Work priorities'>\n          <Grid container={{ gap: 1, cols: 'repeat(3, minmax(0, 1fr))' }}>\n            <Input\n              name='priorityOne'\n              label='First'\n              value={formData.priorityOne}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                dispatch({\n                  type: 'setFieldValue',\n                  payload: { field: 'priorityOne', value: e.target.value }\n                });\n              }}\n            />\n            <Input\n              name='priorityTwo'\n              label='Second'\n              value={formData.priorityTwo}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                dispatch({\n                  type: 'setFieldValue',\n                  payload: { field: 'priorityTwo', value: e.target.value }\n                });\n              }}\n            />\n            <Input\n              name='priorityThree'\n              label='Third'\n              value={formData.priorityThree}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                dispatch({\n                  type: 'setFieldValue',\n                  payload: { field: 'priorityThree', value: e.target.value }\n                });\n              }}\n            />\n          </Grid>\n        </FieldGroup>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const InterviewNotesFields = ({ formData, formErrors, dispatch }: MockFormArgs) => {\n  return (\n    <Grid container={{ gap: 1, cols: '1fr' }}>\n      <TextArea\n        name='impressions'\n        label='Impressions'\n        value={formData.interviewNotes}\n        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'interviewNotes', value: e.target.value }\n          });\n        }}\n        status={formErrors.impressions ? 'error' : undefined}\n        info={formErrors.impressions ? formErrors.impressions : undefined}\n      />\n      <Checkbox\n        name='additionalInterview'\n        label='Request additional interview'\n        defaultChecked={formData.additionalInterview}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'additionalInterview', value: e.target.checked }\n          });\n        }}\n      />\n    </Grid>\n  );\n};\n\nexport const NextInterviewFields = ({ formData, formErrors, dispatch }: MockFormArgs) => {\n  return (\n    <Select\n      name='nextInterviewer'\n      label='Next interviewer'\n      value={formData.nextInterviewer}\n      onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n        dispatch({\n          type: 'setFieldValue',\n          payload: { field: 'nextInterviewer', value: e.target.value }\n        });\n      }}\n      status={formErrors.nextInterviewer ? 'error' : undefined}\n      info={formErrors.nextInterviewer ? formErrors.nextInterviewer : undefined}\n      required\n    >\n      <Option value=''>Choose an option...</Option>\n      <Option>Myself</Option>\n      <Option>Cindy Turner </Option>\n      <Option>Seth DeAngelo</Option>\n      <Option>Janet Moore</Option>\n    </Select>\n  );\n};\n\nexport const RecommendationsFields = ({ formData, formErrors, dispatch }: MockFormArgs) => {\n  return (\n    <Grid container={{ gap: 1, cols: '1fr' }}>\n      <CurrencyInput\n        name='salaryRequestedReview'\n        label='Salary requested'\n        value={formData.salaryRequested}\n        onChange={() => {}}\n        currencyISOCode='USD'\n        readOnly\n      />\n\n      <p>$99,000 is the recommended salary for this position.</p>\n\n      <RadioButtonGroup\n        label='Salary request fit'\n        name='salaryRequestReview'\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: {\n              field: 'salaryRequestReview',\n              value: e.target.value\n            }\n          });\n        }}\n        status={formErrors.salaryRequestReview ? 'error' : undefined}\n        info={formErrors.salaryRequestReview ? formErrors.salaryRequestReview : undefined}\n        inline\n        required\n      >\n        <RadioButton\n          label='Very low'\n          id='salaryTargetVeryLow'\n          value='salaryTargetVeryLow'\n          checked={formData.salaryRequestReview === 'salaryTargetVeryLow'}\n        />\n        <RadioButton\n          label='Low'\n          id='salaryTargetLow'\n          value='salaryTargetLow'\n          checked={formData.salaryRequestReview === 'salaryTargetLow'}\n        />\n        <RadioButton\n          label='On trend'\n          id='salaryTargetOnTrend'\n          value='salaryTargetOnTrend'\n          checked={formData.salaryRequestReview === 'salaryTargetOnTrend'}\n        />\n        <RadioButton\n          label='High'\n          id='salaryTargetHigh'\n          value='salaryTargetHigh'\n          checked={formData.salaryRequestReview === 'salaryTargetHigh'}\n        />\n        <RadioButton\n          label='Very high'\n          id='salaryTargetVeryHigh'\n          value='salaryTargetVeryHigh'\n          checked={formData.salaryRequestReview === 'salaryTargetVeryHigh'}\n        />\n      </RadioButtonGroup>\n\n      <RadioButtonGroup\n        label='Culture fit'\n        name='cultureFit'\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: {\n              field: 'cultureFit',\n              value: e.target.value\n            }\n          });\n        }}\n        status={formErrors.cultureFit ? 'error' : undefined}\n        info={formErrors.cultureFit ? formErrors.cultureFit : undefined}\n        inline\n        required\n      >\n        <RadioButton\n          label='High risk'\n          id='cultureFitHighRisk'\n          value='cultureFitHighRisk'\n          checked={formData.cultureFit === 'cultureFitHighRisk'}\n        />\n        <RadioButton\n          label='Signs of risk'\n          id='cultureFitSomeRisk'\n          value='cultureFitSomeRisk'\n          checked={formData.cultureFit === 'cultureFitSomeRisk'}\n        />\n        <RadioButton\n          label='Indeterminate'\n          id='cultureFitIndeterminate'\n          value='cultureFitIndeterminate'\n          checked={formData.cultureFit === 'cultureFitIndeterminate'}\n        />\n        <RadioButton\n          label='Good'\n          id='cultureFitGood'\n          value='cultureFitGood'\n          checked={formData.cultureFit === 'cultureFitGood'}\n        />\n        <RadioButton\n          label='Perfect'\n          id='cultureFitPerfect'\n          value='cultureFitPerfect'\n          checked={formData.cultureFit === 'cultureFitPerfect'}\n        />\n      </RadioButtonGroup>\n\n      <RadioButtonGroup\n        label='Final recomendation'\n        name='finalRecommendation'\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: {\n              field: 'finalRecommendation',\n              value: e.target.value\n            }\n          });\n        }}\n        status={formErrors.finalRecommendation ? 'error' : undefined}\n        info={formErrors.finalRecommendation ? formErrors.finalRecommendation : undefined}\n        inline\n        required\n      >\n        <RadioButton\n          label='Do not recommend'\n          id='doNotRecommend'\n          value='doNotRecommend'\n          checked={formData.finalRecommendation === 'doNotRecommend'}\n        />\n        <RadioButton\n          label='Indeterminate'\n          id='noRecommendation'\n          value='noRecommendation'\n          checked={formData.finalRecommendation === 'noRecommendation'}\n        />\n        <RadioButton\n          label='Recommend'\n          id='recommend'\n          value='recommend'\n          checked={formData.finalRecommendation === 'recommend'}\n        />\n      </RadioButtonGroup>\n\n      <TextArea\n        name='comments'\n        label='Comments'\n        value={formData.recommendationComments}\n        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'recommendationComments', value: e.target.value }\n          });\n        }}\n      />\n    </Grid>\n  );\n};\n"]}
+{"version":3,"file":"MultiStepForm.mocks.js","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent } from 'react';\n\nimport {\n  Input,\n  Grid,\n  FieldGroup,\n  TextArea,\n  RadioButtonGroup,\n  RadioButton,\n  CurrencyInput,\n  Select,\n  Option,\n  Checkbox\n} from '@pega/cosmos-react-core';\n\nexport interface DemoFormDataType {\n  [key: string]: string | boolean | undefined;\n  firstName?: string;\n  lastName?: string;\n  currentTitle?: string;\n  currentCompany?: string;\n  salaryRequested?: string;\n  experienceLevel?: string;\n  priorityOne?: string;\n  priorityTwo?: string;\n  priorityThree?: string;\n  interviewNotes?: string;\n  additionalInterview?: boolean;\n  nextInterviewer?: string;\n  salaryRequestReview?: string;\n  cultureFit?: string;\n  finalRecommendation?: string;\n  recommendationComments?: string;\n}\n\nexport interface DemoFormErrorsType {\n  [field: string]: string | undefined;\n}\n\ninterface MockFormArgs {\n  formData: DemoFormDataType;\n  formErrors: DemoFormErrorsType;\n  dispatch: (value: { type: string; payload?: any }) => void;\n}\n\nexport const ApplicantDetailsFields = ({ formData, formErrors, dispatch }: MockFormArgs) => {\n  return (\n    <Grid container={{ gap: 1, cols: 'repeat(2, minmax(0, 1fr))' }}>\n      <Input name='firstName' label='First name' value={formData.firstName} readOnly />\n      <Input name='lastName' label='Last name' value={formData.lastName} readOnly />\n      <Input\n        name='currentTitle'\n        label='Current title'\n        value={formData.currentTitle}\n        onChange={(e: ChangeEvent<HTMLInputElement>) =>\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'currentTitle', value: e.target.value }\n          })\n        }\n      />\n      <Input\n        name='currentCompany'\n        label='Current company'\n        value={formData.currentCompany}\n        onChange={(e: ChangeEvent<HTMLInputElement>) =>\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'currentCompany', value: e.target.value }\n          })\n        }\n      />\n      <CurrencyInput\n        name='salaryRequested'\n        label='Salary requested'\n        value={formData.salaryRequested}\n        currencyISOCode='USD'\n        onChange={value =>\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'salaryRequested', value }\n          })\n        }\n        status={formErrors.salaryRequested ? 'error' : undefined}\n        info={formErrors.salaryRequested ? formErrors.salaryRequested : undefined}\n        required\n      />\n      <Select\n        id='experienceLevel'\n        label='Weighted experience'\n        value={formData.experienceLevel}\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'experienceLevel', value: e.target.value }\n          });\n        }}\n        status={formErrors.experienceLevel ? 'error' : undefined}\n        info={formErrors.experienceLevel ? formErrors.experienceLevel : undefined}\n        required\n      >\n        <Option value=''>--</Option>\n        <Option value='junior'>0-3 years (junior)</Option>\n        <Option value='mid-level'>4-6 years (mid)</Option>\n        <Option value='senior'>7-10 years (senior)</Option>\n        <Option value='expert'>10+ years (expert)</Option>\n      </Select>\n      <Grid item={{ colStart: '1', colEnd: '-1' }}>\n        <FieldGroup name='Work priorities' headingTag='h3'>\n          <Grid container={{ gap: 1, cols: 'repeat(3, minmax(0, 1fr))' }}>\n            <Input\n              name='priorityOne'\n              label='First'\n              value={formData.priorityOne}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                dispatch({\n                  type: 'setFieldValue',\n                  payload: { field: 'priorityOne', value: e.target.value }\n                });\n              }}\n            />\n            <Input\n              name='priorityTwo'\n              label='Second'\n              value={formData.priorityTwo}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                dispatch({\n                  type: 'setFieldValue',\n                  payload: { field: 'priorityTwo', value: e.target.value }\n                });\n              }}\n            />\n            <Input\n              name='priorityThree'\n              label='Third'\n              value={formData.priorityThree}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => {\n                dispatch({\n                  type: 'setFieldValue',\n                  payload: { field: 'priorityThree', value: e.target.value }\n                });\n              }}\n            />\n          </Grid>\n        </FieldGroup>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const InterviewNotesFields = ({ formData, formErrors, dispatch }: MockFormArgs) => {\n  return (\n    <Grid container={{ gap: 1, cols: '1fr' }}>\n      <TextArea\n        name='impressions'\n        label='Impressions'\n        value={formData.interviewNotes}\n        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'interviewNotes', value: e.target.value }\n          });\n        }}\n        status={formErrors.impressions ? 'error' : undefined}\n        info={formErrors.impressions ? formErrors.impressions : undefined}\n      />\n      <Checkbox\n        name='additionalInterview'\n        label='Request additional interview'\n        defaultChecked={formData.additionalInterview}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'additionalInterview', value: e.target.checked }\n          });\n        }}\n      />\n    </Grid>\n  );\n};\n\nexport const NextInterviewFields = ({ formData, formErrors, dispatch }: MockFormArgs) => {\n  return (\n    <Select\n      name='nextInterviewer'\n      label='Next interviewer'\n      value={formData.nextInterviewer}\n      onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n        dispatch({\n          type: 'setFieldValue',\n          payload: { field: 'nextInterviewer', value: e.target.value }\n        });\n      }}\n      status={formErrors.nextInterviewer ? 'error' : undefined}\n      info={formErrors.nextInterviewer ? formErrors.nextInterviewer : undefined}\n      required\n    >\n      <Option value=''>Choose an option...</Option>\n      <Option>Myself</Option>\n      <Option>Cindy Turner </Option>\n      <Option>Seth DeAngelo</Option>\n      <Option>Janet Moore</Option>\n    </Select>\n  );\n};\n\nexport const RecommendationsFields = ({ formData, formErrors, dispatch }: MockFormArgs) => {\n  return (\n    <Grid container={{ gap: 1, cols: '1fr' }}>\n      <CurrencyInput\n        name='salaryRequestedReview'\n        label='Salary requested'\n        value={formData.salaryRequested}\n        onChange={() => {}}\n        currencyISOCode='USD'\n        readOnly\n      />\n\n      <p>$99,000 is the recommended salary for this position.</p>\n\n      <RadioButtonGroup\n        label='Salary request fit'\n        name='salaryRequestReview'\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: {\n              field: 'salaryRequestReview',\n              value: e.target.value\n            }\n          });\n        }}\n        status={formErrors.salaryRequestReview ? 'error' : undefined}\n        info={formErrors.salaryRequestReview ? formErrors.salaryRequestReview : undefined}\n        inline\n        required\n      >\n        <RadioButton\n          label='Very low'\n          id='salaryTargetVeryLow'\n          value='salaryTargetVeryLow'\n          checked={formData.salaryRequestReview === 'salaryTargetVeryLow'}\n        />\n        <RadioButton\n          label='Low'\n          id='salaryTargetLow'\n          value='salaryTargetLow'\n          checked={formData.salaryRequestReview === 'salaryTargetLow'}\n        />\n        <RadioButton\n          label='On trend'\n          id='salaryTargetOnTrend'\n          value='salaryTargetOnTrend'\n          checked={formData.salaryRequestReview === 'salaryTargetOnTrend'}\n        />\n        <RadioButton\n          label='High'\n          id='salaryTargetHigh'\n          value='salaryTargetHigh'\n          checked={formData.salaryRequestReview === 'salaryTargetHigh'}\n        />\n        <RadioButton\n          label='Very high'\n          id='salaryTargetVeryHigh'\n          value='salaryTargetVeryHigh'\n          checked={formData.salaryRequestReview === 'salaryTargetVeryHigh'}\n        />\n      </RadioButtonGroup>\n\n      <RadioButtonGroup\n        label='Culture fit'\n        name='cultureFit'\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: {\n              field: 'cultureFit',\n              value: e.target.value\n            }\n          });\n        }}\n        status={formErrors.cultureFit ? 'error' : undefined}\n        info={formErrors.cultureFit ? formErrors.cultureFit : undefined}\n        inline\n        required\n      >\n        <RadioButton\n          label='High risk'\n          id='cultureFitHighRisk'\n          value='cultureFitHighRisk'\n          checked={formData.cultureFit === 'cultureFitHighRisk'}\n        />\n        <RadioButton\n          label='Signs of risk'\n          id='cultureFitSomeRisk'\n          value='cultureFitSomeRisk'\n          checked={formData.cultureFit === 'cultureFitSomeRisk'}\n        />\n        <RadioButton\n          label='Indeterminate'\n          id='cultureFitIndeterminate'\n          value='cultureFitIndeterminate'\n          checked={formData.cultureFit === 'cultureFitIndeterminate'}\n        />\n        <RadioButton\n          label='Good'\n          id='cultureFitGood'\n          value='cultureFitGood'\n          checked={formData.cultureFit === 'cultureFitGood'}\n        />\n        <RadioButton\n          label='Perfect'\n          id='cultureFitPerfect'\n          value='cultureFitPerfect'\n          checked={formData.cultureFit === 'cultureFitPerfect'}\n        />\n      </RadioButtonGroup>\n\n      <RadioButtonGroup\n        label='Final recomendation'\n        name='finalRecommendation'\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: {\n              field: 'finalRecommendation',\n              value: e.target.value\n            }\n          });\n        }}\n        status={formErrors.finalRecommendation ? 'error' : undefined}\n        info={formErrors.finalRecommendation ? formErrors.finalRecommendation : undefined}\n        inline\n        required\n      >\n        <RadioButton\n          label='Do not recommend'\n          id='doNotRecommend'\n          value='doNotRecommend'\n          checked={formData.finalRecommendation === 'doNotRecommend'}\n        />\n        <RadioButton\n          label='Indeterminate'\n          id='noRecommendation'\n          value='noRecommendation'\n          checked={formData.finalRecommendation === 'noRecommendation'}\n        />\n        <RadioButton\n          label='Recommend'\n          id='recommend'\n          value='recommend'\n          checked={formData.finalRecommendation === 'recommend'}\n        />\n      </RadioButtonGroup>\n\n      <TextArea\n        name='comments'\n        label='Comments'\n        value={formData.recommendationComments}\n        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {\n          dispatch({\n            type: 'setFieldValue',\n            payload: { field: 'recommendationComments', value: e.target.value }\n          });\n        }}\n      />\n    </Grid>\n  );\n};\n"]}

package/lib/core/MultiStepForm/MultiStepForm.stories.d.ts

@@ -1,5 +1,9 @@
 import { Meta, Story } from '@storybook/react';
+import MultiStepFormProps from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm.types';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const MultiStepFormDemo: Story;
+interface MultiStepFormDemoProps {
+    stepIndicator?: MultiStepFormProps['stepIndicator'];
+}
+export declare const MultiStepFormDemo: Story<MultiStepFormDemoProps>;
 //# sourceMappingURL=MultiStepForm.stories.d.ts.map

package/lib/core/MultiStepForm/MultiStepForm.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStepForm.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAe/C,wBAGU;AAuBV,eAAO,MAAM,iBAAiB,EAAE,KA+T/B,CAAC"}
+{"version":3,"file":"MultiStepForm.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,kBAEN,MAAM,0EAA0E,CAAC;;AAWlF,wBASU;AAEV,UAAU,sBAAsB;IAC9B,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACrD;AAuBD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CAgU3D,CAAC"}

package/lib/core/MultiStepForm/MultiStepForm.stories.js

@@ -4,9 +4,15 @@ import { Button, Banner, Flex, MultiStepForm, Text } from '@pega/cosmos-react-co
 import { ApplicantDetailsFields, InterviewNotesFields, RecommendationsFields, NextInterviewFields } from './MultiStepForm.mocks';
 export default {
     title: 'Core/MultiStepForm',
-    component: MultiStepForm
+    component: MultiStepForm,
+    args: {
+        stepIndicator: 'horizontal'
+    },
+    argTypes: {
+        stepIndicator: { options: ['horizontal', 'vertical', 'none'], control: { type: 'select' } }
+    }
 };
-export const MultiStepFormDemo = () => {
+export const MultiStepFormDemo = (args) => {
     const initialState = useMemo(() => ({
         currentStepIndex: 0,
         cancelled: false,
@@ -166,7 +172,7 @@ export const MultiStepFormDemo = () => {
         const steps = [
             {
                 id: 'applicant_details',
-                name: 'Applicant details',
+                name: 'Applicant details - personal information',
                 description: 'This applicant has passed initial screening and has been cleared to have an interview scheduled. ' +
                     'Please confirm their details and have a discussion regarding the open position and the company.',
                 banners: applicantErrors?.length ? (_jsx(Banner, { messages: [
@@ -212,6 +218,6 @@ export const MultiStepFormDemo = () => {
     }, [state.formData, state.formErrors, state.currentStepIndex]);
     return (_jsxs(_Fragment, { children: [(state.cancelled || state.finished) && (_jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, children: [_jsxs(Text, { variant: 'h1', children: ["HR screening ", state.cancelled ? 'cancelled' : 'finished'] }), _jsx(Button, { onClick: () => {
                             dispatch({ type: 'restart' });
-                        }, children: "Restart" })] })), !state.cancelled && !state.finished && (_jsx(MultiStepForm, { heading: 'HR Screening', steps: stepData, currentStepId: stepData[state.currentStepIndex].id }))] }));
+                        }, children: "Restart" })] })), !state.cancelled && !state.finished && (_jsx(MultiStepForm, { heading: 'HR Screening', steps: stepData, currentStepId: stepData[state.currentStepIndex].id, stepIndicator: args.stepIndicator }))] }));
 };
 //# sourceMappingURL=MultiStepForm.stories.js.map

package/lib/core/MultiStepForm/MultiStepForm.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStepForm.stories.js","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { type ReactNode, type Reducer, type MouseEvent, useReducer, useMemo } from 'react';\n\nimport { Button, Banner, Flex, MultiStepForm, Text } from '@pega/cosmos-react-core';\nimport { Step } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm.types';\n\nimport {\n  type DemoFormDataType,\n  type DemoFormErrorsType,\n  ApplicantDetailsFields,\n  InterviewNotesFields,\n  RecommendationsFields,\n  NextInterviewFields\n} from './MultiStepForm.mocks';\n\nexport default {\n  title: 'Core/MultiStepForm',\n  component: MultiStepForm\n} as Meta;\n\ninterface DemoMultiStepState {\n  formData: DemoFormDataType;\n  formErrors: DemoFormErrorsType;\n  currentStepIndex: number;\n  numSteps: number;\n  cancelled: boolean;\n  finished: boolean;\n}\n\ninterface ReducerAction {\n  type: string;\n  payload?: any;\n}\n\ninterface FormValidations {\n  [field: string]: {\n    message?: string;\n    validator: (value: any) => boolean;\n  };\n}\n\nexport const MultiStepFormDemo: Story = () => {\n  const initialState = useMemo<DemoMultiStepState>(\n    () => ({\n      currentStepIndex: 0,\n      cancelled: false,\n      finished: false,\n      numSteps: 3,\n      formData: {\n        firstName: 'Marcus',\n        lastName: 'Kennedy',\n        currentTitle: 'Data Analyst',\n        currentCompany: 'Hello Fresh'\n      },\n      formErrors: {}\n    }),\n    []\n  );\n\n  const formValidation = useMemo<FormValidations>(\n    () => ({\n      salaryRequested: {\n        message: 'This field is required.',\n        validator: (value: string) => value?.length > 0\n      },\n      experienceLevel: {\n        message: 'This field is required.',\n        validator: (value: string) => value?.length > 0\n      },\n      nextInterviewer: {\n        message: 'This field is required.',\n        validator: (value: string) => value?.length > 0\n      },\n      salaryRequestReview: {\n        message: 'This field is required.',\n        validator: (value: string) => value?.length > 0\n      },\n      cultureFit: {\n        message: 'This field is required.',\n        validator: (value: string) => value?.length > 0\n      },\n      finalRecommendation: {\n        message: 'This field is required.',\n        validator: (value: string) => value?.length > 0\n      }\n    }),\n    []\n  );\n\n  const stepFields = useMemo<string[][]>(() => {\n    return [\n      [\n        'firstName',\n        'lastName',\n        'currentTitle',\n        'currentCompany',\n        'salaryRequested',\n        'experienceLevel',\n        'priorityOne',\n        'priorityTwo',\n        'priorityThree'\n      ],\n      ['interviewNotes', 'additionalInterview'],\n      ['nextInterviewer'],\n      ['salaryRequestReview', 'cultureFit', 'finalRecommendation', 'recommendationComments']\n    ];\n  }, []);\n\n  const reducer = (state: DemoMultiStepState, action: ReducerAction) => {\n    const type = action.type;\n    const payload = action.payload;\n\n    switch (type) {\n      case 'restart': {\n        return initialState;\n      }\n      case 'cancel': {\n        return {\n          ...state,\n          cancelled: true\n        };\n      }\n      case 'finish': {\n        return {\n          ...state,\n          finished: true\n        };\n      }\n      case 'setStep': {\n        return {\n          ...state,\n          currentStepIndex: payload,\n          formErrors: {}\n        };\n      }\n      case 'setFieldValue': {\n        const { field, value } = payload;\n        const formData = {\n          ...state.formData\n        };\n        const formErrors = {\n          ...state.formErrors\n        };\n\n        formData[field] = value;\n\n        if (formErrors[field] && Object.prototype.hasOwnProperty.call(formValidation, field)) {\n          const valid = formValidation[field].validator(value);\n\n          if (valid) {\n            delete formErrors[field];\n          } else {\n            formErrors[field] = formValidation[field].message;\n          }\n        }\n\n        return {\n          ...state,\n          formData,\n          formErrors\n        };\n      }\n      case 'submitCurrentStep': {\n        const stepIndex =\n          state.numSteps === 4 || state.currentStepIndex <= 1\n            ? state.currentStepIndex\n            : state.currentStepIndex + 1;\n        const formErrors = { ...state.formErrors };\n        let isValid = true;\n\n        const validateFields = (fields: string[]) => {\n          if (!fields) return;\n\n          fields.forEach(field => {\n            if (Object.prototype.hasOwnProperty.call(formValidation, field)) {\n              const valid = formValidation[field].validator(state.formData[field]);\n\n              if (valid) {\n                delete formErrors[field];\n              } else {\n                isValid = false;\n                formErrors[field] = formValidation[field].message;\n              }\n            }\n          });\n        };\n\n        validateFields(stepFields[stepIndex]);\n\n        return {\n          ...state,\n          numSteps: state.formData.additionalInterview ? 4 : 3,\n          currentStepIndex:\n            isValid && state.currentStepIndex !== state.numSteps - 1\n              ? state.currentStepIndex + 1\n              : state.currentStepIndex,\n          finished: isValid && state.currentStepIndex === state.numSteps - 1,\n          formErrors\n        };\n      }\n      default:\n        return state;\n    }\n  };\n\n  const [state, dispatch] = useReducer<Reducer<DemoMultiStepState, ReducerAction>>(\n    reducer,\n    initialState\n  );\n\n  const stepData: Step[] = useMemo(() => {\n    const stepActions: ReactNode = (\n      <>\n        <Button onClick={() => dispatch({ type: 'cancel' })}>Cancel</Button>\n        <div>\n          {state.currentStepIndex > 0 && (\n            <Button\n              onClick={() => dispatch({ type: 'setStep', payload: state.currentStepIndex - 1 })}\n            >\n              Previous\n            </Button>\n          )}\n          {state.currentStepIndex !== state.numSteps - 1 && (\n            <Button variant='primary' onClick={() => dispatch({ type: 'submitCurrentStep' })}>\n              Next\n            </Button>\n          )}\n          {state.currentStepIndex === state.numSteps - 1 && (\n            <Button\n              type='submit'\n              variant='primary'\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                e.preventDefault();\n                dispatch({ type: 'submitCurrentStep' });\n              }}\n            >\n              Finish\n            </Button>\n          )}\n        </div>\n      </>\n    );\n\n    const applicantErrors = Object.keys(state.formErrors).filter(errorField => {\n      return stepFields[0].includes(errorField);\n    });\n    const recommendationErrors = Object.keys(state.formErrors).filter(errorField => {\n      return stepFields[3].includes(errorField);\n    });\n\n    const steps = [\n      {\n        id: 'applicant_details',\n        name: 'Applicant details',\n        description:\n          'This applicant has passed initial screening and has been cleared to have an interview scheduled. ' +\n          'Please confirm their details and have a discussion regarding the open position and the company.',\n        banners: applicantErrors?.length ? (\n          <Banner\n            messages={[\n              {\n                label: 'Your submission failed to process.',\n                description: 'Please correct all errors and try again.'\n              }\n            ]}\n            variant='urgent'\n          />\n        ) : undefined,\n        content: (\n          <ApplicantDetailsFields\n            formData={state.formData}\n            formErrors={state.formErrors}\n            dispatch={dispatch}\n          />\n        ),\n        actions: stepActions\n      },\n      {\n        id: 'interview_notes',\n        name: 'Interview notes',\n        content: (\n          <InterviewNotesFields\n            formData={state.formData}\n            formErrors={state.formErrors}\n            dispatch={dispatch}\n          />\n        ),\n        actions: stepActions\n      },\n      {\n        id: 'recommendations',\n        name: 'Final recommendations',\n        description:\n          'Based on your screening call with the applicant please submit your recomendations.',\n        banners: recommendationErrors?.length ? (\n          <Banner\n            messages={[\n              {\n                label: 'Your submission failed to process.',\n                description: 'Please correct all errors and try again.'\n              }\n            ]}\n            variant='urgent'\n          />\n        ) : undefined,\n        content: (\n          <RecommendationsFields\n            formData={state.formData}\n            formErrors={state.formErrors}\n            dispatch={dispatch}\n          />\n        ),\n        actions: stepActions\n      }\n    ];\n\n    if (state.numSteps === 4) {\n      steps.splice(2, 0, {\n        id: 'next_interview',\n        name: 'Next interview',\n        description: 'Please select an individual to conduct the next interview.',\n        banners: undefined,\n        content: (\n          <NextInterviewFields\n            formData={state.formData}\n            formErrors={state.formErrors}\n            dispatch={dispatch}\n          />\n        ),\n        actions: stepActions\n      });\n    }\n\n    return steps;\n  }, [state.formData, state.formErrors, state.currentStepIndex]);\n\n  return (\n    <>\n      {(state.cancelled || state.finished) && (\n        <Flex container={{ gap: 2, alignItems: 'center' }}>\n          <Text variant='h1'>HR screening {state.cancelled ? 'cancelled' : 'finished'}</Text>\n          <Button\n            onClick={() => {\n              dispatch({ type: 'restart' });\n            }}\n          >\n            Restart\n          </Button>\n        </Flex>\n      )}\n\n      {!state.cancelled && !state.finished && (\n        <MultiStepForm\n          heading='HR Screening'\n          steps={stepData}\n          currentStepId={stepData[state.currentStepIndex].id}\n        />\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"MultiStepForm.stories.js","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { type ReactNode, type Reducer, type MouseEvent, useReducer, useMemo } from 'react';\n\nimport { Button, Banner, Flex, MultiStepForm, Text } from '@pega/cosmos-react-core';\nimport MultiStepFormProps, {\n  Step\n} from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm.types';\n\nimport {\n  type DemoFormDataType,\n  type DemoFormErrorsType,\n  ApplicantDetailsFields,\n  InterviewNotesFields,\n  RecommendationsFields,\n  NextInterviewFields\n} from './MultiStepForm.mocks';\n\nexport default {\n  title: 'Core/MultiStepForm',\n  component: MultiStepForm,\n  args: {\n    stepIndicator: 'horizontal'\n  },\n  argTypes: {\n    stepIndicator: { options: ['horizontal', 'vertical', 'none'], control: { type: 'select' } }\n  }\n} as Meta;\n\ninterface MultiStepFormDemoProps {\n  stepIndicator?: MultiStepFormProps['stepIndicator'];\n}\n\ninterface DemoMultiStepState {\n  formData: DemoFormDataType;\n  formErrors: DemoFormErrorsType;\n  currentStepIndex: number;\n  numSteps: number;\n  cancelled: boolean;\n  finished: boolean;\n}\n\ninterface ReducerAction {\n  type: string;\n  payload?: any;\n}\n\ninterface FormValidations {\n  [field: string]: {\n    message?: string;\n    validator: (value: any) => boolean;\n  };\n}\n\nexport const MultiStepFormDemo: Story<MultiStepFormDemoProps> = (args: MultiStepFormDemoProps) => {\n  const initialState = useMemo<DemoMultiStepState>(\n    () => ({\n      currentStepIndex: 0,\n      cancelled: false,\n      finished: false,\n      numSteps: 3,\n      formData: {\n        firstName: 'Marcus',\n        lastName: 'Kennedy',\n        currentTitle: 'Data Analyst',\n        currentCompany: 'Hello Fresh'\n      },\n      formErrors: {}\n    }),\n    []\n  );\n\n  const formValidation = useMemo<FormValidations>(\n    () => ({\n      salaryRequested: {\n        message: 'This field is required.',\n        validator: (value: string) => value?.length > 0\n      },\n      experienceLevel: {\n        message: 'This field is required.',\n        validator: (value: string) => value?.length > 0\n      },\n      nextInterviewer: {\n        message: 'This field is required.',\n        validator: (value: string) => value?.length > 0\n      },\n      salaryRequestReview: {\n        message: 'This field is required.',\n        validator: (value: string) => value?.length > 0\n      },\n      cultureFit: {\n        message: 'This field is required.',\n        validator: (value: string) => value?.length > 0\n      },\n      finalRecommendation: {\n        message: 'This field is required.',\n        validator: (value: string) => value?.length > 0\n      }\n    }),\n    []\n  );\n\n  const stepFields = useMemo<string[][]>(() => {\n    return [\n      [\n        'firstName',\n        'lastName',\n        'currentTitle',\n        'currentCompany',\n        'salaryRequested',\n        'experienceLevel',\n        'priorityOne',\n        'priorityTwo',\n        'priorityThree'\n      ],\n      ['interviewNotes', 'additionalInterview'],\n      ['nextInterviewer'],\n      ['salaryRequestReview', 'cultureFit', 'finalRecommendation', 'recommendationComments']\n    ];\n  }, []);\n\n  const reducer = (state: DemoMultiStepState, action: ReducerAction) => {\n    const type = action.type;\n    const payload = action.payload;\n\n    switch (type) {\n      case 'restart': {\n        return initialState;\n      }\n      case 'cancel': {\n        return {\n          ...state,\n          cancelled: true\n        };\n      }\n      case 'finish': {\n        return {\n          ...state,\n          finished: true\n        };\n      }\n      case 'setStep': {\n        return {\n          ...state,\n          currentStepIndex: payload,\n          formErrors: {}\n        };\n      }\n      case 'setFieldValue': {\n        const { field, value } = payload;\n        const formData = {\n          ...state.formData\n        };\n        const formErrors = {\n          ...state.formErrors\n        };\n\n        formData[field] = value;\n\n        if (formErrors[field] && Object.prototype.hasOwnProperty.call(formValidation, field)) {\n          const valid = formValidation[field].validator(value);\n\n          if (valid) {\n            delete formErrors[field];\n          } else {\n            formErrors[field] = formValidation[field].message;\n          }\n        }\n\n        return {\n          ...state,\n          formData,\n          formErrors\n        };\n      }\n      case 'submitCurrentStep': {\n        const stepIndex =\n          state.numSteps === 4 || state.currentStepIndex <= 1\n            ? state.currentStepIndex\n            : state.currentStepIndex + 1;\n        const formErrors = { ...state.formErrors };\n        let isValid = true;\n\n        const validateFields = (fields: string[]) => {\n          if (!fields) return;\n\n          fields.forEach(field => {\n            if (Object.prototype.hasOwnProperty.call(formValidation, field)) {\n              const valid = formValidation[field].validator(state.formData[field]);\n\n              if (valid) {\n                delete formErrors[field];\n              } else {\n                isValid = false;\n                formErrors[field] = formValidation[field].message;\n              }\n            }\n          });\n        };\n\n        validateFields(stepFields[stepIndex]);\n\n        return {\n          ...state,\n          numSteps: state.formData.additionalInterview ? 4 : 3,\n          currentStepIndex:\n            isValid && state.currentStepIndex !== state.numSteps - 1\n              ? state.currentStepIndex + 1\n              : state.currentStepIndex,\n          finished: isValid && state.currentStepIndex === state.numSteps - 1,\n          formErrors\n        };\n      }\n      default:\n        return state;\n    }\n  };\n\n  const [state, dispatch] = useReducer<Reducer<DemoMultiStepState, ReducerAction>>(\n    reducer,\n    initialState\n  );\n\n  const stepData: Step[] = useMemo(() => {\n    const stepActions: ReactNode = (\n      <>\n        <Button onClick={() => dispatch({ type: 'cancel' })}>Cancel</Button>\n        <div>\n          {state.currentStepIndex > 0 && (\n            <Button\n              onClick={() => dispatch({ type: 'setStep', payload: state.currentStepIndex - 1 })}\n            >\n              Previous\n            </Button>\n          )}\n          {state.currentStepIndex !== state.numSteps - 1 && (\n            <Button variant='primary' onClick={() => dispatch({ type: 'submitCurrentStep' })}>\n              Next\n            </Button>\n          )}\n          {state.currentStepIndex === state.numSteps - 1 && (\n            <Button\n              type='submit'\n              variant='primary'\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                e.preventDefault();\n                dispatch({ type: 'submitCurrentStep' });\n              }}\n            >\n              Finish\n            </Button>\n          )}\n        </div>\n      </>\n    );\n\n    const applicantErrors = Object.keys(state.formErrors).filter(errorField => {\n      return stepFields[0].includes(errorField);\n    });\n    const recommendationErrors = Object.keys(state.formErrors).filter(errorField => {\n      return stepFields[3].includes(errorField);\n    });\n\n    const steps = [\n      {\n        id: 'applicant_details',\n        name: 'Applicant details - personal information',\n        description:\n          'This applicant has passed initial screening and has been cleared to have an interview scheduled. ' +\n          'Please confirm their details and have a discussion regarding the open position and the company.',\n        banners: applicantErrors?.length ? (\n          <Banner\n            messages={[\n              {\n                label: 'Your submission failed to process.',\n                description: 'Please correct all errors and try again.'\n              }\n            ]}\n            variant='urgent'\n          />\n        ) : undefined,\n        content: (\n          <ApplicantDetailsFields\n            formData={state.formData}\n            formErrors={state.formErrors}\n            dispatch={dispatch}\n          />\n        ),\n        actions: stepActions\n      },\n      {\n        id: 'interview_notes',\n        name: 'Interview notes',\n        content: (\n          <InterviewNotesFields\n            formData={state.formData}\n            formErrors={state.formErrors}\n            dispatch={dispatch}\n          />\n        ),\n        actions: stepActions\n      },\n      {\n        id: 'recommendations',\n        name: 'Final recommendations',\n        description:\n          'Based on your screening call with the applicant please submit your recomendations.',\n        banners: recommendationErrors?.length ? (\n          <Banner\n            messages={[\n              {\n                label: 'Your submission failed to process.',\n                description: 'Please correct all errors and try again.'\n              }\n            ]}\n            variant='urgent'\n          />\n        ) : undefined,\n        content: (\n          <RecommendationsFields\n            formData={state.formData}\n            formErrors={state.formErrors}\n            dispatch={dispatch}\n          />\n        ),\n        actions: stepActions\n      }\n    ];\n\n    if (state.numSteps === 4) {\n      steps.splice(2, 0, {\n        id: 'next_interview',\n        name: 'Next interview',\n        description: 'Please select an individual to conduct the next interview.',\n        banners: undefined,\n        content: (\n          <NextInterviewFields\n            formData={state.formData}\n            formErrors={state.formErrors}\n            dispatch={dispatch}\n          />\n        ),\n        actions: stepActions\n      });\n    }\n\n    return steps;\n  }, [state.formData, state.formErrors, state.currentStepIndex]);\n\n  return (\n    <>\n      {(state.cancelled || state.finished) && (\n        <Flex container={{ gap: 2, alignItems: 'center' }}>\n          <Text variant='h1'>HR screening {state.cancelled ? 'cancelled' : 'finished'}</Text>\n          <Button\n            onClick={() => {\n              dispatch({ type: 'restart' });\n            }}\n          >\n            Restart\n          </Button>\n        </Flex>\n      )}\n\n      {!state.cancelled && !state.finished && (\n        <MultiStepForm\n          heading='HR Screening'\n          steps={stepData}\n          currentStepId={stepData[state.currentStepIndex].id}\n          stepIndicator={args.stepIndicator}\n        />\n      )}\n    </>\n  );\n};\n"]}

package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.js

@@ -61,7 +61,7 @@ export const RadioButtonCardGroup = (args) => {
                         heading: 'Additional Info',
                         content: 'Some additional info'
                     }
-                    : undefined, label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." })] }), id: 'paragraph', defaultChecked: true }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' })] }), id: 'space-photo' }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" })] })] }), id: 'cosmos' }), _jsx(RadioButton, { label: _jsx(FieldGroup, { name: 'Gold service plan', children: _jsx(FieldValueList, { fields: [
+                    : undefined, label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." })] }), id: 'paragraph', defaultChecked: true }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' })] }), id: 'space-photo' }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" })] })] }), id: 'cosmos' }), _jsx(RadioButton, { label: _jsx(FieldGroup, { name: 'Gold service plan', headingTag: 'h3', children: _jsx(FieldValueList, { fields: [
                             { id: 'service', name: 'Service length', value: '1 year' },
                             { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },
                             { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }