@pega/react-sdk-components 8.23.11 → 23.1.11

package/lib/components/template/SubTabs/SubTabs.js

@@ -1,13 +1,13 @@
-import React, { Fragment, useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import { Tab, Tabs } from "@material-ui/core";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useEffect, useState } from 'react';
+import { Tab, Tabs } from '@material-ui/core';
 import { TabContext, TabPanel } from '@material-ui/lab';
 import { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
 export default function SubTabs(props) {
-    const { children } = props;
+    const { children = [] } = props;
     const defaultTabIndex = 0;
-    const deferLoadedTabs = children[0];
-    const availableTabs = getVisibleTabs(deferLoadedTabs, "tabsSubs");
+    const deferLoadedTabs = Children.toArray(children)[0];
+    const availableTabs = getVisibleTabs(deferLoadedTabs, 'tabsSubs');
     const [currentTabId, setCurrentTabId] = useState(defaultTabIndex.toString());
     const [tabItems, setTabitem] = useState([]);
     useEffect(() => {
@@ -18,16 +18,6 @@ export default function SubTabs(props) {
         setCurrentTabId(index);
         tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);
     };
-    return (React.createElement(Fragment, null,
-        React.createElement(TabContext, { value: currentTabId.toString() },
-            React.createElement(Tabs, { onChange: handleTabClick, value: currentTabId, variant: "scrollable" }, tabItems.map((tab) => React.createElement(Tab, { key: tab.id, label: tab.name, value: tab.id }))),
-            tabItems.map((tab) => (React.createElement(TabPanel, { key: tab.id, value: tab.id, tabIndex: +tab.id },
-                React.createElement("div", null, tab.content ? tab.content : "No content exists")))))));
+    return (_jsxs(TabContext, { value: currentTabId.toString(), children: [_jsx(Tabs, { onChange: handleTabClick, value: currentTabId, variant: 'scrollable', children: tabItems.map((tab) => (_jsx(Tab, { label: tab.name, value: tab.id }, tab.id))) }), tabItems.map((tab) => (_jsx(TabPanel, { value: tab.id, tabIndex: +tab.id, children: _jsx("div", { children: tab.content ? tab.content : 'No content exists' }) }, tab.id)))] }));
 }
-SubTabs.defaultProps = {
-    children: []
-};
-SubTabs.propTypes = {
-    children: PropTypes.arrayOf(PropTypes.node)
-};
 //# sourceMappingURL=SubTabs.js.map

package/lib/components/template/SubTabs/SubTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubTabs.js","sourceRoot":"","sources":["../../../../src/components/template/SubTabs/SubTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAExE,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK;IACnC,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,MAAM,eAAe,GAAG,CAAC,CAAC;IAC1B,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,aAAa,GAAG,cAAc,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;IAClE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC;IAE7E,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAa,EAAE,CAAC,CAAC;IACxD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,gBAAgB,CACnC,aAAa,EACb,YAAY,EACZ,QAAQ,CACT,CAAC;QACF,UAAU,CAAC,YAAY,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAGnB,MAAM,cAAc,GAAG,CAAC,EAAE,EAAE,KAAa,EAAE,EAAE;QAC3C,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,QAAQ,CAAC,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ;QACP,oBAAC,UAAU,IAAC,KAAK,EAAE,YAAY,CAAC,QAAQ,EAAE;YAC1C,oBAAC,IAAI,IACH,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,YAAY,EACnB,OAAO,EAAC,YAAY,IAErB,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAO,EAAE,EAAE,CACxB,oBAAC,GAAG,IACJ,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,KAAK,EAAE,GAAG,CAAC,IAAI,EACf,KAAK,EAAE,GAAG,CAAC,EAAE,GACX,CACP,CACQ;YAGH,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAO,EAAE,EAAE,CAAC,CACxB,oBAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE;gBACrD,iCAAM,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAO,CACnD,CACZ,CAAC,CACS,CACJ,CACZ,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,YAAY,GAAG;IACpB,QAAQ,EAAE,EAAE;CACd,CAAA;AAED,OAAO,CAAC,SAAS,GAAG;IACjB,QAAQ,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC;CAC7C,CAAC","sourcesContent":["import React, { Fragment, useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Tab, Tabs } from \"@material-ui/core\";\nimport { TabContext, TabPanel } from '@material-ui/lab';\nimport { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';\n\nexport default function SubTabs(props) {\n  const { children } = props;\n\n  const defaultTabIndex = 0;\n  const deferLoadedTabs = children[0];\n  const availableTabs = getVisibleTabs(deferLoadedTabs, \"tabsSubs\");\n  const [currentTabId, setCurrentTabId] = useState(defaultTabIndex.toString());\n\n  const [tabItems, setTabitem] = useState<Array<any>>([]);\n  useEffect(() => {\n    const tempTabItems = getTransientTabs(\n      availableTabs,\n      currentTabId,\n      tabItems\n    );\n    setTabitem(tempTabItems);\n  }, [currentTabId]);\n\n\n  const handleTabClick = (id, index: string) => {\n    setCurrentTabId(index);\n    tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);\n  };\n\n  return (\n    <Fragment>\n      <TabContext value={currentTabId.toString()}>\n      <Tabs\n        onChange={handleTabClick}\n        value={currentTabId}\n        variant=\"scrollable\"\n        >\n      {tabItems.map((tab:any) =>\n        <Tab\n        key={tab.id}\n        label={tab.name}\n        value={tab.id}\n        />\n  )}\n    </Tabs>\n\n      {\n        tabItems.map((tab:any) => (\n          <TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>\n            <div>{tab.content ? tab.content : \"No content exists\"}</div>\n          </TabPanel>\n        ))}\n      </TabContext>\n    </Fragment>\n  );\n}\n\nSubTabs.defaultProps = {\n   children: []\n}\n\nSubTabs.propTypes = {\n   children: PropTypes.arrayOf(PropTypes.node)\n};\n"]}
+{"version":3,"file":"SubTabs.js","sourceRoot":"","sources":["../../../../src/components/template/SubTabs/SubTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAqB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAOxE,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAsC;IACpE,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAEhC,MAAM,eAAe,GAAG,CAAC,CAAC;IAC1B,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,aAAa,GAAG,cAAc,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;IAClE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC;IAE7E,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAQ,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,gBAAgB,CAAC,aAAa,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;QAC7E,UAAU,CAAC,YAAY,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,cAAc,GAAG,CAAC,EAAE,EAAE,KAAa,EAAE,EAAE;QAC3C,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,QAAQ,CAAC,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,IAAC,KAAK,EAAE,YAAY,CAAC,QAAQ,EAAE,aACxC,KAAC,IAAI,IAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAC,YAAY,YACtE,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,EAAE,CAAC,CAC1B,KAAC,GAAG,IAAc,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE,IAAtC,GAAG,CAAC,EAAE,CAAoC,CACrD,CAAC,GACG,EAEN,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,EAAE,CAAC,CAC1B,KAAC,QAAQ,IAAc,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,YACrD,wBAAM,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,GAAO,IAD/C,GAAG,CAAC,EAAE,CAEV,CACZ,CAAC,IACS,CACd,CAAC;AACJ,CAAC","sourcesContent":["import { Children, PropsWithChildren, useEffect, useState } from 'react';\nimport { Tab, Tabs } from '@material-ui/core';\nimport { TabContext, TabPanel } from '@material-ui/lab';\n\nimport { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';\nimport { PConnProps } from '../../../types/PConnProps';\n\ninterface SubTabsProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n}\n\nexport default function SubTabs(props: PropsWithChildren<SubTabsProps>) {\n  const { children = [] } = props;\n\n  const defaultTabIndex = 0;\n  const deferLoadedTabs = Children.toArray(children)[0];\n  const availableTabs = getVisibleTabs(deferLoadedTabs, 'tabsSubs');\n  const [currentTabId, setCurrentTabId] = useState(defaultTabIndex.toString());\n\n  const [tabItems, setTabitem] = useState<any[]>([]);\n  useEffect(() => {\n    const tempTabItems = getTransientTabs(availableTabs, currentTabId, tabItems);\n    setTabitem(tempTabItems);\n  }, [currentTabId]);\n\n  const handleTabClick = (id, index: string) => {\n    setCurrentTabId(index);\n    tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);\n  };\n\n  return (\n    <TabContext value={currentTabId.toString()}>\n      <Tabs onChange={handleTabClick} value={currentTabId} variant='scrollable'>\n        {tabItems.map((tab: any) => (\n          <Tab key={tab.id} label={tab.name} value={tab.id} />\n        ))}\n      </Tabs>\n\n      {tabItems.map((tab: any) => (\n        <TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>\n          <div>{tab.content ? tab.content : 'No content exists'}</div>\n        </TabPanel>\n      ))}\n    </TabContext>\n  );\n}\n"]}

package/lib/components/template/SubTabs/tabUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/template/SubTabs/tabUtils.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,uBAKhC,CAAC;AAEF,eAAO,MAAM,cAAc,kCAoB1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,+DAuB5B,CAAC;AAEF,eAAO,MAAM,QAAQ,+FAepB,CAAC"}
+{"version":3,"file":"tabUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/template/SubTabs/tabUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,uBAKhC,CAAC;AAEF,eAAO,MAAM,cAAc,kCAoB1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,+DAqB5B,CAAC;AAEF,eAAO,MAAM,QAAQ,+FAepB,CAAC"}

package/lib/components/template/SubTabs/tabUtils.js

@@ -32,9 +32,7 @@ export const getTransientTabs = (availableTabs, currentTabId, tabItems) => {
             PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
         const tabContent = () => {
             if (i.toString() === currentTabId) {
-                return tabItems?.[i.toString()]?.content
-                    ? tabItems?.[i.toString()]?.content
-                    : child.getPConnect().getComponent();
+                return tabItems?.[i.toString()]?.content ? tabItems?.[i.toString()]?.content : child.getPConnect().getComponent();
             }
             return tabItems?.[i.toString()]?.content;
         };
@@ -55,7 +53,7 @@ export const tabClick = (id, availableTabs, currentTabId, setCurrentTabId, tabIt
         tabItems[index].content = availableTabs[index].getPConnect().getComponent();
     }
     const nextPConn = availableTabs[id].getPConnect();
-    const { deferLoadId: activeId } = nextPConn?.getConfigProps();
+    const { deferLoadId: activeId } = nextPConn?.getConfigProps() || {};
     PCore.getDeferLoadManager().activate(activeId, nextPConn?.getContextName());
     PCore.getDeferLoadManager().refreshComponent(activeId, nextPConn?.getContextName());
 };

package/lib/components/template/SubTabs/tabUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabUtils.js","sourceRoot":"","sources":["../../../../src/components/template/SubTabs/tabUtils.ts"],"names":[],"mappings":"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","sourcesContent":["import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';\n\ndeclare const PCore: typeof PCoreType;\n\n\nexport const getDeferFriendlyTabs = allTabs => {\n  return allTabs.map(tab => {\n    const theTabCompConfig = tab.getPConnect().getConfigProps();\n    return { type: 'DeferLoad', config: theTabCompConfig };\n  });\n};\n\nexport const getVisibleTabs = (allTabs, uuid) => {\n  let index = 0;\n  return allTabs.props\n    .getPConnect()\n    .getChildren()\n    ?.filter(child => {\n      // US-402838: Filter out tab entries if the config object does not contain the visibility attribute or it evaluates to the boolean true,\n      const config = child.getPConnect().getConfigProps();\n\n      // BUG-642335 - adding isChildDeferLoad prop\n      if (child.getPConnect().getComponentName() === 'DeferLoad') {\n        const { name: viewName, deferLoadId = `${viewName}_${uuid}_${index}` } = config;\n        child.getPConnect().registerAdditionalProps({\n          deferLoadId,\n          isChildDeferLoad: true\n        });\n      }\n      index += 1;\n      return !('visibility' in config) || config.visibility === true;\n    });\n};\n\nexport const getTransientTabs = (availableTabs, currentTabId, tabItems) => {\n  return (\n    availableTabs?.map((child, i) => {\n      const config = child.getPConnect().getConfigProps();\n      const tabLabel =\n        config.label ||\n        config.inheritedProps?.find(obj => obj.prop === 'label')?.value ||\n        PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');\n      const tabContent = () => {\n        if (i.toString() === currentTabId) {\n          return tabItems?.[i.toString()]?.content\n            ? tabItems?.[i.toString()]?.content\n            : child.getPConnect().getComponent();\n        }\n        return tabItems?.[i.toString()]?.content;\n      };\n      return {\n        name: tabLabel,\n        id: i.toString(),\n        content: tabContent()\n      };\n    }) || []\n  );\n};\n\nexport const tabClick = (id, availableTabs, currentTabId, setCurrentTabId, tabItems) => {\n  const currentPConn = availableTabs[currentTabId].getPConnect();\n  const { deferLoadId } = currentPConn.getConfigProps();\n  PCore.getDeferLoadManager().deactivate(deferLoadId, currentPConn.getContextName());\n\n  setCurrentTabId(id);\n  const index = parseInt(id, 10);\n  if (tabItems[index]?.content === null) {\n    tabItems[index].content = availableTabs[index].getPConnect().getComponent();\n  }\n\n  const nextPConn = availableTabs[id].getPConnect();\n  const { deferLoadId: activeId } = nextPConn?.getConfigProps();\n  PCore.getDeferLoadManager().activate(activeId, nextPConn?.getContextName());\n  PCore.getDeferLoadManager().refreshComponent(activeId, nextPConn?.getContextName());\n};\n"]}
+{"version":3,"file":"tabUtils.js","sourceRoot":"","sources":["../../../../src/components/template/SubTabs/tabUtils.ts"],"names":[],"mappings":"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","sourcesContent":["export const getDeferFriendlyTabs = allTabs => {\n  return allTabs.map(tab => {\n    const theTabCompConfig = tab.getPConnect().getConfigProps();\n    return { type: 'DeferLoad', config: theTabCompConfig };\n  });\n};\n\nexport const getVisibleTabs = (allTabs, uuid) => {\n  let index = 0;\n  return allTabs.props\n    .getPConnect()\n    .getChildren()\n    ?.filter(child => {\n      // US-402838: Filter out tab entries if the config object does not contain the visibility attribute or it evaluates to the boolean true,\n      const config = child.getPConnect().getConfigProps();\n\n      // BUG-642335 - adding isChildDeferLoad prop\n      if (child.getPConnect().getComponentName() === 'DeferLoad') {\n        const { name: viewName, deferLoadId = `${viewName}_${uuid}_${index}` } = config;\n        child.getPConnect().registerAdditionalProps({\n          deferLoadId,\n          isChildDeferLoad: true\n        });\n      }\n      index += 1;\n      return !('visibility' in config) || config.visibility === true;\n    });\n};\n\nexport const getTransientTabs = (availableTabs, currentTabId, tabItems) => {\n  return (\n    availableTabs?.map((child, i) => {\n      const config = child.getPConnect().getConfigProps();\n      const tabLabel =\n        config.label ||\n        config.inheritedProps?.find(obj => obj.prop === 'label')?.value ||\n        PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');\n      const tabContent = () => {\n        if (i.toString() === currentTabId) {\n          return tabItems?.[i.toString()]?.content ? tabItems?.[i.toString()]?.content : child.getPConnect().getComponent();\n        }\n        return tabItems?.[i.toString()]?.content;\n      };\n      return {\n        name: tabLabel,\n        id: i.toString(),\n        content: tabContent()\n      };\n    }) || []\n  );\n};\n\nexport const tabClick = (id, availableTabs, currentTabId, setCurrentTabId, tabItems) => {\n  const currentPConn = availableTabs[currentTabId].getPConnect();\n  const { deferLoadId } = currentPConn.getConfigProps();\n  PCore.getDeferLoadManager().deactivate(deferLoadId, currentPConn.getContextName());\n\n  setCurrentTabId(id);\n  const index = parseInt(id, 10);\n  if (tabItems[index]?.content === null) {\n    tabItems[index].content = availableTabs[index].getPConnect().getComponent();\n  }\n\n  const nextPConn = availableTabs[id].getPConnect();\n  const { deferLoadId: activeId } = nextPConn?.getConfigProps() || {};\n  PCore.getDeferLoadManager().activate(activeId, nextPConn?.getContextName());\n  PCore.getDeferLoadManager().refreshComponent(activeId, nextPConn?.getContextName());\n};\n"]}

