udp-react-enterprise-component-library 25.18.1-beta.83 → 25.18.1-beta.85

package/dist/{FluentCell-F9eits6u.js.map → FluentCell-CuJJAwCD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentCell-F9eits6u.js","names":[],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentCell/index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Box, makeStyles, TableCell, Theme, useTheme, Tooltip } from '@material-ui/core';\nimport { format } from 'date-fns';\nimport { UnityFluentIcon } from '../../../../utilities/iconLibrary/UnityFluentIcon';\nimport { getIconFromName } from '../../../../utilities/tree/TreeUtilities';\nimport { StatusChip } from '../../status/StatusChip';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles<Theme, FluentCellProps>((theme) => ({\n  labelText: {\n    color: theme.palette.text.primary,\n    fontSize: '12px'\n  },\n  tableCell: {\n    fontSize: '12px',\n    letterSpacing: '0.4px',\n    fontWeight: (props) => (props?.bold ? 500 : 400)\n  },\n  unityIconWrapper: {\n    gap: theme.spacing(1)\n  }\n}));\n\n/* #region  CellUnityIcon */\n\ninterface CellUnityIconProps extends FluentCellProps {\n  icon: string;\n  size: string;\n  color: string;\n  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';\n  className?: string;\n}\n\nconst CellUnityIcon = (props: Partial<CellUnityIconProps>) => {\n  const theme = useTheme();\n  const {\n    icon = '',\n    size = 'large',\n    color = theme.palette.primary.main,\n    children\n  } = props;\n  const classes = useStyles(props as FluentCellProps);\n\n  return (\n    <FluentCell {...props}>\n      { /* @ts-ignore */ }\n      <Box display='flex' alignItems='center' className={classes.unityIconWrapper}>\n        <UnityFluentIcon\n          size={size}\n          color={color}\n          icon={getIconFromName(icon)}\n        />\n        {children && children}\n      </Box>\n    </FluentCell>\n  );\n};\n\n/* #endregion */\n\n/* #region  CellIcon */\n\ninterface CellImageProps extends FluentCellProps {\n  src: string;\n  alt: string;\n  title: string;\n  style?: object;\n  children: any;\n}\n\nconst CellImage = (props: CellImageProps) => (\n  <FluentCell {...props}>\n    <img src={props?.src} alt={props?.alt} style={props?.style} />\n    {props?.title}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellIcon */\n\ninterface CellIconProps extends FluentCellProps {\n  icon: any;\n  label: string;\n  style?: object;\n}\n\nconst CellIcon = (props: Partial<CellIconProps>) => (\n  <FluentCell {...props}>\n    <>\n      {props?.label ? (\n      // @ts-ignore\n        <Box display='flex' alignItems='center' style={{ gap: '8px' }}>\n      { /* @ts-ignore */ }\n          <Box>{props?.icon}</Box>\n          {props?.label}\n        </Box>\n      ) : (\n        props?.icon\n      )}\n      {props?.children}\n    </>\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellNumber */\n\ninterface CellNumberProps extends FluentCellProps {\n  decimals?: number | string;\n  children: any;\n}\n\nconst CellNumber = (props: CellNumberProps) => (\n  <FluentCell {...props}>\n    {Number(props?.children).toFixed(Number(props?.decimals ?? 2))}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellDate */\n\ninterface CellDateProps extends FluentCellProps {\n  format?: string;\n  children: any;\n}\n\nconst CellDate = (props: CellDateProps) => (\n  <FluentCell {...props}>\n    {format(new Date(props?.children), props?.format || 'MM/dd/yyyy')}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellCurrency */\n\ninterface CellCurrencyProps extends FluentCellProps {\n  currencySymbol?: string;\n  children: any;\n}\n\nconst CellCurrency = (props: CellCurrencyProps) => (\n  <FluentCell {...props}>\n    {props?.currencySymbol || '$'}\n    {props?.children}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellText */\n\ninterface CellTextProps extends FluentCellProps {\n  children: any;\n}\n\nconst CellText = (props: CellTextProps) => (\n  <FluentCell {...props}>{props.children}</FluentCell>\n);\n\n/* #endregion */\n\n/* #region  Chip */\n\ninterface CellChipProps extends FluentCellProps {\n  status?: string;\n  size?: string;\n  children: any;\n}\n\nconst CellChip = (props: CellChipProps) => (\n  <FluentCell {...props}>\n    {/* @ts-ignore */}\n    <StatusChip\n      status={props?.status || 'success'}\n      label={props?.children}\n    />\n  </FluentCell>\n);\n/* #endregion */\n\ninterface FluentCellProps {\n  scope?: string;\n  bold?: boolean;\n  style?: object;\n  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';\n  children?: ReactNode;\n  className?: string;\n  colSpan?: number;\n  tooltip?: string;\n}\n\nconst FluentCell = (props: FluentCellProps) => {\n  const classes = useStyles(props);\n  const { scope = 'row', style, align, colSpan, className, tooltip, children } = props;\n\n  const cellContent = children;\n\n  return (\n    <TableCell\n      scope={scope}\n      className={clsx(classes.tableCell, className)}\n      style={style}\n      align={align}\n      colSpan={colSpan}\n    >\n      {tooltip ? (\n        <Tooltip title={tooltip || ''} children={<span>{cellContent || ''}</span>} />\n      ) : (\n        cellContent\n      )}\n    </TableCell>\n  );\n};\n\nFluentCell.UnityIcon = CellUnityIcon;\nFluentCell.Icon = CellIcon;\nFluentCell.Number = CellNumber;\nFluentCell.Text = CellText;\nFluentCell.Currency = CellCurrency;\nFluentCell.Date = CellDate;\nFluentCell.Chip = CellChip;\nFluentCell.Image = CellImage;\n\nexport default FluentCell;\n"],"mappings":";;;;;;;;;AAQA,MAAM,YAAY,YAAoC,WAAW;CAC/D,WAAW;EACT,OAAO,MAAM,QAAQ,KAAK;EAC1B,UAAU;EACX;CACD,WAAW;EACT,UAAU;EACV,eAAe;EACf,aAAa,UAAW,OAAO,OAAO,MAAM;EAC7C;CACD,kBAAkB,EAChB,KAAK,MAAM,QAAQ,EAAE,EACtB;CACF,EAAE;AAYH,MAAM,iBAAiB,UAAuC;CAC5D,MAAM,QAAQ,UAAU;CACxB,MAAM,EACJ,OAAO,IACP,OAAO,SACP,QAAQ,MAAM,QAAQ,QAAQ,MAC9B,aACE;CACJ,MAAM,UAAU,UAAU,MAAyB;AAEnD,QACE,oCAAC,YAAe,OAEd,oCAAC;EAAI,SAAQ;EAAO,YAAW;EAAS,WAAW,QAAQ;IACzD,oCAAC;EACO;EACC;EACP,MAAM,gBAAgB,KAAK;GAC3B,EACD,YAAY,SACT,CACK;;AAgBjB,MAAM,aAAa,UACjB,oCAAC,YAAe,OACd,oCAAC;CAAI,KAAK,OAAO;CAAK,KAAK,OAAO;CAAK,OAAO,OAAO;EAAS,EAC7D,OAAO,MACG;AAaf,MAAM,YAAY,UAChB,oCAAC,YAAe,OACd,0DACG,OAAO,QAEN,oCAAC;CAAI,SAAQ;CAAO,YAAW;CAAS,OAAO,EAAE,KAAK,OAAO;GAE3D,oCAAC,WAAK,OAAO,KAAW,EACvB,OAAO,MACJ,GAEN,OAAO,MAER,OAAO,SACP,CACQ;AAYf,MAAM,cAAc,UAClB,oCAAC,YAAe,OACb,OAAO,OAAO,SAAS,CAAC,QAAQ,OAAO,OAAO,YAAY,EAAE,CAAC,CACnD;AAYf,MAAM,YAAY,UAChB,oCAAC,YAAe,OACb,OAAO,IAAI,KAAK,OAAO,SAAS,EAAE,OAAO,UAAU,aAAa,CACtD;AAYf,MAAM,gBAAgB,UACpB,oCAAC,YAAe,OACb,OAAO,kBAAkB,KACzB,OAAO,SACG;AAWf,MAAM,YAAY,UAChB,oCAAC,YAAe,OAAQ,MAAM,SAAsB;AAatD,MAAM,YAAY,UAChB,oCAAC,YAAe,OAEd,oCAAC;CACC,QAAQ,OAAO,UAAU;CACzB,OAAO,OAAO;EACd,CACS;AAef,MAAM,cAAc,UAA2B;CAC7C,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,QAAQ,OAAO,OAAO,OAAO,SAAS,WAAW,SAAS,aAAa;CAE/E,MAAM,cAAc;AAEpB,QACE,oCAAC;EACQ;EACP,WAAW,KAAK,QAAQ,WAAW,UAAU;EACtC;EACA;EACE;IAER,UACC,oCAAC;EAAQ,OAAO,WAAW;EAAI,UAAU,oCAAC,cAAM,eAAe,GAAU;GAAI,GAE7E,YAEQ;;AAIhB,WAAW,YAAY;AACvB,WAAW,OAAO;AAClB,WAAW,SAAS;AACpB,WAAW,OAAO;AAClB,WAAW,WAAW;AACtB,WAAW,OAAO;AAClB,WAAW,OAAO;AAClB,WAAW,QAAQ;AAEnB,yBAAe"}
+{"version":3,"file":"FluentCell-CuJJAwCD.js","names":[],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentCell/index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Box, makeStyles, TableCell, Theme, useTheme, Tooltip } from '@material-ui/core';\nimport { format } from 'date-fns';\nimport { UnityFluentIcon } from '../../../../utilities/iconLibrary/UnityFluentIcon';\nimport { getIconFromName } from '../../../../utilities/tree/TreeUtilities';\nimport { StatusChip } from '../../status/StatusChip';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles<Theme, FluentCellProps>((theme) => ({\n  labelText: {\n    color: theme.palette.text.primary,\n    fontSize: '12px'\n  },\n  tableCell: {\n    fontSize: '12px',\n    letterSpacing: '0.4px',\n    fontWeight: (props) => (props?.bold ? 500 : 400)\n  },\n  unityIconWrapper: {\n    gap: theme.spacing(1)\n  }\n}));\n\n/* #region  CellUnityIcon */\n\ninterface CellUnityIconProps extends FluentCellProps {\n  icon: string;\n  size: string;\n  color: string;\n  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';\n  className?: string;\n}\n\nconst CellUnityIcon = (props: Partial<CellUnityIconProps>) => {\n  const theme = useTheme();\n  const {\n    icon = '',\n    size = 'large',\n    color = theme.palette.primary.main,\n    children\n  } = props;\n  const classes = useStyles(props as FluentCellProps);\n\n  return (\n    <FluentCell {...props}>\n      { /* @ts-ignore */ }\n      <Box display='flex' alignItems='center' className={classes.unityIconWrapper}>\n        <UnityFluentIcon\n          size={size}\n          color={color}\n          icon={getIconFromName(icon)}\n        />\n        {children && children}\n      </Box>\n    </FluentCell>\n  );\n};\n\n/* #endregion */\n\n/* #region  CellIcon */\n\ninterface CellImageProps extends FluentCellProps {\n  src: string;\n  alt: string;\n  title: string;\n  style?: object;\n  children: any;\n}\n\nconst CellImage = (props: CellImageProps) => (\n  <FluentCell {...props}>\n    <img src={props?.src} alt={props?.alt} style={props?.style} />\n    {props?.title}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellIcon */\n\ninterface CellIconProps extends FluentCellProps {\n  icon: any;\n  label: string;\n  style?: object;\n}\n\nconst CellIcon = (props: Partial<CellIconProps>) => (\n  <FluentCell {...props}>\n    <>\n      {props?.label ? (\n      // @ts-ignore\n        <Box display='flex' alignItems='center' style={{ gap: '8px' }}>\n      { /* @ts-ignore */ }\n          <Box>{props?.icon}</Box>\n          {props?.label}\n        </Box>\n      ) : (\n        props?.icon\n      )}\n      {props?.children}\n    </>\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellNumber */\n\ninterface CellNumberProps extends FluentCellProps {\n  decimals?: number | string;\n  children: any;\n}\n\nconst CellNumber = (props: CellNumberProps) => (\n  <FluentCell {...props}>\n    {Number(props?.children).toFixed(Number(props?.decimals ?? 2))}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellDate */\n\ninterface CellDateProps extends FluentCellProps {\n  format?: string;\n  children: any;\n}\n\nconst CellDate = (props: CellDateProps) => (\n  <FluentCell {...props}>\n    {format(new Date(props?.children), props?.format || 'MM/dd/yyyy')}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellCurrency */\n\ninterface CellCurrencyProps extends FluentCellProps {\n  currencySymbol?: string;\n  children: any;\n}\n\nconst CellCurrency = (props: CellCurrencyProps) => (\n  <FluentCell {...props}>\n    {props?.currencySymbol || '$'}\n    {props?.children}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellText */\n\ninterface CellTextProps extends FluentCellProps {\n  children: any;\n}\n\nconst CellText = (props: CellTextProps) => (\n  <FluentCell {...props}>{props.children}</FluentCell>\n);\n\n/* #endregion */\n\n/* #region  Chip */\n\ninterface CellChipProps extends FluentCellProps {\n  status?: string;\n  size?: string;\n  children: any;\n}\n\nconst CellChip = (props: CellChipProps) => (\n  <FluentCell {...props}>\n    {/* @ts-ignore */}\n    <StatusChip\n      status={props?.status || 'success'}\n      label={props?.children}\n    />\n  </FluentCell>\n);\n/* #endregion */\n\ninterface FluentCellProps {\n  scope?: string;\n  bold?: boolean;\n  style?: object;\n  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';\n  children?: ReactNode;\n  className?: string;\n  colSpan?: number;\n  tooltip?: string;\n}\n\nconst FluentCell = (props: FluentCellProps) => {\n  const classes = useStyles(props);\n  const { scope = 'row', style, align, colSpan, className, tooltip, children } = props;\n\n  const cellContent = children;\n\n  return (\n    <TableCell\n      scope={scope}\n      className={clsx(classes.tableCell, className)}\n      style={style}\n      align={align}\n      colSpan={colSpan}\n    >\n      {tooltip ? (\n        <Tooltip title={tooltip || ''} children={<span>{cellContent || ''}</span>} />\n      ) : (\n        cellContent\n      )}\n    </TableCell>\n  );\n};\n\nFluentCell.UnityIcon = CellUnityIcon;\nFluentCell.Icon = CellIcon;\nFluentCell.Number = CellNumber;\nFluentCell.Text = CellText;\nFluentCell.Currency = CellCurrency;\nFluentCell.Date = CellDate;\nFluentCell.Chip = CellChip;\nFluentCell.Image = CellImage;\n\nexport default FluentCell;\n"],"mappings":";;;;;;;;;AAQA,MAAM,YAAY,YAAoC,WAAW;CAC/D,WAAW;EACT,OAAO,MAAM,QAAQ,KAAK;EAC1B,UAAU;EACX;CACD,WAAW;EACT,UAAU;EACV,eAAe;EACf,aAAa,UAAW,OAAO,OAAO,MAAM;EAC7C;CACD,kBAAkB,EAChB,KAAK,MAAM,QAAQ,EAAE,EACtB;CACF,EAAE;AAYH,MAAM,iBAAiB,UAAuC;CAC5D,MAAM,QAAQ,UAAU;CACxB,MAAM,EACJ,OAAO,IACP,OAAO,SACP,QAAQ,MAAM,QAAQ,QAAQ,MAC9B,aACE;CACJ,MAAM,UAAU,UAAU,MAAyB;AAEnD,QACE,oCAAC,YAAe,OAEd,oCAAC;EAAI,SAAQ;EAAO,YAAW;EAAS,WAAW,QAAQ;IACzD,oCAAC;EACO;EACC;EACP,MAAM,gBAAgB,KAAK;GAC3B,EACD,YAAY,SACT,CACK;;AAgBjB,MAAM,aAAa,UACjB,oCAAC,YAAe,OACd,oCAAC;CAAI,KAAK,OAAO;CAAK,KAAK,OAAO;CAAK,OAAO,OAAO;EAAS,EAC7D,OAAO,MACG;AAaf,MAAM,YAAY,UAChB,oCAAC,YAAe,OACd,0DACG,OAAO,QAEN,oCAAC;CAAI,SAAQ;CAAO,YAAW;CAAS,OAAO,EAAE,KAAK,OAAO;GAE3D,oCAAC,WAAK,OAAO,KAAW,EACvB,OAAO,MACJ,GAEN,OAAO,MAER,OAAO,SACP,CACQ;AAYf,MAAM,cAAc,UAClB,oCAAC,YAAe,OACb,OAAO,OAAO,SAAS,CAAC,QAAQ,OAAO,OAAO,YAAY,EAAE,CAAC,CACnD;AAYf,MAAM,YAAY,UAChB,oCAAC,YAAe,OACb,OAAO,IAAI,KAAK,OAAO,SAAS,EAAE,OAAO,UAAU,aAAa,CACtD;AAYf,MAAM,gBAAgB,UACpB,oCAAC,YAAe,OACb,OAAO,kBAAkB,KACzB,OAAO,SACG;AAWf,MAAM,YAAY,UAChB,oCAAC,YAAe,OAAQ,MAAM,SAAsB;AAatD,MAAM,YAAY,UAChB,oCAAC,YAAe,OAEd,oCAAC;CACC,QAAQ,OAAO,UAAU;CACzB,OAAO,OAAO;EACd,CACS;AAef,MAAM,cAAc,UAA2B;CAC7C,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,QAAQ,OAAO,OAAO,OAAO,SAAS,WAAW,SAAS,aAAa;CAE/E,MAAM,cAAc;AAEpB,QACE,oCAAC;EACQ;EACP,WAAW,KAAK,QAAQ,WAAW,UAAU;EACtC;EACA;EACE;IAER,UACC,oCAAC;EAAQ,OAAO,WAAW;EAAI,UAAU,oCAAC,cAAM,eAAe,GAAU;GAAI,GAE7E,YAEQ;;AAIhB,WAAW,YAAY;AACvB,WAAW,OAAO;AAClB,WAAW,SAAS;AACpB,WAAW,OAAO;AAClB,WAAW,WAAW;AACtB,WAAW,OAAO;AAClB,WAAW,OAAO;AAClB,WAAW,QAAQ;AAEnB,yBAAe"}

