udp-react-enterprise-component-library 25.14.1-beta.9 → 25.16.1

package/dist/FluentSimpleSelect-C2BL_HdI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentSimpleSelect-C2BL_HdI.js","names":["useStyles","useStyles","useStyles","option","useStyles","makeStyles","Box"],"sources":["../src/UI/inputs/menus/FluentSelectDirectoryMenu.jsx","../src/UI/inputs/menus/FluentSelectGroupMenu.jsx","../src/UI/inputs/menus/FluentSelectMenu.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","/* 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","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;;;;;AC/DN,MAAMC,cAAY,YAAY,WAAW,EACvC,MAAM,EACJ,gFACE,EACE,SAAS,WACV,EACJ,EACF,EAAE;AAEH,MAAa,oBAAoB,EAC/B,MACA,IACA,UAAU,cACV,QAAQ,KAER,mBACA,gBACA,GAAG,iBACC;CACJ,MAAM,UAAUA,aAAW;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,aAAWC;EAElB,OAAO,EAAS,OAAO;EACvB,GAAI;EACJ,cAAc,WACZ,oCAAC;GAAgB,GAAI;GAAY,GAAI;IAAU;GAEjD;;;;;ACxDN,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,eAAgB,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/FluentSimpleTabs-DUU2kdmG.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { Badge, lighten, makeStyles } from "@material-ui/core";
+import Tab$1 from "@material-ui/core/Tab";
+import Tabs$1 from "@material-ui/core/Tabs";
+
+//#region src/UI/navigation/tabs/defaultTabs/FluentSimpleTab.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		textTransform: "none",
+		minWidth: 52,
+		padding: 0,
+		paddingLeft: (props) => !props.left ? theme.spacing(4) : theme.spacing(2),
+		paddingRight: (props) => !props.left ? theme.spacing(4) : theme.spacing(8),
+		fontWeight: theme.typography.fontWeightRegular,
+		background: (props) => props.block && lighten(theme.palette.primary.main, .7),
+		zIndex: 9,
+		borderRight: (props) => props.block && "1px solid rgb(138 135 135)",
+		marginRight: (props) => props.block ? 0 : theme.spacing(2),
+		"&:hover": { background: (props) => props.block && lighten(theme.palette.primary.main, .6) },
+		"&$selected": {},
+		"&:focus": {}
+	},
+	wrapper: {
+		flexDirection: "row",
+		zIndex: theme.zIndex.appBar
+	},
+	labelIcon: { minHeight: 45 }
+}));
+const FluentSimpleTab = (props) => {
+	const { value, onChange, label, icon, className, badgeContent,...otherProps } = props;
+	const classes = useStyles$1(props);
+	return /* @__PURE__ */ React.createElement(Tab$1, {
+		id: "udpRecord-FluentSimpleTab-" + label + "-" + value,
+		udprecordid: "udpRecord-FluentSimpleTab-" + label + "-" + value,
+		icon: icon && /* @__PURE__ */ React.createElement("div", { style: { paddingRight: 10 } }, icon),
+		value,
+		onChange,
+		...otherProps,
+		label: badgeContent ? /* @__PURE__ */ React.createElement(Badge, otherProps, label) : label,
+		className,
+		classes: {
+			root: classes.root,
+			wrapper: classes.wrapper,
+			labelIcon: classes.labelIcon,
+			selected: classes.selected
+		}
+	});
+};
+
+//#endregion
+//#region src/UI/navigation/tabs/defaultTabs/FluentSimpleTabs.jsx
+const useStyles = makeStyles((theme) => ({ indicator: {
+	backgroundColor: theme.palette.secondary.main,
+	top: (props) => props.block ? 0 : 45,
+	height: (props) => props.block && 100,
+	zIndex: (props) => props.block && -1
+} }));
+const FluentSimpleTabs = (props) => {
+	const { value, onChange, children, ariaLabel,...otherProps } = props;
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement(Tabs$1, {
+		value,
+		onChange,
+		"aria-label": ariaLabel,
+		...otherProps,
+		classes: { indicator: classes.indicator }
+	}, children);
+};
+
+//#endregion
+export { FluentSimpleTab, FluentSimpleTabs };
+//# sourceMappingURL=FluentSimpleTabs-DUU2kdmG.js.map

