@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-VWBWKLXX.js

@@ -0,0 +1,85 @@
+import {
+  MenubarItemView
+} from "./chunk-TF4TPLF2.js";
+import {
+  MenubarSeparator
+} from "./chunk-YMGHTZA6.js";
+
+// src/components/form/Menubar/Menubar.toolbar.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Toolbar from "@mui/material/Toolbar/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MenubarToolbar = ({
+  ariaLabel,
+  barSx,
+  items,
+  size,
+  orientation,
+  disabled,
+  loading,
+  logo,
+  endContent,
+  fullWidth,
+  activeMenu,
+  menuRefs,
+  onOpen,
+  onActivate,
+  onClose,
+  onFocus,
+  onBlur
+}) => {
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */ jsxs(
+    Toolbar,
+    {
+      role: "toolbar",
+      "aria-label": ariaLabel,
+      sx: {
+        ...barSx,
+        width: fullWidth ? "100%" : "auto",
+        flexDirection: isVertical ? "column" : "row",
+        alignItems: isVertical ? "flex-start" : "center",
+        gap: 1
+      },
+      children: [
+        logo && /* @__PURE__ */ jsx(Box, { sx: { mr: 2, display: "flex", alignItems: "center" }, children: logo }),
+        loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }) : /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: isVertical ? "column" : "row",
+              gap: isVertical ? 0.5 : 1,
+              flex: 1
+            },
+            children: items.map(
+              (item) => item.divider ? /* @__PURE__ */ jsx(MenubarSeparator, { orientation }, item.id) : /* @__PURE__ */ jsx(
+                MenubarItemView,
+                {
+                  item,
+                  size,
+                  disabled,
+                  isOpen: activeMenu === item.id,
+                  anchorEl: menuRefs.current[item.id] ?? null,
+                  onOpen,
+                  onActivate,
+                  onClose,
+                  onFocus,
+                  onBlur
+                },
+                item.id
+              )
+            )
+          }
+        ),
+        endContent && /* @__PURE__ */ jsx(Box, { sx: { ml: "auto" }, children: endContent })
+      ]
+    }
+  );
+};
+
+export {
+  MenubarToolbar
+};
+//# sourceMappingURL=chunk-VWBWKLXX.js.map

package/dist/chunk-VWGR5XUP.js

@@ -0,0 +1,21 @@
+import {
+  withConfirmation
+} from "./chunk-HJOABXKN.js";
+import {
+  Button
+} from "./chunk-BNNSO4MC.js";
+
+// src/components/feedback/ConfirmAction/ConfirmButton.tsx
+function createConfirmButton(copy, errorText) {
+  return withConfirmation(Button, {
+    cancelText: copy.cancel,
+    tone: "destructive",
+    errorText,
+    copy
+  });
+}
+
+export {
+  createConfirmButton
+};
+//# sourceMappingURL=chunk-VWGR5XUP.js.map

package/dist/chunk-VXTYVJDK.js

@@ -0,0 +1,70 @@
+import {
+  AddressTextField
+} from "./chunk-3W7IEWEL.js";
+
+// src/components/form/AddressAutocomplete/AddressInputField.tsx
+import CurrentLocationIcon from "@mui/icons-material/MyLocation";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CurrentLocationButton = ({ disabled, onClick, currentLocationLabel }) => /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+  IconButton,
+  {
+    edge: "end",
+    onClick,
+    size: "small",
+    title: currentLocationLabel,
+    disabled,
+    "data-testid": "address-current-location-button",
+    children: /* @__PURE__ */ jsx(CurrentLocationIcon, {})
+  }
+) });
+var AddressInputField = ({
+  copy,
+  params,
+  addressVariant,
+  label,
+  placeholder,
+  icon,
+  error,
+  helperText,
+  required,
+  disabled,
+  loading,
+  showCurrentLocation,
+  onGetCurrentLocation
+}) => /* @__PURE__ */ jsx(
+  AddressTextField,
+  {
+    ...params,
+    addressVariant,
+    label,
+    placeholder,
+    error,
+    helperText,
+    required,
+    InputProps: {
+      ...params.InputProps,
+      startAdornment: icon && /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: icon }),
+      endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+        loading && /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 20, "data-testid": "address-loading" }),
+        showCurrentLocation && /* @__PURE__ */ jsx(
+          CurrentLocationButton,
+          {
+            disabled,
+            onClick: onGetCurrentLocation,
+            currentLocationLabel: copy.useCurrentLocation
+          }
+        ),
+        params.InputProps.endAdornment
+      ] })
+    },
+    inputProps: { ...params.inputProps, "data-testid": "address-input" }
+  }
+);
+
+export {
+  AddressInputField
+};
+//# sourceMappingURL=chunk-VXTYVJDK.js.map