package/lib/components/template/TwoColumn/TwoColumn/TwoColumn.css

@@ -9,5 +9,4 @@
   float: left;
   padding: 0rem 0.3125rem;
   height: 100%;
-
 }

package/lib/components/template/TwoColumn/TwoColumn/TwoColumn.d.ts

@@ -1,14 +1,8 @@
-/// <reference types="react" />
-import PropTypes from "prop-types";
-declare function TwoColumn(props: any): JSX.Element;
-declare namespace TwoColumn {
-    var propTypes: {
-        children: PropTypes.Validator<PropTypes.ReactNodeLike[]>;
-        templateCol: PropTypes.Requireable<string>;
-    };
-    var defaultProps: {
-        templateCol: string;
-    };
+import { PropsWithChildren } from 'react';
+import { PConnProps } from '../../../../types/PConnProps';
+interface TwoColumnProps extends PConnProps {
+    templateCol?: string;
 }
-export default TwoColumn;
+export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>): JSX.Element;
+export {};
 //# sourceMappingURL=TwoColumn.d.ts.map

package/lib/components/template/TwoColumn/TwoColumn/TwoColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TwoColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/TwoColumn/TwoColumn/TwoColumn.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAYnC,iBAAwB,SAAS,CAAC,KAAK,KAAA,eAgCtC;kBAhCuB,SAAS;;;;;;;;;eAAT,SAAS"}
+{"version":3,"file":"TwoColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/TwoColumn/TwoColumn/TwoColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE1D,UAAU,cAAe,SAAQ,UAAU;IAEzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAUD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,eAoCzE"}

