mui-atelier 0.1.0

package/dist/components/HeadingLevel.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const HeadingLevelContext = createContext(2);
+function useHeadingLevel() {
+  return `h${useContext(HeadingLevelContext)}`;
+}
+function useNestedHeadingLevel() {
+  return Math.min(useContext(HeadingLevelContext) + 1, 6);
+}
+function HeadingLevel({ level, children }) {
+  return /* @__PURE__ */ jsx(HeadingLevelContext.Provider, { value: Math.min(Math.max(level, 2), 6), children });
+}
+export {
+  HeadingLevel as default,
+  useHeadingLevel,
+  useNestedHeadingLevel
+};

package/dist/components/IconTile.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+const TINTS = {
+  accent: { channel: "primary", fg: "primary.main" },
+  success: { channel: "success", fg: "success.main" },
+  warning: { channel: "warning", fg: "warning.main" },
+  neutral: { channel: "secondary", fg: "text.secondary" }
+};
+function IconTile({ children, tint = "accent", size = 40, sx }) {
+  const { rt } = useTheme();
+  const ui = rt?.ui ?? {};
+  const t = TINTS[tint] ?? TINTS.accent;
+  const flat = ui.surface === "flat";
+  const bare = flat && !ui.dense;
+  const radius = ui.surface === "berry" ? 8 : flat ? ui.dense ? 6 : 3 : Math.round(size * 0.32);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "aria-hidden": true,
+      sx: [
+        {
+          width: size,
+          height: size,
+          flexShrink: 0,
+          borderRadius: `${radius}px`,
+          display: "grid",
+          placeItems: "center",
+          fontSize: size * (bare ? 0.56 : 0.5),
+          color: t.fg,
+          backgroundColor: bare ? "transparent" : (theme) => `rgba(${theme.vars.palette[t.channel].mainChannel} / ${ui.dense ? 0.11 : 0.14})`,
+          "& > svg": { fontSize: "inherit" }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children
+    }
+  );
+}
+export {
+  IconTile as default
+};

package/dist/components/ImagePreviewDialog.js

@@ -0,0 +1,86 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import Dialog from "@mui/material/Dialog";
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+function ImagePreviewDialog({ open, onClose, url, title, onPrev, onNext, counter }) {
+  const t = useTranslations("uikit");
+  const nav = Boolean(onPrev || onNext);
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose,
+      maxWidth: false,
+      "aria-label": title || "Image preview",
+      slotProps: { paper: { sx: { position: "relative", m: 2, maxWidth: "92vw", bgcolor: "background.paper", overflow: "visible" } } },
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onClose,
+            "aria-label": t("image.close"),
+            size: "small",
+            sx: {
+              position: "absolute",
+              top: -14,
+              right: -14,
+              zIndex: 1,
+              bgcolor: "background.paper",
+              boxShadow: 2,
+              "&:hover": { bgcolor: "action.hover" }
+            },
+            children: /* @__PURE__ */ jsx(CloseRoundedIcon, { fontSize: "small" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { sx: { p: 1.5, display: "flex", flexDirection: "column", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }, children: [
+            url ? /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "img",
+                src: url,
+                alt: title || "",
+                sx: { display: "block", maxWidth: "88vw", maxHeight: "82vh", width: "auto", height: "auto", borderRadius: (t2) => `${t2.rt?.radii?.button ?? 4}px` }
+              }
+            ) : /* @__PURE__ */ jsx(Box, { sx: { width: "min(60vw, 360px)", height: 240, display: "grid", placeItems: "center" }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 28 }) }),
+            nav ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  "aria-label": t("image.previous"),
+                  onClick: onPrev,
+                  sx: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", bgcolor: "background.paper", boxShadow: 2, "&:hover": { bgcolor: "action.hover" } },
+                  children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  "aria-label": t("image.next"),
+                  onClick: onNext,
+                  sx: { position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", bgcolor: "background.paper", boxShadow: 2, "&:hover": { bgcolor: "action.hover" } },
+                  children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+                }
+              )
+            ] }) : null
+          ] }),
+          title || counter ? /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { maxWidth: "88vw", alignItems: "center", justifyContent: "center" }, children: [
+            title ? /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", textAlign: "center", wordBreak: "break-word" }, children: title }) : null,
+            counter ? /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "text.secondary", flexShrink: 0 }, children: counter }) : null
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ImagePreviewDialog as default
+};

package/dist/components/LabeledField.js