package/dist/chunk-W2UTDN4T.js

@@ -0,0 +1,194 @@
+import {
+  paginationStyles
+} from "./chunk-CZBONNPA.js";
+import {
+  ItemsPerPageSelect,
+  PageInfo
+} from "./chunk-BB2IVF76.js";
+import {
+  makeTestId,
+  muiSizeFor,
+  resolvePaginationProps
+} from "./chunk-Z6TIAVEG.js";
+
+// src/components/navigation/Pagination/Pagination.tsx
+import FirstPage from "@mui/icons-material/FirstPage";
+import LastPage from "@mui/icons-material/LastPage";
+import NavigateBefore from "@mui/icons-material/NavigateBefore";
+import NavigateNext from "@mui/icons-material/NavigateNext";
+import Box from "@mui/material/Box/index.js";
+import MuiPagination from "@mui/material/Pagination/index.js";
+import PaginationItem from "@mui/material/PaginationItem/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledPagination = styled(MuiPagination, {
+  shouldForwardProp: (prop) => !["customVariant", "customSize"].includes(prop)
+})(({ theme, customVariant, customSize }) => ({
+  ...paginationStyles({ theme, customVariant, customSize })
+}));
+var PaginationContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexWrap: "wrap",
+  gap: theme.spacing(1)
+}));
+var ITEM_TEST_SUFFIX = {
+  first: "first",
+  last: "last",
+  previous: "prev",
+  next: "next"
+};
+var paginationItemTestId = (base, item) => {
+  const prefix = base ?? "pagination";
+  if (item.type === "page") return `${prefix}-page-${item.page}`;
+  const suffix = ITEM_TEST_SUFFIX[item.type];
+  return suffix ? `${prefix}-${suffix}` : void 0;
+};
+var renderPaginationItem = ({
+  item,
+  variant,
+  size: _size,
+  dataTestId,
+  icons
+}) => {
+  const { firstIcon, lastIcon, previousIcon, nextIcon } = icons;
+  const itemTestId = paginationItemTestId(dataTestId, item);
+  if (variant === "dots") {
+    if (item.type === "page") {
+      return /* @__PURE__ */ jsx(
+        PaginationItem,
+        {
+          ...item,
+          "data-testid": itemTestId,
+          sx: {
+            "&.MuiPaginationItem-page": {
+              fontSize: 0,
+              overflow: "hidden",
+              textIndent: "-9999px"
+            }
+          }
+        }
+      );
+    }
+    return null;
+  }
+  const iconMap = {
+    first: firstIcon,
+    last: lastIcon,
+    previous: previousIcon,
+    next: nextIcon
+  };
+  return /* @__PURE__ */ jsx(
+    PaginationItem,
+    {
+      ...item,
+      "data-testid": itemTestId,
+      components: {
+        first: () => iconMap.first || /* @__PURE__ */ jsx(FirstPage, {}),
+        last: () => iconMap.last || /* @__PURE__ */ jsx(LastPage, {}),
+        previous: () => iconMap.previous || /* @__PURE__ */ jsx(NavigateBefore, {}),
+        next: () => iconMap.next || /* @__PURE__ */ jsx(NavigateNext, {})
+      }
+    }
+  );
+};
+var PaginationControl = ({ innerRef, renderItem, rest, ...p }) => {
+  const isDots = p.variant === "dots";
+  return /* @__PURE__ */ jsx(
+    StyledPagination,
+    {
+      ref: innerRef,
+      page: p.page,
+      count: p.count,
+      onChange: p.onChange,
+      customVariant: p.variant,
+      customSize: p.size,
+      variant: "outlined",
+      size: muiSizeFor(p.size),
+      boundaryCount: isDots ? 0 : p.boundaryCount,
+      siblingCount: isDots ? 0 : p.siblingCount,
+      hideNextButton: p.hideNextButton || isDots,
+      hidePrevButton: p.hidePrevButton || isDots,
+      showFirstButton: p.showFirstButton && !isDots,
+      showLastButton: p.showLastButton && !isDots,
+      disabled: p.disabled,
+      color: p.color === void 0 ? void 0 : p.color === "neutral" ? "standard" : p.color,
+      renderItem,
+      ...rest
+    }
+  );
+};
+var Pagination = React.forwardRef(
+  (componentProps, ref) => {
+    const resolved = resolvePaginationProps(componentProps);
+    const {
+      pageSizeLabel,
+      variant,
+      size,
+      page,
+      count,
+      onChange: _onChange,
+      boundaryCount: _boundaryCount,
+      siblingCount: _siblingCount,
+      hideNextButton: _hideNextButton,
+      hidePrevButton: _hidePrevButton,
+      showFirstButton: _showFirstButton,
+      showLastButton: _showLastButton,
+      firstIcon,
+      lastIcon,
+      previousIcon,
+      nextIcon,
+      disabled,
+      color: _color,
+      showPageInfo,
+      pageInfoFormat,
+      showItemsPerPage,
+      itemsPerPageOptions,
+      itemsPerPage,
+      onItemsPerPageChange,
+      className,
+      dataTestId,
+      ...props
+    } = resolved;
+    const testId = makeTestId(dataTestId);
+    const renderItem = (item) => renderPaginationItem({
+      item,
+      variant,
+      size,
+      dataTestId,
+      icons: { firstIcon, lastIcon, previousIcon, nextIcon }
+    });
+    return /* @__PURE__ */ jsxs(PaginationContainer, { className, "data-testid": dataTestId || "pagination", children: [
+      showItemsPerPage && onItemsPerPageChange && /* @__PURE__ */ jsx(
+        ItemsPerPageSelect,
+        {
+          pageSizeLabel,
+          value: itemsPerPage,
+          options: itemsPerPageOptions,
+          size,
+          disabled,
+          testId: testId("items-per-page"),
+          onChange: onItemsPerPageChange
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PaginationControl,
+        {
+          ...resolved,
+          innerRef: ref,
+          renderItem,
+          rest: props
+        }
+      ),
+      showPageInfo && /* @__PURE__ */ jsx(PageInfo, { size, testId: testId("info"), children: pageInfoFormat(page, count) })
+    ] });
+  }
+);
+Pagination.displayName = "Pagination";
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-W2UTDN4T.js.map

package/dist/chunk-WBKWIFXA.js

@@ -0,0 +1,62 @@
+import {
+  MapCentreMarker,
+  MapCompass,
+  MapDecorativePins,
+  MapRoads,
+  MapScaleBar
+} from "./chunk-2SWQ6HIK.js";
+import {
+  MapTiles
+} from "./chunk-RRO2EOJB.js";
+import {
+  getTileCoordinates
+} from "./chunk-TUBCN4DJ.js";
+import {
+  surfaceBackground
+} from "./chunk-DRADVLHZ.js";
+
+// src/components/data-display/MapPreview/StaticMapView.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StaticMapView = ({
+  height,
+  zoom,
+  mapType,
+  marker,
+  markerPosition,
+  panOffset = { x: 0, y: 0 }
+}) => {
+  const theme = useTheme();
+  const tileOrigin = useMemo(
+    () => markerPosition ? getTileCoordinates(markerPosition.lat, markerPosition.lng, zoom) : null,
+    [markerPosition, zoom]
+  );
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": "static-map-view",
+      sx: {
+        width: "100%",
+        height,
+        position: "relative",
+        background: surfaceBackground(mapType, theme),
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(MapTiles, { origin: tileOrigin, zoom, mapType, panOffset }),
+        /* @__PURE__ */ jsx(MapRoads, {}),
+        marker && /* @__PURE__ */ jsx(MapCentreMarker, {}),
+        /* @__PURE__ */ jsx(MapDecorativePins, {}),
+        /* @__PURE__ */ jsx(MapScaleBar, { zoom }),
+        /* @__PURE__ */ jsx(MapCompass, {})
+      ]
+    }
+  );
+};
+
+export {
+  StaticMapView
+};
+//# sourceMappingURL=chunk-WBKWIFXA.js.map

