@octoguide/mui-ui-toolkit 0.4.0 → 0.5.0

package/dist/index.js

@@ -67,10 +67,15 @@ __export(index_exports, {
   H6: () => H6,
   InternalLinkItem: () => InternalLinkItem,
   Link: () => Link,
+  LogoLink: () => LogoLink,
   MobileDatePicker: () => MobileDatePicker,
   MobileDateTimePicker: () => MobileDateTimePicker,
   MobileTimePicker: () => MobileTimePicker,
   Overline: () => Overline,
+  PageSpinner: () => PageSpinner,
+  Pagination: () => Pagination,
+  Paragraph: () => Paragraph,
+  Spinner: () => Spinner,
   StandaloneAccordion: () => StandaloneAccordion,
   StaticDatePicker: () => StaticDatePicker,
   StaticDateTimePicker: () => StaticDateTimePicker,
@@ -1988,18 +1993,611 @@ var Link = import_react4.default.forwardRef(function Link2({
 });
 Link.displayName = "ToolkitLink";
 
+// src/components/LogoLink/LogoLink.tsx
+var import_react5 = __toESM(require("react"));
+
+// src/components/LogoLink/LogoLink.styles.tsx
+var import_Box4 = __toESM(require("@mui/material/Box"));
+var import_styles10 = require("@mui/material/styles");
+var StyledLogoLink = (0, import_styles10.styled)(import_Box4.default, {
+  shouldForwardProp: (prop) => prop !== "isSmall"
+})(({ theme, isSmall }) => ({
+  display: "inline-flex",
+  height: isSmall ? "45px" : "55px",
+  flexShrink: 0,
+  backgroundColor: theme.tokens.colors.primary,
+  color: theme.palette.common.white,
+  textDecoration: "none",
+  "&:hover > span": {
+    transform: "translateY(5px)"
+  },
+  "@media print": {
+    backgroundColor: theme.palette.common.white,
+    color: theme.tokens.colors.primaryDark
+  }
+}));
+var StyledLogoSpan = (0, import_styles10.styled)("span")(({ theme }) => ({
+  padding: "0 10px 0 15px",
+  backgroundColor: theme.tokens.colors.primary,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  transitionProperty: "transform",
+  transitionDuration: theme.tokens.transitions.durationBase,
+  transitionTimingFunction: "ease-in-out",
+  "@media (max-width: 640px)": {
+    padding: "0 7px 0 10px"
+  },
+  "@media print": {
+    backgroundColor: "transparent"
+  }
+}));
+
+// src/components/LogoLink/LogoLink.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var LogoLink = import_react5.default.forwardRef(function LogoLink2({ children, href = "/", isSmall, title = "Home", component, ...restProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    StyledLogoLink,
+    {
+      component: component ?? "a",
+      href,
+      isSmall,
+      title,
+      "data-component-id": "LogoLink",
+      ...getCleanProps(restProps),
+      ref,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledLogoSpan, { children })
+    }
+  );
+});
+LogoLink.displayName = "ToolkitLogoLink";
+
+// src/components/PageSpinner/PageSpinner.tsx
+var import_react6 = __toESM(require("react"));
+var import_Portal = __toESM(require("@mui/material/Portal"));
+var import_CircularProgress2 = __toESM(require("@mui/material/CircularProgress"));
+var import_utils = require("@mui/material/utils");
+
+// src/utils/backgroundScrollTether.ts
+var getScrollWidth = () => {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const documentWidth = document.documentElement.clientWidth;
+  const windowWidth = window.innerWidth;
+  return windowWidth - documentWidth;
+};
+var backgroundScrollTether = (on) => {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const id = "backgroundScrollTether";
+  const get = () => document.querySelector(`#${id}`);
+  if (on) {
+    if (!get()) {
+      const style = document.createElement("style");
+      style.id = id;
+      style.innerText = `body { padding-right: ${getScrollWidth()}px; overflow-y: hidden; }`;
+      document.body.appendChild(style);
+    }
+  } else {
+    const style = get();
+    if (style && style.parentNode) style.parentNode.removeChild(style);
+  }
+  return null;
+};
+
+// src/utils/tabTrap.ts
+var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+var suppressKeys = (on, self, root) => {
+  if (!self || !root) return;
+  const focusableElements = self.querySelectorAll(FOCUSABLE_SELECTOR);
+  let startElement;
+  let endElement;
+  if (focusableElements && focusableElements.length >= 1) {
+    startElement = focusableElements[0];
+    endElement = focusableElements[focusableElements.length - 1];
+  }
+  const handleEvent = (event) => {
+    const activeElement = root.activeElement || document.activeElement;
+    if (event.shiftKey && event.key === "Tab") {
+      if (activeElement === startElement && endElement) {
+        event.preventDefault();
+        endElement.focus();
+      }
+    } else if (event.key === "Tab") {
+      if (activeElement === endElement && startElement) {
+        event.preventDefault();
+        startElement.focus();
+      }
+    }
+  };
+  if (on) {
+    self.addEventListener("keydown", handleEvent, true);
+  } else {
+    self.removeEventListener("keydown", handleEvent, true);
+  }
+};
+var injectTabTrap = (elem, attr, cache, disablerValue) => {
+  const currentIndex = elem.getAttribute(attr);
+  elem.setAttribute(attr, disablerValue);
+  elem.setAttribute(cache, currentIndex ?? "");
+};
+var ejectTabTrap = (elem, attr, cache) => {
+  const priorIndex = elem.getAttribute(cache) || "";
+  if (priorIndex) {
+    elem.setAttribute(attr, priorIndex);
+  } else {
+    elem.removeAttribute(attr);
+  }
+  elem.removeAttribute(cache);
+};
+var tabTrap = (on, self, root = typeof document !== "undefined" ? document.body : null) => {
+  const applyTabTrap = (topElem) => {
+    [...topElem.querySelectorAll("*"), topElem].forEach((elem) => {
+      if (elem.hasAttribute("aria-live")) return;
+      const isSvg = elem.tagName.toLowerCase() === "svg";
+      const attr = isSvg ? "focusable" : "tabindex";
+      const cache = `data-prior-${attr}`;
+      const disablerValue = isSvg ? "false" : "-1";
+      const elemWasTouched = elem.hasAttribute(cache);
+      if (on) {
+        if (!elemWasTouched) {
+          injectTabTrap(elem, attr, cache, disablerValue);
+          injectTabTrap(elem, "aria-hidden", "data-prior-hidden", "true");
+        }
+      } else {
+        if (elemWasTouched) {
+          ejectTabTrap(elem, attr, cache);
+          ejectTabTrap(elem, "aria-hidden", "data-prior-hidden");
+        }
+      }
+    });
+  };
+  [...root.children].forEach((topElem) => {
+    if (topElem !== self) {
+      applyTabTrap(topElem);
+    }
+  });
+  if (root !== document.body) {
+    [...document.body.children].forEach((topElem) => {
+      const shadowHost = root.host;
+      if (!(topElem.contains(root) || shadowHost && topElem.contains(shadowHost))) {
+        applyTabTrap(topElem);
+      }
+    });
+  }
+  if (self) suppressKeys(on, self, root);
+};
+
+// src/utils/a11yAnnouncer.ts
+var A11Y_REGION_ID = "a11y-region";
+var DEFAULT_TONE = "polite";
+var DEFAULT_ROLE = "status";
+var clearTimer;
+function createA11yRegion() {
+  const region = document.createElement("div");
+  region.setAttribute("id", A11Y_REGION_ID);
+  region.setAttribute("role", DEFAULT_ROLE);
+  region.setAttribute("aria-live", DEFAULT_TONE);
+  region.setAttribute("aria-atomic", "true");
+  Object.assign(region.style, {
+    border: "0",
+    clip: "rect(0 0 0 0)",
+    height: "1px",
+    margin: "-1px",
+    overflow: "hidden",
+    padding: "0",
+    position: "absolute",
+    width: "1px"
+  });
+  return region;
+}
+function getA11yRegion() {
+  if (typeof document === "undefined") return null;
+  const existing = document.getElementById(A11Y_REGION_ID);
+  if (existing) return existing;
+  const region = createA11yRegion();
+  document.body.appendChild(region);
+  return region;
+}
+function setA11yMessage(messageText, messageTone, messageRole, clearAfter = 5e3) {
+  const region = getA11yRegion();
+  if (!region) return;
+  region.setAttribute("aria-live", messageTone ?? DEFAULT_TONE);
+  region.setAttribute("role", messageRole ?? DEFAULT_ROLE);
+  region.textContent = messageText || "";
+  clearTimeout(clearTimer);
+  clearTimer = setTimeout(() => {
+    region.textContent = "";
+  }, clearAfter);
+}
+
+// src/components/PageSpinner/PageSpinner.styles.tsx
+var import_styles11 = require("@mui/material/styles");
+var import_styles12 = require("@mui/material/styles");
+var PAGE_SPINNER_Z_INDEX = 1400;
+var StyledPageSpinnerRoot = (0, import_styles11.styled)("div")(() => ({
+  position: "relative"
+}));
+var StyledOverlay = (0, import_styles11.styled)("div", {
+  shouldForwardProp: (prop) => prop !== "$darkBg"
+})(({ theme, $darkBg = false }) => ({
+  position: "fixed",
+  inset: 0,
+  zIndex: PAGE_SPINNER_Z_INDEX,
+  backgroundColor: $darkBg ? (0, import_styles12.alpha)(theme.tokens.colors.textPrimary, 0.9) : (0, import_styles12.alpha)(theme.palette.common.white, 0.9)
+}));
+var StyledSpinnerCentre = (0, import_styles11.styled)("div")(() => ({
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  zIndex: PAGE_SPINNER_Z_INDEX + 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "16px"
+}));
+var StyledSpinnerMessage = (0, import_styles11.styled)("p", {
+  shouldForwardProp: (prop) => prop !== "$darkBg"
+})(({ theme, $darkBg = false }) => ({
+  margin: 0,
+  fontFamily: theme.tokens.typography.fontFamilyBase,
+  fontSize: theme.tokens.typography.fontSizeLg,
+  fontWeight: theme.tokens.typography.fontWeightRegular,
+  lineHeight: theme.tokens.typography.lineHeightBase,
+  color: $darkBg ? theme.palette.common.white : theme.tokens.colors.textPrimary,
+  textAlign: "center"
+}));
+var StyledScreenReaderOnly2 = (0, import_styles11.styled)("span")(() => ({
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0,0,0,0)",
+  whiteSpace: "nowrap",
+  border: 0
+}));
+
+// src/components/PageSpinner/PageSpinner.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ARIA_REANNOUNCE_INTERVAL = 3e4;
+var PageSpinner = import_react6.default.forwardRef(
+  function PageSpinner2({
+    message = "Processing, please wait",
+    customMessageLayout,
+    isOnDarkBg = false,
+    srText,
+    rootNode = typeof document !== "undefined" ? document.body : void 0,
+    messageTone = "assertive",
+    ...restProps
+  }, ref) {
+    const internalRef = (0, import_react6.useRef)(null);
+    const mergedRef = (0, import_utils.useForkRef)(ref, internalRef);
+    (0, import_react6.useEffect)(() => {
+      const blockKeyDown = (e) => e.preventDefault();
+      document.addEventListener("keydown", blockKeyDown);
+      return () => document.removeEventListener("keydown", blockKeyDown);
+    }, [rootNode]);
+    (0, import_react6.useEffect)(() => {
+      const ariaRole = messageTone === "polite" ? "status" : "alert";
+      setA11yMessage(message, messageTone, ariaRole);
+      const interval = setInterval(() => {
+        setA11yMessage(message, messageTone, ariaRole);
+      }, ARIA_REANNOUNCE_INTERVAL);
+      tabTrap(true, internalRef.current, rootNode);
+      backgroundScrollTether(true);
+      return () => {
+        setA11yMessage("");
+        clearInterval(interval);
+        tabTrap(false, internalRef.current, rootNode);
+        backgroundScrollTether(false);
+      };
+    }, [message, rootNode, messageTone]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Portal.default, { container: rootNode, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      StyledPageSpinnerRoot,
+      {
+        "data-component-id": "PageSpinner",
+        role: "dialog",
+        ref: mergedRef,
+        ...getCleanProps(restProps),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StyledOverlay, { $darkBg: isOnDarkBg }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(StyledSpinnerCentre, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              import_CircularProgress2.default,
+              {
+                size: 60,
+                sx: isOnDarkBg ? { color: "common.white" } : void 0,
+                "aria-hidden": "true"
+              }
+            ),
+            customMessageLayout ?? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StyledSpinnerMessage, { $darkBg: isOnDarkBg, children: message }),
+            srText && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StyledScreenReaderOnly2, { children: srText })
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+PageSpinner.displayName = "ToolkitPageSpinner";
+
+// src/components/Pagination/Pagination.tsx
+var import_react7 = __toESM(require("react"));
+var import_Pagination = __toESM(require("@mui/material/Pagination"));
+
+// src/components/Pagination/Pagination.styles.tsx
+var import_styles13 = require("@mui/material/styles");
+var import_PaginationItem = __toESM(require("@mui/material/PaginationItem"));
+function getColorValue(theme, color) {
+  switch (color) {
+    case "primary":
+      return theme.tokens.colors.primary;
+    case "secondary":
+      return theme.tokens.colors.secondary;
+    case "info":
+      return theme.tokens.colors.info;
+    case "success":
+      return theme.tokens.colors.success;
+    case "warning":
+      return theme.tokens.colors.warning;
+    case "error":
+      return theme.tokens.colors.error;
+    default:
+      return theme.tokens.colors.textPrimary;
+  }
+}
+var StyledPaginationItem = (0, import_styles13.styled)(import_PaginationItem.default, {
+  shouldForwardProp: (prop) => prop !== "$variant" && prop !== "$color"
+})(({ theme, $variant, $color }) => {
+  const colorValue = getColorValue(theme, $color);
+  if ($variant === "text") {
+    return {
+      "&.Mui-selected": {
+        backgroundColor: (0, import_styles13.alpha)(colorValue, 0.08),
+        color: colorValue,
+        "&:hover": {
+          backgroundColor: (0, import_styles13.alpha)(colorValue, 0.16)
+        }
+      }
+    };
+  }
+  if ($variant === "outlined") {
+    return {
+      border: `1px solid ${(0, import_styles13.alpha)(colorValue, 0.24)}`,
+      "&.Mui-selected": {
+        border: `1px solid ${(0, import_styles13.alpha)(colorValue, 0.8)}`,
+        color: colorValue,
+        backgroundColor: (0, import_styles13.alpha)(colorValue, 0.08),
+        "&:hover": {
+          backgroundColor: (0, import_styles13.alpha)(colorValue, 0.16)
+        }
+      }
+    };
+  }
+  return {
+    "&.Mui-selected": {
+      backgroundColor: (0, import_styles13.alpha)(colorValue, 0.16),
+      color: colorValue,
+      "&:hover": {
+        backgroundColor: (0, import_styles13.alpha)(colorValue, 0.32)
+      }
+    },
+    "&:hover": {
+      backgroundColor: (0, import_styles13.alpha)(colorValue, 0.08)
+    }
+  };
+});
+
+// src/components/Pagination/Pagination.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Pagination = import_react7.default.forwardRef(
+  function Pagination2({ variant = "text", shape = "circular", color = "default", ...restProps }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_Pagination.default,
+      {
+        ref,
+        "data-component-id": "Pagination",
+        renderItem: (item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          StyledPaginationItem,
+          {
+            $variant: variant,
+            $color: color,
+            ...item,
+            shape
+          }
+        ),
+        ...getCleanProps(restProps)
+      }
+    );
+  }
+);
+Pagination.displayName = "ToolkitPagination";
+
+// src/components/Paragraph/Paragraph.tsx
+var import_react8 = __toESM(require("react"));
+
+// src/components/Paragraph/Paragraph.styles.tsx
+var import_styles14 = require("@mui/material/styles");
+var StyledParagraph = (0, import_styles14.styled)("p", {
+  shouldForwardProp: (prop) => prop !== "$variant" && prop !== "$isOnDarkBg"
+})(({ theme, $variant = "regular", $isOnDarkBg = false }) => ({
+  margin: 0,
+  fontFamily: theme.tokens.typography.fontFamilyBase,
+  outline: "transparent",
+  fontSize: theme.tokens.typography.fontSizeLg,
+  lineHeight: theme.tokens.typography.lineHeightBase,
+  color: $isOnDarkBg ? theme.palette.common.white : theme.tokens.colors.textPrimary,
+  ...$variant === "regular" && {
+    fontWeight: theme.tokens.typography.fontWeightRegular
+  },
+  ...$variant === "semibold" && {
+    fontWeight: theme.tokens.typography.fontWeightSemiBold
+  },
+  ...$variant === "bold" && {
+    fontWeight: theme.tokens.typography.fontWeightBold
+  },
+  ...$variant === "primary" && {
+    fontWeight: theme.tokens.typography.fontWeightSemiBold
+  },
+  ...$variant === "secondary" && {
+    fontWeight: theme.tokens.typography.fontWeightBold
+  },
+  ...$variant === "overline" && {
+    color: $isOnDarkBg ? theme.tokens.colors.overlayLight75 : theme.tokens.colors.textSecondary,
+    fontWeight: theme.tokens.typography.fontWeightBold,
+    letterSpacing: "0.125rem",
+    textTransform: "uppercase"
+  }
+}));
+
+// src/components/Paragraph/Paragraph.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Paragraph = import_react8.default.forwardRef(
+  function Paragraph2({ children, variant = "regular", isOnDarkBg = false, ...restProps }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      StyledParagraph,
+      {
+        $variant: variant,
+        $isOnDarkBg: isOnDarkBg,
+        "data-component-id": "Paragraph",
+        ...getCleanProps(restProps),
+        ref,
+        children
+      }
+    );
+  }
+);
+Paragraph.displayName = "ToolkitParagraph";
+
+// src/components/Spinner/Spinner.tsx
+var import_react9 = __toESM(require("react"));
+
+// src/components/Spinner/Spinner.styles.tsx
+var import_styles15 = require("@mui/material/styles");
+var spinnerSizing = {
+  xs: 20,
+  sm: 24,
+  md: 40,
+  lg: 56,
+  xl: 72
+};
+var StyledSpinnerContainer = (0, import_styles15.styled)("div", {
+  shouldForwardProp: (prop) => prop !== "$inline"
+})({}, ({ $inline }) => ({
+  flex: "0 1 100%",
+  display: "flex",
+  flexDirection: $inline ? "row" : "column",
+  alignItems: "center"
+}));
+var StyledSpinnerIconContainer = (0, import_styles15.styled)("div", {
+  shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
+})(({ $size }) => {
+  const size = spinnerSizing[$size];
+  return {
+    position: "relative",
+    width: size,
+    height: size
+  };
+});
+var StyledSpinnerBackground = (0, import_styles15.styled)("div", {
+  shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
+})(({ theme, $size, $darkBg }) => {
+  const size = spinnerSizing[$size];
+  const lineWidth = Math.round(size / 12);
+  const borderColor = $darkBg ? (0, import_styles15.alpha)(theme.palette.common.white, 0.2) : (0, import_styles15.alpha)(theme.tokens.colors.textPrimary, 0.1);
+  return {
+    position: "absolute",
+    width: size,
+    height: size,
+    borderRadius: "50%",
+    border: `${lineWidth}px solid ${borderColor}`
+  };
+});
+var StyledSpinner = (0, import_styles15.styled)("div", {
+  shouldForwardProp: (prop) => prop !== "$size" && prop !== "$darkBg"
+})(({ theme, $size, $darkBg }) => {
+  const size = spinnerSizing[$size];
+  const lineWidth = Math.round(size / 12);
+  const animationSpeed = `${1 + size / 100}s`;
+  const color = $darkBg ? theme.palette.common.white : theme.tokens.colors.primary;
+  return {
+    "@keyframes toolkit-spin": {
+      "0%": { transform: "rotate(0deg)" },
+      "100%": { transform: "rotate(360deg)" }
+    },
+    position: "absolute",
+    width: size,
+    height: size,
+    borderRadius: "50%",
+    borderTop: "3px solid transparent",
+    borderRight: "3px solid transparent",
+    borderBottom: `${lineWidth}px solid ${color}`,
+    borderLeft: `${lineWidth}px solid ${color}`,
+    animation: `toolkit-spin ${animationSpeed} infinite linear`
+  };
+});
+var StyledSpinnerMessage2 = (0, import_styles15.styled)("span", {
+  shouldForwardProp: (prop) => prop !== "$darkBg" && prop !== "$inline"
+})(({ theme, $darkBg, $inline }) => ({
+  fontFamily: theme.tokens.typography.fontFamilyBase,
+  fontSize: theme.tokens.typography.fontSizeSm,
+  color: $darkBg ? theme.palette.common.white : theme.tokens.colors.border,
+  marginTop: $inline ? 0 : theme.spacing(1),
+  marginLeft: $inline ? theme.spacing(1) : 0
+}));
+var StyledScreenReaderOnly3 = (0, import_styles15.styled)("span")({
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0,0,0,0)",
+  whiteSpace: "nowrap",
+  border: 0
+});
+
+// src/components/Spinner/Spinner.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Spinner = import_react9.default.forwardRef(
+  function Spinner2({ size = "sm", message, isOnDarkBg = false, srText, isInline = false, ...restProps }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      StyledSpinnerContainer,
+      {
+        ref,
+        $inline: isInline,
+        "data-component-id": "Spinner",
+        ...getCleanProps(restProps),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(StyledSpinnerIconContainer, { $size: size, "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledSpinnerBackground, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledSpinner, { $size: size, $darkBg: isOnDarkBg, "aria-hidden": "true" })
+          ] }),
+          message && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledSpinnerMessage2, { $darkBg: isOnDarkBg, $inline: isInline, children: message }),
+          srText && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledScreenReaderOnly3, { children: srText })
+        ]
+      }
+    );
+  }
+);
+Spinner.displayName = "ToolkitSpinner";
+
 // src/components/Toggle/Toggle.tsx
 var import_FormHelperText = __toESM(require("@mui/material/FormHelperText"));
 
 // src/components/Toggle/Toggle.styles.tsx