@@ -0,0 +1,156 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId } from "react";
+import { useTranslations } from "next-intl";
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import FormControl from "@mui/material/FormControl";
+import Select from "@mui/material/Select";
+import Typography from "@mui/material/Typography";
+const AuthInsetContext = createContext(false);
+function OptionalMark() {
+  const t = useTranslations("uikit");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    " ",
+    /* @__PURE__ */ jsx(Typography, { component: "span", variant: "caption", sx: { ml: 0.25, color: "text.secondary", fontWeight: 400 }, children: t("optional") })
+  ] });
+}
+function LabeledField({
+  label,
+  help,
+  helpColor,
+  error = false,
+  required = false,
+  optional = false,
+  group = false,
+  sx,
+  children
+}) {
+  const id = useId();
+  const labelId = useId();
+  const helpId = useId();
+  const inAuthCard = useContext(AuthInsetContext);
+  const theme = useTheme();
+  const inset = inAuthCard && Boolean(theme.rt?.ui?.authInset);
+  const describedBy = help ? helpId : void 0;
+  const tone = helpColor ?? (error ? "error.main" : "text.secondary");
+  const marker = required ? /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": true, sx: { color: "error.main", ml: 0.25 }, children: "*" }) : optional ? /* @__PURE__ */ jsx(OptionalMark, {}) : null;
+  const helpLine = help ? /* @__PURE__ */ jsx(Typography, { id: helpId, variant: "caption", sx: { display: "block", mt: 0.5, color: tone }, children: help }) : null;
+  if (inset) {
+    return /* @__PURE__ */ jsxs(Box, { sx, children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            position: "relative",
+            "& label": {
+              position: "absolute",
+              top: 9,
+              left: 14,
+              zIndex: 1,
+              pointerEvents: "none",
+              fontSize: "0.75rem",
+              lineHeight: 1,
+              color: "text.secondary"
+            },
+            "& .MuiOutlinedInput-input": { paddingTop: "30.5px !important", paddingBottom: "11.5px !important" },
+            "& .MuiOutlinedInput-notchedOutline legend": { display: "none" }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Typography, { component: "label", id: labelId, htmlFor: id, variant: "caption", children: [
+              label,
+              marker
+            ] }),
+            children({ id, labelId, describedBy })
+          ]
+        }
+      ),
+      helpLine
+    ] });
+  }
+  if (group) {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "fieldset",
+        "aria-describedby": describedBy,
+        sx: { border: 0, m: 0, p: 0, minWidth: 0, ...sx },
+        children: [
+          /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              component: "legend",
+              id: labelId,
+              variant: "body2",
+              sx: { fontWeight: 500, display: "block", mb: 0.75, p: 0 },
+              children: [
+                label,
+                marker
+              ]
+            }
+          ),
+          children({ id, labelId, describedBy }),
+          helpLine
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx, children: [
+    /* @__PURE__ */ jsxs(
+      Typography,
+      {
+        component: "label",
+        id: labelId,
+        htmlFor: id,
+        variant: "body2",
+        sx: { fontWeight: 500, display: "block", mb: 0.75 },
+        children: [
+          label,
+          marker
+        ]
+      }
+    ),
+    children({ id, labelId, describedBy }),
+    helpLine
+  ] });
+}
+function LabeledSelect({
+  labelId,
+  describedBy,
+  ariaLabel,
+  value,
+  onChange,
+  disabled = false,
+  error = false,
+  multiple = false,
+  renderValue,
+  displayEmpty = true,
+  fullWidth = true,
+  size,
+  sx,
+  children
+}) {
+  return /* @__PURE__ */ jsx(FormControl, { fullWidth, size, disabled, error, children: /* @__PURE__ */ jsx(
+    Select,
+    {
+      value,
+      onChange,
+      multiple,
+      renderValue,
+      displayEmpty,
+      SelectDisplayProps: {
+        "aria-labelledby": labelId,
+        "aria-describedby": describedBy,
+        "aria-label": labelId ? void 0 : ariaLabel
+      },
+      sx,
+      children
+    }
+  ) });
+}
+export {
+  AuthInsetContext,
+  LabeledSelect,
+  OptionalMark,
+  LabeledField as default
+};

package/dist/components/LanguageSwitcher.js