package/dist/{FluentDataTable-BSQ_EHJX.js → FluentDataTable-CYNp3-qT.js}

@@ -1,7 +1,7 @@
-import { t as FluentBody_default } from "./FluentBody-CBqwLzTG.js";
-import { t as FluentCell_default } from "./FluentCell-F9eits6u.js";
-import { t as FluentHead_default } from "./FluentHead-C1bs_iJK.js";
-import { t as FluentRow_default } from "./FluentRow-C_YJYbQ5.js";
+import { t as FluentBody_default } from "./FluentBody-C_2uP08Y.js";
+import { t as FluentCell_default } from "./FluentCell-CuJJAwCD.js";
+import { t as FluentHead_default } from "./FluentHead-B9oIMLR1.js";
+import { t as FluentRow_default } from "./FluentRow-BDiPXAgx.js";
 import React from "react";
 import { Table, TableContainer, makeStyles } from "@material-ui/core";
 
@@ -27,4 +27,4 @@ FluentDataTable.FluentRow = FluentRow_default;
 
 //#endregion
 export { FluentDataTable as t };
-//# sourceMappingURL=FluentDataTable-BSQ_EHJX.js.map
+//# sourceMappingURL=FluentDataTable-CYNp3-qT.js.map

package/dist/{FluentDataTable-BSQ_EHJX.js.map → FluentDataTable-CYNp3-qT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentDataTable-BSQ_EHJX.js","names":["FluentHead","FluentBody","FluentCell","FluentRow"],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentDataTable.tsx"],"sourcesContent":["import { Size, Table, TableContainer, makeStyles } from '@material-ui/core';\nimport React, { ReactElement, ReactNode } from 'react';\nimport FluentBody from './FluentBody';\nimport FluentCell from './FluentCell';\nimport FluentHead from './FluentHead';\nimport FluentRow from './FluentRow';\n\ninterface FluentDataTableProps {\n  style?: object;\n  size?: Size | undefined;\n  children: ReactNode;\n  stickyHeader?: boolean;\n  containerMaxHeight?: string | number;\n}\n\ntype FluentDataTableComponent = React.FC<FluentDataTableProps> & {\n  FluentHead: typeof FluentHead;\n  FluentBody: typeof FluentBody;\n  FluentCell: typeof FluentCell;\n  FluentRow: typeof FluentRow;\n};\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    maxHeight: (props: any) => props?.containerMaxHeight\n  }\n}));\n\nexport const FluentDataTable = ((props: FluentDataTableProps): ReactElement => {\n  const { size = 'small', style, stickyHeader = false, containerMaxHeight } = props;\n  const classes = useStyles({ containerMaxHeight });\n  return (\n    <TableContainer\n      style={{ maxHeight: containerMaxHeight, height: '100%'}}\n    >\n      <Table\n        aria-label='simple table'\n        size={size}\n        style={style}\n        stickyHeader={stickyHeader}\n      >\n        {props?.children}\n      </Table>\n    </TableContainer>\n  );\n}) as FluentDataTableComponent;\n\nFluentDataTable.FluentHead = FluentHead;\nFluentDataTable.FluentBody = FluentBody;\nFluentDataTable.FluentCell = FluentCell;\nFluentDataTable.FluentRow = FluentRow;\n"],"mappings":";;;;;;;;AAsBA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM,EACJ,YAAY,UAAe,OAAO,oBACnC,EACF,EAAE;AAEH,MAAa,oBAAoB,UAA8C;CAC7E,MAAM,EAAE,OAAO,SAAS,OAAO,eAAe,OAAO,uBAAuB;AAC5D,WAAU,EAAE,oBAAoB,CAAC;AACjD,QACE,oCAAC,kBACC,OAAO;EAAE,WAAW;EAAoB,QAAQ;EAAO,IAEvD,oCAAC;EACC,cAAW;EACL;EACC;EACO;IAEb,OAAO,SACF,CACO;;AAIrB,gBAAgB,aAAaA;AAC7B,gBAAgB,aAAaC;AAC7B,gBAAgB,aAAaC;AAC7B,gBAAgB,YAAYC"}
+{"version":3,"file":"FluentDataTable-CYNp3-qT.js","names":["FluentHead","FluentBody","FluentCell","FluentRow"],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentDataTable.tsx"],"sourcesContent":["import { Size, Table, TableContainer, makeStyles } from '@material-ui/core';\nimport React, { ReactElement, ReactNode } from 'react';\nimport FluentBody from './FluentBody';\nimport FluentCell from './FluentCell';\nimport FluentHead from './FluentHead';\nimport FluentRow from './FluentRow';\n\ninterface FluentDataTableProps {\n  style?: object;\n  size?: Size | undefined;\n  children: ReactNode;\n  stickyHeader?: boolean;\n  containerMaxHeight?: string | number;\n}\n\ntype FluentDataTableComponent = React.FC<FluentDataTableProps> & {\n  FluentHead: typeof FluentHead;\n  FluentBody: typeof FluentBody;\n  FluentCell: typeof FluentCell;\n  FluentRow: typeof FluentRow;\n};\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    maxHeight: (props: any) => props?.containerMaxHeight\n  }\n}));\n\nexport const FluentDataTable = ((props: FluentDataTableProps): ReactElement => {\n  const { size = 'small', style, stickyHeader = false, containerMaxHeight } = props;\n  const classes = useStyles({ containerMaxHeight });\n  return (\n    <TableContainer\n      style={{ maxHeight: containerMaxHeight, height: '100%'}}\n    >\n      <Table\n        aria-label='simple table'\n        size={size}\n        style={style}\n        stickyHeader={stickyHeader}\n      >\n        {props?.children}\n      </Table>\n    </TableContainer>\n  );\n}) as FluentDataTableComponent;\n\nFluentDataTable.FluentHead = FluentHead;\nFluentDataTable.FluentBody = FluentBody;\nFluentDataTable.FluentCell = FluentCell;\nFluentDataTable.FluentRow = FluentRow;\n"],"mappings":";;;;;;;;AAsBA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM,EACJ,YAAY,UAAe,OAAO,oBACnC,EACF,EAAE;AAEH,MAAa,oBAAoB,UAA8C;CAC7E,MAAM,EAAE,OAAO,SAAS,OAAO,eAAe,OAAO,uBAAuB;AAC5D,WAAU,EAAE,oBAAoB,CAAC;AACjD,QACE,oCAAC,kBACC,OAAO;EAAE,WAAW;EAAoB,QAAQ;EAAO,IAEvD,oCAAC;EACC,cAAW;EACL;EACC;EACO;IAEb,OAAO,SACF,CACO;;AAIrB,gBAAgB,aAAaA;AAC7B,gBAAgB,aAAaC;AAC7B,gBAAgB,aAAaC;AAC7B,gBAAgB,YAAYC"}

package/dist/{FluentDisplayNumbers-C-zCWHot.js → FluentDisplayNumbers-BR-gZN5l.js}

@@ -48,4 +48,4 @@ var FluentDisplayNumbers_default = FluentDisplayNumbers;
 
 //#endregion
 export { FluentDisplayNumbers_default as t };
-//# sourceMappingURL=FluentDisplayNumbers-C-zCWHot.js.map
+//# sourceMappingURL=FluentDisplayNumbers-BR-gZN5l.js.map