package/dist/chunk-WMALDOF5.js

@@ -0,0 +1,138 @@
+import {
+  SettingsRail
+} from "./chunk-7JO3ES5P.js";
+import {
+  activeItemLabel,
+  filterGroups
+} from "./chunk-BXC6GRLE.js";
+import {
+  SettingsPanel
+} from "./chunk-IE7ISTLQ.js";
+import {
+  atLeastRail
+} from "./chunk-LIG7TKIB.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/layout/SettingsLayout/SettingsLayout.tsx
+import Box from "@mui/material/Box/index.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  searchPlaceholder: "Search settings",
+  defaultQuery: "",
+  emptySearchLabel: "No settings match your search.",
+  testIdPrefix: "settings",
+  railBreakpoint: "md",
+  navVariant: "switcher",
+  atIndex: false,
+  backLabel: "Back"
+};
+function shellSx(breakpoint, fillHeight) {
+  return (theme) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: 1.5,
+    width: "100%",
+    minWidth: 0,
+    // Only ever at the wide shape. Narrow, the rail is a disclosure or the page
+    // itself, and two independent scrollbars on a phone is a trap rather than a
+    // convenience.
+    [atLeastRail(theme, breakpoint ?? "md")]: {
+      flexDirection: "row",
+      gap: 3,
+      ...fillHeight ? { height: "100%", minHeight: 0 } : {}
+    }
+  });
+}
+var SettingsLayout = (props) => {
+  const {
+    title,
+    groups,
+    activeItemId,
+    onSelectItem,
+    searchPlaceholder,
+    defaultQuery,
+    emptySearchLabel,
+    emptySearchAction,
+    linkComponent,
+    children,
+    testIdPrefix,
+    railBreakpoint,
+    fillHeight = false,
+    navVariant,
+    atIndex,
+    indexHref,
+    backLabel,
+    sectionChips
+  } = withDefaults(props, DEFAULTS);
+  const [query, setQuery] = useState(defaultQuery);
+  const [navOpen, setNavOpen] = useState(false);
+  const filteredGroups = useMemo(() => filterGroups(groups, query), [groups, query]);
+  const activeLabel = useMemo(() => activeItemLabel(groups, activeItemId), [groups, activeItemId]);
+  const drilldown = navVariant === "drilldown";
+  const ariaLabel = typeof title === "string" ? title : "Settings";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": testIdPrefix,
+      "data-nav-variant": navVariant,
+      "data-at-index": atIndex ? "true" : "false",
+      sx: shellSx(railBreakpoint, fillHeight),
+      children: [
+        /* @__PURE__ */ jsx(
+          SettingsRail,
+          {
+            title,
+            activeLabel,
+            navOpen,
+            onToggleNav: () => setNavOpen((open) => !open),
+            query,
+            onQueryChange: setQuery,
+            searchPlaceholder,
+            emptySearchLabel,
+            emptySearchAction,
+            filteredGroups,
+            activeItemId,
+            linkComponent,
+            onSelectItem,
+            onNavigate: () => setNavOpen(false),
+            testIdPrefix,
+            variant: navVariant,
+            breakpoint: railBreakpoint,
+            atIndex,
+            fillHeight
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsPanel,
+          {
+            inSection: drilldown && !atIndex,
+            hideOnNarrow: drilldown && atIndex,
+            breakpoint: railBreakpoint,
+            indexHref,
+            sectionTitle: props.sectionTitle,
+            sectionDescription: props.sectionDescription,
+            backLabel,
+            ariaLabel,
+            sectionChips,
+            activeItemId,
+            linkComponent,
+            onSelectItem,
+            testIdPrefix,
+            fillHeight,
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+SettingsLayout.displayName = "SettingsLayout";
+
+export {
+  SettingsLayout
+};
+//# sourceMappingURL=chunk-WMALDOF5.js.map