@@ -0,0 +1,43 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useLocale, useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import ListItemText from "@mui/material/ListItemText";
+import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
+import TranslateOutlinedIcon from "@mui/icons-material/TranslateOutlined";
+const DEFAULT_LOCALES = [
+  { code: "en", label: "English" },
+  { code: "es", label: "Espa\xF1ol" },
+  { code: "zh", label: "\u4E2D\u6587" }
+];
+const ONE_YEAR = 60 * 60 * 24 * 365;
+function writeLocaleCookie(code) {
+  document.cookie = `NEXT_LOCALE=${code}; path=/; max-age=${ONE_YEAR}; samesite=lax`;
+}
+function LanguageSwitcher({ locales = DEFAULT_LOCALES }) {
+  const locale = useLocale();
+  const t = useTranslations("uikit");
+  const router = useRouter();
+  const [anchorEl, setAnchorEl] = useState(null);
+  function pick(code) {
+    writeLocaleCookie(code);
+    setAnchorEl(null);
+    if (code !== locale) router.refresh();
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: t("language.label"), children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (e) => setAnchorEl(e.currentTarget), "aria-label": t("language.label"), children: /* @__PURE__ */ jsx(TranslateOutlinedIcon, { fontSize: "small" }) }) }),
+    /* @__PURE__ */ jsx(Menu, { anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null), children: locales.map(({ code, label }) => /* @__PURE__ */ jsxs(MenuItem, { selected: code === locale, onClick: () => pick(code), children: [
+      /* @__PURE__ */ jsx(ListItemText, { children: label }),
+      code === locale ? /* @__PURE__ */ jsx(CheckRoundedIcon, { fontSize: "small", sx: { ml: 2, opacity: 0.7 } }) : null
+    ] }, code)) })
+  ] });
+}
+export {
+  DEFAULT_LOCALES,
+  LanguageSwitcher as default
+};

package/dist/components/ListRow.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import IconTile from "./IconTile.js";
+const TINT_CHANNEL = { accent: "primary", success: "success", warning: "warning", neutral: "secondary" };
+function ListRow({ icon, iconTint = "accent", primary, secondary, trailing, tinted, sx }) {
+  const { rt } = useTheme();
+  const ui = rt?.ui ?? {};
+  const channel = TINT_CHANNEL[iconTint] ?? "primary";
+  const flat = ui.surface === "flat";
+  const glass = ui.surface === "glass";
+  const berry = ui.surface === "berry";
+  const dense = !!ui.dense;
+  const doTint = tinted ?? true;
+  const iconSize = dense ? 30 : flat ? 34 : glass || berry ? 40 : 42;
+  const rowSx = berry ? {
+    alignItems: "center",
+    px: 0,
+    py: 1.5,
+    borderBottom: "1px solid",
+    borderColor: "divider",
+    "&:last-of-type": { borderBottom: "none" }
+  } : {
+    alignItems: "center",
+    p: dense ? 1 : 1.25,
+    borderRadius: `${Math.min(rt?.radii?.card ?? 12, 16)}px`,
+    backgroundColor: doTint ? (theme) => `rgba(${theme.vars.palette[channel].mainChannel} / ${flat ? 0.05 : 0.06})` : "transparent",
+    // Flat themes (editorial/pro) read best with a crisp edge instead of a wash alone.
+    ...flat ? { border: "1px solid", borderColor: "divider" } : null
+  };
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: dense ? 1.25 : 1.75, sx: [rowSx, ...Array.isArray(sx) ? sx : [sx]], children: [
+    icon ? /* @__PURE__ */ jsx(IconTile, { tint: iconTint, size: iconSize, children: icon }) : null,
+    /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          component: "div",
+          variant: dense ? "body2" : "subtitle2",
+          sx: { fontWeight: berry ? 500 : 600, fontSize: dense ? "0.9rem" : flat ? "1.05rem" : berry ? "1rem" : void 0, fontFamily: rt?.headingFont ?? void 0, ...berry ? { color: "var(--mui-palette-text-heading, inherit)" } : null },
+          children: primary
+        }
+      ),
+      secondary ? /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "caption",
+          sx: { color: "text.secondary", display: "block", overflowWrap: "anywhere", fontFamily: glass ? rt.mono : void 0, fontSize: glass ? "0.72rem" : void 0, letterSpacing: glass ? "0.02em" : void 0 },
+          children: secondary
+        }
+      ) : null
+    ] }),
+    trailing
+  ] });
+}
+export {
+  ListRow as default
+};