package/lib/components/template/TwoColumn/TwoColumn/TwoColumn.js

@@ -1,43 +1,34 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Grid } from "@material-ui/core";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 const useStyles = makeStyles(() => ({
     colStyles: {
-        display: "grid",
-        gap: "1rem",
-        alignContent: "baseline",
-    },
+        display: 'grid',
+        gap: '1rem',
+        alignContent: 'baseline'
+    }
 }));
 export default function TwoColumn(props) {
     const classes = useStyles();
-    const { children, templateCol } = props;
-    if (children.length !== 2) {
+    const { children, templateCol = '1fr 1fr' } = props;
+    const childrenToRender = children;
+    if (childrenToRender.length !== 2) {
         // eslint-disable-next-line no-console
-        console.error(`TwoColumn template sees more than 2 columns: ${children.length}`);
+        console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
     }
     // Calculate the size
     //  Default to assume the 2 columns are evenly split. However, override if templateCol
     //  (example value: "1fr 1fr")
     let aSize = 6;
     let bSize = 6;
-    const colAArray = templateCol.replaceAll(/[a-z]+/g, "").split(/\s/).map(itm => Number(itm));
+    const colAArray = templateCol
+        .replaceAll(/[a-z]+/g, '')
+        .split(/\s/)
+        .map(itm => Number(itm));
     const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
     const ratio = 12 / totalCols;
     aSize = (ratio * colAArray[0]);
     bSize = (ratio * colAArray[1]);
-    return (React.createElement(Grid, { container: true, spacing: 1 },
-        React.createElement(Grid, { item: true, xs: 12, md: aSize, className: classes.colStyles }, children[0]),
-        React.createElement(Grid, { item: true, xs: 12, md: bSize, className: classes.colStyles }, children[1])));
+    return (_jsxs(Grid, { container: true, spacing: 1, children: [_jsx(Grid, { item: true, xs: 12, md: aSize, className: classes.colStyles, children: childrenToRender[0] }), _jsx(Grid, { item: true, xs: 12, md: bSize, className: classes.colStyles, children: childrenToRender[1] })] }));
 }
-TwoColumn.propTypes = {
-    children: PropTypes.arrayOf(PropTypes.node).isRequired,
-    // title: PropTypes.string,
-    templateCol: PropTypes.string,
-    // icon: PropTypes.string
-};
-TwoColumn.defaultProps = {
-    templateCol: "1fr 1fr",
-    // icon: ""
-};
 //# sourceMappingURL=TwoColumn.js.map

package/lib/components/template/TwoColumn/TwoColumn/TwoColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"TwoColumn.js","sourceRoot":"","sources":["../../../../../src/components/template/TwoColumn/TwoColumn/TwoColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAY,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC;IAClC,SAAS,EAAE;QACT,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,YAAY,EAAE,UAAU;KACzB;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK;IACrC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE7B,MAAM,EAAC,QAAQ,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAEtC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;QAC1B,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAE,gDAAgD,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;KAClF;IAEA,qBAAqB;IACrB,sFAAsF;IACtF,8BAA8B;IAC9B,IAAI,KAAK,GAAa,CAAC,CAAC;IACxB,IAAI,KAAK,GAAa,CAAC,CAAC;IAExB,MAAM,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5F,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,EAAE,GAAG,SAAS,CAAC;IAC7B,KAAK,GAAG,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAa,CAAC;IAC3C,KAAK,GAAG,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAa,CAAC;IAE5C,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC;QACxB,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,IACvD,QAAQ,CAAC,CAAC,CAAC,CACP;QACP,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,IACvD,QAAQ,CAAC,CAAC,CAAC,CACP,CACF,CACR,CAAA;AACF,CAAC;AAED,SAAS,CAAC,SAAS,GAAG;IACpB,QAAQ,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,UAAU;IACtD,2BAA2B;IAC3B,WAAW,EAAE,SAAS,CAAC,MAAM;IAC7B,yBAAyB;CAC1B,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,WAAW,EAAE,SAAS;IACtB,WAAW;CACZ,CAAC","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Grid, GridSize } from \"@material-ui/core\";\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles(() => ({\n  colStyles: {\n    display: \"grid\",\n    gap: \"1rem\",\n    alignContent: \"baseline\",\n  },\n}));\n\nexport default function TwoColumn(props) {\n  const classes = useStyles();\n\n const {children, templateCol} = props;\n\n if (children.length !== 2) {\n  // eslint-disable-next-line no-console\n  console.error( `TwoColumn template sees more than 2 columns: ${children.length}`);\n }\n\n  // Calculate the size\n  //  Default to assume the 2 columns are evenly split. However, override if templateCol\n  //  (example value: \"1fr 1fr\")\n  let aSize: GridSize = 6;\n  let bSize: GridSize = 6;\n\n  const colAArray = templateCol.replaceAll(/[a-z]+/g, \"\").split(/\\s/).map(itm => Number(itm));\n  const totalCols = colAArray.reduce((v, itm) => itm + v, 0);\n  const ratio = 12 / totalCols;\n  aSize = (ratio * colAArray[0]) as GridSize;\n  bSize = (ratio * colAArray[1]) as GridSize;\n\n return (\n   <Grid container spacing={1}>\n     <Grid item xs={12} md={aSize} className={classes.colStyles}>\n       {children[0]}\n     </Grid>\n     <Grid item xs={12} md={bSize} className={classes.colStyles}>\n       {children[1]}\n     </Grid>\n   </Grid>\n )\n}\n\nTwoColumn.propTypes = {\n  children: PropTypes.arrayOf(PropTypes.node).isRequired,\n  // title: PropTypes.string,\n  templateCol: PropTypes.string,\n  // icon: PropTypes.string\n};\n\nTwoColumn.defaultProps = {\n  templateCol: \"1fr 1fr\",\n  // icon: \"\"\n};\n"]}
+{"version":3,"file":"TwoColumn.js","sourceRoot":"","sources":["../../../../../src/components/template/TwoColumn/TwoColumn/TwoColumn.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAY,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQtD,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC;IAClC,SAAS,EAAE;QACT,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,YAAY,EAAE,UAAU;KACzB;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAwC;IACxE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpD,MAAM,gBAAgB,GAAG,QAA0B,CAAC;IAEpD,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAAE;QACjC,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,gDAAgD,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC;KAC1F;IAED,qBAAqB;IACrB,sFAAsF;IACtF,8BAA8B;IAC9B,IAAI,KAAK,GAAa,CAAC,CAAC;IACxB,IAAI,KAAK,GAAa,CAAC,CAAC;IAExB,MAAM,SAAS,GAAG,WAAW;SAC1B,UAAU,CAAC,SAAS,EAAE,EAAE,CAAC;SACzB,KAAK,CAAC,IAAI,CAAC;SACX,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,EAAE,GAAG,SAAS,CAAC;IAC7B,KAAK,GAAG,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAa,CAAC;IAC3C,KAAK,GAAG,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAa,CAAC;IAE3C,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,aACxB,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,YACvD,gBAAgB,CAAC,CAAC,CAAC,GACf,EACP,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,YACvD,gBAAgB,CAAC,CAAC,CAAC,GACf,IACF,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { PropsWithChildren, ReactElement } from 'react';\nimport { Grid, GridSize } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { PConnProps } from '../../../../types/PConnProps';\n\ninterface TwoColumnProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  templateCol?: string;\n}\n\nconst useStyles = makeStyles(() => ({\n  colStyles: {\n    display: 'grid',\n    gap: '1rem',\n    alignContent: 'baseline'\n  }\n}));\n\nexport default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {\n  const classes = useStyles();\n\n  const { children, templateCol = '1fr 1fr' } = props;\n  const childrenToRender = children as ReactElement[];\n\n  if (childrenToRender.length !== 2) {\n    // eslint-disable-next-line no-console\n    console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);\n  }\n\n  // Calculate the size\n  //  Default to assume the 2 columns are evenly split. However, override if templateCol\n  //  (example value: \"1fr 1fr\")\n  let aSize: GridSize = 6;\n  let bSize: GridSize = 6;\n\n  const colAArray = templateCol\n    .replaceAll(/[a-z]+/g, '')\n    .split(/\\s/)\n    .map(itm => Number(itm));\n  const totalCols = colAArray.reduce((v, itm) => itm + v, 0);\n  const ratio = 12 / totalCols;\n  aSize = (ratio * colAArray[0]) as GridSize;\n  bSize = (ratio * colAArray[1]) as GridSize;\n\n  return (\n    <Grid container spacing={1}>\n      <Grid item xs={12} md={aSize} className={classes.colStyles}>\n        {childrenToRender[0]}\n      </Grid>\n      <Grid item xs={12} md={bSize} className={classes.colStyles}>\n        {childrenToRender[1]}\n      </Grid>\n    </Grid>\n  );\n}\n"]}

