@pega/react-sdk-components 24.2.11 → 25.1.11

package/lib/components/designSystemExtension/CaseSummaryFields/CaseSummaryFields.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import isDeepEqual from 'fast-deep-equal/react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import TextField from '@mui/material/TextField';
 import { getDateFormatInfo } from '../../helpers/date-format-utils';
 import { getCurrencyOptions } from '../../field/Currency/currency-utils';
@@ -18,15 +18,16 @@ export default function CaseSummaryFields(props) {
         const fieldTypeLower = field.type.toLowerCase();
         if (field.config.value === null || field.config.value === '') {
             // Special handling for missing value
-            // eslint-disable-next-line sonarjs/no-small-switch
             switch (fieldTypeLower) {
                 case 'caseoperator':
                     return _jsx(Operator, { ...field.config });
                     break;
                 default:
-                    return (_jsx(TextField, { variant: 'standard', value: '---', label: field.config.label, InputProps: {
-                            readOnly: true,
-                            disableUnderline: true
+                    return (_jsx(TextField, { variant: 'standard', value: '---', label: field.config.label, slotProps: {
+                            input: {
+                                readOnly: true,
+                                disableUnderline: true
+                            }
                         } }));
             }
         }
@@ -35,40 +36,48 @@ export default function CaseSummaryFields(props) {
             case 'decimal':
             case 'integer':
             case 'dropdown':
-                return (_jsx(TextField, { variant: 'standard', value: field.config.value, label: field.config.label, InputProps: {
-                        readOnly: true,
-                        disableUnderline: true
+                return (_jsx(TextField, { variant: 'standard', value: field.config.value, label: field.config.label, slotProps: {
+                        input: {
+                            readOnly: true,
+                            disableUnderline: true
+                        }
                     } }));
             case 'checkbox': {
                 const { caption, label, value, trueLabel, falseLabel } = field.config;
                 const fieldLabel = label || caption;
                 const fieldValue = value ? trueLabel : falseLabel;
-                return (_jsx(TextField, { variant: 'standard', value: fieldValue, label: fieldLabel, InputProps: {
-                        readOnly: true,
-                        disableUnderline: true
+                return (_jsx(TextField, { variant: 'standard', value: fieldValue, label: fieldLabel, slotProps: {
+                        input: {
+                            readOnly: true,
+                            disableUnderline: true
+                        }
                     } }));
             }
             case 'status':
-                return (_jsx(TextField, { variant: 'standard', className: 'psdk-csf-status-style', value: field.config.value, label: field.config.label, InputProps: {
-                        readOnly: true,
-                        disableUnderline: true
+                return (_jsx(TextField, { variant: 'standard', className: 'psdk-csf-status-style', value: field.config.value, label: field.config.label, slotProps: {
+                        input: {
+                            readOnly: true,
+                            disableUnderline: true
+                        }
                     } }));
             case 'phone': {
                 const displayPhone = field.config.value !== '' ? field.config.value : '---';
-                return (_jsx("a", { href: `tel:${displayPhone}`, children: _jsx(TextField, { variant: 'standard', value: field.config.value, label: field.config.label, InputProps: {
-                            readOnly: true,
-                            inputProps: {
-                                style: { cursor: 'pointer' },
-                                disableUnderline: true
+                return (_jsx("a", { href: `tel:${displayPhone}`, children: _jsx(TextField, { variant: 'standard', value: field.config.value, label: field.config.label, slotProps: {
+                            input: {
+                                readOnly: true,
+                                disableUnderline: true,
+                                inputProps: { style: { cursor: 'pointer' } }
                             }
                         } }) }));
             }
             case 'email': {
                 const displayEmail = format(field.config.value, field.type);
-                return (_jsx("a", { href: `mailto:${displayEmail}`, children: _jsx(TextField, { variant: 'standard', value: field.config.value, label: field.config.label, InputProps: {
-                            readOnly: true,
-                            disableUnderline: true,
-                            inputProps: { style: { cursor: 'pointer' } }
+                return (_jsx("a", { href: `mailto:${displayEmail}`, children: _jsx(TextField, { variant: 'standard', value: field.config.value, label: field.config.label, slotProps: {
+                            input: {
+                                readOnly: true,
+                                disableUnderline: true,
+                                inputProps: { style: { cursor: 'pointer' } }
+                            }
                         } }) }));
             }
             case 'date':
@@ -78,23 +87,29 @@ export default function CaseSummaryFields(props) {
                 const theFormat = fieldTypeLower === 'datetime' ? `${theDateFormatInfo.dateFormatStringLong} hh:mm a` : theDateFormatInfo.dateFormatStringLong;
                 return (_jsx(TextField, { variant: 'standard', value: format(field.config.value, field.type, {
                         format: theFormat
-                    }), label: field.config.label, InputProps: {
-                        readOnly: true,
-                        disableUnderline: true
+                    }), label: field.config.label, slotProps: {
+                        input: {
+                            readOnly: true,
+                            disableUnderline: true
+                        }
                     } }));
             }
             case 'currency': {
                 const theCurrencyOptions = getCurrencyOptions(field.config?.currencyISOCode);
-                return (_jsx(TextField, { variant: 'standard', value: format(field.config.value, field.type, theCurrencyOptions), label: field.config.label, InputProps: {
-                        readOnly: true,
-                        disableUnderline: true
+                return (_jsx(TextField, { variant: 'standard', value: format(field.config.value, field.type, theCurrencyOptions), label: field.config.label, slotProps: {
+                        input: {
+                            readOnly: true,
+                            disableUnderline: true
+                        }
                     } }));
             }
             case 'boolean':
             case 'userreference':
-                return (_jsx(TextField, { variant: 'standard', value: format(field.config.value, field.type), label: field.config.label, InputProps: {
-                        readOnly: true,
-                        disableUnderline: true
+                return (_jsx(TextField, { variant: 'standard', value: format(field.config.value, field.type), label: field.config.label, slotProps: {
+                        input: {
+                            readOnly: true,
+                            disableUnderline: true
+                        }
                     } }));
             case 'caseoperator':
                 return _jsx(Operator, { ...field.config });
@@ -104,10 +119,10 @@ export default function CaseSummaryFields(props) {
     }
     // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render
     useEffect(() => {
-        const arGridItems = theFieldsToRender.map((field) => {
+        const arGridItems = theFieldsToRender?.map((field) => {
             // display the field when either visibility property doesn't exist or is true(if exists)
             if (field.config.visibility === undefined || field.config.visibility === true) {
-                return (_jsx(Grid, { item: true, xs: 6, children: getFieldValue(field) }, field.config.label));
+                return (_jsx(Grid2, { size: { xs: 6 }, children: getFieldValue(field) }, field.config.label));
             }
             return null;
         });
@@ -134,6 +149,6 @@ export default function CaseSummaryFields(props) {
     if (!isDeepEqual(theFieldsToRender, theFieldsModifiable)) {
         setFieldsToRender(theFieldsModifiable);
     }
-    return (_jsx(Grid, { container: true, className: 'psdk-case-summary-fields', children: theFieldsAsGridItems }));
+    return (_jsx(Grid2, { container: true, className: 'psdk-case-summary-fields', children: theFieldsAsGridItems }));
 }
 //# sourceMappingURL=CaseSummaryFields.js.map

package/lib/components/designSystemExtension/CaseSummaryFields/CaseSummaryFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSummaryFields.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect } from 'react';\nimport isDeepEqual from 'fast-deep-equal/react';\nimport Grid from '@mui/material/Grid';\nimport TextField from '@mui/material/TextField';\n\nimport { getDateFormatInfo } from '../../helpers/date-format-utils';\nimport { getCurrencyOptions } from '../../field/Currency/currency-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\n\nimport './CaseSummaryFields.css';\n\nimport { format } from '../../helpers/formatters';\n\n// CaseSummaryFields is one of the few components that does NOT have getPConnect.\n//  So, no need to extend PConnProps\ninterface CaseSummaryFieldsProps {\n  // If any, enter additional props that only exist on this component\n  status?: string;\n  showStatus?: boolean;\n  theFields: any[] | any | never;\n}\n\nexport default function CaseSummaryFields(props: CaseSummaryFieldsProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const Operator = getComponentFromMap('Operator');\n\n  const { status, showStatus, theFields } = props;\n\n  const [theFieldsToRender, setFieldsToRender] = useState([]);\n  const [theFieldsAsGridItems, setFieldsAsGridItems] = useState<any[]>([]);\n\n  function getFieldValue(field: any): any {\n    const fieldTypeLower = field.type.toLowerCase();\n\n    if (field.config.value === null || field.config.value === '') {\n      // Special handling for missing value\n      // eslint-disable-next-line sonarjs/no-small-switch\n      switch (fieldTypeLower) {\n        case 'caseoperator':\n          return <Operator {...field.config} />;\n          break;\n\n        default:\n          return (\n            <TextField\n              variant='standard'\n              value='---'\n              label={field.config.label}\n              InputProps={{\n                readOnly: true,\n                disableUnderline: true\n              }}\n            />\n          );\n      }\n    }\n\n    switch (fieldTypeLower) {\n      case 'textinput':\n      case 'decimal':\n      case 'integer':\n      case 'dropdown':\n        return (\n          <TextField\n            variant='standard'\n            value={field.config.value}\n            label={field.config.label}\n            InputProps={{\n              readOnly: true,\n              disableUnderline: true\n            }}\n          />\n        );\n\n      case 'checkbox': {\n        const { caption, label, value, trueLabel, falseLabel } = field.config;\n        const fieldLabel = label || caption;\n        const fieldValue = value ? trueLabel : falseLabel;\n\n        return (\n          <TextField\n            variant='standard'\n            value={fieldValue}\n            label={fieldLabel}\n            InputProps={{\n              readOnly: true,\n              disableUnderline: true\n            }}\n          />\n        );\n      }\n\n      case 'status':\n        return (\n          <TextField\n            variant='standard'\n            className='psdk-csf-status-style'\n            value={field.config.value}\n            label={field.config.label}\n            InputProps={{\n              readOnly: true,\n              disableUnderline: true\n            }}\n          />\n        );\n\n      case 'phone': {\n        const displayPhone = field.config.value !== '' ? field.config.value : '---';\n        return (\n          <a href={`tel:${displayPhone}`}>\n            <TextField\n              variant='standard'\n              value={field.config.value}\n              label={field.config.label}\n              InputProps={{\n                readOnly: true,\n                inputProps: {\n                  style: { cursor: 'pointer' },\n                  disableUnderline: true\n                }\n              }}\n            />\n          </a>\n        );\n      }\n\n      case 'email': {\n        const displayEmail = format(field.config.value, field.type);\n        return (\n          <a href={`mailto:${displayEmail}`}>\n            <TextField\n              variant='standard'\n              value={field.config.value}\n              label={field.config.label}\n              InputProps={{\n                readOnly: true,\n                disableUnderline: true,\n                inputProps: { style: { cursor: 'pointer' } }\n              }}\n            />\n          </a>\n        );\n      }\n\n      case 'date':\n      case 'datetime': {\n        const theDateFormatInfo = getDateFormatInfo();\n        // console.log(`theDateFormatInfo: ${theDateFormatInfo}`);\n        const theFormat =\n          fieldTypeLower === 'datetime' ? `${theDateFormatInfo.dateFormatStringLong} hh:mm a` : theDateFormatInfo.dateFormatStringLong;\n\n        return (\n          <TextField\n            variant='standard'\n            value={format(field.config.value, field.type, {\n              format: theFormat\n            })}\n            label={field.config.label}\n            InputProps={{\n              readOnly: true,\n              disableUnderline: true\n            }}\n          />\n        );\n      }\n\n      case 'currency': {\n        const theCurrencyOptions = getCurrencyOptions(field.config?.currencyISOCode);\n        return (\n          <TextField\n            variant='standard'\n            value={format(field.config.value, field.type, theCurrencyOptions)}\n            label={field.config.label}\n            InputProps={{\n              readOnly: true,\n              disableUnderline: true\n            }}\n          />\n        );\n      }\n\n      case 'boolean':\n      case 'userreference':\n        return (\n          <TextField\n            variant='standard'\n            value={format(field.config.value, field.type)}\n            label={field.config.label}\n            InputProps={{\n              readOnly: true,\n              disableUnderline: true\n            }}\n          />\n        );\n\n      case 'caseoperator':\n        return <Operator {...field.config} />;\n\n      default:\n        return (\n          <span>\n            {field.type.toLowerCase()} {field.config.value}\n          </span>\n        );\n    }\n  }\n\n  // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render\n  useEffect(() => {\n    const arGridItems = theFieldsToRender.map((field: any) => {\n      // display the field when either visibility property doesn't exist or is true(if exists)\n      if (field.config.visibility === undefined || field.config.visibility === true) {\n        return (\n          <Grid item xs={6} key={field.config.label}>\n            {getFieldValue(field)}\n          </Grid>\n        );\n      }\n\n      return null;\n    });\n    setFieldsAsGridItems(arGridItems);\n  }, [theFieldsToRender]);\n\n  const theFieldsModifiable = theFields;\n\n  // Special Case: if showStatus is true, splice the status value to be 2nd in theFields\n  //  if it's not already there\n  if (showStatus && theFields?.[1].type !== 'status') {\n    const oStatus = {\n      type: 'status',\n      config: { value: status, label: 'Status' }\n    };\n\n    const count = theFieldsModifiable.length;\n    if (count < 2) {\n      theFieldsModifiable.push(oStatus);\n    } else {\n      theFieldsModifiable.splice(1, 0, oStatus);\n    }\n  }\n\n  // At this point, we know what fields we want to render...\n  //  So, update our state if it's changed\n  if (!isDeepEqual(theFieldsToRender, theFieldsModifiable)) {\n    setFieldsToRender(theFieldsModifiable);\n  }\n\n  return (\n    <Grid container className='psdk-case-summary-fields'>\n      {theFieldsAsGridItems}\n    </Grid>\n  );\n}\n"]}
+{"version":3,"file":"CaseSummaryFields.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect } from 'react';\nimport isDeepEqual from 'fast-deep-equal/react';\nimport Grid2 from '@mui/material/Grid2';\nimport TextField from '@mui/material/TextField';\n\nimport { getDateFormatInfo } from '../../helpers/date-format-utils';\nimport { getCurrencyOptions } from '../../field/Currency/currency-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\n\nimport './CaseSummaryFields.css';\n\nimport { format } from '../../helpers/formatters';\n\n// CaseSummaryFields is one of the few components that does NOT have getPConnect.\n//  So, no need to extend PConnProps\ninterface CaseSummaryFieldsProps {\n  // If any, enter additional props that only exist on this component\n  status?: string;\n  showStatus?: boolean;\n  theFields: any[] | any | never;\n}\n\nexport default function CaseSummaryFields(props: CaseSummaryFieldsProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const Operator = getComponentFromMap('Operator');\n\n  const { status, showStatus, theFields } = props;\n\n  const [theFieldsToRender, setFieldsToRender] = useState([]);\n  const [theFieldsAsGridItems, setFieldsAsGridItems] = useState<any[]>([]);\n\n  function getFieldValue(field: any): any {\n    const fieldTypeLower = field.type.toLowerCase();\n\n    if (field.config.value === null || field.config.value === '') {\n      // Special handling for missing value\n\n      switch (fieldTypeLower) {\n        case 'caseoperator':\n          return <Operator {...field.config} />;\n          break;\n\n        default:\n          return (\n            <TextField\n              variant='standard'\n              value='---'\n              label={field.config.label}\n              slotProps={{\n                input: {\n                  readOnly: true,\n                  disableUnderline: true\n                }\n              }}\n            />\n          );\n      }\n    }\n\n    switch (fieldTypeLower) {\n      case 'textinput':\n      case 'decimal':\n      case 'integer':\n      case 'dropdown':\n        return (\n          <TextField\n            variant='standard'\n            value={field.config.value}\n            label={field.config.label}\n            slotProps={{\n              input: {\n                readOnly: true,\n                disableUnderline: true\n              }\n            }}\n          />\n        );\n\n      case 'checkbox': {\n        const { caption, label, value, trueLabel, falseLabel } = field.config;\n        const fieldLabel = label || caption;\n        const fieldValue = value ? trueLabel : falseLabel;\n\n        return (\n          <TextField\n            variant='standard'\n            value={fieldValue}\n            label={fieldLabel}\n            slotProps={{\n              input: {\n                readOnly: true,\n                disableUnderline: true\n              }\n            }}\n          />\n        );\n      }\n\n      case 'status':\n        return (\n          <TextField\n            variant='standard'\n            className='psdk-csf-status-style'\n            value={field.config.value}\n            label={field.config.label}\n            slotProps={{\n              input: {\n                readOnly: true,\n                disableUnderline: true\n              }\n            }}\n          />\n        );\n\n      case 'phone': {\n        const displayPhone = field.config.value !== '' ? field.config.value : '---';\n        return (\n          <a href={`tel:${displayPhone}`}>\n            <TextField\n              variant='standard'\n              value={field.config.value}\n              label={field.config.label}\n              slotProps={{\n                input: {\n                  readOnly: true,\n                  disableUnderline: true,\n                  inputProps: { style: { cursor: 'pointer' } }\n                }\n              }}\n            />\n          </a>\n        );\n      }\n\n      case 'email': {\n        const displayEmail = format(field.config.value, field.type);\n        return (\n          <a href={`mailto:${displayEmail}`}>\n            <TextField\n              variant='standard'\n              value={field.config.value}\n              label={field.config.label}\n              slotProps={{\n                input: {\n                  readOnly: true,\n                  disableUnderline: true,\n                  inputProps: { style: { cursor: 'pointer' } }\n                }\n              }}\n            />\n          </a>\n        );\n      }\n\n      case 'date':\n      case 'datetime': {\n        const theDateFormatInfo = getDateFormatInfo();\n        // console.log(`theDateFormatInfo: ${theDateFormatInfo}`);\n        const theFormat =\n          fieldTypeLower === 'datetime' ? `${theDateFormatInfo.dateFormatStringLong} hh:mm a` : theDateFormatInfo.dateFormatStringLong;\n\n        return (\n          <TextField\n            variant='standard'\n            value={format(field.config.value, field.type, {\n              format: theFormat\n            })}\n            label={field.config.label}\n            slotProps={{\n              input: {\n                readOnly: true,\n                disableUnderline: true\n              }\n            }}\n          />\n        );\n      }\n\n      case 'currency': {\n        const theCurrencyOptions = getCurrencyOptions(field.config?.currencyISOCode);\n        return (\n          <TextField\n            variant='standard'\n            value={format(field.config.value, field.type, theCurrencyOptions)}\n            label={field.config.label}\n            slotProps={{\n              input: {\n                readOnly: true,\n                disableUnderline: true\n              }\n            }}\n          />\n        );\n      }\n\n      case 'boolean':\n      case 'userreference':\n        return (\n          <TextField\n            variant='standard'\n            value={format(field.config.value, field.type)}\n            label={field.config.label}\n            slotProps={{\n              input: {\n                readOnly: true,\n                disableUnderline: true\n              }\n            }}\n          />\n        );\n\n      case 'caseoperator':\n        return <Operator {...field.config} />;\n\n      default:\n        return (\n          <span>\n            {field.type.toLowerCase()} {field.config.value}\n          </span>\n        );\n    }\n  }\n\n  // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render\n  useEffect(() => {\n    const arGridItems = theFieldsToRender?.map((field: any) => {\n      // display the field when either visibility property doesn't exist or is true(if exists)\n      if (field.config.visibility === undefined || field.config.visibility === true) {\n        return (\n          <Grid2 size={{ xs: 6 }} key={field.config.label}>\n            {getFieldValue(field)}\n          </Grid2>\n        );\n      }\n\n      return null;\n    });\n    setFieldsAsGridItems(arGridItems);\n  }, [theFieldsToRender]);\n\n  const theFieldsModifiable = theFields;\n\n  // Special Case: if showStatus is true, splice the status value to be 2nd in theFields\n  //  if it's not already there\n  if (showStatus && theFields?.[1].type !== 'status') {\n    const oStatus = {\n      type: 'status',\n      config: { value: status, label: 'Status' }\n    };\n\n    const count = theFieldsModifiable.length;\n    if (count < 2) {\n      theFieldsModifiable.push(oStatus);\n    } else {\n      theFieldsModifiable.splice(1, 0, oStatus);\n    }\n  }\n\n  // At this point, we know what fields we want to render...\n  //  So, update our state if it's changed\n  if (!isDeepEqual(theFieldsToRender, theFieldsModifiable)) {\n    setFieldsToRender(theFieldsModifiable);\n  }\n\n  return (\n    <Grid2 container className='psdk-case-summary-fields'>\n      {theFieldsAsGridItems}\n    </Grid2>\n  );\n}\n"]}

package/lib/components/designSystemExtension/DetailsFields/DetailsFields.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsFields.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/DetailsFields/DetailsFields.tsx"],"names":[],"mappings":"AAWA,UAAU,kBAAkB;IAE1B,MAAM,EAAE,GAAG,EAAE,CAAC;CACf;AAwBD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAsG9D"}
+{"version":3,"file":"DetailsFields.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/DetailsFields/DetailsFields.tsx"],"names":[],"mappings":"AAUA,UAAU,kBAAkB;IAE1B,MAAM,EAAE,GAAG,EAAE,CAAC;CACf;AAwBD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAqG9D"}

package/lib/components/designSystemExtension/DetailsFields/DetailsFields.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable react/no-array-index-key */
 import React, { createElement, isValidElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
 import createPConnectComponent from '../../../bridge/react_pconnect';
@@ -49,12 +48,11 @@ export default function DetailsFields(props) {
     });
     function getGridItemLabel(field, keyVal) {
         const dispValue = field.label;
-        return (_jsx(Grid, { item: true, xs: 6, children: _jsx(Typography, { variant: 'body2', component: 'span', className: `${classes.fieldLabel}`, children: dispValue }) }, keyVal));
+        return (_jsx(Grid2, { size: { xs: 6 }, children: _jsx(Typography, { variant: 'body2', component: 'span', className: `${classes.fieldLabel}`, children: dispValue }) }, keyVal));
     }
     function formatItemValue(inField) {
         const { type, value } = inField;
         let formattedVal = value;
-        // eslint-disable-next-line sonarjs/no-small-switch
         switch (type) {
             case 'date':
                 formattedVal = format(value, type);
@@ -71,10 +69,10 @@ export default function DetailsFields(props) {
     }
     function getGridItemValue(field, keyVal) {
         const formattedValue = formatItemValue(field);
-        return (_jsx(Grid, { item: true, xs: 6, children: _jsx(Typography, { variant: 'body2', component: 'span', className: classes.fieldValue, children: formattedValue }) }, keyVal));
+        return (_jsx(Grid2, { size: { xs: 6 }, children: _jsx(Typography, { variant: 'body2', component: 'span', className: classes.fieldValue, children: formattedValue }) }, keyVal));
     }
     function getGridItem(field, keyVal) {
-        return (_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { variant: 'body2', component: 'span', className: classes.fieldValue, children: field?.value }) }, keyVal));
+        return (_jsx(Grid2, { size: { xs: 12 }, children: _jsx(Typography, { variant: 'body2', component: 'span', className: classes.fieldValue, children: field?.value }) }, keyVal));
     }
     function getGridItems() {
         const gridItems = fieldComponents.map((field, index) => {
@@ -82,9 +80,9 @@ export default function DetailsFields(props) {
                 return field?.value;
             }
             if (isValidElement(field?.value)) {
-                return (_jsx(Grid, { container: true, spacing: 1, style: { padding: '4px 0px' }, children: getGridItem(field, `${index}-item`) }, index));
+                return (_jsx(Grid2, { container: true, spacing: 1, style: { padding: '4px 0px' }, children: getGridItem(field, `${index}-item`) }, index));
             }
-            return (_jsxs(Grid, { container: true, spacing: 1, style: { padding: '4px 0px' }, children: [getGridItemLabel(field, `${index}-label`), getGridItemValue(field, `${index}-value`)] }, index));
+            return (_jsxs(Grid2, { container: true, spacing: 1, style: { padding: '4px 0px' }, children: [getGridItemLabel(field, `${index}-label`), getGridItemValue(field, `${index}-value`)] }, index));
         });
         return gridItems;
     }

package/lib/components/designSystemExtension/DetailsFields/DetailsFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsFields.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/DetailsFields/DetailsFields.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react/no-array-index-key */\nimport React, { createElement, isValidElement } from 'react';\nimport Grid from '@mui/material/Grid';\nimport Typography from '@mui/material/Typography';\nimport makeStyles from '@mui/styles/makeStyles';\n\nimport createPConnectComponent from '../../../bridge/react_pconnect';\nimport { format } from '../../helpers/formatters';\n\n// DetailsFields is one of the few components that does NOT have getPConnect.\n//  So, no need to extend PConnProps\ninterface DetailsFieldsProps {\n  // If any, enter additional props that only exist on this component\n  fields: any[];\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    paddingRight: theme.spacing(1),\n    paddingLeft: theme.spacing(1),\n    paddingTop: theme.spacing(1),\n    paddingBottom: theme.spacing(1),\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(1),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  fieldLabel: {\n    display: 'block',\n    fontWeight: 400,\n    color: theme.palette.text.secondary\n  },\n  fieldValue: {\n    fontWeight: 400,\n    color: theme.palette.text.primary\n  }\n}));\n\nexport default function DetailsFields(props: DetailsFieldsProps) {\n  // const componentName = \"DetailsFields\";\n  const { fields = [] } = props;\n  const classes = useStyles();\n  const fieldComponents: any[] = [];\n\n  fields?.forEach((field, index) => {\n    const thePConn = field.getPConnect();\n    const theCompType = thePConn.getComponentName().toLowerCase();\n    const { label } = thePConn.getConfigProps();\n    const configObj = thePConn?.getReferencedView();\n    configObj.config.readOnly = true;\n    configObj.config.displayMode = 'DISPLAY_ONLY';\n    const propToUse = { ...thePConn.getInheritedProps() };\n    configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;\n    fieldComponents.push({\n      type: theCompType,\n      label,\n      value: <React.Fragment key={index}>{createElement(createPConnectComponent(), thePConn.getReferencedViewPConnect())}</React.Fragment>\n    });\n  });\n\n  function getGridItemLabel(field: any, keyVal: string) {\n    const dispValue = field.label;\n\n    return (\n      <Grid item xs={6} key={keyVal}>\n        <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>\n          {dispValue}\n        </Typography>\n      </Grid>\n    );\n  }\n\n  function formatItemValue(inField: any) {\n    const { type, value } = inField;\n    let formattedVal = value;\n\n    // eslint-disable-next-line sonarjs/no-small-switch\n    switch (type) {\n      case 'date':\n        formattedVal = format(value, type);\n        break;\n\n      default:\n        // No match means we return the value as we received it\n        break;\n    }\n\n    // Finally, if the value is undefined or an empty string, we want to display it as \"---\"\n    if (formattedVal === undefined || formattedVal === '') {\n      formattedVal = '---';\n    }\n\n    return formattedVal;\n  }\n\n  function getGridItemValue(field: any, keyVal: string) {\n    const formattedValue = formatItemValue(field);\n\n    return (\n      <Grid item xs={6} key={keyVal}>\n        <Typography variant='body2' component='span' className={classes.fieldValue}>\n          {formattedValue}\n        </Typography>\n      </Grid>\n    );\n  }\n\n  function getGridItem(field: any, keyVal: string) {\n    return (\n      <Grid item xs={12} key={keyVal}>\n        <Typography variant='body2' component='span' className={classes.fieldValue}>\n          {field?.value}\n        </Typography>\n      </Grid>\n    );\n  }\n\n  function getGridItems() {\n    const gridItems: any[] = fieldComponents.map((field, index) => {\n      if (field?.type === 'reference') {\n        return field?.value;\n      }\n      if (isValidElement(field?.value)) {\n        return (\n          <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>\n            {getGridItem(field, `${index}-item`)}\n          </Grid>\n        );\n      }\n      return (\n        <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>\n          {getGridItemLabel(field, `${index}-label`)}\n          {getGridItemValue(field, `${index}-value`)}\n        </Grid>\n      );\n    });\n    return gridItems;\n  }\n\n  return <>{getGridItems()}</>;\n}\n"]}
+{"version":3,"file":"DetailsFields.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/DetailsFields/DetailsFields.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createElement, isValidElement } from 'react';\nimport Grid2 from '@mui/material/Grid2';\nimport Typography from '@mui/material/Typography';\nimport makeStyles from '@mui/styles/makeStyles';\n\nimport createPConnectComponent from '../../../bridge/react_pconnect';\nimport { format } from '../../helpers/formatters';\n\n// DetailsFields is one of the few components that does NOT have getPConnect.\n//  So, no need to extend PConnProps\ninterface DetailsFieldsProps {\n  // If any, enter additional props that only exist on this component\n  fields: any[];\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    paddingRight: theme.spacing(1),\n    paddingLeft: theme.spacing(1),\n    paddingTop: theme.spacing(1),\n    paddingBottom: theme.spacing(1),\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(1),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  fieldLabel: {\n    display: 'block',\n    fontWeight: 400,\n    color: theme.palette.text.secondary\n  },\n  fieldValue: {\n    fontWeight: 400,\n    color: theme.palette.text.primary\n  }\n}));\n\nexport default function DetailsFields(props: DetailsFieldsProps) {\n  // const componentName = \"DetailsFields\";\n  const { fields = [] } = props;\n  const classes = useStyles();\n  const fieldComponents: any[] = [];\n\n  fields?.forEach((field, index) => {\n    const thePConn = field.getPConnect();\n    const theCompType = thePConn.getComponentName().toLowerCase();\n    const { label } = thePConn.getConfigProps();\n    const configObj = thePConn?.getReferencedView();\n    configObj.config.readOnly = true;\n    configObj.config.displayMode = 'DISPLAY_ONLY';\n    const propToUse = { ...thePConn.getInheritedProps() };\n    configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;\n    fieldComponents.push({\n      type: theCompType,\n      label,\n      value: <React.Fragment key={index}>{createElement(createPConnectComponent(), thePConn.getReferencedViewPConnect())}</React.Fragment>\n    });\n  });\n\n  function getGridItemLabel(field: any, keyVal: string) {\n    const dispValue = field.label;\n\n    return (\n      <Grid2 size={{ xs: 6 }} key={keyVal}>\n        <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>\n          {dispValue}\n        </Typography>\n      </Grid2>\n    );\n  }\n\n  function formatItemValue(inField: any) {\n    const { type, value } = inField;\n    let formattedVal = value;\n\n    switch (type) {\n      case 'date':\n        formattedVal = format(value, type);\n        break;\n\n      default:\n        // No match means we return the value as we received it\n        break;\n    }\n\n    // Finally, if the value is undefined or an empty string, we want to display it as \"---\"\n    if (formattedVal === undefined || formattedVal === '') {\n      formattedVal = '---';\n    }\n\n    return formattedVal;\n  }\n\n  function getGridItemValue(field: any, keyVal: string) {\n    const formattedValue = formatItemValue(field);\n\n    return (\n      <Grid2 size={{ xs: 6 }} key={keyVal}>\n        <Typography variant='body2' component='span' className={classes.fieldValue}>\n          {formattedValue}\n        </Typography>\n      </Grid2>\n    );\n  }\n\n  function getGridItem(field: any, keyVal: string) {\n    return (\n      <Grid2 size={{ xs: 12 }} key={keyVal}>\n        <Typography variant='body2' component='span' className={classes.fieldValue}>\n          {field?.value}\n        </Typography>\n      </Grid2>\n    );\n  }\n\n  function getGridItems() {\n    const gridItems: any[] = fieldComponents.map((field, index) => {\n      if (field?.type === 'reference') {\n        return field?.value;\n      }\n      if (isValidElement(field?.value)) {\n        return (\n          <Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>\n            {getGridItem(field, `${index}-item`)}\n          </Grid2>\n        );\n      }\n      return (\n        <Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>\n          {getGridItemLabel(field, `${index}-label`)}\n          {getGridItemValue(field, `${index}-value`)}\n        </Grid2>\n      );\n    });\n    return gridItems;\n  }\n\n  return <>{getGridItems()}</>;\n}\n"]}

package/lib/components/designSystemExtension/FieldGroup/FieldGroup.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 interface FieldGroupProps {
     name?: string;
     collapsible?: boolean;

package/lib/components/designSystemExtension/FieldGroup/FieldGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAQpD,UAAU,eAAe;IAEvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA4BD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC,2CAsC3E"}
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAQzD,UAAU,eAAe;IAEvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA4BD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC,2CAqC3E"}

package/lib/components/designSystemExtension/FieldGroup/FieldGroup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import makeStyles from '@mui/styles/makeStyles';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -33,12 +33,10 @@ export default function FieldGroup(props) {
     const { children, name, collapsible = false, instructions } = props;
     const classes = useStyles(collapsible);
     const [collapsed, setCollapsed] = useState(false);
-    const descAndChildren = (_jsx(Grid, { container: true, children: _jsx("div", { className: classes.fullWidth, children: children }) }));
+    const descAndChildren = (_jsx(Grid2, { container: true, children: _jsx("div", { className: classes.fullWidth, children: children }) }));
     const headerClickHandler = () => {
         setCollapsed(current => !current);
     };
-    return (_jsx(Grid, { container: true, spacing: 4, justifyContent: 'space-between', children: _jsxs(Grid, { item: true, style: { width: '100%' }, children: [name && (_jsx("div", { className: classes.fieldMargin, children: collapsible ? (_jsxs("span", { id: 'field-group-header', className: classes.fieldGroupHeader, onClick: headerClickHandler, children: [collapsed ? _jsx(KeyboardArrowRightIcon, {}) : _jsx(KeyboardArrowDownIcon, {}), _jsx("b", { children: name })] })) : (_jsx("b", { children: name })) })), instructions && instructions !== 'none' && (
-                // eslint-disable-next-line react/no-danger
-                _jsx("div", { className: classes.instructionText, dangerouslySetInnerHTML: { __html: instructions } }, 'instructions')), !collapsed && descAndChildren] }) }));
+    return (_jsx(Grid2, { container: true, spacing: 4, justifyContent: 'space-between', children: _jsxs(Grid2, { style: { width: '100%' }, children: [name && (_jsx("div", { className: classes.fieldMargin, children: collapsible ? (_jsxs("span", { id: 'field-group-header', className: classes.fieldGroupHeader, onClick: headerClickHandler, children: [collapsed ? _jsx(KeyboardArrowRightIcon, {}) : _jsx(KeyboardArrowDownIcon, {}), _jsx("b", { children: name })] })) : (_jsx("b", { children: name })) })), instructions && instructions !== 'none' && (_jsx("div", { className: classes.instructionText, dangerouslySetInnerHTML: { __html: instructions } }, 'instructions')), !collapsed && descAndChildren] }) }));
 }
 //# sourceMappingURL=FieldGroup.js.map

package/lib/components/designSystemExtension/FieldGroup/FieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAO,sBAAsB,MAAM,wCAAwC,CAAC;AAC5E,OAAO,qBAAqB,MAAM,uCAAuC,CAAC;AAW1E,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACrC,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7B,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5B,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC3B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAC/B;IACD,WAAW,EAAE;QACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5B,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC/B,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAC5B;IACD,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;KACd;IACD,gBAAgB,EAAE;QAChB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,KAAK;QACV,MAAM,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;KAC1D;IACD,eAAe,EAAE;QACf,OAAO,EAAE,OAAO;KACjB;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAyC;IAC1E,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,GAAG,KAAK,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IACpE,MAAM,OAAO,GAAG,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,eAAe,GAAG,CACtB,KAAC,IAAI,IAAC,SAAS,kBACb,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAAG,QAAQ,GAAO,GAC9C,CACR,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,cAAc,EAAC,eAAe,YACxD,MAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAChC,IAAI,IAAI,CACP,cAAK,SAAS,EAAE,OAAO,CAAC,WAAW,YAChC,WAAW,CAAC,CAAC,CAAC,CACb,gBAAM,EAAE,EAAC,oBAAoB,EAAC,SAAS,EAAE,OAAO,CAAC,gBAAgB,EAAE,OAAO,EAAE,kBAAkB,aAC3F,SAAS,CAAC,CAAC,CAAC,KAAC,sBAAsB,KAAG,CAAC,CAAC,CAAC,KAAC,qBAAqB,KAAG,EACnE,sBAAI,IAAI,GAAK,IACR,CACR,CAAC,CAAC,CAAC,CACF,sBAAI,IAAI,GAAK,CACd,GACG,CACP,EACA,YAAY,IAAI,YAAY,KAAK,MAAM,IAAI;gBAC1C,2CAA2C;gBAC3C,cAAwB,SAAS,EAAE,OAAO,CAAC,eAAe,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,IAApG,cAAc,CAA0F,CAClH,EACA,CAAC,SAAS,IAAI,eAAe,IACzB,GACF,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { PropsWithChildren, useState } from 'react';\nimport Grid from '@mui/material/Grid';\nimport makeStyles from '@mui/styles/makeStyles';\nimport KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\n\n// FieldGroupProps is one of the few components that does NOT have getPConnect.\n//  So, no need to extend PConnProps\ninterface FieldGroupProps {\n  // If any, enter additional props that only exist on this component\n  name?: string;\n  collapsible?: boolean;\n  instructions?: string;\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(1),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  fieldMargin: {\n    paddingTop: theme.spacing(1),\n    paddingBottom: theme.spacing(1),\n    marginTop: theme.spacing(1)\n  },\n  fullWidth: {\n    width: '100%'\n  },\n  fieldGroupHeader: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '5px',\n    cursor: collapsible => (collapsible ? 'pointer' : 'auto')\n  },\n  instructionText: {\n    padding: '5px 0'\n  }\n}));\n\nexport default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {\n  const { children, name, collapsible = false, instructions } = props;\n  const classes = useStyles(collapsible);\n  const [collapsed, setCollapsed] = useState(false);\n\n  const descAndChildren = (\n    <Grid container>\n      <div className={classes.fullWidth}>{children}</div>\n    </Grid>\n  );\n\n  const headerClickHandler = () => {\n    setCollapsed(current => !current);\n  };\n\n  return (\n    <Grid container spacing={4} justifyContent='space-between'>\n      <Grid item style={{ width: '100%' }}>\n        {name && (\n          <div className={classes.fieldMargin}>\n            {collapsible ? (\n              <span id='field-group-header' className={classes.fieldGroupHeader} onClick={headerClickHandler}>\n                {collapsed ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}\n                <b>{name}</b>\n              </span>\n            ) : (\n              <b>{name}</b>\n            )}\n          </div>\n        )}\n        {instructions && instructions !== 'none' && (\n          // eslint-disable-next-line react/no-danger\n          <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />\n        )}\n        {!collapsed && descAndChildren}\n      </Grid>\n    </Grid>\n  );\n}\n"]}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAO,sBAAsB,MAAM,wCAAwC,CAAC;AAC5E,OAAO,qBAAqB,MAAM,uCAAuC,CAAC;AAW1E,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACrC,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7B,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5B,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC3B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAC/B;IACD,WAAW,EAAE;QACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5B,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC/B,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAC5B;IACD,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;KACd;IACD,gBAAgB,EAAE;QAChB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,KAAK;QACV,MAAM,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;KAC1D;IACD,eAAe,EAAE;QACf,OAAO,EAAE,OAAO;KACjB;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAyC;IAC1E,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,GAAG,KAAK,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IACpE,MAAM,OAAO,GAAG,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,eAAe,GAAG,CACtB,KAAC,KAAK,IAAC,SAAS,kBACd,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,YAAG,QAAQ,GAAO,GAC7C,CACT,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,cAAc,EAAC,eAAe,YACzD,MAAC,KAAK,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAC5B,IAAI,IAAI,CACP,cAAK,SAAS,EAAE,OAAO,CAAC,WAAW,YAChC,WAAW,CAAC,CAAC,CAAC,CACb,gBAAM,EAAE,EAAC,oBAAoB,EAAC,SAAS,EAAE,OAAO,CAAC,gBAAgB,EAAE,OAAO,EAAE,kBAAkB,aAC3F,SAAS,CAAC,CAAC,CAAC,KAAC,sBAAsB,KAAG,CAAC,CAAC,CAAC,KAAC,qBAAqB,KAAG,EACnE,sBAAI,IAAI,GAAK,IACR,CACR,CAAC,CAAC,CAAC,CACF,sBAAI,IAAI,GAAK,CACd,GACG,CACP,EACA,YAAY,IAAI,YAAY,KAAK,MAAM,IAAI,CAC1C,cAAwB,SAAS,EAAE,OAAO,CAAC,eAAe,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,IAApG,cAAc,CAA0F,CAClH,EACA,CAAC,SAAS,IAAI,eAAe,IACxB,GACF,CACT,CAAC;AACJ,CAAC","sourcesContent":["import { type PropsWithChildren, useState } from 'react';\nimport Grid2 from '@mui/material/Grid2';\nimport makeStyles from '@mui/styles/makeStyles';\nimport KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\n\n// FieldGroupProps is one of the few components that does NOT have getPConnect.\n//  So, no need to extend PConnProps\ninterface FieldGroupProps {\n  // If any, enter additional props that only exist on this component\n  name?: string;\n  collapsible?: boolean;\n  instructions?: string;\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(1),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  fieldMargin: {\n    paddingTop: theme.spacing(1),\n    paddingBottom: theme.spacing(1),\n    marginTop: theme.spacing(1)\n  },\n  fullWidth: {\n    width: '100%'\n  },\n  fieldGroupHeader: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '5px',\n    cursor: collapsible => (collapsible ? 'pointer' : 'auto')\n  },\n  instructionText: {\n    padding: '5px 0'\n  }\n}));\n\nexport default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {\n  const { children, name, collapsible = false, instructions } = props;\n  const classes = useStyles(collapsible);\n  const [collapsed, setCollapsed] = useState(false);\n\n  const descAndChildren = (\n    <Grid2 container>\n      <div className={classes.fullWidth}>{children}</div>\n    </Grid2>\n  );\n\n  const headerClickHandler = () => {\n    setCollapsed(current => !current);\n  };\n\n  return (\n    <Grid2 container spacing={4} justifyContent='space-between'>\n      <Grid2 style={{ width: '100%' }}>\n        {name && (\n          <div className={classes.fieldMargin}>\n            {collapsible ? (\n              <span id='field-group-header' className={classes.fieldGroupHeader} onClick={headerClickHandler}>\n                {collapsed ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}\n                <b>{name}</b>\n              </span>\n            ) : (\n              <b>{name}</b>\n            )}\n          </div>\n        )}\n        {instructions && instructions !== 'none' && (\n          <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />\n        )}\n        {!collapsed && descAndChildren}\n      </Grid2>\n    </Grid2>\n  );\n}\n"]}

package/lib/components/designSystemExtension/FieldGroupList/FieldGroupList.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Divider from '@mui/material/Divider';
 import Link from '@mui/material/Link';
 import { Utils } from '../../helpers/utils';
@@ -8,8 +8,8 @@ export default function FieldGroupList(props) {
     if (menuIconOverride$) {
         menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());
     }
-    return (_jsx(Grid, { container: true, spacing: 4, justifyContent: 'space-between', children: _jsx(Grid, { item: true, style: { width: '100%' }, children: _jsxs(Grid, { container: true, spacing: 1, children: [props.items.map(item => (_jsxs(Grid, { item: true, style: { width: '100%' }, children: [_jsx("b", { children: item.name }), props.onDelete && (_jsx("button", { type: 'button', style: { float: 'right' }, className: 'psdk-utility-button', id: `delete-row-${item.id}`, "aria-label": 'Delete Row', onClick: () => {
+    return (_jsx(Grid2, { container: true, spacing: 4, justifyContent: 'space-between', children: _jsx(Grid2, { style: { width: '100%' }, children: _jsxs(Grid2, { container: true, spacing: 1, children: [props.items.map(item => (_jsxs(Grid2, { style: { width: '100%' }, children: [_jsx("b", { children: item.name }), props.onDelete && (_jsx("button", { type: 'button', style: { float: 'right' }, className: 'psdk-utility-button', id: `delete-row-${item.id}`, "aria-label": 'Delete Row', onClick: () => {
                                     props.onDelete(item.id);
-                                }, children: _jsx("img", { className: 'psdk-utility-card-action-svg-icon', src: menuIconOverride$ }) })), item.children, _jsx("br", {}), props.onAdd && _jsx(Divider, {}), _jsx("br", {})] }))), props.onAdd && (_jsx(Link, { onClick: props.onAdd, style: { cursor: 'pointer' }, underline: 'hover', children: "+Add" }))] }) }) }));
+                                }, children: _jsx("img", { className: 'psdk-utility-card-action-svg-icon', src: menuIconOverride$ }) })), item.children, _jsx("br", {}), props.onAdd && _jsx(Divider, {}), _jsx("br", {})] }, item.name))), props.onAdd && (_jsx(Link, { onClick: props.onAdd, style: { cursor: 'pointer' }, underline: 'hover', children: "+Add" }))] }) }) }));
 }
 //# sourceMappingURL=FieldGroupList.js.map

package/lib/components/designSystemExtension/FieldGroupList/FieldGroupList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/FieldGroupList/FieldGroupList.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAW5C,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAA0B;IAC/D,IAAI,iBAAiB,GAAG,OAAO,CAAC;IAChC,IAAI,iBAAiB,EAAE;QACrB,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,KAAK,CAAC,qBAAqB,EAAE,CAAC,CAAC;KACzF;IAED,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,cAAc,EAAC,eAAe,YACxD,KAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YACjC,MAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,aACvB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACvB,MAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aACjC,sBAAI,IAAI,CAAC,IAAI,GAAK,EACjB,KAAK,CAAC,QAAQ,IAAI,CACjB,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,SAAS,EAAC,qBAAqB,EAC/B,EAAE,EAAE,cAAc,IAAI,CAAC,EAAE,EAAE,gBAChB,YAAY,EACvB,OAAO,EAAE,GAAG,EAAE;oCACZ,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gCAC1B,CAAC,YAED,cAAK,SAAS,EAAC,mCAAmC,EAAC,GAAG,EAAE,iBAAiB,GAAI,GACtE,CACV,EACA,IAAI,CAAC,QAAQ,EACd,cAAM,EACL,KAAK,CAAC,KAAK,IAAI,KAAC,OAAO,KAAG,EAC3B,cAAM,IACD,CACR,CAAC,EACD,KAAK,CAAC,KAAK,IAAI,CACd,KAAC,IAAI,IAAC,OAAO,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,EAAC,OAAO,qBAEpE,CACR,IACI,GACF,GACF,CACR,CAAC;AACJ,CAAC","sourcesContent":["import Grid from '@mui/material/Grid';\nimport Divider from '@mui/material/Divider';\nimport Link from '@mui/material/Link';\n\nimport { Utils } from '../../helpers/utils';\n\n// FieldGroupList is one of the few components that does NOT have getPConnect.\n//  So, no need to extend PConnProps\ninterface FieldGroupListProps {\n  // If any, enter additional props that only exist on this component\n  items: any[] | any;\n  onDelete: any;\n  onAdd: any;\n}\n\nexport default function FieldGroupList(props: FieldGroupListProps) {\n  let menuIconOverride$ = 'trash';\n  if (menuIconOverride$) {\n    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());\n  }\n\n  return (\n    <Grid container spacing={4} justifyContent='space-between'>\n      <Grid item style={{ width: '100%' }}>\n        <Grid container spacing={1}>\n          {props.items.map(item => (\n            <Grid item style={{ width: '100%' }}>\n              <b>{item.name}</b>\n              {props.onDelete && (\n                <button\n                  type='button'\n                  style={{ float: 'right' }}\n                  className='psdk-utility-button'\n                  id={`delete-row-${item.id}`}\n                  aria-label='Delete Row'\n                  onClick={() => {\n                    props.onDelete(item.id);\n                  }}\n                >\n                  <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />\n                </button>\n              )}\n              {item.children}\n              <br />\n              {props.onAdd && <Divider />}\n              <br />\n            </Grid>\n          ))}\n          {props.onAdd && (\n            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline='hover'>\n              +Add\n            </Link>\n          )}\n        </Grid>\n      </Grid>\n    </Grid>\n  );\n}\n"]}
+{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/FieldGroupList/FieldGroupList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAW5C,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAA0B;IAC/D,IAAI,iBAAiB,GAAG,OAAO,CAAC;IAChC,IAAI,iBAAiB,EAAE,CAAC;QACtB,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,KAAK,CAAC,qBAAqB,EAAE,CAAC,CAAC;IAC1F,CAAC;IAED,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,cAAc,EAAC,eAAe,YACzD,KAAC,KAAK,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAC7B,MAAC,KAAK,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,aACxB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACvB,MAAC,KAAK,IAAiB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAC7C,sBAAI,IAAI,CAAC,IAAI,GAAK,EACjB,KAAK,CAAC,QAAQ,IAAI,CACjB,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,SAAS,EAAC,qBAAqB,EAC/B,EAAE,EAAE,cAAc,IAAI,CAAC,EAAE,EAAE,gBAChB,YAAY,EACvB,OAAO,EAAE,GAAG,EAAE;oCACZ,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gCAC1B,CAAC,YAED,cAAK,SAAS,EAAC,mCAAmC,EAAC,GAAG,EAAE,iBAAiB,GAAI,GACtE,CACV,EACA,IAAI,CAAC,QAAQ,EACd,cAAM,EACL,KAAK,CAAC,KAAK,IAAI,KAAC,OAAO,KAAG,EAC3B,cAAM,KAnBI,IAAI,CAAC,IAAI,CAoBb,CACT,CAAC,EACD,KAAK,CAAC,KAAK,IAAI,CACd,KAAC,IAAI,IAAC,OAAO,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,EAAC,OAAO,qBAEpE,CACR,IACK,GACF,GACF,CACT,CAAC;AACJ,CAAC","sourcesContent":["import Grid2 from '@mui/material/Grid2';\nimport Divider from '@mui/material/Divider';\nimport Link from '@mui/material/Link';\n\nimport { Utils } from '../../helpers/utils';\n\n// FieldGroupList is one of the few components that does NOT have getPConnect.\n//  So, no need to extend PConnProps\ninterface FieldGroupListProps {\n  // If any, enter additional props that only exist on this component\n  items: any[] | any;\n  onDelete: any;\n  onAdd: any;\n}\n\nexport default function FieldGroupList(props: FieldGroupListProps) {\n  let menuIconOverride$ = 'trash';\n  if (menuIconOverride$) {\n    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());\n  }\n\n  return (\n    <Grid2 container spacing={4} justifyContent='space-between'>\n      <Grid2 style={{ width: '100%' }}>\n        <Grid2 container spacing={1}>\n          {props.items.map(item => (\n            <Grid2 key={item.name} style={{ width: '100%' }}>\n              <b>{item.name}</b>\n              {props.onDelete && (\n                <button\n                  type='button'\n                  style={{ float: 'right' }}\n                  className='psdk-utility-button'\n                  id={`delete-row-${item.id}`}\n                  aria-label='Delete Row'\n                  onClick={() => {\n                    props.onDelete(item.id);\n                  }}\n                >\n                  <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />\n                </button>\n              )}\n              {item.children}\n              <br />\n              {props.onAdd && <Divider />}\n              <br />\n            </Grid2>\n          ))}\n          {props.onAdd && (\n            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline='hover'>\n              +Add\n            </Link>\n          )}\n        </Grid2>\n      </Grid2>\n    </Grid2>\n  );\n}\n"]}

package/lib/components/designSystemExtension/FieldValueList/FieldValueList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"AAMA,UAAU,mBAAmB;IAE3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmCD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAqChE"}
+{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"AAMA,UAAU,mBAAmB;IAE3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmCD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAoChE"}

package/lib/components/designSystemExtension/FieldValueList/FieldValueList.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
 const useStyles = makeStyles(theme => ({
@@ -35,14 +35,12 @@ export default function FieldValueList(props) {
     const { name, value, variant = 'inline', isHtml = false } = props;
     const classes = useStyles();
     function getGridItemLabel() {
-        return (_jsx(Grid, { item: true, xs: variant === 'stacked' ? 12 : 4, className: variant === 'stacked' ? classes.noPaddingBottom : '', children: _jsx(Typography, { variant: 'body2', component: 'span', className: `${classes.fieldLabel}`, children: name }) }));
+        return (_jsx(Grid2, { size: { xs: variant === 'stacked' ? 12 : 4 }, className: variant === 'stacked' ? classes.noPaddingBottom : '', children: _jsx(Typography, { variant: 'body2', component: 'span', className: `${classes.fieldLabel}`, children: name }) }));
     }
     function getGridItemValue() {
         const formattedValue = formatItemValue(value);
-        return (_jsx(Grid, { item: true, xs: variant === 'stacked' || !name ? 12 : 8, className: variant === 'stacked' ? classes.noPaddingTop : '', children: isHtml ? (
-            // eslint-disable-next-line react/no-danger
-            _jsx("div", { dangerouslySetInnerHTML: { __html: formattedValue } })) : (_jsx(Typography, { variant: variant === 'stacked' ? 'h6' : 'body2', component: 'span', className: classes.fieldValue, children: formattedValue })) }));
+        return (_jsx(Grid2, { size: { xs: variant === 'stacked' || !name ? 12 : 8 }, className: variant === 'stacked' ? classes.noPaddingTop : '', children: isHtml ? (_jsx("div", { dangerouslySetInnerHTML: { __html: formattedValue } })) : (_jsx(Typography, { variant: variant === 'stacked' ? 'h6' : 'body2', component: 'span', className: classes.fieldValue, children: formattedValue })) }));
     }
-    return (_jsxs(Grid, { container: true, spacing: 4, justifyContent: 'space-between', children: [name ? getGridItemLabel() : null, getGridItemValue()] }));
+    return (_jsxs(Grid2, { container: true, spacing: 4, justifyContent: 'space-between', children: [name ? getGridItemLabel() : null, getGridItemValue()] }));
 }
 //# sourceMappingURL=FieldValueList.js.map

package/lib/components/designSystemExtension/FieldValueList/FieldValueList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"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","sourcesContent":["import Grid from '@mui/material/Grid';\nimport Typography from '@mui/material/Typography';\nimport makeStyles from '@mui/styles/makeStyles';\n\n// FieldValueList is one of the few components that does NOT have getPConnect.\n//  So, no need to extend PConnProps\ninterface FieldValueListProps {\n  // If any, enter additional props that only exist on this component\n  name?: string;\n  value: any;\n  variant?: string;\n  isHtml?: boolean;\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(1),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  fieldLabel: {\n    fontWeight: 400,\n    color: theme.palette.text.secondary\n  },\n  fieldValue: {\n    color: theme.palette.text.primary\n  },\n  noPaddingTop: {\n    paddingTop: '0 !important'\n  },\n  noPaddingBottom: {\n    paddingBottom: '0 !important'\n  }\n}));\n\nfunction formatItemValue(value) {\n  let formattedVal = value;\n\n  // if the value is undefined or an empty string, we want to display it as \"---\"\n  if (formattedVal === undefined || formattedVal === '') {\n    formattedVal = '---';\n  }\n\n  return formattedVal;\n}\n\nexport default function FieldValueList(props: FieldValueListProps) {\n  const { name, value, variant = 'inline', isHtml = false } = props;\n  const classes = useStyles();\n\n  function getGridItemLabel() {\n    return (\n      <Grid item xs={variant === 'stacked' ? 12 : 4} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>\n        <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>\n          {name}\n        </Typography>\n      </Grid>\n    );\n  }\n\n  function getGridItemValue() {\n    const formattedValue = formatItemValue(value);\n\n    return (\n      <Grid item xs={variant === 'stacked' || !name ? 12 : 8} className={variant === 'stacked' ? classes.noPaddingTop : ''}>\n        {isHtml ? (\n          // eslint-disable-next-line react/no-danger\n          <div dangerouslySetInnerHTML={{ __html: formattedValue }} />\n        ) : (\n          <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component='span' className={classes.fieldValue}>\n            {formattedValue}\n          </Typography>\n        )}\n      </Grid>\n    );\n  }\n\n  return (\n    <Grid container spacing={4} justifyContent='space-between'>\n      {name ? getGridItemLabel() : null}\n      {getGridItemValue()}\n    </Grid>\n  );\n}\n"]}
+{"version":3,"file":"FieldValueList.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"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","sourcesContent":["import Grid2 from '@mui/material/Grid2';\nimport Typography from '@mui/material/Typography';\nimport makeStyles from '@mui/styles/makeStyles';\n\n// FieldValueList is one of the few components that does NOT have getPConnect.\n//  So, no need to extend PConnProps\ninterface FieldValueListProps {\n  // If any, enter additional props that only exist on this component\n  name?: string;\n  value: any;\n  variant?: string;\n  isHtml?: boolean;\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(1),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  fieldLabel: {\n    fontWeight: 400,\n    color: theme.palette.text.secondary\n  },\n  fieldValue: {\n    color: theme.palette.text.primary\n  },\n  noPaddingTop: {\n    paddingTop: '0 !important'\n  },\n  noPaddingBottom: {\n    paddingBottom: '0 !important'\n  }\n}));\n\nfunction formatItemValue(value) {\n  let formattedVal = value;\n\n  // if the value is undefined or an empty string, we want to display it as \"---\"\n  if (formattedVal === undefined || formattedVal === '') {\n    formattedVal = '---';\n  }\n\n  return formattedVal;\n}\n\nexport default function FieldValueList(props: FieldValueListProps) {\n  const { name, value, variant = 'inline', isHtml = false } = props;\n  const classes = useStyles();\n\n  function getGridItemLabel() {\n    return (\n      <Grid2 size={{ xs: variant === 'stacked' ? 12 : 4 }} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>\n        <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>\n          {name}\n        </Typography>\n      </Grid2>\n    );\n  }\n\n  function getGridItemValue() {\n    const formattedValue = formatItemValue(value);\n\n    return (\n      <Grid2 size={{ xs: variant === 'stacked' || !name ? 12 : 8 }} className={variant === 'stacked' ? classes.noPaddingTop : ''}>\n        {isHtml ? (\n          <div dangerouslySetInnerHTML={{ __html: formattedValue }} />\n        ) : (\n          <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component='span' className={classes.fieldValue}>\n            {formattedValue}\n          </Typography>\n        )}\n      </Grid2>\n    );\n  }\n\n  return (\n    <Grid2 container spacing={4} justifyContent='space-between'>\n      {name ? getGridItemLabel() : null}\n      {getGridItemValue()}\n    </Grid2>\n  );\n}\n"]}

package/lib/components/designSystemExtension/Operator/Operator.d.ts

@@ -1,4 +1,4 @@
-import { PConnProps } from '../../../types/PConnProps';
+import type { PConnProps } from '../../../types/PConnProps';
 interface OperatorProps extends PConnProps {
     label: string;
     createDateTime: string;

package/lib/components/designSystemExtension/Operator/Operator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Operator.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/Operator/Operator.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAIvD,UAAU,aAAc,SAAQ,UAAU;IAExC,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,YAAY,CAAC,EAAE,GAAG,CAAC;CACpB;AAaD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAsLpD"}
+{"version":3,"file":"Operator.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtension/Operator/Operator.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAI5D,UAAU,aAAc,SAAQ,UAAU;IAExC,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,YAAY,CAAC,EAAE,GAAG,CAAC;CACpB;AAaD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAwLpD"}

package/lib/components/designSystemExtension/Operator/Operator.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useState } from 'react';
 import TextField from '@mui/material/TextField';
 import Popover from '@mui/material/Popover';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
 import Utils from '../../helpers/utils';
@@ -82,7 +82,6 @@ export default function Operator(props) {
                 ];
             }
             else {
-                // eslint-disable-next-line no-console
                 console.log(`Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`);
                 fields = [
                     {
@@ -125,15 +124,19 @@ export default function Operator(props) {
             return;
         }
         // There are fields, so build the grid.
-        return (_jsxs(Grid, { container: true, className: classes.popover, spacing: 1, children: [_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { variant: 'h6', children: caseOpName }) }), popoverFields.map(field => {
-                    return (_jsx(React.Fragment, { children: _jsxs(Grid, { container: true, item: true, xs: 12, spacing: 1, children: [_jsx(Grid, { item: true, xs: 6, children: _jsx(Typography, { variant: 'caption', children: field.name }) }), _jsx(Grid, { item: true, xs: 6, children: _jsx(Typography, { variant: 'subtitle2', children: field.value }) })] }) }, field.id));
+        return (_jsxs(Grid2, { container: true, className: classes.popover, spacing: 1, children: [_jsx(Grid2, { size: { xs: 12 }, children: _jsx(Typography, { variant: 'h6', children: caseOpName }) }), popoverFields.map(field => {
+                    return (_jsx(React.Fragment, { children: _jsxs(Grid2, { container: true, size: { xs: 12 }, spacing: 1, children: [_jsx(Grid2, { size: { xs: 6 }, children: _jsx(Typography, { variant: 'caption', children: field.name }) }), _jsx(Grid2, { size: { xs: 6 }, children: _jsx(Typography, { variant: 'subtitle2', children: field.value }) })] }) }, field.id));
                 })] }));
     }
     // End of popover-related
-    return (_jsxs(_Fragment, { children: [_jsx(TextField, { variant: 'standard', defaultValue: caseOpName, label: caseOpLabel, onClick: showOperatorDetails, InputProps: {
-                    readOnly: true,
-                    disableUnderline: true,
-                    inputProps: { style: { cursor: 'pointer' } }
-                } }), _jsx("br", {}), Utils.generateDateTime(caseTime, 'DateTime-Since'), _jsx(Popover, { id: popoverId, open: popoverOpen, anchorEl: popoverAnchorEl, onClose: handlePopoverClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, PaperProps: { style: { maxWidth: '45ch' } }, children: getPopoverGrid() })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(TextField, { variant: 'standard', defaultValue: caseOpName, label: caseOpLabel, onClick: showOperatorDetails, slotProps: {
+                    input: {
+                        readOnly: true,
+                        disableUnderline: true,
+                        inputProps: { style: { cursor: 'pointer' } }
+                    }
+                } }), _jsx("br", {}), Utils.generateDateTime(caseTime, 'DateTime-Since'), _jsx(Popover, { id: popoverId, open: popoverOpen, anchorEl: popoverAnchorEl, onClose: handlePopoverClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, slotProps: {
+                    paper: { style: { maxWidth: '45ch' } }
+                }, children: getPopoverGrid() })] }));
 }
 //# sourceMappingURL=Operator.js.map