package/dist/components/ModeToggle.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+import { useColorScheme } from "@mui/material/styles";
+import { useTranslations } from "next-intl";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined";
+import DarkModeOutlinedIcon from "@mui/icons-material/DarkModeOutlined";
+import SettingsBrightnessOutlinedIcon from "@mui/icons-material/SettingsBrightnessOutlined";
+const NEXT = { light: "dark", dark: "system", system: "light" };
+const emptySubscribe = () => () => {
+};
+const useMounted = () => useSyncExternalStore(emptySubscribe, () => true, () => false);
+function ModeToggle() {
+  const t = useTranslations("uikit");
+  const { mode, setMode } = useColorScheme();
+  const mounted = useMounted();
+  if (!mounted || !mode) {
+    return /* @__PURE__ */ jsx(IconButton, { size: "small", disabled: true, "aria-label": t("mode.label"), children: /* @__PURE__ */ jsx(SettingsBrightnessOutlinedIcon, { fontSize: "small" }) });
+  }
+  const icon = mode === "light" ? /* @__PURE__ */ jsx(LightModeOutlinedIcon, { fontSize: "small" }) : mode === "dark" ? /* @__PURE__ */ jsx(DarkModeOutlinedIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(SettingsBrightnessOutlinedIcon, { fontSize: "small" });
+  return (
+    /*
+     * Named through the catalogue like everything else in this bar. It was
+     * `Colour mode: dark` in a template literal — untranslated in a trilingual
+     * product, and spelled the American way in a codebase that writes
+     * "organisation" everywhere else.
+     */
+    /* @__PURE__ */ jsx(Tooltip, { title: t(`mode.${mode}`), children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => setMode(NEXT[mode]), "aria-label": t(`mode.${mode}`), children: icon }) })
+  );
+}
+export {
+  ModeToggle as default
+};

package/dist/components/PageHeader.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+function PageHeader({ children, sx, ...rest }) {
+  const theme = useTheme();
+  const pill = !!theme.rt?.ui?.pillHeading;
+  const berry = theme.rt?.ui?.chrome === "berry";
+  const berrySx = berry ? {
+    backgroundColor: "background.paper",
+    // The same shadow the theme's cards carry (createSiteTheme's berry
+    // surface, one definition) — this strip is a card, and sat flat
+    // beside shadowed ones.
+    boxShadow: theme.rt?.cardShadow ?? "none",
+    borderRadius: `${theme.rt?.radii?.card ?? 8}px`,
+    px: 2,
+    py: 1.25,
+    /*
+     * A two-column grid: everything the page wrote stacks in the first
+     * column, the trail alone takes the second, on the first row, pinned
+     * right — so a one-line header reads "title … trail" on one row, and
+     * a tall one (a record's title and its meta) keeps the trail at
+     * its top-right corner rather than under the meta.
+     */
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr) auto",
+    columnGap: 2,
+    rowGap: 1,
+    alignItems: "center",
+    // The header is a size container so the trail can move by the WIDTH
+    // IT HAS, not the viewport's: a page that caps its header (the
+    // project editor's 680px) is narrow on a wide screen.
+    containerType: "inline-size",
+    "& > *": { minWidth: 0, gridColumn: 1 },
+    // A bare back-link button in the header keeps its size; stretched to
+    // the column it would centre its label across the card.
+    "& > .MuiButton-root, & > a": { justifySelf: "start" },
+    "& > .MuiBreadcrumbs-root": {
+      gridColumn: 2,
+      gridRow: 1,
+      justifySelf: "end",
+      alignSelf: "start",
+      mb: 0,
+      fontSize: "0.75rem",
+      fontWeight: 500,
+      // Too narrow for a title and a trail side by side: the trail takes
+      // the whole first row, right-aligned, and the title drops under it.
+      "@container (max-width: 860px)": { gridColumn: "1 / -1", "& .MuiBreadcrumbs-ol": { justifyContent: "flex-end" } }
+    },
+    "& h1": { fontSize: "1rem", fontWeight: 500 },
+    // A standing subtitle under the title: Berry's strip has no room for a
+    // sentence, so it becomes the caption size.
+    "& h1 + .MuiTypography-root": { fontSize: "0.75rem" }
+  } : {};
+  const pillSx = pill ? {
+    backgroundColor: "background.paper",
+    borderRadius: `${theme.rt?.radii?.card ?? 16}px`,
+    p: { xs: 2, sm: 2.5 },
+    boxShadow: "0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -18px rgba(0,0,0,0.18)"
+  } : {};
+  return /* @__PURE__ */ jsx(Box, { "data-pill": pill ? "on" : "off", "data-chrome": berry ? "berry" : void 0, sx: { ...pillSx, ...berrySx, ...sx }, ...rest, children });
+}
+export {
+  PageHeader as default
+};