package/dist/FluentSimpleTabs-DUU2kdmG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentSimpleTabs-DUU2kdmG.js","names":["useStyles","Tab","Tabs"],"sources":["../src/UI/navigation/tabs/defaultTabs/FluentSimpleTab.jsx","../src/UI/navigation/tabs/defaultTabs/FluentSimpleTabs.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, lighten, Badge } from '@material-ui/core'\nimport Tab from '@material-ui/core/Tab'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    textTransform: 'none',\n    minWidth: 52,\n    padding: 0,\n    paddingLeft: props => !props.left ? theme.spacing(4) : theme.spacing(2),\n    paddingRight:props => !props.left ? theme.spacing(4) : theme.spacing(8),\n    fontWeight: theme.typography.fontWeightRegular,\n    background: (props) =>\n      props.block && lighten(theme.palette.primary.main, 0.7),\n    zIndex: 9,\n    borderRight: (props) => props.block && '1px solid rgb(138 135 135)',\n    marginRight: (props) => (props.block ? 0 : theme.spacing(2)),\n\n    '&:hover': {\n      background: (props) =>\n        props.block && lighten(theme.palette.primary.main, 0.6)\n\n      // opacity: 1,\n    },\n    '&$selected': {\n      // color: theme.palette.getContrastText(theme.palette.secondary.main),\n      // fontWeight: theme.typography.fontWeightBold,\n      // background: lighten(theme.palette.primary.main, 0.2),\n    },\n    '&:focus': {\n      // color: (props) =>\n      //   props.block &&\n      //   theme.palette.getContrastText(\n      //     lighten(theme.palette.secondary.main, 0.6)\n      //   ),\n      // fontWeight: theme.typography.fontWeightBold,\n      // opacity: 1,\n    }\n  },\n\n  wrapper: {\n    flexDirection: 'row',\n    zIndex: theme.zIndex.appBar\n  },\n  labelIcon: {\n    minHeight: 45\n  }\n  // selected: {\n  //   color: \"white\",\n  //   display: \"none\",\n  // },\n}))\n\nexport const FluentSimpleTab = (props) => {\n  const {\n    value,\n    onChange,\n    label,\n    icon,\n    className,\n    badgeContent,\n    ...otherProps\n  } = props\n  const classes = useStyles(props)\n\n  return (\n    <Tab\n      id={'udpRecord-FluentSimpleTab-'+label+'-'+value}\n      udprecordid={'udpRecord-FluentSimpleTab-'+label+'-'+value}\n      icon={icon && <div style={{ paddingRight: 10 }}>{icon}</div>}\n      value={value}\n      onChange={onChange}\n      {...otherProps}\n      label={badgeContent ? <Badge {...otherProps}>{label}</Badge> : label}\n      className={className}\n      classes={{\n        root: classes.root,\n        wrapper: classes.wrapper,\n        labelIcon: classes.labelIcon,\n        selected: classes.selected\n      }}\n    />\n  )\n}\n","import React from 'react'\nimport { makeStyles } from '@material-ui/core'\nimport Tabs from '@material-ui/core/Tabs'\n\nconst useStyles = makeStyles((theme) => ({\n  indicator: {\n    backgroundColor: theme.palette.secondary.main,\n    top: (props) => (props.block ? 0 : 45),\n    height: (props) => props.block && 100,\n    zIndex: (props) => props.block && -1\n  }\n}))\n\nexport const FluentSimpleTabs = (props) => {\n  const { value, onChange, children, ariaLabel, ...otherProps } = props\n\n  const classes = useStyles(props)\n\n  return (\n    <Tabs\n      value={value}\n      onChange={onChange}\n      aria-label={ariaLabel}\n      {...otherProps}\n      classes={{\n        indicator: classes.indicator\n      }}\n    >\n      {children}\n    </Tabs>\n  )\n}\n"],"mappings":";;;;;;AAIA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,eAAe;EACf,UAAU;EACV,SAAS;EACT,cAAa,UAAS,CAAC,MAAM,OAAO,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE;EACvE,eAAa,UAAS,CAAC,MAAM,OAAO,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE;EACvE,YAAY,MAAM,WAAW;EAC7B,aAAa,UACX,MAAM,SAAS,QAAQ,MAAM,QAAQ,QAAQ,MAAM,GAAI;EACzD,QAAQ;EACR,cAAc,UAAU,MAAM,SAAS;EACvC,cAAc,UAAW,MAAM,QAAQ,IAAI,MAAM,QAAQ,EAAE;EAE3D,WAAW,EACT,aAAa,UACX,MAAM,SAAS,QAAQ,MAAM,QAAQ,QAAQ,MAAM,GAAI,EAG1D;EACD,cAAc,EAIb;EACD,WAAW,EAQV;EACF;CAED,SAAS;EACP,eAAe;EACf,QAAQ,MAAM,OAAO;EACtB;CACD,WAAW,EACT,WAAW,IACZ;CAKF,EAAE;AAEH,MAAa,mBAAmB,UAAU;CACxC,MAAM,EACJ,OACA,UACA,OACA,MACA,WACA,aACA,GAAG,eACD;CACJ,MAAM,UAAUA,YAAU,MAAM;AAEhC,QACE,oCAACC;EACC,IAAI,+BAA6B,QAAM,MAAI;EAC3C,aAAa,+BAA6B,QAAM,MAAI;EACpD,MAAM,QAAQ,oCAAC,SAAI,OAAO,EAAE,cAAc,IAAI,IAAG,KAAW;EACrD;EACG;EACV,GAAI;EACJ,OAAO,eAAe,oCAAC,OAAU,YAAa,MAAc,GAAG;EACpD;EACX,SAAS;GACP,MAAM,QAAQ;GACd,SAAS,QAAQ;GACjB,WAAW,QAAQ;GACnB,UAAU,QAAQ;GACnB;GACD;;;;;AC7EN,MAAM,YAAY,YAAY,WAAW,EACvC,WAAW;CACT,iBAAiB,MAAM,QAAQ,UAAU;CACzC,MAAM,UAAW,MAAM,QAAQ,IAAI;CACnC,SAAS,UAAU,MAAM,SAAS;CAClC,SAAS,UAAU,MAAM,SAAS;CACnC,EACF,EAAE;AAEH,MAAa,oBAAoB,UAAU;CACzC,MAAM,EAAE,OAAO,UAAU,UAAU,UAAW,GAAG,eAAe;CAEhE,MAAM,UAAU,UAAU,MAAM;AAEhC,QACE,oCAACC;EACQ;EACG;EACV,cAAY;EACZ,GAAI;EACJ,SAAS,EACP,WAAW,QAAQ,WACpB;IAEA,SACI"}

package/dist/FluentTabPanel-BGuFHfIQ.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Box, Typography } from "@material-ui/core";
+import PropTypes from "prop-types";
+
+//#region src/UI/navigation/tabs/defaultTabs/FluentTabPanel.jsx
+const FluentTabPanel = (props) => {
+	const { children, value, persistant, index, p = 0,...other } = props;
+	return /* @__PURE__ */ React.createElement("div", {
+		role: "tabpanel",
+		hidden: value !== index,
+		id: `simple-tabpanel-${index}`,
+		"aria-labelledby": `simple-tab-${index}`,
+		...other
+	}, (value === index || persistant) && /* @__PURE__ */ React.createElement(Box, { p }, /* @__PURE__ */ React.createElement(Typography, { component: "div" }, children)));
+};
+FluentTabPanel.propTypes = {
+	children: PropTypes.node,
+	index: PropTypes.any.isRequired,
+	value: PropTypes.any.isRequired
+};
+
+//#endregion
+export { FluentTabPanel };
+//# sourceMappingURL=FluentTabPanel-BGuFHfIQ.js.map

