udp-react-enterprise-component-library 25.18.1-beta.54 → 25.18.1-beta.56

package/dist/{FieldArrayCard-C1I5_qJ4.js.map → FieldArrayCard-Ds_ysYWL.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldArrayCard-C1I5_qJ4.js","names":["Grid","AutocompleteFinalField","DateRangeField","FormControlLabel","Typography","Grid","SearchSideSheet"],"sources":["../src/UI/inputs/fieldArrayCard/fieldArrayCardEnum.ts","../src/UI/inputs/fieldArrayCard/SearchSideSheet.jsx","../src/UI/inputs/fieldArrayCard/AutocompleteFinalField.jsx","../src/UI/inputs/fieldArrayCard/DateRangeField.jsx","../src/UI/inputs/fieldArrayCard/FieldArrayCard.jsx"],"sourcesContent":["export enum FieldType {\n  Text = 'text',\n  Date = 'date',\n  DateRange = 'dateRange',\n  Time = 'time',\n  DateTime = 'dateTime',\n  Toggle = 'toggle',\n  Checkbox = 'checkbox',\n  DropdownMenu = 'dropdownMenu',\n}","import React, { useCallback, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { AmbientGridTemplate } from '../../templates/deprecated/AmbientGridTemplate/AmbientGridTemplate';\nimport { apiMutate } from '../../../utilities/useAxiosMutate';\nimport { FilterOperators } from '../../../models/SearchOperator';\nimport { SideSheet } from '../../surfaces/SideSheet';\nimport { useAgGridApi } from '../../../utilities/aggrid/AgTable';\n\nconst SearchSideSheet = props => {\n  const {\n    open,\n    handleClose,\n    exclude,\n    title,\n    productApiBase,\n    searchApi,\n    colDefs = [],\n    gridTitle,\n    idField,\n    formIdField,\n    handleSearch,\n    width = '800px',\n    height='58vh'\n  } = props;\n  const [selectedData, setSelectedData] = useState([]);\n  const { t } = useTranslation();\n  const { gridApi, onGridReady, gridColumnApi } = useAgGridApi();\n  const paginationPageSize = 20;\n\n  // TODO: use queryId or new data grid from stencil\n  const searchData = useCallback(\n    async data =>\n      apiMutate(\n        productApiBase,\n        searchApi,\n        {\n          method: 'post',\n        },\n        data\n      ),\n    [productApiBase, searchApi]\n  );\n\n  const onSelectionChanged = useCallback(() => {\n    const selectedRows = gridApi?.getSelectedRows() ?? [];\n    setSelectedData(selectedRows);\n  }, [gridApi]);\n\n  const handleCloseSideSheet = useCallback(\n    data => {\n      handleClose(data);\n      setSelectedData([]);\n    },\n    [handleClose]\n  );\n\n  const dataSource = useMemo(\n    () => ({\n      getRows: async ({ request, success, fail }) => {\n        if (handleSearch) {\n          handleSearch(paginationPageSize, request, success, fail);\n          return;\n        }\n        const filterElements = request?.filterModel\n          ? Object.entries(request.filterModel)?.map(([key, value]) => {\n              return {\n                searchField: key,\n                searchOperator: FilterOperators[value?.type],\n                searchValue: value?.filter,\n              };\n            })\n          : [];\n\n        const orderElements = request?.sortModel\n          ? request.sortModel?.map(sortObj => {\n              return {\n                sortColumn: sortObj?.colId,\n                sortDirection: sortObj?.sort?.toUpperCase(),\n              };\n            })\n          : [];\n        await searchData({\n          data: {\n            filterElements: filterElements,\n            orderElements: orderElements,\n            pagesize: paginationPageSize,\n            pageNumber: (request?.startRow ?? 0) / paginationPageSize + 1,\n          },\n        })\n          .then(response => {\n            success({\n              rowData: response.data?.pageList,\n              rowCount: response.data?.total,\n            });\n          })\n          .catch(error => {\n            fail();\n          });\n\n      },\n    }),\n    [searchData, handleSearch]\n  );\n  return (\n    <SideSheet\n      open={open}\n      onClose={() => handleCloseSideSheet()}\n      title={title}\n      width={width}\n      buttonLabel={t('Choose')}\n      onSubmit={() => {\n        handleCloseSideSheet(selectedData);\n      }}\n    >\n      <AmbientGridTemplate\n        title={gridTitle}\n        rowModelType=\"serverSide\"\n        serverSideDatasource={dataSource}\n        cacheBlockSize={paginationPageSize}\n        serverSideStoreType=\"partial\"\n        paginationPageSize={paginationPageSize}\n        columnDefs={[\n          {\n            field: '',\n            checkboxSelection: true,\n            maxWidth: 60,\n            minWidth: 60,\n            cellRenderer: params => {\n              console.log({\n                exclude,\n                formIdField,\n                idField,\n                bool: exclude?.find(\n                  selectedItem =>\n                    selectedItem[formIdField] === params.data?.[idField]\n                ),\n              });\n              if (\n                params?.data &&\n                !!exclude?.find(\n                  selectedItem =>\n                    selectedItem[formIdField] === params.data?.[idField]\n                )\n              ) {\n                params.node.setSelected(true);\n              }\n            },\n          },\n          ...colDefs,\n        ]}\n        hideGroupTab\n        hideColumnTab\n        suppressRowClickSelection={true}\n        onSelectionChanged={onSelectionChanged}\n        rowSelection=\"multiple\"\n        api={gridApi}\n        gridReady={onGridReady}\n        columnApi={gridColumnApi}\n        dynamicSizing={true}\n        height={height}\n      />\n    </SideSheet>\n  );\n};\n\nexport default SearchSideSheet;\n","import React, { useMemo } from 'react';\nimport { FluentTextFieldAutoComplete } from '../textField/FluentTextFieldAutoComplete';\n\n// this is only to used in FieldArrayCard\nconst AutocompleteFinalField = props => {\n  const { value, options, idField = 'id' ,...otherProps } = props;\n\n  const currentValue = useMemo(() => {\n    if (typeof value === 'object') {\n      return value;\n    }\n\n    return options.find(option => option[idField] === value) || null;\n  }, [idField, options, value]);\n\n  return (\n    <FluentTextFieldAutoComplete\n      {...otherProps}\n      options={options}\n      value={currentValue}\n    />\n  );\n};\n\nexport default AutocompleteFinalField;\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Field } from '../../../utilities/form';\nimport { FluentDatePicker } from '../pickers/FluentDatePicker';\nimport { Grid } from '../../Grid';\n\nconst DateRangeField = props => {\n  const {\n    fieldName,\n    startDateProps = {},\n    endDateProps = {},\n    sameRow = false,\n    initialValues,\n  } = props;\n  const [maxStartDate, setMaxStartDate] = useState();\n  const [minEndDate, setMinEndDate] = useState();\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    const currentStartDate = initialValues[startDateProps?.name ?? 'startDate'];\n    if (currentStartDate) {\n      let minDate = new Date(currentStartDate);\n      minDate.setDate(minDate?.getDate() + 1);\n      setMinEndDate(minDate);\n    } else {\n      setMinEndDate(undefined);\n    }\n  }, [initialValues, startDateProps.name]);\n\n  useEffect(() => {\n    const currentEndDate = initialValues[endDateProps?.name ?? 'endDate'];\n    if (currentEndDate) {\n      let maxDate = new Date(currentEndDate);\n      maxDate.setDate(maxDate?.getDate() - 1);\n      maxDate.setHours(0, 0, 0, 0);\n      setMaxStartDate(maxDate);\n    } else {\n      setMaxStartDate(undefined);\n    }\n  }, [endDateProps.name, initialValues]);\n\n  return (\n    <Grid container spacing={sameRow ? 2 : 0}>\n      <Grid item xs={12} sm={sameRow ? 6 : 12}>\n        <Field\n          {...startDateProps}\n          parse={value => (value ? value : null)}\n          format={value => (value ? value : null)}\n          label={startDateProps?.label ?? t('Start Date')}\n          name={`${fieldName}.${startDateProps?.name ?? 'startDate'}`}\n          key={`${fieldName}.${startDateProps?.name ?? 'startDate'}`}\n          component={FluentDatePicker}\n          size=\"small\"\n          maxDate={maxStartDate}\n          allowNull\n        />\n      </Grid>\n      <Grid item xs={12} sm={sameRow ? 6 : 12}>\n        <Field\n          {...endDateProps}\n          parse={value => value ?? null}\n          format={value => value ?? null}\n          label={endDateProps?.label ?? t('End Date')}\n          name={`${fieldName}.${endDateProps?.name ?? 'endDate'}`}\n          key={`${fieldName}.${endDateProps?.name ?? 'endDate'}`}\n          component={FluentDatePicker}\n          size=\"small\"\n          minDate={minEndDate}\n          allowNull\n        />\n      </Grid>\n    </Grid>\n  );\n};\n\nexport default DateRangeField;\n","import { AddIcon, DeleteIcon } from '@fluentui/react-icons';\nimport { makeStyles } from '@material-ui/core';\nimport React, { useCallback, useState } from 'react';\nimport { FieldArray } from 'react-final-form-arrays';\nimport { useTranslation } from 'react-i18next';\nimport SearchSideSheet from './SearchSideSheet';\nimport AutocompleteFinalField from './AutocompleteFinalField';\nimport DateRangeField from './DateRangeField';\nimport { FieldType } from './fieldArrayCardEnum';\nimport { AmbientCard } from '../../surfaces/cards/AmbientCard';\nimport { DateTimeField } from '../datetimes/DateTimeField';\nimport { EmptyStateDisplay } from '../../dataDisplay/EmptyStateDisplay';\nimport { Field } from '../../../utilities/form';\nimport { FluentCheckbox } from '../checkbox/FluentCheckbox';\nimport { FluentDatePicker } from '../pickers/FluentDatePicker';\nimport { FluentTextField } from '../textField/FluentTextField';\nimport { FluentTimePicker } from '../pickers/FluentTimePicker';\nimport { FluentToggle } from '../toggle/FluentToggle';\nimport { FormControlLabel } from '../../utilityDisplay/FormControlLabel';\nimport { Grid } from '../../Grid';\nimport { IconButtonWithTooltip } from '../buttons/IconButtonWithToolTip';\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport { Typography } from '../../dataDisplay/typography/Typography';\n\nconst useStyles = makeStyles(theme => ({\n  toggleWrapper: {\n    marginLeft: theme.spacing(-0.1),\n    gap: theme.spacing(1),\n    marginTop: theme.spacing(0.8),\n  },\n  checkboxField: {\n    marginLeft: theme.spacing(-1.1),\n  },\n  sectionHeader: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    marginBottom: theme.spacing(1),\n  },\n  fieldsWrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  cardsWrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(2),\n  },\n  cardHeader: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n  },\n}));\n\nexport const FieldArrayCard = props => {\n  const {\n    title = ' ',\n    fieldArrayName,\n    getRowTitle,\n    fieldConfig,\n    removeTopLayoutUnit = false,\n    defaultAddedItemValues,\n    //search sidesheet props\n    enableSearchSideSheet,\n    searchSideSheetTitle,\n    searchFieldId = 'id',\n    formFieldId = 'id',\n    formatAddedSearchItems,\n    productApiBase,\n    searchApi,\n    searchGridColDefs,\n    searchGridTitle,\n    handleSearch,\n    disableExcludeInSearch = false,\n    searchSideSheetWidth,\n    searchSideSheetHeight,\n  } = props;\n  const classes = useStyles();\n  const [openSideSheet, setOpenSideSheet] = useState(false);\n  const { t } = useTranslation();\n\n  const getField = useCallback(\n    (finalFieldName, config, fieldObj) => {\n      const { fieldName, fieldType, fieldLabel, componentProps } = config;\n\n      let fieldComponent = null;\n\n      switch (fieldType) {\n        case FieldType.DropdownMenu:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={AutocompleteFinalField}\n              label={fieldLabel}\n            />\n          );\n          break;\n        case FieldType.Date:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={FluentDatePicker}\n              label={fieldLabel}\n              size=\"small\"\n              allowNull\n            />\n          );\n          break;\n        case FieldType.DateRange:\n          fieldComponent = (\n            <DateRangeField\n              {...componentProps}\n              fieldName={finalFieldName}\n              initialValues={fieldObj}\n            />\n          );\n          break;\n        case FieldType.Time:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={FluentTimePicker}\n              label={fieldLabel}\n              size=\"small\"\n            />\n          );\n          break;\n        case FieldType.DateTime:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={DateTimeField}\n              label={fieldLabel}\n              size=\"small\"\n              allowNull\n            />\n          );\n          break;\n        case FieldType.Toggle:\n          fieldComponent = (\n            <FormControlLabel\n              control={\n                <Field\n                  defaultChecked={false}\n                  {...componentProps}\n                  name={`${finalFieldName}.${fieldName}`}\n                  component={FluentToggle}\n                  type=\"checkbox\"\n                />\n              }\n              label={fieldLabel}\n              className={classes.toggleWrapper}\n            />\n          );\n          break;\n        case FieldType.Checkbox:\n          fieldComponent = (\n            <FormControlLabel\n              control={\n                <Field\n                  defaultChecked={false}\n                  {...componentProps}\n                  name={`${finalFieldName}.${fieldName}`}\n                  component={FluentCheckbox}\n                  type=\"checkbox\"\n                />\n              }\n              label={fieldLabel}\n              className={classes.checkboxField}\n            />\n          );\n          break;\n        default:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={FluentTextField}\n              label={fieldLabel}\n            />\n          );\n          break;\n      }\n\n      return fieldComponent;\n    },\n    [classes.checkboxField, classes.toggleWrapper]\n  );\n\n  const handleCloseSideSheet = useCallback(\n    (selectedRecords, fieldArray) => {\n      const formattedRecords = formatAddedSearchItems\n        ? formatAddedSearchItems(selectedRecords ?? [])\n        : selectedRecords;\n\n      if (formattedRecords?.length) {\n        for (const record of formattedRecords) {\n          if (\n            disableExcludeInSearch ||\n            !!!fieldArray?.value?.find(\n              item => item[formFieldId] === record[formFieldId]\n            )\n          )\n            fieldArray.push(record);\n        }\n      }\n\n      setOpenSideSheet(false);\n    },\n    [disableExcludeInSearch, formFieldId, formatAddedSearchItems]\n  );\n\n  const handleAddField = useCallback(\n    fields => {\n      if (enableSearchSideSheet) {\n        setOpenSideSheet(true);\n      } else {\n        if (defaultAddedItemValues) {\n          fields.push(defaultAddedItemValues);\n        } else {\n          fields.push({});\n        }\n      }\n    },\n    [defaultAddedItemValues, enableSearchSideSheet]\n  );\n\n  return (\n    <div>\n      <FieldArray name={fieldArrayName}>\n        {({ fields }) => {\n          return (\n            <div>\n              <div className={classes.sectionHeader}>\n                <div>\n                  {title && <Typography variant=\"h6\">{title}</Typography>}\n                </div>\n                <IconButtonWithTooltip\n                  onClick={() => {\n                    handleAddField(fields);\n                  }}\n                  icon={AddIcon}\n                  title={t('Add')}\n                />\n              </div>\n\n              <div className={classes.cardsWrapper}>\n                {fields?.value?.length > 0 ? (\n                  fields.map((name, index) => {\n                    const rowTitle =\n                      getRowTitle && getRowTitle(fields?.value?.[index]);\n                    return (\n                      <AmbientCard fullWidth>\n                        <div className={classes.cardHeader}>\n                          <Typography variant=\"h6\">{rowTitle}</Typography>\n\n                          <IconButtonWithTooltip\n                            onClick={() => fields.remove(index)}\n                            icon={DeleteIcon}\n                            title={t('Delete')}\n                          />\n                        </div>\n                        {rowTitle && !removeTopLayoutUnit && (\n                          <LayoutUnit unit=\"xxs\" />\n                        )}\n                        <div className={classes.fieldsWrapper}>\n                          {fieldConfig?.map(config => {\n                            if (Array.isArray(config)) {\n                              return (\n                                <Grid container spacing={2}>\n                                  {config?.map(innerConfig => {\n                                    return (\n                                      <Grid\n                                        item\n                                        xs={12}\n                                        sm={12 / config?.length}\n                                      >\n                                        {getField(\n                                          name,\n                                          innerConfig,\n                                          fields?.value?.[index]\n                                        )}\n                                      </Grid>\n                                    );\n                                  })}\n                                </Grid>\n                              );\n                            } else {\n                              return getField(\n                                name,\n                                config,\n                                fields?.value?.[index]\n                              );\n                            }\n                          })}\n                        </div>\n                      </AmbientCard>\n                    );\n                  })\n                ) : (\n                  <AmbientCard fullWidth cardHeight=\"155px\">\n                    <EmptyStateDisplay\n                      primaryText={t('No records to show')}\n                      secondaryText={t('Try adding one')}\n                    />\n                  </AmbientCard>\n                )}\n              </div>\n              <SearchSideSheet\n                open={openSideSheet}\n                handleClose={data => {\n                  handleCloseSideSheet(data, fields);\n                }}\n                exclude={disableExcludeInSearch ? [] : fields?.value}\n                title={searchSideSheetTitle}\n                productApiBase={productApiBase}\n                searchApi={searchApi}\n                colDefs={searchGridColDefs}\n                idField={searchFieldId}\n                formIdField={formFieldId}\n                gridTitle={searchGridTitle}\n                handleSearch={handleSearch}\n                width={searchSideSheetWidth}\n                height={searchSideSheetHeight}\n              />\n            </div>\n          );\n        }}\n      </FieldArray>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"FieldArrayCard-Ds_ysYWL.js","names":["Grid","AutocompleteFinalField","DateRangeField","FormControlLabel","Typography","Grid","SearchSideSheet"],"sources":["../src/UI/inputs/fieldArrayCard/fieldArrayCardEnum.ts","../src/UI/inputs/fieldArrayCard/SearchSideSheet.jsx","../src/UI/inputs/fieldArrayCard/AutocompleteFinalField.jsx","../src/UI/inputs/fieldArrayCard/DateRangeField.jsx","../src/UI/inputs/fieldArrayCard/FieldArrayCard.jsx"],"sourcesContent":["export enum FieldType {\n  Text = 'text',\n  Date = 'date',\n  DateRange = 'dateRange',\n  Time = 'time',\n  DateTime = 'dateTime',\n  Toggle = 'toggle',\n  Checkbox = 'checkbox',\n  DropdownMenu = 'dropdownMenu',\n}","import React, { useCallback, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { AmbientGridTemplate } from '../../templates/deprecated/AmbientGridTemplate/AmbientGridTemplate';\nimport { apiMutate } from '../../../utilities/useAxiosMutate';\nimport { FilterOperators } from '../../../models/SearchOperator';\nimport { SideSheet } from '../../surfaces/SideSheet';\nimport { useAgGridApi } from '../../../utilities/aggrid/AgTable';\n\nconst SearchSideSheet = props => {\n  const {\n    open,\n    handleClose,\n    exclude,\n    title,\n    productApiBase,\n    searchApi,\n    colDefs = [],\n    gridTitle,\n    idField,\n    formIdField,\n    handleSearch,\n    width = '800px',\n    height='58vh'\n  } = props;\n  const [selectedData, setSelectedData] = useState([]);\n  const { t } = useTranslation();\n  const { gridApi, onGridReady, gridColumnApi } = useAgGridApi();\n  const paginationPageSize = 20;\n\n  // TODO: use queryId or new data grid from stencil\n  const searchData = useCallback(\n    async data =>\n      apiMutate(\n        productApiBase,\n        searchApi,\n        {\n          method: 'post',\n        },\n        data\n      ),\n    [productApiBase, searchApi]\n  );\n\n  const onSelectionChanged = useCallback(() => {\n    const selectedRows = gridApi?.getSelectedRows() ?? [];\n    setSelectedData(selectedRows);\n  }, [gridApi]);\n\n  const handleCloseSideSheet = useCallback(\n    data => {\n      handleClose(data);\n      setSelectedData([]);\n    },\n    [handleClose]\n  );\n\n  const dataSource = useMemo(\n    () => ({\n      getRows: async ({ request, success, fail }) => {\n        if (handleSearch) {\n          handleSearch(paginationPageSize, request, success, fail);\n          return;\n        }\n        const filterElements = request?.filterModel\n          ? Object.entries(request.filterModel)?.map(([key, value]) => {\n              return {\n                searchField: key,\n                searchOperator: FilterOperators[value?.type],\n                searchValue: value?.filter,\n              };\n            })\n          : [];\n\n        const orderElements = request?.sortModel\n          ? request.sortModel?.map(sortObj => {\n              return {\n                sortColumn: sortObj?.colId,\n                sortDirection: sortObj?.sort?.toUpperCase(),\n              };\n            })\n          : [];\n        await searchData({\n          data: {\n            filterElements: filterElements,\n            orderElements: orderElements,\n            pagesize: paginationPageSize,\n            pageNumber: (request?.startRow ?? 0) / paginationPageSize + 1,\n          },\n        })\n          .then(response => {\n            success({\n              rowData: response.data?.pageList,\n              rowCount: response.data?.total,\n            });\n          })\n          .catch(error => {\n            fail();\n          });\n\n      },\n    }),\n    [searchData, handleSearch]\n  );\n  return (\n    <SideSheet\n      open={open}\n      onClose={() => handleCloseSideSheet()}\n      title={title}\n      width={width}\n      buttonLabel={t('Choose')}\n      onSubmit={() => {\n        handleCloseSideSheet(selectedData);\n      }}\n    >\n      <AmbientGridTemplate\n        title={gridTitle}\n        rowModelType=\"serverSide\"\n        serverSideDatasource={dataSource}\n        cacheBlockSize={paginationPageSize}\n        serverSideStoreType=\"partial\"\n        paginationPageSize={paginationPageSize}\n        columnDefs={[\n          {\n            field: '',\n            checkboxSelection: true,\n            maxWidth: 60,\n            minWidth: 60,\n            cellRenderer: params => {\n              console.log({\n                exclude,\n                formIdField,\n                idField,\n                bool: exclude?.find(\n                  selectedItem =>\n                    selectedItem[formIdField] === params.data?.[idField]\n                ),\n              });\n              if (\n                params?.data &&\n                !!exclude?.find(\n                  selectedItem =>\n                    selectedItem[formIdField] === params.data?.[idField]\n                )\n              ) {\n                params.node.setSelected(true);\n              }\n            },\n          },\n          ...colDefs,\n        ]}\n        hideGroupTab\n        hideColumnTab\n        suppressRowClickSelection={true}\n        onSelectionChanged={onSelectionChanged}\n        rowSelection=\"multiple\"\n        api={gridApi}\n        gridReady={onGridReady}\n        columnApi={gridColumnApi}\n        dynamicSizing={true}\n        height={height}\n      />\n    </SideSheet>\n  );\n};\n\nexport default SearchSideSheet;\n","import React, { useMemo } from 'react';\nimport { FluentTextFieldAutoComplete } from '../textField/FluentTextFieldAutoComplete';\n\n// this is only to used in FieldArrayCard\nconst AutocompleteFinalField = props => {\n  const { value, options, idField = 'id' ,...otherProps } = props;\n\n  const currentValue = useMemo(() => {\n    if (typeof value === 'object') {\n      return value;\n    }\n\n    return options.find(option => option[idField] === value) || null;\n  }, [idField, options, value]);\n\n  return (\n    <FluentTextFieldAutoComplete\n      {...otherProps}\n      options={options}\n      value={currentValue}\n    />\n  );\n};\n\nexport default AutocompleteFinalField;\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Field } from '../../../utilities/form';\nimport { FluentDatePicker } from '../pickers/FluentDatePicker';\nimport { Grid } from '../../Grid';\n\nconst DateRangeField = props => {\n  const {\n    fieldName,\n    startDateProps = {},\n    endDateProps = {},\n    sameRow = false,\n    initialValues,\n  } = props;\n  const [maxStartDate, setMaxStartDate] = useState();\n  const [minEndDate, setMinEndDate] = useState();\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    const currentStartDate = initialValues[startDateProps?.name ?? 'startDate'];\n    if (currentStartDate) {\n      let minDate = new Date(currentStartDate);\n      minDate.setDate(minDate?.getDate() + 1);\n      setMinEndDate(minDate);\n    } else {\n      setMinEndDate(undefined);\n    }\n  }, [initialValues, startDateProps.name]);\n\n  useEffect(() => {\n    const currentEndDate = initialValues[endDateProps?.name ?? 'endDate'];\n    if (currentEndDate) {\n      let maxDate = new Date(currentEndDate);\n      maxDate.setDate(maxDate?.getDate() - 1);\n      maxDate.setHours(0, 0, 0, 0);\n      setMaxStartDate(maxDate);\n    } else {\n      setMaxStartDate(undefined);\n    }\n  }, [endDateProps.name, initialValues]);\n\n  return (\n    <Grid container spacing={sameRow ? 2 : 0}>\n      <Grid item xs={12} sm={sameRow ? 6 : 12}>\n        <Field\n          {...startDateProps}\n          parse={value => (value ? value : null)}\n          format={value => (value ? value : null)}\n          label={startDateProps?.label ?? t('Start Date')}\n          name={`${fieldName}.${startDateProps?.name ?? 'startDate'}`}\n          key={`${fieldName}.${startDateProps?.name ?? 'startDate'}`}\n          component={FluentDatePicker}\n          size=\"small\"\n          maxDate={maxStartDate}\n          allowNull\n        />\n      </Grid>\n      <Grid item xs={12} sm={sameRow ? 6 : 12}>\n        <Field\n          {...endDateProps}\n          parse={value => value ?? null}\n          format={value => value ?? null}\n          label={endDateProps?.label ?? t('End Date')}\n          name={`${fieldName}.${endDateProps?.name ?? 'endDate'}`}\n          key={`${fieldName}.${endDateProps?.name ?? 'endDate'}`}\n          component={FluentDatePicker}\n          size=\"small\"\n          minDate={minEndDate}\n          allowNull\n        />\n      </Grid>\n    </Grid>\n  );\n};\n\nexport default DateRangeField;\n","import { AddIcon, DeleteIcon } from '@fluentui/react-icons';\nimport { makeStyles } from '@material-ui/core';\nimport React, { useCallback, useState } from 'react';\nimport { FieldArray } from 'react-final-form-arrays';\nimport { useTranslation } from 'react-i18next';\nimport SearchSideSheet from './SearchSideSheet';\nimport AutocompleteFinalField from './AutocompleteFinalField';\nimport DateRangeField from './DateRangeField';\nimport { FieldType } from './fieldArrayCardEnum';\nimport { AmbientCard } from '../../surfaces/cards/AmbientCard';\nimport { DateTimeField } from '../datetimes/DateTimeField';\nimport { EmptyStateDisplay } from '../../dataDisplay/EmptyStateDisplay';\nimport { Field } from '../../../utilities/form';\nimport { FluentCheckbox } from '../checkbox/FluentCheckbox';\nimport { FluentDatePicker } from '../pickers/FluentDatePicker';\nimport { FluentTextField } from '../textField/FluentTextField';\nimport { FluentTimePicker } from '../pickers/FluentTimePicker';\nimport { FluentToggle } from '../toggle/FluentToggle';\nimport { FormControlLabel } from '../../utilityDisplay/FormControlLabel';\nimport { Grid } from '../../Grid';\nimport { IconButtonWithTooltip } from '../buttons/IconButtonWithToolTip';\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport { Typography } from '../../dataDisplay/typography/Typography';\n\nconst useStyles = makeStyles(theme => ({\n  toggleWrapper: {\n    marginLeft: theme.spacing(-0.1),\n    gap: theme.spacing(1),\n    marginTop: theme.spacing(0.8),\n  },\n  checkboxField: {\n    marginLeft: theme.spacing(-1.1),\n  },\n  sectionHeader: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    marginBottom: theme.spacing(1),\n  },\n  fieldsWrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  cardsWrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(2),\n  },\n  cardHeader: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n  },\n}));\n\nexport const FieldArrayCard = props => {\n  const {\n    title = ' ',\n    fieldArrayName,\n    getRowTitle,\n    fieldConfig,\n    removeTopLayoutUnit = false,\n    defaultAddedItemValues,\n    //search sidesheet props\n    enableSearchSideSheet,\n    searchSideSheetTitle,\n    searchFieldId = 'id',\n    formFieldId = 'id',\n    formatAddedSearchItems,\n    productApiBase,\n    searchApi,\n    searchGridColDefs,\n    searchGridTitle,\n    handleSearch,\n    disableExcludeInSearch = false,\n    searchSideSheetWidth,\n    searchSideSheetHeight,\n  } = props;\n  const classes = useStyles();\n  const [openSideSheet, setOpenSideSheet] = useState(false);\n  const { t } = useTranslation();\n\n  const getField = useCallback(\n    (finalFieldName, config, fieldObj) => {\n      const { fieldName, fieldType, fieldLabel, componentProps } = config;\n\n      let fieldComponent = null;\n\n      switch (fieldType) {\n        case FieldType.DropdownMenu:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={AutocompleteFinalField}\n              label={fieldLabel}\n            />\n          );\n          break;\n        case FieldType.Date:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={FluentDatePicker}\n              label={fieldLabel}\n              size=\"small\"\n              allowNull\n            />\n          );\n          break;\n        case FieldType.DateRange:\n          fieldComponent = (\n            <DateRangeField\n              {...componentProps}\n              fieldName={finalFieldName}\n              initialValues={fieldObj}\n            />\n          );\n          break;\n        case FieldType.Time:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={FluentTimePicker}\n              label={fieldLabel}\n              size=\"small\"\n            />\n          );\n          break;\n        case FieldType.DateTime:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={DateTimeField}\n              label={fieldLabel}\n              size=\"small\"\n              allowNull\n            />\n          );\n          break;\n        case FieldType.Toggle:\n          fieldComponent = (\n            <FormControlLabel\n              control={\n                <Field\n                  defaultChecked={false}\n                  {...componentProps}\n                  name={`${finalFieldName}.${fieldName}`}\n                  component={FluentToggle}\n                  type=\"checkbox\"\n                />\n              }\n              label={fieldLabel}\n              className={classes.toggleWrapper}\n            />\n          );\n          break;\n        case FieldType.Checkbox:\n          fieldComponent = (\n            <FormControlLabel\n              control={\n                <Field\n                  defaultChecked={false}\n                  {...componentProps}\n                  name={`${finalFieldName}.${fieldName}`}\n                  component={FluentCheckbox}\n                  type=\"checkbox\"\n                />\n              }\n              label={fieldLabel}\n              className={classes.checkboxField}\n            />\n          );\n          break;\n        default:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={FluentTextField}\n              label={fieldLabel}\n            />\n          );\n          break;\n      }\n\n      return fieldComponent;\n    },\n    [classes.checkboxField, classes.toggleWrapper]\n  );\n\n  const handleCloseSideSheet = useCallback(\n    (selectedRecords, fieldArray) => {\n      const formattedRecords = formatAddedSearchItems\n        ? formatAddedSearchItems(selectedRecords ?? [])\n        : selectedRecords;\n\n      if (formattedRecords?.length) {\n        for (const record of formattedRecords) {\n          if (\n            disableExcludeInSearch ||\n            !!!fieldArray?.value?.find(\n              item => item[formFieldId] === record[formFieldId]\n            )\n          )\n            fieldArray.push(record);\n        }\n      }\n\n      setOpenSideSheet(false);\n    },\n    [disableExcludeInSearch, formFieldId, formatAddedSearchItems]\n  );\n\n  const handleAddField = useCallback(\n    fields => {\n      if (enableSearchSideSheet) {\n        setOpenSideSheet(true);\n      } else {\n        if (defaultAddedItemValues) {\n          fields.push(defaultAddedItemValues);\n        } else {\n          fields.push({});\n        }\n      }\n    },\n    [defaultAddedItemValues, enableSearchSideSheet]\n  );\n\n  return (\n    <div>\n      <FieldArray name={fieldArrayName}>\n        {({ fields }) => {\n          return (\n            <div>\n              <div className={classes.sectionHeader}>\n                <div>\n                  {title && <Typography variant=\"h6\">{title}</Typography>}\n                </div>\n                <IconButtonWithTooltip\n                  onClick={() => {\n                    handleAddField(fields);\n                  }}\n                  icon={AddIcon}\n                  title={t('Add')}\n                />\n              </div>\n\n              <div className={classes.cardsWrapper}>\n                {fields?.value?.length > 0 ? (\n                  fields.map((name, index) => {\n                    const rowTitle =\n                      getRowTitle && getRowTitle(fields?.value?.[index]);\n                    return (\n                      <AmbientCard fullWidth>\n                        <div className={classes.cardHeader}>\n                          <Typography variant=\"h6\">{rowTitle}</Typography>\n\n                          <IconButtonWithTooltip\n                            onClick={() => fields.remove(index)}\n                            icon={DeleteIcon}\n                            title={t('Delete')}\n                          />\n                        </div>\n                        {rowTitle && !removeTopLayoutUnit && (\n                          <LayoutUnit unit=\"xxs\" />\n                        )}\n                        <div className={classes.fieldsWrapper}>\n                          {fieldConfig?.map(config => {\n                            if (Array.isArray(config)) {\n                              return (\n                                <Grid container spacing={2}>\n                                  {config?.map(innerConfig => {\n                                    return (\n                                      <Grid\n                                        item\n                                        xs={12}\n                                        sm={12 / config?.length}\n                                      >\n                                        {getField(\n                                          name,\n                                          innerConfig,\n                                          fields?.value?.[index]\n                                        )}\n                                      </Grid>\n                                    );\n                                  })}\n                                </Grid>\n                              );\n                            } else {\n                              return getField(\n                                name,\n                                config,\n                                fields?.value?.[index]\n                              );\n                            }\n                          })}\n                        </div>\n                      </AmbientCard>\n                    );\n                  })\n                ) : (\n                  <AmbientCard fullWidth cardHeight=\"155px\">\n                    <EmptyStateDisplay\n                      primaryText={t('No records to show')}\n                      secondaryText={t('Try adding one')}\n                    />\n                  </AmbientCard>\n                )}\n              </div>\n              <SearchSideSheet\n                open={openSideSheet}\n                handleClose={data => {\n                  handleCloseSideSheet(data, fields);\n                }}\n                exclude={disableExcludeInSearch ? [] : fields?.value}\n                title={searchSideSheetTitle}\n                productApiBase={productApiBase}\n                searchApi={searchApi}\n                colDefs={searchGridColDefs}\n                idField={searchFieldId}\n                formIdField={formFieldId}\n                gridTitle={searchGridTitle}\n                handleSearch={handleSearch}\n                width={searchSideSheetWidth}\n                height={searchSideSheetHeight}\n              />\n            </div>\n          );\n        }}\n      </FieldArray>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/{FluentLink-D-gKioCQ.js → FluentLink-CkA7BUEB.js}

@@ -36,4 +36,4 @@ const FluentLink = (props) => {
 
 //#endregion
 export { FluentLink as t };
-//# sourceMappingURL=FluentLink-D-gKioCQ.js.map
+//# sourceMappingURL=FluentLink-CkA7BUEB.js.map

package/dist/{FluentLink-D-gKioCQ.js.map → FluentLink-CkA7BUEB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentLink-D-gKioCQ.js","names":["Link","MuiLink"],"sources":["../src/UI/inputs/link/FluentLink.jsx"],"sourcesContent":["import React from 'react'\nimport { Link } from 'react-router-dom'\nimport {\n  Typography,\n  Link as MuiLink,\n  makeStyles,\n  useTheme\n} from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    textDecoration: 'none',\n    '& > * + *': {\n      marginLeft: theme.spacing(2)\n    }\n  },\n  link: {\n    textDecoration: 'none',\n    fontWeight: 700\n  }\n}))\n\nexport const FluentLink = (props) => {\n  const {\n    icon,\n    alt,\n    label,\n    children,\n    activeClassName,\n    to,\n    linkColor,\n    ...otherProps\n  } = props\n  const theme = useTheme()\n  const classes = useStyles()\n\n  return to && to.substring(0, 4) !== 'http' ? (\n    <Link\n      to={to}\n      activeClassName={activeClassName}\n      className={classes.link}\n      style={{\n        color:\n          linkColor === 'primary'\n            ? theme.palette.primary.main\n            : theme.palette.secondary.main\n      }}\n    >\n      {children}\n    </Link>\n  ) : (\n    <Typography component='div' className={classes.root}>\n      <MuiLink\n        {...otherProps}\n        href={to}\n        color={linkColor}\n        variant='body1'\n        style={{ textDecoration: 'none' }}\n      >\n        {children}\n      </MuiLink>\n    </Typography>\n  )\n}\n"],"mappings":";;;;;AASA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,gBAAgB;EAChB,aAAa,EACX,YAAY,MAAM,QAAQ,EAAE,EAC7B;EACF;CACD,MAAM;EACJ,gBAAgB;EAChB,YAAY;EACb;CACF,EAAE;AAEH,MAAa,cAAc,UAAU;CACnC,MAAM,EACJ,MACA,KACA,OACA,UACA,iBACA,IACA,WACA,GAAG,eACD;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,UAAU,WAAW;AAE3B,QAAO,MAAM,GAAG,UAAU,GAAG,EAAE,KAAK,SAClC,oCAACA;EACK;EACa;EACjB,WAAW,QAAQ;EACnB,OAAO,EACL,OACE,cAAc,YACV,MAAM,QAAQ,QAAQ,OACtB,MAAM,QAAQ,UAAU,MAC/B;IAEA,SACI,GAEP,oCAAC;EAAW,WAAU;EAAM,WAAW,QAAQ;IAC7C,oCAACC;EACC,GAAI;EACJ,MAAM;EACN,OAAO;EACP,SAAQ;EACR,OAAO,EAAE,gBAAgB,QAAQ;IAEhC,SACO,CACC"}
+{"version":3,"file":"FluentLink-CkA7BUEB.js","names":["Link","MuiLink"],"sources":["../src/UI/inputs/link/FluentLink.jsx"],"sourcesContent":["import React from 'react'\nimport { Link } from 'react-router-dom'\nimport {\n  Typography,\n  Link as MuiLink,\n  makeStyles,\n  useTheme\n} from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    textDecoration: 'none',\n    '& > * + *': {\n      marginLeft: theme.spacing(2)\n    }\n  },\n  link: {\n    textDecoration: 'none',\n    fontWeight: 700\n  }\n}))\n\nexport const FluentLink = (props) => {\n  const {\n    icon,\n    alt,\n    label,\n    children,\n    activeClassName,\n    to,\n    linkColor,\n    ...otherProps\n  } = props\n  const theme = useTheme()\n  const classes = useStyles()\n\n  return to && to.substring(0, 4) !== 'http' ? (\n    <Link\n      to={to}\n      activeClassName={activeClassName}\n      className={classes.link}\n      style={{\n        color:\n          linkColor === 'primary'\n            ? theme.palette.primary.main\n            : theme.palette.secondary.main\n      }}\n    >\n      {children}\n    </Link>\n  ) : (\n    <Typography component='div' className={classes.root}>\n      <MuiLink\n        {...otherProps}\n        href={to}\n        color={linkColor}\n        variant='body1'\n        style={{ textDecoration: 'none' }}\n      >\n        {children}\n      </MuiLink>\n    </Typography>\n  )\n}\n"],"mappings":";;;;;AASA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,gBAAgB;EAChB,aAAa,EACX,YAAY,MAAM,QAAQ,EAAE,EAC7B;EACF;CACD,MAAM;EACJ,gBAAgB;EAChB,YAAY;EACb;CACF,EAAE;AAEH,MAAa,cAAc,UAAU;CACnC,MAAM,EACJ,MACA,KACA,OACA,UACA,iBACA,IACA,WACA,GAAG,eACD;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,UAAU,WAAW;AAE3B,QAAO,MAAM,GAAG,UAAU,GAAG,EAAE,KAAK,SAClC,oCAACA;EACK;EACa;EACjB,WAAW,QAAQ;EACnB,OAAO,EACL,OACE,cAAc,YACV,MAAM,QAAQ,QAAQ,OACtB,MAAM,QAAQ,UAAU,MAC/B;IAEA,SACI,GAEP,oCAAC;EAAW,WAAU;EAAM,WAAW,QAAQ;IAC7C,oCAACC;EACC,GAAI;EACJ,MAAM;EACN,OAAO;EACP,SAAQ;EACR,OAAO,EAAE,gBAAgB,QAAQ;IAEhC,SACO,CACC"}

package/dist/{FluentSelectMenu-BEREJbe-.js → FluentSelectMenu-Cx274cVa.js}

@@ -25,4 +25,4 @@ const FluentSelectMenu = ({ data, id, onChange: onChangeProp, width = 300, autoC
 
 //#endregion
 export { FluentSelectMenu as t };
-//# sourceMappingURL=FluentSelectMenu-BEREJbe-.js.map
+//# sourceMappingURL=FluentSelectMenu-Cx274cVa.js.map

package/dist/{FluentSelectMenu-BEREJbe-.js.map → FluentSelectMenu-Cx274cVa.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentSelectMenu-BEREJbe-.js","names":["option"],"sources":["../src/UI/inputs/menus/FluentSelectMenu.jsx"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport React, { useCallback } from 'react';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { FluentTextField } from '../textField/FluentTextField';\nimport { makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '&[class*=\"MuiOutlinedInput-root\"][class*=\"MuiOutlinedInput-marginDense\"]':\n      {\n        padding: '4px 8px'\n      }\n  }\n}));\n\nexport const FluentSelectMenu = ({\n  data,\n  id,\n  onChange: onChangeProp,\n  width = 300,\n  // displayProperty = 'label',\n  autoCompleteProps,\n  displayProperty,\n  ...otherProps\n}) => {\n  const classes = useStyles();\n  // Modified onChange to work inside final-form Field component\n  // Also works with a passed in onChange function if not in Field component\n  const onChange = useCallback(\n    (e, value) => onChangeProp?.(value),\n    [onChangeProp]\n  );\n\n  // return (\n  //   <Autocomplete\n  //     classes={{\n  //       inputRoot: classes.root\n  //     }}\n  //     id={id}\n  //     onChange={onChange}\n  //     options={data}\n  //     getOptionLabel={\n  //       displayProperty\n  //         ? option[displayProperty]\n  //           ? option[displayProperty]\n  //           : ''\n  //         : option\n  //     }\n  //     style={{ width: width }}\n  //     {...autoCompleteProps}\n  //     renderInput={(params) => <FluentTextField {...otherProps} {...params} />}\n  //   />\n  // )\n  return (\n    <Autocomplete\n      classes={{\n        inputRoot: classes.root\n      }}\n      id={id}\n      onChange={onChange}\n      options={data}\n      getOptionLabel={(option) =>\n        displayProperty\n          ? option[displayProperty]\n            ? option[displayProperty]\n            : ''\n          : (option) => option\n      }\n      style={{ width: width }}\n      {...autoCompleteProps}\n      renderInput={(params) => (\n        <FluentTextField {...otherProps} {...params} />\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;AAMA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM,EACJ,gFACE,EACE,SAAS,WACV,EACJ,EACF,EAAE;AAEH,MAAa,oBAAoB,EAC/B,MACA,IACA,UAAU,cACV,QAAQ,KAER,mBACA,iBACA,GAAG,iBACC;CACJ,MAAM,UAAU,WAAW;CAG3B,MAAM,WAAW,aACd,GAAG,UAAU,eAAe,MAAM,EACnC,CAAC,aAAa,CACf;AAsBD,QACE,oCAAC;EACC,SAAS,EACP,WAAW,QAAQ,MACpB;EACG;EACM;EACV,SAAS;EACT,iBAAiB,WACf,kBACI,OAAO,mBACL,OAAO,mBACP,MACD,aAAWA;EAElB,OAAO,EAAS,OAAO;EACvB,GAAI;EACJ,cAAc,WACZ,oCAAC;GAAgB,GAAI;GAAY,GAAI;IAAU;GAEjD"}
+{"version":3,"file":"FluentSelectMenu-Cx274cVa.js","names":["option"],"sources":["../src/UI/inputs/menus/FluentSelectMenu.jsx"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport React, { useCallback } from 'react';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { FluentTextField } from '../textField/FluentTextField';\nimport { makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '&[class*=\"MuiOutlinedInput-root\"][class*=\"MuiOutlinedInput-marginDense\"]':\n      {\n        padding: '4px 8px'\n      }\n  }\n}));\n\nexport const FluentSelectMenu = ({\n  data,\n  id,\n  onChange: onChangeProp,\n  width = 300,\n  // displayProperty = 'label',\n  autoCompleteProps,\n  displayProperty,\n  ...otherProps\n}) => {\n  const classes = useStyles();\n  // Modified onChange to work inside final-form Field component\n  // Also works with a passed in onChange function if not in Field component\n  const onChange = useCallback(\n    (e, value) => onChangeProp?.(value),\n    [onChangeProp]\n  );\n\n  // return (\n  //   <Autocomplete\n  //     classes={{\n  //       inputRoot: classes.root\n  //     }}\n  //     id={id}\n  //     onChange={onChange}\n  //     options={data}\n  //     getOptionLabel={\n  //       displayProperty\n  //         ? option[displayProperty]\n  //           ? option[displayProperty]\n  //           : ''\n  //         : option\n  //     }\n  //     style={{ width: width }}\n  //     {...autoCompleteProps}\n  //     renderInput={(params) => <FluentTextField {...otherProps} {...params} />}\n  //   />\n  // )\n  return (\n    <Autocomplete\n      classes={{\n        inputRoot: classes.root\n      }}\n      id={id}\n      onChange={onChange}\n      options={data}\n      getOptionLabel={(option) =>\n        displayProperty\n          ? option[displayProperty]\n            ? option[displayProperty]\n            : ''\n          : (option) => option\n      }\n      style={{ width: width }}\n      {...autoCompleteProps}\n      renderInput={(params) => (\n        <FluentTextField {...otherProps} {...params} />\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;AAMA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM,EACJ,gFACE,EACE,SAAS,WACV,EACJ,EACF,EAAE;AAEH,MAAa,oBAAoB,EAC/B,MACA,IACA,UAAU,cACV,QAAQ,KAER,mBACA,iBACA,GAAG,iBACC;CACJ,MAAM,UAAU,WAAW;CAG3B,MAAM,WAAW,aACd,GAAG,UAAU,eAAe,MAAM,EACnC,CAAC,aAAa,CACf;AAsBD,QACE,oCAAC;EACC,SAAS,EACP,WAAW,QAAQ,MACpB;EACG;EACM;EACV,SAAS;EACT,iBAAiB,WACf,kBACI,OAAO,mBACL,OAAO,mBACP,MACD,aAAWA;EAElB,OAAO,EAAS,OAAO;EACvB,GAAI;EACJ,cAAc,WACZ,oCAAC;GAAgB,GAAI;GAAY,GAAI;IAAU;GAEjD"}

package/dist/{FluentSimpleSelect-Djff-up8.js → FluentSimpleSelect-BfoxBQj4.js}

@@ -1,6 +1,6 @@
 import { t as apiMutate } from "./useAxiosMutate-DeqKSi5z.js";
 import { t as Box$1 } from "./Box-Colr5GEl.js";
-import { t as FluentSelectMenu } from "./FluentSelectMenu-BEREJbe-.js";
+import { t as FluentSelectMenu } from "./FluentSelectMenu-Cx274cVa.js";
 import React, { Children, forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { CircularProgress, FormControl, InputBase, NativeSelect, TextField, Typography, makeStyles, withStyles } from "@material-ui/core";
 import Autocomplete from "@material-ui/lab/Autocomplete";
@@ -417,4 +417,4 @@ const FluentSimpleSelect = forwardRef(FluentSimpleSelectComponent);
 
 //#endregion
 export { FluentSelectGroupMenu as i, FluentScrollLoadAutocompleteMenu as n, SelectGroupMenu as r, FluentSimpleSelect as t };
-//# sourceMappingURL=FluentSimpleSelect-Djff-up8.js.map
+//# sourceMappingURL=FluentSimpleSelect-BfoxBQj4.js.map

package/dist/{FluentSimpleSelect-Djff-up8.js.map → FluentSimpleSelect-BfoxBQj4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentSimpleSelect-Djff-up8.js","names":["useStyles","useStyles","useStyles","makeStyles","Box"],"sources":["../src/UI/inputs/menus/FluentSelectDirectoryMenu.jsx","../src/UI/inputs/menus/FluentSelectGroupMenu.jsx","../src/UI/inputs/menus/FluentScrollLoadAutocompleteMenu.jsx","../src/UI/inputs/menus/FluentSimpleSelect.jsx"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport React from 'react'\n\nimport Autocomplete from '@material-ui/lab/Autocomplete'\nimport { makeStyles, TextField } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  textField: {\n    marginLeft: theme.spacing(1),\n    marginRight: theme.spacing(1)\n  },\n  dense: {\n    marginTop: theme.spacing(1)\n  },\n  input: {\n    borderRadius: 2,\n    height: 32,\n    padding: 0,\n    marginTop: 3\n  },\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14\n  }\n}))\n\nexport const FluentSelectGroupMenu = ({\n  data,\n  placeholder,\n  id,\n  handleChange\n}) => {\n  const classes = useStyles()\n  const options =\n    data &&\n    data.map((option) => {\n      const firstLetter = option.label[0].toUpperCase()\n      return {\n        firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,\n        ...option\n      }\n    })\n\n  return (\n    <Autocomplete\n      id={id}\n      onChange={(event, value) => handleChange(value)}\n      options={options.sort(\n        (a, b) => -b.firstLetter.localeCompare(a.firstLetter)\n      )}\n      groupBy={(option) => option.firstLetter}\n      getOptionLabel={(option) => option.label}\n      style={{ width: 300 }}\n      renderInput={(params) => (\n        <TextField\n          {...params}\n          label={!params.inputProps.value && placeholder}\n          variant='outlined'\n          size='small'\n          InputLabelProps={{\n            shrink: false,\n            classes: {\n              root: classes.labelRoot,\n              focused: classes.labelFocused\n            }\n          }}\n          SelectProps={{\n            MenuProps: {\n              className: classes.menu\n            }\n          }}\n        />\n      )}\n    />\n  )\n}\n","/* eslint-disable no-use-before-define */\nimport React from 'react'\n\nimport Autocomplete from '@material-ui/lab/Autocomplete'\nimport { makeStyles, TextField } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  textField: {\n    marginLeft: theme.spacing(1),\n    marginRight: theme.spacing(1)\n  },\n  dense: {\n    marginTop: theme.spacing(1)\n  },\n  input: {\n    borderRadius: 2,\n    height: 32,\n    padding: 0,\n    marginTop: 3\n  },\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14\n  }\n}))\n\nexport const SelectGroupMenu = ({ data, placeholder, id, handleChange, className }) => {\n  const classes = useStyles()\n  const options =\n    data &&\n    data.map((option) => {\n      const grouping = option.category\n      return {\n        grouping,\n        ...option\n      }\n    })\n\n  return (\n    <Autocomplete\n      className={className}\n      id={id}\n      onChange={(event, value) => handleChange(value)}\n      options={options.sort((a, b) => -b.grouping.localeCompare(a.grouping))}\n      groupBy={(option) => option.grouping}\n      getOptionLabel={(option) => option.label}\n      style={{ width: 300 }}\n      renderInput={(params) => (\n        <TextField\n          {...params}\n          label={!params.inputProps.value && placeholder}\n          variant='outlined'\n          size='small'\n          InputLabelProps={{\n            shrink: false,\n            classes: {\n              root: classes.labelRoot,\n              focused: classes.labelFocused\n            }\n          }}\n          SelectProps={{\n            MenuProps: {\n              className: classes.menu\n            }\n          }}\n        />\n      )}\n    />\n  )\n}\n","import React, {\n  useState,\n  useCallback,\n  useEffect,\n  forwardRef,\n  useRef,\n  Children,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { CircularProgress } from '@material-ui/core';\nimport { apiMutate } from '../../../utilities/useAxiosMutate';\nimport { FluentSelectMenu } from './FluentSelectMenu';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useTranslation } from 'react-i18next';\nimport { Box } from '../../Box';\nimport Alert from '@material-ui/lab/Alert';\n\nconst useStyles = makeStyles((theme) => ({\n  listbox: {\n    position: 'relative',\n    maxHeight: 300,\n    overflow: 'auto',\n  },\n  listboxHidden: {\n    overflow: 'hidden',\n  },\n  loadingItem: {\n    textAlign: 'center',\n    padding: theme.spacing(1),\n  },\n  overlay: {\n    position: 'absolute',\n    inset: 0,\n    background: 'rgba(255,255,255,.95)',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    zIndex: 1,\n  },\n  overlayText: {\n    marginTop: theme.spacing(1),\n  },\n  alert: {\n    marginTop: theme.spacing(1),\n  },\n}));\n\n/**\n* **FluentScrollLoadAutocompleteMenu**\n*\n* A drop‑in extension for MUI’s `<Autocomplete>` that:\n*\n* 1. Fetches paginated / sortable data from any REST endpoint  \n* 2. Implements infinite scrolling with automatic scroll‑position restore  \n* 3. Supports client‑side filtering, grouping   \n* 4. Displays a Material UI `<CircularProgress>` while loading and a MUI `<Alert>` on errors\n*\n* Internally it wraps **unity‑fluent‑library**’s `<FluentSelectMenu>` so you get the same\n* keyboard navigation and styling as the rest of the Fluent controls.\n*\n* ---\n*\n* ### Typical usage\n* ```jsx\n* const endpoint = (q, page, size, sortCol, sortDir) =>\n*   `/api/products?search=${q}&page=${page}&pageSize=${size}&sort=${sortCol}&dir=${sortDir}`;\n*\n* const map = (raw) => ({\n*   items: raw.items,\n*   total: raw.totalRows,\n* });\n*\n* <FluentScrollLoadAutocompleteMenu\n*   apiBaseUrl=\"https://api.example.com\"\n*   apiEndpoint={endpoint}\n*   mapResponse={map}\n*   onChange={(product) => console.log(product)}\n* />\n* ```\n* ---\n*\n* @param {Object}   props\n* @param {string}   props.apiBaseUrl   Base URL forwarded to **apiMutate**\n* @param {Function} props.apiEndpoint  `(keyword, page, pageSize, sortCol, sortDir) => string`\n* @param {Function} props.mapResponse  Maps raw API payload → `{ items, total }`\n* @param {Function} [props.onChange]   Fires when the user selects/clears an option\n* @param {Function} [props.getOptionLabel] Returns the display label for an item (default: `o.name`)\n* @param {Function} [props.groupBy]    Returns a group heading string for an item\n* @param {string}   [props.placeholder='Search…'] Placeholder text\n* @param {string}   [props.displayProperty='name'] Property passed to `<FluentSelectMenu>`\n* @param {number|string} [props.width=300] Fixed width of the component container\n* @param {boolean}  [props.fetchEnabled=true] Disable to work fully offline\n* @param {*}        [props.initialValue=null]  Pre‑selected value shown immediately\n* @param {Array}    [props.initialOptions=[]]  Pre‑loaded options shown immediately\n* @param {boolean}  [props.isPaginated=true]   Disable if your API returns the full list\n* @param {boolean}  [props.isSortable=true]    Disable server‑side sorting\n* @param {boolean}  [props.isFilterable=true]  Disable server‑side filtering\n* @param {number}   [props.pageSize=50]        Items per page when paginating\n* @param {string}   [props.sortColumn='Name']  Default sort column\n* @param {'ASC'|'DESC'} [props.sortDirection='ASC'] Default sort direction\n*\n* @returns {JSX.Element}\n*/\nexport const FluentScrollLoadAutocompleteMenu = ({\n  apiBaseUrl,\n  apiEndpoint,\n  apiConfig = {},\n  apiData = null,\n  mapResponse,\n  onChange,\n  getOptionLabel = (o) => o?.name ?? '',\n  groupBy,\n  placeholder = 'Search…',\n  displayProperty = 'name',\n  width = 300,\n  fetchEnabled = true,\n  initialValue = null,\n  initialOptions = [],\n  isPaginated = true,\n  isSortable = true,\n  isFilterable = true,\n  pageSize = 50,\n  sortColumn = 'Name',\n  sortDirection = 'ASC',\n}) => {\n  const classes = useStyles();\n  const [options, setOptions] = useState(initialOptions);\n  const [value, setValue] = useState(initialValue);\n  const [inputValue, setInputValue] = useState('');\n  const [loading, setLoading] = useState(false);\n  const [loadingMore, setLoadingMore] = useState(false);\n  const [error, setError] = useState(null);\n  const [pageNumber, setPageNumber] = useState(1);\n  const [totalRows, setTotalRows] = useState(0);\n\n  const configRef = useRef(apiConfig);\n  const dataRef = useRef(apiData);\n  const listboxRef = useRef(null);\n  const prevScrollPositionRef = useRef(0);\n\n  const { t } = useTranslation();\n\n  /**\n   * Fetches a page of data from the provided API endpoint and updates the component state accordingly.\n   *\n   * This function supports:\n   * - Filtering (if `isFilterable` is true)\n   * - Sorting (if `isSortable` is true)\n   * - Pagination (based on the `page` and `pageSize` arguments)\n   * - Infinite scroll appending (via the `append` flag)\n   *\n   * @function fetchPage\n   * @param {string} keyword - The keyword to filter results by (if filtering is enabled)\n   * @param {number} page - The page number to fetch\n   * @param {boolean} [append=false] - If true, appends results to the current list; otherwise replaces it\n   * @returns {Promise<void>} - Resolves once data is fetched and state is updated\n   */\n  const fetchPage = useCallback(\n    async (keyword, page, append = false) => {\n      if (!fetchEnabled) return;\n\n      setError(null);\n      page === 1 ? setLoading(true) : setLoadingMore(true);\n\n      try {\n        const url = apiEndpoint(\n          isFilterable ? keyword : '',\n          page,\n          pageSize,\n          isSortable ? sortColumn : '',\n          isSortable ? sortDirection : 'ASC'\n        );\n        const resp = await apiMutate(apiBaseUrl, url, configRef.current, dataRef.current);\n        const { items, total } = mapResponse(resp.data);\n\n        setOptions((prev) => (append ? [...prev, ...items] : items));\n        setTotalRows(total);\n        setPageNumber(page);\n      } catch (err) {\n        setError(err.response?.data?.message ?? err.message ?? t('Unknown error'));\n      } finally {\n        page === 1 ? setLoading(false) : setLoadingMore(false);\n      }\n    },\n    [\n      apiBaseUrl,\n      apiEndpoint,\n      mapResponse,\n      pageSize,\n      sortColumn,\n      sortDirection,\n      isFilterable,\n      isSortable,\n      fetchEnabled,\n      t,\n    ]\n  );\n\n  /* ---------- infinite scroll ---------- */\n  const handleListboxScroll = (e) => {\n    if (!isPaginated) return;\n\n    const node = e.currentTarget;\n    prevScrollPositionRef.current = node.scrollTop;\n\n    if (\n      node.scrollTop + node.clientHeight >= node.scrollHeight - 30 &&\n      !loadingMore &&\n      options.length < totalRows\n    ) {\n      fetchPage(inputValue, pageNumber + 1, true);\n    }\n  };\n\n  /**\n   * **Listbox**\n   *\n   * Custom scrollable container used by the Autocomplete dropdown.\n   * - Attaches a ref to preserve scroll position between pages.\n   * - Displays a loading message if no options are present initially.\n   * - Shows a full overlay spinner when `loadingMore` is true.\n   *\n   * This component is passed as the `ListboxComponent` to FluentSelectMenu’s\n   * Autocomplete integration, enabling infinite scroll with visual feedback.\n   *\n   * @param {Object} props\n   * @param {React.ReactNode} props.children - Option elements to render\n   * @param {boolean} props.initialLoading - Whether to show the “Loading…” message initially\n   * @param {React.Ref} ref - Forwarded ref from the Autocomplete dropdown\n   * @returns {JSX.Element}\n   */\n  const Listbox = forwardRef(({ children, initialLoading, ...other }, ref) => (\n    <ul\n      ref={(inst) => {\n        if (inst) listboxRef.current = inst;\n        if (typeof ref === 'function') ref(inst);\n        else if (ref) ref.current = inst;\n      }}\n      {...other}\n      style={{\n        position: 'relative',\n        maxHeight: 300,\n        overflow: loadingMore ? 'hidden' : 'auto',\n      }}\n    >\n      {Children.count(children) === 0 && initialLoading ? (\n        <li style={{ textAlign: 'center', padding: 8 }}>{t('Loading...')}</li>\n      ) : (\n        children\n      )}\n\n      {loadingMore && (\n        <Box className={classes.overlay}>\n          <CircularProgress size={20} />\n          <span className={classes.overlayText}>{t('Loading...')}</span>\n        </Box>\n      )}\n    </ul>\n  ));\n  Listbox.displayName = 'FluentSMAutocompleteListbox';\n\n  /* [Initial / filtered fetch] */\n  useEffect(() => {\n    if (!fetchEnabled || !isFilterable) return;\n    if (value && inputValue === getOptionLabel(value)) return;\n\n    const timer = setTimeout(() => fetchPage(inputValue, 1, false), 400);\n    return () => clearTimeout(timer);\n  }, [inputValue, fetchPage, value, getOptionLabel, isFilterable, fetchEnabled]);\n\n  // [Initial fetch when filtering is disabled]\n  useEffect(() => {\n    if (!fetchEnabled || isFilterable) return;\n    fetchPage('', 1, false);\n  }, [isFilterable, fetchEnabled, fetchPage]);\n\n  // [Restores scroll position after loading more items]\n  useEffect(() => {\n    if (!loadingMore && listboxRef.current) {\n      listboxRef.current.scrollTop = prevScrollPositionRef.current;\n    }\n  }, [options, loadingMore]);\n\n  useEffect(() => { configRef.current = apiConfig }, [apiConfig]);\n  useEffect(() => { dataRef.current = apiData }, [apiData]);\n\n  return (\n    <Box width={width}>\n      <FluentSelectMenu\n        placeholder={placeholder}\n        data={options}\n        displayProperty={displayProperty}\n        onChange={(val) => {\n          setValue(val);\n          onChange?.(val);\n        }}\n        InputProps={{\n          endAdornment:\n            loading && pageNumber === 1 ? (\n              <CircularProgress color=\"inherit\" size={20} />\n            ) : null,\n        }}\n        autoCompleteProps={{\n          value,\n          inputValue,\n          onInputChange: (_e, v) => setInputValue(v),\n          loading: loading && pageNumber === 1,\n          getOptionLabel,\n          groupBy,\n          ListboxComponent: Listbox,\n          ListboxProps: {\n            onScroll: handleListboxScroll,\n            initialLoading: loading && pageNumber === 1,\n          },\n        }}\n      />\n\n      {error && (\n        <Alert severity=\"error\" style={{ marginTop: 8 }}>\n          {error}\n        </Alert>\n      )}\n    </Box>\n  );\n};\n\nFluentScrollLoadAutocompleteMenu.propTypes = {\n  /** Base URL used by apiMutate */\n  apiBaseUrl: PropTypes.string.isRequired,\n\n  /** Builds the endpoint URL: (keyword, page, pageSize, sortCol, sortDir) => string */\n  apiEndpoint: PropTypes.func.isRequired,\n\n  /** Additional config passed to apiMutate */\n  apiConfig: PropTypes.object,\n\n  /** Raw API data passed to apiMutate */\n  apiData: PropTypes.any,\n\n  /** Maps raw API payload into { items, total } */\n  mapResponse: PropTypes.func.isRequired,\n\n  /** Called when the user selects or clears an option */\n  onChange: PropTypes.func,\n\n  /** Returns the text label for a given option */\n  getOptionLabel: PropTypes.func,\n\n  /** Returns the group heading for a given option */\n  groupBy: PropTypes.func,\n\n  placeholder: PropTypes.string,\n  displayProperty: PropTypes.string,\n  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n  /* Behavior flags */\n  fetchEnabled: PropTypes.bool,\n  initialValue: PropTypes.any,\n  initialOptions: PropTypes.array,\n\n  isPaginated: PropTypes.bool,\n  isSortable: PropTypes.bool,\n  isFilterable: PropTypes.bool,\n\n  pageSize: PropTypes.number,\n  sortColumn: PropTypes.string,\n  sortDirection: PropTypes.oneOf(['ASC', 'DESC']),\n};\n","import React, {forwardRef} from 'react'\nimport {\n  makeStyles,\n  withStyles,\n  Typography,\n  FormControl,\n  NativeSelect,\n  InputBase\n} from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst FluentInput = withStyles((theme) => ({\n  root: {\n    'label + &': {\n      marginTop: theme.spacing(1)\n    }\n  },\n  input: {\n    borderRadius: 2,\n    position: 'relative',\n    border: '1px solid rgba(0, 0, 0, 0.23)',\n    fontSize: 14,\n    padding: '4px 8px',\n    height: 20,\n    transition: theme.transitions.create(['border-color', 'box-shadow']),\n    '&:focus': {\n      borderRadius: 2\n    }\n  }\n}))(InputBase)\n\nconst useStyles = makeStyles((theme) => ({\n  margin: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  }\n}))\n\nconst FluentSimpleSelectComponent = ({\n  label,\n  children,\n  id,\n  value,\n  handleChange,\n  defaultValue\n}, ref) => {\n  const classes = useStyles()\n\n  return (\n    <div>\n      <FormControl className={classes.margin}>\n        <Typography\n          className={classes.label}\n          style={{\n            color: 'rgba(0, 0, 0, 0.54)',\n            fontWeight: 400,\n            letterSpacing: 0\n          }}\n        >\n          {label}\n        </Typography>\n        <NativeSelect\n          id={id}\n          inputRef={ref}\n          value={value}\n          onChange={handleChange}\n          defaultValue={defaultValue}\n          input={<FluentInput />}\n          noShrink='true'\n        >\n          {children}\n        </NativeSelect>\n      </FormControl>\n    </div>\n  )\n}\n\nFluentSimpleSelectComponent.propTypes = {\n  /**\n   * Label that appears above the selector\n   */\n  label: PropTypes.string,\n  /**\n   * Contents of the selected options (<option></option>)\n   */\n  children: PropTypes.node,\n  /**\n   * Function to handle option change\n   */\n  handleChange: PropTypes.func,\n  /**\n   * Value: the value of the selected item\n   */\n  value: PropTypes.string\n}\nexport const FluentSimpleSelect = forwardRef(FluentSimpleSelectComponent)\n"],"mappings":"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"}
+{"version":3,"file":"FluentSimpleSelect-BfoxBQj4.js","names":["useStyles","useStyles","useStyles","makeStyles","Box"],"sources":["../src/UI/inputs/menus/FluentSelectDirectoryMenu.jsx","../src/UI/inputs/menus/FluentSelectGroupMenu.jsx","../src/UI/inputs/menus/FluentScrollLoadAutocompleteMenu.jsx","../src/UI/inputs/menus/FluentSimpleSelect.jsx"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport React from 'react'\n\nimport Autocomplete from '@material-ui/lab/Autocomplete'\nimport { makeStyles, TextField } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  textField: {\n    marginLeft: theme.spacing(1),\n    marginRight: theme.spacing(1)\n  },\n  dense: {\n    marginTop: theme.spacing(1)\n  },\n  input: {\n    borderRadius: 2,\n    height: 32,\n    padding: 0,\n    marginTop: 3\n  },\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14\n  }\n}))\n\nexport const FluentSelectGroupMenu = ({\n  data,\n  placeholder,\n  id,\n  handleChange\n}) => {\n  const classes = useStyles()\n  const options =\n    data &&\n    data.map((option) => {\n      const firstLetter = option.label[0].toUpperCase()\n      return {\n        firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,\n        ...option\n      }\n    })\n\n  return (\n    <Autocomplete\n      id={id}\n      onChange={(event, value) => handleChange(value)}\n      options={options.sort(\n        (a, b) => -b.firstLetter.localeCompare(a.firstLetter)\n      )}\n      groupBy={(option) => option.firstLetter}\n      getOptionLabel={(option) => option.label}\n      style={{ width: 300 }}\n      renderInput={(params) => (\n        <TextField\n          {...params}\n          label={!params.inputProps.value && placeholder}\n          variant='outlined'\n          size='small'\n          InputLabelProps={{\n            shrink: false,\n            classes: {\n              root: classes.labelRoot,\n              focused: classes.labelFocused\n            }\n          }}\n          SelectProps={{\n            MenuProps: {\n              className: classes.menu\n            }\n          }}\n        />\n      )}\n    />\n  )\n}\n","/* eslint-disable no-use-before-define */\nimport React from 'react'\n\nimport Autocomplete from '@material-ui/lab/Autocomplete'\nimport { makeStyles, TextField } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  textField: {\n    marginLeft: theme.spacing(1),\n    marginRight: theme.spacing(1)\n  },\n  dense: {\n    marginTop: theme.spacing(1)\n  },\n  input: {\n    borderRadius: 2,\n    height: 32,\n    padding: 0,\n    marginTop: 3\n  },\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14\n  }\n}))\n\nexport const SelectGroupMenu = ({ data, placeholder, id, handleChange, className }) => {\n  const classes = useStyles()\n  const options =\n    data &&\n    data.map((option) => {\n      const grouping = option.category\n      return {\n        grouping,\n        ...option\n      }\n    })\n\n  return (\n    <Autocomplete\n      className={className}\n      id={id}\n      onChange={(event, value) => handleChange(value)}\n      options={options.sort((a, b) => -b.grouping.localeCompare(a.grouping))}\n      groupBy={(option) => option.grouping}\n      getOptionLabel={(option) => option.label}\n      style={{ width: 300 }}\n      renderInput={(params) => (\n        <TextField\n          {...params}\n          label={!params.inputProps.value && placeholder}\n          variant='outlined'\n          size='small'\n          InputLabelProps={{\n            shrink: false,\n            classes: {\n              root: classes.labelRoot,\n              focused: classes.labelFocused\n            }\n          }}\n          SelectProps={{\n            MenuProps: {\n              className: classes.menu\n            }\n          }}\n        />\n      )}\n    />\n  )\n}\n","import React, {\n  useState,\n  useCallback,\n  useEffect,\n  forwardRef,\n  useRef,\n  Children,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { CircularProgress } from '@material-ui/core';\nimport { apiMutate } from '../../../utilities/useAxiosMutate';\nimport { FluentSelectMenu } from './FluentSelectMenu';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useTranslation } from 'react-i18next';\nimport { Box } from '../../Box';\nimport Alert from '@material-ui/lab/Alert';\n\nconst useStyles = makeStyles((theme) => ({\n  listbox: {\n    position: 'relative',\n    maxHeight: 300,\n    overflow: 'auto',\n  },\n  listboxHidden: {\n    overflow: 'hidden',\n  },\n  loadingItem: {\n    textAlign: 'center',\n    padding: theme.spacing(1),\n  },\n  overlay: {\n    position: 'absolute',\n    inset: 0,\n    background: 'rgba(255,255,255,.95)',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    zIndex: 1,\n  },\n  overlayText: {\n    marginTop: theme.spacing(1),\n  },\n  alert: {\n    marginTop: theme.spacing(1),\n  },\n}));\n\n/**\n* **FluentScrollLoadAutocompleteMenu**\n*\n* A drop‑in extension for MUI’s `<Autocomplete>` that:\n*\n* 1. Fetches paginated / sortable data from any REST endpoint  \n* 2. Implements infinite scrolling with automatic scroll‑position restore  \n* 3. Supports client‑side filtering, grouping   \n* 4. Displays a Material UI `<CircularProgress>` while loading and a MUI `<Alert>` on errors\n*\n* Internally it wraps **unity‑fluent‑library**’s `<FluentSelectMenu>` so you get the same\n* keyboard navigation and styling as the rest of the Fluent controls.\n*\n* ---\n*\n* ### Typical usage\n* ```jsx\n* const endpoint = (q, page, size, sortCol, sortDir) =>\n*   `/api/products?search=${q}&page=${page}&pageSize=${size}&sort=${sortCol}&dir=${sortDir}`;\n*\n* const map = (raw) => ({\n*   items: raw.items,\n*   total: raw.totalRows,\n* });\n*\n* <FluentScrollLoadAutocompleteMenu\n*   apiBaseUrl=\"https://api.example.com\"\n*   apiEndpoint={endpoint}\n*   mapResponse={map}\n*   onChange={(product) => console.log(product)}\n* />\n* ```\n* ---\n*\n* @param {Object}   props\n* @param {string}   props.apiBaseUrl   Base URL forwarded to **apiMutate**\n* @param {Function} props.apiEndpoint  `(keyword, page, pageSize, sortCol, sortDir) => string`\n* @param {Function} props.mapResponse  Maps raw API payload → `{ items, total }`\n* @param {Function} [props.onChange]   Fires when the user selects/clears an option\n* @param {Function} [props.getOptionLabel] Returns the display label for an item (default: `o.name`)\n* @param {Function} [props.groupBy]    Returns a group heading string for an item\n* @param {string}   [props.placeholder='Search…'] Placeholder text\n* @param {string}   [props.displayProperty='name'] Property passed to `<FluentSelectMenu>`\n* @param {number|string} [props.width=300] Fixed width of the component container\n* @param {boolean}  [props.fetchEnabled=true] Disable to work fully offline\n* @param {*}        [props.initialValue=null]  Pre‑selected value shown immediately\n* @param {Array}    [props.initialOptions=[]]  Pre‑loaded options shown immediately\n* @param {boolean}  [props.isPaginated=true]   Disable if your API returns the full list\n* @param {boolean}  [props.isSortable=true]    Disable server‑side sorting\n* @param {boolean}  [props.isFilterable=true]  Disable server‑side filtering\n* @param {number}   [props.pageSize=50]        Items per page when paginating\n* @param {string}   [props.sortColumn='Name']  Default sort column\n* @param {'ASC'|'DESC'} [props.sortDirection='ASC'] Default sort direction\n*\n* @returns {JSX.Element}\n*/\nexport const FluentScrollLoadAutocompleteMenu = ({\n  apiBaseUrl,\n  apiEndpoint,\n  apiConfig = {},\n  apiData = null,\n  mapResponse,\n  onChange,\n  getOptionLabel = (o) => o?.name ?? '',\n  groupBy,\n  placeholder = 'Search…',\n  displayProperty = 'name',\n  width = 300,\n  fetchEnabled = true,\n  initialValue = null,\n  initialOptions = [],\n  isPaginated = true,\n  isSortable = true,\n  isFilterable = true,\n  pageSize = 50,\n  sortColumn = 'Name',\n  sortDirection = 'ASC',\n}) => {\n  const classes = useStyles();\n  const [options, setOptions] = useState(initialOptions);\n  const [value, setValue] = useState(initialValue);\n  const [inputValue, setInputValue] = useState('');\n  const [loading, setLoading] = useState(false);\n  const [loadingMore, setLoadingMore] = useState(false);\n  const [error, setError] = useState(null);\n  const [pageNumber, setPageNumber] = useState(1);\n  const [totalRows, setTotalRows] = useState(0);\n\n  const configRef = useRef(apiConfig);\n  const dataRef = useRef(apiData);\n  const listboxRef = useRef(null);\n  const prevScrollPositionRef = useRef(0);\n\n  const { t } = useTranslation();\n\n  /**\n   * Fetches a page of data from the provided API endpoint and updates the component state accordingly.\n   *\n   * This function supports:\n   * - Filtering (if `isFilterable` is true)\n   * - Sorting (if `isSortable` is true)\n   * - Pagination (based on the `page` and `pageSize` arguments)\n   * - Infinite scroll appending (via the `append` flag)\n   *\n   * @function fetchPage\n   * @param {string} keyword - The keyword to filter results by (if filtering is enabled)\n   * @param {number} page - The page number to fetch\n   * @param {boolean} [append=false] - If true, appends results to the current list; otherwise replaces it\n   * @returns {Promise<void>} - Resolves once data is fetched and state is updated\n   */\n  const fetchPage = useCallback(\n    async (keyword, page, append = false) => {\n      if (!fetchEnabled) return;\n\n      setError(null);\n      page === 1 ? setLoading(true) : setLoadingMore(true);\n\n      try {\n        const url = apiEndpoint(\n          isFilterable ? keyword : '',\n          page,\n          pageSize,\n          isSortable ? sortColumn : '',\n          isSortable ? sortDirection : 'ASC'\n        );\n        const resp = await apiMutate(apiBaseUrl, url, configRef.current, dataRef.current);\n        const { items, total } = mapResponse(resp.data);\n\n        setOptions((prev) => (append ? [...prev, ...items] : items));\n        setTotalRows(total);\n        setPageNumber(page);\n      } catch (err) {\n        setError(err.response?.data?.message ?? err.message ?? t('Unknown error'));\n      } finally {\n        page === 1 ? setLoading(false) : setLoadingMore(false);\n      }\n    },\n    [\n      apiBaseUrl,\n      apiEndpoint,\n      mapResponse,\n      pageSize,\n      sortColumn,\n      sortDirection,\n      isFilterable,\n      isSortable,\n      fetchEnabled,\n      t,\n    ]\n  );\n\n  /* ---------- infinite scroll ---------- */\n  const handleListboxScroll = (e) => {\n    if (!isPaginated) return;\n\n    const node = e.currentTarget;\n    prevScrollPositionRef.current = node.scrollTop;\n\n    if (\n      node.scrollTop + node.clientHeight >= node.scrollHeight - 30 &&\n      !loadingMore &&\n      options.length < totalRows\n    ) {\n      fetchPage(inputValue, pageNumber + 1, true);\n    }\n  };\n\n  /**\n   * **Listbox**\n   *\n   * Custom scrollable container used by the Autocomplete dropdown.\n   * - Attaches a ref to preserve scroll position between pages.\n   * - Displays a loading message if no options are present initially.\n   * - Shows a full overlay spinner when `loadingMore` is true.\n   *\n   * This component is passed as the `ListboxComponent` to FluentSelectMenu’s\n   * Autocomplete integration, enabling infinite scroll with visual feedback.\n   *\n   * @param {Object} props\n   * @param {React.ReactNode} props.children - Option elements to render\n   * @param {boolean} props.initialLoading - Whether to show the “Loading…” message initially\n   * @param {React.Ref} ref - Forwarded ref from the Autocomplete dropdown\n   * @returns {JSX.Element}\n   */\n  const Listbox = forwardRef(({ children, initialLoading, ...other }, ref) => (\n    <ul\n      ref={(inst) => {\n        if (inst) listboxRef.current = inst;\n        if (typeof ref === 'function') ref(inst);\n        else if (ref) ref.current = inst;\n      }}\n      {...other}\n      style={{\n        position: 'relative',\n        maxHeight: 300,\n        overflow: loadingMore ? 'hidden' : 'auto',\n      }}\n    >\n      {Children.count(children) === 0 && initialLoading ? (\n        <li style={{ textAlign: 'center', padding: 8 }}>{t('Loading...')}</li>\n      ) : (\n        children\n      )}\n\n      {loadingMore && (\n        <Box className={classes.overlay}>\n          <CircularProgress size={20} />\n          <span className={classes.overlayText}>{t('Loading...')}</span>\n        </Box>\n      )}\n    </ul>\n  ));\n  Listbox.displayName = 'FluentSMAutocompleteListbox';\n\n  /* [Initial / filtered fetch] */\n  useEffect(() => {\n    if (!fetchEnabled || !isFilterable) return;\n    if (value && inputValue === getOptionLabel(value)) return;\n\n    const timer = setTimeout(() => fetchPage(inputValue, 1, false), 400);\n    return () => clearTimeout(timer);\n  }, [inputValue, fetchPage, value, getOptionLabel, isFilterable, fetchEnabled]);\n\n  // [Initial fetch when filtering is disabled]\n  useEffect(() => {\n    if (!fetchEnabled || isFilterable) return;\n    fetchPage('', 1, false);\n  }, [isFilterable, fetchEnabled, fetchPage]);\n\n  // [Restores scroll position after loading more items]\n  useEffect(() => {\n    if (!loadingMore && listboxRef.current) {\n      listboxRef.current.scrollTop = prevScrollPositionRef.current;\n    }\n  }, [options, loadingMore]);\n\n  useEffect(() => { configRef.current = apiConfig }, [apiConfig]);\n  useEffect(() => { dataRef.current = apiData }, [apiData]);\n\n  return (\n    <Box width={width}>\n      <FluentSelectMenu\n        placeholder={placeholder}\n        data={options}\n        displayProperty={displayProperty}\n        onChange={(val) => {\n          setValue(val);\n          onChange?.(val);\n        }}\n        InputProps={{\n          endAdornment:\n            loading && pageNumber === 1 ? (\n              <CircularProgress color=\"inherit\" size={20} />\n            ) : null,\n        }}\n        autoCompleteProps={{\n          value,\n          inputValue,\n          onInputChange: (_e, v) => setInputValue(v),\n          loading: loading && pageNumber === 1,\n          getOptionLabel,\n          groupBy,\n          ListboxComponent: Listbox,\n          ListboxProps: {\n            onScroll: handleListboxScroll,\n            initialLoading: loading && pageNumber === 1,\n          },\n        }}\n      />\n\n      {error && (\n        <Alert severity=\"error\" style={{ marginTop: 8 }}>\n          {error}\n        </Alert>\n      )}\n    </Box>\n  );\n};\n\nFluentScrollLoadAutocompleteMenu.propTypes = {\n  /** Base URL used by apiMutate */\n  apiBaseUrl: PropTypes.string.isRequired,\n\n  /** Builds the endpoint URL: (keyword, page, pageSize, sortCol, sortDir) => string */\n  apiEndpoint: PropTypes.func.isRequired,\n\n  /** Additional config passed to apiMutate */\n  apiConfig: PropTypes.object,\n\n  /** Raw API data passed to apiMutate */\n  apiData: PropTypes.any,\n\n  /** Maps raw API payload into { items, total } */\n  mapResponse: PropTypes.func.isRequired,\n\n  /** Called when the user selects or clears an option */\n  onChange: PropTypes.func,\n\n  /** Returns the text label for a given option */\n  getOptionLabel: PropTypes.func,\n\n  /** Returns the group heading for a given option */\n  groupBy: PropTypes.func,\n\n  placeholder: PropTypes.string,\n  displayProperty: PropTypes.string,\n  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n  /* Behavior flags */\n  fetchEnabled: PropTypes.bool,\n  initialValue: PropTypes.any,\n  initialOptions: PropTypes.array,\n\n  isPaginated: PropTypes.bool,\n  isSortable: PropTypes.bool,\n  isFilterable: PropTypes.bool,\n\n  pageSize: PropTypes.number,\n  sortColumn: PropTypes.string,\n  sortDirection: PropTypes.oneOf(['ASC', 'DESC']),\n};\n","import React, {forwardRef} from 'react'\nimport {\n  makeStyles,\n  withStyles,\n  Typography,\n  FormControl,\n  NativeSelect,\n  InputBase\n} from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst FluentInput = withStyles((theme) => ({\n  root: {\n    'label + &': {\n      marginTop: theme.spacing(1)\n    }\n  },\n  input: {\n    borderRadius: 2,\n    position: 'relative',\n    border: '1px solid rgba(0, 0, 0, 0.23)',\n    fontSize: 14,\n    padding: '4px 8px',\n    height: 20,\n    transition: theme.transitions.create(['border-color', 'box-shadow']),\n    '&:focus': {\n      borderRadius: 2\n    }\n  }\n}))(InputBase)\n\nconst useStyles = makeStyles((theme) => ({\n  margin: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  }\n}))\n\nconst FluentSimpleSelectComponent = ({\n  label,\n  children,\n  id,\n  value,\n  handleChange,\n  defaultValue\n}, ref) => {\n  const classes = useStyles()\n\n  return (\n    <div>\n      <FormControl className={classes.margin}>\n        <Typography\n          className={classes.label}\n          style={{\n            color: 'rgba(0, 0, 0, 0.54)',\n            fontWeight: 400,\n            letterSpacing: 0\n          }}\n        >\n          {label}\n        </Typography>\n        <NativeSelect\n          id={id}\n          inputRef={ref}\n          value={value}\n          onChange={handleChange}\n          defaultValue={defaultValue}\n          input={<FluentInput />}\n          noShrink='true'\n        >\n          {children}\n        </NativeSelect>\n      </FormControl>\n    </div>\n  )\n}\n\nFluentSimpleSelectComponent.propTypes = {\n  /**\n   * Label that appears above the selector\n   */\n  label: PropTypes.string,\n  /**\n   * Contents of the selected options (<option></option>)\n   */\n  children: PropTypes.node,\n  /**\n   * Function to handle option change\n   */\n  handleChange: PropTypes.func,\n  /**\n   * Value: the value of the selected item\n   */\n  value: PropTypes.string\n}\nexport const FluentSimpleSelect = forwardRef(FluentSimpleSelectComponent)\n"],"mappings":";;;;;;;;;;;;AAMA,MAAMA,cAAY,YAAY,WAAW;CACvC,WAAW;EACT,YAAY,MAAM,QAAQ,EAAE;EAC5B,aAAa,MAAM,QAAQ,EAAE;EAC9B;CACD,OAAO,EACL,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACD,OAAO;EACL,cAAc;EACd,QAAQ;EACR,SAAS;EACT,WAAW;EACZ;CACD,eAAe,EACb,UAAU,IACX;CACD,WAAW,EACT,UAAU,IACX;CACF,EAAE;AAEH,MAAa,yBAAyB,EACpC,MACA,aACA,IACA,mBACI;CACJ,MAAM,UAAUA,aAAW;CAC3B,MAAM,UACJ,QACA,KAAK,KAAK,WAAW;EACnB,MAAM,cAAc,OAAO,MAAM,GAAG,aAAa;AACjD,SAAO;GACL,aAAa,QAAQ,KAAK,YAAY,GAAG,QAAQ;GACjD,GAAG;GACJ;GACD;AAEJ,QACE,oCAAC;EACK;EACJ,WAAW,OAAO,UAAU,aAAa,MAAM;EAC/C,SAAS,QAAQ,MACd,GAAG,MAAM,CAAC,EAAE,YAAY,cAAc,EAAE,YAAY,CACtD;EACD,UAAU,WAAW,OAAO;EAC5B,iBAAiB,WAAW,OAAO;EACnC,OAAO,EAAE,OAAO,KAAK;EACrB,cAAc,WACZ,oCAAC;GACC,GAAI;GACJ,OAAO,CAAC,OAAO,WAAW,SAAS;GACnC,SAAQ;GACR,MAAK;GACL,iBAAiB;IACf,QAAQ;IACR,SAAS;KACP,MAAM,QAAQ;KACd,SAAS,QAAQ;KAClB;IACF;GACD,aAAa,EACX,WAAW,EACT,WAAW,QAAQ,MACpB,EACF;IACD;GAEJ;;;;;ACrEN,MAAMC,cAAY,YAAY,WAAW;CACvC,WAAW;EACT,YAAY,MAAM,QAAQ,EAAE;EAC5B,aAAa,MAAM,QAAQ,EAAE;EAC9B;CACD,OAAO,EACL,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACD,OAAO;EACL,cAAc;EACd,QAAQ;EACR,SAAS;EACT,WAAW;EACZ;CACD,eAAe,EACb,UAAU,IACX;CACD,WAAW,EACT,UAAU,IACX;CACF,EAAE;AAEH,MAAa,mBAAmB,EAAE,MAAM,aAAa,IAAI,cAAc,gBAAgB;CACrF,MAAM,UAAUA,aAAW;CAC3B,MAAM,UACJ,QACA,KAAK,KAAK,WAAW;AAEnB,SAAO;GACL,UAFe,OAAO;GAGtB,GAAG;GACJ;GACD;AAEJ,QACE,oCAAC;EACY;EACP;EACJ,WAAW,OAAO,UAAU,aAAa,MAAM;EAC/C,SAAS,QAAQ,MAAM,GAAG,MAAM,CAAC,EAAE,SAAS,cAAc,EAAE,SAAS,CAAC;EACtE,UAAU,WAAW,OAAO;EAC5B,iBAAiB,WAAW,OAAO;EACnC,OAAO,EAAE,OAAO,KAAK;EACrB,cAAc,WACZ,oCAAC;GACC,GAAI;GACJ,OAAO,CAAC,OAAO,WAAW,SAAS;GACnC,SAAQ;GACR,MAAK;GACL,iBAAiB;IACf,QAAQ;IACR,SAAS;KACP,MAAM,QAAQ;KACd,SAAS,QAAQ;KAClB;IACF;GACD,aAAa,EACX,WAAW,EACT,WAAW,QAAQ,MACpB,EACF;IACD;GAEJ;;;;;ACpDN,MAAMC,cAAYC,cAAY,WAAW;CACvC,SAAS;EACP,UAAU;EACV,WAAW;EACX,UAAU;EACX;CACD,eAAe,EACb,UAAU,UACX;CACD,aAAa;EACX,WAAW;EACX,SAAS,MAAM,QAAQ,EAAE;EAC1B;CACD,SAAS;EACP,UAAU;EACV,OAAO;EACP,YAAY;EACZ,SAAS;EACT,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,QAAQ;EACT;CACD,aAAa,EACX,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACD,OAAO,EACL,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACF,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DH,MAAa,oCAAoC,EAC/C,YACA,aACA,YAAY,EAAE,EACd,UAAU,MACV,aACA,UACA,kBAAkB,MAAM,GAAG,QAAQ,IACnC,SACA,cAAc,WACd,kBAAkB,QAClB,QAAQ,KACR,eAAe,MACf,eAAe,MACf,iBAAiB,EAAE,EACnB,cAAc,MACd,aAAa,MACb,eAAe,MACf,WAAW,IACX,aAAa,QACb,gBAAgB,YACZ;CACJ,MAAM,UAAUD,aAAW;CAC3B,MAAM,CAAC,SAAS,cAAc,SAAS,eAAe;CACtD,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAS,GAAG;CAChD,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAE7C,MAAM,YAAY,OAAO,UAAU;CACnC,MAAM,UAAU,OAAO,QAAQ;CAC/B,MAAM,aAAa,OAAO,KAAK;CAC/B,MAAM,wBAAwB,OAAO,EAAE;CAEvC,MAAM,EAAE,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAiB9B,MAAM,YAAY,YAChB,OAAO,SAAS,MAAM,SAAS,UAAU;AACvC,MAAI,CAAC,aAAc;AAEnB,WAAS,KAAK;AACd,WAAS,IAAI,WAAW,KAAK,GAAG,eAAe,KAAK;AAEpD,MAAI;GASF,MAAM,EAAE,OAAO,UAAU,aADZ,MAAM,UAAU,YAPjB,YACV,eAAe,UAAU,IACzB,MACA,UACA,aAAa,aAAa,IAC1B,aAAa,gBAAgB,MAC9B,EAC6C,UAAU,SAAS,QAAQ,QAAQ,EACvC,KAAK;AAE/C,eAAY,SAAU,SAAS,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,MAAO;AAC5D,gBAAa,MAAM;AACnB,iBAAc,KAAK;WACZ,KAAK;AACZ,YAAS,IAAI,UAAU,MAAM,WAAW,IAAI,WAAW,EAAE,gBAAgB,CAAC;YAClE;AACR,YAAS,IAAI,WAAW,MAAM,GAAG,eAAe,MAAM;;IAG1D;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,uBAAuB,MAAM;AACjC,MAAI,CAAC,YAAa;EAElB,MAAM,OAAO,EAAE;AACf,wBAAsB,UAAU,KAAK;AAErC,MACE,KAAK,YAAY,KAAK,gBAAgB,KAAK,eAAe,MAC1D,CAAC,eACD,QAAQ,SAAS,UAEjB,WAAU,YAAY,aAAa,GAAG,KAAK;;;;;;;;;;;;;;;;;;;CAqB/C,MAAM,UAAU,YAAY,EAAE,UAAU,gBAAgB,GAAG,SAAS,QAClE,oCAAC;EACC,MAAM,SAAS;AACb,OAAI,KAAM,YAAW,UAAU;AAC/B,OAAI,OAAO,QAAQ,WAAY,KAAI,KAAK;YAC/B,IAAK,KAAI,UAAU;;EAE9B,GAAI;EACJ,OAAO;GACL,UAAU;GACV,WAAW;GACX,UAAU,cAAc,WAAW;GACpC;IAEA,SAAS,MAAM,SAAS,KAAK,KAAK,iBACjC,oCAAC,QAAG,OAAO;EAAE,WAAW;EAAU,SAAS;EAAG,IAAG,EAAE,aAAa,CAAM,GAEtE,UAGD,eACC,oCAACE,SAAI,WAAW,QAAQ,WACtB,oCAAC,oBAAiB,MAAM,KAAM,EAC9B,oCAAC,UAAK,WAAW,QAAQ,eAAc,EAAE,aAAa,CAAQ,CAC1D,CAEL,CACL;AACF,SAAQ,cAAc;AAGtB,iBAAgB;AACd,MAAI,CAAC,gBAAgB,CAAC,aAAc;AACpC,MAAI,SAAS,eAAe,eAAe,MAAM,CAAE;EAEnD,MAAM,QAAQ,iBAAiB,UAAU,YAAY,GAAG,MAAM,EAAE,IAAI;AACpE,eAAa,aAAa,MAAM;IAC/B;EAAC;EAAY;EAAW;EAAO;EAAgB;EAAc;EAAa,CAAC;AAG9E,iBAAgB;AACd,MAAI,CAAC,gBAAgB,aAAc;AACnC,YAAU,IAAI,GAAG,MAAM;IACtB;EAAC;EAAc;EAAc;EAAU,CAAC;AAG3C,iBAAgB;AACd,MAAI,CAAC,eAAe,WAAW,QAC7B,YAAW,QAAQ,YAAY,sBAAsB;IAEtD,CAAC,SAAS,YAAY,CAAC;AAE1B,iBAAgB;AAAE,YAAU,UAAU;IAAa,CAAC,UAAU,CAAC;AAC/D,iBAAgB;AAAE,UAAQ,UAAU;IAAW,CAAC,QAAQ,CAAC;AAEzD,QACE,oCAACA,SAAW,SACV,oCAAC;EACc;EACb,MAAM;EACW;EACjB,WAAW,QAAQ;AACjB,YAAS,IAAI;AACb,cAAW,IAAI;;EAEjB,YAAY,EACV,cACE,WAAW,eAAe,IACxB,oCAAC;GAAiB,OAAM;GAAU,MAAM;IAAM,GAC5C,MACP;EACD,mBAAmB;GACjB;GACA;GACA,gBAAgB,IAAI,MAAM,cAAc,EAAE;GAC1C,SAAS,WAAW,eAAe;GACnC;GACA;GACA,kBAAkB;GAClB,cAAc;IACZ,UAAU;IACV,gBAAgB,WAAW,eAAe;IAC3C;GACF;GACD,EAED,SACC,oCAAC;EAAM,UAAS;EAAQ,OAAO,EAAE,WAAW,GAAG;IAC5C,MACK,CAEN;;AAIV,iCAAiC,YAAY;CAE3C,YAAY,UAAU,OAAO;CAG7B,aAAa,UAAU,KAAK;CAG5B,WAAW,UAAU;CAGrB,SAAS,UAAU;CAGnB,aAAa,UAAU,KAAK;CAG5B,UAAU,UAAU;CAGpB,gBAAgB,UAAU;CAG1B,SAAS,UAAU;CAEnB,aAAa,UAAU;CACvB,iBAAiB,UAAU;CAC3B,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC;CAGhE,cAAc,UAAU;CACxB,cAAc,UAAU;CACxB,gBAAgB,UAAU;CAE1B,aAAa,UAAU;CACvB,YAAY,UAAU;CACtB,cAAc,UAAU;CAExB,UAAU,UAAU;CACpB,YAAY,UAAU;CACtB,eAAe,UAAU,MAAM,CAAC,OAAO,OAAO,CAAC;CAChD;;;;ACrWD,MAAM,cAAc,YAAY,WAAW;CACzC,MAAM,EACJ,aAAa,EACX,WAAW,MAAM,QAAQ,EAAE,EAC5B,EACF;CACD,OAAO;EACL,cAAc;EACd,UAAU;EACV,QAAQ;EACR,UAAU;EACV,SAAS;EACT,QAAQ;EACR,YAAY,MAAM,YAAY,OAAO,CAAC,gBAAgB,aAAa,CAAC;EACpE,WAAW,EACT,cAAc,GACf;EACF;CACF,EAAE,CAAC,UAAU;AAEd,MAAM,YAAY,YAAY,WAAW,EACvC,QAAQ;CACN,WAAW,MAAM,QAAQ,EAAE;CAC3B,cAAc,MAAM,QAAQ,EAAE;CAC/B,EACF,EAAE;AAEH,MAAM,+BAA+B,EACnC,OACA,UACA,IACA,OACA,cACA,gBACC,QAAQ;CACT,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC,aACC,oCAAC,eAAY,WAAW,QAAQ,UAC9B,oCAAC;EACC,WAAW,QAAQ;EACnB,OAAO;GACL,OAAO;GACP,YAAY;GACZ,eAAe;GAChB;IAEA,MACU,EACb,oCAAC;EACK;EACJ,UAAU;EACH;EACP,UAAU;EACI;EACd,OAAO,oCAAC,kBAAc;EACtB,UAAS;IAER,SACY,CACH,CACV;;AAIV,4BAA4B,YAAY;CAItC,OAAO,UAAU;CAIjB,UAAU,UAAU;CAIpB,cAAc,UAAU;CAIxB,OAAO,UAAU;CAClB;AACD,MAAa,qBAAqB,WAAW,4BAA4B"}

package/dist/{FluentTimePicker-hNcocKsd.js → FluentTimePicker-BFxFcgvX.js}

@@ -64,4 +64,4 @@ FluentTimePicker.propTypes = {
 
 //#endregion
 export { FluentTimePicker as t };
-//# sourceMappingURL=FluentTimePicker-hNcocKsd.js.map
+//# sourceMappingURL=FluentTimePicker-BFxFcgvX.js.map

package/dist/{FluentTimePicker-hNcocKsd.js.map → FluentTimePicker-BFxFcgvX.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FluentTimePicker-hNcocKsd.js","names":[],"sources":["../src/UI/inputs/pickers/FluentTimePicker.jsx"],"sourcesContent":["import React from 'react'\nimport { KeyboardTimePicker } from '@material-ui/pickers'\nimport { makeStyles, InputAdornment } from '@material-ui/core'\nimport { EventDateIcon } from '@fluentui/react-icons'\nimport { MuiPickersUtilsProvider } from '@material-ui/pickers'\nimport DateFnsUtils from '@date-io/date-fns'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  inputRoot: {\n    fontSize: 12\n  },\n  input: {\n    borderRadius: 2,\n    height: 32,\n    padding: 0,\n    paddingLeft: theme.spacing(1)\n  },\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14\n  },\n  FormControl: {\n    display: 'none',\n    marginTop: 0\n  }\n}))\n\nexport const FluentTimePicker = (props) => {\n  const classes = useStyles()\n  const { id, label, startAdornment, endAdornment, ...otherProps } = props\n\n  return (\n    <div>\n      <MuiPickersUtilsProvider utils={DateFnsUtils}>\n        <KeyboardTimePicker\n          variant='inline'\n          margin='normal'\n          {...otherProps}\n          id={id}\n          inputVariant='outlined'\n          KeyboardButtonProps={{\n            'aria-label': 'change date'\n          }}\n          keyboardIcon={<EventDateIcon style={{ fontSize: 16 }} />}\n          InputProps={{\n            classes: {\n              root: classes.input,\n              input: classes.formTextInput,\n              ...props.InputProps?.classes\n            },\n            ...props.InputProps,\n            ...startAdornment,\n            ...endAdornment,\n            startAdornment: (\n              <InputAdornment\n                classes={{ root: classes.inputRoot }}\n                className={classes.inputRoot}\n                position='start'\n              >\n                {label}\n              </InputAdornment>\n            )\n          }}\n          InputLabelProps={{\n            shrink: false,\n            classes: {\n              root: classes.labelRoot,\n              focused: classes.labelFocused\n            }\n          }}\n        />\n      </MuiPickersUtilsProvider>\n    </div>\n  )\n}\n\nFluentTimePicker.propTypes = {\n  /**\n   * Adornment label (eg, From: )\n   */\n  label: PropTypes.string,\n  /**\n   * Id\n   */\n  id: PropTypes.string\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,WAAW,EACT,UAAU,IACX;CACD,OAAO;EACL,cAAc;EACd,QAAQ;EACR,SAAS;EACT,aAAa,MAAM,QAAQ,EAAE;EAC9B;CACD,eAAe,EACb,UAAU,IACX;CACD,WAAW,EACT,UAAU,IACX;CACD,aAAa;EACX,SAAS;EACT,WAAW;EACZ;CACF,EAAE;AAEH,MAAa,oBAAoB,UAAU;CACzC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,IAAI,OAAO,gBAAgB,cAAc,GAAG,eAAe;AAEnE,QACE,oCAAC,aACC,oCAAC,2BAAwB,OAAO,gBAC9B,oCAAC;EACC,SAAQ;EACR,QAAO;EACP,GAAI;EACA;EACJ,cAAa;EACb,qBAAqB,EACnB,cAAc,eACf;EACD,cAAc,oCAAC,iBAAc,OAAO,EAAE,UAAU,IAAI,GAAI;EACxD,YAAY;GACV,SAAS;IACP,MAAM,QAAQ;IACd,OAAO,QAAQ;IACf,GAAG,MAAM,YAAY;IACtB;GACD,GAAG,MAAM;GACT,GAAG;GACH,GAAG;GACH,gBACE,oCAAC;IACC,SAAS,EAAE,MAAM,QAAQ,WAAW;IACpC,WAAW,QAAQ;IACnB,UAAS;MAER,MACc;GAEpB;EACD,iBAAiB;GACf,QAAQ;GACR,SAAS;IACP,MAAM,QAAQ;IACd,SAAS,QAAQ;IAClB;GACF;GACD,CACsB,CACtB;;AAIV,iBAAiB,YAAY;CAI3B,OAAO,UAAU;CAIjB,IAAI,UAAU;CACf"}
+{"version":3,"file":"FluentTimePicker-BFxFcgvX.js","names":[],"sources":["../src/UI/inputs/pickers/FluentTimePicker.jsx"],"sourcesContent":["import React from 'react'\nimport { KeyboardTimePicker } from '@material-ui/pickers'\nimport { makeStyles, InputAdornment } from '@material-ui/core'\nimport { EventDateIcon } from '@fluentui/react-icons'\nimport { MuiPickersUtilsProvider } from '@material-ui/pickers'\nimport DateFnsUtils from '@date-io/date-fns'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  inputRoot: {\n    fontSize: 12\n  },\n  input: {\n    borderRadius: 2,\n    height: 32,\n    padding: 0,\n    paddingLeft: theme.spacing(1)\n  },\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14\n  },\n  FormControl: {\n    display: 'none',\n    marginTop: 0\n  }\n}))\n\nexport const FluentTimePicker = (props) => {\n  const classes = useStyles()\n  const { id, label, startAdornment, endAdornment, ...otherProps } = props\n\n  return (\n    <div>\n      <MuiPickersUtilsProvider utils={DateFnsUtils}>\n        <KeyboardTimePicker\n          variant='inline'\n          margin='normal'\n          {...otherProps}\n          id={id}\n          inputVariant='outlined'\n          KeyboardButtonProps={{\n            'aria-label': 'change date'\n          }}\n          keyboardIcon={<EventDateIcon style={{ fontSize: 16 }} />}\n          InputProps={{\n            classes: {\n              root: classes.input,\n              input: classes.formTextInput,\n              ...props.InputProps?.classes\n            },\n            ...props.InputProps,\n            ...startAdornment,\n            ...endAdornment,\n            startAdornment: (\n              <InputAdornment\n                classes={{ root: classes.inputRoot }}\n                className={classes.inputRoot}\n                position='start'\n              >\n                {label}\n              </InputAdornment>\n            )\n          }}\n          InputLabelProps={{\n            shrink: false,\n            classes: {\n              root: classes.labelRoot,\n              focused: classes.labelFocused\n            }\n          }}\n        />\n      </MuiPickersUtilsProvider>\n    </div>\n  )\n}\n\nFluentTimePicker.propTypes = {\n  /**\n   * Adornment label (eg, From: )\n   */\n  label: PropTypes.string,\n  /**\n   * Id\n   */\n  id: PropTypes.string\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,WAAW,EACT,UAAU,IACX;CACD,OAAO;EACL,cAAc;EACd,QAAQ;EACR,SAAS;EACT,aAAa,MAAM,QAAQ,EAAE;EAC9B;CACD,eAAe,EACb,UAAU,IACX;CACD,WAAW,EACT,UAAU,IACX;CACD,aAAa;EACX,SAAS;EACT,WAAW;EACZ;CACF,EAAE;AAEH,MAAa,oBAAoB,UAAU;CACzC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,IAAI,OAAO,gBAAgB,cAAc,GAAG,eAAe;AAEnE,QACE,oCAAC,aACC,oCAAC,2BAAwB,OAAO,gBAC9B,oCAAC;EACC,SAAQ;EACR,QAAO;EACP,GAAI;EACA;EACJ,cAAa;EACb,qBAAqB,EACnB,cAAc,eACf;EACD,cAAc,oCAAC,iBAAc,OAAO,EAAE,UAAU,IAAI,GAAI;EACxD,YAAY;GACV,SAAS;IACP,MAAM,QAAQ;IACd,OAAO,QAAQ;IACf,GAAG,MAAM,YAAY;IACtB;GACD,GAAG,MAAM;GACT,GAAG;GACH,GAAG;GACH,gBACE,oCAAC;IACC,SAAS,EAAE,MAAM,QAAQ,WAAW;IACpC,WAAW,QAAQ;IACnB,UAAS;MAER,MACc;GAEpB;EACD,iBAAiB;GACf,QAAQ;GACR,SAAS;IACP,MAAM,QAAQ;IACd,SAAS,QAAQ;IAClB;GACF;GACD,CACsB,CACtB;;AAIV,iBAAiB,YAAY;CAI3B,OAAO,UAAU;CAIjB,IAAI,UAAU;CACf"}

package/dist/{GraphCard-Dv4a99wo.js → GraphCard-BhcSveF4.js}

@@ -72,4 +72,4 @@ GraphCard.propTypes = {
 
 //#endregion
 export { GraphCard as t };
-//# sourceMappingURL=GraphCard-Dv4a99wo.js.map
+//# sourceMappingURL=GraphCard-BhcSveF4.js.map

package/dist/{GraphCard-Dv4a99wo.js.map → GraphCard-BhcSveF4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GraphCard-Dv4a99wo.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-BhcSveF4.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/{IconKey-D7fZ_U4O.js → IconKey-BLHF3hfg.js}

@@ -57,4 +57,4 @@ IconKey.propTypes = {
 
 //#endregion
 export { ColorKey as n, IconKey as t };
-//# sourceMappingURL=IconKey-D7fZ_U4O.js.map
+//# sourceMappingURL=IconKey-BLHF3hfg.js.map

package/dist/{IconKey-D7fZ_U4O.js.map → IconKey-BLHF3hfg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"IconKey-D7fZ_U4O.js","names":["useStyles"],"sources":["../src/UI/dataDisplay/map/ColorKey.jsx","../src/UI/dataDisplay/map/IconKey.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  itemKey: {\n    width: theme.spacing(4),\n    height: theme.spacing(0.5),\n    marginTop: theme.spacing(0.5)\n  },\n  keyRoot: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    marginRight: theme.spacing(5),\n    width: theme.spacing(10)\n  }\n}))\n\nexport const ColorKey = ({ label, color }) => {\n  const classes = useStyles()\n  return (\n    <div className={classes.keyRoot}>\n      <Typography variant='caption'>{label}</Typography>\n      <div className={classes.itemKey} style={{ background: color }} />\n    </div>\n  )\n}\n\nColorKey.propTypes = {\n  /**\n   * Key label\n   */\n  label: PropTypes.string.isRequired,\n  /**\n   * Color of the key item\n   */\n  color: PropTypes.string.isRequired\n}\n","import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  keyRoot: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    marginRight: theme.spacing(5)\n  },\n  label: {\n    marginTop: 1,\n    marginLeft: theme.spacing(1)\n  }\n}))\n\nexport const IconKey = ({ label, icon }) => {\n  const classes = useStyles()\n  return (\n    <div className={classes.keyRoot}>\n      {icon}\n      <Typography className={classes.label} variant='caption'>\n        {label}\n      </Typography>\n    </div>\n  )\n}\n\nIconKey.propTypes = {\n  /**\n   * Key label\n   */\n  label: PropTypes.string.isRequired,\n  /**\n   * Icon for the key item\n   */\n  icon: PropTypes.string.isRequired\n}\n"],"mappings":";;;;;AAIA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,SAAS;EACP,OAAO,MAAM,QAAQ,EAAE;EACvB,QAAQ,MAAM,QAAQ,GAAI;EAC1B,WAAW,MAAM,QAAQ,GAAI;EAC9B;CACD,SAAS;EACP,SAAS;EACT,gBAAgB;EAChB,aAAa,MAAM,QAAQ,EAAE;EAC7B,OAAO,MAAM,QAAQ,GAAG;EACzB;CACF,EAAE;AAEH,MAAa,YAAY,EAAE,OAAO,YAAY;CAC5C,MAAM,UAAUA,aAAW;AAC3B,QACE,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,cAAW,SAAQ,aAAW,MAAmB,EAClD,oCAAC;EAAI,WAAW,QAAQ;EAAS,OAAO,EAAE,YAAY,OAAO;GAAI,CAC7D;;AAIV,SAAS,YAAY;CAInB,OAAO,UAAU,OAAO;CAIxB,OAAO,UAAU,OAAO;CACzB;;;;AClCD,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,SAAS;EACP,SAAS;EACT,gBAAgB;EAChB,aAAa,MAAM,QAAQ,EAAE;EAC9B;CACD,OAAO;EACL,WAAW;EACX,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,EAAE;AAEH,MAAa,WAAW,EAAE,OAAO,WAAW;CAC1C,MAAM,UAAU,WAAW;AAC3B,QACE,oCAAC,SAAI,WAAW,QAAQ,WACrB,MACD,oCAAC;EAAW,WAAW,QAAQ;EAAO,SAAQ;IAC3C,MACU,CACT;;AAIV,QAAQ,YAAY;CAIlB,OAAO,UAAU,OAAO;CAIxB,MAAM,UAAU,OAAO;CACxB"}
+{"version":3,"file":"IconKey-BLHF3hfg.js","names":["useStyles"],"sources":["../src/UI/dataDisplay/map/ColorKey.jsx","../src/UI/dataDisplay/map/IconKey.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  itemKey: {\n    width: theme.spacing(4),\n    height: theme.spacing(0.5),\n    marginTop: theme.spacing(0.5)\n  },\n  keyRoot: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    marginRight: theme.spacing(5),\n    width: theme.spacing(10)\n  }\n}))\n\nexport const ColorKey = ({ label, color }) => {\n  const classes = useStyles()\n  return (\n    <div className={classes.keyRoot}>\n      <Typography variant='caption'>{label}</Typography>\n      <div className={classes.itemKey} style={{ background: color }} />\n    </div>\n  )\n}\n\nColorKey.propTypes = {\n  /**\n   * Key label\n   */\n  label: PropTypes.string.isRequired,\n  /**\n   * Color of the key item\n   */\n  color: PropTypes.string.isRequired\n}\n","import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  keyRoot: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    marginRight: theme.spacing(5)\n  },\n  label: {\n    marginTop: 1,\n    marginLeft: theme.spacing(1)\n  }\n}))\n\nexport const IconKey = ({ label, icon }) => {\n  const classes = useStyles()\n  return (\n    <div className={classes.keyRoot}>\n      {icon}\n      <Typography className={classes.label} variant='caption'>\n        {label}\n      </Typography>\n    </div>\n  )\n}\n\nIconKey.propTypes = {\n  /**\n   * Key label\n   */\n  label: PropTypes.string.isRequired,\n  /**\n   * Icon for the key item\n   */\n  icon: PropTypes.string.isRequired\n}\n"],"mappings":";;;;;AAIA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,SAAS;EACP,OAAO,MAAM,QAAQ,EAAE;EACvB,QAAQ,MAAM,QAAQ,GAAI;EAC1B,WAAW,MAAM,QAAQ,GAAI;EAC9B;CACD,SAAS;EACP,SAAS;EACT,gBAAgB;EAChB,aAAa,MAAM,QAAQ,EAAE;EAC7B,OAAO,MAAM,QAAQ,GAAG;EACzB;CACF,EAAE;AAEH,MAAa,YAAY,EAAE,OAAO,YAAY;CAC5C,MAAM,UAAUA,aAAW;AAC3B,QACE,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,cAAW,SAAQ,aAAW,MAAmB,EAClD,oCAAC;EAAI,WAAW,QAAQ;EAAS,OAAO,EAAE,YAAY,OAAO;GAAI,CAC7D;;AAIV,SAAS,YAAY;CAInB,OAAO,UAAU,OAAO;CAIxB,OAAO,UAAU,OAAO;CACzB;;;;AClCD,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,SAAS;EACP,SAAS;EACT,gBAAgB;EAChB,aAAa,MAAM,QAAQ,EAAE;EAC9B;CACD,OAAO;EACL,WAAW;EACX,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,EAAE;AAEH,MAAa,WAAW,EAAE,OAAO,WAAW;CAC1C,MAAM,UAAU,WAAW;AAC3B,QACE,oCAAC,SAAI,WAAW,QAAQ,WACrB,MACD,oCAAC;EAAW,WAAW,QAAQ;EAAO,SAAQ;IAC3C,MACU,CACT;;AAIV,QAAQ,YAAY;CAIlB,OAAO,UAAU,OAAO;CAIxB,MAAM,UAAU,OAAO;CACxB"}

package/dist/{Notes-UkwV2z4D.js → Notes-YAF2dipI.js}

@@ -60,4 +60,4 @@ const Notes = ({ data, key, handleClick }) => {
 
 //#endregion
 export { useStyles as n, Note as r, Notes as t };
-//# sourceMappingURL=Notes-UkwV2z4D.js.map
+//# sourceMappingURL=Notes-YAF2dipI.js.map

package/dist/{Notes-UkwV2z4D.js.map → Notes-YAF2dipI.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Notes-UkwV2z4D.js","names":["useStyles"],"sources":["../src/UI/dataDisplay/notes/Note.jsx","../src/UI/dataDisplay/notes/Notes.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Paper, CardContent, Typography } from '@material-ui/core'\nimport { AvatarAlphabet } from '../AvatarAlphabet'\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton'\nimport { DeleteIcon } from '@fluentui/react-icons'\nimport { TrimForAvatar } from '../../../utilities/TrimForAvatar'\nimport TimeAgo from 'timeago-react'\nimport clsx from 'clsx'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%',\n    display: 'flex'\n  },\n  avatar: {\n    marginRight: theme.spacing(2)\n  },\n  message: {\n    width: '100%'\n  },\n  noteWrapper: {\n    display: 'flex'\n  },\n  note: {\n    flex: 1\n  },\n  date: {\n    marginTop: theme.spacing(2)\n  }\n}))\n\nexport const Note = ({ children, author, date, className, onClick }) => {\n  const classes = useStyles()\n\n  return (\n    <div className={clsx(classes.root, className)}>\n      <div className={classes.avatar}>\n        <AvatarAlphabet avatarCharacter={TrimForAvatar(author)} />\n      </div>\n\n      <Paper elevation={0} className={classes.message}>\n        <CardContent>\n          <div className={classes.noteWrapper}>\n            <Typography variant='body2' className={classes.note}>\n              {children}\n            </Typography>\n            <div>\n              <FluentIconButton\n                color='primary'\n                icon={DeleteIcon}\n                onClick={onClick}\n              />\n            </div>\n          </div>\n          <div className={classes.date}>\n            <Typography variant='caption'>\n              <TimeAgo datetime={date} />\n            </Typography>\n          </div>\n        </CardContent>\n      </Paper>\n    </div>\n  )\n}\n","import React from 'react'\nimport { makeStyles } from '@material-ui/core'\nimport { Note } from './Note'\n\nexport const useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignContent: 'space-around'\n  }\n}))\n\n/**\n * @returns {import('@material-ui/core/styles').WithStyles<import('@material-ui/core/styles/withStyles').Styles<Theme, {}, string>>}\n */\n\nexport const Notes = ({ data, key, handleClick }) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      {data &&\n        data.map((item) => {\n          return (\n            <div style={{ marginBottom: 20 }} key={key}>\n              <Note\n                author={item.author}\n                date={item.date.toString()}\n                onClick={() => handleClick(item.id)}\n              >\n                {item.note}\n              </Note>\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AASA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,OAAO;EACP,SAAS;EACV;CACD,QAAQ,EACN,aAAa,MAAM,QAAQ,EAAE,EAC9B;CACD,SAAS,EACP,OAAO,QACR;CACD,aAAa,EACX,SAAS,QACV;CACD,MAAM,EACJ,MAAM,GACP;CACD,MAAM,EACJ,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACF,EAAE;AAEH,MAAa,QAAQ,EAAE,UAAU,QAAQ,MAAM,WAAW,cAAc;CACtE,MAAM,UAAUA,aAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,KAAK,QAAQ,MAAM,UAAU,IAC3C,oCAAC,SAAI,WAAW,QAAQ,UACtB,oCAAC,kBAAe,iBAAiB,cAAc,OAAO,GAAI,CACtD,EAEN,oCAAC;EAAM,WAAW;EAAG,WAAW,QAAQ;IACtC,oCAAC,mBACC,oCAAC,SAAI,WAAW,QAAQ,eACtB,oCAAC;EAAW,SAAQ;EAAQ,WAAW,QAAQ;IAC5C,SACU,EACb,oCAAC,aACC,oCAAC;EACC,OAAM;EACN,MAAM;EACG;GACT,CACE,CACF,EACN,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,cAAW,SAAQ,aAClB,oCAAC,WAAQ,UAAU,OAAQ,CAChB,CACT,CACM,CACR,CACJ;;;;;ACzDV,MAAa,YAAY,YAAY,WAAW,EAC9C,MAAM;CACJ,SAAS;CACT,eAAe;CACf,cAAc;CACf,EACF,EAAE;;;;AAMH,MAAa,SAAS,EAAE,MAAM,KAAK,kBAAkB;CACnD,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACrB,QACC,KAAK,KAAK,SAAS;AACjB,SACE,oCAAC;GAAI,OAAO,EAAE,cAAc,IAAI;GAAO;KACrC,oCAAC;GACC,QAAQ,KAAK;GACb,MAAM,KAAK,KAAK,UAAU;GAC1B,eAAe,YAAY,KAAK,GAAG;KAElC,KAAK,KACD,CACH;GAER,CACA"}
+{"version":3,"file":"Notes-YAF2dipI.js","names":["useStyles"],"sources":["../src/UI/dataDisplay/notes/Note.jsx","../src/UI/dataDisplay/notes/Notes.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Paper, CardContent, Typography } from '@material-ui/core'\nimport { AvatarAlphabet } from '../AvatarAlphabet'\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton'\nimport { DeleteIcon } from '@fluentui/react-icons'\nimport { TrimForAvatar } from '../../../utilities/TrimForAvatar'\nimport TimeAgo from 'timeago-react'\nimport clsx from 'clsx'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%',\n    display: 'flex'\n  },\n  avatar: {\n    marginRight: theme.spacing(2)\n  },\n  message: {\n    width: '100%'\n  },\n  noteWrapper: {\n    display: 'flex'\n  },\n  note: {\n    flex: 1\n  },\n  date: {\n    marginTop: theme.spacing(2)\n  }\n}))\n\nexport const Note = ({ children, author, date, className, onClick }) => {\n  const classes = useStyles()\n\n  return (\n    <div className={clsx(classes.root, className)}>\n      <div className={classes.avatar}>\n        <AvatarAlphabet avatarCharacter={TrimForAvatar(author)} />\n      </div>\n\n      <Paper elevation={0} className={classes.message}>\n        <CardContent>\n          <div className={classes.noteWrapper}>\n            <Typography variant='body2' className={classes.note}>\n              {children}\n            </Typography>\n            <div>\n              <FluentIconButton\n                color='primary'\n                icon={DeleteIcon}\n                onClick={onClick}\n              />\n            </div>\n          </div>\n          <div className={classes.date}>\n            <Typography variant='caption'>\n              <TimeAgo datetime={date} />\n            </Typography>\n          </div>\n        </CardContent>\n      </Paper>\n    </div>\n  )\n}\n","import React from 'react'\nimport { makeStyles } from '@material-ui/core'\nimport { Note } from './Note'\n\nexport const useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignContent: 'space-around'\n  }\n}))\n\n/**\n * @returns {import('@material-ui/core/styles').WithStyles<import('@material-ui/core/styles/withStyles').Styles<Theme, {}, string>>}\n */\n\nexport const Notes = ({ data, key, handleClick }) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      {data &&\n        data.map((item) => {\n          return (\n            <div style={{ marginBottom: 20 }} key={key}>\n              <Note\n                author={item.author}\n                date={item.date.toString()}\n                onClick={() => handleClick(item.id)}\n              >\n                {item.note}\n              </Note>\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AASA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,OAAO;EACP,SAAS;EACV;CACD,QAAQ,EACN,aAAa,MAAM,QAAQ,EAAE,EAC9B;CACD,SAAS,EACP,OAAO,QACR;CACD,aAAa,EACX,SAAS,QACV;CACD,MAAM,EACJ,MAAM,GACP;CACD,MAAM,EACJ,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACF,EAAE;AAEH,MAAa,QAAQ,EAAE,UAAU,QAAQ,MAAM,WAAW,cAAc;CACtE,MAAM,UAAUA,aAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,KAAK,QAAQ,MAAM,UAAU,IAC3C,oCAAC,SAAI,WAAW,QAAQ,UACtB,oCAAC,kBAAe,iBAAiB,cAAc,OAAO,GAAI,CACtD,EAEN,oCAAC;EAAM,WAAW;EAAG,WAAW,QAAQ;IACtC,oCAAC,mBACC,oCAAC,SAAI,WAAW,QAAQ,eACtB,oCAAC;EAAW,SAAQ;EAAQ,WAAW,QAAQ;IAC5C,SACU,EACb,oCAAC,aACC,oCAAC;EACC,OAAM;EACN,MAAM;EACG;GACT,CACE,CACF,EACN,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,cAAW,SAAQ,aAClB,oCAAC,WAAQ,UAAU,OAAQ,CAChB,CACT,CACM,CACR,CACJ;;;;;ACzDV,MAAa,YAAY,YAAY,WAAW,EAC9C,MAAM;CACJ,SAAS;CACT,eAAe;CACf,cAAc;CACf,EACF,EAAE;;;;AAMH,MAAa,SAAS,EAAE,MAAM,KAAK,kBAAkB;CACnD,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACrB,QACC,KAAK,KAAK,SAAS;AACjB,SACE,oCAAC;GAAI,OAAO,EAAE,cAAc,IAAI;GAAO;KACrC,oCAAC;GACC,QAAQ,KAAK;GACb,MAAM,KAAK,KAAK,UAAU;GAC1B,eAAe,YAAY,KAAK,GAAG;KAElC,KAAK,KACD,CACH;GAER,CACA"}

package/dist/{PaymentForm-CtrVBoH8.js → PaymentForm-DFJrSIy8.js}

@@ -20,7 +20,7 @@ import { t as Box$1 } from "./Box-Colr5GEl.js";
 import { t as Grid$1 } from "./Grid-D1-yWIw5.js";
 import { t as FluentCheckbox } from "./FluentCheckbox-CX7XgoFz.js";
 import { t as stringToProps } from "./stringUtils-B2JFmevx.js";
-import { t as FluentSelectMenu } from "./FluentSelectMenu-BEREJbe-.js";
+import { t as FluentSelectMenu } from "./FluentSelectMenu-Cx274cVa.js";
 import * as React$1 from "react";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Badge, Box, Card, CardContent, Chip, FormControl, FormControlLabel, Grow, InputAdornment, InputLabel, LinearProgress, MenuItem, Select, Tab, Tabs, Tooltip, Typography, lighten, makeStyles, styled, useTheme } from "@material-ui/core";
@@ -2247,4 +2247,4 @@ const PaymentForm = ({ id, activeTab = 0, externalId, paymentAccounts, paymentDe
 
 //#endregion
 export { PaymentForm as t };
-//# sourceMappingURL=PaymentForm-CtrVBoH8.js.map
+//# sourceMappingURL=PaymentForm-DFJrSIy8.js.map