package/dist/components/PasswordField.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField from "@mui/material/TextField";
+import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
+import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
+import { useTranslations } from "next-intl";
+function PasswordField({ id, describedBy, ...rest }) {
+  const t = useTranslations("uikit");
+  const [shown, setShown] = useState(false);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      id,
+      fullWidth: true,
+      ...rest,
+      type: shown ? "text" : "password",
+      slotProps: {
+        ...rest.slotProps,
+        htmlInput: { "aria-describedby": describedBy, ...rest.slotProps?.htmlInput },
+        input: {
+          ...rest.slotProps?.input,
+          endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => setShown((v) => !v),
+              edge: "end",
+              size: "small",
+              "aria-label": t(shown ? "password.hide" : "password.show"),
+              tabIndex: -1,
+              children: shown ? /* @__PURE__ */ jsx(VisibilityOffOutlinedIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(VisibilityOutlinedIcon, { fontSize: "small" })
+            }
+          ) })
+        }
+      }
+    }
+  );
+}
+export {
+  PasswordField as default
+};

package/dist/components/PublicLayout.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import BrandHeader from "./BrandHeader.js";
+import PublicNav from "./PublicNav.js";
+function PublicLayout({ siteName, siteHref = "/", logoUrl = null, footerName = siteName, navItems = [], actions = null, footer = null, children }) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { minHeight: "100dvh", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx(BrandHeader, { siteName, href: siteHref, logoUrl, navItems, actions }),
+    navItems.length > 0 ? /* @__PURE__ */ jsx(PublicNav, { items: navItems }) : null,
+    /* @__PURE__ */ jsx(Box, { component: "main", sx: { flexGrow: 1 }, children }),
+    /* @__PURE__ */ jsx(Box, { component: "footer", sx: { borderTop: 1, borderColor: "divider", py: 3, mt: 8 }, children: /* @__PURE__ */ jsx(Container, { maxWidth: "lg", children: /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, sx: { alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: [
+        "\xA9 ",
+        (/* @__PURE__ */ new Date()).getFullYear(),
+        " ",
+        footerName
+      ] }),
+      footer
+    ] }) }) })
+  ] });
+}
+export {
+  PublicLayout as default
+};

package/dist/components/PublicNav.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { usePathname } from "next/navigation";
+import SiteNav from "./SiteNav.js";
+function PublicNav({ items = [] }) {
+  const pathname = usePathname() || "";
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    SiteNav,
+    {
+      items: items.map((item) => ({ key: item.href, label: item.label, href: item.href, active: pathname === item.href }))
+    }
+  );
+}
+export {
+  PublicNav as default
+};

package/dist/components/RouteMessage.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Container from "@mui/material/Container";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import NextLink from "next/link";
+import { useTranslations } from "next-intl";
+function RouteMessage({
+  title,
+  body,
+  cta,
+  href,
+  onRetry,
+  retryLabel
+}) {
+  const t = useTranslations("uikit");
+  return /* @__PURE__ */ jsxs(Container, { maxWidth: "sm", sx: { py: { xs: 8, sm: 12 }, textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h4", component: "h1", gutterBottom: true, children: title }),
+    body ? /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { color: "text.secondary", mb: 4 }, children: body }) : null,
+    /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", sm: "row" }, spacing: 1.5, sx: { justifyContent: "center" }, children: [
+      onRetry ? /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: onRetry, children: retryLabel ?? t("route.retry") }) : null,
+      href ? /* @__PURE__ */ jsx(Button, { component: NextLink, href, variant: onRetry ? "outlined" : "contained", children: cta ?? t("route.home") }) : null,
+      !href && !onRetry ? /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: () => window.history.back(), children: t("route.back") }) }) : null
+    ] })
+  ] });
+}
+export {
+  RouteMessage as default
+};

package/dist/components/RowList.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import Stack from "@mui/material/Stack";
+import { useTheme } from "@mui/material/styles";
+function RowList({ children, sx }) {
+  const berry = useTheme().rt?.ui?.surface === "berry";
+  return /* @__PURE__ */ jsx(Stack, { spacing: berry ? 0 : 1, sx, children });
+}
+export {
+  RowList as default
+};