package/dist/FluentTabPanel-BGuFHfIQ.js.map

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

package/dist/FluentTimePicker-Dr8FiVtC.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { InputAdornment, makeStyles } from "@material-ui/core";
+import { KeyboardTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
+import DateFnsUtils from "@date-io/date-fns";
+import { EventDateIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/inputs/pickers/FluentTimePicker.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	inputRoot: { fontSize: 12 },
+	input: {
+		borderRadius: 2,
+		height: 32,
+		padding: 0,
+		paddingLeft: theme.spacing(1)
+	},
+	formTextInput: { fontSize: 14 },
+	labelRoot: { fontSize: 14 },
+	FormControl: {
+		display: "none",
+		marginTop: 0
+	}
+}));
+const FluentTimePicker = (props) => {
+	const classes = useStyles();
+	const { id, label, startAdornment, endAdornment,...otherProps } = props;
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(MuiPickersUtilsProvider, { utils: DateFnsUtils }, /* @__PURE__ */ React.createElement(KeyboardTimePicker, {
+		variant: "inline",
+		margin: "normal",
+		...otherProps,
+		id,
+		inputVariant: "outlined",
+		KeyboardButtonProps: { "aria-label": "change date" },
+		keyboardIcon: /* @__PURE__ */ React.createElement(EventDateIcon, { style: { fontSize: 16 } }),
+		InputProps: {
+			classes: {
+				root: classes.input,
+				input: classes.formTextInput,
+				...props.InputProps?.classes
+			},
+			...props.InputProps,
+			...startAdornment,
+			...endAdornment,
+			startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, {
+				classes: { root: classes.inputRoot },
+				className: classes.inputRoot,
+				position: "start"
+			}, label)
+		},
+		InputLabelProps: {
+			shrink: false,
+			classes: {
+				root: classes.labelRoot,
+				focused: classes.labelFocused
+			}
+		}
+	})));
+};
+FluentTimePicker.propTypes = {
+	label: PropTypes.string,
+	id: PropTypes.string
+};
+
+//#endregion
+export { FluentTimePicker };
+//# sourceMappingURL=FluentTimePicker-Dr8FiVtC.js.map

package/dist/FluentTimePicker-Dr8FiVtC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentTimePicker-Dr8FiVtC.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,aAAc,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/FluentUploadIconButton-CzNiaIpa.js