package/lib/components/template/TwoColumn/TwoColumnPage/TwoColumnPage.d.ts

@@ -1,11 +1,7 @@
 /// <reference types="react" />
-import PropTypes from "prop-types";
-declare function TwoColumnPage(props: any): JSX.Element;
-declare namespace TwoColumnPage {
-    var propTypes: {
-        children: PropTypes.Validator<PropTypes.ReactNodeLike[]>;
-    };
-    var defaultProps: {};
+import { PConnProps } from '../../../../types/PConnProps';
+interface TwoColumnPageProps extends PConnProps {
 }
-export default TwoColumnPage;
+export default function TwoColumnPage(props: TwoColumnPageProps): JSX.Element;
+export {};
 //# sourceMappingURL=TwoColumnPage.d.ts.map

package/lib/components/template/TwoColumn/TwoColumnPage/TwoColumnPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TwoColumnPage.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/TwoColumn/TwoColumnPage/TwoColumnPage.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAQnC,iBAAwB,aAAa,CAAC,KAAK,KAAA,eAO1C;kBAPuB,aAAa;;;;;;eAAb,aAAa"}
+{"version":3,"file":"TwoColumnPage.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/TwoColumn/TwoColumnPage/TwoColumnPage.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE1D,UAAU,kBAAmB,SAAQ,UAAU;CAE9C;AAMD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAK9D"}

package/lib/components/template/TwoColumn/TwoColumnPage/TwoColumnPage.js

@@ -1,15 +1,12 @@
-import React from "react";
-import PropTypes from "prop-types";
-import TwoColumn from '../TwoColumn/TwoColumn';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';
 /*
  * The wrapper handles knowing how to take in just children
  *  and mapping to the TwoColumn template.
  */
 export default function TwoColumnPage(props) {
-    return (React.createElement(TwoColumn, { ...props }));
+    // Get emitted components from map (so we can get any override that may exist)
+    const TwoColumn = getComponentFromMap('TwoColumn');
+    return _jsx(TwoColumn, { ...props });
 }
-TwoColumnPage.propTypes = {
-    children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-TwoColumnPage.defaultProps = {};
 //# sourceMappingURL=TwoColumnPage.js.map

package/lib/components/template/TwoColumn/TwoColumnPage/TwoColumnPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"TwoColumnPage.js","sourceRoot":"","sources":["../../../../../src/components/template/TwoColumn/TwoColumnPage/TwoColumnPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK;IAEzC,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,SAAS,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,UAAU;CACvD,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,EAC5B,CAAC","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport TwoColumn from '../TwoColumn/TwoColumn';\n\n/*\n * The wrapper handles knowing how to take in just children\n *  and mapping to the TwoColumn template.\n */\nexport default function TwoColumnPage(props) {\n\n  return (\n    <TwoColumn\n      {...props}\n    />\n  );\n}\n\nTwoColumnPage.propTypes = {\n  children: PropTypes.arrayOf(PropTypes.node).isRequired,\n};\n\nTwoColumnPage.defaultProps = {\n};\n"]}
+{"version":3,"file":"TwoColumnPage.js","sourceRoot":"","sources":["../../../../../src/components/template/TwoColumn/TwoColumnPage/TwoColumnPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AAOnF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAyB;IAC7D,8EAA8E;IAC9E,MAAM,SAAS,GAAG,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAEnD,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;AAClC,CAAC","sourcesContent":["import { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';\nimport { PConnProps } from '../../../../types/PConnProps';\n\ninterface TwoColumnPageProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n}\n\n/*\n * The wrapper handles knowing how to take in just children\n *  and mapping to the TwoColumn template.\n */\nexport default function TwoColumnPage(props: TwoColumnPageProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const TwoColumn = getComponentFromMap('TwoColumn');\n\n  return <TwoColumn {...props} />;\n}\n"]}

package/lib/components/template/TwoColumn/TwoColumnTab/TwoColumnTab.d.ts

@@ -1,14 +1,8 @@
-/// <reference types="react" />
-import PropTypes from "prop-types";
-declare function TwoColumnTab(props: any): JSX.Element;
-declare namespace TwoColumnTab {
-    var propTypes: {
-        children: PropTypes.Validator<PropTypes.ReactNodeLike[]>;
-        templateCol: PropTypes.Requireable<string>;
-    };
-    var defaultProps: {
-        templateCol: string;
-    };
+import { PropsWithChildren } from 'react';
+import { PConnProps } from '../../../../types/PConnProps';
+interface TwoColumnTabProps extends PConnProps {
+    templateCol?: string;
 }
-export default TwoColumnTab;
+export default function TwoColumnTab(props: PropsWithChildren<TwoColumnTabProps>): JSX.Element;
+export {};
 //# sourceMappingURL=TwoColumnTab.d.ts.map

package/lib/components/template/TwoColumn/TwoColumnTab/TwoColumnTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TwoColumnTab.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/TwoColumn/TwoColumnTab/TwoColumnTab.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAYnC,iBAAwB,YAAY,CAAC,KAAK,KAAA,eAgCzC;kBAhCuB,YAAY;;;;;;;;;eAAZ,YAAY"}
+{"version":3,"file":"TwoColumnTab.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/TwoColumn/TwoColumnTab/TwoColumnTab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE1D,UAAU,iBAAkB,SAAQ,UAAU;IAE5C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAUD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,eAoC/E"}

package/lib/components/template/TwoColumn/TwoColumnTab/TwoColumnTab.js

@@ -1,40 +1,34 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Grid } from "@material-ui/core";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 const useStyles = makeStyles(() => ({
     colStyles: {
-        display: "grid",
-        gap: "1rem",
-        alignContent: "baseline",
-    },
+        display: 'grid',
+        gap: '1rem',
+        alignContent: 'baseline'
+    }
 }));
 export default function TwoColumnTab(props) {
     const classes = useStyles();
-    const { children, templateCol } = props;
-    if (children.length !== 2) {
+    const { children, templateCol = '1fr 1fr' } = props;
+    const childrenToRender = children;
+    if (childrenToRender.length !== 2) {
         // eslint-disable-next-line no-console
-        console.error(`TwoColumn template sees more than 2 columns: ${children.length}`);
+        console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
     }
     // Calculate the size
     //  Default to assume the 2 columns are evenly split. However, override if templateCol
     //  (example value: "1fr 1fr")
     let aSize = 6;
     let bSize = 6;
-    const colAArray = templateCol.replaceAll(/[a-z]+/g, "").split(/\s/).map(itm => Number(itm));
+    const colAArray = templateCol
+        .replaceAll(/[a-z]+/g, '')
+        .split(/\s/)
+        .map(itm => Number(itm));
     const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
     const ratio = 12 / totalCols;
     aSize = (ratio * colAArray[0]);
     bSize = (ratio * colAArray[1]);
-    return (React.createElement(Grid, { container: true, spacing: 1 },
-        React.createElement(Grid, { item: true, xs: 12, md: aSize, className: classes.colStyles }, children[0]),
-        React.createElement(Grid, { item: true, xs: 12, md: bSize, className: classes.colStyles }, children[1])));
+    return (_jsxs(Grid, { container: true, spacing: 1, children: [_jsx(Grid, { item: true, xs: 12, md: aSize, className: classes.colStyles, children: childrenToRender[0] }), _jsx(Grid, { item: true, xs: 12, md: bSize, className: classes.colStyles, children: childrenToRender[1] })] }));
 }
-TwoColumnTab.propTypes = {
-    children: PropTypes.arrayOf(PropTypes.node).isRequired,
-    templateCol: PropTypes.string,
-};
-TwoColumnTab.defaultProps = {
-    templateCol: "1fr 1fr",
-};
 //# sourceMappingURL=TwoColumnTab.js.map

package/lib/components/template/TwoColumn/TwoColumnTab/TwoColumnTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"TwoColumnTab.js","sourceRoot":"","sources":["../../../../../src/components/template/TwoColumn/TwoColumnTab/TwoColumnTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAY,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC;IAClC,SAAS,EAAE;QACT,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,YAAY,EAAE,UAAU;KACzB;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK;IACxC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE7B,MAAM,EAAC,QAAQ,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IAEtC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;QAC1B,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAE,gDAAgD,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;KAClF;IAEA,qBAAqB;IACrB,sFAAsF;IACtF,8BAA8B;IAC9B,IAAI,KAAK,GAAa,CAAC,CAAC;IACxB,IAAI,KAAK,GAAa,CAAC,CAAC;IAExB,MAAM,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5F,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,EAAE,GAAG,SAAS,CAAC;IAC7B,KAAK,GAAG,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAa,CAAC;IAC3C,KAAK,GAAG,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAa,CAAC;IAE5C,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC;QACxB,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,IACvD,QAAQ,CAAC,CAAC,CAAC,CACP;QACP,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,IACvD,QAAQ,CAAC,CAAC,CAAC,CACP,CACF,CACR,CAAA;AACF,CAAC;AAED,YAAY,CAAC,SAAS,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,UAAU;IACtD,WAAW,EAAE,SAAS,CAAC,MAAM;CAC9B,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG;IAC1B,WAAW,EAAE,SAAS;CACvB,CAAC","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Grid, GridSize } from \"@material-ui/core\";\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles(() => ({\n  colStyles: {\n    display: \"grid\",\n    gap: \"1rem\",\n    alignContent: \"baseline\",\n  },\n}));\n\nexport default function TwoColumnTab(props) {\n  const classes = useStyles();\n\n const {children, templateCol} = props;\n\n if (children.length !== 2) {\n  // eslint-disable-next-line no-console\n  console.error( `TwoColumn template sees more than 2 columns: ${children.length}`);\n }\n\n  // Calculate the size\n  //  Default to assume the 2 columns are evenly split. However, override if templateCol\n  //  (example value: \"1fr 1fr\")\n  let aSize: GridSize = 6;\n  let bSize: GridSize = 6;\n\n  const colAArray = templateCol.replaceAll(/[a-z]+/g, \"\").split(/\\s/).map(itm => Number(itm));\n  const totalCols = colAArray.reduce((v, itm) => itm + v, 0);\n  const ratio = 12 / totalCols;\n  aSize = (ratio * colAArray[0]) as GridSize;\n  bSize = (ratio * colAArray[1]) as GridSize;\n\n return (\n   <Grid container spacing={1}>\n     <Grid item xs={12} md={aSize} className={classes.colStyles}>\n       {children[0]}\n     </Grid>\n     <Grid item xs={12} md={bSize} className={classes.colStyles}>\n       {children[1]}\n     </Grid>\n   </Grid>\n )\n}\n\nTwoColumnTab.propTypes = {\n  children: PropTypes.arrayOf(PropTypes.node).isRequired,\n  templateCol: PropTypes.string,\n};\n\nTwoColumnTab.defaultProps = {\n  templateCol: \"1fr 1fr\",\n};\n"]}
+{"version":3,"file":"TwoColumnTab.js","sourceRoot":"","sources":["../../../../../src/components/template/TwoColumn/TwoColumnTab/TwoColumnTab.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAY,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQtD,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC;IAClC,SAAS,EAAE;QACT,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,YAAY,EAAE,UAAU;KACzB;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAA2C;IAC9E,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpD,MAAM,gBAAgB,GAAG,QAA0B,CAAC;IAEpD,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAAE;QACjC,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,gDAAgD,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC;KAC1F;IAED,qBAAqB;IACrB,sFAAsF;IACtF,8BAA8B;IAC9B,IAAI,KAAK,GAAa,CAAC,CAAC;IACxB,IAAI,KAAK,GAAa,CAAC,CAAC;IAExB,MAAM,SAAS,GAAG,WAAW;SAC1B,UAAU,CAAC,SAAS,EAAE,EAAE,CAAC;SACzB,KAAK,CAAC,IAAI,CAAC;SACX,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3B,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,EAAE,GAAG,SAAS,CAAC;IAC7B,KAAK,GAAG,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAa,CAAC;IAC3C,KAAK,GAAG,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAa,CAAC;IAE3C,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,aACxB,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,YACvD,gBAAgB,CAAC,CAAC,CAAC,GACf,EACP,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,YACvD,gBAAgB,CAAC,CAAC,CAAC,GACf,IACF,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { PropsWithChildren, ReactElement } from 'react';\nimport { Grid, GridSize } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { PConnProps } from '../../../../types/PConnProps';\n\ninterface TwoColumnTabProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  templateCol?: string;\n}\n\nconst useStyles = makeStyles(() => ({\n  colStyles: {\n    display: 'grid',\n    gap: '1rem',\n    alignContent: 'baseline'\n  }\n}));\n\nexport default function TwoColumnTab(props: PropsWithChildren<TwoColumnTabProps>) {\n  const classes = useStyles();\n\n  const { children, templateCol = '1fr 1fr' } = props;\n  const childrenToRender = children as ReactElement[];\n\n  if (childrenToRender.length !== 2) {\n    // eslint-disable-next-line no-console\n    console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);\n  }\n\n  // Calculate the size\n  //  Default to assume the 2 columns are evenly split. However, override if templateCol\n  //  (example value: \"1fr 1fr\")\n  let aSize: GridSize = 6;\n  let bSize: GridSize = 6;\n\n  const colAArray = templateCol\n    .replaceAll(/[a-z]+/g, '')\n    .split(/\\s/)\n    .map(itm => Number(itm));\n  const totalCols = colAArray.reduce((v, itm) => itm + v, 0);\n  const ratio = 12 / totalCols;\n  aSize = (ratio * colAArray[0]) as GridSize;\n  bSize = (ratio * colAArray[1]) as GridSize;\n\n  return (\n    <Grid container spacing={1}>\n      <Grid item xs={12} md={aSize} className={classes.colStyles}>\n        {childrenToRender[0]}\n      </Grid>\n      <Grid item xs={12} md={bSize} className={classes.colStyles}>\n        {childrenToRender[1]}\n      </Grid>\n    </Grid>\n  );\n}\n"]}

package/lib/components/template/WideNarrow/WideNarrow/WideNarrow.css

@@ -9,7 +9,6 @@
   float: left;
   padding: 0rem 0rem 0rem 0.3125rem;
   height: 100%;
-
 }
 
 .psdk-wide-narrow-column .psdk-wide-column-column {
@@ -17,5 +16,4 @@
   float: left;
   padding: 0rem 0.3125rem 0rem 0rem;
   height: 100%;
-
 }

