udp-react-enterprise-component-library 25.18.1-beta.31 → 25.18.1-beta.33

package/dist/BaseTreeMenu-BhAbJoRI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTreeMenu-BhAbJoRI.js","names":["useStyles","other","tree","expanded"],"sources":["../src/treeMenu/BaseTreeMenuItem.jsx","../src/treeMenu/BaseTreeMenu.jsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport {\n  makeStyles,\n  lighten,\n  Typography,\n  CircularProgress,\n  darken,\n  useTheme,\n  Tooltip\n} from '@material-ui/core';\nimport TreeItem from '@material-ui/lab/TreeItem';\nimport { getIconFromName } from '../utilities/tree/TreeUtilities';\nimport clsx from 'clsx';\nimport { UnityFluentIcon } from '../utilities/iconLibrary/UnityFluentIcon';\nimport { getUnityIconFromName } from '../utilities/iconLibrary/UnityIconLibrary';\nimport { useDrag, useDrop } from 'react-dnd';\nimport {\n  NodeActionTriggerEnums,\n  TreeViewModeEnums\n} from '../enums/unitySystemEnums.ts';\nimport { AggregateChip } from '../UI/utilityDisplay/AggregateChip';\nimport { StatusChip } from '../UI/dataDisplay/status/StatusChip';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '&.Mui-selected > .MuiTreeItem-content': {\n      backgroundColor:\n        theme?.getThemeData()?.mode === 'dark'\n          ? theme.palette.grey[700]\n          : theme.palette.grey[300],\n      borderRight: `4px solid ${theme.palette.primary.main}`\n    },\n    '&.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label': {\n      backgroundColor: 'transparent',\n      paddingLeft: 0\n    },\n    '&.Mui-selected > .MuiTreeItem-content > .MuiCollapse-wrapperInner': {\n      backgroundColor:\n        theme?.getThemeData()?.mode !== 'dark' && theme.palette.grey[50]\n    },\n    '& .MuiTreeItem-content .MuiTreeItem-iconContainer': {\n      display: (props) => (props.sidebarExpanded ? 'flex' : 'none')\n    }\n  },\n  content: {\n    backgroundColor: (props) =>\n      theme?.getThemeData()?.mode !== 'dark' &&\n      props.conditionalIconName &&\n      props.conditionalIconColor\n        ? lighten(props.conditionalIconColor, 0.92)\n        : ''\n  },\n  labelRoot: {\n    display: 'flex',\n    alignItems: 'center',\n    marginLeft: (props) => (props.sidebarExpanded ? 0 : theme.spacing(1.5)),\n    width: '100%'\n  },\n  labelContainer: {\n    display: (props) => (!props.sidebarExpanded ? 'none' : ''),\n    width: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? `calc(100% - ${theme.spacing(6.25)}px)`\n        : `calc(100% - ${theme.spacing(7.75)}px)`\n  },\n  conditionalIconContainer: {\n    display: 'inline-flex'\n  },\n  labelText: {\n    fontSize: '0.75rem',\n    fontWeight: 600,\n    lineHeight: '1rem',\n    letterSpacing: 0.1\n  },\n  captionText: {\n    marginLeft: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(1) : '',\n    fontSize: '0.65rem',\n    fontWeight: 400,\n    lineHeight: 1,\n    letterSpacing: 0.4\n  },\n  labelOverflow: {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis'\n  },\n  group: {\n    width: '100%',\n    '& .MuiTreeItem-group': {\n      marginLeft: 0\n    },\n    '& .MuiTreeItem-content': {\n      paddingLeft: (props) =>\n        props.sidebarExpanded ? (props.depth || 1) * theme.spacing(1) : 0,\n      borderRight: (props) =>\n        props.showRightBorderColor\n          ? `4px solid ${theme.palette.primary.main}`\n          : '',\n      borderBottom: (props) =>\n        props.treeViewMode === TreeViewModeEnums.Compact\n          ? `1px solid ${theme.palette.grey[200]}`\n          : ''\n    },\n    '& .MuiTreeItem-content .MuiTreeItem-label': {\n      paddingLeft: 0,\n      width: (props) =>\n        props.sidebarExpanded && `calc(100% - ${theme.spacing(2.5)}px)`\n    },\n    '& .MuiTreeItem-content .MuiTreeItem-iconContainer span': {\n      display: (props) => (props.hideExpansion ? 'none' : '')\n    },\n    '& .MuiCollapse-wrapperInner': {\n      backgroundColor: (props) =>\n        theme?.getThemeData()?.mode !== 'dark' && props.isSelectedNode\n          ? theme.palette.grey[50]\n          : ''\n    }\n  },\n  iconContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 50,\n    marginTop: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? theme.spacing(0.25)\n        : theme.spacing(0.5),\n    marginBottom: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? theme.spacing(0.25)\n        : theme.spacing(0.5),\n    marginRight: theme.spacing(1),\n    width: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? theme.spacing(3)\n        : theme.spacing(4),\n    height: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? theme.spacing(3)\n        : theme.spacing(4),\n    border: (props) =>\n      props.iconColor\n        ? `1px solid ${darken(props.iconColor, 0.1)}`\n        : `1px solid ${theme.palette.secondary.main}`,\n    backgroundColor: '#ffffff'\n  }\n}));\n\nexport const BaseTreeMenuItem = (props) => {\n  const {\n    parentId,\n    nodeId,\n    iconName,\n    iconType,\n    conditionalIconName,\n    conditionalIconType,\n    conditionalIconColor,\n    label,\n    iconColor,\n    onNodeSelect,\n    isSelectedNode,\n    subLabel,\n    sidebarExpanded,\n    isLastNode,\n    loading,\n    node,\n    onDropNode,\n    treeViewMode,\n    menuIndex,\n    aggregateThresholdId,\n    ...other\n  } = props;\n  const classes = useStyles(props);\n  const theme = useTheme();\n\n  const [{ isDragging }, dragRef] = useDrag({\n    type: 'BaseTreeMenuItem',\n    item: { ...node, sourceNodeMenuIndex: menuIndex },\n    collect: (monitor) => ({\n      isDragging: monitor.isDragging()\n    })\n  });\n\n  const handleOnDrop = useCallback(\n    (sourceNode, monitor) => {\n      if (!monitor.didDrop()) {\n        if (onDropNode) {\n          const { sourceNodeMenuIndex, ...other } = sourceNode;\n          onDropNode({ ...other }, node, sourceNodeMenuIndex, menuIndex);\n        }\n      }\n    },\n    [onDropNode, node, menuIndex]\n  );\n\n  const [{ canDrop, isOver }, dropRef] = useDrop(\n    () => ({\n      accept: ['BaseTreeMenuItem'],\n      drop: (sourceNode, monitor) => {\n        // condition to only handle first drop\n        handleOnDrop(sourceNode, monitor);\n      },\n      canDrop: (sourceNode) => checkCanDrop(sourceNode),\n      collect: (monitor) => ({\n        isOver: monitor.isOver(),\n        canDrop: !!monitor.canDrop()\n      })\n    }),\n    [handleOnDrop]\n  );\n\n  const checkCanDrop = useCallback(\n    (sourceNode) => {\n      if (sourceNode) {\n        const onDropActions = node?.properties?.nodeActions?.filter(\n          (na) => na?.triggerType === NodeActionTriggerEnums.On_Node_Drop\n        );\n        if (!onDropActions) {\n          return false;\n        }\n        const nodeDragEntities = onDropActions?.map(\n          (action) => action?.dragEntityName\n        );\n        return nodeDragEntities.includes(\n          sourceNode?.properties?.catalogReturnObject\n        );\n      }\n    },\n    [node]\n  );\n\n  const handleOnLabelClick = useCallback(\n    (e) => {\n      e.preventDefault();\n      onNodeSelect(e, nodeId);\n    },\n    [onNodeSelect, nodeId]\n  );\n\n  return (\n    <TreeItem\n      className={classes.group}\n      key={nodeId}\n      nodeId={nodeId}\n      label={\n        <div ref={dropRef}>\n          <Tooltip title={sidebarExpanded ? '' : label}>\n            <div\n              ref={(node?.properties?.isDraggable && dragRef) || null}\n              style={{ opacity: isDragging ? 0.5 : 1 }}\n            >\n              {loading ? (\n                <CircularProgress size={12} />\n              ) : (\n                <div\n                  id={'udpRecord-BaseTreeMenuItem-'+label.replace(/\\s+/g, '')}\n                  udprecordid={'udpRecord-BaseTreeMenuItem-'+label.replace(/\\s+/g, '')}\n                  className={classes.labelRoot}\n                  style={{\n                    fontWeight: isSelectedNode ? 'bold' : ''\n                  }}\n                >\n                  {iconName && (\n                    <div className={classes.iconContainer}>\n                      <UnityFluentIcon\n                        size={\n                          treeViewMode === TreeViewModeEnums.Compact\n                            ? 'small'\n                            : 'medium'\n                        }\n                        color={iconColor}\n                        type={iconType}\n                        icon={\n                          iconType === 'unity'\n                            ? getUnityIconFromName(iconName)\n                            : getIconFromName(iconName)\n                        }\n                        style={{\n                          color: iconColor\n                            ? darken(iconColor, 0.1)\n                            : theme.palette.secondary.main\n                        }}\n                      />\n                    </div>\n                  )}\n                  <div className={classes.labelContainer}>\n                    <Typography\n                      variant='subtitle2'\n                      className={clsx(classes.labelText, classes.labelOverflow)}\n                    >\n                      {label}\n                      {subLabel &&\n                        treeViewMode === TreeViewModeEnums.Compact && (\n                          <Typography\n                            variant='caption'\n                            className={clsx(\n                              classes.captionText,\n                              classes.labelOverflow\n                            )}\n                          >\n                            {subLabel}\n                          </Typography>\n                        )}\n                    </Typography>\n                    {subLabel && treeViewMode === TreeViewModeEnums.Classic && (\n                      <div className={classes.labelOverflow}>\n                        <Typography\n                          variant='caption'\n                          className={clsx(classes.captionText)}\n                        >\n                          {subLabel}\n                        </Typography>\n                      </div>\n                    )}\n                  </div>\n                  {node?.properties?.itemCount !== undefined &&\n                    node?.properties?.itemCount !== null &&\n                    sidebarExpanded && (\n                      <StatusChip\n                        label={String(node.properties.itemCount)}\n                        useSmallChip={true}\n                      />\n                    )}\n                  <AggregateChip aggregateThresholdId={aggregateThresholdId} />\n                  {conditionalIconName && sidebarExpanded && (\n                    <div className={classes.conditionalIconContainer}>\n                      <UnityFluentIcon\n                        size={\n                          treeViewMode === TreeViewModeEnums.Compact\n                            ? 'small'\n                            : 'medium'\n                        }\n                        color={conditionalIconColor}\n                        type={conditionalIconType}\n                        icon={\n                          conditionalIconType === 'unity'\n                            ? getUnityIconFromName(conditionalIconName)\n                            : getIconFromName(conditionalIconName)\n                        }\n                        style={{\n                          color: conditionalIconColor\n                        }}\n                      />\n                    </div>\n                  )}\n                </div>\n              )}\n            </div>\n          </Tooltip>\n        </div>\n      }\n      onLabelClick={handleOnLabelClick}\n      classes={{ root: classes.root, content: classes.content }}\n      {...other}\n    />\n  );\n};\n","import React, { useCallback, useState, useEffect, useRef } from 'react';\nimport {\n  makeStyles,\n  useTheme,\n  lighten,\n  CircularProgress,\n  Typography\n} from '@material-ui/core';\nimport TreeView from '@material-ui/lab/TreeView';\nimport { BaseTreeMenuItem } from './BaseTreeMenuItem';\nimport {\n  searchTree,\n  findAllParentIds,\n  getNodeIdForRightBorder\n} from '../utilities/tree/TreeUtilities';\nimport { FluentIcon } from '../utilities/iconLibrary/FluentIcon';\nimport { CaretUpSolid8Icon, CaretDownSolid8Icon } from '@fluentui/react-icons';\nimport { cloneDeep } from 'lodash';\nimport { TreeViewModeEnums } from '../enums/unitySystemEnums.ts';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    marginBottom: theme.spacing(1.75),\n    borderTop: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? `1px solid ${theme.palette.grey[200]}`\n        : ''\n  },\n  noChildrenContainer: {\n    borderBottom: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? `1px solid ${theme.palette.grey[200]}`\n        : ''\n  }\n}));\n\nexport const BaseTreeMenu = (props) => {\n  const {\n    menuItems,\n    onSelectNode,\n    onDropNode,\n    menuIndex,\n    selectedNodeId,\n    selectedNodeParentId,\n    sidebarExpanded,\n    treeViewMode,\n    childrenKey = 'children'\n  } = props;\n  const [expanded, setExpanded] = useState(null);\n  const [isCurrentActiveTree, setIsCurrentActiveTree] = useState(false);\n  const [selectedNodeIsHidden, setSelectedNodeIsHidden] = useState(false);\n  const [tree, setTree] = useState(menuItems);\n  const theme = useTheme();\n  const classes = useStyles(props);\n  const firstRender = useRef(true);\n\n  const handleSelectedNode = useCallback(\n    (e, value) => {\n      const selectedNode = searchTree(tree, value);\n      if (onSelectNode) {\n        onSelectNode(selectedNode, menuIndex);\n        setSelectedNodeIsHidden(false);\n      }\n    },\n    [tree, menuIndex, onSelectNode]\n  );\n\n  const renderTree = useCallback(\n    (node, depth = 1) => {\n      let label = node.properties?.nodeLabel || node.properties?.name;\n      let subLabel = node.properties?.nodeSubLabel;\n      let iconName = node.properties?.defaultIcon?.name;\n      let iconType = node.properties?.defaultIcon?.type;\n      let conditionalIconName = node.properties?.conditionalIconName || '';\n      let conditionalIconType = node.properties?.conditionalIconName\n        ? node.properties.conditionalIconType\n        : '';\n      let conditionalIconColor = node.properties?.conditionalIconName\n        ? node.properties?.conditionalIconColor\n        : '';\n      let nodeId = node.id;\n      let iconColor = node.properties?.conditionalIconName\n        ? node.properties?.conditionalIconColor\n        : node.properties?.defaultIcon?.color?.hex;\n      let aggregateThresholdId = node.properties?.aggregateThresholdId || '';\n\n      if (node.isGroupNode) {\n        label = node.properties?.label;\n        subLabel = node.properties?.subLabel;\n        iconName = node.properties?.icon?.name;\n        iconType = node.properties?.icon?.type;\n        iconColor = node.properties?.icon?.color?.hex;\n      }\n\n      return (\n        <BaseTreeMenuItem\n          key={nodeId}\n          nodeId={nodeId}\n          label={label}\n          subLabel={subLabel}\n          iconName={iconName}\n          iconType={iconType}\n          conditionalIconName={conditionalIconName}\n          conditionalIconType={conditionalIconType}\n          conditionalIconColor={conditionalIconColor}\n          parentId={node.parentId}\n          iconColor={iconColor}\n          onNodeSelect={handleSelectedNode}\n          selectedNodeId={selectedNodeId}\n          isSelectedNode={selectedNodeId === node.id}\n          showRightBorderColor={\n            selectedNodeIsHidden &&\n            isCurrentActiveTree &&\n            getNodeIdForRightBorder(expanded, tree, selectedNodeParentId) ===\n              node.id\n          }\n          isCurrentActiveTree={isCurrentActiveTree}\n          sidebarExpanded={sidebarExpanded}\n          depth={depth}\n          hideExpansion={!!!node[childrenKey]?.length}\n          node={node}\n          onDropNode={onDropNode}\n          treeViewMode={treeViewMode}\n          menuIndex={menuIndex}\n          aggregateThresholdId={aggregateThresholdId}\n        >\n          {node.properties?.lazyLoad &&\n            !!!node[childrenKey]?.length &&\n            !node.completedLoadingChildren && (\n              <CircularProgress\n                size={12}\n                style={{ marginLeft: (depth || 1) * theme.spacing(1) }}\n              />\n            )}\n          {node.properties?.lazyLoad &&\n            !!!node[childrenKey]?.length &&\n            node.completedLoadingChildren &&\n            sidebarExpanded &&\n            !node.errorRetrievingChildren && (\n              <div className={classes.noChildrenContainer}>\n                <Typography\n                  variant='caption'\n                  style={{\n                    marginLeft: (depth || 1) * theme.spacing(3),\n                    fontWeight: 400\n                  }}\n                >\n                  No Children\n                </Typography>\n              </div>\n            )}\n          {node.properties?.lazyLoad &&\n            node.completedLoadingChildren &&\n            sidebarExpanded &&\n            node.errorRetrievingChildren && (\n              <div className={classes.noChildrenContainer}>\n                <Typography\n                  variant='caption'\n                  style={{\n                    marginLeft: (depth || 1) * theme.spacing(3),\n                    fontWeight: 400\n                  }}\n                >\n                  {`Error Retrieving ${\n                    !!node[childrenKey]?.length ? `Additional ` : ''\n                  }Children`}\n                </Typography>\n              </div>\n            )}\n          {Array.isArray(node[childrenKey])\n            ? node[childrenKey].map((n, i) => renderTree(n, depth + 1))\n            : null}\n        </BaseTreeMenuItem>\n      );\n    },\n    [\n      handleSelectedNode,\n      selectedNodeId,\n      selectedNodeIsHidden,\n      isCurrentActiveTree,\n      sidebarExpanded,\n      expanded,\n      tree,\n      selectedNodeParentId,\n      theme,\n      classes,\n      onDropNode,\n      treeViewMode,\n      menuIndex,\n      childrenKey\n    ]\n  );\n\n  const handleNodeExpansion = useCallback(\n    async (evt, nodeIds) => {\n      const treeCopy = cloneDeep(tree);\n      setExpanded(nodeIds);\n\n      const parentNode = searchTree(treeCopy, selectedNodeParentId);\n      const initialAllParentNodeIds = selectedNodeParentId\n        ? [selectedNodeParentId]\n        : [];\n      const allParentNodeIds = findAllParentIds(\n        treeCopy,\n        parentNode,\n        initialAllParentNodeIds\n      );\n      const selectedNodeShown = allParentNodeIds.every((id) =>\n        nodeIds.includes(id)\n      );\n      if (\n        isCurrentActiveTree &&\n        allParentNodeIds.length &&\n        !selectedNodeShown\n      ) {\n        setSelectedNodeIsHidden(true);\n      } else {\n        setSelectedNodeIsHidden(false);\n      }\n    },\n    [isCurrentActiveTree, tree, selectedNodeParentId]\n  );\n\n  const getExpandedRecursively = useCallback(\n    (tree) => {\n      if (!tree) return [];\n      return tree.reduce((expandedIds, item) => {\n        if (item?.isExpanded) {\n          expandedIds.push(item.id);\n        }\n        if (item && item[childrenKey]?.length) {\n          expandedIds = expandedIds.concat(\n            getExpandedRecursively(item[childrenKey])\n          );\n        }\n        return expandedIds;\n      }, []);\n    },\n    [childrenKey]\n  );\n\n  useEffect(() => {\n    setTree(menuItems);\n  }, [menuItems]);\n\n  useEffect(() => {\n    if (!tree) return;\n    if (firstRender.current) {\n      let expanded = [];\n      if (tree?.isExpanded) {\n        expanded.push(tree.id);\n      }\n      expanded = expanded.concat(getExpandedRecursively(tree[childrenKey]));\n      setExpanded(expanded);\n      firstRender.current = false;\n    }\n    // Do not reset expanded on subsequent updates\n  }, [getExpandedRecursively, tree, childrenKey]);\n\n  useEffect(() => {\n    if (!!searchTree(tree, selectedNodeId)) {\n      setIsCurrentActiveTree(true);\n    } else {\n      setIsCurrentActiveTree(false);\n    }\n  }, [tree, selectedNodeId]);\n\n  if (!expanded) {\n    return null;\n  }\n\n  return (\n    <TreeView\n      key={tree}\n      className={classes.root}\n      defaultCollapseIcon={\n        <FluentIcon\n          size='small'\n          component={CaretUpSolid8Icon}\n          style={{\n            color: lighten(theme.palette.primary.main, 0.5),\n            width: theme.spacing(1.5),\n            height: theme.spacing(1.5)\n          }}\n        />\n      }\n      expanded={expanded || []}\n      onNodeToggle={handleNodeExpansion}\n      defaultExpandIcon={\n        <FluentIcon\n          size='small'\n          component={CaretDownSolid8Icon}\n          style={{\n            color: lighten(theme.palette.primary.main, 0.5),\n            width: theme.spacing(1.5),\n            height: theme.spacing(1.5)\n          }}\n        />\n      }\n      selected={selectedNodeId}\n    >\n      {tree && renderTree(tree)}\n    </TreeView>\n  );\n};\n"],"mappings":"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"}

package/dist/BioCardWrapper-C6nBREs6.js

@@ -0,0 +1,513 @@
+import { t as FluentButton } from "./FluentButton-BexKrnAp.js";
+import { t as PrimaryActionHeader } from "./PrimaryActionHeader-DbGQNveI.js";
+import { t as AmbientCard } from "./AmbientCard-CLW4bPCu.js";
+import { t as fluentLibraryIcons } from "./LibraryData-D8Uai7Yd.js";
+import { t as useReadMetaData } from "./useReadMetaData-CiWx4MJr.js";
+import { t as FluentMenuListItem } from "./FluentMenuListItem-CvEx0IXI.js";
+import { t as AmbientGridTemplate } from "./AmbientGridTemplate-d8EoaQH7.js";
+import { t as TableColumnDefs } from "./TableColumnDefs-BpaOx60h.js";
+import { t as ActionsRenderer } from "./ActionsRenderer-B1ImXko3.js";
+import { t as BioCard } from "./BioCard-M1ZP7x1X.js";
+import { t as AddressListItem } from "./AddressListItem-Bd9OFX1z.js";
+import React, { useEffect, useMemo } from "react";
+import { Box, Grid } from "@material-ui/core";
+import { ChevronDownIcon } from "@fluentui/react-icons";
+import { MuiVegaLite } from "@material-vega/material-ui";
+
+//#region src/componentSystems/pageRenderer/wrappers/PrimaryActionHeaderWrapper.jsx
+const PrimaryActionHeaderWrapper = (props) => {
+	const { propsComponent } = props;
+	const { id, title, subheader } = useReadMetaData(propsComponent);
+	return /* @__PURE__ */ React.createElement(PrimaryActionHeader, {
+		title: title?.label || "",
+		buttonLabel: subheader?.label || "",
+		single: true,
+		grid: false
+	});
+};
+
+//#endregion
+//#region src/componentSystems/pageRenderer/wrappers/DisplayCardWrapper.jsx
+const DisplayCardWrapper = (props) => {
+	const { propsComponent, setSideSheetOpen, sideSheetOpen, setSideSheetComponent } = props;
+	return /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Box, {
+		mt: 2,
+		sx: {
+			width: "100%",
+			minWidth: "100%"
+		}
+	}, /* @__PURE__ */ React.createElement(AmbientCard, {
+		overrideStatusSuccess: "current",
+		overrideStatusError: "expired",
+		editEvent: () => {},
+		deleteEvent: () => {},
+		fullWidth: true
+	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentMenuListItem, {
+		value: 2,
+		label: "Text Issued",
+		arrow: false
+	}), /* @__PURE__ */ React.createElement(FluentMenuListItem, {
+		value: 3,
+		label: "Date Issued",
+		arrow: false
+	}), /* @__PURE__ */ React.createElement(FluentMenuListItem, {
+		value: 4,
+		label: "Valid Until",
+		arrow: false
+	}), /* @__PURE__ */ React.createElement(FluentButton, {
+		variant: "contained",
+		color: "secondary",
+		onClick: () => setSideSheetOpen(!sideSheetOpen)
+	}, "Test Button")))));
+};
+
+//#endregion
+//#region src/componentSystems/pageRenderer/wrappers/BarChartWrapper.jsx
+const BarChartWrapper = (props) => {
+	const { propsComponent } = props;
+	const { id, columnSize, values, encoding, x, y, xfield, yfield } = useReadMetaData(propsComponent);
+	return /* @__PURE__ */ React.createElement(Grid, {
+		item: true,
+		xs: columnSize?.xs,
+		sm: columnSize?.sm,
+		md: columnSize?.md,
+		key: id
+	}, /* @__PURE__ */ React.createElement(Box, {
+		mt: 2,
+		clone: true,
+		overflow: "hidden",
+		sx: {
+			width: "100%",
+			minWidth: "100%"
+		}
+	}, /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: "verticalBarChart",
+		color: "secondary",
+		background: "paper",
+		autoResize: true,
+		actions: false,
+		spec: {
+			$schema: "https://vega.github.io/schema/vega-lite/v4.json",
+			width: "container",
+			data: { values },
+			mark: "bar",
+			encoding: {
+				x: {
+					field: xfield,
+					type: "nominal",
+					axis: { ticks: false },
+					band: .5
+				},
+				y: {
+					field: yfield,
+					type: "quantitative",
+					axis: { format: "p" }
+				}
+			}
+		}
+	})));
+};
+
+//#endregion
+//#region src/componentSystems/pageRenderer/wrappers/HistogramWrapper.jsx
+const HistogramWrapper = (props) => {
+	const { propsComponent } = props;
+	const { id, columnSize, values, encoding, x, y, xfield, yfield } = useReadMetaData(propsComponent);
+	return /* @__PURE__ */ React.createElement(Grid, {
+		item: true,
+		xs: columnSize?.xs,
+		sm: columnSize?.sm,
+		md: columnSize?.md,
+		key: id
+	}, /* @__PURE__ */ React.createElement(Box, {
+		mt: 2,
+		clone: true,
+		overflow: "hidden",
+		sx: {
+			width: "100%",
+			minWidth: "100%"
+		}
+	}, /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: "histogram",
+		color: "secondary",
+		background: "paper",
+		autoResize: true,
+		actions: false,
+		spec: {
+			$schema: "https://vega.github.io/schema/vega/v5.json",
+			description: "An interactive histogram for visualizing a univariate distribution.",
+			width: 500,
+			height: 100,
+			padding: 5,
+			signals: [{
+				name: "binOffset",
+				value: 0,
+				bind: {
+					input: "range",
+					min: -.1,
+					max: .1
+				}
+			}, {
+				name: "binStep",
+				value: .1,
+				bind: {
+					input: "range",
+					min: .001,
+					max: .4,
+					step: .001
+				}
+			}],
+			data: [{
+				name: "points",
+				url: "data/normal-2d.json"
+			}, {
+				name: "binned",
+				source: "points",
+				transform: [{
+					type: "bin",
+					field: "u",
+					extent: [-1, 1],
+					anchor: { signal: "binOffset" },
+					step: { signal: "binStep" },
+					nice: false
+				}, {
+					type: "aggregate",
+					key: "bin0",
+					groupby: ["bin0", "bin1"],
+					fields: ["bin0"],
+					ops: ["count"],
+					as: ["count"]
+				}]
+			}],
+			scales: [{
+				name: "xscale",
+				type: "linear",
+				range: "width",
+				domain: [-1, 1]
+			}, {
+				name: "yscale",
+				type: "linear",
+				range: "height",
+				round: true,
+				domain: {
+					data: "binned",
+					field: "count"
+				},
+				zero: true,
+				nice: true
+			}],
+			axes: [{
+				orient: "bottom",
+				scale: "xscale",
+				zindex: 1
+			}, {
+				orient: "left",
+				scale: "yscale",
+				tickCount: 5,
+				zindex: 1
+			}],
+			marks: [{
+				type: "rect",
+				from: { data: "binned" },
+				encode: {
+					update: {
+						x: {
+							scale: "xscale",
+							field: "bin0"
+						},
+						x2: {
+							scale: "xscale",
+							field: "bin1",
+							offset: { signal: "binStep > 0.02 ? -0.5 : 0" }
+						},
+						y: {
+							scale: "yscale",
+							field: "count"
+						},
+						y2: {
+							scale: "yscale",
+							value: 0
+						},
+						fill: { value: "steelblue" }
+					},
+					hover: { fill: { value: "firebrick" } }
+				}
+			}, {
+				type: "rect",
+				from: { data: "points" },
+				encode: { enter: {
+					x: {
+						scale: "xscale",
+						field: "u"
+					},
+					width: { value: 1 },
+					y: {
+						value: 25,
+						offset: { signal: "height" }
+					},
+					height: { value: 5 },
+					fill: { value: "steelblue" },
+					fillOpacity: { value: .4 }
+				} }
+			}]
+		}
+	})));
+};
+
+//#endregion
+//#region src/componentSystems/pageRenderer/wrappers/DonutWrapper.jsx
+const DonutWrapper = (props) => {
+	const { propsComponent } = props;
+	const { id, columnSize, values, encoding, x, y, xfield, yfield } = useReadMetaData(propsComponent);
+	return /* @__PURE__ */ React.createElement(Grid, {
+		item: true,
+		xs: columnSize?.xs,
+		sm: columnSize?.sm,
+		md: columnSize?.md,
+		key: id
+	}, /* @__PURE__ */ React.createElement(Box, {
+		mt: 2,
+		clone: true,
+		overflow: "hidden",
+		sx: {
+			width: "100%",
+			minWidth: "100%"
+		}
+	}, /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: "verticalBarChart",
+		color: "secondary",
+		background: "paper",
+		autoResize: true,
+		actions: false,
+		spec: {
+			$schema: "https://vega.github.io/schema/vega-lite/v5.json",
+			description: "A simple donut chart with embedded data.",
+			data: { values },
+			mark: {
+				type: "arc",
+				innerRadius: 160
+			},
+			width: 350,
+			height: 350,
+			encoding: {
+				theta: {
+					field: "value",
+					type: "quantitative"
+				},
+				color: {
+					field: "category",
+					type: "nominal"
+				}
+			}
+		}
+	})));
+};
+const barChartWrapperProps = [{ structure: [
+	{
+		label: "Data1",
+		value: 0
+	},
+	{
+		label: "Data2",
+		value: 1
+	},
+	{
+		label: "Data3",
+		value: 0
+	},
+	{
+		label: "Data4",
+		value: 1
+	}
+] }];
+
+//#endregion
+//#region src/componentSystems/pageRenderer/wrappers/LineGraphWrapper.jsx
+const LineGraphWrapper = (props) => {
+	const { propsComponent } = props;
+	const { id, columnSize, x, y, values } = useReadMetaData(propsComponent);
+	return /* @__PURE__ */ React.createElement(Grid, {
+		item: true,
+		xs: columnSize?.xs,
+		sm: columnSize?.sm,
+		md: columnSize?.md,
+		key: id
+	}, /* @__PURE__ */ React.createElement(Box, {
+		mt: 2,
+		clone: true,
+		overflow: "hidden",
+		sx: {
+			width: "100%",
+			minWidth: "100%"
+		}
+	}, /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: "lineChart",
+		color: "secondary",
+		background: "paper",
+		autoResize: true,
+		actions: false,
+		spec: {
+			$schema: "https://vega.github.io/schema/vega-lite/v4.json",
+			description: "Values perdicted by the model",
+			width: "container",
+			data: { values },
+			mark: "line",
+			encoding: {
+				x: {
+					field: "a",
+					type: "ordinal"
+				},
+				y: {
+					field: "b",
+					type: "quantitative"
+				},
+				strokeDash: {
+					field: "predicted",
+					type: "nominal"
+				}
+			}
+		}
+	})));
+};
+
+//#endregion
+//#region src/componentSystems/pageRenderer/wrappers/AgGridSimpleWrapper.jsx
+const data = [
+	{
+		id: 1,
+		name: "Pre-School Swim Lessons",
+		tags: "Child",
+		deferredGL: "General Programs Deferred",
+		earnedGL: `Registered Swim Programs`,
+		start_date: "2022-07-23 13:10:11",
+		end_date: "2022-07-23 13:10:11",
+		status: "Published",
+		instructors: "Liam Atchison"
+	},
+	{
+		id: 2,
+		name: "Skating Lessons",
+		tags: "Child",
+		deferredGL: "General Programs Deferred",
+		earnedGL: `Registered Swim Programs`,
+		start_date: "2022-07-23 13:10:11",
+		end_date: "2022-07-23 13:10:11",
+		status: "Published",
+		instructors: "Luca Thomas"
+	},
+	{
+		id: 3,
+		name: "Skating Lessons",
+		tags: "Adult",
+		deferredGL: "General Programs Deferred",
+		earnedGL: `Registered Swim Programs`,
+		start_date: "2022-07-23 13:10:11",
+		end_date: "2022-07-23 13:10:11",
+		status: "Published",
+		instructors: "John Smith"
+	},
+	{
+		id: 4,
+		name: "Pre-School Swim Lessons",
+		tags: "Self-Pace",
+		deferredGL: "General Programs Deferred",
+		earnedGL: `Registered Swim Programs`,
+		start_date: "2022-07-23 13:10:11",
+		end_date: "2022-07-23 13:10:11",
+		status: "In Progress",
+		instructors: "Lucy May"
+	},
+	{
+		id: 5,
+		name: "Pre-School Swim Lessons",
+		tags: "Child",
+		deferredGL: "General Programs Deferred",
+		earnedGL: `Registered Swim Programs`,
+		start_date: "2022-08-23 13:10:11",
+		end_date: "2022-07-23 13:10:11",
+		status: "Pending",
+		instructors: "Matteo Thomas"
+	}
+];
+const groupData = [
+	{
+		groupItem: "instructors",
+		label: "Instructors",
+		value: "instructors"
+	},
+	{
+		groupItem: "tabs",
+		label: "Tabs",
+		value: "tabs"
+	},
+	{
+		groupItem: "name",
+		label: "Course Name",
+		value: "name"
+	},
+	{
+		groupItem: "status",
+		label: "Status",
+		value: "status"
+	},
+	{
+		groupItem: "start",
+		label: "Start Date",
+		value: "start"
+	}
+];
+const AgGridSimpleWrapper = (props) => {
+	const { propsComponent } = props;
+	const { id, columnSize, columnDefs, actionsList, values } = useReadMetaData(propsComponent);
+	const columnDefinitions = useMemo(() => {
+		if (columnDefs?.length) {
+			const newActionsList = actionsList?.map((actionItem) => {
+				return {
+					...actionItem,
+					icon: fluentLibraryIcons.find((x) => x.id === actionItem.icon)?.icon || actionItem.icon,
+					onClick: () => {}
+				};
+			});
+			return TableColumnDefs(columnDefs, newActionsList);
+		}
+		return [];
+	}, [actionsList, columnDefs]);
+	return /* @__PURE__ */ React.createElement(Grid, {
+		item: true,
+		xs: columnSize?.xs,
+		sm: columnSize?.sm,
+		md: columnSize?.md,
+		key: id
+	}, /* @__PURE__ */ React.createElement(AmbientGridTemplate, {
+		title: "Course List",
+		data: values,
+		columnDefs: columnDefinitions,
+		frameworkComponents: { actionsRenderer: ActionsRenderer },
+		groupingData: groupData
+	}));
+};
+
+//#endregion
+//#region src/componentSystems/pageRenderer/wrappers/BioCardWrapper.jsx
+const BioCardWrapper = (props) => {
+	const { id, propsComponent } = props;
+	const { columnSize } = useReadMetaData(propsComponent);
+	return /* @__PURE__ */ React.createElement(Grid, {
+		item: true,
+		xs: columnSize?.xs,
+		sm: columnSize?.sm,
+		md: columnSize?.md,
+		key: id
+	}, /* @__PURE__ */ React.createElement(BioCard, {
+		firstName: "Marlene",
+		lastName: "Smith",
+		avatar: "http://www.woman-themovie.org/wp-content/uploads/2020/02/AQALLAL_Sofia-W_78-FRANCE_24-FACIES-LVMH-CALLIGARO_Sandra-V1.jpg",
+		alt: "Marlene",
+		address: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AddressListItem, null, "123 Fake Street, Encinitas, CA, 92024"), /* @__PURE__ */ React.createElement(AddressListItem, null, " +1.767.815.8957 "), /* @__PURE__ */ React.createElement(AddressListItem, null, " marlene@smith.com ")),
+		copy: "Marlene Smith, 123 Fake Street, Encinitas, CA, 92024, +1.767.815.8957, marlene@smith.com  "
+	}, /* @__PURE__ */ React.createElement("h1", null, "Marlene Smith")));
+};
+
+//#endregion
+export { DonutWrapper as a, BarChartWrapper as c, LineGraphWrapper as i, DisplayCardWrapper as l, AgGridSimpleWrapper as n, barChartWrapperProps as o, data as r, HistogramWrapper as s, BioCardWrapper as t, PrimaryActionHeaderWrapper as u };
+//# sourceMappingURL=BioCardWrapper-C6nBREs6.js.map