@@ -0,0 +1,129 @@
+import { FluentButton } from "./FluentButton-h_8VjXGT.js";
+import { FluentIconButton } from "./FluentIconButton-le92OnEc.js";
+import React from "react";
+import { Button, ButtonBase, Divider, Typography, makeStyles } from "@material-ui/core";
+import { IncreaseIndentArrowIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { makeStyles as makeStyles$1 } from "@material-ui/core/styles";
+
+//#region src/UI/inputs/buttons/FluentCompoundButton.jsx
+const useStyles$3 = makeStyles({
+	root: {
+		borderRadius: 2,
+		minHeight: 72,
+		padding: "0 16px",
+		minWidth: 80,
+		border: (props) => `1px solid ${props.color}`
+	},
+	label: {
+		textTransform: "capitalize",
+		fontSize: "0.875rem",
+		fontWeight: 600,
+		textAlign: "left"
+	}
+});
+const FluentCompoundButton = (props) => {
+	const classes = useStyles$3(props);
+	const { children, textSecondary,...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(Button, {
+		...otherProps,
+		disableElevation: true,
+		classes: {
+			root: classes.root,
+			label: classes.label
+		}
+	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, children), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, textSecondary))));
+};
+
+//#endregion
+//#region src/UI/inputs/buttons/FluentMenuListButton.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	wrapper: {
+		display: "flex",
+		flexDirection: "row",
+		padding: theme.spacing(.5),
+		"&:hover": { color: theme.palette.secondary.main },
+		width: "100%"
+	},
+	titleWrapper: {
+		display: "flex",
+		width: "100%",
+		textAlign: "left"
+	},
+	labelWrapper: { marginTop: 4 },
+	label: { marginBottom: 4 }
+}), { name: "FluentMenuListButton" });
+const FluentMenuListButton = (props) => {
+	const classes = useStyles$2();
+	const { label, value, arrow = true,...otherProps } = props;
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ButtonBase, {
+		classes: { root: classes.root },
+		className: classes.wrapper,
+		disableRipple: true,
+		...otherProps
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.labelWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.label }, " ", /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", /* @__PURE__ */ React.createElement("span", { style: { fontWeight: 700 } }, label), " ")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, value))), arrow && /* @__PURE__ */ React.createElement(IncreaseIndentArrowIcon, { style: { fontSize: 24 } }))), /* @__PURE__ */ React.createElement(Divider, null));
+};
+FluentMenuListButton.propTypes = { label: PropTypes.string.isRequired };
+
+//#endregion
+//#region src/UI/inputs/buttons/FluentUploadButton.jsx
+const useStyles$1 = makeStyles$1((theme) => ({
+	root: { "& > *": { margin: theme.spacing(1) } },
+	input: { display: "none" }
+}));
+const FluentUploadButton = (props) => {
+	const classes = useStyles$1();
+	const { color, label, accept, id, onChange, onClick, variant } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("input", {
+		accept,
+		className: classes.input,
+		id,
+		multiple: true,
+		type: "file",
+		onChange
+	}), /* @__PURE__ */ React.createElement("label", { htmlFor: id }, /* @__PURE__ */ React.createElement(FluentButton, {
+		onClick,
+		variant,
+		color,
+		component: "span"
+	}, label)), /* @__PURE__ */ React.createElement("input", {
+		accept,
+		className: classes.input,
+		id,
+		type: "file"
+	}));
+};
+
+//#endregion
+//#region src/UI/inputs/buttons/FluentUploadIconButton.jsx
+const useStyles = makeStyles$1((theme) => ({
+	root: { "& > *": { margin: theme.spacing(1) } },
+	input: { display: "none" }
+}));
+const FluentUploadIconButton = (props) => {
+	const classes = useStyles();
+	const { color, icon, aria, accept, id, onChange, onClick } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("input", {
+		accept,
+		className: classes.input,
+		id,
+		type: "file",
+		onChange
+	}), /* @__PURE__ */ React.createElement("label", { htmlFor: id }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		icon,
+		color,
+		"aria-label": aria,
+		id,
+		component: "span",
+		onClick
+	})), /* @__PURE__ */ React.createElement("input", {
+		accept,
+		className: classes.input,
+		id,
+		type: "file"
+	}));
+};
+
+//#endregion
+export { FluentCompoundButton, FluentMenuListButton, FluentUploadButton, FluentUploadIconButton };
+//# sourceMappingURL=FluentUploadIconButton-CzNiaIpa.js.map