package/lib/components/template/WideNarrow/WideNarrow/WideNarrow.d.ts

@@ -1,4 +1,13 @@
-/// <reference types="react" />
+import { PropsWithChildren } from 'react';
+import { PConnProps } from '../../../../types/PConnProps';
 import './WideNarrow.css';
-export default function WideNarrow(props: any): JSX.Element;
+interface WideNarrowProps extends PConnProps {
+    a: any;
+    b: any;
+    title?: string;
+    cols?: string;
+    icon?: string;
+}
+export default function WideNarrow(props: PropsWithChildren<WideNarrowProps>): JSX.Element;
+export {};
 //# sourceMappingURL=WideNarrow.d.ts.map

package/lib/components/template/WideNarrow/WideNarrow/WideNarrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WideNarrow.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrow/WideNarrow.tsx"],"names":[],"mappings":";AAEA,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,KAAA,eA8BvC"}
+{"version":3,"file":"WideNarrow.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrow/WideNarrow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,kBAAkB,CAAC;AAE1B,UAAU,eAAgB,SAAQ,UAAU;IAE1C,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,GAAG,CAAC;IAEP,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC,eAoB3E"}

package/lib/components/template/WideNarrow/WideNarrow/WideNarrow.js

@@ -1,16 +1,8 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './WideNarrow.css';
 export default function WideNarrow(props) {
     // const {a, b /*, cols, icon, title */ } = props;
-    const { a, b, children } = props;
-    return (React.createElement(React.Fragment, null,
-        children && children.length === 2 &&
-            React.createElement("div", { className: "psdk-wide-narrow-column" },
-                React.createElement("div", { className: "psdk-wide-column-column" }, children[0]),
-                React.createElement("div", { className: "psdk-narrow-column-column" }, children[1])),
-        a && b &&
-            React.createElement("div", { className: "psdk-wide-narrow-column" },
-                React.createElement("div", { className: "psdk-wide-column-column" }, a),
-                React.createElement("div", { className: "psdk-narrow-column-column" }, b))));
+    const { a, b, children = [] } = props;
+    return (_jsxs(_Fragment, { children: [children && children.length === 2 && (_jsxs("div", { className: 'psdk-wide-narrow-column', children: [_jsx("div", { className: 'psdk-wide-column-column', children: children[0] }), _jsx("div", { className: 'psdk-narrow-column-column', children: children[1] })] })), a && b && (_jsxs("div", { className: 'psdk-wide-narrow-column', children: [_jsx("div", { className: 'psdk-wide-column-column', children: a }), _jsx("div", { className: 'psdk-narrow-column-column', children: b })] }))] }));
 }
 //# sourceMappingURL=WideNarrow.js.map