-var import_styles10 = require("@mui/material/styles");
-var StyledFieldset = (0, import_styles10.styled)("fieldset")(({ theme }) => ({
+var import_styles16 = require("@mui/material/styles");
+var StyledFieldset = (0, import_styles16.styled)("fieldset")(({ theme }) => ({
   border: "none",
   margin: 0,
   padding: 0,
   minWidth: 0
 }));
-var StyledLegend = (0, import_styles10.styled)("legend")(({ theme }) => ({
+var StyledLegend = (0, import_styles16.styled)("legend")(({ theme }) => ({
   fontFamily: theme.tokens.typography.fontFamilyBase,
   fontSize: theme.tokens.typography.fontSizeLg,
   fontWeight: theme.tokens.typography.fontWeightRegular,
@@ -2007,7 +2605,7 @@ var StyledLegend = (0, import_styles10.styled)("legend")(({ theme }) => ({
   marginBottom: theme.spacing(1),
   padding: 0
 }));
-var StyledToggleWrapper = (0, import_styles10.styled)("div")(({ theme }) => ({
+var StyledToggleWrapper = (0, import_styles16.styled)("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   width: theme.spacing(15),
@@ -2016,7 +2614,7 @@ var StyledToggleWrapper = (0, import_styles10.styled)("div")(({ theme }) => ({
   border: `1px solid ${theme.tokens.colors.border}`,
   borderRadius: theme.tokens.borderRadius.md
 }));
-var StyledSwitch = (0, import_styles10.styled)("label", {
+var StyledSwitch = (0, import_styles16.styled)("label", {
   shouldForwardProp: (prop) => prop !== "selected" && prop !== "controlType"
 })(({ theme, selected, controlType }) => ({
   position: "relative",
@@ -2106,7 +2704,7 @@ var StyledSwitch = (0, import_styles10.styled)("label", {
 }));
 
 // src/components/Toggle/Toggle.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Toggle({
   name,
   checked = false,
@@ -2117,18 +2715,18 @@ function Toggle({
   onBlur,
   ...restProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(StyledFieldset, { "data-component-id": "toggle", ...getCleanProps(restProps), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledLegend, { children: label }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_FormHelperText.default, { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(StyledToggleWrapper, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(StyledFieldset, { "data-component-id": "toggle", ...getCleanProps(restProps), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledLegend, { children: label }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_FormHelperText.default, { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(StyledToggleWrapper, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         StyledSwitch,
         {
           htmlFor: `${name}off`,
           selected: !checked,
           controlType: "off",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "input",
               {
                 checked: !checked,
@@ -2144,14 +2742,14 @@ function Toggle({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         StyledSwitch,
         {
           htmlFor: `${name}on`,
           selected: checked,
           controlType: "on",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "input",
               {
                 checked,
@@ -2168,44 +2766,44 @@ function Toggle({
         }
       )
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_FormHelperText.default, { error: true, children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_FormHelperText.default, { error: true, children: error })
   ] });
 }
 Toggle.displayName = "ToolkitToggle";
 
 // src/components/Table/Table.tsx
 var import_material10 = require("@mui/material");
-var import_styles11 = require("@mui/material/styles");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var StyledTableContainer = (0, import_styles11.styled)(import_material10.TableContainer)(() => ({
+var import_styles17 = require("@mui/material/styles");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var StyledTableContainer = (0, import_styles17.styled)(import_material10.TableContainer)(() => ({
   overflowX: "auto"
 }));
-var StyledHeadCell = (0, import_styles11.styled)(import_material10.TableCell)(({ theme }) => ({
+var StyledHeadCell = (0, import_styles17.styled)(import_material10.TableCell)(({ theme }) => ({
   fontWeight: theme.tokens.components.table.headerFontWeight,
   backgroundColor: theme.tokens.components.table.headerBackground,
   borderBottomWidth: theme.tokens.components.table.borderWidth,
   borderBottomColor: theme.tokens.components.table.borderColor
 }));
 function Table(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material10.Table, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material10.Table, { ...props });
 }
 function TableHead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material10.TableHead, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material10.TableHead, { ...props });
 }
 function TableBody(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material10.TableBody, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material10.TableBody, { ...props });
 }
 function TableRow(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material10.TableRow, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material10.TableRow, { ...props });
 }
 function TableCell(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material10.TableCell, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material10.TableCell, { ...props });
 }
 function TableHeadCell(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StyledHeadCell, { component: "th", scope: "col", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledHeadCell, { component: "th", scope: "col", ...props });
 }
 function TableContainer(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StyledTableContainer, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledTableContainer, { ...props });
 }
 var TablePagination = import_material10.TablePagination;
 var TableSortLabel = import_material10.TableSortLabel;
@@ -2218,107 +2816,146 @@ TableHeadCell.displayName = "ToolkitTableHeadCell";
 TableContainer.displayName = "ToolkitTableContainer";
 
 // src/foundation/H1/H1.tsx
+var import_react10 = __toESM(require("react"));
 var import_material11 = require("@mui/material");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-function H1({ color = "text.primary", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material11.Typography, { variant: "h1", color, ...props, children });
-}
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var H1 = import_react10.default.forwardRef(
+  function H12({ color = "text.primary", children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material11.Typography, { ref, variant: "h1", color, ...props, children });
+  }
+);
 H1.displayName = "ToolkitH1";
 
 // src/foundation/H2/H2.tsx
+var import_react11 = __toESM(require("react"));
 var import_material12 = require("@mui/material");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-function H2({ color = "text.primary", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material12.Typography, { variant: "h2", color, ...props, children });
-}
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var H2 = import_react11.default.forwardRef(
+  function H22({ color = "text.primary", children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_material12.Typography, { ref, variant: "h2", color, ...props, children });
+  }
+);
 H2.displayName = "ToolkitH2";
 
 // src/foundation/H3/H3.tsx
+var import_react12 = __toESM(require("react"));
 var import_material13 = require("@mui/material");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-function H3({ color = "text.primary", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material13.Typography, { variant: "h3", color, ...props, children });
-}
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var H3 = import_react12.default.forwardRef(
+  function H32({ color = "text.primary", children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material13.Typography, { ref, variant: "h3", color, ...props, children });
+  }
+);
 H3.displayName = "ToolkitH3";
 
 // src/foundation/H4/H4.tsx
+var import_react13 = __toESM(require("react"));
 var import_material14 = require("@mui/material");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-function H4({ color = "text.primary", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_material14.Typography, { variant: "h4", color, ...props, children });
-}
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var H4 = import_react13.default.forwardRef(
+  function H42({ color = "text.primary", children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material14.Typography, { ref, variant: "h4", color, ...props, children });
+  }
+);
 H4.displayName = "ToolkitH4";
 
 // src/foundation/H5/H5.tsx
+var import_react14 = __toESM(require("react"));
 var import_material15 = require("@mui/material");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-function H5({ color = "text.primary", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material15.Typography, { variant: "h5", color, ...props, children });
-}
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var H5 = import_react14.default.forwardRef(
+  function H52({ color = "text.primary", children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material15.Typography, { ref, variant: "h5", color, ...props, children });
+  }
+);
 H5.displayName = "ToolkitH5";
 
 // src/foundation/H6/H6.tsx
+var import_react15 = __toESM(require("react"));
 var import_material16 = require("@mui/material");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-function H6({ color = "text.primary", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material16.Typography, { variant: "h6", color, ...props, children });
-}
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var H6 = import_react15.default.forwardRef(
+  function H62({ color = "text.primary", children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material16.Typography, { ref, variant: "h6", color, ...props, children });
+  }
+);
 H6.displayName = "ToolkitH6";
 
 // src/foundation/Subtitle1/Subtitle1.tsx
+var import_react16 = __toESM(require("react"));
 var import_material17 = require("@mui/material");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-function Subtitle1({ color = "text.primary", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_material17.Typography, { variant: "subtitle1", color, ...props, children });
-}
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Subtitle1 = import_react16.default.forwardRef(
+  function Subtitle12({ color = "text.primary", children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_material17.Typography, { ref, variant: "subtitle1", color, ...props, children });
+  }
+);
 Subtitle1.displayName = "ToolkitSubtitle1";
 
 // src/foundation/Subtitle2/Subtitle2.tsx
+var import_react17 = __toESM(require("react"));
 var import_material18 = require("@mui/material");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function Subtitle2({ color = "text.primary", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_material18.Typography, { variant: "subtitle2", color, ...props, children });
-}
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Subtitle2 = import_react17.default.forwardRef(
+  function Subtitle22({ color = "text.primary", children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material18.Typography, { ref, variant: "subtitle2", color, ...props, children });
+  }
+);
 Subtitle2.displayName = "ToolkitSubtitle2";
 
 // src/foundation/Body1/Body1.tsx
+var import_react18 = __toESM(require("react"));
 var import_material19 = require("@mui/material");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-function Body1({ color = "text.primary", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_material19.Typography, { variant: "body1", color, ...props, children });
-}
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Body1 = import_react18.default.forwardRef(
+  function Body12({ color = "text.primary", children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_material19.Typography, { ref, variant: "body1", color, ...props, children });
+  }
+);
 Body1.displayName = "ToolkitBody1";
 
 // src/foundation/Body2/Body2.tsx
+var import_react19 = __toESM(require("react"));
 var import_material20 = require("@mui/material");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-function Body2({ color = "text.primary", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material20.Typography, { variant: "body2", color, ...props, children });
-}
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Body2 = import_react19.default.forwardRef(
+  function Body22({ color = "text.primary", children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_material20.Typography, { ref, variant: "body2", color, ...props, children });
+  }
+);
 Body2.displayName = "ToolkitBody2";
 
 // src/foundation/Caption/Caption.tsx
+var import_react20 = __toESM(require("react"));
 var import_material21 = require("@mui/material");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-function Caption({ color = "text.primary", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material21.Typography, { variant: "caption", color, ...props, children });
-}
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Caption = import_react20.default.forwardRef(
+  function Caption2({ color = "text.primary", children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material21.Typography, { ref, variant: "caption", color, ...props, children });
+  }
+);
 Caption.displayName = "ToolkitCaption";
 
 // src/foundation/Overline/Overline.tsx
+var import_react21 = __toESM(require("react"));
 var import_material22 = require("@mui/material");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-function Overline({ color = "text.primary", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_material22.Typography, { variant: "overline", color, ...props, children });
-}
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Overline = import_react21.default.forwardRef(
+  function Overline2({ color = "text.primary", children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_material22.Typography, { ref, variant: "overline", color, ...props, children });
+  }
+);
 Overline.displayName = "ToolkitOverline";
 
 // src/foundation/TypographyButton/TypographyButton.tsx
+var import_react22 = __toESM(require("react"));
 var import_material23 = require("@mui/material");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-function TypographyButton({ color = "text.primary", children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material23.Typography, { variant: "button", color, ...props, children });
-}
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var TypographyButton = import_react22.default.forwardRef(
+  function TypographyButton2({ color = "text.primary", children, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material23.Typography, { ref, variant: "button", color, ...props, children });
+  }
+);
 TypographyButton.displayName = "ToolkitTypographyButton";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -2359,10 +2996,15 @@ TypographyButton.displayName = "ToolkitTypographyButton";
   H6,
   InternalLinkItem,
   Link,
+  LogoLink,
   MobileDatePicker,
   MobileDateTimePicker,
   MobileTimePicker,
   Overline,
+  PageSpinner,
+  Pagination,
+  Paragraph,
+  Spinner,
   StandaloneAccordion,
   StaticDatePicker,
   StaticDateTimePicker,