package/dist/BioCardWrapper-C6nBREs6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BioCardWrapper-C6nBREs6.js","names":[],"sources":["../src/componentSystems/pageRenderer/wrappers/PrimaryActionHeaderWrapper.jsx","../src/componentSystems/pageRenderer/wrappers/DisplayCardWrapper.jsx","../src/componentSystems/pageRenderer/wrappers/BarChartWrapper.jsx","../src/componentSystems/pageRenderer/wrappers/HistogramWrapper.jsx","../src/componentSystems/pageRenderer/wrappers/DonutWrapper.jsx","../src/componentSystems/pageRenderer/wrappers/LineGraphWrapper.jsx","../src/componentSystems/pageRenderer/wrappers/AgGridSimpleWrapper.jsx","../src/componentSystems/pageRenderer/wrappers/BioCardWrapper.jsx"],"sourcesContent":["import React from 'react';\n//import { SubHeaderAction } from 'unity-fluent-library';\nimport { PrimaryActionHeader } from '../../../UI/utilityDisplay/utilityHeader/PrimaryActionHeader';\nimport { useReadMetaData } from '../hooks/useReadMetaData';\n\nexport const PrimaryActionHeaderWrapper = (props) => {\n  const { propsComponent } = props;\n  const { id, title, subheader } = useReadMetaData(propsComponent);\n\n  return (\n    // <SubHeaderAction key={id}>\n\n    // </SubHeaderAction>\n    <PrimaryActionHeader\n      title={title?.label || ''}\n      //subheader={subheader?.label || ''}\n      buttonLabel={subheader?.label || ''}\n      single={true}\n      grid={false}\n    />\n  );\n};\n","import React, { useEffect } from 'react';\nimport { AmbientCard } from '../../../UI/surfaces/cards/AmbientCard';\nimport { FluentMenuListItem } from '../../../UI/navigation/menus/FluentMenuListItem';\nimport { FluentIconButton } from '../../../UI/inputs/buttons/FluentIconButton';\nimport { FluentButton } from '../../../UI/inputs/buttons/FluentButton';\nimport { ChevronDownIcon } from '@fluentui/react-icons';\nimport { Grid, Box } from '@material-ui/core';\nimport { fluentLibraryIcons } from '../../../assets/unityIcons/LibraryData';\nimport { useReadMetaData } from '../hooks/useReadMetaData';\n\nexport const DisplayCardWrapper = (props) => {\n  const {\n    propsComponent,\n    setSideSheetOpen,\n    sideSheetOpen,\n    setSideSheetComponent\n  } = props;\n  // const { id, columnSize, title, label, status, button, secondaryButtons } =\n  //   useReadMetaData(propsComponent);\n\n  // useEffect(() => {\n  //   const { view } = button;\n\n  //   setSideSheetComponent({\n  //     id: view?.id,\n  //     component: view?.component,\n  //     propsComponent: view?.properties,\n  //   });\n  // }, [button, setSideSheetComponent]);\n\n  return (\n    <Grid\n      item\n      // xs={columnSize?.xs}\n      // sm={columnSize?.sm}\n      // md={columnSize?.md}\n      // key={id}\n    >\n      <Box mt={2} sx={{ width: '100%', minWidth: '100%' }}>\n        <AmbientCard\n          // title={title?.label}\n          // status={status?.label}\n          overrideStatusSuccess='current'\n          overrideStatusError='expired'\n          editEvent={() => {}}\n          deleteEvent={() => {}}\n          // label={label?.label}\n          fullWidth={true}\n        >\n          <div>\n            <FluentMenuListItem value={2} label='Text Issued' arrow={false} />\n            <FluentMenuListItem value={3} label='Date Issued' arrow={false} />\n            <FluentMenuListItem value={4} label='Valid Until' arrow={false} />\n\n            {/* {button && (\n              <FluentButton\n                variant=\"contained\"\n                color=\"secondary\"\n                onClick={() => setSideSheetOpen(!sideSheetOpen)}\n              >\n                {button?.label?.label}\n              </FluentButton>\n            )} */}\n\n            <FluentButton\n              variant='contained'\n              color='secondary'\n              onClick={() => setSideSheetOpen(!sideSheetOpen)}\n            >\n              Test Button\n            </FluentButton>\n\n            {/* {secondaryButtons &&\n              secondaryButtons.value?.map((button, index) => (\n                <FluentIconButton\n                  key={index}\n                  icon={\n                    fluentLibraryIcons.find(x => x.id === button.icon)?.icon ||\n                    ChevronDownIcon\n                  }\n                  style={{ width: '40px', height: '40px' }}\n                  size=\"small\"\n                  onClick={() => setSideSheetOpen(!sideSheetOpen)}\n                />\n              ))} */}\n          </div>\n        </AmbientCard>\n      </Box>\n    </Grid>\n  );\n};\n","import React from 'react';\nimport { Box, Grid } from '@material-ui/core';\nimport { MuiVegaLite } from '@material-vega/material-ui';\nimport { useReadMetaData } from '../hooks/useReadMetaData';\n\nexport const BarChartWrapper = props => {\n  const { propsComponent } = props;\n  const { id, columnSize, values, encoding, x, y, xfield, yfield } =\n    useReadMetaData(propsComponent);\n\n  return (\n    <Grid\n      item\n      xs={columnSize?.xs}\n      sm={columnSize?.sm}\n      md={columnSize?.md}\n      key={id}\n    >\n      <Box\n        mt={2}\n        clone\n        overflow=\"hidden\"\n        sx={{ width: '100%', minWidth: '100%' }}\n      >\n        <MuiVegaLite\n          variant=\"verticalBarChart\"\n          color=\"secondary\"\n          background=\"paper\"\n          autoResize\n          actions={false}\n          spec={{\n            $schema: 'https://vega.github.io/schema/vega-lite/v4.json',\n            width: 'container',\n            data: {\n              // values: [\n              //   { quarter: 'Q1', percent: 0.2 },\n              //   { quarter: 'Q2', percent: 0.28 },\n              //   { quarter: 'Q3', percent: 0.32 },\n              //   { quarter: 'Q4', percent: 0.39 },\n              // ],\n              values: values,\n            },\n            mark: 'bar',\n            //encoding: encoding,\n            encoding: {\n              x: {\n                field: xfield,\n                type: 'nominal',\n                axis: {\n                  ticks: false,\n                },\n                band: 0.5,\n              },\n              y: {\n                field: yfield,\n                type: 'quantitative',\n                axis: {\n                  format: 'p',\n                },\n              },\n            },\n          }}\n        />\n      </Box>\n    </Grid>\n  );\n};\n\nexport const barChartWrapperProps = [\n  {\n    structure: [\n      { label: 'Data1', value: 0 },\n      { label: 'Data2', value: 1 },\n      { label: 'Data3', value: 0 },\n      { label: 'Data4', value: 1 },\n    ],\n  },\n];\n","import React from 'react';\nimport { Box, Grid } from '@material-ui/core';\nimport { MuiVegaLite } from '@material-vega/material-ui';\nimport { useReadMetaData } from '../hooks/useReadMetaData';\n\nexport const HistogramWrapper = props => {\n  const { propsComponent } = props;\n  const { id, columnSize, values, encoding, x, y, xfield, yfield } =\n    useReadMetaData(propsComponent);\n\n  return (\n    <Grid\n      item\n      xs={columnSize?.xs}\n      sm={columnSize?.sm}\n      md={columnSize?.md}\n      key={id}\n    >\n      <Box\n        mt={2}\n        clone\n        overflow=\"hidden\"\n        sx={{ width: '100%', minWidth: '100%' }}\n      >\n        <MuiVegaLite\n          variant=\"histogram\"\n          color=\"secondary\"\n          background=\"paper\"\n          autoResize\n          actions={false}\n          spec={{\n            $schema: 'https://vega.github.io/schema/vega/v5.json',\n            description:\n              'An interactive histogram for visualizing a univariate distribution.',\n            width: 500,\n            height: 100,\n            padding: 5,\n\n            signals: [\n              {\n                name: 'binOffset',\n                value: 0,\n                bind: { input: 'range', min: -0.1, max: 0.1 },\n              },\n              {\n                name: 'binStep',\n                value: 0.1,\n                bind: { input: 'range', min: 0.001, max: 0.4, step: 0.001 },\n              },\n            ],\n\n            data: [\n              {\n                name: 'points',\n                url: 'data/normal-2d.json',\n              },\n              {\n                name: 'binned',\n                source: 'points',\n                transform: [\n                  {\n                    type: 'bin',\n                    field: 'u',\n                    extent: [-1, 1],\n                    anchor: { signal: 'binOffset' },\n                    step: { signal: 'binStep' },\n                    nice: false,\n                  },\n                  {\n                    type: 'aggregate',\n                    key: 'bin0',\n                    groupby: ['bin0', 'bin1'],\n                    fields: ['bin0'],\n                    ops: ['count'],\n                    as: ['count'],\n                  },\n                ],\n              },\n            ],\n\n            scales: [\n              {\n                name: 'xscale',\n                type: 'linear',\n                range: 'width',\n                domain: [-1, 1],\n              },\n              {\n                name: 'yscale',\n                type: 'linear',\n                range: 'height',\n                round: true,\n                domain: { data: 'binned', field: 'count' },\n                zero: true,\n                nice: true,\n              },\n            ],\n\n            axes: [\n              { orient: 'bottom', scale: 'xscale', zindex: 1 },\n              { orient: 'left', scale: 'yscale', tickCount: 5, zindex: 1 },\n            ],\n\n            marks: [\n              {\n                type: 'rect',\n                from: { data: 'binned' },\n                encode: {\n                  update: {\n                    x: { scale: 'xscale', field: 'bin0' },\n                    x2: {\n                      scale: 'xscale',\n                      field: 'bin1',\n                      offset: { signal: 'binStep > 0.02 ? -0.5 : 0' },\n                    },\n                    y: { scale: 'yscale', field: 'count' },\n                    y2: { scale: 'yscale', value: 0 },\n                    fill: { value: 'steelblue' },\n                  },\n                  hover: { fill: { value: 'firebrick' } },\n                },\n              },\n              {\n                type: 'rect',\n                from: { data: 'points' },\n                encode: {\n                  enter: {\n                    x: { scale: 'xscale', field: 'u' },\n                    width: { value: 1 },\n                    y: { value: 25, offset: { signal: 'height' } },\n                    height: { value: 5 },\n                    fill: { value: 'steelblue' },\n                    fillOpacity: { value: 0.4 },\n                  },\n                },\n              },\n            ],\n          }}\n        />\n      </Box>\n    </Grid>\n  );\n};\n","import React from 'react';\nimport { Box, Grid } from '@material-ui/core';\nimport { MuiVegaLite } from '@material-vega/material-ui';\nimport { useReadMetaData } from '../hooks/useReadMetaData';\n\nexport const DonutWrapper = props => {\n  const { propsComponent } = props;\n  const { id, columnSize, values, encoding, x, y, xfield, yfield } =\n    useReadMetaData(propsComponent);\n\n  return (\n    <Grid\n      item\n      xs={columnSize?.xs}\n      sm={columnSize?.sm}\n      md={columnSize?.md}\n      key={id}\n    >\n      <Box\n        mt={2}\n        clone\n        overflow=\"hidden\"\n        sx={{ width: '100%', minWidth: '100%' }}\n      >\n        <MuiVegaLite\n          variant=\"verticalBarChart\"\n          color=\"secondary\"\n          background=\"paper\"\n          autoResize\n          actions={false}\n          spec={{\n            $schema: 'https://vega.github.io/schema/vega-lite/v5.json',\n            description: 'A simple donut chart with embedded data.',\n            data: {\n              values: values,\n              // values: [\n              //   { category: 1, value: 4 },\n              //   { category: 2, value: 6 },\n              //   { category: 3, value: 10 },\n              //   { category: 4, value: 3 },\n              //   { category: 5, value: 7 },\n              //   { category: 6, value: 8 },\n              // ],\n            },\n            mark: { type: 'arc', innerRadius: 160 },\n            width: 350,\n            height: 350,\n            encoding: {\n              theta: { field: 'value', type: 'quantitative' },\n              color: { field: 'category', type: 'nominal' },\n            },\n          }}\n        />\n      </Box>\n    </Grid>\n  );\n};\n\nexport const barChartWrapperProps = [\n  {\n    structure: [\n      { label: 'Data1', value: 0 },\n      { label: 'Data2', value: 1 },\n      { label: 'Data3', value: 0 },\n      { label: 'Data4', value: 1 },\n    ],\n  },\n];\n","import React from 'react';\nimport { Grid, Box } from '@material-ui/core';\nimport { MuiVegaLite } from '@material-vega/material-ui';\nimport { useReadMetaData } from '../hooks/useReadMetaData';\n\nexport const LineGraphWrapper = props => {\n  const { propsComponent } = props;\n  const { id, columnSize, x, y, values } = useReadMetaData(propsComponent);\n\n  return (\n    <Grid\n      item\n      xs={columnSize?.xs}\n      sm={columnSize?.sm}\n      md={columnSize?.md}\n      key={id}\n    >\n      <Box\n        mt={2}\n        clone\n        overflow=\"hidden\"\n        sx={{ width: '100%', minWidth: '100%' }}\n      >\n        <MuiVegaLite\n          variant=\"lineChart\"\n          color=\"secondary\"\n          background=\"paper\"\n          autoResize\n          actions={false}\n          spec={{\n            $schema: 'https://vega.github.io/schema/vega-lite/v4.json',\n            description: 'Values perdicted by the model',\n            width: 'container',\n            data: {\n              // values: [\n              //   { a: 'A', b: 28, predicted: false },\n              //   { a: 'B', b: 55, predicted: false },\n              //   { a: 'D', b: 91, predicted: false },\n              //   { a: 'E', b: 81, predicted: false },\n              //   { a: 'E', b: 81, predicted: true },\n              //   { a: 'G', b: 19, predicted: true },\n              //   { a: 'H', b: 87, predicted: true },\n              // ],\n              values: values,\n            },\n            mark: 'line',\n            encoding: {\n              x: { field: 'a', type: 'ordinal' },\n              y: { field: 'b', type: 'quantitative' },\n              strokeDash: { field: 'predicted', type: 'nominal' },\n            },\n          }}\n        />\n      </Box>\n    </Grid>\n  );\n};\n","import React, { useMemo } from 'react';\nimport { Grid } from '@material-ui/core';\nimport { AmbientGridTemplate } from '../../../UI/templates/deprecated/AmbientGridTemplate/AmbientGridTemplate';\nimport { TableColumnDefs } from '../utils/TableColumnDefs';\nimport { fluentLibraryIcons } from '../../../assets/unityIcons/LibraryData';\nimport { useReadMetaData } from '../hooks/useReadMetaData';\nimport { ActionsRenderer } from '../../../UI/templates/ui/renderers/ActionsRenderer';\n\n// Demonstrative purpose\nexport const data = [\n  {\n    id: 1,\n    name: 'Pre-School Swim Lessons',\n    tags: 'Child',\n    deferredGL: 'General Programs Deferred',\n    earnedGL: `Registered Swim Programs`,\n    start_date: '2022-07-23 13:10:11',\n    end_date: '2022-07-23 13:10:11',\n    status: 'Published',\n    instructors: 'Liam Atchison'\n  },\n  {\n    id: 2,\n    name: 'Skating Lessons',\n    tags: 'Child',\n    deferredGL: 'General Programs Deferred',\n    earnedGL: `Registered Swim Programs`,\n    start_date: '2022-07-23 13:10:11',\n    end_date: '2022-07-23 13:10:11',\n    status: 'Published',\n    instructors: 'Luca Thomas'\n  },\n  {\n    id: 3,\n    name: 'Skating Lessons',\n    tags: 'Adult',\n    deferredGL: 'General Programs Deferred',\n    earnedGL: `Registered Swim Programs`,\n    start_date: '2022-07-23 13:10:11',\n    end_date: '2022-07-23 13:10:11',\n    status: 'Published',\n    instructors: 'John Smith'\n  },\n  {\n    id: 4,\n    name: 'Pre-School Swim Lessons',\n    tags: 'Self-Pace',\n    deferredGL: 'General Programs Deferred',\n    earnedGL: `Registered Swim Programs`,\n    start_date: '2022-07-23 13:10:11',\n    end_date: '2022-07-23 13:10:11',\n    status: 'In Progress',\n    instructors: 'Lucy May'\n  },\n  {\n    id: 5,\n    name: 'Pre-School Swim Lessons',\n    tags: 'Child',\n    deferredGL: 'General Programs Deferred',\n    earnedGL: `Registered Swim Programs`,\n    start_date: '2022-08-23 13:10:11',\n    end_date: '2022-07-23 13:10:11',\n    status: 'Pending',\n    instructors: 'Matteo Thomas'\n  }\n];\n\n// Demonstrative purpose\nconst groupData = [\n  { groupItem: 'instructors', label: 'Instructors', value: 'instructors' },\n  { groupItem: 'tabs', label: 'Tabs', value: 'tabs' },\n  { groupItem: 'name', label: 'Course Name', value: 'name' },\n  { groupItem: 'status', label: 'Status', value: 'status' },\n  { groupItem: 'start', label: 'Start Date', value: 'start' }\n];\n\nexport const AgGridSimpleWrapper = (props) => {\n  const { propsComponent } = props;\n  const { id, columnSize, columnDefs, actionsList, values } =\n    useReadMetaData(propsComponent);\n\n  const columnDefinitions = useMemo(() => {\n    if (columnDefs?.length) {\n      const newActionsList = actionsList?.map((actionItem) => {\n        return {\n          ...actionItem,\n          icon:\n            fluentLibraryIcons.find((x) => x.id === actionItem.icon)?.icon ||\n            actionItem.icon,\n          onClick: () => {}\n        };\n      });\n\n      return TableColumnDefs(columnDefs, newActionsList);\n    }\n    return [];\n  }, [actionsList, columnDefs]);\n\n  return (\n    <Grid\n      item\n      xs={columnSize?.xs}\n      sm={columnSize?.sm}\n      md={columnSize?.md}\n      key={id}\n    >\n      <AmbientGridTemplate\n        title='Course List'\n        data={values}\n        columnDefs={columnDefinitions}\n        frameworkComponents={{ actionsRenderer: ActionsRenderer }}\n        groupingData={groupData}\n      />\n    </Grid>\n  );\n};\n","import React from 'react';\nimport { Grid } from '@material-ui/core';\nimport { BioCard } from '../../../UI/surfaces/cards/BioCard';\nimport { AddressListItem } from '../../../UI/dataDisplay/address/AddressListItem';\nimport { useReadMetaData } from '../hooks/useReadMetaData';\nexport const BioCardWrapper = (props) => {\n  const { id, propsComponent } = props;\n  const { columnSize } = useReadMetaData(propsComponent);\n\n  return (\n    <Grid\n      item\n      xs={columnSize?.xs}\n      sm={columnSize?.sm}\n      md={columnSize?.md}\n      key={id}\n    >\n      <BioCard\n        firstName='Marlene'\n        lastName='Smith'\n        avatar='http://www.woman-themovie.org/wp-content/uploads/2020/02/AQALLAL_Sofia-W_78-FRANCE_24-FACIES-LVMH-CALLIGARO_Sandra-V1.jpg'\n        alt='Marlene'\n        address={\n          <>\n            <AddressListItem>\n              123 Fake Street, Encinitas, CA, 92024\n            </AddressListItem>\n            <AddressListItem> +1.767.815.8957 </AddressListItem>\n            <AddressListItem> marlene@smith.com </AddressListItem>\n          </>\n        }\n        copy='Marlene Smith, 123 Fake Street, Encinitas, CA, 92024, +1.767.815.8957, marlene@smith.com  '\n      >\n        <h1>Marlene Smith</h1>\n      </BioCard>\n    </Grid>\n  );\n};\n"],"mappings":"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"}

package/dist/Box-DJbia7lR.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Box } from "@material-ui/core";
+
+//#region src/UI/Box.jsx
+const Box$1 = (props) => {
+	return /* @__PURE__ */ React.createElement(Box, props);
+};
+
+//#endregion
+export { Box$1 as t };
+//# sourceMappingURL=Box-DJbia7lR.js.map

package/dist/Box-DJbia7lR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box-DJbia7lR.js","names":["Box","MuiBox"],"sources":["../src/UI/Box.jsx"],"sourcesContent":["import React from \"react\";\nimport { Box as MuiBox } from \"@material-ui/core\";\n\n// Please confirm with UI/UX team before using this as this is not recomended\nexport const Box = props => {\n  return (<MuiBox {...props}/>)\n}"],"mappings":";;;;AAIA,MAAaA,SAAM,UAAS;AAC1B,QAAQ,oCAACC,KAAW,MAAQ"}