package/lib/components/template/WideNarrow/WideNarrow/WideNarrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"WideNarrow.js","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrow/WideNarrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK;IACtC,kDAAkD;IAClD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEjC,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;QACd,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAChC,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,6BAAK,SAAS,EAAC,yBAAyB,IACrC,QAAQ,CAAC,CAAC,CAAC,CACR;gBACN,6BAAK,SAAS,EAAC,2BAA2B,IACvC,QAAQ,CAAC,CAAC,CAAC,CACR,CACF;QAEP,CAAC,IAAI,CAAC;YACL,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,6BAAK,SAAS,EAAC,yBAAyB,IACrC,CAAC,CACE;gBACN,6BAAK,SAAS,EAAC,2BAA2B,IACvC,CAAC,CACE,CACF,CAES,CAElB,CAAA;AAEH,CAAC","sourcesContent":["import React from \"react\";\n\nimport './WideNarrow.css';\n\nexport default function WideNarrow(props) {\n  // const {a, b /*, cols, icon, title */ } = props;\n  const { a, b, children } = props;\n\n  return (\n    <React.Fragment>\n    {children && children.length === 2 &&\n      <div className=\"psdk-wide-narrow-column\">\n        <div className=\"psdk-wide-column-column\">\n          {children[0]}\n        </div>\n        <div className=\"psdk-narrow-column-column\">\n          {children[1]}\n        </div>\n      </div>\n    }\n    {a && b &&\n      <div className=\"psdk-wide-narrow-column\">\n        <div className=\"psdk-wide-column-column\">\n          {a}\n        </div>\n        <div className=\"psdk-narrow-column-column\">\n          {b}\n        </div>\n      </div>\n    }\n    </React.Fragment>\n\n  )\n\n}\n"]}
+{"version":3,"file":"WideNarrow.js","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrow/WideNarrow.tsx"],"names":[],"mappings":";AAEA,OAAO,kBAAkB,CAAC;AAc1B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAyC;IAC1E,kDAAkD;IAClD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAEtC,OAAO,CACL,8BACG,QAAQ,IAAK,QAA2B,CAAC,MAAM,KAAK,CAAC,IAAI,CACxD,eAAK,SAAS,EAAC,yBAAyB,aACtC,cAAK,SAAS,EAAC,yBAAyB,YAAE,QAAQ,CAAC,CAAC,CAAC,GAAO,EAC5D,cAAK,SAAS,EAAC,2BAA2B,YAAE,QAAQ,CAAC,CAAC,CAAC,GAAO,IAC1D,CACP,EACA,CAAC,IAAI,CAAC,IAAI,CACT,eAAK,SAAS,EAAC,yBAAyB,aACtC,cAAK,SAAS,EAAC,yBAAyB,YAAE,CAAC,GAAO,EAClD,cAAK,SAAS,EAAC,2BAA2B,YAAE,CAAC,GAAO,IAChD,CACP,IACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { PropsWithChildren, ReactElement } from 'react';\nimport { PConnProps } from '../../../../types/PConnProps';\nimport './WideNarrow.css';\n\ninterface WideNarrowProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  a: any;\n  b: any;\n  // eslint-disable-next-line react/no-unused-prop-types\n  title?: string;\n  // eslint-disable-next-line react/no-unused-prop-types\n  cols?: string;\n  // eslint-disable-next-line react/no-unused-prop-types\n  icon?: string;\n}\n\nexport default function WideNarrow(props: PropsWithChildren<WideNarrowProps>) {\n  // const {a, b /*, cols, icon, title */ } = props;\n  const { a, b, children = [] } = props;\n\n  return (\n    <>\n      {children && (children as ReactElement[]).length === 2 && (\n        <div className='psdk-wide-narrow-column'>\n          <div className='psdk-wide-column-column'>{children[0]}</div>\n          <div className='psdk-narrow-column-column'>{children[1]}</div>\n        </div>\n      )}\n      {a && b && (\n        <div className='psdk-wide-narrow-column'>\n          <div className='psdk-wide-column-column'>{a}</div>\n          <div className='psdk-narrow-column-column'>{b}</div>\n        </div>\n      )}\n    </>\n  );\n}\n"]}