package/dist/FluentUploadIconButton-CzNiaIpa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentUploadIconButton-CzNiaIpa.js","names":["useStyles","useStyles","useStyles","makeStyles","makeStyles"],"sources":["../src/UI/inputs/buttons/FluentCompoundButton.jsx","../src/UI/inputs/buttons/FluentMenuListButton.jsx","../src/UI/inputs/buttons/FluentUploadButton.jsx","../src/UI/inputs/buttons/FluentUploadIconButton.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport { Button } from '@material-ui/core'\n\nconst useStyles = makeStyles({\n  root: {\n    borderRadius: 2,\n    minHeight: 72,\n    padding: '0 16px',\n    minWidth: 80,\n    border: (props) => `1px solid ${props.color}`\n  },\n  label: {\n    textTransform: 'capitalize',\n    fontSize: '0.875rem',\n    fontWeight: 600,\n    textAlign: 'left'\n  }\n})\n\nexport const FluentCompoundButton = (props) => {\n  const classes = useStyles(props)\n  const { children, textSecondary, ...otherProps } = props\n  return (\n    <Button\n      {...otherProps}\n      disableElevation\n      classes={{\n        root: classes.root,\n        label: classes.label\n      }}\n    >\n      <div>\n        <div>{children}</div>\n        <div>\n          <Typography variant='caption'>{textSecondary}</Typography>\n        </div>\n      </div>\n    </Button>\n  )\n}\n","import React from 'react';\nimport { ButtonBase, Typography, makeStyles, Divider } from '@material-ui/core';\nimport { IncreaseIndentArrowIcon } from '@fluentui/react-icons';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    wrapper: {\n      display: 'flex',\n      flexDirection: 'row',\n      // height: theme.spacing(5),\n      padding: theme.spacing(0.5),\n      '&:hover': { color: theme.palette.secondary.main },\n      width: '100%'\n    },\n    titleWrapper: {\n      display: 'flex',\n      width: '100%',\n      textAlign: 'left'\n    },\n    labelWrapper: {\n      marginTop: 4\n    },\n    label: {\n      marginBottom: 4\n    }\n  }),\n  { name: 'FluentMenuListButton' }\n);\n\nexport const FluentMenuListButton = (props) => {\n  const classes = useStyles();\n  const { label, value, arrow = true, ...otherProps } = props;\n\n  return (\n    <div>\n      <ButtonBase\n        classes={{\n          root: classes.root\n        }}\n        className={classes.wrapper}\n        disableRipple\n        {...otherProps}\n      >\n        <div className={classes.titleWrapper}>\n          <div className={classes.labelWrapper}>\n            <div className={classes.label}>\n              {' '}\n              <Typography variant='caption'>\n                {' '}\n                <span style={{ fontWeight: 700 }}>{label}</span>{' '}\n              </Typography>\n            </div>\n            <div>\n              <Typography variant='subtitle2'>{value}</Typography>\n            </div>\n          </div>\n          {/* @todo  Change to component for size */}\n          {arrow && <IncreaseIndentArrowIcon style={{ fontSize: 24 }} />}\n        </div>\n      </ButtonBase>\n      <Divider />\n    </div>\n  );\n};\n\nFluentMenuListButton.propTypes = {\n  /**\n   * Button label\n   */\n  label: PropTypes.string.isRequired\n};\n","import React from 'react'\nimport { makeStyles } from '@material-ui/core/styles'\nimport { FluentButton } from './FluentButton'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '& > *': {\n      margin: theme.spacing(1)\n    }\n  },\n  input: {\n    display: 'none'\n  }\n}))\n\nexport const FluentUploadButton = (props) => {\n  const classes = useStyles()\n  const { color, label, accept, id, onChange, onClick, variant } = props\n\n  return (\n    <div className={classes.root}>\n      <input\n        accept={accept}\n        className={classes.input}\n        id={id}\n        multiple\n        type='file'\n        onChange={onChange}\n      />\n      <label htmlFor={id}>\n        <FluentButton\n          onClick={onClick}\n          variant={variant}\n          color={color}\n          component='span'\n        >\n          {label}\n        </FluentButton>\n      </label>\n      <input accept={accept} className={classes.input} id={id} type='file' />\n    </div>\n  )\n}\n","import React from 'react'\nimport { makeStyles } from '@material-ui/core/styles'\nimport { FluentIconButton } from './FluentIconButton'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '& > *': {\n      margin: theme.spacing(1)\n    }\n  },\n  input: {\n    display: 'none'\n  }\n}))\n\nexport const FluentUploadIconButton = (props) => {\n  const classes = useStyles()\n  const { color, icon, aria, accept, id, onChange, onClick } = props\n\n  return (\n    <div className={classes.root}>\n      <input\n        accept={accept}\n        className={classes.input}\n        id={id}\n        type='file'\n        onChange={onChange}\n      />\n      <label htmlFor={id}>\n        <FluentIconButton\n          icon={icon}\n          color={color}\n          aria-label={aria}\n          id={id}\n          component='span'\n          onClick={onClick}\n        />\n      </label>\n      <input accept={accept} className={classes.input} id={id} type='file' />\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/FormButtons-BL9d-T3e.js

@@ -0,0 +1,130 @@
+import { FluentButton } from "./FluentButton-h_8VjXGT.js";
+import React, { forwardRef, useImperativeHandle } from "react";
+import { makeStyles } from "@material-ui/core";
+import { Form, FormSpy } from "react-final-form";
+import { getIn } from "final-form";
+
+//#region src/utilities/form/final-form-scroll/isFocusableInput.js
+const isFocusableInput = (wtf) => !!(wtf && typeof wtf.focus === "function");
+var isFocusableInput_default = isFocusableInput;
+
+//#endregion
+//#region src/utilities/form/final-form-scroll/getAllInputs.js
+const getAllInputs = () => {
+	if (typeof document === "undefined") return [];
+	return Array.prototype.slice.call(document.forms).reduce((accumulator, form) => accumulator.concat(Array.prototype.slice.call(form).filter(isFocusableInput_default)), []);
+};
+var getAllInputs_default = getAllInputs;
+
+//#endregion
+//#region src/utilities/form/final-form-scroll/findInput.js
+const findInput = (inputs, errors) => inputs.find((input) => input.name && getIn(errors, input.name));
+var findInput_default = findInput;
+
+//#endregion
+//#region src/utilities/form/final-form-scroll/createDecorator.js
+const noop = () => {};
+/**
+* The decorator is created based on final-form-focus https://github.com/final-form/final-form-focus
+*/
+const createDecorator = () => (form) => {
+	const scrollToFirstError = (errors) => {
+		const inputToScrollTo = findInput_default(getAllInputs_default(), errors)?.parentElement;
+		if (inputToScrollTo) inputToScrollTo.scrollIntoView({ behavior: "smooth" });
+	};
+	const originalSubmit = form.submit;
+	let state = {};
+	const unsubscribe = form.subscribe((nextState) => {
+		state = nextState;
+	}, {
+		errors: true,
+		submitErrors: true
+	});
+	const afterSubmit = () => {
+		const { errors, submitErrors } = state;
+		if (errors && Object.keys(errors).length) scrollToFirstError(errors);
+		else if (submitErrors && Object.keys(submitErrors).length) scrollToFirstError(submitErrors);
+	};
+	form.submit = () => {
+		const result = originalSubmit.call(form);
+		if (result && typeof result.then === "function") result.then(afterSubmit, noop);
+		else afterSubmit();
+		return result;
+	};
+	return () => {
+		unsubscribe();
+		form.submit = originalSubmit;
+	};
+};
+var createDecorator_default = createDecorator;
+
+//#endregion
+//#region src/utilities/form/Form.tsx
+const scrollToError = createDecorator_default();
+/**
+* final-form Form wrapper with automatic <form> and submit handler
+*/
+const _Form = ({ render: renderProp, children, id,...props }, ref) => {
+	const render = renderProp || children;
+	return /* @__PURE__ */ React.createElement(Form, {
+		ref,
+		decorators: [scrollToError],
+		...props
+	}, (params) => {
+		useImperativeHandle(ref, () => ({ ...params }));
+		return /* @__PURE__ */ React.createElement("form", {
+			onSubmit: params.handleSubmit,
+			noValidate: true,
+			id
+		}, typeof render === "function" ? render(params) : render);
+	});
+};
+const Form$1 = forwardRef(_Form);
+
+//#endregion
+//#region src/utilities/form/SubmitButton.tsx
+/**
+* A MUI Button varaint intended for use as the submit button for a form
+*/
+let SubmitButton = forwardRef((props, ref) => {
+	const { ButtonComponent = FluentButton, disabled, disablePristine = true,...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(FormSpy, { subscription: {
+		submitting: true,
+		pristine: true
+	} }, ({ submitting, pristine }) => /* @__PURE__ */ React.createElement(ButtonComponent, {
+		ref,
+		type: "submit",
+		disabled: submitting || disablePristine && pristine || disabled,
+		...otherProps
+	}));
+});
+SubmitButton.displayName = "SubmitButton";
+
+//#endregion
+//#region src/utilities/form/FormButtons.tsx
+const useStyles = makeStyles((theme) => ({ root: {
+	display: "flex",
+	flexDirection: "row",
+	alignItems: "center",
+	justifyContent: "flex-start",
+	marginBottom: theme.spacing(2),
+	marginTop: theme.spacing(1),
+	"& > *": { margin: `0 ${theme.spacing(2)}px 0 0` }
+} }));
+/**
+* A MUI Button varaint intended for use as the submit button for a form
+*/
+const FormButtonsCore = (props, ref) => {
+	const classes = useStyles(props);
+	const { children,...otherProps } = props;
+	return /* @__PURE__ */ React.createElement("div", {
+		...otherProps,
+		ref,
+		className: classes.root
+	}, children);
+};
+const FormButtons = forwardRef(FormButtonsCore);
+
+//#endregion
+export { Form$1 as Form, FormButtons, SubmitButton, createDecorator_default };
+//# sourceMappingURL=FormButtons-BL9d-T3e.js.map

package/dist/FormButtons-BL9d-T3e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormButtons-BL9d-T3e.js","names":["isFocusableInput","findInput","getAllInputs","createDecorator","FinalForm","Form: React.FC<FormProps>","FormButtonsCore: any","FormButtons: React.FC<FormButtonsProps>"],"sources":["../src/utilities/form/final-form-scroll/isFocusableInput.js","../src/utilities/form/final-form-scroll/getAllInputs.js","../src/utilities/form/final-form-scroll/findInput.js","../src/utilities/form/final-form-scroll/createDecorator.js","../src/utilities/form/Form.tsx","../src/utilities/form/SubmitButton.tsx","../src/utilities/form/FormButtons.tsx"],"sourcesContent":["const isFocusableInput = (wtf) =>\n  !!(wtf && typeof wtf.focus === 'function');\n\nexport default isFocusableInput;\n","import isFocusableInput from './isFocusableInput';\n\nconst getAllInputs = () => {\n  if (typeof document === 'undefined') {\n    return [];\n  }\n  return Array.prototype.slice\n    .call(document.forms)\n    .reduce(\n      (accumulator, form) =>\n        accumulator.concat(\n          Array.prototype.slice.call(form).filter(isFocusableInput)\n        ),\n      []\n    );\n};\n\nexport default getAllInputs;\n","import { getIn } from 'final-form';\n\nconst findInput = (inputs, errors) =>\n  inputs.find(input => input.name && getIn(errors, input.name));\n\nexport default findInput;\n","import getAllInputs from './getAllInputs.js';\nimport findInput from './findInput.js';\n\nconst noop = () => {};\n\n/**\n * The decorator is created based on final-form-focus https://github.com/final-form/final-form-focus\n */\nconst createDecorator = () => (form) => {\n  const scrollToFirstError = (errors) => {\n    const allInputs = getAllInputs();\n    const firstInput = findInput(allInputs, errors);\n    const inputToScrollTo = firstInput?.parentElement;\n    if (inputToScrollTo) {\n      inputToScrollTo.scrollIntoView({ behavior: 'smooth' });\n    }\n  };\n  // Save original submit function\n  const originalSubmit = form.submit;\n  let state = {};\n  const unsubscribe = form.subscribe(\n    (nextState) => {\n      state = nextState;\n    },\n    { errors: true, submitErrors: true }\n  );\n  // What to do after submit\n  const afterSubmit = () => {\n    const { errors, submitErrors } = state;\n    if (errors && Object.keys(errors).length) {\n      scrollToFirstError(errors);\n    } else if (submitErrors && Object.keys(submitErrors).length) {\n      scrollToFirstError(submitErrors);\n    }\n  };\n\n  // Rewrite submit function\n  form.submit = () => {\n    const result = originalSubmit.call(form);\n    if (result && typeof result.then === 'function') {\n      // async\n      result.then(afterSubmit, noop);\n    } else {\n      // sync\n      afterSubmit();\n    }\n    return result;\n  };\n\n  return () => {\n    unsubscribe();\n    form.submit = originalSubmit;\n  };\n};\n\nexport default createDecorator;\n","import React, { forwardRef, useImperativeHandle } from 'react';\nimport {\n  AnyObject,\n  Form as FinalForm,\n  FormProps as FinalFormProps,\n  FormRenderProps,\n} from 'react-final-form';\nimport createDecorator from './final-form-scroll/createDecorator';\n\nexport interface FormProps<FormValues = AnyObject>\n  extends FinalFormProps<FormValues> {\n  children?: (props: FormRenderProps<FormValues>) => React.ReactNode;\n  id?: string;\n}\nconst scrollToError = createDecorator();\n\n/**\n * final-form Form wrapper with automatic <form> and submit handler\n */\n\nconst _Form = ({ render: renderProp, children, id, ...props }: FormProps, ref: React.Ref<any>) => {\n  const render = renderProp || children;\n\n  return (\n    <FinalForm ref={ref} decorators={[scrollToError]} {...props}>\n      {params => {\n         useImperativeHandle(ref, () => ({ ...params}))\n        return (\n          <form onSubmit={params.handleSubmit} noValidate={true} id={id}>\n            {typeof render === 'function' ? render(params) : render}\n          </form>\n        )\n      }}\n    </FinalForm>\n  );\n};\n\nexport const Form: React.FC<FormProps> = forwardRef(_Form)\n","import { Button, ButtonProps } from '@material-ui/core';\nimport React, { forwardRef, ComponentType } from 'react';\nimport { FormSpy } from 'react-final-form';\nimport { FluentButton } from '../../UI/inputs/buttons/FluentButton';\n\nexport type SubmitButtonProps<\n  P = {},\n  D extends React.ElementType = 'button'\n  > = ButtonProps<D, P> & {\n    // @fixme Probably want to swap this with something that'll allow ...otherProps to inherit the specified component's props to pass through\n    ButtonComponent?: typeof FluentButton;\n    disablePristine: boolean;\n  };\n\ntype SubmitButtonComponent<\n  P = {},\n  D extends React.ElementType = 'button'\n  > = ComponentType<SubmitButtonProps<P, D>>;\n\n/**\n * A MUI Button varaint intended for use as the submit button for a form\n */\nexport let SubmitButton = forwardRef<HTMLButtonElement, SubmitButtonProps>((props, ref) => {\n  const {\n    ButtonComponent = FluentButton,\n    disabled,\n    disablePristine = true,\n    ...otherProps\n  } = props;\n\n  return (\n    <FormSpy subscription={{ submitting: true, pristine: true }}>\n      {({ submitting, pristine }) => (\n        <ButtonComponent\n          ref={ref}\n          type=\"submit\"\n          disabled={submitting || (disablePristine && pristine) || disabled}\n          {...otherProps}\n        />\n      )}\n    </FormSpy>\n  );\n});\nSubmitButton.displayName = 'SubmitButton';\n","import { makeStyles } from '@material-ui/core';\nimport React, { forwardRef, } from 'react';\n\nconst useStyles = makeStyles((theme:any) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    marginBottom: theme.spacing(2),\n    marginTop: theme.spacing(1),\n    '& > *': {\n      margin: `0 ${theme.spacing(2)}px 0 0`,\n    },\n  },\n}));\n\nexport type FormButtonsProps = {};\n\n/**\n * A MUI Button varaint intended for use as the submit button for a form\n */\nconst FormButtonsCore: any = (\n  props: any,\n  ref: any\n) => {\n  const classes = useStyles(props);\n  const { children, ...otherProps } = props;\n\n  return (\n    <div {...otherProps} ref={ref as any} className={classes.root}>\n      {children}\n    </div>\n  );\n};\nexport const FormButtons: React.FC<FormButtonsProps> = forwardRef(FormButtonsCore);\n"],"mappings":";;;;;;;AAAA,MAAM,oBAAoB,QACxB,CAAC,EAAE,OAAO,OAAO,IAAI,UAAU;AAEjC,+BAAe;;;;ACDf,MAAM,qBAAqB;AACzB,KAAI,OAAO,aAAa,YACtB,QAAO,EAAE;AAEX,QAAO,MAAM,UAAU,MACpB,KAAK,SAAS,MAAM,CACpB,QACE,aAAa,SACZ,YAAY,OACV,MAAM,UAAU,MAAM,KAAK,KAAK,CAAC,OAAOA,yBAAiB,CAC1D,EACH,EAAE,CACH;;AAGL,2BAAe;;;;ACff,MAAM,aAAa,QAAQ,WACzB,OAAO,MAAK,UAAS,MAAM,QAAQ,MAAM,QAAQ,MAAM,KAAK,CAAC;AAE/D,wBAAe;;;;ACFf,MAAM,aAAa;;;;AAKnB,MAAM,yBAAyB,SAAS;CACtC,MAAM,sBAAsB,WAAW;EAGrC,MAAM,kBADaC,kBADDC,sBAAc,EACQ,OAAO,EACX;AACpC,MAAI,gBACF,iBAAgB,eAAe,EAAE,UAAU,UAAU,CAAC;;CAI1D,MAAM,iBAAiB,KAAK;CAC5B,IAAI,QAAQ,EAAE;CACd,MAAM,cAAc,KAAK,WACtB,cAAc;AACb,UAAQ;IAEV;EAAE,QAAQ;EAAM,cAAc;EAAM,CACrC;CAED,MAAM,oBAAoB;EACxB,MAAM,EAAE,QAAQ,iBAAiB;AACjC,MAAI,UAAU,OAAO,KAAK,OAAO,CAAC,OAChC,oBAAmB,OAAO;WACjB,gBAAgB,OAAO,KAAK,aAAa,CAAC,OACnD,oBAAmB,aAAa;;AAKpC,MAAK,eAAe;EAClB,MAAM,SAAS,eAAe,KAAK,KAAK;AACxC,MAAI,UAAU,OAAO,OAAO,SAAS,WAEnC,QAAO,KAAK,aAAa,KAAK;MAG9B,cAAa;AAEf,SAAO;;AAGT,cAAa;AACX,eAAa;AACb,OAAK,SAAS;;;AAIlB,8BAAe;;;;ACzCf,MAAM,gBAAgBC,yBAAiB;;;;AAMvC,MAAM,SAAS,EAAE,QAAQ,YAAY,UAAU,GAAI,GAAG,SAAoB,QAAwB;CAChG,MAAM,SAAS,cAAc;AAE7B,QACE,oCAACC;EAAe;EAAK,YAAY,CAAC,cAAc;EAAE,GAAI;KACnD,WAAU;AACR,sBAAoB,YAAY,EAAE,GAAG,QAAO,EAAE;AAC/C,SACE,oCAAC;GAAK,UAAU,OAAO;GAAc,YAAY;GAAU;KACxD,OAAO,WAAW,aAAa,OAAO,OAAO,GAAG,OAC5C;GAGD;;AAIhB,MAAaC,SAA4B,WAAW,MAAM;;;;;;;ACf1D,IAAW,eAAe,YAAkD,OAAO,QAAQ;CACzF,MAAM,EACJ,kBAAkB,cAClB,UACA,kBAAkB,KAClB,GAAG,eACD;AAEJ,QACE,oCAAC,WAAQ,cAAc;EAAE,YAAY;EAAM,UAAU;EAAM,KACvD,EAAE,YAAY,eACd,oCAAC;EACM;EACL,MAAK;EACL,UAAU,cAAe,mBAAmB,YAAa;EACzD,GAAI;GACJ,CAEI;EAEZ;AACF,aAAa,cAAc;;;;ACxC3B,MAAM,YAAY,YAAY,WAAe,EAC3C,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,cAAc,MAAM,QAAQ,EAAE;CAC9B,WAAW,MAAM,QAAQ,EAAE;CAC3B,SAAS,EACP,QAAQ,KAAK,MAAM,QAAQ,EAAE,CAAC,SAC/B;CACF,EACF,EAAE;;;;AAOH,MAAMC,mBACJ,OACA,QACG;CACH,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,SAAU,GAAG,eAAe;AAEpC,QACE,oCAAC;EAAI,GAAI;EAAiB;EAAY,WAAW,QAAQ;IACtD,SACG;;AAGV,MAAaC,cAA0C,WAAW,gBAAgB"}

package/dist/FormControlLabel-C2H2jokx.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { FormControlLabel } from "@material-ui/core";
+
+//#region src/UI/utilityDisplay/FormControlLabel.jsx
+const FormControlLabel$1 = (props) => {
+	const { control, label, labelPlacement,...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(FormControlLabel, {
+		control,
+		label,
+		labelPlacement,
+		...otherProps
+	});
+};
+
+//#endregion
+export { FormControlLabel$1 as FormControlLabel };
+//# sourceMappingURL=FormControlLabel-C2H2jokx.js.map

package/dist/FormControlLabel-C2H2jokx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlLabel-C2H2jokx.js","names":["FormControlLabel","MuiFormControlLabel"],"sources":["../src/UI/utilityDisplay/FormControlLabel.jsx"],"sourcesContent":["import React from 'react';\nimport { FormControlLabel as MuiFormControlLabel } from '@material-ui/core';\n\nexport const FormControlLabel = (props) => {\n  const { control, label, labelPlacement, ...otherProps } = props;\n\n  return (\n    <MuiFormControlLabel\n      control={control}\n      label={label}\n      labelPlacement={labelPlacement}\n      {...otherProps}\n    />\n  );\n};\n"],"mappings":";;;;AAGA,MAAaA,sBAAoB,UAAU;CACzC,MAAM,EAAE,SAAS,OAAO,eAAgB,GAAG,eAAe;AAE1D,QACE,oCAACC;EACU;EACF;EACS;EAChB,GAAI;GACJ"}

package/dist/Grid-5LtTpExg.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Grid } from "@material-ui/core";
+
+//#region src/UI/Grid.jsx
+const Grid$1 = (props) => {
+	const { container, item, spacing,...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(Grid, {
+		container,
+		item,
+		spacing,
+		...otherProps
+	});
+};
+
+//#endregion
+export { Grid$1 as Grid };
+//# sourceMappingURL=Grid-5LtTpExg.js.map

package/dist/Grid-5LtTpExg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid-5LtTpExg.js","names":["Grid","MuiGrid"],"sources":["../src/UI/Grid.jsx"],"sourcesContent":["import React from 'react';\nimport { Grid as MuiGrid } from '@material-ui/core';\n\nexport const Grid = props => {\n  const { container, item, spacing, ...otherProps } = props;\n\n  return (\n    <MuiGrid\n      container={container}\n      item={item}\n      spacing={spacing}\n      {...otherProps}\n    />\n  );\n};\n"],"mappings":";;;;AAGA,MAAaA,UAAO,UAAS;CAC3B,MAAM,EAAE,WAAW,MAAM,QAAS,GAAG,eAAe;AAEpD,QACE,oCAACC;EACY;EACL;EACG;EACT,GAAI;GACJ"}