package/dist/{FluentDisplayNumbers-C-zCWHot.js.map → FluentDisplayNumbers-BR-gZN5l.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentDisplayNumbers-C-zCWHot.js","names":[],"sources":["../src/UI/widgets/FluentComponents/atoms/FluentDisplayNumbers.jsx"],"sourcesContent":["import React from 'react';\nimport { Avatar, Typography, makeStyles } from '@material-ui/core';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      display: 'flex',\n      flexDirection: 'row',\n    },\n    regular: {},\n    small: {},\n    number: {\n      '$regular &': {\n        fontSize: '4rem',\n      },\n      '$small &': {\n        fontSize: 30,\n      },\n    },\n    unit: {\n      marginTop: theme.spacing(5),\n      width: 25,\n      height: 25,\n      '$small &': {\n        marginTop: '16px',\n        width: '16px',\n        height: '16px',\n        '& .MuiTypography-subtitle1': {\n          fontSize: '0.7rem',\n        },\n      },\n    },\n    unitValue: {\n      marginTop: -1.75,\n    },\n  }),\n  { name: 'FluentDisplayNumbers' }\n);\n\nconst FluentDisplayNumbers = props => {\n  const classes = useStyles();\n  const { small, number: rawNumber } = props;\n\n  // TODO: Revisit below after Tampa Demo\n  let no = [rawNumber, null];\n  if (rawNumber > 1_000_000) {\n    //no = [Math.floor(rawNumber / 1_000_000), 'M'];\n    let newNumber = rawNumber / 1_000_000;\n    no = [Math.round(newNumber * 10) / 10, 'M'];\n  } else if (rawNumber > 1_000) {\n    //no = [Math.floor(rawNumber / 1_000), 'k'];\n    let newNumber = rawNumber / 1_000;\n    no = [Math.round(newNumber * 10) / 10, 'k'];\n  }\n  const [number, unit] = no;\n\n  return (\n    <div\n      className={clsx(classes.root, small ? classes.small : classes.regular)}\n    >\n      <Typography className={classes.number}>{number}</Typography>\n      {unit && (\n        <Avatar className={classes.unit}>\n          <Typography variant=\"subtitle1\" className={classes.unitValue}>\n            {unit}\n          </Typography>\n        </Avatar>\n      )}\n    </div>\n  );\n};\n\nexport default FluentDisplayNumbers;\n"],"mappings":";;;;;AAIA,MAAM,YAAY,YAChB,WAAU;CACR,MAAM;EACJ,SAAS;EACT,eAAe;EAChB;CACD,SAAS,EAAE;CACX,OAAO,EAAE;CACT,QAAQ;EACN,cAAc,EACZ,UAAU,QACX;EACD,YAAY,EACV,UAAU,IACX;EACF;CACD,MAAM;EACJ,WAAW,MAAM,QAAQ,EAAE;EAC3B,OAAO;EACP,QAAQ;EACR,YAAY;GACV,WAAW;GACX,OAAO;GACP,QAAQ;GACR,8BAA8B,EAC5B,UAAU,UACX;GACF;EACF;CACD,WAAW,EACT,WAAW,OACZ;CACF,GACD,EAAE,MAAM,wBAAwB,CACjC;AAED,MAAM,wBAAuB,UAAS;CACpC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,OAAO,QAAQ,cAAc;CAGrC,IAAI,KAAK,CAAC,WAAW,KAAK;AAC1B,KAAI,YAAY,KAAW;EAEzB,IAAI,YAAY,YAAY;AAC5B,OAAK,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;YAClC,YAAY,KAAO;EAE5B,IAAI,YAAY,YAAY;AAC5B,OAAK,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;;CAE7C,MAAM,CAAC,QAAQ,QAAQ;AAEvB,QACE,oCAAC,SACC,WAAW,KAAK,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ,IAEtE,oCAAC,cAAW,WAAW,QAAQ,UAAS,OAAoB,EAC3D,QACC,oCAAC,UAAO,WAAW,QAAQ,QACzB,oCAAC;EAAW,SAAQ;EAAY,WAAW,QAAQ;IAChD,KACU,CACN,CAEP;;AAIV,mCAAe"}
+{"version":3,"file":"FluentDisplayNumbers-BR-gZN5l.js","names":[],"sources":["../src/UI/widgets/FluentComponents/atoms/FluentDisplayNumbers.jsx"],"sourcesContent":["import React from 'react';\nimport { Avatar, Typography, makeStyles } from '@material-ui/core';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      display: 'flex',\n      flexDirection: 'row',\n    },\n    regular: {},\n    small: {},\n    number: {\n      '$regular &': {\n        fontSize: '4rem',\n      },\n      '$small &': {\n        fontSize: 30,\n      },\n    },\n    unit: {\n      marginTop: theme.spacing(5),\n      width: 25,\n      height: 25,\n      '$small &': {\n        marginTop: '16px',\n        width: '16px',\n        height: '16px',\n        '& .MuiTypography-subtitle1': {\n          fontSize: '0.7rem',\n        },\n      },\n    },\n    unitValue: {\n      marginTop: -1.75,\n    },\n  }),\n  { name: 'FluentDisplayNumbers' }\n);\n\nconst FluentDisplayNumbers = props => {\n  const classes = useStyles();\n  const { small, number: rawNumber } = props;\n\n  // TODO: Revisit below after Tampa Demo\n  let no = [rawNumber, null];\n  if (rawNumber > 1_000_000) {\n    //no = [Math.floor(rawNumber / 1_000_000), 'M'];\n    let newNumber = rawNumber / 1_000_000;\n    no = [Math.round(newNumber * 10) / 10, 'M'];\n  } else if (rawNumber > 1_000) {\n    //no = [Math.floor(rawNumber / 1_000), 'k'];\n    let newNumber = rawNumber / 1_000;\n    no = [Math.round(newNumber * 10) / 10, 'k'];\n  }\n  const [number, unit] = no;\n\n  return (\n    <div\n      className={clsx(classes.root, small ? classes.small : classes.regular)}\n    >\n      <Typography className={classes.number}>{number}</Typography>\n      {unit && (\n        <Avatar className={classes.unit}>\n          <Typography variant=\"subtitle1\" className={classes.unitValue}>\n            {unit}\n          </Typography>\n        </Avatar>\n      )}\n    </div>\n  );\n};\n\nexport default FluentDisplayNumbers;\n"],"mappings":";;;;;AAIA,MAAM,YAAY,YAChB,WAAU;CACR,MAAM;EACJ,SAAS;EACT,eAAe;EAChB;CACD,SAAS,EAAE;CACX,OAAO,EAAE;CACT,QAAQ;EACN,cAAc,EACZ,UAAU,QACX;EACD,YAAY,EACV,UAAU,IACX;EACF;CACD,MAAM;EACJ,WAAW,MAAM,QAAQ,EAAE;EAC3B,OAAO;EACP,QAAQ;EACR,YAAY;GACV,WAAW;GACX,OAAO;GACP,QAAQ;GACR,8BAA8B,EAC5B,UAAU,UACX;GACF;EACF;CACD,WAAW,EACT,WAAW,OACZ;CACF,GACD,EAAE,MAAM,wBAAwB,CACjC;AAED,MAAM,wBAAuB,UAAS;CACpC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,OAAO,QAAQ,cAAc;CAGrC,IAAI,KAAK,CAAC,WAAW,KAAK;AAC1B,KAAI,YAAY,KAAW;EAEzB,IAAI,YAAY,YAAY;AAC5B,OAAK,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;YAClC,YAAY,KAAO;EAE5B,IAAI,YAAY,YAAY;AAC5B,OAAK,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;;CAE7C,MAAM,CAAC,QAAQ,QAAQ;AAEvB,QACE,oCAAC,SACC,WAAW,KAAK,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ,IAEtE,oCAAC,cAAW,WAAW,QAAQ,UAAS,OAAoB,EAC3D,QACC,oCAAC,UAAO,WAAW,QAAQ,QACzB,oCAAC;EAAW,SAAQ;EAAY,WAAW,QAAQ;IAChD,KACU,CACN,CAEP;;AAIV,mCAAe"}

package/dist/{FluentHead-C1bs_iJK.js → FluentHead-B9oIMLR1.js}

@@ -17,4 +17,4 @@ var FluentHead_default = FluentHead;
 
 //#endregion
 export { FluentHead_default as t };
-//# sourceMappingURL=FluentHead-C1bs_iJK.js.map
+//# sourceMappingURL=FluentHead-B9oIMLR1.js.map

package/dist/{FluentHead-C1bs_iJK.js.map → FluentHead-B9oIMLR1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentHead-C1bs_iJK.js","names":[],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentHead/index.tsx"],"sourcesContent":["import { TableHead, TableRow, makeStyles } from '@material-ui/core';\nimport React, { ReactNode } from 'react';\n\ninterface FluentHeadProps {\n  background?: string;\n  containerMaxHeight?: string | number;\n  style?: object;\n  children: ReactNode;\n};\n\nconst useStyles = makeStyles((theme) => ({\n  root: (props: FluentHeadProps) => ({\n    maxHeight: props?.containerMaxHeight\n  }),\n  row: (props: FluentHeadProps) => ({\n    backgroundColor: props?.background || theme.palette.secondary.light,\n    '& .MuiTableCell-stickyHeader': {\n      backgroundColor: props?.background || theme.palette.secondary.light\n    }\n  })\n}));\n\nconst FluentHead = (props: FluentHeadProps) => {\n  const classes = useStyles(props);\n\n  return (\n  <TableHead style={{ ...props?.style,  }}>\n    <TableRow className={classes.row}>\n      {props?.children}\n    </TableRow>\n  </TableHead >\n)};\n\nexport default FluentHead;"],"mappings":";;;;AAUA,MAAM,YAAY,YAAY,WAAW;CACvC,OAAO,WAA4B,EACjC,WAAW,OAAO,oBACnB;CACD,MAAM,WAA4B;EAChC,iBAAiB,OAAO,cAAc,MAAM,QAAQ,UAAU;EAC9D,gCAAgC,EAC9B,iBAAiB,OAAO,cAAc,MAAM,QAAQ,UAAU,OAC/D;EACF;CACF,EAAE;AAEH,MAAM,cAAc,UAA2B;CAC7C,MAAM,UAAU,UAAU,MAAM;AAEhC,QACA,oCAAC,aAAU,OAAO,EAAE,GAAG,OAAO,OAAS,IACrC,oCAAC,YAAS,WAAW,QAAQ,OAC1B,OAAO,SACC,CACA;;AAGf,yBAAe"}
+{"version":3,"file":"FluentHead-B9oIMLR1.js","names":[],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentHead/index.tsx"],"sourcesContent":["import { TableHead, TableRow, makeStyles } from '@material-ui/core';\nimport React, { ReactNode } from 'react';\n\ninterface FluentHeadProps {\n  background?: string;\n  containerMaxHeight?: string | number;\n  style?: object;\n  children: ReactNode;\n};\n\nconst useStyles = makeStyles((theme) => ({\n  root: (props: FluentHeadProps) => ({\n    maxHeight: props?.containerMaxHeight\n  }),\n  row: (props: FluentHeadProps) => ({\n    backgroundColor: props?.background || theme.palette.secondary.light,\n    '& .MuiTableCell-stickyHeader': {\n      backgroundColor: props?.background || theme.palette.secondary.light\n    }\n  })\n}));\n\nconst FluentHead = (props: FluentHeadProps) => {\n  const classes = useStyles(props);\n\n  return (\n  <TableHead style={{ ...props?.style,  }}>\n    <TableRow className={classes.row}>\n      {props?.children}\n    </TableRow>\n  </TableHead >\n)};\n\nexport default FluentHead;"],"mappings":";;;;AAUA,MAAM,YAAY,YAAY,WAAW;CACvC,OAAO,WAA4B,EACjC,WAAW,OAAO,oBACnB;CACD,MAAM,WAA4B;EAChC,iBAAiB,OAAO,cAAc,MAAM,QAAQ,UAAU;EAC9D,gCAAgC,EAC9B,iBAAiB,OAAO,cAAc,MAAM,QAAQ,UAAU,OAC/D;EACF;CACF,EAAE;AAEH,MAAM,cAAc,UAA2B;CAC7C,MAAM,UAAU,UAAU,MAAM;AAEhC,QACA,oCAAC,aAAU,OAAO,EAAE,GAAG,OAAO,OAAS,IACrC,oCAAC,YAAS,WAAW,QAAQ,OAC1B,OAAO,SACC,CACA;;AAGf,yBAAe"}

package/dist/{FluentIconKey-BWCFV9Qs.js → FluentIconKey-D8jK0HK5.js}

@@ -38,4 +38,4 @@ var FluentIconKey_default = memo(IconKey);
 
 //#endregion
 export { FluentIconKey_default as t };
-//# sourceMappingURL=FluentIconKey-BWCFV9Qs.js.map
+//# sourceMappingURL=FluentIconKey-D8jK0HK5.js.map

package/dist/{FluentIconKey-BWCFV9Qs.js.map → FluentIconKey-D8jK0HK5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentIconKey-BWCFV9Qs.js","names":[],"sources":["../src/UI/dataDisplay/map/FluentIconKey.jsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { ButtonBase, makeStyles, Paper, Tooltip } from '@material-ui/core';\nimport {FluentIcon} from '../../../utilities/iconLibrary/FluentIcon';\nimport { UnityFluentIcon } from '../../../utilities/iconLibrary/UnityFluentIcon';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    width: 10,\n    height: 10,\n    paddingTop: theme.spacing(2.5),\n    paddingBottom: theme.spacing(5.5),\n    paddingLeft: theme.spacing(3.5),\n    paddingRight: theme.spacing(5.5),\n    margin: theme.spacing(0.25),\n    cursor: 'pointer',\n\n    '&:hover': {\n      boxShadow: theme.shadows[1],\n    },\n  },\n  images: {\n    height: theme.spacing(2.25),\n    width: theme.spacing(2.25),\n  },\n}));\n\nconst IconKey = props => {\n  const classes = useStyles();\n  const { icon, select, tooltip, iconType } = props;\n\n  return (\n    <ButtonBase onClick={select}>\n      <Tooltip title={tooltip} placement=\"top\">\n        <Paper elevation={0} square className={classes.root} variant=\"outlined\">\n          <div>\n            {iconType === 'unity' ? (\n              <UnityFluentIcon component={icon} />\n            ) : (\n              <FluentIcon component={icon} />\n            )}\n          </div>\n        </Paper>\n      </Tooltip>\n    </ButtonBase>\n  );\n};\nexport default memo(IconKey);\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,YAAW,WAAU;CACrC,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,YAAY,MAAM,QAAQ,IAAI;EAC9B,eAAe,MAAM,QAAQ,IAAI;EACjC,aAAa,MAAM,QAAQ,IAAI;EAC/B,cAAc,MAAM,QAAQ,IAAI;EAChC,QAAQ,MAAM,QAAQ,IAAK;EAC3B,QAAQ;EAER,WAAW,EACT,WAAW,MAAM,QAAQ,IAC1B;EACF;CACD,QAAQ;EACN,QAAQ,MAAM,QAAQ,KAAK;EAC3B,OAAO,MAAM,QAAQ,KAAK;EAC3B;CACF,EAAE;AAEH,MAAM,WAAU,UAAS;CACvB,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,MAAM,QAAQ,SAAS,aAAa;AAE5C,QACE,oCAAC,cAAW,SAAS,UACnB,oCAAC;EAAQ,OAAO;EAAS,WAAU;IACjC,oCAAC;EAAM,WAAW;EAAG;EAAO,WAAW,QAAQ;EAAM,SAAQ;IAC3D,oCAAC,aACE,aAAa,UACZ,oCAAC,mBAAgB,WAAW,OAAQ,GAEpC,oCAAC,cAAW,WAAW,OAAQ,CAE7B,CACA,CACA,CACC;;AAGjB,4BAAe,KAAK,QAAQ"}
+{"version":3,"file":"FluentIconKey-D8jK0HK5.js","names":[],"sources":["../src/UI/dataDisplay/map/FluentIconKey.jsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { ButtonBase, makeStyles, Paper, Tooltip } from '@material-ui/core';\nimport {FluentIcon} from '../../../utilities/iconLibrary/FluentIcon';\nimport { UnityFluentIcon } from '../../../utilities/iconLibrary/UnityFluentIcon';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    width: 10,\n    height: 10,\n    paddingTop: theme.spacing(2.5),\n    paddingBottom: theme.spacing(5.5),\n    paddingLeft: theme.spacing(3.5),\n    paddingRight: theme.spacing(5.5),\n    margin: theme.spacing(0.25),\n    cursor: 'pointer',\n\n    '&:hover': {\n      boxShadow: theme.shadows[1],\n    },\n  },\n  images: {\n    height: theme.spacing(2.25),\n    width: theme.spacing(2.25),\n  },\n}));\n\nconst IconKey = props => {\n  const classes = useStyles();\n  const { icon, select, tooltip, iconType } = props;\n\n  return (\n    <ButtonBase onClick={select}>\n      <Tooltip title={tooltip} placement=\"top\">\n        <Paper elevation={0} square className={classes.root} variant=\"outlined\">\n          <div>\n            {iconType === 'unity' ? (\n              <UnityFluentIcon component={icon} />\n            ) : (\n              <FluentIcon component={icon} />\n            )}\n          </div>\n        </Paper>\n      </Tooltip>\n    </ButtonBase>\n  );\n};\nexport default memo(IconKey);\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,YAAW,WAAU;CACrC,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,YAAY,MAAM,QAAQ,IAAI;EAC9B,eAAe,MAAM,QAAQ,IAAI;EACjC,aAAa,MAAM,QAAQ,IAAI;EAC/B,cAAc,MAAM,QAAQ,IAAI;EAChC,QAAQ,MAAM,QAAQ,IAAK;EAC3B,QAAQ;EAER,WAAW,EACT,WAAW,MAAM,QAAQ,IAC1B;EACF;CACD,QAAQ;EACN,QAAQ,MAAM,QAAQ,KAAK;EAC3B,OAAO,MAAM,QAAQ,KAAK;EAC3B;CACF,EAAE;AAEH,MAAM,WAAU,UAAS;CACvB,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,MAAM,QAAQ,SAAS,aAAa;AAE5C,QACE,oCAAC,cAAW,SAAS,UACnB,oCAAC;EAAQ,OAAO;EAAS,WAAU;IACjC,oCAAC;EAAM,WAAW;EAAG;EAAO,WAAW,QAAQ;EAAM,SAAQ;IAC3D,oCAAC,aACE,aAAa,UACZ,oCAAC,mBAAgB,WAAW,OAAQ,GAEpC,oCAAC,cAAW,WAAW,OAAQ,CAE7B,CACA,CACA,CACC;;AAGjB,4BAAe,KAAK,QAAQ"}

package/dist/{FluentListItem-1fzW--Dq.js → FluentListItem-CSkJhTK-.js}

@@ -96,4 +96,4 @@ const FluentListItem = (props) => {
 
 //#endregion
 export { FluentListItem as t };
-//# sourceMappingURL=FluentListItem-1fzW--Dq.js.map
+//# sourceMappingURL=FluentListItem-CSkJhTK-.js.map

package/dist/{FluentListItem-1fzW--Dq.js.map → FluentListItem-CSkJhTK-.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentListItem-1fzW--Dq.js","names":["Typography"],"sources":["../src/UI/dataDisplay/FluentListItem.jsx"],"sourcesContent":["/* eslint-disable react/self-closing-comp */\nimport React, { useState } from 'react';\nimport { makeStyles, Divider, Collapse } from '@material-ui/core';\nimport clsx from 'clsx';\nimport { LayoutUnit } from '../../layout/LayoutUnit';\nimport { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';\nimport { ChevronDownIcon } from '@fluentui/react-icons';\nimport { Typography } from './typography/Typography';\nimport { FluentCheckbox } from '../inputs/checkbox/FluentCheckbox';\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {\n      height: theme.spacing(5)\n    },\n    wrapper: {\n      display: 'flex',\n      flexDirection: 'row'\n    },\n    titleWrapper: {\n      display: 'flex',\n      width: '100%',\n      textAlign: 'left',\n      alignItems: 'center'\n    },\n    title: {\n      flex: 1\n    },\n    progress: {\n      height: 2,\n      '&::after': {\n        content: `''`,\n        display: 'block',\n        background: theme.palette.secondary.main,\n        width: (props) => (props.progress / props.total) * 425,\n        height: '100%'\n      }\n    },\n    iconStart: {\n      marginRight: theme.spacing(1)\n    },\n    iconEnd: {\n      marginLeft: theme.spacing(1)\n    },\n    expand: {\n      transform: 'rotate(0deg)',\n      transition: theme.transitions.create('transform', {\n        duration: theme.transitions.duration.shortest\n      })\n    },\n    expandOpen: {\n      transform: 'rotate(180deg)'\n    },\n    iconSpace: {\n      width: theme.spacing(2.75)\n    },\n    valueWrapper: {\n      display: 'flex',\n      alignItems: 'center'\n    },\n    valueIcon: {\n      marginRight: theme.spacing(1)\n    },\n    checkbox: {\n      marginRight: theme.spacing(1),\n      padding: '0px'\n    }\n  }),\n  { name: 'FluentListItem' }\n);\n\nexport const FluentListItem = (props) => {\n  const classes = useStyles(props);\n  const {\n    subject,\n    value,\n    visualization,\n    boldSubject = true,\n    expandable = false,\n    valueTextColor,\n    icon,\n    iconColor,\n    iconEnd = true,\n    valueIcon,\n    valueIconColor,\n    hideDivider = false,\n    children,\n    expandedDefaultValue = false,\n    keepIconLeftSpace = false,\n    keepIconRightSpace = false,\n    defaultChecked = false,\n    onCheckEvent\n  } = props;\n  const [expandItem, setExpandItem] = useState(expandedDefaultValue);\n\n  const handleOnClick = () => {\n    setExpandItem(!expandItem);\n  };\n\n  return (\n    <div>\n      <div className={classes.root} onClick={expandable ? handleOnClick : null}>\n        <div className={classes.wrapper}>\n          <div className={classes.titleWrapper}>\n            {keepIconLeftSpace && (!expandable || iconEnd) && (\n              <div className={classes.iconSpace}></div>\n            )}\n            {onCheckEvent && (\n              <FluentCheckbox\n                defaultChecked={defaultChecked}\n                onChange={onCheckEvent}\n                className={classes.checkbox}\n              />\n            )}\n            {(icon || expandable) && !iconEnd && (\n              <FluentIcon\n                component={expandable ? ChevronDownIcon : icon}\n                color={iconColor}\n                className={clsx(classes.iconStart, {\n                  [classes.expand]: expandable,\n                  [classes.expandOpen]: expandable && expandItem\n                })}\n                size='small'\n              />\n            )}\n\n            <div className={classes.title}>\n              <Typography variant='body1'>\n                {boldSubject ? <strong>{subject}</strong> : subject}\n              </Typography>\n            </div>\n            <LayoutUnit unit='nudge' />\n            <div className={classes.valueWrapper}>\n              {valueIcon && (\n                <FluentIcon\n                  component={valueIcon}\n                  color={valueIconColor}\n                  className={classes.valueIcon}\n                  size='small'\n                />\n              )}\n              <Typography variant='body1' color={valueTextColor}>\n                {value}\n              </Typography>\n            </div>\n\n            {(icon || expandable) && iconEnd && (\n              <FluentIcon\n                component={expandable ? ChevronDownIcon : icon}\n                color={iconColor}\n                className={clsx(classes.iconEnd, {\n                  [classes.expand]: expandable,\n                  [classes.expandOpen]: expandable && expandItem\n                })}\n                size='small'\n              />\n            )}\n            {keepIconRightSpace && (!expandable || !iconEnd) && (\n              <div className={classes.iconSpace}></div>\n            )}\n          </div>\n        </div>\n        <LayoutUnit unit='nudge' />\n        {!hideDivider && (\n          <Divider className={visualization && classes.progress} />\n        )}\n      </div>\n      <Collapse in={expandItem} timeout='auto' unmountOnExit>\n        <div>{children}</div>\n      </Collapse>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"FluentListItem-CSkJhTK-.js","names":["Typography"],"sources":["../src/UI/dataDisplay/FluentListItem.jsx"],"sourcesContent":["/* eslint-disable react/self-closing-comp */\nimport React, { useState } from 'react';\nimport { makeStyles, Divider, Collapse } from '@material-ui/core';\nimport clsx from 'clsx';\nimport { LayoutUnit } from '../../layout/LayoutUnit';\nimport { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';\nimport { ChevronDownIcon } from '@fluentui/react-icons';\nimport { Typography } from './typography/Typography';\nimport { FluentCheckbox } from '../inputs/checkbox/FluentCheckbox';\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {\n      height: theme.spacing(5)\n    },\n    wrapper: {\n      display: 'flex',\n      flexDirection: 'row'\n    },\n    titleWrapper: {\n      display: 'flex',\n      width: '100%',\n      textAlign: 'left',\n      alignItems: 'center'\n    },\n    title: {\n      flex: 1\n    },\n    progress: {\n      height: 2,\n      '&::after': {\n        content: `''`,\n        display: 'block',\n        background: theme.palette.secondary.main,\n        width: (props) => (props.progress / props.total) * 425,\n        height: '100%'\n      }\n    },\n    iconStart: {\n      marginRight: theme.spacing(1)\n    },\n    iconEnd: {\n      marginLeft: theme.spacing(1)\n    },\n    expand: {\n      transform: 'rotate(0deg)',\n      transition: theme.transitions.create('transform', {\n        duration: theme.transitions.duration.shortest\n      })\n    },\n    expandOpen: {\n      transform: 'rotate(180deg)'\n    },\n    iconSpace: {\n      width: theme.spacing(2.75)\n    },\n    valueWrapper: {\n      display: 'flex',\n      alignItems: 'center'\n    },\n    valueIcon: {\n      marginRight: theme.spacing(1)\n    },\n    checkbox: {\n      marginRight: theme.spacing(1),\n      padding: '0px'\n    }\n  }),\n  { name: 'FluentListItem' }\n);\n\nexport const FluentListItem = (props) => {\n  const classes = useStyles(props);\n  const {\n    subject,\n    value,\n    visualization,\n    boldSubject = true,\n    expandable = false,\n    valueTextColor,\n    icon,\n    iconColor,\n    iconEnd = true,\n    valueIcon,\n    valueIconColor,\n    hideDivider = false,\n    children,\n    expandedDefaultValue = false,\n    keepIconLeftSpace = false,\n    keepIconRightSpace = false,\n    defaultChecked = false,\n    onCheckEvent\n  } = props;\n  const [expandItem, setExpandItem] = useState(expandedDefaultValue);\n\n  const handleOnClick = () => {\n    setExpandItem(!expandItem);\n  };\n\n  return (\n    <div>\n      <div className={classes.root} onClick={expandable ? handleOnClick : null}>\n        <div className={classes.wrapper}>\n          <div className={classes.titleWrapper}>\n            {keepIconLeftSpace && (!expandable || iconEnd) && (\n              <div className={classes.iconSpace}></div>\n            )}\n            {onCheckEvent && (\n              <FluentCheckbox\n                defaultChecked={defaultChecked}\n                onChange={onCheckEvent}\n                className={classes.checkbox}\n              />\n            )}\n            {(icon || expandable) && !iconEnd && (\n              <FluentIcon\n                component={expandable ? ChevronDownIcon : icon}\n                color={iconColor}\n                className={clsx(classes.iconStart, {\n                  [classes.expand]: expandable,\n                  [classes.expandOpen]: expandable && expandItem\n                })}\n                size='small'\n              />\n            )}\n\n            <div className={classes.title}>\n              <Typography variant='body1'>\n                {boldSubject ? <strong>{subject}</strong> : subject}\n              </Typography>\n            </div>\n            <LayoutUnit unit='nudge' />\n            <div className={classes.valueWrapper}>\n              {valueIcon && (\n                <FluentIcon\n                  component={valueIcon}\n                  color={valueIconColor}\n                  className={classes.valueIcon}\n                  size='small'\n                />\n              )}\n              <Typography variant='body1' color={valueTextColor}>\n                {value}\n              </Typography>\n            </div>\n\n            {(icon || expandable) && iconEnd && (\n              <FluentIcon\n                component={expandable ? ChevronDownIcon : icon}\n                color={iconColor}\n                className={clsx(classes.iconEnd, {\n                  [classes.expand]: expandable,\n                  [classes.expandOpen]: expandable && expandItem\n                })}\n                size='small'\n              />\n            )}\n            {keepIconRightSpace && (!expandable || !iconEnd) && (\n              <div className={classes.iconSpace}></div>\n            )}\n          </div>\n        </div>\n        <LayoutUnit unit='nudge' />\n        {!hideDivider && (\n          <Divider className={visualization && classes.progress} />\n        )}\n      </div>\n      <Collapse in={expandItem} timeout='auto' unmountOnExit>\n        <div>{children}</div>\n      </Collapse>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/{FluentRow-C_YJYbQ5.js → FluentRow-BDiPXAgx.js}

@@ -15,4 +15,4 @@ var FluentRow_default = FluentRow;
 
 //#endregion
 export { FluentRow_default as t };
-//# sourceMappingURL=FluentRow-C_YJYbQ5.js.map
+//# sourceMappingURL=FluentRow-BDiPXAgx.js.map

package/dist/{FluentRow-C_YJYbQ5.js.map → FluentRow-BDiPXAgx.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentRow-C_YJYbQ5.js","names":[],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentRow/index.tsx"],"sourcesContent":["import { TableRow } from '@material-ui/core';\nimport React, { ReactNode } from 'react';\n\ninterface FluentRowProps {\n  className?: string;\n  children: ReactNode;\n  onClick?: () => void;\n}\n\nconst FluentRow = (props: FluentRowProps) => {\n  const { className, children, onClick, ...otherProps } = props;\n\n  return (\n    <TableRow\n      className={className}\n      onClick={onClick || undefined}\n      {...otherProps}\n      style={onClick ? { cursor:  'pointer'} : undefined}\n    >\n      {children}\n    </TableRow>\n  );\n};\n\nexport default FluentRow;\n"],"mappings":";;;;AASA,MAAM,aAAa,UAA0B;CAC3C,MAAM,EAAE,WAAW,UAAU,SAAS,GAAG,eAAe;AAExD,QACE,oCAAC;EACY;EACX,SAAS,WAAW;EACpB,GAAI;EACJ,OAAO,UAAU,EAAE,QAAS,WAAU,GAAG;IAExC,SACQ;;AAIf,wBAAe"}
+{"version":3,"file":"FluentRow-BDiPXAgx.js","names":[],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentRow/index.tsx"],"sourcesContent":["import { TableRow } from '@material-ui/core';\nimport React, { ReactNode } from 'react';\n\ninterface FluentRowProps {\n  className?: string;\n  children: ReactNode;\n  onClick?: () => void;\n}\n\nconst FluentRow = (props: FluentRowProps) => {\n  const { className, children, onClick, ...otherProps } = props;\n\n  return (\n    <TableRow\n      className={className}\n      onClick={onClick || undefined}\n      {...otherProps}\n      style={onClick ? { cursor:  'pointer'} : undefined}\n    >\n      {children}\n    </TableRow>\n  );\n};\n\nexport default FluentRow;\n"],"mappings":";;;;AASA,MAAM,aAAa,UAA0B;CAC3C,MAAM,EAAE,WAAW,UAAU,SAAS,GAAG,eAAe;AAExD,QACE,oCAAC;EACY;EACX,SAAS,WAAW;EACpB,GAAI;EACJ,OAAO,UAAU,EAAE,QAAS,WAAU,GAAG;IAExC,SACQ;;AAIf,wBAAe"}

package/dist/{FluentSecondaryStatNumber-CDTlsa6u.js → FluentSecondaryStatNumber-DaeGuXtJ.js}

@@ -1,4 +1,4 @@
-import { t as FluentStatNumber_default } from "./FluentStatNumber-BYwIRVrE.js";
+import { t as FluentStatNumber_default } from "./FluentStatNumber-BN-HWfVM.js";
 import React from "react";
 import { makeStyles } from "@material-ui/core";
 
@@ -55,4 +55,4 @@ var FluentSecondaryStatNumber_default = FluentSecondaryStatNumber;
 
 //#endregion
 export { FluentPrimaryStatNumber_default as n, FluentSecondaryStatNumber_default as t };
-//# sourceMappingURL=FluentSecondaryStatNumber-CDTlsa6u.js.map
+//# sourceMappingURL=FluentSecondaryStatNumber-DaeGuXtJ.js.map

package/dist/{FluentSecondaryStatNumber-CDTlsa6u.js.map → FluentSecondaryStatNumber-DaeGuXtJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentSecondaryStatNumber-CDTlsa6u.js","names":["useStyles","FluentStatNumbers","FluentStatNumber"],"sources":["../src/UI/widgets/FluentComponents/molecules/FluentPrimaryStatNumber.jsx","../src/UI/widgets/FluentComponents/molecules/FluentSecondaryStatNumber.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport FluentStatNumbers from './FluentStatNumber';\n\nconst useStyles = makeStyles(\n  theme => ({\n    displayRow: {\n      display: 'flex',\n      flexDirection: 'row',\n    },\n    smallDisplay: {\n      marginTop: theme.spacing(6),\n      marginLeft: theme.spacing(3),\n    },\n    divider: {\n      height: theme.spacing(6),\n      marginTop: theme.spacing(6.5),\n      marginLeft: theme.spacing(2),\n    },\n  }),\n  { next: 'FluentPrimaryStatNumber' }\n);\n\nconst FluentPrimaryStatNumber = props => {\n  const classes = useStyles();\n\n  const { mainStat, mainLabel } = props;\n\n  return (\n    <div className={classes.displayRow}>\n      <FluentStatNumbers label={mainLabel} number={mainStat} />\n    </div>\n  );\n};\n\nexport default FluentPrimaryStatNumber;\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport FluentStatNumber from './FluentStatNumber';\n\nconst useStyles = makeStyles(theme => ({\n  displayRow: {\n    display: 'flex',\n    flexDirection: 'row',\n  },\n  // smallDisplay: {\n  //   marginTop: theme.spacing(6),\n  // },\n  divider: {\n    height: theme.spacing(6),\n    marginTop: theme.spacing(6.5),\n    marginLeft: theme.spacing(1),\n  },\n}));\n\nconst FluentSecondaryStatNumber = props => {\n  const classes = useStyles();\n\n  const { secondaryStat, secondaryLabel, trend } = props;\n\n  return (\n    <div className={classes.displayRow}>\n      <div className={classes.smallDisplay}>\n        <FluentStatNumber\n          small\n          trend={trend}\n          label={secondaryLabel}\n          number={secondaryStat}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default FluentSecondaryStatNumber;\n"],"mappings":";;;;;AAIA,MAAMA,cAAY,YAChB,WAAU;CACR,YAAY;EACV,SAAS;EACT,eAAe;EAChB;CACD,cAAc;EACZ,WAAW,MAAM,QAAQ,EAAE;EAC3B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACD,SAAS;EACP,QAAQ,MAAM,QAAQ,EAAE;EACxB,WAAW,MAAM,QAAQ,IAAI;EAC7B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,GACD,EAAE,MAAM,2BAA2B,CACpC;AAED,MAAM,2BAA0B,UAAS;CACvC,MAAM,UAAUA,aAAW;CAE3B,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAACC;EAAkB,OAAO;EAAW,QAAQ;GAAY,CACrD;;AAIV,sCAAe;;;;AC/Bf,MAAM,YAAY,YAAW,WAAU;CACrC,YAAY;EACV,SAAS;EACT,eAAe;EAChB;CAID,SAAS;EACP,QAAQ,MAAM,QAAQ,EAAE;EACxB,WAAW,MAAM,QAAQ,IAAI;EAC7B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,EAAE;AAEH,MAAM,6BAA4B,UAAS;CACzC,MAAM,UAAU,WAAW;CAE3B,MAAM,EAAE,eAAe,gBAAgB,UAAU;AAEjD,QACE,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAACC;EACC;EACO;EACP,OAAO;EACP,QAAQ;GACR,CACE,CACF;;AAIV,wCAAe"}
+{"version":3,"file":"FluentSecondaryStatNumber-DaeGuXtJ.js","names":["useStyles","FluentStatNumbers","FluentStatNumber"],"sources":["../src/UI/widgets/FluentComponents/molecules/FluentPrimaryStatNumber.jsx","../src/UI/widgets/FluentComponents/molecules/FluentSecondaryStatNumber.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport FluentStatNumbers from './FluentStatNumber';\n\nconst useStyles = makeStyles(\n  theme => ({\n    displayRow: {\n      display: 'flex',\n      flexDirection: 'row',\n    },\n    smallDisplay: {\n      marginTop: theme.spacing(6),\n      marginLeft: theme.spacing(3),\n    },\n    divider: {\n      height: theme.spacing(6),\n      marginTop: theme.spacing(6.5),\n      marginLeft: theme.spacing(2),\n    },\n  }),\n  { next: 'FluentPrimaryStatNumber' }\n);\n\nconst FluentPrimaryStatNumber = props => {\n  const classes = useStyles();\n\n  const { mainStat, mainLabel } = props;\n\n  return (\n    <div className={classes.displayRow}>\n      <FluentStatNumbers label={mainLabel} number={mainStat} />\n    </div>\n  );\n};\n\nexport default FluentPrimaryStatNumber;\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport FluentStatNumber from './FluentStatNumber';\n\nconst useStyles = makeStyles(theme => ({\n  displayRow: {\n    display: 'flex',\n    flexDirection: 'row',\n  },\n  // smallDisplay: {\n  //   marginTop: theme.spacing(6),\n  // },\n  divider: {\n    height: theme.spacing(6),\n    marginTop: theme.spacing(6.5),\n    marginLeft: theme.spacing(1),\n  },\n}));\n\nconst FluentSecondaryStatNumber = props => {\n  const classes = useStyles();\n\n  const { secondaryStat, secondaryLabel, trend } = props;\n\n  return (\n    <div className={classes.displayRow}>\n      <div className={classes.smallDisplay}>\n        <FluentStatNumber\n          small\n          trend={trend}\n          label={secondaryLabel}\n          number={secondaryStat}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default FluentSecondaryStatNumber;\n"],"mappings":";;;;;AAIA,MAAMA,cAAY,YAChB,WAAU;CACR,YAAY;EACV,SAAS;EACT,eAAe;EAChB;CACD,cAAc;EACZ,WAAW,MAAM,QAAQ,EAAE;EAC3B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACD,SAAS;EACP,QAAQ,MAAM,QAAQ,EAAE;EACxB,WAAW,MAAM,QAAQ,IAAI;EAC7B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,GACD,EAAE,MAAM,2BAA2B,CACpC;AAED,MAAM,2BAA0B,UAAS;CACvC,MAAM,UAAUA,aAAW;CAE3B,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAACC;EAAkB,OAAO;EAAW,QAAQ;GAAY,CACrD;;AAIV,sCAAe;;;;AC/Bf,MAAM,YAAY,YAAW,WAAU;CACrC,YAAY;EACV,SAAS;EACT,eAAe;EAChB;CAID,SAAS;EACP,QAAQ,MAAM,QAAQ,EAAE;EACxB,WAAW,MAAM,QAAQ,IAAI;EAC7B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,EAAE;AAEH,MAAM,6BAA4B,UAAS;CACzC,MAAM,UAAU,WAAW;CAE3B,MAAM,EAAE,eAAe,gBAAgB,UAAU;AAEjD,QACE,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAACC;EACC;EACO;EACP,OAAO;EACP,QAAQ;GACR,CACE,CACF;;AAIV,wCAAe"}

package/dist/{FluentStatNumber-BYwIRVrE.js → FluentStatNumber-BN-HWfVM.js}

@@ -1,5 +1,5 @@
 import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
-import { t as FluentDisplayNumbers_default } from "./FluentDisplayNumbers-C-zCWHot.js";
+import { t as FluentDisplayNumbers_default } from "./FluentDisplayNumbers-BR-gZN5l.js";
 import React from "react";
 import { Avatar, Typography, makeStyles } from "@material-ui/core";
 import { MarketDownIcon, MarketIcon } from "@fluentui/react-icons";
@@ -38,4 +38,4 @@ var FluentStatNumber_default = FluentStatNumber;
 
 //#endregion
 export { FluentStatNumber_default as t };
-//# sourceMappingURL=FluentStatNumber-BYwIRVrE.js.map
+//# sourceMappingURL=FluentStatNumber-BN-HWfVM.js.map

package/dist/{FluentStatNumber-BYwIRVrE.js.map → FluentStatNumber-BN-HWfVM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentStatNumber-BYwIRVrE.js","names":["FluentDisplayNumber"],"sources":["../src/UI/widgets/FluentComponents/molecules/FluentStatNumber.jsx"],"sourcesContent":["import React from 'react'\nimport { Avatar, makeStyles, Typography } from '@material-ui/core'\nimport FluentDisplayNumber from '../atoms/FluentDisplayNumbers'\nimport { MarketIcon, MarketDownIcon } from '@fluentui/react-icons'\nimport { FluentIcon } from '../../../../utilities/iconLibrary/FluentIcon'\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {\n      display: 'flex',\n      flexDirection: 'row'\n    },\n    caption: {\n      textAlign: 'left'\n    },\n    captionSmall: {\n      textAlign: 'center'\n    },\n    trend: {\n      marginTop: theme.spacing(2),\n      marginLeft: theme.spacing(1)\n    },\n    upIcon: {\n      color: 'green'\n    },\n    downIcon: {\n      color: '#D50000'\n    },\n    avatar: {\n      backgroundColor: 'white'\n    }\n  }),\n  { next: 'FluentStatNumber' }\n)\n\nconst FluentStatNumber = (props) => {\n  const classes = useStyles()\n  const { small, trend, label, number } = props\n  return (\n    <div className={classes.root}>\n      <div>\n        <div>\n          <FluentDisplayNumber small={small} number={Math.abs(number)} />\n        </div>\n        <div className={!small ? classes.caption : classes.captionSmall}>\n          <Typography variant='overline'>{label}</Typography>\n        </div>\n      </div>\n\n      <div className={classes.trend}>\n        {small && (\n          <Avatar className={classes.avatar}>\n            {trend === 'down' ? (\n              <FluentIcon\n                component={MarketDownIcon}\n                className={classes.downIcon}\n              />\n            ) : (\n              <FluentIcon component={MarketIcon} className={classes.upIcon} />\n            )}\n          </Avatar>\n        )}\n      </div>\n    </div>\n  )\n}\nexport default FluentStatNumber\n"],"mappings":";;;;;;;AAMA,MAAM,YAAY,YACf,WAAW;CACV,MAAM;EACJ,SAAS;EACT,eAAe;EAChB;CACD,SAAS,EACP,WAAW,QACZ;CACD,cAAc,EACZ,WAAW,UACZ;CACD,OAAO;EACL,WAAW,MAAM,QAAQ,EAAE;EAC3B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACD,QAAQ,EACN,OAAO,SACR;CACD,UAAU,EACR,OAAO,WACR;CACD,QAAQ,EACN,iBAAiB,SAClB;CACF,GACD,EAAE,MAAM,oBAAoB,CAC7B;AAED,MAAM,oBAAoB,UAAU;CAClC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,OAAO,OAAO,OAAO,WAAW;AACxC,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,aACC,oCAAC,aACC,oCAACA;EAA2B;EAAO,QAAQ,KAAK,IAAI,OAAO;GAAI,CAC3D,EACN,oCAAC,SAAI,WAAW,CAAC,QAAQ,QAAQ,UAAU,QAAQ,gBACjD,oCAAC,cAAW,SAAQ,cAAY,MAAmB,CAC/C,CACF,EAEN,oCAAC,SAAI,WAAW,QAAQ,SACrB,SACC,oCAAC,UAAO,WAAW,QAAQ,UACxB,UAAU,SACT,oCAAC;EACC,WAAW;EACX,WAAW,QAAQ;GACnB,GAEF,oCAAC;EAAW,WAAW;EAAY,WAAW,QAAQ;GAAU,CAE3D,CAEP,CACF;;AAGV,+BAAe"}
+{"version":3,"file":"FluentStatNumber-BN-HWfVM.js","names":["FluentDisplayNumber"],"sources":["../src/UI/widgets/FluentComponents/molecules/FluentStatNumber.jsx"],"sourcesContent":["import React from 'react'\nimport { Avatar, makeStyles, Typography } from '@material-ui/core'\nimport FluentDisplayNumber from '../atoms/FluentDisplayNumbers'\nimport { MarketIcon, MarketDownIcon } from '@fluentui/react-icons'\nimport { FluentIcon } from '../../../../utilities/iconLibrary/FluentIcon'\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {\n      display: 'flex',\n      flexDirection: 'row'\n    },\n    caption: {\n      textAlign: 'left'\n    },\n    captionSmall: {\n      textAlign: 'center'\n    },\n    trend: {\n      marginTop: theme.spacing(2),\n      marginLeft: theme.spacing(1)\n    },\n    upIcon: {\n      color: 'green'\n    },\n    downIcon: {\n      color: '#D50000'\n    },\n    avatar: {\n      backgroundColor: 'white'\n    }\n  }),\n  { next: 'FluentStatNumber' }\n)\n\nconst FluentStatNumber = (props) => {\n  const classes = useStyles()\n  const { small, trend, label, number } = props\n  return (\n    <div className={classes.root}>\n      <div>\n        <div>\n          <FluentDisplayNumber small={small} number={Math.abs(number)} />\n        </div>\n        <div className={!small ? classes.caption : classes.captionSmall}>\n          <Typography variant='overline'>{label}</Typography>\n        </div>\n      </div>\n\n      <div className={classes.trend}>\n        {small && (\n          <Avatar className={classes.avatar}>\n            {trend === 'down' ? (\n              <FluentIcon\n                component={MarketDownIcon}\n                className={classes.downIcon}\n              />\n            ) : (\n              <FluentIcon component={MarketIcon} className={classes.upIcon} />\n            )}\n          </Avatar>\n        )}\n      </div>\n    </div>\n  )\n}\nexport default FluentStatNumber\n"],"mappings":";;;;;;;AAMA,MAAM,YAAY,YACf,WAAW;CACV,MAAM;EACJ,SAAS;EACT,eAAe;EAChB;CACD,SAAS,EACP,WAAW,QACZ;CACD,cAAc,EACZ,WAAW,UACZ;CACD,OAAO;EACL,WAAW,MAAM,QAAQ,EAAE;EAC3B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACD,QAAQ,EACN,OAAO,SACR;CACD,UAAU,EACR,OAAO,WACR;CACD,QAAQ,EACN,iBAAiB,SAClB;CACF,GACD,EAAE,MAAM,oBAAoB,CAC7B;AAED,MAAM,oBAAoB,UAAU;CAClC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,OAAO,OAAO,OAAO,WAAW;AACxC,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,aACC,oCAAC,aACC,oCAACA;EAA2B;EAAO,QAAQ,KAAK,IAAI,OAAO;GAAI,CAC3D,EACN,oCAAC,SAAI,WAAW,CAAC,QAAQ,QAAQ,UAAU,QAAQ,gBACjD,oCAAC,cAAW,SAAQ,cAAY,MAAmB,CAC/C,CACF,EAEN,oCAAC,SAAI,WAAW,QAAQ,SACrB,SACC,oCAAC,UAAO,WAAW,QAAQ,UACxB,UAAU,SACT,oCAAC;EACC,WAAW;EACX,WAAW,QAAQ;GACnB,GAEF,oCAAC;EAAW,WAAW;EAAY,WAAW,QAAQ;GAAU,CAE3D,CAEP,CACF;;AAGV,+BAAe"}

package/dist/{FluentStatsSnippet-BN9VkqNq.js → FluentStatsSnippet-DKMsXSfg.js}

@@ -80,4 +80,4 @@ var FluentStatsSnippet_default = FluentStatsSnippet;
 
 //#endregion
 export { FluentStatsSnippet_default as t };
-//# sourceMappingURL=FluentStatsSnippet-BN9VkqNq.js.map
+//# sourceMappingURL=FluentStatsSnippet-DKMsXSfg.js.map

package/dist/{FluentStatsSnippet-BN9VkqNq.js.map → FluentStatsSnippet-DKMsXSfg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentStatsSnippet-BN9VkqNq.js","names":["useStyles","FluentTrendArrow"],"sources":["../src/UI/widgets/FluentComponents/atoms/FluentTrendArrow.jsx","../src/UI/widgets/FluentComponents/atoms/FluentStatsSnippet.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, colors } from '@material-ui/core';\nimport DownArrow from '@material-ui/icons/esm/ArrowDownward';\nimport UpArrow from '@material-ui/icons/esm/ArrowUpward';\n\nconst useStyles = makeStyles(theme => ({\n  root: {},\n  DownArrow: {\n    color: colors.red[500],\n    fontSize: 16,\n  },\n  UpArrow: {\n    color: colors.green[500],\n    fontSize: 16,\n  },\n}));\n\nconst FluentTrendArrow = props => {\n  const { type } = props;\n  const classes = useStyles();\n\n  let trend = '';\n\n  switch (type) {\n    case 'up':\n      trend = <UpArrow className={classes.UpArrow} />;\n      break;\n    case 'down':\n      trend = <DownArrow className={classes.DownArrow} />;\n      break;\n    default:\n  }\n\n  return trend;\n};\nexport default FluentTrendArrow;\n","import React from 'react';\nimport { Typography, makeStyles } from '@material-ui/core';\nimport round from '@extra-number/round';\nimport FluentTrendArrow from './FluentTrendArrow';\n\nconst useStyles = makeStyles(theme => ({\n  root: {},\n  percent: {\n    display: 'flex',\n    flexDirection: 'row',\n    marginTop: theme.spacing(-0.5),\n  },\n  arrow: {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  percentAmount: {},\n}));\n\nconst FluentStatsSnippet = props => {\n  const classes = useStyles(props);\n  const {\n    label,\n    amount: rawAmount,\n    prevAmount,\n    percent: percentProp,\n    trend: trendProp,\n  } = props;\n\n  // @todo Use an Intl formatter\n  let amount = rawAmount;\n  // TODO: Revisit below after Tampa Demo\n  if (Math.abs(rawAmount) > 1_000_000) {\n    //amount = Math.floor(rawAmount / 1_000_000) + 'M';\n    let newNumber = rawAmount / 1_000_000;\n    amount = [Math.round(newNumber * 10) / 10, 'M'];\n  } else if (Math.abs(rawAmount) > 1_000) {\n    //amount = Math.floor(rawAmount / 1_000) + 'K';\n    let newNumber = rawAmount / 1_000;\n    amount = [Math.round(newNumber * 10) / 10, 'K'];\n  }\n\n  let percent = percentProp;\n  let trend = trendProp;\n  if (typeof prevAmount === 'number') {\n    const ratio = (rawAmount - prevAmount) / prevAmount;\n\n    percent =\n      Math.abs(round(ratio * 100, Math.abs(ratio) < 0.01 ? 0.01 : 1)) + '%';\n    trend = ratio < 0 ? 'down' : 'up';\n  }\n\n  return (\n    <div className={classes.root}>\n      <Typography variant=\"overline\" component=\"div\">\n        {label}\n      </Typography>\n      <Typography className={classes.stat} variant=\"h5\" component=\"div\">\n        {amount}\n      </Typography>\n      <div className={classes.percent}>\n        <div className={classes.arrow}>\n          <FluentTrendArrow type={trend} />\n        </div>\n        <div className={classes.percentAmount}>\n          <Typography variant=\"caption\">{percent}</Typography>\n        </div>\n      </div>\n    </div>\n  );\n};\nexport default FluentStatsSnippet;\n"],"mappings":";;;;;;;AAKA,MAAMA,cAAY,YAAW,WAAU;CACrC,MAAM,EAAE;CACR,WAAW;EACT,OAAO,OAAO,IAAI;EAClB,UAAU;EACX;CACD,SAAS;EACP,OAAO,OAAO,MAAM;EACpB,UAAU;EACX;CACF,EAAE;AAEH,MAAM,oBAAmB,UAAS;CAChC,MAAM,EAAE,SAAS;CACjB,MAAM,UAAUA,aAAW;CAE3B,IAAI,QAAQ;AAEZ,SAAQ,MAAR;EACE,KAAK;AACH,WAAQ,oCAAC,WAAQ,WAAW,QAAQ,UAAW;AAC/C;EACF,KAAK;AACH,WAAQ,oCAAC,aAAU,WAAW,QAAQ,YAAa;AACnD;EACF;;AAGF,QAAO;;AAET,+BAAe;;;;AC9Bf,MAAM,YAAY,YAAW,WAAU;CACrC,MAAM,EAAE;CACR,SAAS;EACP,SAAS;EACT,eAAe;EACf,WAAW,MAAM,QAAQ,IAAK;EAC/B;CACD,OAAO;EACL,SAAS;EACT,eAAe;EACf,gBAAgB;EACjB;CACD,eAAe,EAAE;CAClB,EAAE;AAEH,MAAM,sBAAqB,UAAS;CAClC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,OACA,QAAQ,WACR,YACA,SAAS,aACT,OAAO,cACL;CAGJ,IAAI,SAAS;AAEb,KAAI,KAAK,IAAI,UAAU,GAAG,KAAW;EAEnC,IAAI,YAAY,YAAY;AAC5B,WAAS,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;YACtC,KAAK,IAAI,UAAU,GAAG,KAAO;EAEtC,IAAI,YAAY,YAAY;AAC5B,WAAS,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;;CAGjD,IAAI,UAAU;CACd,IAAI,QAAQ;AACZ,KAAI,OAAO,eAAe,UAAU;EAClC,MAAM,SAAS,YAAY,cAAc;AAEzC,YACE,KAAK,IAAI,MAAM,QAAQ,KAAK,KAAK,IAAI,MAAM,GAAG,MAAO,MAAO,EAAE,CAAC,GAAG;AACpE,UAAQ,QAAQ,IAAI,SAAS;;AAG/B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EAAW,SAAQ;EAAW,WAAU;IACtC,MACU,EACb,oCAAC;EAAW,WAAW,QAAQ;EAAM,SAAQ;EAAK,WAAU;IACzD,OACU,EACb,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAACC,4BAAiB,MAAM,QAAS,CAC7B,EACN,oCAAC,SAAI,WAAW,QAAQ,iBACtB,oCAAC,cAAW,SAAQ,aAAW,QAAqB,CAChD,CACF,CACF;;AAGV,iCAAe"}
+{"version":3,"file":"FluentStatsSnippet-DKMsXSfg.js","names":["useStyles","FluentTrendArrow"],"sources":["../src/UI/widgets/FluentComponents/atoms/FluentTrendArrow.jsx","../src/UI/widgets/FluentComponents/atoms/FluentStatsSnippet.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, colors } from '@material-ui/core';\nimport DownArrow from '@material-ui/icons/esm/ArrowDownward';\nimport UpArrow from '@material-ui/icons/esm/ArrowUpward';\n\nconst useStyles = makeStyles(theme => ({\n  root: {},\n  DownArrow: {\n    color: colors.red[500],\n    fontSize: 16,\n  },\n  UpArrow: {\n    color: colors.green[500],\n    fontSize: 16,\n  },\n}));\n\nconst FluentTrendArrow = props => {\n  const { type } = props;\n  const classes = useStyles();\n\n  let trend = '';\n\n  switch (type) {\n    case 'up':\n      trend = <UpArrow className={classes.UpArrow} />;\n      break;\n    case 'down':\n      trend = <DownArrow className={classes.DownArrow} />;\n      break;\n    default:\n  }\n\n  return trend;\n};\nexport default FluentTrendArrow;\n","import React from 'react';\nimport { Typography, makeStyles } from '@material-ui/core';\nimport round from '@extra-number/round';\nimport FluentTrendArrow from './FluentTrendArrow';\n\nconst useStyles = makeStyles(theme => ({\n  root: {},\n  percent: {\n    display: 'flex',\n    flexDirection: 'row',\n    marginTop: theme.spacing(-0.5),\n  },\n  arrow: {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  percentAmount: {},\n}));\n\nconst FluentStatsSnippet = props => {\n  const classes = useStyles(props);\n  const {\n    label,\n    amount: rawAmount,\n    prevAmount,\n    percent: percentProp,\n    trend: trendProp,\n  } = props;\n\n  // @todo Use an Intl formatter\n  let amount = rawAmount;\n  // TODO: Revisit below after Tampa Demo\n  if (Math.abs(rawAmount) > 1_000_000) {\n    //amount = Math.floor(rawAmount / 1_000_000) + 'M';\n    let newNumber = rawAmount / 1_000_000;\n    amount = [Math.round(newNumber * 10) / 10, 'M'];\n  } else if (Math.abs(rawAmount) > 1_000) {\n    //amount = Math.floor(rawAmount / 1_000) + 'K';\n    let newNumber = rawAmount / 1_000;\n    amount = [Math.round(newNumber * 10) / 10, 'K'];\n  }\n\n  let percent = percentProp;\n  let trend = trendProp;\n  if (typeof prevAmount === 'number') {\n    const ratio = (rawAmount - prevAmount) / prevAmount;\n\n    percent =\n      Math.abs(round(ratio * 100, Math.abs(ratio) < 0.01 ? 0.01 : 1)) + '%';\n    trend = ratio < 0 ? 'down' : 'up';\n  }\n\n  return (\n    <div className={classes.root}>\n      <Typography variant=\"overline\" component=\"div\">\n        {label}\n      </Typography>\n      <Typography className={classes.stat} variant=\"h5\" component=\"div\">\n        {amount}\n      </Typography>\n      <div className={classes.percent}>\n        <div className={classes.arrow}>\n          <FluentTrendArrow type={trend} />\n        </div>\n        <div className={classes.percentAmount}>\n          <Typography variant=\"caption\">{percent}</Typography>\n        </div>\n      </div>\n    </div>\n  );\n};\nexport default FluentStatsSnippet;\n"],"mappings":";;;;;;;AAKA,MAAMA,cAAY,YAAW,WAAU;CACrC,MAAM,EAAE;CACR,WAAW;EACT,OAAO,OAAO,IAAI;EAClB,UAAU;EACX;CACD,SAAS;EACP,OAAO,OAAO,MAAM;EACpB,UAAU;EACX;CACF,EAAE;AAEH,MAAM,oBAAmB,UAAS;CAChC,MAAM,EAAE,SAAS;CACjB,MAAM,UAAUA,aAAW;CAE3B,IAAI,QAAQ;AAEZ,SAAQ,MAAR;EACE,KAAK;AACH,WAAQ,oCAAC,WAAQ,WAAW,QAAQ,UAAW;AAC/C;EACF,KAAK;AACH,WAAQ,oCAAC,aAAU,WAAW,QAAQ,YAAa;AACnD;EACF;;AAGF,QAAO;;AAET,+BAAe;;;;AC9Bf,MAAM,YAAY,YAAW,WAAU;CACrC,MAAM,EAAE;CACR,SAAS;EACP,SAAS;EACT,eAAe;EACf,WAAW,MAAM,QAAQ,IAAK;EAC/B;CACD,OAAO;EACL,SAAS;EACT,eAAe;EACf,gBAAgB;EACjB;CACD,eAAe,EAAE;CAClB,EAAE;AAEH,MAAM,sBAAqB,UAAS;CAClC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,OACA,QAAQ,WACR,YACA,SAAS,aACT,OAAO,cACL;CAGJ,IAAI,SAAS;AAEb,KAAI,KAAK,IAAI,UAAU,GAAG,KAAW;EAEnC,IAAI,YAAY,YAAY;AAC5B,WAAS,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;YACtC,KAAK,IAAI,UAAU,GAAG,KAAO;EAEtC,IAAI,YAAY,YAAY;AAC5B,WAAS,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;;CAGjD,IAAI,UAAU;CACd,IAAI,QAAQ;AACZ,KAAI,OAAO,eAAe,UAAU;EAClC,MAAM,SAAS,YAAY,cAAc;AAEzC,YACE,KAAK,IAAI,MAAM,QAAQ,KAAK,KAAK,IAAI,MAAM,GAAG,MAAO,MAAO,EAAE,CAAC,GAAG;AACpE,UAAQ,QAAQ,IAAI,SAAS;;AAG/B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EAAW,SAAQ;EAAW,WAAU;IACtC,MACU,EACb,oCAAC;EAAW,WAAW,QAAQ;EAAM,SAAQ;EAAK,WAAU;IACzD,OACU,EACb,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAACC,4BAAiB,MAAM,QAAS,CAC7B,EACN,oCAAC,SAAI,WAAW,QAAQ,iBACtB,oCAAC,cAAW,SAAQ,aAAW,QAAqB,CAChD,CACF,CACF;;AAGV,iCAAe"}

package/dist/{FluentTabPanel-DZPtDTkV.js → FluentTabPanel-C8kO8Xo-.js}

@@ -21,4 +21,4 @@ FluentTabPanel.propTypes = {
 
 //#endregion
 export { FluentTabPanel as t };
-//# sourceMappingURL=FluentTabPanel-DZPtDTkV.js.map
+//# sourceMappingURL=FluentTabPanel-C8kO8Xo-.js.map

package/dist/{FluentTabPanel-DZPtDTkV.js.map → FluentTabPanel-C8kO8Xo-.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentTabPanel-DZPtDTkV.js","names":[],"sources":["../src/UI/navigation/tabs/defaultTabs/FluentTabPanel.jsx"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Typography, Box } from '@material-ui/core'\n\nexport const FluentTabPanel = (props) => {\n  const { children, value, persistant, index, p = 0, ...other } = props\n\n  return (\n    <div\n      role='tabpanel'\n      hidden={value !== index}\n      id={`simple-tabpanel-${index}`}\n      aria-labelledby={`simple-tab-${index}`}\n      {...other}\n    >\n      {(value === index || persistant) && (\n        <Box p={p}>\n          <Typography component='div'>{children}</Typography>\n        </Box>\n      )}\n    </div>\n  )\n}\n\nFluentTabPanel.propTypes = {\n  children: PropTypes.node,\n  index: PropTypes.any.isRequired,\n  value: PropTypes.any.isRequired\n}\n"],"mappings":";;;;;AAIA,MAAa,kBAAkB,UAAU;CACvC,MAAM,EAAE,UAAU,OAAO,YAAY,OAAO,IAAI,GAAG,GAAG,UAAU;AAEhE,QACE,oCAAC;EACC,MAAK;EACL,QAAQ,UAAU;EAClB,IAAI,mBAAmB;EACvB,mBAAiB,cAAc;EAC/B,GAAI;KAEF,UAAU,SAAS,eACnB,oCAAC,OAAO,KACN,oCAAC,cAAW,WAAU,SAAO,SAAsB,CAC/C,CAEJ;;AAIV,eAAe,YAAY;CACzB,UAAU,UAAU;CACpB,OAAO,UAAU,IAAI;CACrB,OAAO,UAAU,IAAI;CACtB"}
+{"version":3,"file":"FluentTabPanel-C8kO8Xo-.js","names":[],"sources":["../src/UI/navigation/tabs/defaultTabs/FluentTabPanel.jsx"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Typography, Box } from '@material-ui/core'\n\nexport const FluentTabPanel = (props) => {\n  const { children, value, persistant, index, p = 0, ...other } = props\n\n  return (\n    <div\n      role='tabpanel'\n      hidden={value !== index}\n      id={`simple-tabpanel-${index}`}\n      aria-labelledby={`simple-tab-${index}`}\n      {...other}\n    >\n      {(value === index || persistant) && (\n        <Box p={p}>\n          <Typography component='div'>{children}</Typography>\n        </Box>\n      )}\n    </div>\n  )\n}\n\nFluentTabPanel.propTypes = {\n  children: PropTypes.node,\n  index: PropTypes.any.isRequired,\n  value: PropTypes.any.isRequired\n}\n"],"mappings":";;;;;AAIA,MAAa,kBAAkB,UAAU;CACvC,MAAM,EAAE,UAAU,OAAO,YAAY,OAAO,IAAI,GAAG,GAAG,UAAU;AAEhE,QACE,oCAAC;EACC,MAAK;EACL,QAAQ,UAAU;EAClB,IAAI,mBAAmB;EACvB,mBAAiB,cAAc;EAC/B,GAAI;KAEF,UAAU,SAAS,eACnB,oCAAC,OAAO,KACN,oCAAC,cAAW,WAAU,SAAO,SAAsB,CAC/C,CAEJ;;AAIV,eAAe,YAAY;CACzB,UAAU,UAAU;CACpB,OAAO,UAAU,IAAI;CACrB,OAAO,UAAU,IAAI;CACtB"}

package/dist/{GraphCard-Bdh6VeDb.js → GraphCard-oEpMu8jY.js}

@@ -1,5 +1,5 @@
 import { t as AmbientCard } from "./AmbientCard-DhAiVDYD.js";
-import { t as EmptyStateDisplay } from "./EmptyStateDisplay-YOwCw38_.js";
+import { t as EmptyStateDisplay } from "./EmptyStateDisplay-CyINqvWU.js";
 import React from "react";
 import { makeStyles } from "@material-ui/core";
 import clsx from "clsx";
@@ -72,4 +72,4 @@ GraphCard.propTypes = {
 
 //#endregion
 export { GraphCard as t };
-//# sourceMappingURL=GraphCard-Bdh6VeDb.js.map
+//# sourceMappingURL=GraphCard-oEpMu8jY.js.map

package/dist/{GraphCard-Bdh6VeDb.js.map → GraphCard-oEpMu8jY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GraphCard-Bdh6VeDb.js","names":["PropTypes"],"sources":["../src/UI/dataDisplay/GraphCard/GraphCard.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { MuiVegaLite } from '@material-vega/material-ui';\nimport { PropTypes } from 'prop-types';\nimport { AmbientCard } from '../../surfaces/cards/AmbientCard';\nimport { EmptyStateDisplay } from '../EmptyStateDisplay';\nimport { useTranslation } from 'react-i18next';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n  infoPanel: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-around',\n    alignItems: 'center',\n    alignSelf: 'stretch',\n    padding: '10px 32px'\n  },\n  graphSection: {\n    overflow: 'hidden',\n    '& svg': {\n      width: '100%',\n      height: '100%'\n    },\n    '& .vega-embed': {\n      width: '100%',\n      height: '100%'\n    },\n    paddingTop: theme.spacing(1),\n    margin: 0,\n    height: (props) => props?.graphHeight ?? '255px'\n  },\n  emptyStateDisplay: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n  }\n}));\n\n/**\n * `GraphCard` component\n */\nexport const GraphCard = (props) => {\n  const {\n    title,\n    showInfoPanel = true,\n    graphSpecs,\n    children,\n    headerColor,\n    className,\n    noData = false,\n    emptyStatePrimaryText,\n    emptyStateImageSrc,\n    emptyStateIconSize,\n    emptyStateImageWidth,\n    emptyStateClassName,\n    emptyStateIcon,\n    ...otherProps\n  } = props;\n  const classes = useStyles(props);\n  const { t } = useTranslation();\n\n  return (\n    <AmbientCard\n      fullWidth\n      title={title}\n      headerColor={headerColor}\n      {...otherProps}\n    >\n      {!noData ? (\n        <div>\n          {showInfoPanel && <div className={classes.infoPanel}>{children}</div>}\n          <div className={classes.graphSection}>\n            <MuiVegaLite\n              variant='verticalBarChart'\n              background='paper'\n              autoResize\n              actions={false}\n              spec={graphSpecs || {}}\n            />\n          </div>\n        </div>\n      ) : (\n        <div className={clsx(classes.emptyStateDisplay, emptyStateClassName)}>\n          <EmptyStateDisplay\n            primaryText={emptyStatePrimaryText ?? t('No results found')}\n            icon={emptyStateIcon}\n            iconSize={emptyStateIconSize}\n            imageSrc={emptyStateImageSrc}\n            imageWidth={emptyStateImageWidth}\n          />\n        </div>\n      )}\n    </AmbientCard>\n  );\n};\n\nGraphCard.propTypes = {\n  /**\n   * Optional, card title\n   */\n  title: PropTypes.string,\n\n  /**\n   * @type {?object}\n   {\n     graphSpecs: {} object see an example structure in https://vega.github.io/vega-lite/usage/typescript.html\n    }\n   */\n  graphSpecs: PropTypes.object.isRequired,\n\n  /**\n   * Optional, hide or show the top panel\n   */\n  showInfoPanel: PropTypes.bool,\n\n  /**\n   * Optional, content for the info panel behind the graph\n   */\n  children: PropTypes.node,\n\n  /**\n   * Optional, additional properties to apply some styles over the main container\n   */\n  style: PropTypes.object\n};\n"],"mappings":";;;;;;;;;;AASA,MAAM,YAAY,YAAY,WAAW;CACvC,WAAW;EACT,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,WAAW;EACX,SAAS;EACV;CACD,cAAc;EACZ,UAAU;EACV,SAAS;GACP,OAAO;GACP,QAAQ;GACT;EACD,iBAAiB;GACf,OAAO;GACP,QAAQ;GACT;EACD,YAAY,MAAM,QAAQ,EAAE;EAC5B,QAAQ;EACR,SAAS,UAAU,OAAO,eAAe;EAC1C;CACD,mBAAmB;EACjB,WAAW,MAAM,QAAQ,EAAE;EAC3B,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACF,EAAE;;;;AAKH,MAAa,aAAa,UAAU;CAClC,MAAM,EACJ,OACA,gBAAgB,MAChB,YACA,UACA,aACA,WACA,SAAS,OACT,uBACA,oBACA,oBACA,sBACA,qBACA,gBACA,GAAG,eACD;CACJ,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,MAAM,gBAAgB;AAE9B,QACE,oCAAC;EACC;EACO;EACM;EACb,GAAI;IAEH,CAAC,SACA,oCAAC,aACE,iBAAiB,oCAAC,SAAI,WAAW,QAAQ,aAAY,SAAe,EACrE,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC;EACC,SAAQ;EACR,YAAW;EACX;EACA,SAAS;EACT,MAAM,cAAc,EAAE;GACtB,CACE,CACF,GAEN,oCAAC,SAAI,WAAW,KAAK,QAAQ,mBAAmB,oBAAoB,IAClE,oCAAC;EACC,aAAa,yBAAyB,EAAE,mBAAmB;EAC3D,MAAM;EACN,UAAU;EACV,UAAU;EACV,YAAY;GACZ,CACE,CAEI;;AAIlB,UAAU,YAAY;CAIpB,OAAOA,YAAU;CAQjB,YAAYA,YAAU,OAAO;CAK7B,eAAeA,YAAU;CAKzB,UAAUA,YAAU;CAKpB,OAAOA,YAAU;CAClB"}
+{"version":3,"file":"GraphCard-oEpMu8jY.js","names":["PropTypes"],"sources":["../src/UI/dataDisplay/GraphCard/GraphCard.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { MuiVegaLite } from '@material-vega/material-ui';\nimport { PropTypes } from 'prop-types';\nimport { AmbientCard } from '../../surfaces/cards/AmbientCard';\nimport { EmptyStateDisplay } from '../EmptyStateDisplay';\nimport { useTranslation } from 'react-i18next';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n  infoPanel: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-around',\n    alignItems: 'center',\n    alignSelf: 'stretch',\n    padding: '10px 32px'\n  },\n  graphSection: {\n    overflow: 'hidden',\n    '& svg': {\n      width: '100%',\n      height: '100%'\n    },\n    '& .vega-embed': {\n      width: '100%',\n      height: '100%'\n    },\n    paddingTop: theme.spacing(1),\n    margin: 0,\n    height: (props) => props?.graphHeight ?? '255px'\n  },\n  emptyStateDisplay: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n  }\n}));\n\n/**\n * `GraphCard` component\n */\nexport const GraphCard = (props) => {\n  const {\n    title,\n    showInfoPanel = true,\n    graphSpecs,\n    children,\n    headerColor,\n    className,\n    noData = false,\n    emptyStatePrimaryText,\n    emptyStateImageSrc,\n    emptyStateIconSize,\n    emptyStateImageWidth,\n    emptyStateClassName,\n    emptyStateIcon,\n    ...otherProps\n  } = props;\n  const classes = useStyles(props);\n  const { t } = useTranslation();\n\n  return (\n    <AmbientCard\n      fullWidth\n      title={title}\n      headerColor={headerColor}\n      {...otherProps}\n    >\n      {!noData ? (\n        <div>\n          {showInfoPanel && <div className={classes.infoPanel}>{children}</div>}\n          <div className={classes.graphSection}>\n            <MuiVegaLite\n              variant='verticalBarChart'\n              background='paper'\n              autoResize\n              actions={false}\n              spec={graphSpecs || {}}\n            />\n          </div>\n        </div>\n      ) : (\n        <div className={clsx(classes.emptyStateDisplay, emptyStateClassName)}>\n          <EmptyStateDisplay\n            primaryText={emptyStatePrimaryText ?? t('No results found')}\n            icon={emptyStateIcon}\n            iconSize={emptyStateIconSize}\n            imageSrc={emptyStateImageSrc}\n            imageWidth={emptyStateImageWidth}\n          />\n        </div>\n      )}\n    </AmbientCard>\n  );\n};\n\nGraphCard.propTypes = {\n  /**\n   * Optional, card title\n   */\n  title: PropTypes.string,\n\n  /**\n   * @type {?object}\n   {\n     graphSpecs: {} object see an example structure in https://vega.github.io/vega-lite/usage/typescript.html\n    }\n   */\n  graphSpecs: PropTypes.object.isRequired,\n\n  /**\n   * Optional, hide or show the top panel\n   */\n  showInfoPanel: PropTypes.bool,\n\n  /**\n   * Optional, content for the info panel behind the graph\n   */\n  children: PropTypes.node,\n\n  /**\n   * Optional, additional properties to apply some styles over the main container\n   */\n  style: PropTypes.object\n};\n"],"mappings":";;;;;;;;;;AASA,MAAM,YAAY,YAAY,WAAW;CACvC,WAAW;EACT,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,WAAW;EACX,SAAS;EACV;CACD,cAAc;EACZ,UAAU;EACV,SAAS;GACP,OAAO;GACP,QAAQ;GACT;EACD,iBAAiB;GACf,OAAO;GACP,QAAQ;GACT;EACD,YAAY,MAAM,QAAQ,EAAE;EAC5B,QAAQ;EACR,SAAS,UAAU,OAAO,eAAe;EAC1C;CACD,mBAAmB;EACjB,WAAW,MAAM,QAAQ,EAAE;EAC3B,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACF,EAAE;;;;AAKH,MAAa,aAAa,UAAU;CAClC,MAAM,EACJ,OACA,gBAAgB,MAChB,YACA,UACA,aACA,WACA,SAAS,OACT,uBACA,oBACA,oBACA,sBACA,qBACA,gBACA,GAAG,eACD;CACJ,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,MAAM,gBAAgB;AAE9B,QACE,oCAAC;EACC;EACO;EACM;EACb,GAAI;IAEH,CAAC,SACA,oCAAC,aACE,iBAAiB,oCAAC,SAAI,WAAW,QAAQ,aAAY,SAAe,EACrE,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC;EACC,SAAQ;EACR,YAAW;EACX;EACA,SAAS;EACT,MAAM,cAAc,EAAE;GACtB,CACE,CACF,GAEN,oCAAC,SAAI,WAAW,KAAK,QAAQ,mBAAmB,oBAAoB,IAClE,oCAAC;EACC,aAAa,yBAAyB,EAAE,mBAAmB;EAC3D,MAAM;EACN,UAAU;EACV,UAAU;EACV,YAAY;GACZ,CACE,CAEI;;AAIlB,UAAU,YAAY;CAIpB,OAAOA,YAAU;CAQjB,YAAYA,YAAU,OAAO;CAK7B,eAAeA,YAAU;CAKzB,UAAUA,YAAU;CAKpB,OAAOA,YAAU;CAClB"}

package/dist/{HeaderExpander-Coexy8dm.js → HeaderExpander-DYt8poQf.js}

@@ -1,4 +1,4 @@
-import { t as ExtenderToggle } from "./ExtenderToggle-DAaajb90.js";
+import { t as ExtenderToggle } from "./ExtenderToggle-H2x6PXmn.js";
 import React, { useState } from "react";
 import { Collapse, makeStyles, useTheme } from "@material-ui/core";
 import PropTypes from "prop-types";
@@ -50,4 +50,4 @@ HeaderExpander.propTypes = {
 
 //#endregion
 export { HeaderExpander as t };
-//# sourceMappingURL=HeaderExpander-Coexy8dm.js.map
+//# sourceMappingURL=HeaderExpander-DYt8poQf.js.map

package/dist/{HeaderExpander-Coexy8dm.js.map → HeaderExpander-DYt8poQf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"HeaderExpander-Coexy8dm.js","names":[],"sources":["../src/UI/dataDisplay/HeaderExpander.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { makeStyles, Collapse, useTheme } from '@material-ui/core';\nimport { ExtenderToggle } from '../templates/ui/ExtenderToggle';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%'\n  },\n  container: {\n    padding: (props) => (props.open ? theme.spacing(1) : theme.spacing(0.25)),\n    parddingRight: theme.spacing(1),\n    parddingleft: theme.spacing(1),\n    background: (props) =>\n      props.color ? props.color : theme.palette.secondary.main\n  },\n  compactContainer: {\n    padding: 1\n  },\n  lowerShelf: {\n    display: 'flex',\n    borderTop: (props) =>\n      `1px solid ${props.color ? props.color : theme.palette.secondary.main}`\n  },\n  lowerShelfCompact: {\n    display: 'flex'\n  },\n  shelfOptions: {\n    flex: 1,\n    width: '100%'\n  }\n}));\n\nexport const HeaderExpander = (props) => {\n  const classes = useStyles(props);\n  const { children, options, toggleLabel, color, compact } = props;\n\n  const [extendedHeader, setExtendedHeader] = useState(true);\n\n  const toggleExpandedHeader = () => {\n    setExtendedHeader(!extendedHeader);\n  };\n\n  const theme = useTheme();\n\n  return (\n    <div className={classes.root}>\n      <Collapse in={extendedHeader}>\n        <div className={compact ? classes.compactContainer : classes.container}>\n          {' '}\n          {children}{' '}\n        </div>\n      </Collapse>\n      <div className={compact ? classes.lowerShelfCompact : classes.lowerShelf}>\n        <div className={classes.shelfOptions}>{options}</div>\n        <div>\n          <ExtenderToggle\n            onClick={toggleExpandedHeader}\n            open={extendedHeader}\n            toggleLabel={toggleLabel}\n            color={color ? color : theme.palette.secondary.main}\n            compact={compact}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\nHeaderExpander.propTypes = {\n  /**\n   * Contents of container\n   */\n  children: PropTypes.node,\n  /**\n   * Function to trigger panel to open and close\n   */\n  onClick: PropTypes.func,\n  /**\n   * State, if true, will cause panel to open. If false, the panel is closed.\n   */\n  sectionOpen: PropTypes.bool,\n  /**\n   * Shelf below drawer that fills the space left by the toggle button.\n   * Can be used to add things like additional toggles, other buttons,\n   * stats, etc.\n   */\n  options: PropTypes.node,\n  /**\n   * The label that appears on the toggle tab.\n   */\n  toggleLabel: PropTypes.node,\n  /**\n   * The color of the background section and toggle.\n   */\n  color: PropTypes.string\n};\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,OAAO,QACR;CACD,WAAW;EACT,UAAU,UAAW,MAAM,OAAO,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,IAAK;EACxE,eAAe,MAAM,QAAQ,EAAE;EAC/B,cAAc,MAAM,QAAQ,EAAE;EAC9B,aAAa,UACX,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,UAAU;EACvD;CACD,kBAAkB,EAChB,SAAS,GACV;CACD,YAAY;EACV,SAAS;EACT,YAAY,UACV,aAAa,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,UAAU;EACpE;CACD,mBAAmB,EACjB,SAAS,QACV;CACD,cAAc;EACZ,MAAM;EACN,OAAO;EACR;CACF,EAAE;AAEH,MAAa,kBAAkB,UAAU;CACvC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,UAAU,SAAS,aAAa,OAAO,YAAY;CAE3D,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAE1D,MAAM,6BAA6B;AACjC,oBAAkB,CAAC,eAAe;;CAGpC,MAAM,QAAQ,UAAU;AAExB,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,YAAS,IAAI,kBACZ,oCAAC,SAAI,WAAW,UAAU,QAAQ,mBAAmB,QAAQ,aAC1D,KACA,UAAU,IACP,CACG,EACX,oCAAC,SAAI,WAAW,UAAU,QAAQ,oBAAoB,QAAQ,cAC5D,oCAAC,SAAI,WAAW,QAAQ,gBAAe,QAAc,EACrD,oCAAC,aACC,oCAAC;EACC,SAAS;EACT,MAAM;EACO;EACb,OAAO,QAAQ,QAAQ,MAAM,QAAQ,UAAU;EACtC;GACT,CACE,CACF,CACF;;AAGV,eAAe,YAAY;CAIzB,UAAU,UAAU;CAIpB,SAAS,UAAU;CAInB,aAAa,UAAU;CAMvB,SAAS,UAAU;CAInB,aAAa,UAAU;CAIvB,OAAO,UAAU;CAClB"}
+{"version":3,"file":"HeaderExpander-DYt8poQf.js","names":[],"sources":["../src/UI/dataDisplay/HeaderExpander.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { makeStyles, Collapse, useTheme } from '@material-ui/core';\nimport { ExtenderToggle } from '../templates/ui/ExtenderToggle';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%'\n  },\n  container: {\n    padding: (props) => (props.open ? theme.spacing(1) : theme.spacing(0.25)),\n    parddingRight: theme.spacing(1),\n    parddingleft: theme.spacing(1),\n    background: (props) =>\n      props.color ? props.color : theme.palette.secondary.main\n  },\n  compactContainer: {\n    padding: 1\n  },\n  lowerShelf: {\n    display: 'flex',\n    borderTop: (props) =>\n      `1px solid ${props.color ? props.color : theme.palette.secondary.main}`\n  },\n  lowerShelfCompact: {\n    display: 'flex'\n  },\n  shelfOptions: {\n    flex: 1,\n    width: '100%'\n  }\n}));\n\nexport const HeaderExpander = (props) => {\n  const classes = useStyles(props);\n  const { children, options, toggleLabel, color, compact } = props;\n\n  const [extendedHeader, setExtendedHeader] = useState(true);\n\n  const toggleExpandedHeader = () => {\n    setExtendedHeader(!extendedHeader);\n  };\n\n  const theme = useTheme();\n\n  return (\n    <div className={classes.root}>\n      <Collapse in={extendedHeader}>\n        <div className={compact ? classes.compactContainer : classes.container}>\n          {' '}\n          {children}{' '}\n        </div>\n      </Collapse>\n      <div className={compact ? classes.lowerShelfCompact : classes.lowerShelf}>\n        <div className={classes.shelfOptions}>{options}</div>\n        <div>\n          <ExtenderToggle\n            onClick={toggleExpandedHeader}\n            open={extendedHeader}\n            toggleLabel={toggleLabel}\n            color={color ? color : theme.palette.secondary.main}\n            compact={compact}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\nHeaderExpander.propTypes = {\n  /**\n   * Contents of container\n   */\n  children: PropTypes.node,\n  /**\n   * Function to trigger panel to open and close\n   */\n  onClick: PropTypes.func,\n  /**\n   * State, if true, will cause panel to open. If false, the panel is closed.\n   */\n  sectionOpen: PropTypes.bool,\n  /**\n   * Shelf below drawer that fills the space left by the toggle button.\n   * Can be used to add things like additional toggles, other buttons,\n   * stats, etc.\n   */\n  options: PropTypes.node,\n  /**\n   * The label that appears on the toggle tab.\n   */\n  toggleLabel: PropTypes.node,\n  /**\n   * The color of the background section and toggle.\n   */\n  color: PropTypes.string\n};\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,OAAO,QACR;CACD,WAAW;EACT,UAAU,UAAW,MAAM,OAAO,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,IAAK;EACxE,eAAe,MAAM,QAAQ,EAAE;EAC/B,cAAc,MAAM,QAAQ,EAAE;EAC9B,aAAa,UACX,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,UAAU;EACvD;CACD,kBAAkB,EAChB,SAAS,GACV;CACD,YAAY;EACV,SAAS;EACT,YAAY,UACV,aAAa,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,UAAU;EACpE;CACD,mBAAmB,EACjB,SAAS,QACV;CACD,cAAc;EACZ,MAAM;EACN,OAAO;EACR;CACF,EAAE;AAEH,MAAa,kBAAkB,UAAU;CACvC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,UAAU,SAAS,aAAa,OAAO,YAAY;CAE3D,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAE1D,MAAM,6BAA6B;AACjC,oBAAkB,CAAC,eAAe;;CAGpC,MAAM,QAAQ,UAAU;AAExB,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,YAAS,IAAI,kBACZ,oCAAC,SAAI,WAAW,UAAU,QAAQ,mBAAmB,QAAQ,aAC1D,KACA,UAAU,IACP,CACG,EACX,oCAAC,SAAI,WAAW,UAAU,QAAQ,oBAAoB,QAAQ,cAC5D,oCAAC,SAAI,WAAW,QAAQ,gBAAe,QAAc,EACrD,oCAAC,aACC,oCAAC;EACC,SAAS;EACT,MAAM;EACO;EACb,OAAO,QAAQ,QAAQ,MAAM,QAAQ,UAAU;EACtC;GACT,CACE,CACF,CACF;;AAGV,eAAe,YAAY;CAIzB,UAAU,UAAU;CAIpB,SAAS,UAAU;CAInB,aAAa,UAAU;CAMvB,SAAS,UAAU;CAInB,aAAa,UAAU;CAIvB,OAAO,UAAU;CAClB"}

package/dist/{IconLibrary-BcnAXrDy.js → IconLibrary-BXrFjEOe.js}

@@ -2,7 +2,7 @@ import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
 import { n as UnityIcon } from "./UnityFluentIcon-DrASIcTF.js";
 import { n as unityIcons } from "./UnityIconLibrary-CjIwzfjv.js";
 import { t as fluentLibraryIcons } from "./LibraryData-D8Uai7Yd.js";
-import { t as FluentIconKey_default } from "./FluentIconKey-BWCFV9Qs.js";
+import { t as FluentIconKey_default } from "./FluentIconKey-D8jK0HK5.js";
 import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { Button, Divider, Fade, InputAdornment, Paper, TextField, Typography, makeStyles } from "@material-ui/core";
 import clsx from "clsx";
@@ -177,4 +177,4 @@ var IconLibrary_default = memo(IconLibrary);
 
 //#endregion
 export { IconLibrary_default as t };
-//# sourceMappingURL=IconLibrary-BcnAXrDy.js.map
+//# sourceMappingURL=IconLibrary-BXrFjEOe.js.map

package/dist/{IconLibrary-BcnAXrDy.js.map → IconLibrary-BXrFjEOe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"IconLibrary-BcnAXrDy.js","names":["useStyles","FluentIconKey","icons","value","SelectedLibraryItem"],"sources":["../src/utilities/iconLibrary/SelectedLibraryItem.jsx","../src/utilities/iconLibrary/IconLibrary.jsx"],"sourcesContent":["import React from 'react';\nimport { Button, makeStyles, Paper, Typography } from '@material-ui/core';\nimport { Header } from '../../stories/Header.jsx';\nimport { FluentIcon } from './FluentIcon.jsx';\nimport clsx from 'clsx';\nimport { UnityIcon } from './UnityIcon';\nimport { Divider } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    width: 320,\n  },\n  item: {\n    width: 180,\n    height: 180,\n  },\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  button: {\n    marginTop: theme.spacing(2),\n  },\n  images: {\n    height: theme.spacing(100),\n    width: theme.spacing(100),\n  },\n  divider: {\n    marginBottom: theme.spacing(2),\n  },\n}));\n\nconst SelectedLibraryItem = props => {\n  const classes = useStyles();\n  const { addItem, item, title } = props;\n  return (\n    <div className={classes.root}>\n      <div>\n        <Typography variant=\"overline\">{title}</Typography>\n      </div>\n      <div className={classes.divider}>\n        <Divider />\n      </div>\n      <div className={classes.container}>\n        <div>\n          <Paper\n            variant=\"outlined\"\n            className={clsx(classes.item, classes.container)}\n          >\n            {item.type === 'unity' ? (\n              <UnityIcon component={item.icon} size=\"showcase\" />\n            ) : (\n              <FluentIcon component={item.icon} size=\"showcase\" />\n            )}\n          </Paper>\n          <div className={classes.container}>\n            <div>\n              <Typography>{item.label}</Typography>\n            </div>\n            <div className={classes.button}>\n              <Button\n                variant=\"outlined\"\n                onClick={() => addItem(item)}\n                style={{ textTransform: 'none' }}\n              >\n                {title}\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default SelectedLibraryItem;\n","import React, { useState, useCallback, useEffect, useMemo, memo } from 'react';\nimport {\n  makeStyles,\n  Divider,\n  Fade,\n  TextField,\n  InputAdornment,\n} from '@material-ui/core';\nimport { fluentLibraryIcons } from '../../assets/unityIcons/LibraryData';\nimport FluentIconKey  from '../../UI/dataDisplay/map/FluentIconKey';\nimport SelectedLibraryItem from './SelectedLibraryItem';\nimport { FluentIcon } from './FluentIcon';\nimport { SearchIcon } from '@fluentui/react-icons';\nimport { unityIcons } from './UnityIconLibrary';\nimport { debounce } from 'lodash';\nimport InfiniteScroll from 'react-infinite-scroll-component';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n    height: 400,\n  },\n  divider: {\n    marginLeft: theme.spacing(2),\n    marginRight: theme.spacing(2),\n    height: 400,\n  },\n  selection: {\n    display: 'flex',\n    flexDirection: 'row',\n  },\n  search: {\n    marginLeft: theme.spacing(2),\n    width: 312,\n  },\n  iconsContainer: {\n    minWidth: '76%',\n    overflow: 'auto',\n  },\n  input: {\n    height: 34,\n  },\n  formTextInput: {\n    fontSize: 13,\n  },\n  labelRoot: {\n    fontSize: 13,\n  },\n}));\n\nconst IconLibrary = props => {\n  const { addItem, title, selectedIconName } = props;\n  const classes = useStyles();\n  const [selectedIcon, setSelectedIcon] = useState(fluentLibraryIcons[0]);\n  const [filteredFluentIcons, setFilteredFluentIcons] = useState([]);\n  const [icons, setIcons] = useState([]);\n  const [hasMoreToScroll, setHasMoreToScroll] = useState(true);\n  const [searchValue, setSearchValue] = useState('');\n\n  const selectItem = useCallback(item => {\n    setSelectedIcon(item);\n  }, []);\n\n  const combinedLibraryIcons = useMemo(() => {\n    return fluentLibraryIcons.concat(unityIcons);\n  }, []);\n\n  const iconListObj = useMemo(() => {\n    return combinedLibraryIcons.reduce((iconList, item) => {\n      const iconObj = {\n        id: item.id,\n        label: item.label,\n        icon: (\n          <FluentIconKey\n            key={item.id}\n            icon={item.icon}\n            tooltip={item.label}\n            select={() => selectItem(item)}\n            iconType={item.type}\n          />\n        ),\n      };\n      iconList.push(iconObj);\n      return iconList;\n    }, []);\n  }, [combinedLibraryIcons, selectItem]);\n\n  const getSearchableIcons = useCallback(\n    value => {\n      let icons = [];\n      if (!value) {\n        icons = iconListObj.map(item => item.icon);\n      } else {\n        icons = iconListObj\n          .filter(item => item.label.toLowerCase().includes(value))\n          .map(item => item.icon);\n      }\n      setFilteredFluentIcons(icons);\n    },\n    [iconListObj]\n  );\n\n  const handleFluentIconSearch = useCallback(\n    event => {\n      const value = event.target.value;\n      setSearchValue(value);\n      const debounceSearch = debounce(value => {\n        getSearchableIcons(value);\n      }, 200);\n\n      debounceSearch(value);\n    },\n    [getSearchableIcons]\n  );\n\n  const fetchMoreIcons = useCallback(() => {\n    if (filteredFluentIcons.length <= icons.length) {\n      setHasMoreToScroll(false);\n      return;\n    }\n    const updatedIcons = [...icons];\n    setIcons(\n      updatedIcons.concat(\n        filteredFluentIcons.slice(icons.length, icons.length + 30)\n      )\n    );\n  }, [icons, filteredFluentIcons]);\n\n  useEffect(() => {\n    setIcons(filteredFluentIcons.slice(0, 150));\n    setHasMoreToScroll(filteredFluentIcons.length > 150);\n  }, [filteredFluentIcons]);\n\n  useEffect(() => {\n    getSearchableIcons();\n  }, [getSearchableIcons]);\n\n  useEffect(() => {\n    const initialIcon = combinedLibraryIcons.find(\n      icon => icon.id === selectedIconName\n    );\n    setSelectedIcon(initialIcon);\n  }, [combinedLibraryIcons, selectedIconName]);\n\n  return (\n    <>\n      <TextField\n        className={classes.search}\n        id=\"search\"\n        placeholder=\"Search icons\"\n        variant=\"outlined\"\n        margin=\"normal\"\n        size=\"small\"\n        value={searchValue}\n        onChange={handleFluentIconSearch}\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <FluentIcon component={SearchIcon} />\n            </InputAdornment>\n          ),\n          classes: {\n            root: classes.input,\n            input: classes.formTextInput,\n          },\n        }}\n        InputLabelProps={{\n          classes: {\n            root: classes.labelRoot,\n          },\n        }}\n      />\n      <InfiniteScroll\n        dataLength={icons.length}\n        next={fetchMoreIcons}\n        hasMore={hasMoreToScroll}\n        scrollableTarget=\"scrollableDiv\"\n      >\n        <div className={classes.root}>\n          <div className={classes.iconsContainer} id=\"scrollableDiv\">\n            {icons}\n          </div>\n          {selectedIcon && (\n            <div className={classes.selection}>\n              <div className={classes.divider}>\n                <Divider orientation=\"vertical\" />\n              </div>\n              {selectedIcon && (\n                <Fade in={selectedIcon}>\n                  <div>\n                    <SelectedLibraryItem\n                      addItem={addItem}\n                      item={selectedIcon}\n                      title={title}\n                    />\n                  </div>\n                </Fade>\n              )}\n            </div>\n          )}\n        </div>\n      </InfiniteScroll>\n    </>\n  );\n};\n\nexport default memo(IconLibrary);\n"],"mappings":"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"}
+{"version":3,"file":"IconLibrary-BXrFjEOe.js","names":["useStyles","FluentIconKey","icons","value","SelectedLibraryItem"],"sources":["../src/utilities/iconLibrary/SelectedLibraryItem.jsx","../src/utilities/iconLibrary/IconLibrary.jsx"],"sourcesContent":["import React from 'react';\nimport { Button, makeStyles, Paper, Typography } from '@material-ui/core';\nimport { Header } from '../../stories/Header.jsx';\nimport { FluentIcon } from './FluentIcon.jsx';\nimport clsx from 'clsx';\nimport { UnityIcon } from './UnityIcon';\nimport { Divider } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    width: 320,\n  },\n  item: {\n    width: 180,\n    height: 180,\n  },\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  button: {\n    marginTop: theme.spacing(2),\n  },\n  images: {\n    height: theme.spacing(100),\n    width: theme.spacing(100),\n  },\n  divider: {\n    marginBottom: theme.spacing(2),\n  },\n}));\n\nconst SelectedLibraryItem = props => {\n  const classes = useStyles();\n  const { addItem, item, title } = props;\n  return (\n    <div className={classes.root}>\n      <div>\n        <Typography variant=\"overline\">{title}</Typography>\n      </div>\n      <div className={classes.divider}>\n        <Divider />\n      </div>\n      <div className={classes.container}>\n        <div>\n          <Paper\n            variant=\"outlined\"\n            className={clsx(classes.item, classes.container)}\n          >\n            {item.type === 'unity' ? (\n              <UnityIcon component={item.icon} size=\"showcase\" />\n            ) : (\n              <FluentIcon component={item.icon} size=\"showcase\" />\n            )}\n          </Paper>\n          <div className={classes.container}>\n            <div>\n              <Typography>{item.label}</Typography>\n            </div>\n            <div className={classes.button}>\n              <Button\n                variant=\"outlined\"\n                onClick={() => addItem(item)}\n                style={{ textTransform: 'none' }}\n              >\n                {title}\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default SelectedLibraryItem;\n","import React, { useState, useCallback, useEffect, useMemo, memo } from 'react';\nimport {\n  makeStyles,\n  Divider,\n  Fade,\n  TextField,\n  InputAdornment,\n} from '@material-ui/core';\nimport { fluentLibraryIcons } from '../../assets/unityIcons/LibraryData';\nimport FluentIconKey  from '../../UI/dataDisplay/map/FluentIconKey';\nimport SelectedLibraryItem from './SelectedLibraryItem';\nimport { FluentIcon } from './FluentIcon';\nimport { SearchIcon } from '@fluentui/react-icons';\nimport { unityIcons } from './UnityIconLibrary';\nimport { debounce } from 'lodash';\nimport InfiniteScroll from 'react-infinite-scroll-component';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n    height: 400,\n  },\n  divider: {\n    marginLeft: theme.spacing(2),\n    marginRight: theme.spacing(2),\n    height: 400,\n  },\n  selection: {\n    display: 'flex',\n    flexDirection: 'row',\n  },\n  search: {\n    marginLeft: theme.spacing(2),\n    width: 312,\n  },\n  iconsContainer: {\n    minWidth: '76%',\n    overflow: 'auto',\n  },\n  input: {\n    height: 34,\n  },\n  formTextInput: {\n    fontSize: 13,\n  },\n  labelRoot: {\n    fontSize: 13,\n  },\n}));\n\nconst IconLibrary = props => {\n  const { addItem, title, selectedIconName } = props;\n  const classes = useStyles();\n  const [selectedIcon, setSelectedIcon] = useState(fluentLibraryIcons[0]);\n  const [filteredFluentIcons, setFilteredFluentIcons] = useState([]);\n  const [icons, setIcons] = useState([]);\n  const [hasMoreToScroll, setHasMoreToScroll] = useState(true);\n  const [searchValue, setSearchValue] = useState('');\n\n  const selectItem = useCallback(item => {\n    setSelectedIcon(item);\n  }, []);\n\n  const combinedLibraryIcons = useMemo(() => {\n    return fluentLibraryIcons.concat(unityIcons);\n  }, []);\n\n  const iconListObj = useMemo(() => {\n    return combinedLibraryIcons.reduce((iconList, item) => {\n      const iconObj = {\n        id: item.id,\n        label: item.label,\n        icon: (\n          <FluentIconKey\n            key={item.id}\n            icon={item.icon}\n            tooltip={item.label}\n            select={() => selectItem(item)}\n            iconType={item.type}\n          />\n        ),\n      };\n      iconList.push(iconObj);\n      return iconList;\n    }, []);\n  }, [combinedLibraryIcons, selectItem]);\n\n  const getSearchableIcons = useCallback(\n    value => {\n      let icons = [];\n      if (!value) {\n        icons = iconListObj.map(item => item.icon);\n      } else {\n        icons = iconListObj\n          .filter(item => item.label.toLowerCase().includes(value))\n          .map(item => item.icon);\n      }\n      setFilteredFluentIcons(icons);\n    },\n    [iconListObj]\n  );\n\n  const handleFluentIconSearch = useCallback(\n    event => {\n      const value = event.target.value;\n      setSearchValue(value);\n      const debounceSearch = debounce(value => {\n        getSearchableIcons(value);\n      }, 200);\n\n      debounceSearch(value);\n    },\n    [getSearchableIcons]\n  );\n\n  const fetchMoreIcons = useCallback(() => {\n    if (filteredFluentIcons.length <= icons.length) {\n      setHasMoreToScroll(false);\n      return;\n    }\n    const updatedIcons = [...icons];\n    setIcons(\n      updatedIcons.concat(\n        filteredFluentIcons.slice(icons.length, icons.length + 30)\n      )\n    );\n  }, [icons, filteredFluentIcons]);\n\n  useEffect(() => {\n    setIcons(filteredFluentIcons.slice(0, 150));\n    setHasMoreToScroll(filteredFluentIcons.length > 150);\n  }, [filteredFluentIcons]);\n\n  useEffect(() => {\n    getSearchableIcons();\n  }, [getSearchableIcons]);\n\n  useEffect(() => {\n    const initialIcon = combinedLibraryIcons.find(\n      icon => icon.id === selectedIconName\n    );\n    setSelectedIcon(initialIcon);\n  }, [combinedLibraryIcons, selectedIconName]);\n\n  return (\n    <>\n      <TextField\n        className={classes.search}\n        id=\"search\"\n        placeholder=\"Search icons\"\n        variant=\"outlined\"\n        margin=\"normal\"\n        size=\"small\"\n        value={searchValue}\n        onChange={handleFluentIconSearch}\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <FluentIcon component={SearchIcon} />\n            </InputAdornment>\n          ),\n          classes: {\n            root: classes.input,\n            input: classes.formTextInput,\n          },\n        }}\n        InputLabelProps={{\n          classes: {\n            root: classes.labelRoot,\n          },\n        }}\n      />\n      <InfiniteScroll\n        dataLength={icons.length}\n        next={fetchMoreIcons}\n        hasMore={hasMoreToScroll}\n        scrollableTarget=\"scrollableDiv\"\n      >\n        <div className={classes.root}>\n          <div className={classes.iconsContainer} id=\"scrollableDiv\">\n            {icons}\n          </div>\n          {selectedIcon && (\n            <div className={classes.selection}>\n              <div className={classes.divider}>\n                <Divider orientation=\"vertical\" />\n              </div>\n              {selectedIcon && (\n                <Fade in={selectedIcon}>\n                  <div>\n                    <SelectedLibraryItem\n                      addItem={addItem}\n                      item={selectedIcon}\n                      title={title}\n                    />\n                  </div>\n                </Fade>\n              )}\n            </div>\n          )}\n        </div>\n      </InfiniteScroll>\n    </>\n  );\n};\n\nexport default memo(IconLibrary);\n"],"mappings":"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"}

package/dist/{ImportDataFromFileMapping-BIcQmKll.js → ImportDataFromFileMapping-Dy1iJMkI.js}

@@ -16,9 +16,9 @@ import { t as usePromotedMethodEntity } from "./usePromotedMethodEntity-B4rk75tH
 import { t as AmbientTextField } from "./AmbientTextField-CdnqPJUw.js";
 import { t as Divider$1 } from "./Divider-B63XWSBY.js";
 import { t as AmbientAutoComplete } from "./AmbientAutoComplete-NohpvB31.js";
-import { t as DragDropFileUpload } from "./DragDropFileUpload-CVnUu-6f.js";
-import { t as CompactDataListItem } from "./CompactDataListItem-BB0gf0JD.js";
-import { t as AmbientStepper } from "./AmbientStepper-BkhoDtpx.js";
+import { t as DragDropFileUpload } from "./DragDropFileUpload-C0Jho_xA.js";
+import { t as CompactDataListItem } from "./CompactDataListItem-C3_Ro16-.js";
+import { t as AmbientStepper } from "./AmbientStepper-DSpZnJog.js";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Divider, Typography } from "@material-ui/core";
 import { ChromeBackMirroredIcon } from "@fluentui/react-icons";
@@ -566,4 +566,4 @@ const ImportDataFromFileMapping = (props) => {
 
 //#endregion
 export { handleTextFileUpload as a, handleJsonFileUpload as i, FileImportConfigCard as n, handleExcelFileUpload as r, ImportDataFromFileMapping as t };
-//# sourceMappingURL=ImportDataFromFileMapping-BIcQmKll.js.map
+//# sourceMappingURL=ImportDataFromFileMapping-Dy1iJMkI.js.map