package/lib/components/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.d.ts

@@ -1,18 +1,10 @@
 /// <reference types="react" />
-import PropTypes from 'prop-types';
-declare function WideNarrowDetails(props: any): JSX.Element;
-declare namespace WideNarrowDetails {
-    var defaultProps: {
-        label: undefined;
-        showLabel: boolean;
-        showHighlightedData: boolean;
-    };
-    var propTypes: {
-        showLabel: PropTypes.Requireable<boolean>;
-        label: PropTypes.Requireable<string>;
-        getPConnect: PropTypes.Validator<(...args: any[]) => any>;
-        showHighlightedData: PropTypes.Requireable<boolean>;
-    };
+import { PConnProps } from '../../../../types/PConnProps';
+interface WideNarrowDetailsProps extends PConnProps {
+    showLabel?: boolean;
+    label?: string;
+    showHighlightedData?: boolean;
 }
-export default WideNarrowDetails;
+export default function WideNarrowDetails(props: WideNarrowDetailsProps): JSX.Element;
+export {};
 //# sourceMappingURL=WideNarrowDetails.d.ts.map

package/lib/components/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WideNarrowDetails.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAQnC,iBAAwB,iBAAiB,CAAC,KAAK,KAAA,eAyD9C;kBAzDuB,iBAAiB;;;;;;;;;;;;;eAAjB,iBAAiB"}
+{"version":3,"file":"WideNarrowDetails.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE1D,UAAU,sBAAuB,SAAQ,UAAU;IAEjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAID,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAoEtE"}

package/lib/components/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.js

@@ -1,24 +1,30 @@
-import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement } from 'react';
 import Grid from '@material-ui/core/Grid';
 import createPConnectComponent from '../../../../bridge/react_pconnect';
-import FieldGroup from '../../../designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';
 const COLUMN_WIDTHS = [8, 4];
 export default function WideNarrowDetails(props) {
-    const { label, showLabel, getPConnect, showHighlightedData } = props;
+    // Get emitted components from map (so we can get any override that may exist)
+    const FieldGroup = getComponentFromMap('FieldGroup');
+    const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
     // Get the inherited props from the parent to determine label settings
     const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
     // Set display mode prop and re-create the children so this part of the dom tree renders
     // in a readonly (display) mode instead of a editable
     getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
     getPConnect().setInheritedProp('readOnly', true);
-    const children = getPConnect()
-        .getChildren()
-        .map((configObject, index) => createElement(createPConnectComponent(), {
-        ...configObject,
-        // eslint-disable-next-line react/no-array-index-key
-        key: index.toString()
-    }));
+    const children = getPConnect().getChildren()?.map((configObject, index) => {
+        let theConfigObject = configObject;
+        if (!theConfigObject) {
+            theConfigObject = {};
+        }
+        return createElement(createPConnectComponent(), {
+            ...theConfigObject,
+            // eslint-disable-next-line react/no-array-index-key
+            key: index.toString()
+        });
+    });
     // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
     let highlightedDataArr = [];
     if (showHighlightedData) {
@@ -30,22 +36,13 @@ export default function WideNarrowDetails(props) {
                 field.type = 'TextInput';
                 field.config.displayAsStatus = true;
             }
-            return getPConnect().createComponent(field);
+            return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
         });
     }
-    return (React.createElement(FieldGroup, { name: propsToUse.showLabel ? propsToUse.label : '' },
-        showHighlightedData && highlightedDataArr.length > 0 && (React.createElement(Grid, { container: true, spacing: 1, style: { padding: '0 0 1em' } }, highlightedDataArr.map((child, i) => (React.createElement(Grid, { item: true, xs: COLUMN_WIDTHS[i], key: `hf-${i + 1}` }, child))))),
-        React.createElement(Grid, { container: true, spacing: 1 }, children.map((child, i) => (React.createElement(Grid, { item: true, xs: COLUMN_WIDTHS[i], key: `r-${i + 1}` }, child))))));
+    let theName = '';
+    if (propsToUse?.showLabel && propsToUse.label) {
+        theName = propsToUse.label;
+    }
+    return (_jsxs(FieldGroup, { name: theName, children: [showHighlightedData && highlightedDataArr.length > 0 && (_jsx(Grid, { container: true, spacing: 1, style: { padding: '0 0 1em' }, children: highlightedDataArr.map((child, i) => (_jsx(Grid, { item: true, xs: COLUMN_WIDTHS[i], children: child }, `hf-${i + 1}`))) })), _jsx(Grid, { container: true, spacing: 1, children: children?.map((child, i) => (_jsx(Grid, { item: true, xs: COLUMN_WIDTHS[i], children: child }, `r-${i + 1}`))) })] }));
 }
-WideNarrowDetails.defaultProps = {
-    label: undefined,
-    showLabel: true,
-    showHighlightedData: false
-};
-WideNarrowDetails.propTypes = {
-    showLabel: PropTypes.bool,
-    label: PropTypes.string,
-    getPConnect: PropTypes.func.isRequired,
-    showHighlightedData: PropTypes.bool
-};
 //# sourceMappingURL=WideNarrowDetails.js.map