@pantheon-systems/pds-toolkit-react 2.0.0-alpha.10 → 2.0.0-alpha.11

package/dist/index.js

@@ -1,20 +1,20 @@
-import e, { Children as L2, isValidElement as a1, useState as j, cloneElement as h1, useContext as C1, useCallback as m1, useEffect as K, createContext as b2, forwardRef as L1, useRef as t1, useLayoutEffect as F2, createElement as B2 } from "react";
+import e, { Children as L2, isValidElement as l1, useState as j, cloneElement as h1, useContext as C1, useCallback as m1, useEffect as K, createContext as b2, forwardRef as L1, useRef as t1, useLayoutEffect as A2, createElement as B2 } from "react";
 import R2 from "hash-sum";
-import { useFloating as H1, autoUpdate as A1, offset as M2, flip as r2, shift as w2, useHover as E2, useFocus as q2, useDismiss as F1, useRole as B1, useInteractions as R1, FloatingPortal as G2, useId as W2, useClick as $2, useTransitionStyles as _2, FloatingOverlay as U2, FloatingFocusManager as K2, useListNavigation as Y2, useTypeahead as X2, safePolygon as Q2 } from "@floating-ui/react";
+import { useFloating as H1, autoUpdate as T1, offset as M2, flip as r2, shift as w2, useHover as E2, useFocus as q2, useDismiss as A1, useRole as B1, useInteractions as R1, FloatingPortal as G2, useId as W2, useClick as $2, useTransitionStyles as _2, FloatingOverlay as U2, FloatingFocusManager as K2, useListNavigation as Y2, useTypeahead as X2, safePolygon as Q2 } from "@floating-ui/react";
 import J2 from "focus-trap-react";
 import { createPortal as e4 } from "react-dom";
-import { ToastContainer as t4, Slide as s4, cssTransition as a4, toast as g2 } from "react-toastify";
-import { useMeasure as l4 } from "@reactuses/core";
+import { ToastContainer as t4, Slide as s4, cssTransition as l4, toast as g2 } from "react-toastify";
+import { useMeasure as a4 } from "@reactuses/core";
 import './index.css';const c4 = () => Math.random().toString(32).substring(2, 13), p1 = (t) => {
-  const l = {}, a = [];
+  const a = {}, l = [];
   return L2.forEach(t, (c) => {
-    if (a1(c)) {
+    if (l1(c)) {
       const n = c.props.slot;
-      n ? l[n] ? l[n].push(c) : l[n] = [c] : a.push(c);
+      n ? a[n] ? a[n].push(c) : a[n] = [c] : l.push(c);
     } else
-      a.push(c);
-  }), a.length > 0 && (l.__unslotted = a), l;
-}, M = (t) => t.join(" ").trim().replace(/\s+/g, " "), n4 = (t) => t ? t.startsWith("data:") ? /^data:image\/(png|jpeg|jpg|gif|bmp|webp);base64,[A-Za-z0-9+/]+=*$/.test(t) : !0 : !1, p2 = {
+      l.push(c);
+  }), l.length > 0 && (a.__unslotted = l), a;
+}, w = (t) => t.join(" ").trim().replace(/\s+/g, " "), n4 = (t) => t ? t.startsWith("data:") ? /^data:image\/(png|jpeg|jpg|gif|bmp|webp);base64,[A-Za-z0-9+/]+=*$/.test(t) : !0 : !1, p2 = {
   boltPantheon: {
     height: 512,
     svgPathData: "M183.215 0L254.271 277.176H204.614L302 512L46.228 187.779H135.272L0 0.434418L144.526 0.459972L145.968 0H183.215Z",
@@ -1724,32 +1724,32 @@ import './index.css';const c4 = () => Math.random().toString(32).substring(2, 13
   "youtube"
 ], O = ({
   className: t,
-  display: l = "inline-block",
-  iconName: a,
+  display: a = "inline-block",
+  iconName: l,
   iconSize: c = "l",
   style: n,
   verticalAlign: s = "middle",
   ...i
 }) => {
-  const r = "pds-icon", d = `${r} ${r}--${c} ${r}--${a}`, o = i4[a], m = `0 0 ${o.width} ${o.height}`, z = a in p2 ? p2[a] : null;
-  let p;
-  if (z?.type === "complex")
-    p = z.render();
+  const r = "pds-icon", d = `${r} ${r}--${c} ${r}--${l}`, o = i4[l], m = `0 0 ${o.width} ${o.height}`, C = l in p2 ? p2[l] : null;
+  let g;
+  if (C?.type === "complex")
+    g = C.render();
   else {
-    const f = z?.type === "path" ? z.svgPathData : o.svgPathData;
-    p = Array.isArray(f) ? f.map((u, h) => /* @__PURE__ */ e.createElement("path", { key: h, d: u, fill: "currentColor" })) : /* @__PURE__ */ e.createElement("path", { d: f, fill: "currentColor" });
+    const f = C?.type === "path" ? C.svgPathData : o.svgPathData;
+    g = Array.isArray(f) ? f.map((u, h) => /* @__PURE__ */ e.createElement("path", { key: h, d: u, fill: "currentColor" })) : /* @__PURE__ */ e.createElement("path", { d: f, fill: "currentColor" });
   }
   return /* @__PURE__ */ e.createElement(
     "svg",
     {
       "aria-hidden": "true",
-      className: M([d, t ?? ""]),
+      className: w([d, t ?? ""]),
       fill: "none",
       focusable: "false",
       preserveAspectRatio: "xMidYMid meet",
       role: "img",
       style: {
-        display: l,
+        display: a,
         verticalAlign: s,
         ...n
       },
@@ -1757,7 +1757,7 @@ import './index.css';const c4 = () => Math.random().toString(32).substring(2, 13
       xmlns: "http://www.w3.org/2000/svg",
       ...i
     },
-    p
+    g
   );
 }, f2 = [
   "dawn",
@@ -1777,19 +1777,19 @@ import './index.css';const c4 = () => Math.random().toString(32).substring(2, 13
   "twilight",
   "winter"
 ], r4 = (t) => {
-  const l = parseInt(R2(t), 16);
-  return f2[l % f2.length];
+  const a = parseInt(R2(t), 16);
+  return f2[a % f2.length];
 }, i0 = ({
   ariaLabel: t,
-  className: l,
-  hasUserFallback: a = !1,
+  className: a,
+  hasUserFallback: l = !1,
   imageSrc: c,
   linkContent: n,
   size: s = "s",
   uniqueId: i,
   ...r
 }) => {
-  const d = "pds-avatar", o = `${d}--${s}`, m = c ? `${d}--image` : null, [z, p] = j(void 0), u = {
+  const d = "pds-avatar", o = `${d}--${s}`, m = c ? `${d}--image` : null, [C, g] = j(void 0), u = {
     backgroundImage: i ? `var(--pds-gradient-avatar-${r4(i)})` : null,
     borderRadius: "100%",
     height: "100%",
@@ -1797,16 +1797,16 @@ import './index.css';const c4 = () => Math.random().toString(32).substring(2, 13
     display: "flex",
     alignItems: "center",
     justifyContent: "center"
-  }, h = n4(c) && !z ? /* @__PURE__ */ e.createElement(
+  }, h = n4(c) && !C ? /* @__PURE__ */ e.createElement(
     "img",
     {
       alt: "",
       className: `${d}__image`,
-      onError: () => p(!0),
-      onLoad: () => p(!1),
+      onError: () => g(!0),
+      onLoad: () => g(!1),
       src: `${c}`
     }
-  ) : /* @__PURE__ */ e.createElement("span", { style: u }, a && /* @__PURE__ */ e.createElement(O, { className: `${d}__user-icon`, iconName: "user" })), w = /* @__PURE__ */ e.createElement("span", { className: `${d}__content` }, h), g = n && a1(n) ? h1(
+  ) : /* @__PURE__ */ e.createElement("span", { style: u }, l && /* @__PURE__ */ e.createElement(O, { className: `${d}__user-icon`, iconName: "user" })), M = /* @__PURE__ */ e.createElement("span", { className: `${d}__content` }, h), v = n && l1(n) ? h1(
     n,
     Object.assign({}, n.props, {
       className: `${d}__content ${d}__content--link`,
@@ -1817,23 +1817,23 @@ import './index.css';const c4 = () => Math.random().toString(32).substring(2, 13
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([d, o, m, l]),
+      className: w([d, o, m, a]),
       ...r
     },
-    n ? g : w
+    n ? v : M
   );
 }, r0 = ({
   className: t,
-  color: l = "gaia",
-  label: a,
+  color: a = "gaia",
+  label: l,
   size: c = "m",
   ...n
 }) => {
-  const s = "pds-badge", i = `${s}--${l}`, r = c !== "m" ? `${s}--${c}` : null;
+  const s = "pds-badge", i = `${s}--${a}`, r = c !== "m" ? `${s}--${c}` : null;
   return /* @__PURE__ */ e.createElement(
     "span",
     {
-      className: M([
+      className: w([
         s,
         i,
         r,
@@ -1841,31 +1841,31 @@ import './index.css';const c4 = () => Math.random().toString(32).substring(2, 13
       ]),
       ...n
     },
-    /* @__PURE__ */ e.createElement("span", { className: `${s}__label` }, a)
+    /* @__PURE__ */ e.createElement("span", { className: `${s}__label` }, l)
   );
 }, o4 = ({
   className: t,
-  color: l = "transparent",
-  hasStatusIndicator: a = !1,
+  color: a = "transparent",
+  hasStatusIndicator: l = !1,
   label: c,
   statusIndicatorText: n = "Status indicator: ",
   statusType: s,
   ...i
 }) => {
-  const r = "pds-status-badge", d = `${r}--${l}`, o = `${r}__status`, m = s ? `${o}--${s}` : null;
+  const r = "pds-status-badge", d = `${r}--${a}`, o = `${r}__status`, m = s ? `${o}--${s}` : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([r, d, t ?? ""]),
+      className: w([r, d, t ?? ""]),
       ...i
     },
-    a === !0 && /* @__PURE__ */ e.createElement("span", { className: M([o, m]) }, s && /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, n, " ", s)),
+    l === !0 && /* @__PURE__ */ e.createElement("span", { className: w([o, m]) }, s && /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, n, " ", s)),
     /* @__PURE__ */ e.createElement("span", { className: `${r}__label` }, c)
   );
 }, y2 = ({
   className: t,
-  label: l,
-  size: a = "s",
+  label: a,
+  size: l = "s",
   type: c = "neutral",
   typeLabels: n = {
     info: "Information",
@@ -1876,11 +1876,11 @@ import './index.css';const c4 = () => Math.random().toString(32).substring(2, 13
   },
   ...s
 }) => {
-  const i = "pds-tally", r = `${i}--${c}`, d = `${i}--${a}`, o = `${n[c]}: `;
+  const i = "pds-tally", r = `${i}--${c}`, d = `${i}--${l}`, o = `${n[c]}: `;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([
+      className: w([
         i,
         r,
         d,
@@ -1888,26 +1888,26 @@ import './index.css';const c4 = () => Math.random().toString(32).substring(2, 13
       ]),
       ...s
     },
-    /* @__PURE__ */ e.createElement("div", { className: `${i}__label` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, o), l)
+    /* @__PURE__ */ e.createElement("div", { className: `${i}__label` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, o), a)
   );
 };
 y2.displayName = "Tally";
 const o2 = (t) => {
   if (typeof t == "string" || typeof t == "number")
     return String(t);
-  if (a1(t)) {
-    const l = t.props;
-    return L2.toArray(l.children).map(o2).join("");
+  if (l1(t)) {
+    const a = t.props;
+    return L2.toArray(a.children).map(o2).join("");
   }
   return "";
 }, d4 = 768, m4 = 1280, h4 = 1440, u4 = "5rem", g4 = "4rem", p4 = "3rem", f4 = "2.5rem", v4 = "2rem", z4 = "1.5rem", k2 = "1.25rem", x2 = "1rem", n2 = "0.75rem", D1 = "0.625rem", Y1 = 500, C4 = 700, P1 = "0.75rem", v2 = "0.875rem", z2 = "1rem", N2 = b2(null), L4 = ({
   children: t
 }) => {
-  const [l, a] = j(0), c = m1(() => {
-    a((r) => r + 1);
+  const [a, l] = j(0), c = m1(() => {
+    l((r) => r + 1);
   }, []), n = m1(() => {
-    a((r) => Math.max(0, r - 1));
-  }, []), s = l > 0;
+    l((r) => Math.max(0, r - 1));
+  }, []), s = a > 0;
   K(() => {
     if (!s)
       return;
@@ -1931,22 +1931,22 @@ const o2 = (t) => {
       "useOverlayContext must be used within OverlayContextProvider"
     );
   return t;
-}, b4 = (t, l, a) => {
+}, b4 = (t, a, l) => {
   const {
     altKey: c = !1,
     ctrlKey: n = !1,
     enabled: s = !0,
     metaKey: i = !1,
     shiftKey: r = !1
-  } = a ?? {}, [d, o] = j(!1), m = m1(
+  } = l ?? {}, [d, o] = j(!1), m = m1(
     (f) => f.altKey === c && f.ctrlKey === n && f.metaKey === i && f.shiftKey === r,
     [c, n, i, r]
-  ), z = m1(
+  ), C = m1(
     (f) => {
-      f.key === t && m(f) && (o(!0), l && l(f));
+      f.key === t && m(f) && (o(!0), a && a(f));
     },
-    [t, l, m]
-  ), p = m1(
+    [t, a, m]
+  ), g = m1(
     (f) => {
       f.key === t && m(f) && o(!1);
     },
@@ -1954,14 +1954,14 @@ const o2 = (t) => {
   );
   return K(() => {
     if (s)
-      return window.addEventListener("keydown", z), window.addEventListener("keyup", p), () => {
-        window.removeEventListener("keydown", z), window.removeEventListener("keyup", p);
+      return window.addEventListener("keydown", C), window.addEventListener("keyup", g), () => {
+        window.removeEventListener("keydown", C), window.removeEventListener("keyup", g);
       };
-  }, [z, p, s]), d;
+  }, [C, g, s]), d;
 }, I1 = ({
   className: t,
-  content: l,
-  customTrigger: a = null,
+  content: a,
+  customTrigger: l = null,
   offsetValue: c = 6,
   preferredPlacement: n = "top",
   triggerAccessibleText: s = "Show more information",
@@ -1971,42 +1971,42 @@ const o2 = (t) => {
   zIndex: o = C4,
   ...m
 }) => {
-  const [z, p] = j(!1), f = typeof a, u = "pds-tooltip", h = M([
+  const [C, g] = j(!1), f = typeof l, u = "pds-tooltip", h = w([
     `${u}__trigger-custom`,
     f === "string" ? `${u}__trigger-text` : null
-  ]), w = M([
+  ]), M = w([
     `${u}__trigger`,
     `${u}__trigger--${r}`
-  ]), { context: g, floatingStyles: C, refs: L } = H1({
+  ]), { context: v, floatingStyles: z, refs: L } = H1({
     placement: n,
-    open: z,
-    onOpenChange: p,
+    open: C,
+    onOpenChange: g,
     middleware: [M2(c), r2(), w2()],
-    whileElementsMounted: A1
-  }), _ = E2(g, {
+    whileElementsMounted: T1
+  }), $ = E2(v, {
     restMs: 300,
     delay: { open: 100, close: 0 },
     move: !1
-  }), D = q2(g), k = F1(g), y = B1(g, { role: "tooltip" }), { getFloatingProps: v, getReferenceProps: x } = R1([
-    _,
+  }), D = q2(v), k = A1(v), y = B1(v, { role: "tooltip" }), { getFloatingProps: p, getReferenceProps: x } = R1([
+    $,
     D,
     k,
     y
   ]);
-  return /* @__PURE__ */ e.createElement("div", { className: M([u, t ?? ""]), ...m }, a ? /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: w([u, t ?? ""]), ...m }, l ? /* @__PURE__ */ e.createElement(
     "span",
     {
       ref: L.setReference,
       className: h,
       ...x()
     },
-    a
+    l
   ) : /* @__PURE__ */ e.createElement(
     "button",
     {
       ref: L.setReference,
       "aria-label": s,
-      className: w,
+      className: M,
       type: "button",
       ...x()
     },
@@ -2022,20 +2022,20 @@ const o2 = (t) => {
     "div",
     {
       ref: L.setFloating,
-      "aria-hidden": !z,
+      "aria-hidden": !C,
       className: `${u}__container`,
       style: {
-        ...C,
+        ...z,
         zIndex: o,
-        opacity: z ? 1 : 0,
-        pointerEvents: z ? "auto" : "none",
+        opacity: C ? 1 : 0,
+        pointerEvents: C ? "auto" : "none",
         transition: "var(--pds-animation-transition-reveal)"
       },
-      ...v()
+      ...p()
     },
-    l
+    a
   )));
-}, A = {
+}, T = {
   base: "pds-input",
   disabled: "pds-is-disabled",
   required: "pds-is-required",
@@ -2051,8 +2051,8 @@ const o2 = (t) => {
   }
 )), V1 = ({
   className: t,
-  disabled: l,
-  id: a,
+  disabled: a,
+  id: l,
   isLegend: c,
   isPseudoLabel: n,
   label: s,
@@ -2060,27 +2060,27 @@ const o2 = (t) => {
   showLabel: r = !0,
   tooltipText: d = null
 }) => {
-  const o = M([
+  const o = w([
     "pds-input-label",
     r ? null : "visually-hidden",
     t ?? ""
-  ]), m = /* @__PURE__ */ e.createElement(e.Fragment, null, s, i && !l && /* @__PURE__ */ e.createElement(D2, null), d && /* @__PURE__ */ e.createElement(I1, { content: d }, /* @__PURE__ */ e.createElement("span", null, /* @__PURE__ */ e.createElement(O, { iconName: "circleInfo", iconSize: "s" }))));
-  return c ? /* @__PURE__ */ e.createElement("legend", { className: o, id: `${a}-legend` }, m) : n ? /* @__PURE__ */ e.createElement("span", { className: o, id: `${a}-field-label` }, m) : /* @__PURE__ */ e.createElement("label", { className: o, htmlFor: a, id: `${a}-label` }, m);
+  ]), m = /* @__PURE__ */ e.createElement(e.Fragment, null, s, i && !a && /* @__PURE__ */ e.createElement(D2, null), d && /* @__PURE__ */ e.createElement(I1, { content: d }, /* @__PURE__ */ e.createElement("span", null, /* @__PURE__ */ e.createElement(O, { iconName: "circleInfo", iconSize: "s" }))));
+  return c ? /* @__PURE__ */ e.createElement("legend", { className: o, id: `${l}-legend` }, m) : n ? /* @__PURE__ */ e.createElement("span", { className: o, id: `${l}-field-label` }, m) : /* @__PURE__ */ e.createElement("label", { className: o, htmlFor: l, id: `${l}-label` }, m);
 }, b1 = ({
   className: t,
-  forInputGroup: l = !1,
-  hasValidationMessage: a,
+  forInputGroup: a = !1,
+  hasValidationMessage: l,
   id: c,
   message: n,
   validationMessageHasDecorators: s,
   validationStatus: i
 }) => {
-  const r = "pds-input-message", d = i && a ? `${r}--${i}` : null;
+  const r = "pds-input-message", d = i && l ? `${r}--${i}` : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([r, d, t ?? ""]),
-      id: l ? `${c}__message-hidden` : `${c}__message`,
+      className: w([r, d, t ?? ""]),
+      id: a ? `${c}__message-hidden` : `${c}__message`,
       role: i === "error" ? "alert" : null
     },
     s && i && /* @__PURE__ */ e.createElement(P2, { variant: i }),
@@ -2092,68 +2092,68 @@ const o2 = (t) => {
   success: "check",
   filter: "barsFilter"
 }, P2 = ({ variant: t }) => {
-  const l = "pds-input-prefix";
-  return /* @__PURE__ */ e.createElement("div", { className: M([l, `${l}--${t}`]) }, /* @__PURE__ */ e.createElement(
+  const a = "pds-input-prefix";
+  return /* @__PURE__ */ e.createElement("div", { className: w([a, `${a}--${t}`]) }, /* @__PURE__ */ e.createElement(
     O,
     {
-      className: `${l}__icon`,
+      className: `${a}__icon`,
       iconName: M4[t],
       iconSize: "m"
     }
   ));
 }, w4 = ({
   inputId: t,
-  shortcutLabel: l
+  shortcutLabel: a
 }) => {
-  const { hasOpenOverlay: a } = d2();
+  const { hasOpenOverlay: l } = d2();
   return b4("/", (n) => {
     const s = document.getElementById(t);
     s && s.focus(), n.preventDefault();
   }, {
-    enabled: !a
-  }), /* @__PURE__ */ e.createElement("div", { className: "pds-input-search-shortcut" }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, l), /* @__PURE__ */ e.createElement(O, { iconName: "slashForward", iconSize: "s" }));
+    enabled: !l
+  }), /* @__PURE__ */ e.createElement("div", { className: "pds-input-search-shortcut" }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, a), /* @__PURE__ */ e.createElement(O, { iconName: "slashForward", iconSize: "s" }));
 }, E4 = ({
   clearLabel: t,
-  handleClearInput: l,
-  id: a
+  handleClearInput: a,
+  id: l
 }) => /* @__PURE__ */ e.createElement(
   "button",
   {
-    "aria-controls": a,
+    "aria-controls": l,
     className: "pds-input-clear-button",
-    onClick: l,
+    onClick: a,
     title: t,
     type: "button"
   },
   /* @__PURE__ */ e.createElement(O, { iconName: "xmark", iconSize: "m" })
 ), S2 = ({
   currentLength: t,
-  id: l,
-  maxLength: a,
+  id: a,
+  maxLength: l,
   overLimitMessage: c = "Character limit exceeded by"
 }) => {
-  const n = t > a, s = t - a, i = "pds-input-character-counter", r = n ? `${i}--overLimit` : null;
+  const n = t > l, s = t - l, i = "pds-input-character-counter", r = n ? `${i}--overLimit` : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([i, r]),
-      id: `${l}__counter`
+      className: w([i, r]),
+      id: `${a}__counter`
     },
     t,
     "/",
-    a,
+    l,
     /* @__PURE__ */ e.createElement("span", { "aria-live": "polite", className: "visually-hidden" }, n && `${c} ${s}`)
   );
-}, $4 = ({ label: t, ...l }) => /* @__PURE__ */ e.createElement("span", { className: "visually-hidden", ...l }, t);
+}, $4 = ({ label: t, ...a }) => /* @__PURE__ */ e.createElement("span", { className: "visually-hidden", ...a }, t);
 L1(
-  ({ children: t, className: l, isActive: a, ...c }, n) => {
-    const s = W2(), i = "pds-input__select-option", r = a ? `${i}--active` : null;
+  ({ children: t, className: a, isActive: l, ...c }, n) => {
+    const s = W2(), i = "pds-input__select-option", r = l ? `${i}--active` : null;
     return /* @__PURE__ */ e.createElement(
       "li",
       {
         ref: n,
-        "aria-selected": a,
-        className: M([i, r, l ?? ""]),
+        "aria-selected": l,
+        className: w([i, r, a ?? ""]),
         id: s,
         role: "option",
         ...c
@@ -2194,37 +2194,37 @@ const _4 = {
   "6xl": k2
 }, j1 = ({
   className: t = "",
-  colorType: l = "full-color",
-  isInline: a = !1,
+  colorType: a = "full-color",
+  isInline: l = !1,
   label: c = "Loading",
   showLabel: n = !1,
   size: s = "3xl",
   ...i
 }) => {
-  const r = "pds-spinner", d = l !== "full-color" ? `${r}--${l}` : null, o = a ? `${r}--inline` : null, m = _4[s], z = y4[s], p = k4[s], f = Math.ceil(parseFloat(m) * 16 * 0.13), u = {
+  const r = "pds-spinner", d = a !== "full-color" ? `${r}--${a}` : null, o = l ? `${r}--inline` : null, m = _4[s], C = y4[s], g = k4[s], f = Math.ceil(parseFloat(m) * 16 * 0.13), u = {
     "--spinner-size": m,
     "--spinner-line": `${f}px`
   }, h = {
-    fontSize: z,
-    marginBlockStart: p
+    fontSize: C,
+    marginBlockStart: g
   };
   return /* @__PURE__ */ e.createElement(
     "span",
     {
       "aria-hidden": "true",
-      className: M([r, d, o, t]),
+      className: w([r, d, o, t]),
       role: "status",
       style: u,
       ...i
     },
     /* @__PURE__ */ e.createElement("span", { className: `${r}__icon` }),
-    n && !a ? /* @__PURE__ */ e.createElement("span", { className: `${r}__label`, style: h }, c) : /* @__PURE__ */ e.createElement($4, { label: c })
+    n && !l ? /* @__PURE__ */ e.createElement("span", { className: `${r}__label`, style: h }, c) : /* @__PURE__ */ e.createElement($4, { label: c })
   );
 }, q1 = L1(
   ({
     ariaLabel: t,
-    buttonType: l = "button",
-    className: a = "",
+    buttonType: a = "button",
+    className: l = "",
     disabled: c = !1,
     displayType: n = "label-only",
     iconName: s,
@@ -2233,29 +2233,29 @@ const _4 = {
     isSplitButton: d = !1,
     isWorking: o = !1,
     label: m,
-    onClick: z,
-    size: p = "s",
+    onClick: C,
+    size: g = "s",
     tooltipText: f,
     variant: u = "primary",
     ...h
-  }, w) => {
-    const g = "pds-button", C = `${g}--${p}`, L = `${g}--${u}`, _ = i ? `${g}--full-width` : null, D = r ? `${g}--loading` : null, k = r ? "pds-pulse" : null;
-    let y, v;
-    switch (p) {
+  }, M) => {
+    const v = "pds-button", z = `${v}--${g}`, L = `${v}--${u}`, $ = i ? `${v}--full-width` : null, D = r ? `${v}--loading` : null, k = r ? "pds-pulse" : null;
+    let y, p;
+    switch (g) {
       case "xs":
-        y = "s", v = "s";
+        y = "s", p = "s";
         break;
       case "s":
-        y = "m", v = "m";
+        y = "m", p = "m";
         break;
       case "m":
-        y = "m", v = "m";
+        y = "m", p = "m";
         break;
       case "l":
-        y = "m", v = "l";
+        y = "m", p = "l";
         break;
       case "xl":
-        y = "l", v = "l";
+        y = "l", p = "l";
         break;
     }
     let x = "monochromatic";
@@ -2264,7 +2264,7 @@ const _4 = {
       O,
       {
         key: "icon",
-        className: `${g}__icon`,
+        className: `${v}__icon`,
         iconName: s,
         iconSize: y
       }
@@ -2274,28 +2274,28 @@ const _4 = {
     const Z = /* @__PURE__ */ e.createElement(
       "button",
       {
-        ref: w,
+        ref: M,
         "aria-label": t,
-        className: M([
-          g,
-          C,
+        className: w([
+          v,
+          z,
           L,
-          _,
+          $,
           D,
           k,
-          a
+          l
         ]),
         disabled: c || r || o,
-        onClick: z,
-        type: l,
+        onClick: C,
+        type: a,
         ...h
       },
       o && !r && /* @__PURE__ */ e.createElement(
         j1,
         {
-          className: `${g}__working-indicator`,
+          className: `${v}__working-indicator`,
           colorType: x,
-          size: v
+          size: p
         }
       ),
       E
@@ -2304,8 +2304,8 @@ const _4 = {
   }
 ), x4 = ({
   className: t,
-  disabled: l = !1,
-  displayType: a = "label-only",
+  disabled: a = !1,
+  displayType: l = "label-only",
   iconName: c,
   linkContent: n,
   size: s = "s",
@@ -2313,11 +2313,11 @@ const _4 = {
   variant: r = "primary",
   ...d
 }) => {
-  const o = "pds-button-link", m = "pds-button", z = `${m}--${s}`, p = `${m}--${r}`, f = M([
+  const o = "pds-button-link", m = "pds-button", C = `${m}--${s}`, g = `${m}--${r}`, f = w([
     m,
-    z,
-    p
-  ]), u = a1(n) ? n.props.children : null;
+    C,
+    g
+  ]), u = l1(n) ? n.props.children : null;
   let h;
   switch (s) {
     case "xs":
@@ -2339,7 +2339,7 @@ const _4 = {
       h = "m";
       break;
   }
-  const w = /* @__PURE__ */ e.createElement(
+  const M = /* @__PURE__ */ e.createElement(
     O,
     {
       key: c,
@@ -2348,47 +2348,47 @@ const _4 = {
       iconSize: h
     }
   );
-  let g = [u];
-  a === "icon-start" && c ? g = [w, u] : a === "icon-end" && c && (g = [u, w]);
-  const C = a1(n) ? h1(
+  let v = [u];
+  l === "icon-start" && c ? v = [M, u] : l === "icon-end" && c && (v = [u, M]);
+  const z = l1(n) ? h1(
     n,
     Object.assign({}, n.props, {
       className: f,
-      children: g
+      children: v
     })
   ) : null;
-  return l ? /* @__PURE__ */ e.createElement(
+  return a ? /* @__PURE__ */ e.createElement(
     q1,
     {
       disabled: !0,
-      className: M([o, t ?? ""]),
-      label: g,
+      className: w([o, t ?? ""]),
+      label: v,
       size: s,
       tooltipText: i ?? null,
       variant: r
     }
-  ) : /* @__PURE__ */ e.createElement("span", { className: M([o, t ?? ""]), ...d }, C);
-}, N4 = (t, l) => {
-  const [a, c] = j(!1), n = l?.duration;
+  ) : /* @__PURE__ */ e.createElement("span", { className: w([o, t ?? ""]), ...d }, z);
+}, N4 = (t, a) => {
+  const [l, c] = j(!1), n = a?.duration;
   return K(() => {
     let i;
-    return a && n && (i = setTimeout(() => {
+    return l && n && (i = setTimeout(() => {
       c(!1);
     }, n)), () => {
       i && clearTimeout(i);
     };
-  }, [a, n]), [a, async () => {
+  }, [l, n]), [l, async () => {
     if (navigator.clipboard)
       try {
         await navigator.clipboard.writeText(t), c(!0);
       } catch {
       }
   }];
-}, T1 = L1(
+}, F1 = L1(
   ({
     ariaLabel: t,
-    buttonType: l = "button",
-    className: a,
+    buttonType: a = "button",
+    className: l,
     disabled: c = !1,
     hasTooltip: n = !0,
     icon2Name: s = null,
@@ -2397,105 +2397,105 @@ const _4 = {
     size: d = "s",
     variant: o = "standard",
     ...m
-  }, z) => {
-    const p = "pds-icon-button", f = d !== "s" ? `${p}--${d}` : null, u = o !== "standard" ? `${p}--${o}` : null, h = {
-      fadeOut: `${p}--fadeOut`,
-      hide: `${p}--hide`,
-      scaleIn: `${p}--scaleIn`
+  }, C) => {
+    const g = "pds-icon-button", f = d !== "s" ? `${g}--${d}` : null, u = o !== "standard" ? `${g}--${o}` : null, h = {
+      fadeOut: `${g}--fadeOut`,
+      hide: `${g}--hide`,
+      scaleIn: `${g}--scaleIn`
     };
-    let w, g;
+    let M, v;
     switch (d) {
       case "s":
-        g = "m", w = 8;
+        v = "m", M = 8;
         break;
       case "m":
-        g = "l", w = 11;
+        v = "l", M = 11;
         break;
       default:
-        g = "m", w = 8;
+        v = "m", M = 8;
         break;
     }
-    const C = s !== null, L = t1(null), _ = t1(null), D = () => {
-      L.current.classList.add(h.fadeOut), L.current.classList.add(h.hide), _.current.classList.remove(h.hide), _.current.classList.add(h.scaleIn), setTimeout(() => {
+    const z = s !== null, L = t1(null), $ = t1(null), D = () => {
+      L.current.classList.add(h.fadeOut), L.current.classList.add(h.hide), $.current.classList.remove(h.hide), $.current.classList.add(h.scaleIn), setTimeout(() => {
         L.current.classList.remove(
           h.fadeOut,
           h.hide
-        ), L.current.classList.add(h.scaleIn), _.current.classList.remove(h.scaleIn), _.current.classList.add(h.hide);
+        ), L.current.classList.add(h.scaleIn), $.current.classList.remove(h.scaleIn), $.current.classList.add(h.hide);
       }, 2e3);
-    }, k = (v) => {
-      C && D(), r && r(v);
-    }, y = C ? /* @__PURE__ */ e.createElement("div", { className: `${p}__content` }, /* @__PURE__ */ e.createElement("div", { ref: L, className: `${p}__icon-wrapper` }, /* @__PURE__ */ e.createElement(
+    }, k = (p) => {
+      z && D(), r && r(p);
+    }, y = z ? /* @__PURE__ */ e.createElement("div", { className: `${g}__content` }, /* @__PURE__ */ e.createElement("div", { ref: L, className: `${g}__icon-wrapper` }, /* @__PURE__ */ e.createElement(
       O,
       {
-        className: `${p}__icon`,
+        className: `${g}__icon`,
         iconName: i,
-        iconSize: g
+        iconSize: v
       }
     )), /* @__PURE__ */ e.createElement(
       "div",
       {
-        ref: _,
-        className: `${p}__icon-wrapper ${h.hide}`
+        ref: $,
+        className: `${g}__icon-wrapper ${h.hide}`
       },
       /* @__PURE__ */ e.createElement(
         O,
         {
-          className: `${p}__icon`,
+          className: `${g}__icon`,
           iconName: s,
-          iconSize: g
+          iconSize: v
         }
       )
-    )) : /* @__PURE__ */ e.createElement("div", { className: `${p}__content` }, /* @__PURE__ */ e.createElement(
+    )) : /* @__PURE__ */ e.createElement("div", { className: `${g}__content` }, /* @__PURE__ */ e.createElement(
       O,
       {
-        className: `${p}__icon`,
+        className: `${g}__icon`,
         iconName: i,
-        iconSize: g
+        iconSize: v
       }
     ));
     return /* @__PURE__ */ e.createElement(
       "button",
       {
-        ref: z,
+        ref: C,
         "aria-label": t,
-        className: M([
-          p,
+        className: w([
+          g,
           f,
           u,
-          a
+          l
         ]),
         disabled: c,
         onClick: k,
         title: n && !c ? null : t,
-        type: l,
+        type: a,
         ...m
       },
       n && !c ? /* @__PURE__ */ e.createElement(
         I1,
         {
-          className: `${p}__tooltip`,
+          className: `${g}__tooltip`,
           content: t,
           customTrigger: y,
-          offsetValue: w
+          offsetValue: M
         }
       ) : y
     );
   }
 ), o0 = ({
   ariaLabel: t = "Copy to clipboard",
-  className: l,
-  clipboardText: a = "",
+  className: a,
+  clipboardText: l = "",
   disabled: c,
   variant: n = "standard",
   ...s
 }) => {
-  const i = "pds-clipboard-button", [r, d] = N4(a);
+  const i = "pds-clipboard-button", [r, d] = N4(l);
   return /* @__PURE__ */ e.createElement(
-    T1,
+    F1,
     {
       ariaLabel: t,
       buttonType: "button",
-      className: M([i, l ?? ""]),
+      className: w([i, a ?? ""]),
       disabled: c,
       icon2Name: "check",
       iconName: "copy",
@@ -2507,8 +2507,8 @@ const _4 = {
   );
 }, G1 = ({
   ariaLabel: t = "Close",
-  className: l,
-  onClick: a,
+  className: a,
+  onClick: l,
   size: c = "l",
   ...n
 }) => {
@@ -2517,8 +2517,8 @@ const _4 = {
     "button",
     {
       "aria-label": t,
-      className: M([s, i, l ?? ""]),
-      onClick: a,
+      className: w([s, i, a ?? ""]),
+      onClick: l,
       type: "button",
       ...n
     },
@@ -2553,35 +2553,35 @@ const _4 = {
   gatsby: "bolt",
   nextjs: "bolt"
 }, H2 = () => {
-  const t = typeof window < "u", [l, a] = j(
+  const t = typeof window < "u", [a, l] = j(
     t && window.innerWidth !== void 0 ? window.innerWidth : 1024
   );
   return K(() => {
     if (!t) return;
-    a(window.innerWidth);
+    l(window.innerWidth);
     const c = () => {
-      a(window.innerWidth);
+      l(window.innerWidth);
     };
     return window.addEventListener("resize", c), () => {
       window.removeEventListener("resize", c);
     };
-  }, []), l;
+  }, []), a;
 }, M1 = b2(null), S4 = ({
   children: t,
-  mobileMenuMaxWidth: l = 640
+  mobileMenuMaxWidth: a = 640
 }) => {
-  const a = H2(), c = a <= l, n = {
+  const l = H2(), c = l <= a, n = {
     isMobile: c,
-    mobileMenuMaxWidth: l,
-    windowWidth: a
+    mobileMenuMaxWidth: a,
+    windowWidth: l
   };
   return K(() => {
     c ? document.body.classList.add("pds-no-scroll-x") : document.body.classList.remove("pds-no-scroll-x");
   }, [c]), /* @__PURE__ */ e.createElement(M1.Provider, { value: n }, t);
 }, H4 = ({
   className: t,
-  disabled: l,
-  displayType: a = "icon-end",
+  disabled: a,
+  displayType: l = "icon-end",
   iconName: c = "ellipsisVertical",
   id: n,
   isSplitButton: s = !1,
@@ -2590,68 +2590,68 @@ const _4 = {
   menuPosition: d = "start",
   onClick: o,
   size: m = "s",
-  testId: z,
-  undefinedLabel: p = "Unlabeled group",
+  testId: C,
+  undefinedLabel: g = "Unlabeled group",
   variant: f = "primary",
   withinNavbar: u,
   ...h
 }) => {
-  const { placement: w, refs: g, strategy: C, x: L, y: _ } = H1({
+  const { placement: M, refs: v, strategy: z, x: L, y: $ } = H1({
     placement: "bottom-start",
     middleware: [r2()],
-    whileElementsMounted: A1
+    whileElementsMounted: T1
   });
   let D = !1;
   const k = C1(M1);
   k && (D = k.isMobile);
-  const y = f === "navbar" && D, v = "pds-menu-button", x = y ? `${v}--isMobile` : null, P = u ? `${v}--navbar` : null, N = n, [E] = j(`menu-button-${n}`), Z = g.floating, H = t1(null), [$, F] = j(!1), [W, Q] = j(!1), [U, l1] = j(""), [s1, c1] = j(0), n1 = t1([]), T = t1([]), B = t1([]);
-  F2(() => {
+  const y = f === "navbar" && D, p = "pds-menu-button", x = y ? `${p}--isMobile` : null, P = u ? `${p}--navbar` : null, N = n, [E] = j(`menu-button-${n}`), Z = v.floating, S = t1(null), [_, A] = j(!1), [W, Q] = j(!1), [U, a1] = j(""), [s1, c1] = j(0), n1 = t1([]), F = t1([]), B = t1([]);
+  A2(() => {
     window.addEventListener("mousedown", $1, !0);
     const b = Z.current;
-    return b && (b.dataset.fuiPlacement = w), W && (setTimeout(() => {
+    return b && (b.dataset.fuiPlacement = M), W && (setTimeout(() => {
       b.focus();
     }, 0), Q(!1)), () => {
       window.removeEventListener("mousedown", $1, !0);
     };
-  }, [$, w]);
+  }, [_, M]);
   const X = (b, R) => {
-    l1(b), c1(R);
+    a1(b), c1(R);
   }, e1 = () => {
-    F(!0), Q(!0);
+    A(!0), Q(!0);
   }, i1 = () => {
-    F(!1), X(void 0, -1), H.current?.querySelector(
+    A(!1), X(void 0, -1), S.current?.querySelector(
       `#${N}`
     )?.focus();
   }, w1 = (b) => {
     b = b.toLowerCase();
     let R = !1;
-    for (let S = s1 + 1; S < B.current.length; S++)
-      if (B.current[S].label.toLowerCase().startsWith(b)) {
-        X(T.current[S], S), R = !0;
+    for (let H = s1 + 1; H < B.current.length; H++)
+      if (B.current[H].label.toLowerCase().startsWith(b)) {
+        X(F.current[H], H), R = !0;
         break;
       }
     if (R === !1) {
-      for (let S = 0; S < s1; S++)
-        if (B.current[S].label.toLowerCase().startsWith(b)) {
-          X(T.current[S], S);
+      for (let H = 0; H < s1; H++)
+        if (B.current[H].label.toLowerCase().startsWith(b)) {
+          X(F.current[H], H);
           break;
         }
     }
   }, f1 = (b) => {
-    const R = T.current.indexOf(b), S = B.current[R];
-    S.callback && !S.disabled && S.callback(S), S.linkContent && !S.disabled && H.current?.querySelector(
+    const R = F.current.indexOf(b), H = B.current[R];
+    H.callback && !H.disabled && H.callback(H), H.linkContent && !H.disabled && S.current?.querySelector(
       `#${b} a`
     )?.click();
   }, E1 = () => {
-    const b = T.current[s1];
+    const b = F.current[s1];
     f1(b);
   }, O1 = (b) => {
-    $ ? i1() : e1(), o && o(), b.stopPropagation(), b.preventDefault();
+    _ ? i1() : e1(), o && o(), b.stopPropagation(), b.preventDefault();
   }, W1 = (b) => {
     f1(b.currentTarget.id), y || i1();
   }, Z1 = (b) => {
     const R = b.key;
-    let S = !1;
+    let H = !1;
     switch (R) {
       // open menu and focus on first menu item
       case " ":
@@ -2666,69 +2666,69 @@ const _4 = {
             break;
           }
         X(
-          T.current[G],
+          F.current[G],
           G
-        ), S = !0, o && o();
+        ), H = !0, o && o();
         break;
       }
       // close menu
       case "Esc":
       case "Escape":
-        i1(), S = !0;
+        i1(), H = !0;
         break;
       // open menu and focus on last menu item
       case "Up":
       case "ArrowUp": {
         e1();
-        let G = T.current.length - 1;
-        for (let I = T.current.length - 1; I >= 0; I--)
+        let G = F.current.length - 1;
+        for (let I = F.current.length - 1; I >= 0; I--)
           if (!B.current[I]?.disabled) {
             G = I;
             break;
           }
         X(
-          T.current[G],
+          F.current[G],
           G
-        ), S = !0;
+        ), H = !0;
         break;
       }
     }
-    S && (b.stopPropagation(), b.preventDefault());
+    H && (b.stopPropagation(), b.preventDefault());
   }, u1 = (b) => {
     const R = b.key;
-    let S = !1, G = "", I = 0;
+    let H = !1, G = "", I = 0;
     function J(V) {
       return V.length === 1 && V.match(/\S/);
     }
     if (!(b.ctrlKey || b.altKey || b.metaKey)) {
       if (b.shiftKey)
-        J(R) && (w1(R), S = !0), b.key === "Tab" && (i1(), S = !0);
+        J(R) && (w1(R), H = !0), b.key === "Tab" && (i1(), H = !0);
       else
         switch (R) {
           case " ":
           case "Enter":
-            i1(), E1(), S = !0;
+            i1(), E1(), H = !0;
             break;
           case "Esc":
           case "Escape":
-            i1(), S = !0;
+            i1(), H = !0;
             break;
           case "Up":
           case "ArrowUp": {
             let V = 0;
-            const q = T.current.length;
-            for (I = s1 - 1; V < q && (I < 0 && (I = T.current.length - 1), !!B.current[I]?.disabled); )
+            const q = F.current.length;
+            for (I = s1 - 1; V < q && (I < 0 && (I = F.current.length - 1), !!B.current[I]?.disabled); )
               I--, V++;
-            G = T.current[I], X(G, I), S = !0;
+            G = F.current[I], X(G, I), H = !0;
             break;
           }
           case "ArrowDown":
           case "Down": {
             let V = 0;
-            const q = T.current.length;
-            for (I = s1 + 1; V < q && (I > T.current.length - 1 && (I = 0), !!B.current[I]?.disabled); )
+            const q = F.current.length;
+            for (I = s1 + 1; V < q && (I > F.current.length - 1 && (I = 0), !!B.current[I]?.disabled); )
               I++, V++;
-            G = T.current[I], X(G, I), S = !0;
+            G = F.current[I], X(G, I), H = !0;
             break;
           }
           case "Home":
@@ -2740,38 +2740,38 @@ const _4 = {
                 break;
               }
             X(
-              T.current[V],
+              F.current[V],
               V
-            ), S = !0;
+            ), H = !0;
             break;
           }
           case "End":
           case "PageDown": {
-            let V = T.current.length - 1;
-            for (let q = T.current.length - 1; q >= 0; q--)
+            let V = F.current.length - 1;
+            for (let q = F.current.length - 1; q >= 0; q--)
               if (!B.current[q]?.disabled) {
                 V = q;
                 break;
               }
             X(
-              T.current[V],
+              F.current[V],
               V
-            ), S = !0;
+            ), H = !0;
             break;
           }
           case "Tab":
             i1();
             break;
           default:
-            J(R) && (w1(R), S = !0);
+            J(R) && (w1(R), H = !0);
             break;
         }
-      S && (b.stopPropagation(), b.preventDefault());
+      H && (b.stopPropagation(), b.preventDefault());
     }
   }, $1 = (b) => {
-    H.current && !H.current.contains(b.target) && $ && i1();
-  }, _1 = (b, R, S = "", G = "", ...I) => {
-    const J = S ? `-group-${S}` : "", V = N + J + "-item-" + (R + 1), q = "id" in b && b.id ? b.id : V;
+    S.current && !S.current.contains(b.target) && _ && i1();
+  }, _1 = (b, R, H = "", G = "", ...I) => {
+    const J = H ? `-group-${H}` : "", V = N + J + "-item-" + (R + 1), q = "id" in b && b.id ? b.id : V;
     if (X1(b))
       return /* @__PURE__ */ e.createElement("li", { key: q, role: "separator" });
     if (Q1(b))
@@ -2779,7 +2779,7 @@ const _4 = {
         "li",
         {
           key: G,
-          className: `${v}__listbox-heading`,
+          className: `${p}__listbox-heading`,
           id: G || null,
           role: "presentation"
         },
@@ -2788,7 +2788,7 @@ const _4 = {
     if (D4(b))
       return /* @__PURE__ */ e.createElement("li", { key: q, role: "presentation" }, b.nodeContent);
     if (J1(b) || "label" in b && b.label) {
-      T.current.push(q), B.current.push(b);
+      F.current.push(q), B.current.push(b);
       let v1 = !1;
       U !== "" && !b.disabled && (v1 = U === q);
       const o1 = "isCritical" in b && b.isCritical, x1 = "criticalLabel" in b ? b.criticalLabel : void 0;
@@ -2808,16 +2808,16 @@ const _4 = {
         /* @__PURE__ */ e.createElement("span", { key: `critical-${N}`, className: "visually-hidden" }, x1)
       );
       let z1;
-      b.description && (z1 = /* @__PURE__ */ e.createElement("span", { className: `${v}__item-description` }, b.description));
+      b.description && (z1 = /* @__PURE__ */ e.createElement("span", { className: `${p}__item-description` }, b.description));
       let N1;
       if (J1(b) && b.linkContent) {
         const g1 = b.linkContent, K1 = g1.type;
-        N1 = /* @__PURE__ */ e.createElement(K1, { tabIndex: -1, ...g1.props }, /* @__PURE__ */ e.createElement("span", { className: `${v}__item-label` }, d1), z1);
+        N1 = /* @__PURE__ */ e.createElement(K1, { tabIndex: -1, ...g1.props }, /* @__PURE__ */ e.createElement("span", { className: `${p}__item-label` }, d1), z1);
       } else
-        N1 = /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: `${v}__item-label` }, d1), z1);
-      const U1 = M([
-        v1 ? `${v}__item-focused` : null,
-        o1 ? `${v}__item-critical` : null
+        N1 = /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: `${p}__item-label` }, d1), z1);
+      const U1 = w([
+        v1 ? `${p}__item-focused` : null,
+        o1 ? `${p}__item-critical` : null
       ]);
       return /* @__PURE__ */ e.createElement(
         "li",
@@ -2836,19 +2836,19 @@ const _4 = {
       );
     }
   }, y1 = (b, R) => {
-    const S = [], G = [...R];
+    const H = [], G = [...R];
     let I = G.shift(), J = [];
     return b.map((V, q) => {
-      V !== I ? (J.push(V), q + 1 === b.length && S.push(J)) : (S.push(J), J = [], J.push(V), I = G.shift());
-    }), S.filter((V) => V.length > 0);
+      V !== I ? (J.push(V), q + 1 === b.length && H.push(J)) : (H.push(J), J = [], J.push(V), I = G.shift());
+    }), H.filter((V) => V.length > 0);
   }, Y = (b) => {
-    T.current = [], B.current = [];
-    const R = b, S = b.filter(
+    F.current = [], B.current = [];
+    const R = b, H = b.filter(
       Q1 || X1
-    ), G = S.length > 0;
-    let I = [`${v}__listbox`];
-    if (u && I.push(`${v}__listbox--navbar`), d === "end" && I.push(`${v}__listbox--end`), a === "icon-only" && I.push(`${v}__listbox--icon-only`), I = M(I), G) {
-      const J = y1(b, S);
+    ), G = H.length > 0;
+    let I = [`${p}__listbox`];
+    if (u && I.push(`${p}__listbox--navbar`), d === "end" && I.push(`${p}__listbox--end`), l === "icon-only" && I.push(`${p}__listbox--icon-only`), I = w(I), G) {
+      const J = y1(b, H);
       J.forEach(() => {
         n1.current.push(c4());
       });
@@ -2859,7 +2859,7 @@ const _4 = {
       return /* @__PURE__ */ e.createElement(
         "div",
         {
-          ref: g.setFloating,
+          ref: v.setFloating,
           "aria-activedescendant": U !== "" ? U : v1,
           "aria-labelledby": N,
           className: I.toString(),
@@ -2867,18 +2867,18 @@ const _4 = {
           onKeyDown: u1,
           role: "menu",
           style: {
-            visibility: $ ? "visible" : "hidden",
-            opacity: $ ? "1" : "0",
+            visibility: _ ? "visible" : "hidden",
+            opacity: _ ? "1" : "0",
             transition: "var(--pds-animation-transition-reveal)",
-            position: C,
-            transform: `translate(${Math.round(L)}px,${Math.round(_)}px)`,
+            position: z,
+            transform: `translate(${Math.round(L)}px,${Math.round($)}px)`,
             zIndex: "var(--pds-z-index-dropdown)"
           },
           tabIndex: -1
         },
         J.map((o1, x1) => {
           V = n1.current[x1];
-          const d1 = "isHeading" in o1[0] && o1[0].isHeading, z1 = d1 ? `${N}-group-${V}-heading` : "", N1 = `${N}-group-${V}`, U1 = d1 ? null : `${p} ${x1 + 1}`;
+          const d1 = "isHeading" in o1[0] && o1[0].isHeading, z1 = d1 ? `${N}-group-${V}-heading` : "", N1 = `${N}-group-${V}`, U1 = d1 ? null : `${g} ${x1 + 1}`;
           return /* @__PURE__ */ e.createElement(
             "ul",
             {
@@ -2901,7 +2901,7 @@ const _4 = {
       return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
         "ul",
         {
-          ref: g.setFloating,
+          ref: v.setFloating,
           "aria-activedescendant": U !== "" ? U : J,
           "aria-labelledby": N,
           className: I.toString(),
@@ -2909,11 +2909,11 @@ const _4 = {
           onKeyDown: u1,
           role: "menu",
           style: {
-            visibility: $ ? "visible" : "hidden",
-            opacity: $ ? "1" : "0",
+            visibility: _ ? "visible" : "hidden",
+            opacity: _ ? "1" : "0",
             transition: "var(--pds-animation-transition-reveal)",
-            position: C,
-            transform: `translate(${Math.round(L)}px,${Math.round(_)}px)`
+            position: z,
+            transform: `translate(${Math.round(L)}px,${Math.round($)}px)`
           },
           tabIndex: -1
         },
@@ -2922,16 +2922,16 @@ const _4 = {
     }
   };
   let r1;
-  if (a === "icon-end" && (r1 = /* @__PURE__ */ e.createElement(
+  if (l === "icon-end" && (r1 = /* @__PURE__ */ e.createElement(
     q1,
     {
-      ref: g.setReference,
+      ref: v.setReference,
       "aria-controls": E,
-      "aria-expanded": $,
+      "aria-expanded": _,
       "aria-haspopup": "true",
-      className: `${v}__trigger`,
-      disabled: l,
-      displayType: a,
+      className: `${p}__trigger`,
+      disabled: a,
+      displayType: l,
       iconName: "angleDown",
       id: N,
       isSplitButton: s,
@@ -2942,18 +2942,18 @@ const _4 = {
       type: "button",
       variant: f
     }
-  )), a === "icon-only") {
+  )), l === "icon-only") {
     const b = o2(i);
     r1 = /* @__PURE__ */ e.createElement(
-      T1,
+      F1,
       {
-        ref: g.setReference,
+        ref: v.setReference,
         "aria-controls": E,
-        "aria-expanded": $,
+        "aria-expanded": _,
         "aria-haspopup": "true",
         ariaLabel: b,
-        className: `${v}__trigger ${v}__trigger--icon-only`,
-        disabled: l,
+        className: `${p}__trigger ${p}__trigger--icon-only`,
+        disabled: a,
         hasTooltip: !1,
         iconName: c,
         id: N,
@@ -2967,14 +2967,14 @@ const _4 = {
   }
   const k1 = (b) => {
     const R = b.target;
-    R.classList.toggle(`${v}__toggle--expanded`), R.setAttribute(
+    R.classList.toggle(`${p}__toggle--expanded`), R.setAttribute(
       "aria-expanded",
       R.getAttribute("aria-expanded") === "true" ? "false" : "true"
-    ), R.nextElementSibling.classList.toggle(`${v}__mobile-menu--expanded`);
-  }, j2 = () => /* @__PURE__ */ e.createElement("ul", { className: `${v}__mobile-menu`, role: "menu" }, r.map((b, R) => _1(b, R)));
+    ), R.nextElementSibling.classList.toggle(`${p}__mobile-menu--expanded`);
+  }, j2 = () => /* @__PURE__ */ e.createElement("ul", { className: `${p}__mobile-menu`, role: "menu" }, r.map((b, R) => _1(b, R)));
   let u2;
-  const O2 = a === "icon-end" ? "pds-button pds-button--navbar" : null, Z2 = M([
-    `${v}__toggle`,
+  const O2 = l === "icon-end" ? "pds-button pds-button--navbar" : null, Z2 = w([
+    `${p}__toggle`,
     O2
   ]);
   y && (u2 = /* @__PURE__ */ e.createElement(
@@ -2982,42 +2982,42 @@ const _4 = {
     {
       "aria-expanded": !1,
       className: Z2,
-      disabled: l,
+      disabled: a,
       id: N,
       onClick: k1,
       type: "button"
     },
-    a === "icon-only" ? /* @__PURE__ */ e.createElement("span", { className: `${v}__icon-label` }, /* @__PURE__ */ e.createElement(O, { iconName: c }), " ", i) : i,
+    l === "icon-only" ? /* @__PURE__ */ e.createElement("span", { className: `${p}__icon-label` }, /* @__PURE__ */ e.createElement(O, { iconName: c }), " ", i) : i,
     /* @__PURE__ */ e.createElement(
       O,
       {
-        className: `${v}__toggle-icon ${v}__toggle-icon--${a}`,
+        className: `${p}__toggle-icon ${p}__toggle-icon--${l}`,
         iconName: "angleDown",
         iconSize: "m"
       }
     )
   ));
-  const T2 = u2, A2 = $ ? `${v}--expanded` : null;
+  const F2 = u2, T2 = _ ? `${p}--expanded` : null;
   return /* @__PURE__ */ e.createElement(
     "span",
     {
-      ref: H,
-      className: M([
-        v,
+      ref: S,
+      className: w([
+        p,
         P,
         x,
-        A2,
+        T2,
         t
       ]),
-      "data-testid": z,
+      "data-testid": C,
       ...h
     },
-    y ? /* @__PURE__ */ e.createElement(e.Fragment, null, T2, /* @__PURE__ */ e.createElement(j2, null)) : /* @__PURE__ */ e.createElement(e.Fragment, null, r1, Y(r))
+    y ? /* @__PURE__ */ e.createElement(e.Fragment, null, F2, /* @__PURE__ */ e.createElement(j2, null)) : /* @__PURE__ */ e.createElement(e.Fragment, null, r1, Y(r))
   );
 }, h0 = ({
   className: t,
-  defaultValue: l,
-  disabled: a = !1,
+  defaultValue: a,
+  disabled: l = !1,
   id: c,
   label: n,
   onChange: s,
@@ -3026,41 +3026,41 @@ const _4 = {
   value: d,
   ...o
 }) => {
-  const m = "pds-segmented-button", z = a ? "pds-is-disabled" : null, p = `${m}--${r}`, f = r === "s" ? "s" : "m", u = typeof d < "u", h = typeof l < "u", [w, g] = j(
-    h ? l : ""
-  ), C = (L) => {
-    g(L.target.value), s && s(L.target.value);
+  const m = "pds-segmented-button", C = l ? "pds-is-disabled" : null, g = `${m}--${r}`, f = r === "s" ? "s" : "m", u = typeof d < "u", h = typeof a < "u", [M, v] = j(
+    h ? a : ""
+  ), z = (L) => {
+    v(L.target.value), s && s(L.target.value);
   };
   if (i.length >= 2 && i.length <= 6)
     return /* @__PURE__ */ e.createElement(
       "fieldset",
       {
-        className: M([
+        className: w([
           m,
-          p,
-          z,
+          g,
+          C,
           t ?? ""
         ]),
         ...o
       },
       /* @__PURE__ */ e.createElement("legend", { className: "visually-hidden" }, n),
-      /* @__PURE__ */ e.createElement("div", { className: `${m}__options` }, i.map((L, _) => {
-        const D = u ? d === L.value : w === L.value, k = `${m}__option`, y = D ? `${k}--checked` : null;
+      /* @__PURE__ */ e.createElement("div", { className: `${m}__options` }, i.map((L, $) => {
+        const D = u ? d === L.value : M === L.value, k = `${m}__option`, y = D ? `${k}--checked` : null;
         return /* @__PURE__ */ e.createElement(
           "div",
           {
-            key: `${c}-option-${_}`,
-            className: M([k, y])
+            key: `${c}-option-${$}`,
+            className: w([k, y])
           },
           /* @__PURE__ */ e.createElement(
             "input",
             {
               checked: D,
               className: "visually-hidden",
-              disabled: a || L.disabled,
-              id: L.id ? L.id : `${c}-option-${_}`,
+              disabled: l || L.disabled,
+              id: L.id ? L.id : `${c}-option-${$}`,
               name: c,
-              onChange: C,
+              onChange: z,
               type: "radio",
               value: L.value
             }
@@ -3068,7 +3068,7 @@ const _4 = {
           /* @__PURE__ */ e.createElement(
             "label",
             {
-              htmlFor: L.id ? L.id : `${c}-option-${_}`,
+              htmlFor: L.id ? L.id : `${c}-option-${$}`,
               title: L.label
             },
             L.iconName && /* @__PURE__ */ e.createElement(
@@ -3094,31 +3094,31 @@ const _4 = {
     );
 }, I4 = ({
   actionItems: t,
-  className: l,
-  disabled: a,
+  className: a,
+  disabled: l,
   id: c,
   moreActionsLabel: n = "More actions",
   size: s = "s",
   variant: i = "primary",
   ...r
 }) => {
-  const d = "pds-split-button", o = `${d}--${i}`, m = t[0], z = t.slice(1);
-  let p = null;
-  return "isLink" in m && m.isLink === !0 ? p = /* @__PURE__ */ e.createElement(
+  const d = "pds-split-button", o = `${d}--${i}`, m = t[0], C = t.slice(1);
+  let g = null;
+  return "isLink" in m && m.isLink === !0 ? g = /* @__PURE__ */ e.createElement(
     x4,
     {
       className: `${d}__primary-action`,
-      disabled: a,
+      disabled: l,
       displayType: "label-only",
       linkContent: m.linkContent,
       size: s,
       variant: i
     }
-  ) : "label" in m && (p = /* @__PURE__ */ e.createElement(
+  ) : "label" in m && (g = /* @__PURE__ */ e.createElement(
     q1,
     {
       className: `${d}__primary-action`,
-      disabled: a,
+      disabled: l,
       label: m.label,
       onClick: () => m.callback(),
       size: s,
@@ -3127,21 +3127,21 @@ const _4 = {
   )), /* @__PURE__ */ e.createElement(
     "span",
     {
-      className: M([d, o, l]),
+      className: w([d, o, a]),
       id: c,
       ...r
     },
-    p,
+    g,
     /* @__PURE__ */ e.createElement(
       H4,
       {
         isSplitButton: !0,
         className: `${d}__menu-button`,
-        disabled: a,
+        disabled: l,
         displayType: "icon-end",
         id: `${c}-menu`,
         label: n,
-        menuItems: z,
+        menuItems: C,
         size: s,
         testId: null,
         variant: i,
@@ -3166,15 +3166,15 @@ const _4 = {
   wordpress: "WordPress"
 }, j4 = ({
   className: t,
-  iconSize: l = "2xl",
-  platformType: a,
+  iconSize: a = "2xl",
+  platformType: l,
   ...c
 }) => {
-  const n = "pds-platform-icon", s = `pds-platform-icon--${a}`, i = `pds-platform-icon--${l}`;
+  const n = "pds-platform-icon", s = `pds-platform-icon--${l}`, i = `pds-platform-icon--${a}`;
   let r;
-  if (["front-end-sites", "gatsby-wp", "next-drupal", "next-wp"].includes(a)) {
+  if (["front-end-sites", "gatsby-wp", "next-drupal", "next-wp"].includes(l)) {
     let o = [];
-    switch (a) {
+    switch (l) {
       case "front-end-sites":
         o = ["next", "gatsby"];
         break;
@@ -3191,7 +3191,7 @@ const _4 = {
     r = /* @__PURE__ */ e.createElement(
       "span",
       {
-        "aria-label": V4[a],
+        "aria-label": V4[l],
         className: `${n}__group`,
         role: "img"
       },
@@ -3199,11 +3199,11 @@ const _4 = {
       h1(e2[o[1]], { "aria-hidden": "true" })
     );
   } else
-    r = e2[a];
+    r = e2[l];
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([n, s, i, t]),
+      className: w([n, s, i, t]),
       ...c
     },
     r
@@ -3504,15 +3504,15 @@ const _4 = {
   )
 }, u0 = ({
   buttonType: t = "button",
-  className: l = "",
-  disabled: a = !1,
+  className: a = "",
+  disabled: l = !1,
   label: c,
   onClick: n,
   platform: s,
   size: i = "m",
   ...r
 }) => {
-  const d = "pds-sso-button", o = `${d}--${i}`, m = i === "m" ? "l" : "2xl", z = /* @__PURE__ */ e.createElement(
+  const d = "pds-sso-button", o = `${d}--${i}`, m = i === "m" ? "l" : "2xl", C = /* @__PURE__ */ e.createElement(
     j4,
     {
       className: `${d}__icon`,
@@ -3523,19 +3523,19 @@ const _4 = {
   return /* @__PURE__ */ e.createElement(
     "button",
     {
-      className: M([d, o, l]),
-      disabled: a,
+      className: w([d, o, a]),
+      disabled: l,
       onClick: n,
       type: t,
       ...r
     },
-    z,
+    C,
     c
   );
 }, g0 = ({
   buttonProps: t,
-  className: l,
-  disabled: a = !1,
+  className: a,
+  disabled: l = !1,
   hasBorder: c = !1,
   iconName: n,
   iconPosition: s = "before",
@@ -3544,12 +3544,12 @@ const _4 = {
   isMonospace: d = !1,
   isWorking: o,
   label: m,
-  linkContent: z,
-  onClick: p,
+  linkContent: C,
+  onClick: g,
   tooltipText: f,
   ...u
 }) => {
-  const h = "pds-utility-button", w = r ? "pds-pulse" : null, g = (v) => n && !o ? /* @__PURE__ */ e.createElement(O, { key: v, className: `${h}__icon`, iconName: n }) : null, C = () => o ? /* @__PURE__ */ e.createElement(
+  const h = "pds-utility-button", M = r ? "pds-pulse" : null, v = (p) => n && !o ? /* @__PURE__ */ e.createElement(O, { key: p, className: `${h}__icon`, iconName: n }) : null, z = () => o ? /* @__PURE__ */ e.createElement(
     j1,
     {
       key: "spinner",
@@ -3557,63 +3557,63 @@ const _4 = {
       colorType: "monochromatic",
       size: "s"
     }
-  ) : null, L = (v) => {
+  ) : null, L = (p) => {
     const x = [];
-    return s === "before" && x.push(g("icon-before")), x.push(C()), x.push(
-      /* @__PURE__ */ e.createElement("span", { key: "label", className: `${h}__label` }, v)
-    ), s === "after" && x.push(g("icon-after")), x.filter(Boolean);
-  }, _ = z && a1(z) ? z.props.children : m, D = M([
+    return s === "before" && x.push(v("icon-before")), x.push(z()), x.push(
+      /* @__PURE__ */ e.createElement("span", { key: "label", className: `${h}__label` }, p)
+    ), s === "after" && x.push(v("icon-after")), x.filter(Boolean);
+  }, $ = C && l1(C) ? C.props.children : m, D = w([
     h,
     c ? `${h}--border` : null,
     i ? `${h}--critical` : null,
-    a ? `${h}--disabled` : null,
+    l ? `${h}--disabled` : null,
     r ? `${h}--loading` : null,
     o ? `${h}--working` : null,
     d ? `${h}--monospace` : null,
-    l ?? ""
-  ]), k = (v) => f ? /* @__PURE__ */ e.createElement(I1, { content: f, customTrigger: v }) : v;
-  if (z && !a) {
-    const v = a1(z) ? h1(
-      z,
-      Object.assign({}, z.props, {
-        className: M([
+    a ?? ""
+  ]), k = (p) => f ? /* @__PURE__ */ e.createElement(I1, { content: f, customTrigger: p }) : p;
+  if (C && !l) {
+    const p = l1(C) ? h1(
+      C,
+      Object.assign({}, C.props, {
+        className: w([
           `${h}__button`,
-          w,
-          z.props.className ?? ""
+          M,
+          C.props.className ?? ""
         ]),
-        children: L(_)
+        children: L($)
       })
     ) : null;
-    return /* @__PURE__ */ e.createElement("div", { className: D, ...u }, k(v));
+    return /* @__PURE__ */ e.createElement("div", { className: D, ...u }, k(p));
   }
   const y = /* @__PURE__ */ e.createElement(
     "button",
     {
-      "aria-disabled": a || r || o,
-      className: M([`${h}__button`, w]),
-      onClick: a ? void 0 : p,
+      "aria-disabled": l || r || o,
+      className: w([`${h}__button`, M]),
+      onClick: l ? void 0 : g,
       type: "button",
       ...t
     },
-    L(_)
+    L($)
   );
   return /* @__PURE__ */ e.createElement("div", { className: D, ...u }, k(y));
 }, p0 = ({
   background: t = "default",
-  children: l,
-  className: a,
+  children: a,
+  className: l,
   padding: c = "standard",
   ...n
 }) => {
-  const s = "pds-card", i = t !== "default" ? `${s}--${t}` : null, r = c !== "standard" ? `${s}--pad-${c}` : null, d = p1(l), o = d.image, m = d.__unslotted || d.main;
+  const s = "pds-card", i = t !== "default" ? `${s}--${t}` : null, r = c !== "standard" ? `${s}--pad-${c}` : null, d = p1(a), o = d.image, m = d.__unslotted || d.main;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([
+      className: w([
         s,
         i,
         r,
-        a ?? ""
+        l ?? ""
       ]),
       ...n
     },
@@ -3622,8 +3622,8 @@ const _4 = {
   );
 }, f0 = ({
   ariaLabel: t,
-  children: l,
-  className: a,
+  children: a,
+  className: l,
   closeButtonLabel: c = "Close drawer",
   disableOutsideClick: n,
   hasCloseButton: s = !0,
@@ -3633,43 +3633,43 @@ const _4 = {
   },
   size: o = "m",
   title: m,
-  width: z,
-  ...p
+  width: C,
+  ...g
 }) => {
-  const f = "pds-drawer", u = z ? null : `${f}--${o}`, h = `${f}--${r}`, w = z ? { width: z } : void 0, [g, C] = j(i), [L, _] = j(!1), D = t1(null), { closeOverlay: k, openOverlay: y } = d2();
+  const f = "pds-drawer", u = C ? null : `${f}--${o}`, h = `${f}--${r}`, M = C ? { width: C } : void 0, [v, z] = j(i), [L, $] = j(!1), D = t1(null), { closeOverlay: k, openOverlay: y } = d2();
   K(() => {
-    i ? C(!0) : _(!1);
+    i ? z(!0) : $(!1);
   }, [i]), K(() => {
-    g && requestAnimationFrame(() => {
+    v && requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        _(!0);
+        $(!0);
       });
     });
-  }, [g]), K(() => {
-    d(g);
-  }, [g]), K(() => {
-    if (!(!y || !k) && g)
+  }, [v]), K(() => {
+    d(v);
+  }, [v]), K(() => {
+    if (!(!y || !k) && v)
       return y(), () => k();
-  }, [g, y, k]), K(() => {
-    if (g)
+  }, [v, y, k]), K(() => {
+    if (v)
       return document.body.style.overflow = "hidden", () => {
         document.body.style.overflow = "";
       };
-  }, [g]);
-  const v = m1(() => {
-    _(!1);
+  }, [v]);
+  const p = m1(() => {
+    $(!1);
   }, []), x = m1(() => {
-    L || C(!1);
+    L || z(!1);
   }, [L]), P = m1(() => {
-    n || v();
-  }, [n, v]);
+    n || p();
+  }, [n, p]);
   return K(() => {
-    if (!g) return;
+    if (!v) return;
     const N = (E) => {
-      E.key === "Escape" && v();
+      E.key === "Escape" && p();
     };
     return document.addEventListener("keydown", N), () => document.removeEventListener("keydown", N);
-  }, [g, v]), g ? e4(
+  }, [v, p]), v ? e4(
     /* @__PURE__ */ e.createElement(
       J2,
       {
@@ -3683,7 +3683,7 @@ const _4 = {
       /* @__PURE__ */ e.createElement("div", { className: `${f}__wrapper` }, /* @__PURE__ */ e.createElement(
         "div",
         {
-          className: M([
+          className: w([
             `${f}__overlay`,
             L ? `${f}__overlay--visible` : null
           ]),
@@ -3694,27 +3694,27 @@ const _4 = {
         {
           ref: D,
           "aria-label": t || m,
-          className: M([
+          className: w([
             f,
             u,
             h,
             L ? `${f}--open` : null,
-            a
+            l
           ]),
           onTransitionEnd: x,
           role: "dialog",
-          style: w,
-          ...p
+          style: M,
+          ...g
         },
         /* @__PURE__ */ e.createElement("div", { className: `${f}__header` }, m && /* @__PURE__ */ e.createElement("div", { className: `${f}__title` }, m), s && /* @__PURE__ */ e.createElement(
           G1,
           {
             ariaLabel: c,
-            onClick: v,
+            onClick: p,
             size: "l"
           }
         )),
-        /* @__PURE__ */ e.createElement("div", { className: `${f}__content` }, l)
+        /* @__PURE__ */ e.createElement("div", { className: `${f}__content` }, a)
       ))
     ),
     document.body
@@ -3722,8 +3722,8 @@ const _4 = {
 }, O4 = L1(
   ({
     checked: t,
-    className: l,
-    defaultChecked: a,
+    className: a,
+    defaultChecked: l,
     disabled: c,
     id: n,
     indeterminate: s,
@@ -3732,29 +3732,29 @@ const _4 = {
     label: d,
     message: o,
     name: m,
-    nestingLevel: z = 0,
-    onBlur: p,
+    nestingLevel: C = 0,
+    onBlur: g,
     onChange: f,
     onFocus: u,
     required: h,
-    showLabel: w = !0,
-    size: g = "s",
-    validationMessage: C,
+    showLabel: M = !0,
+    size: v = "s",
+    validationMessage: z,
     validationStatus: L,
-    value: _,
+    value: $,
     ...D
   }, k) => {
-    const y = r ? { width: `${r / 16}rem` } : null, v = "pds-checkbox", x = c ? A.disabled : null, P = L === "error" ? A.error : null, N = z > 0 ? `${v}--indent-${z}` : null, E = h && !c ? A.required : null, Z = g !== "s" ? `${v}--${g}` : null, H = L === "success" ? A.success : null, $ = C || o, F = typeof t < "u", W = typeof a < "u", [Q, U] = j(
-      W ? a : !1
-    ), l1 = t || Q, s1 = (X) => {
-      F || U(X.target.checked), f && f(X);
-    }, c1 = `${v}__box`, n1 = s ? null : l1 ? `${c1}--checked` : null, T = s ? `${c1}--indeterminate` : null, B = m1(() => {
+    const y = r ? { width: `${r / 16}rem` } : null, p = "pds-checkbox", x = c ? T.disabled : null, P = L === "error" ? T.error : null, N = C > 0 ? `${p}--indent-${C}` : null, E = h && !c ? T.required : null, Z = v !== "s" ? `${p}--${v}` : null, S = L === "success" ? T.success : null, _ = z || o, A = typeof t < "u", W = typeof l < "u", [Q, U] = j(
+      W ? l : !1
+    ), a1 = t || Q, s1 = (X) => {
+      A || U(X.target.checked), f && f(X);
+    }, c1 = `${p}__box`, n1 = s ? null : a1 ? `${c1}--checked` : null, F = s ? `${c1}--indeterminate` : null, B = m1(() => {
       if (s)
         return /* @__PURE__ */ e.createElement(
           "svg",
           {
             "aria-hidden": "true",
-            className: `${v}__icon ${v}__icon--indeterminate`,
+            className: `${p}__icon ${p}__icon--indeterminate`,
             fill: "currentColor",
             height: "12",
             viewBox: "0 0 12 12",
@@ -3763,12 +3763,12 @@ const _4 = {
           },
           /* @__PURE__ */ e.createElement("rect", { height: "2", rx: "1", width: "8", x: "2", y: "5" })
         );
-      if (l1)
+      if (a1)
         return /* @__PURE__ */ e.createElement(
           "svg",
           {
             "aria-hidden": "true",
-            className: `${v}__icon ${v}__icon--checked`,
+            className: `${p}__icon ${p}__icon--checked`,
             fill: "currentColor",
             height: "12",
             viewBox: "0 0 12 12",
@@ -3777,71 +3777,71 @@ const _4 = {
           },
           /* @__PURE__ */ e.createElement("path", { d: "M9.85474 3.64666C10.1032 3.32078 10.0258 2.86817 9.67727 2.63583C9.32878 2.4035 8.84476 2.47591 8.5963 2.80179L4.8694 7.65977L3.32056 6.21143C3.01724 5.9278 2.52677 5.9278 2.22669 6.21143C1.9266 6.49506 1.92337 6.9537 2.22346 7.23734L4.41765 9.28916C4.57899 9.44003 4.80164 9.51546 5.02751 9.49736C5.25338 9.47925 5.4599 9.37063 5.59219 9.19864L9.85151 3.64666H9.85474Z" })
         );
-    }, [s, l1]);
+    }, [s, a1]);
     return /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: M([
-          v,
+        className: w([
+          p,
           x,
           E,
           P,
-          H,
+          S,
           Z,
           N,
-          l ?? ""
+          a ?? ""
         ]),
         style: r ? y : null,
         ...D
       },
-      /* @__PURE__ */ e.createElement("div", { className: `${v}__input-wrapper` }, /* @__PURE__ */ e.createElement(
+      /* @__PURE__ */ e.createElement("div", { className: `${p}__input-wrapper` }, /* @__PURE__ */ e.createElement(
         "input",
         {
           ref: k,
           "aria-checked": s ? "mixed" : void 0,
-          checked: F ? t : Q,
+          checked: A ? t : Q,
           id: n,
           name: m,
           type: "checkbox",
-          ..._ ? { value: _ } : {},
-          "aria-describedby": $ ? `${n}__message` : null,
+          ...$ ? { value: $ } : {},
+          "aria-describedby": _ ? `${n}__message` : null,
           "aria-invalid": L === "error" ? !0 : null,
           disabled: c,
-          onBlur: p,
+          onBlur: g,
           onChange: s1,
           onFocus: u,
           required: h,
           ...i
         }
-      ), /* @__PURE__ */ e.createElement("label", { className: `${v}__label`, htmlFor: n }, /* @__PURE__ */ e.createElement(
+      ), /* @__PURE__ */ e.createElement("label", { className: `${p}__label`, htmlFor: n }, /* @__PURE__ */ e.createElement(
         "div",
         {
-          className: M([
+          className: w([
             c1,
             n1,
-            T
+            F
           ])
         },
         /* @__PURE__ */ e.createElement(B, null)
       ), /* @__PURE__ */ e.createElement(
         "div",
         {
-          className: M([
-            `${v}__label-text`,
-            w ? "" : "visually-hidden"
+          className: w([
+            `${p}__label-text`,
+            M ? "" : "visually-hidden"
           ])
         },
         d,
         " ",
         h && !c && /* @__PURE__ */ e.createElement(D2, null)
       ))),
-      $ && /* @__PURE__ */ e.createElement(
+      _ && /* @__PURE__ */ e.createElement(
         b1,
         {
           validationMessageHasDecorators: !0,
-          hasValidationMessage: !!C,
+          hasValidationMessage: !!z,
           id: n,
-          message: $,
+          message: _,
           validationStatus: L
         }
       )
@@ -3849,8 +3849,8 @@ const _4 = {
   }
 ), v0 = ({
   children: t,
-  className: l,
-  disabled: a = !1,
+  className: a,
+  disabled: l = !1,
   fieldsetProps: c,
   id: n,
   inputWidth: s,
@@ -3859,21 +3859,21 @@ const _4 = {
   required: d = !1,
   showLabel: o = !0,
   tooltipText: m = null,
-  validationMessage: z,
-  validationStatus: p,
+  validationMessage: C,
+  validationStatus: g,
   ...f
 }) => {
-  const u = s ? { width: `${s / 16}rem` } : null, h = "pds-checkbox-group", w = a ? A.disabled : null, g = d && !a ? A.required : null, C = p === "error" ? A.error : null, L = p === "success" ? A.success : null, _ = z || r;
+  const u = s ? { width: `${s / 16}rem` } : null, h = "pds-checkbox-group", M = l ? T.disabled : null, v = d && !l ? T.required : null, z = g === "error" ? T.error : null, L = g === "success" ? T.success : null, $ = C || r;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([
+      className: w([
         h,
-        w,
-        g,
-        C,
+        M,
+        v,
+        z,
         L,
-        l ?? ""
+        a ?? ""
       ]),
       style: s ? u : null,
       ...f
@@ -3882,7 +3882,7 @@ const _4 = {
       V1,
       {
         isLegend: !0,
-        disabled: a,
+        disabled: l,
         id: n,
         label: i,
         required: d,
@@ -3890,21 +3890,21 @@ const _4 = {
         tooltipText: m
       }
     ), /* @__PURE__ */ e.createElement("div", { className: `${h}__options` }, t)),
-    _ && /* @__PURE__ */ e.createElement(
+    $ && /* @__PURE__ */ e.createElement(
       b1,
       {
         validationMessageHasDecorators: !0,
-        hasValidationMessage: !!z,
+        hasValidationMessage: !!C,
         id: n,
-        message: _,
-        validationStatus: p
+        message: $,
+        validationStatus: g
       }
     )
   );
 }, z0 = ({
   className: t,
-  disabled: l = !1,
-  fieldsetProps: a,
+  disabled: a = !1,
+  fieldsetProps: l,
   id: c,
   inputWidth: n,
   label: s,
@@ -3913,13 +3913,13 @@ const _4 = {
   onValueChange: d,
   options: o,
   required: m = !1,
-  showLabel: z = !0,
-  tooltipText: p = null,
+  showLabel: C = !0,
+  tooltipText: g = null,
   validationMessage: f,
   validationStatus: u,
   ...h
 }) => {
-  const w = n ? { width: `${n / 16}rem` } : null, g = "pds-checkbox-group", C = l ? A.disabled : null, L = m && !l ? A.required : null, _ = u === "error" ? A.error : null, D = u === "success" ? A.success : null, k = f || i;
+  const M = n ? { width: `${n / 16}rem` } : null, v = "pds-checkbox-group", z = a ? T.disabled : null, L = m && !a ? T.required : null, $ = u === "error" ? T.error : null, D = u === "success" ? T.success : null, k = f || i;
   o.map((E) => {
     E.id || (E.id = E.value);
   });
@@ -3927,50 +3927,50 @@ const _4 = {
   o.map((E) => {
     E.checked === !0 && y.push(E.value);
   });
-  const [v, x] = j(y), P = (E) => {
-    const { value: Z } = E.target, H = v.includes(Z) ? v.filter(($) => $ !== Z) : [...v, Z];
-    x(H), d && d(H);
+  const [p, x] = j(y), P = (E) => {
+    const { value: Z } = E.target, S = p.includes(Z) ? p.filter((_) => _ !== Z) : [...p, Z];
+    x(S), d && d(S);
   };
   o.map((E) => {
-    v.includes(E.value) ? E.checked = !0 : E.checked = !1;
+    p.includes(E.value) ? E.checked = !0 : E.checked = !1;
   });
   const N = () => {
     r && setTimeout(() => {
-      o.some((E) => E.id === document.activeElement.id) || r(v);
+      o.some((E) => E.id === document.activeElement.id) || r(p);
     }, 1500);
   };
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([
-        g,
-        C,
+      className: w([
+        v,
+        z,
         L,
-        _,
+        $,
         D,
         t ?? ""
       ]),
-      style: n ? w : null,
+      style: n ? M : null,
       ...h
     },
-    /* @__PURE__ */ e.createElement("fieldset", { className: `${g}__fieldset`, id: c, ...a }, /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ e.createElement("fieldset", { className: `${v}__fieldset`, id: c, ...l }, /* @__PURE__ */ e.createElement(
       V1,
       {
         isLegend: !0,
-        disabled: l,
+        disabled: a,
         id: c,
         label: s,
         required: m,
-        showLabel: z,
-        tooltipText: p
+        showLabel: C,
+        tooltipText: g
       }
-    ), /* @__PURE__ */ e.createElement("div", { className: `${g}__options` }, o.map((E) => /* @__PURE__ */ e.createElement(
+    ), /* @__PURE__ */ e.createElement("div", { className: `${v}__options` }, o.map((E) => /* @__PURE__ */ e.createElement(
       O4,
       {
         key: E.id,
         checked: E.checked,
-        className: `${g}__checkbox`,
-        disabled: E.disabled || l,
+        className: `${v}__checkbox`,
+        disabled: E.disabled || a,
         id: E.id,
         label: E.label,
         name: E.name,
@@ -3992,8 +3992,8 @@ const _4 = {
   );
 }, C0 = ({
   className: t,
-  defaultValue: l,
-  disabled: a = !1,
+  defaultValue: a,
+  disabled: l = !1,
   fieldsetProps: c,
   id: n,
   inputWidth: s,
@@ -4002,68 +4002,68 @@ const _4 = {
   onBlur: d,
   onChange: o,
   onValueChange: m,
-  options: z,
-  required: p = !1,
+  options: C,
+  required: g = !1,
   showLabel: f = !0,
   tooltipText: u = null,
   validationMessage: h,
-  validationStatus: w,
-  value: g,
-  ...C
+  validationStatus: M,
+  value: v,
+  ...z
 }) => {
-  const L = "pds-radio-group", _ = a ? A.disabled : null, D = p && !a ? A.required : null, k = w === "error" ? A.error : null, y = w === "success" ? A.success : null, v = typeof g < "u", x = typeof l < "u", [P, N] = j(
-    x ? l : ""
-  ), E = h || r, Z = ($) => {
-    v || N($.target.value), o && o($), m && m($.target.value);
-  }, H = ($) => {
-    d?.($);
+  const L = "pds-radio-group", $ = l ? T.disabled : null, D = g && !l ? T.required : null, k = M === "error" ? T.error : null, y = M === "success" ? T.success : null, p = typeof v < "u", x = typeof a < "u", [P, N] = j(
+    x ? a : ""
+  ), E = h || r, Z = (_) => {
+    p || N(_.target.value), o && o(_), m && m(_.target.value);
+  }, S = (_) => {
+    d?.(_);
   };
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([
+      className: w([
         L,
-        _,
+        $,
         D,
         k,
         y,
         t ?? ""
       ]),
       style: m2(s),
-      ...C
+      ...z
     },
     /* @__PURE__ */ e.createElement("fieldset", { className: `${L}__fieldset`, id: n, ...c }, /* @__PURE__ */ e.createElement(
       V1,
       {
         isLegend: !0,
-        disabled: a,
+        disabled: l,
         id: n,
         label: i,
-        required: p,
+        required: g,
         showLabel: f,
         tooltipText: u
       }
-    ), /* @__PURE__ */ e.createElement("div", { className: `${L}__options` }, z.map(($, F) => /* @__PURE__ */ e.createElement(
+    ), /* @__PURE__ */ e.createElement("div", { className: `${L}__options` }, C.map((_, A) => /* @__PURE__ */ e.createElement(
       "div",
       {
-        key: `${n}-option-${F}`,
+        key: `${n}-option-${A}`,
         className: `${L}__option`
       },
       /* @__PURE__ */ e.createElement(
         "input",
         {
-          checked: v ? g === $.value : P === $.value,
-          disabled: a || $.disabled,
-          id: $.id ? $.id : `${n}-option-${F}`,
+          checked: p ? v === _.value : P === _.value,
+          disabled: l || _.disabled,
+          id: _.id ? _.id : `${n}-option-${A}`,
           name: n,
-          onBlur: H,
+          onBlur: S,
           onChange: Z,
-          required: p,
+          required: g,
           type: "radio",
-          value: $.value
+          value: _.value
         }
       ),
-      /* @__PURE__ */ e.createElement("label", { htmlFor: $.id ? $.id : `${n}-option-${F}` }, $.label)
+      /* @__PURE__ */ e.createElement("label", { htmlFor: _.id ? _.id : `${n}-option-${A}` }, _.label)
     )))),
     E && /* @__PURE__ */ e.createElement(
       b1,
@@ -4072,15 +4072,15 @@ const _4 = {
         hasValidationMessage: !!h,
         id: n,
         message: E,
-        validationStatus: w
+        validationStatus: M
       }
     )
   );
 }, L0 = L1(
   ({
     className: t,
-    counterMaxLength: l,
-    defaultValue: a,
+    counterMaxLength: a,
+    defaultValue: l,
     disabled: c = !1,
     id: n,
     inputWidth: s,
@@ -4089,16 +4089,16 @@ const _4 = {
     message: d,
     onBlur: o,
     onChange: m,
-    onFocus: z,
-    placeholder: p,
+    onFocus: C,
+    placeholder: g,
     readonly: f = !1,
     required: u = !1,
     rows: h = 5,
-    showLabel: w,
-    size: g = "s",
-    textareaProps: C,
+    showLabel: M,
+    size: v = "s",
+    textareaProps: z,
     tooltipText: L = null,
-    translationStrings: _ = {
+    translationStrings: $ = {
       clearButton: "Clear input text",
       counterOverLimit: "Character limit exceeded by",
       searchShortcut: "Press / to focus the search field",
@@ -4109,31 +4109,31 @@ const _4 = {
     validationMessage: D,
     validationStatus: k,
     value: y,
-    ...v
+    ...p
   }, x) => {
-    const P = m2(s), N = "pds-textarea", E = i ? "pds-is-resizable" : null, Z = c ? A.disabled : null, H = u && !c ? A.required : null, $ = k === "error" ? A.error : null, F = k === "success" ? A.success : null, W = g !== "s" ? `${N}--${g}` : null, Q = f ? A.readonly : null, U = D || d, l1 = y != null && m !== void 0, s1 = typeof a < "u", [c1, n1] = j(
-      s1 ? a : ""
-    ), T = y || c1, B = (e1) => {
-      l1 || n1(e1.target.value), m && m(e1);
+    const P = m2(s), N = "pds-textarea", E = i ? "pds-is-resizable" : null, Z = c ? T.disabled : null, S = u && !c ? T.required : null, _ = k === "error" ? T.error : null, A = k === "success" ? T.success : null, W = v !== "s" ? `${N}--${v}` : null, Q = f ? T.readonly : null, U = D || d, a1 = y != null && m !== void 0, s1 = typeof l < "u", [c1, n1] = j(
+      s1 ? l : ""
+    ), F = y || c1, B = (e1) => {
+      a1 || n1(e1.target.value), m && m(e1);
     }, X = (e1) => {
       o && o(e1);
     };
     return /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: M([
-          A.base,
+        className: w([
+          T.base,
           N,
           W,
           Z,
-          H,
-          $,
-          F,
+          S,
+          _,
+          A,
           Q,
           t ?? ""
         ]),
         style: s ? P : null,
-        ...v
+        ...p
       },
       /* @__PURE__ */ e.createElement("div", { className: `${N}__inputlabel-wrapper` }, /* @__PURE__ */ e.createElement(
         V1,
@@ -4143,16 +4143,16 @@ const _4 = {
           id: n,
           label: r,
           required: u,
-          showLabel: w,
+          showLabel: M,
           tooltipText: L
         }
-      ), l && /* @__PURE__ */ e.createElement(
+      ), a && /* @__PURE__ */ e.createElement(
         S2,
         {
-          currentLength: T.length,
+          currentLength: F.length,
           id: n,
-          maxLength: l,
-          overLimitMessage: _.counterOverLimit
+          maxLength: a,
+          overLimitMessage: $.counterOverLimit
         }
       )),
       /* @__PURE__ */ e.createElement("div", { className: `${N}__input-wrapper` }, /* @__PURE__ */ e.createElement(
@@ -4161,19 +4161,19 @@ const _4 = {
           ref: x,
           "aria-describedby": U ? `${n}__message` : null,
           "aria-invalid": k === "error",
-          className: M([`${N}--textarea`, E]),
+          className: w([`${N}--textarea`, E]),
           disabled: c,
           id: n,
           name: n,
           onBlur: X,
           onChange: B,
-          onFocus: z,
-          placeholder: p,
+          onFocus: C,
+          placeholder: g,
           readOnly: f,
           required: u,
           rows: h,
-          value: l1 ? y : c1,
-          ...C
+          value: a1 ? y : c1,
+          ...z
         }
       )),
       U && /* @__PURE__ */ e.createElement(
@@ -4191,8 +4191,8 @@ const _4 = {
 ), Z4 = () => /* @__PURE__ */ e.createElement("div", { className: "pds-text-input__url-prefix" }, "https://"), b0 = L1(
   ({
     autoComplete: t,
-    className: l,
-    counterMaxLength: a,
+    className: a,
+    counterMaxLength: l,
     defaultValue: c,
     disabled: n = !1,
     hasClearButton: s = !1,
@@ -4201,20 +4201,20 @@ const _4 = {
     id: d,
     inputProps: o,
     inputWidth: m,
-    label: z,
-    message: p,
+    label: C,
+    message: g,
     onBlur: f,
     onChange: u,
     onClear: h,
-    onFocus: w,
-    placeholder: g,
-    readonly: C = !1,
+    onFocus: M,
+    placeholder: v,
+    readonly: z = !1,
     required: L = !1,
-    searchIcon: _ = "search",
+    searchIcon: $ = "search",
     showLabel: D = !0,
     showVisibilityToggle: k = !1,
     size: y = "s",
-    tooltipText: v = null,
+    tooltipText: p = null,
     translationStrings: x = {
       clearButton: "Clear input text",
       counterOverLimit: "Character limit exceeded by",
@@ -4227,12 +4227,12 @@ const _4 = {
     validationMessage: N,
     validationStatus: E,
     value: Z,
-    ...H
-  }, $) => {
-    const F = m2(m), W = "pds-text-input", Q = n ? A.disabled : null, U = L && !n ? A.required : null, l1 = E === "error" ? A.error : null, s1 = E === "success" ? A.success : null, c1 = C ? A.readonly : null, n1 = y !== "s" ? `${W}--${y}` : null, T = r && P === "url" ? `${W}--has-url-prefix` : null;
+    ...S
+  }, _) => {
+    const A = m2(m), W = "pds-text-input", Q = n ? T.disabled : null, U = L && !n ? T.required : null, a1 = E === "error" ? T.error : null, s1 = E === "success" ? T.success : null, c1 = z ? T.readonly : null, n1 = y !== "s" ? `${W}--${y}` : null, F = r && P === "url" ? `${W}--has-url-prefix` : null;
     let B = null;
-    P === "search" && (B = "search"), P === "search" && _ === "filter" && (B = "filter"), E === "error" && (B = "error"), E === "success" && (B = "success");
-    const X = N || p, e1 = typeof Z < "u", i1 = typeof c < "u", [w1, f1] = j(
+    P === "search" && (B = "search"), P === "search" && $ === "filter" && (B = "filter"), E === "error" && (B = "error"), E === "success" && (B = "success");
+    const X = N || g, e1 = typeof Z < "u", i1 = typeof c < "u", [w1, f1] = j(
       i1 ? c : ""
     ), E1 = Z || w1, O1 = (Y) => {
       if (k && u1 && $1(!1), r && P === "url") {
@@ -4270,30 +4270,30 @@ const _4 = {
     return k && P === "password" && (u1 ? y1 = "text" : y1 = "password"), /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: M([
-          A.base,
+        className: w([
+          T.base,
           W,
           n1,
           Q,
           U,
-          l1,
+          a1,
           s1,
           c1,
-          T,
-          l ?? ""
+          F,
+          a ?? ""
         ]),
-        style: m ? F : null,
-        ...H
+        style: m ? A : null,
+        ...S
       },
       /* @__PURE__ */ e.createElement(
         V1,
         {
           disabled: n,
           id: d,
-          label: z,
+          label: C,
           required: L,
           showLabel: D,
-          tooltipText: v
+          tooltipText: p
         }
       ),
       k && P === "password" && /* @__PURE__ */ e.createElement("div", { "aria-live": "polite", className: "visually-hidden" }, `${x.visibilityStatus} ${u1 ? "visible" : "hidden"}.`),
@@ -4307,7 +4307,7 @@ const _4 = {
         /* @__PURE__ */ e.createElement(
           "input",
           {
-            ref: $,
+            ref: _,
             "aria-describedby": X ? `${d}__message` : null,
             "aria-invalid": E === "error" ? !0 : null,
             autoComplete: P === "password" ? "off" : t,
@@ -4317,9 +4317,9 @@ const _4 = {
             name: d,
             onBlur: O1,
             onChange: W1,
-            onFocus: w,
-            placeholder: g,
-            readOnly: C,
+            onFocus: M,
+            placeholder: v,
+            readOnly: z,
             required: L,
             type: y1,
             value: e1 ? Z : w1,
@@ -4353,12 +4353,12 @@ const _4 = {
             shortcutLabel: x.searchShortcut
           }
         ),
-        a && P !== "password" && /* @__PURE__ */ e.createElement(
+        l && P !== "password" && /* @__PURE__ */ e.createElement(
           S2,
           {
             currentLength: E1.length,
             id: d,
-            maxLength: a,
+            maxLength: l,
             overLimitMessage: x.counterOverLimit
           }
         )
@@ -4377,8 +4377,8 @@ const _4 = {
   }
 ), M0 = ({
   ariaLabel: t,
-  children: l,
-  className: a,
+  children: a,
+  className: l,
   closeButtonLabel: c = "Close modal",
   contentMaxHeight: n,
   disableOutsideClick: s,
@@ -4388,28 +4388,28 @@ const _4 = {
   },
   size: o = "m",
   title: m,
-  ...z
+  ...C
 }) => {
-  const p = p1(l), f = p.__unslotted, u = p.footer, h = "pds-modal", w = o !== "m" ? `${h}--${o}` : null, g = n ? {
+  const g = p1(a), f = g.__unslotted, u = g.footer, h = "pds-modal", M = o !== "m" ? `${h}--${o}` : null, v = n ? {
     maxHeight: n,
     paddingInlineEnd: "1rem",
     marginInlineEnd: "-1rem",
     overflowY: "auto"
-  } : null, [C, L] = j(r), { closeOverlay: _, openOverlay: D } = d2();
+  } : null, [z, L] = j(r), { closeOverlay: $, openOverlay: D } = d2();
   K(() => {
     L(r);
   }, [r]), K(() => {
-    d(C);
-  }, [C]), K(() => {
-    if (!(!D || !_) && C)
-      return D(), () => _();
-  }, [C, D, _]);
-  const { context: k, floatingStyles: y, refs: v } = H1({
-    open: C,
+    d(z);
+  }, [z]), K(() => {
+    if (!(!D || !$) && z)
+      return D(), () => $();
+  }, [z, D, $]);
+  const { context: k, floatingStyles: y, refs: p } = H1({
+    open: z,
     onOpenChange: L
-  }), x = $2(k), P = s ? void 0 : F1(k, {
+  }), x = $2(k), P = s ? void 0 : A1(k, {
     outsidePressEvent: "mousedown"
-  }), N = B1(k), { getFloatingProps: E } = R1([x, P, N]), { isMounted: Z, styles: H } = _2(k, {
+  }), N = B1(k), { getFloatingProps: E } = R1([x, P, N]), { isMounted: Z, styles: S } = _2(k, {
     duration: {
       open: 300,
       close: 300
@@ -4442,17 +4442,17 @@ const _4 = {
     /* @__PURE__ */ e.createElement(K2, { context: k }, /* @__PURE__ */ e.createElement(
       "div",
       {
-        ref: v.setFloating,
+        ref: p.setFloating,
         "aria-label": t || m,
         ...E(),
-        className: M([h, w, a]),
+        className: w([h, M, l]),
         style: {
           ...y,
-          ...H,
+          ...S,
           position: "relative",
           top: "5%"
         },
-        ...z
+        ...C
       },
       i && /* @__PURE__ */ e.createElement("div", { className: `${h}__close-wrapper` }, /* @__PURE__ */ e.createElement(
         G1,
@@ -4463,20 +4463,20 @@ const _4 = {
         }
       )),
       /* @__PURE__ */ e.createElement("div", { className: `${h}__title` }, m),
-      /* @__PURE__ */ e.createElement("div", { className: `${h}__content`, style: g }, f),
+      /* @__PURE__ */ e.createElement("div", { className: `${h}__content`, style: v }, f),
       u && /* @__PURE__ */ e.createElement("div", { className: `${h}__footer` }, u)
     ))
   ));
 }, I2 = (t) => {
   if (!t)
     return null;
-  for (let l = 0; l < t.length; l++) {
-    if (V2(t[l]))
-      return typeof t[l].linkContent == "string" ? null : t[l].linkContent;
-    if (t[l].links) {
-      const a = I2(t[l].links);
-      if (a)
-        return a;
+  for (let a = 0; a < t.length; a++) {
+    if (V2(t[a]))
+      return typeof t[a].linkContent == "string" ? null : t[a].linkContent;
+    if (t[a].links) {
+      const l = I2(t[a].links);
+      if (l)
+        return l;
     }
   }
   return null;
@@ -4486,49 +4486,49 @@ const _4 = {
   if (V2(t))
     return !0;
   if (t.links) {
-    for (let l = 0; l < t.links.length; l++)
-      if (S1(t.links[l]))
+    for (let a = 0; a < t.links.length; a++)
+      if (S1(t.links[a]))
         return !0;
   }
   return !1;
-}, T4 = (t, l) => {
-  let a = null;
-  if (typeof t == "string" && l) {
-    const c = l ? l[0].linkContent : null;
-    a1(c) && (a = h1(c, {
+}, F4 = (t, a) => {
+  let l = null;
+  if (typeof t == "string" && a) {
+    const c = a ? a[0].linkContent : null;
+    l1(c) && (l = h1(c, {
       ...typeof t == "string" ? { children: t } : {}
     }));
   } else
-    a = t;
-  return a;
-}, i2 = (t, l, a, c) => {
+    l = t;
+  return l;
+}, i2 = (t, a, l, c) => {
   let n = null;
-  if (typeof l == "string") {
+  if (typeof a == "string") {
     const s = c ? [
-      /* @__PURE__ */ e.createElement("span", { key: l, className: `${t}__item-inner` }, /* @__PURE__ */ e.createElement("span", { className: `${t}__link-icon` }, /* @__PURE__ */ e.createElement(O, { iconName: c, iconSize: "m" })), /* @__PURE__ */ e.createElement("span", { className: `${t}__link-label` }, l))
+      /* @__PURE__ */ e.createElement("span", { key: a, className: `${t}__item-inner` }, /* @__PURE__ */ e.createElement("span", { className: `${t}__link-icon` }, /* @__PURE__ */ e.createElement(O, { iconName: c, iconSize: "m" })), /* @__PURE__ */ e.createElement("span", { className: `${t}__link-label` }, a))
     ] : [
-      /* @__PURE__ */ e.createElement("span", { key: l, className: `${t}__item-inner` }, /* @__PURE__ */ e.createElement("span", { className: `${t}__link-label` }, l))
+      /* @__PURE__ */ e.createElement("span", { key: a, className: `${t}__item-inner` }, /* @__PURE__ */ e.createElement("span", { className: `${t}__link-label` }, a))
     ];
-    if (a) {
-      const i = a[0].linkContent;
-      a1(i) && (n = h1(i, {
-        ...typeof l == "string" ? { children: s } : {}
+    if (l) {
+      const i = l[0].linkContent;
+      l1(i) && (n = h1(i, {
+        ...typeof a == "string" ? { children: s } : {}
       }));
     } else
       n = null;
   }
-  return a1(l) && (c ? n = h1(
-    l,
-    Object.assign({}, l.props, {
+  return l1(a) && (c ? n = h1(
+    a,
+    Object.assign({}, a.props, {
       children: [
-        /* @__PURE__ */ e.createElement("span", { key: c, className: `${t}__item-inner` }, /* @__PURE__ */ e.createElement("span", { className: `${t}__link-icon` }, /* @__PURE__ */ e.createElement(O, { iconName: c, iconSize: "m" })), /* @__PURE__ */ e.createElement("span", { className: `${t}__link-label` }, l.props.children))
+        /* @__PURE__ */ e.createElement("span", { key: c, className: `${t}__item-inner` }, /* @__PURE__ */ e.createElement("span", { className: `${t}__link-icon` }, /* @__PURE__ */ e.createElement(O, { iconName: c, iconSize: "m" })), /* @__PURE__ */ e.createElement("span", { className: `${t}__link-label` }, a.props.children))
       ]
     })
-  ) : n = l), n;
+  ) : n = a), n;
 }, w0 = ({
   ariaLabel: t,
-  className: l,
-  menuItems: a,
+  className: a,
+  menuItems: l,
   size: c = "s",
   ...n
 }) => {
@@ -4537,24 +4537,24 @@ const _4 = {
   i && (s = i.isMobile);
   const r = t1(null), d = "pds-button-nav", o = s ? `${d}--isMobile` : null, m = `${d}--${c}`;
   K(() => {
-    const h = (w) => {
+    const h = (M) => {
       if (s) return;
-      const g = r.current;
-      if (!g) return;
-      const C = Array.from(
-        g.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])')
+      const v = r.current;
+      if (!v) return;
+      const z = Array.from(
+        v.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])')
       );
-      if (C.length === 0) return;
-      const L = document.activeElement, _ = C.indexOf(L);
-      if (_ !== -1) {
-        if (w.key === "ArrowRight") {
-          w.preventDefault();
-          const D = (_ + 1) % C.length;
-          C[D].focus();
-        } else if (w.key === "ArrowLeft") {
-          w.preventDefault();
-          const D = (_ - 1 + C.length) % C.length;
-          C[D].focus();
+      if (z.length === 0) return;
+      const L = document.activeElement, $ = z.indexOf(L);
+      if ($ !== -1) {
+        if (M.key === "ArrowRight") {
+          M.preventDefault();
+          const D = ($ + 1) % z.length;
+          z[D].focus();
+        } else if (M.key === "ArrowLeft") {
+          M.preventDefault();
+          const D = ($ - 1 + z.length) % z.length;
+          z[D].focus();
         }
       }
     };
@@ -4562,27 +4562,27 @@ const _4 = {
       document.removeEventListener("keydown", h);
     };
   }, [s]);
-  const z = ({ isActive: h, linkContent: w }) => {
-    const g = `${d}__item`;
+  const C = ({ isActive: h, linkContent: M }) => {
+    const v = `${d}__item`;
     return /* @__PURE__ */ e.createElement(
       "li",
       {
-        className: M([
-          g,
-          h ? `${g}--active` : null
+        className: w([
+          v,
+          h ? `${v}--active` : null
         ])
       },
-      w
+      M
     );
-  }, p = a.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: `${d}__menu` }, a.map((h, w) => /* @__PURE__ */ e.createElement(
-    z,
+  }, g = l.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: `${d}__menu` }, l.map((h, M) => /* @__PURE__ */ e.createElement(
+    C,
     {
-      key: w,
+      key: M,
       isActive: S1(h),
       linkContent: h.linkContent
     }
   ))) : null, f = [];
-  a.map((h) => {
+  l.map((h) => {
     h.linkContent && (S1(h) ? f.unshift({
       linkContent: h.linkContent,
       isLink: !0
@@ -4605,104 +4605,104 @@ const _4 = {
     {
       ref: r,
       "aria-label": t,
-      className: M([
+      className: w([
         d,
         m,
         o,
-        l ?? ""
+        a ?? ""
       ]),
       ...n
     },
-    s ? u : p
+    s ? u : g
   );
-}, A4 = ({
+}, T4 = ({
   className: t,
-  headingText: l,
-  menuItems: a,
+  headingText: a,
+  menuItems: l,
   selectTextFallback: c = "Navigate to...",
   ...n
 }) => {
-  const s = "pds-dropdown-menu", [i, r] = j(!1), [d, o] = j(null), m = I2(a), z = m ? m.props.children : c, p = /* @__PURE__ */ e.createElement(
+  const s = "pds-dropdown-menu", [i, r] = j(!1), [d, o] = j(null), m = I2(l), C = m ? m.props.children : c, g = /* @__PURE__ */ e.createElement(
     O,
     {
       className: `${s}__active-icon`,
       iconName: "check",
       iconSize: "m"
     }
-  ), f = (H) => {
-    H.key === "Enter" && L.current[d].querySelector("a")?.click();
-  }, u = (H) => {
-    H.target.nodeName === "A" && r(!1);
+  ), f = (S) => {
+    S.key === "Enter" && L.current[d].querySelector("a")?.click();
+  }, u = (S) => {
+    S.target.nodeName === "A" && r(!1);
   };
   K(() => {
     if (i) {
-      const H = document.querySelector(".pds-dropdown-menu__dropdown");
-      return H.addEventListener("click", u), () => {
-        H.removeEventListener("click", u);
+      const S = document.querySelector(".pds-dropdown-menu__dropdown");
+      return S.addEventListener("click", u), () => {
+        S.removeEventListener("click", u);
       };
     }
   }, [i]);
   const h = ({
-    item: H,
-    level: $
+    item: S,
+    level: _
   }) => {
-    const F = T4(
-      H.linkContent,
-      H.links
+    const A = F4(
+      S.linkContent,
+      S.links
     );
     return {
-      ...H,
-      level: $,
+      ...S,
+      level: _,
       linkContent: h1(
-        F,
-        Object.assign({}, F.props, {
+        A,
+        Object.assign({}, A.props, {
           tabIndex: -1
         })
       )
     };
-  }, w = (H) => {
-    const $ = [];
-    return H.forEach((F) => {
-      F.links ? ($.push(h({ item: F, level: "top-level" })), F.links.forEach((W) => {
-        W.links ? ($.push(h({ item: W, level: "second-level" })), W.links.forEach((Q) => {
-          Q.links && ($.push(
+  }, M = (S) => {
+    const _ = [];
+    return S.forEach((A) => {
+      A.links ? (_.push(h({ item: A, level: "top-level" })), A.links.forEach((W) => {
+        W.links ? (_.push(h({ item: W, level: "second-level" })), W.links.forEach((Q) => {
+          Q.links && (_.push(
             h({ item: Q, level: "third-level" })
           ), Q.links.forEach((U) => {
-            $.push(
+            _.push(
               h({ item: U, level: "fourth-level" })
             );
-          })), $.push(
+          })), _.push(
             h({ item: Q, level: "third-level" })
           );
-        })) : $.push(h({ item: W, level: "second-level" }));
-      })) : $.push(h({ item: F, level: "top-level" }));
-    }), $;
-  }, { context: g, refs: C } = H1({
+        })) : _.push(h({ item: W, level: "second-level" }));
+      })) : _.push(h({ item: A, level: "top-level" }));
+    }), _;
+  }, { context: v, refs: z } = H1({
     placement: "bottom-start",
     open: i,
     onOpenChange: r,
-    whileElementsMounted: A1
-  }), L = t1([]), _ = Y2(g, {
+    whileElementsMounted: T1
+  }), L = t1([]), $ = Y2(v, {
     listRef: L,
     activeIndex: d,
     onNavigate: o,
     loop: !0,
     openOnArrowKeyDown: !0,
     focusItemOnHover: !0
-  }), D = $2(g, { event: "mousedown" }), k = F1(g), y = B1(g, { role: "menu" }), v = X2(g, {
+  }), D = $2(v, { event: "mousedown" }), k = A1(v), y = B1(v, { role: "menu" }), p = X2(v, {
     listRef: L,
     activeIndex: d,
     selectedIndex: null,
-    onMatch: (H) => {
-      i || r(!0), o(H);
+    onMatch: (S) => {
+      i || r(!0), o(S);
     },
-    findMatch: (H, $) => {
-      const F = $.toLowerCase();
-      return H.find((W) => (W?.textContent?.trim().toLowerCase() ?? "").startsWith(F));
+    findMatch: (S, _) => {
+      const A = _.toLowerCase();
+      return S.find((W) => (W?.textContent?.trim().toLowerCase() ?? "").startsWith(A));
     }
   }), { getFloatingProps: x, getItemProps: P, getReferenceProps: N } = R1(
-    [k, y, D, _, v]
-  ), { isMounted: E, styles: Z } = _2(g, {
+    [k, y, D, $, p]
+  ), { isMounted: E, styles: Z } = _2(v, {
     duration: {
       open: 300,
       close: 300
@@ -4717,15 +4717,15 @@ const _4 = {
       opacity: 0
     }
   });
-  return /* @__PURE__ */ e.createElement("div", { className: M([s, t ?? ""]), ...n }, l && /* @__PURE__ */ e.createElement("h2", { className: `${s}__heading pds-ts-m` }, l), /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: w([s, t ?? ""]), ...n }, a && /* @__PURE__ */ e.createElement("h2", { className: `${s}__heading pds-ts-m` }, a), /* @__PURE__ */ e.createElement(
     "button",
     {
-      ref: C.setReference,
+      ref: z.setReference,
       className: `${s}__trigger`,
       type: "button",
       ...N()
     },
-    /* @__PURE__ */ e.createElement("span", { className: `${s}__active-label` }, z),
+    /* @__PURE__ */ e.createElement("span", { className: `${s}__active-label` }, C),
     /* @__PURE__ */ e.createElement(
       O,
       {
@@ -4737,7 +4737,7 @@ const _4 = {
   ), E && /* @__PURE__ */ e.createElement(
     "ul",
     {
-      ref: C.setFloating,
+      ref: z.setFloating,
       className: `${s}__dropdown ${s}__menu ${s}__menu--top-level`,
       style: {
         ...Z,
@@ -4745,23 +4745,23 @@ const _4 = {
       },
       ...x()
     },
-    w(a).map((H, $) => /* @__PURE__ */ e.createElement(
+    M(l).map((S, _) => /* @__PURE__ */ e.createElement(
       "li",
       {
-        key: $,
-        ref: (F) => {
-          L.current[$] = F;
+        key: _,
+        ref: (A) => {
+          L.current[_] = A;
         },
-        className: `${s}__item ${s}__item--${H.level} ${H.isActive === !0 ? `${s}__item--active` : ""}`,
+        className: `${s}__item ${s}__item--${S.level} ${S.isActive === !0 ? `${s}__item--active` : ""}`,
         onKeyDown: f,
-        tabIndex: d === $ ? 0 : -1,
+        tabIndex: d === _ ? 0 : -1,
         ...P()
       },
-      H.linkContent,
-      H.isActive === !0 && p
+      S.linkContent,
+      S.isActive === !0 && g
     ))
   ));
-}, F4 = /* @__PURE__ */ e.createElement(
+}, A4 = /* @__PURE__ */ e.createElement(
   "svg",
   {
     "aria-label": "Pantheon",
@@ -4773,18 +4773,12 @@ const _4 = {
     viewBox: "0 0 165 50",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ e.createElement(
-    "path",
-    {
-      d: "M2.2 0L6.6 10.6H1L2.8 15.2H14.2L2.2 0Z",
-      fill: "var(--pds-color-brand-secondary-default)"
-    }
-  ),
+  /* @__PURE__ */ e.createElement("path", { d: "M2.2 0L6.6 10.6H1L2.8 15.2H14.2L2.2 0Z", fill: "#FFDC28" }),
   /* @__PURE__ */ e.createElement(
     "path",
     {
       d: "M17.1 38.5L15.2 33.9H12.6L7.20001 20.8H4.90001L10.3 33.9H3.70001L15.9 49.1L11.5 38.5H17.1Z",
-      fill: "var(--pds-color-brand-secondary-default)"
+      fill: "#FFDC28"
     }
   ),
   /* @__PURE__ */ e.createElement(
@@ -4911,18 +4905,12 @@ const _4 = {
     viewBox: "0 0 20 50",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ e.createElement(
-    "path",
-    {
-      d: "M2.2 0L6.6 10.6H1L2.8 15.2H14.2L2.2 0Z",
-      fill: "var(--pds-color-brand-secondary-default)"
-    }
-  ),
+  /* @__PURE__ */ e.createElement("path", { d: "M2.2 0L6.6 10.6H1L2.8 15.2H14.2L2.2 0Z", fill: "#FFDC28" }),
   /* @__PURE__ */ e.createElement(
     "path",
     {
       d: "M17.1 38.5L15.2 33.9H12.6L7.20001 20.8H4.90001L10.3 33.9H3.70001L15.9 49.1L11.5 38.5H17.1Z",
-      fill: "var(--pds-color-brand-secondary-default)"
+      fill: "#FFDC28"
     }
   ),
   /* @__PURE__ */ e.createElement(
@@ -5051,17 +5039,17 @@ const _4 = {
   )
 ), R4 = ({
   className: t,
-  colorType: l = "default",
-  displayType: a = "full",
+  colorType: a = "default",
+  displayType: l = "full",
   linkContent: c,
   subBrand: n,
   ...s
 }) => {
-  const i = "pds-pantheon-logo", r = a && a !== "full" ? `${i}--${a}` : null, d = l && l !== "default" ? `${i}--${l}` : null;
+  const i = "pds-pantheon-logo", r = l && l !== "full" ? `${i}--${l}` : null, d = a && a !== "default" ? `${i}--${a}` : null;
   let o;
-  switch (a) {
+  switch (l) {
     case "full":
-      o = F4;
+      o = A4;
       break;
     case "icon":
       o = s2;
@@ -5075,8 +5063,8 @@ const _4 = {
     case "sub-brand-small":
       o = s2;
   }
-  const m = a1(c) && typeof c.props.children == "string" ? c.props.children : "", z = a1(c) ? c.type : null, p = a1(c) && z ? /* @__PURE__ */ e.createElement(
-    z,
+  const m = l1(c) && typeof c.props.children == "string" ? c.props.children : "", C = l1(c) ? c.type : null, g = l1(c) && C ? /* @__PURE__ */ e.createElement(
+    C,
     {
       ...Object.assign({}, c.props, {
         children: o,
@@ -5087,7 +5075,7 @@ const _4 = {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([
+      className: w([
         i,
         r,
         d,
@@ -5095,31 +5083,31 @@ const _4 = {
       ]),
       ...s
     },
-    c ? p : o,
+    c ? g : o,
     n && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "pds-pantheon-logo__separator" }), /* @__PURE__ */ e.createElement("div", { className: "pds-pantheon-logo__sub-brand-wordmark" }, n))
   );
 }, q4 = ({
   icon: t,
-  isActive: l,
-  isSidebarCollapsed: a,
+  isActive: a,
+  isSidebarCollapsed: l,
   labels: c,
   linkContent: n,
   links: s
 }) => {
-  const i = "pds-side-nav-global", r = `${i}__item`, d = `${i}__menu`, o = /* @__PURE__ */ e.createElement("div", { className: `${r}-wrapper` }, i2(i, n, s, t)), m = (v, x) => /* @__PURE__ */ e.createElement(
+  const i = "pds-side-nav-global", r = `${i}__item`, d = `${i}__menu`, o = /* @__PURE__ */ e.createElement("div", { className: `${r}-wrapper` }, i2(i, n, s, t)), m = (p, x) => /* @__PURE__ */ e.createElement(
     "ul",
     {
-      className: M([
+      className: w([
         d,
         `${d}--${x}`,
-        l ? `${d}--expanded` : null
+        a ? `${d}--expanded` : null
       ])
     },
-    v.map((P, N) => /* @__PURE__ */ e.createElement(
+    p.map((P, N) => /* @__PURE__ */ e.createElement(
       "li",
       {
         key: N,
-        className: M([
+        className: w([
           r,
           `${r}--${x}`,
           S1(P) ? `${r}--active` : null
@@ -5127,32 +5115,32 @@ const _4 = {
       },
       P.linkContent
     ))
-  ), [z, p] = j(!1), f = t1(z), { context: u, floatingStyles: h, refs: w } = H1({
+  ), [C, g] = j(!1), f = t1(C), { context: u, floatingStyles: h, refs: M } = H1({
     placement: "right-start",
-    open: z,
-    onOpenChange: p,
+    open: C,
+    onOpenChange: g,
     middleware: [M2(8), r2(), w2()],
-    whileElementsMounted: A1
+    whileElementsMounted: T1
   });
   K(() => {
-    if (f.current && !z && a && w.reference.current) {
-      const v = w.reference.current;
-      v instanceof HTMLElement && v.querySelector("a")?.focus();
+    if (f.current && !C && l && M.reference.current) {
+      const p = M.reference.current;
+      p instanceof HTMLElement && p.querySelector("a")?.focus();
     }
-    f.current = z;
-  }, [z, a, w.reference]);
-  const g = E2(u, {
+    f.current = C;
+  }, [C, l, M.reference]);
+  const v = E2(u, {
     move: !1,
     delay: { open: 100, close: 0 },
     handleClose: Q2()
-  }), C = F1(u), L = B1(u, { role: "menu" }), { getFloatingProps: _, getReferenceProps: D } = R1([
-    g,
-    C,
+  }), z = A1(u), L = B1(u, { role: "menu" }), { getFloatingProps: $, getReferenceProps: D } = R1([
+    v,
+    z,
     L
-  ]), k = (v) => {
-    a && s && (v.key === "ArrowDown" || v.key === "ArrowRight" || v.key === " " || v.key === "Spacebar") && (v.preventDefault(), p(!0));
-  }, y = (v) => {
-    const x = v.currentTarget, P = x.parentElement?.nextElementSibling;
+  ]), k = (p) => {
+    l && s && (p.key === "ArrowDown" || p.key === "ArrowRight" || p.key === " " || p.key === "Spacebar") && (p.preventDefault(), g(!0));
+  }, y = (p) => {
+    const x = p.currentTarget, P = x.parentElement?.nextElementSibling;
     if (!P) return;
     const N = x.getAttribute("aria-expanded") === "false";
     x.classList.toggle(`${i}__toggle--expanded`, N), x.setAttribute("aria-expanded", N ? "true" : "false"), P.classList.toggle(`${d}--expanded`, N);
@@ -5160,13 +5148,13 @@ const _4 = {
   return /* @__PURE__ */ e.createElement(
     "li",
     {
-      ref: a ? w.setReference : null,
-      className: M([
+      ref: l ? M.setReference : null,
+      className: w([
         r,
         `${r}--top-level`,
         s ? `${r}--has-children` : null,
-        a ? `${r}--collapsed` : null,
-        l ? `${r}--active` : null
+        l ? `${r}--collapsed` : null,
+        a ? `${r}--active` : null
       ]),
       ...D(),
       onKeyDown: k
@@ -5176,30 +5164,30 @@ const _4 = {
       n,
       s,
       t
-    ), !a && /* @__PURE__ */ e.createElement(
+    ), !l && /* @__PURE__ */ e.createElement(
       "button",
       {
-        "aria-expanded": l,
-        className: M([
+        "aria-expanded": a,
+        className: w([
           `${i}__toggle`,
-          l ? `${i}__toggle--expanded` : null
+          a ? `${i}__toggle--expanded` : null
         ]),
         onClick: y,
         type: "button"
       },
       /* @__PURE__ */ e.createElement(O, { iconName: "angleDown", iconSize: "m" }),
       /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, `${c.toggle} ${t2(n)} ${c.submenu}`)
-    )), !a && m(s, "second-level"), a && z && /* @__PURE__ */ e.createElement(
+    )), !l && m(s, "second-level"), l && C && /* @__PURE__ */ e.createElement(
       "div",
       {
-        ref: w.setFloating,
+        ref: M.setFloating,
         className: `${i}__flyout`,
         style: h,
-        ..._()
+        ...$()
       },
       /* @__PURE__ */ e.createElement("div", { className: `${i}__flyout-heading` }, t2(n)),
       m(s, "second-level-flyout")
-    )) : /* @__PURE__ */ e.createElement(e.Fragment, null, a ? /* @__PURE__ */ e.createElement(
+    )) : /* @__PURE__ */ e.createElement(e.Fragment, null, l ? /* @__PURE__ */ e.createElement(
       I1,
       {
         content: t2(n),
@@ -5214,8 +5202,8 @@ const _4 = {
   );
 }, E0 = ({
   ariaLabel: t,
-  className: l,
-  hasLogo: a,
+  className: a,
+  hasLogo: l,
   isSidebarCollapsed: c,
   labels: n = {
     submenu: "submenu",
@@ -5226,7 +5214,7 @@ const _4 = {
   mobileMenuSelectTextFallback: r = "Navigate to...",
   ...d
 }) => {
-  const o = "pds-side-nav-global", m = c ? `${o}--collapsed` : `${o}--expanded`, z = /* @__PURE__ */ e.createElement(e.Fragment, null, a && /* @__PURE__ */ e.createElement("div", { className: `${o}__logo-wrapper` }, /* @__PURE__ */ e.createElement(
+  const o = "pds-side-nav-global", m = c ? `${o}--collapsed` : `${o}--expanded`, C = /* @__PURE__ */ e.createElement(e.Fragment, null, l && /* @__PURE__ */ e.createElement("div", { className: `${o}__logo-wrapper` }, /* @__PURE__ */ e.createElement(
     R4,
     {
       className: `${o}__logo`,
@@ -5244,7 +5232,7 @@ const _4 = {
       linkContent: u.linkContent,
       links: u.links
     }
-  )))), p = i.map((u) => ({
+  )))), g = i.map((u) => ({
     ...u,
     linkContent: i2(
       o,
@@ -5253,10 +5241,10 @@ const _4 = {
       u.icon
     )
   })), f = /* @__PURE__ */ e.createElement(
-    A4,
+    T4,
     {
       className: `${o}__dropdown-menu`,
-      menuItems: p,
+      menuItems: g,
       selectTextFallback: r
     }
   );
@@ -5264,10 +5252,10 @@ const _4 = {
     "nav",
     {
       "aria-label": t,
-      className: M([o, m, l]),
+      className: w([o, m, a]),
       ...d
     },
-    z,
+    C,
     f
   );
 }, G4 = {
@@ -5275,84 +5263,84 @@ const _4 = {
   warning: "triangleExclamation",
   critical: "diamondExclamation",
   discovery: "bullhorn"
-}, a2 = 200, W4 = 50, $0 = ({
+}, l2 = 200, W4 = 50, $0 = ({
   banners: t,
-  className: l,
-  dataContext: a = "product",
+  className: a,
+  dataContext: l = "product",
   dismissLabel: c = "Dismiss",
   labelNext: n = "Go to next message",
   labelPrevious: s = "Go to previous message",
   typeLabels: i = { ...h2, neutral: "Notice" },
   ...r
 }) => {
-  const d = a === "marketing", [o, m] = j(t), [z, p] = j(null), [f, u] = j(null), [h, w] = j({});
+  const d = l === "marketing", [o, m] = j(t), [C, g] = j(null), [f, u] = j(null), [h, M] = j({});
   K(() => {
     m(t);
   }, [t]);
-  const g = o.length;
-  if (g === 0)
+  const v = o.length;
+  if (v === 0)
     return null;
-  const C = "pds-banner", L = g > 1 ? `${C}-group--multiple` : null, _ = {
-    critical: `${C}--critical`,
-    discovery: `${C}--discovery`,
-    info: `${C}--info`,
-    neutral: `${C}--neutral`,
-    warning: `${C}--warning`
-  }, D = o[0].type, k = D ? `${C}-group--${D}` : null, y = (E) => Y1 - E, v = (E) => E === 0 ? 0 : -1, x = () => {
-    p(o[0].id), setTimeout(() => {
+  const z = "pds-banner", L = v > 1 ? `${z}-group--multiple` : null, $ = {
+    critical: `${z}--critical`,
+    discovery: `${z}--discovery`,
+    info: `${z}--info`,
+    neutral: `${z}--neutral`,
+    warning: `${z}--warning`
+  }, D = o[0].type, k = D ? `${z}-group--${D}` : null, y = (E) => Y1 - E, p = (E) => E === 0 ? 0 : -1, x = () => {
+    g(o[0].id), setTimeout(() => {
       m((E) => [
         ...E.slice(1),
         E[0]
-      ]), p(null);
-    }, a2);
+      ]), g(null);
+    }, l2);
   }, P = () => {
-    w({
+    M({
       [o[0].id]: Y1 + 2,
-      [o[g - 1].id]: Y1 + 1
+      [o[v - 1].id]: Y1 + 1
     }), setTimeout(() => {
-      p(o[0].id);
+      g(o[0].id);
     }, W4), setTimeout(() => {
       m((E) => [
         E[E.length - 1],
         ...E.slice(0, E.length - 1)
-      ]), p(null), w({});
-    }, a2);
+      ]), g(null), M({});
+    }, l2);
   }, N = (E, Z) => {
-    const { iconName: H, id: $, isDismissible: F, message: W, onDismiss: Q, type: U } = E, l1 = U === "critical" ? "alert" : "status", s1 = `${i[U]}:  `, c1 = (T) => {
-      T.preventDefault(), u($), setTimeout(() => {
+    const { iconName: S, id: _, isDismissible: A, message: W, onDismiss: Q, type: U } = E, a1 = U === "critical" ? "alert" : "status", s1 = `${i[U]}:  `, c1 = (F) => {
+      F.preventDefault(), u(_), setTimeout(() => {
         Q?.(), u(null), m((B) => B.filter(
-          (e1) => e1.id !== $
+          (e1) => e1.id !== _
         ));
-      }, a2);
-    }, n1 = h[$] ?? y(Z);
+      }, l2);
+    }, n1 = h[_] ?? y(Z);
     return /* @__PURE__ */ e.createElement(
       "div",
       {
-        key: $,
-        className: M([
-          C,
-          _[U],
-          z === $ ? `${C}--fading` : null,
-          f === $ ? `${C}--dismissing` : null
+        key: _,
+        className: w([
+          z,
+          $[U],
+          C === _ ? `${z}--fading` : null,
+          f === _ ? `${z}--dismissing` : null
         ]),
-        id: $,
-        role: l1,
+        id: _,
+        role: a1,
         style: { zIndex: n1 }
       },
-      /* @__PURE__ */ e.createElement("div", { className: `${C}__content` }, /* @__PURE__ */ e.createElement(
+      /* @__PURE__ */ e.createElement("div", { className: `${z}__content` }, /* @__PURE__ */ e.createElement(
         O,
         {
-          className: `${C}__icon ${C}__icon--${E.type}`,
-          iconName: U === "neutral" ? H : G4[U],
+          className: `${z}__icon ${z}__icon--${E.type}`,
+          iconName: U === "neutral" ? S : G4[U],
           iconSize: d ? "l" : "m"
         }
-      ), /* @__PURE__ */ e.createElement("div", { className: `${C}__message` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, s1, " "), W)),
-      F && /* @__PURE__ */ e.createElement(
+      ), /* @__PURE__ */ e.createElement("div", { className: `${z}__message` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, s1, " "), W)),
+      A && /* @__PURE__ */ e.createElement(
         "button",
         {
-          className: `${C}__dismiss-button`,
+          className: `${z}__dismiss-button`,
           onClick: c1,
-          tabIndex: v(Z),
+          tabIndex: p(Z),
           type: "button"
         },
         c
@@ -5362,44 +5350,44 @@ const _4 = {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([
-        `${C}-group`,
+      className: w([
+        `${z}-group`,
         k,
         L,
-        l ?? ""
+        a ?? ""
       ]),
-      "data-context": a,
+      "data-context": l,
       ...r
     },
-    g > 1 ? /* @__PURE__ */ e.createElement("div", { className: `${C}__navigation` }, /* @__PURE__ */ e.createElement(
-      T1,
+    v > 1 ? /* @__PURE__ */ e.createElement("div", { className: `${z}__navigation` }, /* @__PURE__ */ e.createElement(
+      F1,
       {
         ariaLabel: s,
-        className: `${C}__nav-button ${C}__nav-button--prev`,
+        className: `${z}__nav-button ${z}__nav-button--prev`,
         iconName: "angleLeft",
         onClick: P,
         size: "m"
       }
     ), /* @__PURE__ */ e.createElement(
-      T1,
+      F1,
       {
         ariaLabel: n,
-        className: `${C}__nav-button ${C}__nav-button--next`,
+        className: `${z}__nav-button ${z}__nav-button--next`,
         iconName: "angleRight",
         onClick: x,
         size: "m"
       }
     ), o.map((E, Z) => N(E, Z))) : N(o[0], 0)
   );
-}, l2 = {
+}, a2 = {
   info: "circleInfo",
   warning: "triangleExclamation",
   success: "circleCheck",
   critical: "diamondExclamation"
 }, _0 = ({
   className: t,
-  message: l,
-  title: a,
+  message: a,
+  title: l,
   type: c,
   typeLabels: n = {
     ...h2,
@@ -5414,22 +5402,22 @@ const _4 = {
     info: `${i}--info`,
     critical: `${i}--critical`,
     working: `${i}--working`
-  }, d = c === "critical" ? "alert" : "status", o = `${n[c]}: `, m = typeof l == "string" ? /* @__PURE__ */ e.createElement("p", null, l) : l;
+  }, d = c === "critical" ? "alert" : "status", o = `${n[c]}: `, m = typeof a == "string" ? /* @__PURE__ */ e.createElement("p", null, a) : a;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([i, r[c], t ?? ""]),
+      className: w([i, r[c], t ?? ""]),
       role: d,
       ...s
     },
     /* @__PURE__ */ e.createElement("div", { className: `${i}__icon ${i}__icon-${c}` }, c === "working" ? /* @__PURE__ */ e.createElement(j1, { colorType: "monochromatic", size: "m" }) : /* @__PURE__ */ e.createElement(
       O,
       {
-        iconName: `${c}` in l2 ? l2[c] : l2.info,
+        iconName: `${c}` in a2 ? a2[c] : a2.info,
         iconSize: "m"
       }
     )),
-    /* @__PURE__ */ e.createElement("div", { className: `${i}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, o), /* @__PURE__ */ e.createElement("div", { className: `${i}__title` }, a), /* @__PURE__ */ e.createElement("div", { className: `${i}__message` }, m))
+    /* @__PURE__ */ e.createElement("div", { className: `${i}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, o), /* @__PURE__ */ e.createElement("div", { className: `${i}__title` }, l), /* @__PURE__ */ e.createElement("div", { className: `${i}__message` }, m))
   );
 }, c2 = {
   info: "circleInfo",
@@ -5439,8 +5427,8 @@ const _4 = {
   discovery: "squareQuestion"
 }, y0 = ({
   className: t,
-  ctaButton: l,
-  dataContext: a = "product",
+  ctaButton: a,
+  dataContext: l = "product",
   dismissLabel: c = "Dismiss",
   id: n,
   isDismissible: s,
@@ -5449,9 +5437,9 @@ const _4 = {
   title: d,
   type: o = "info",
   typeLabels: m = h2,
-  ...z
+  ...C
 }) => {
-  const p = a === "marketing", f = t1(null), u = "pds-section-message", h = {
+  const g = l === "marketing", f = t1(null), u = "pds-section-message", h = {
     error: `${u}--error`,
     success: `${u}--success`,
     warning: `${u}--warning`,
@@ -5460,12 +5448,12 @@ const _4 = {
     discovery: `${u}--discovery`,
     dismissing: `${u}--dismissing`,
     dismissed: `${u}--dismissed`
-  }, w = s ? `${u}--hasDismiss` : null, g = d ? `${u}--hasTitle` : null, C = o === "critical" ? "alert" : "status", L = `${m[o]}: `, _ = typeof i == "string" ? /* @__PURE__ */ e.createElement("p", null, i) : i, D = () => {
+  }, M = s ? `${u}--hasDismiss` : null, v = d ? `${u}--hasTitle` : null, z = o === "critical" ? "alert" : "status", L = `${m[o]}: `, $ = typeof i == "string" ? /* @__PURE__ */ e.createElement("p", null, i) : i, D = () => {
     f.current.addEventListener("animationend", k, {
       once: !0
     });
-  }, k = (v) => {
-    r(v, n);
+  }, k = (p) => {
+    r(p, n);
   }, y = () => {
     D(), f.current.classList.toggle(h.dismissing), setTimeout(() => {
       f.current.classList.toggle(h.dismissing), f.current.classList.toggle(h.dismissed);
@@ -5475,31 +5463,31 @@ const _4 = {
     "div",
     {
       ref: f,
-      className: M([
+      className: w([
         u,
         h[o],
-        w,
-        g,
+        M,
+        v,
         t ?? ""
       ]),
-      "data-context": a,
+      "data-context": l,
       id: n,
-      role: C,
-      ...z
+      role: z,
+      ...C
     },
     /* @__PURE__ */ e.createElement("div", { className: `${u}__content` }, /* @__PURE__ */ e.createElement("div", { className: `${u}__icon ${u}__icon-${o}` }, /* @__PURE__ */ e.createElement(
       O,
       {
         iconName: `${o}` in c2 ? c2[o] : c2.info,
-        iconSize: p ? "l" : "m"
+        iconSize: g ? "l" : "m"
       }
-    )), /* @__PURE__ */ e.createElement("div", { className: `${u}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, L), d && /* @__PURE__ */ e.createElement("div", { className: `${u}__title` }, d), /* @__PURE__ */ e.createElement("div", { className: `${u}__message` }, _))),
-    (l || s) && /* @__PURE__ */ e.createElement("div", { className: `${u}__actions` }, l && /* @__PURE__ */ e.createElement(
+    )), /* @__PURE__ */ e.createElement("div", { className: `${u}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, L), d && /* @__PURE__ */ e.createElement("div", { className: `${u}__title` }, d), /* @__PURE__ */ e.createElement("div", { className: `${u}__message` }, $))),
+    (a || s) && /* @__PURE__ */ e.createElement("div", { className: `${u}__actions` }, a && /* @__PURE__ */ e.createElement(
       q1,
       {
-        ...l,
+        ...a,
         className: `${u}__cta`,
-        size: p ? "m" : "s",
+        size: g ? "m" : "s",
         variant: "secondary"
       }
     ), s && /* @__PURE__ */ e.createElement(
@@ -5508,7 +5496,7 @@ const _4 = {
         ariaLabel: c,
         className: `${u}__dismiss`,
         onClick: y,
-        size: p ? "xl" : "l"
+        size: g ? "xl" : "l"
       }
     ))
   );
@@ -5525,8 +5513,8 @@ const _4 = {
   working: "Working..."
 }, Y4 = ({
   children: t,
-  className: l,
-  id: a,
+  className: a,
+  id: l,
   type: c = "info",
   typeLabels: n = K4
 }) => {
@@ -5540,8 +5528,8 @@ const _4 = {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([s, i[c], l]),
-      id: a
+      className: w([s, i[c], a]),
+      id: l
     },
     /* @__PURE__ */ e.createElement("div", { className: `${s}__icon-container` }, c === "working" ? /* @__PURE__ */ e.createElement(j1, { colorType: "monochromatic-reverse", size: "l" }) : /* @__PURE__ */ e.createElement(
       O,
@@ -5555,25 +5543,25 @@ const _4 = {
   );
 }, X4 = ({
   ariaLabel: t,
-  closeToast: l
+  closeToast: a
 }) => /* @__PURE__ */ e.createElement(
   G1,
   {
     ariaLabel: t || "Close",
     className: "pds-toaster__close-button",
-    onClick: (a) => {
-      a.stopPropagation(), l(a);
+    onClick: (l) => {
+      l.stopPropagation(), a(l);
     },
     size: "l",
     tabIndex: 0
   }
 ), k0 = ({
   autoCloseDuration: t = !1,
-  className: l,
-  limit: a = 5,
+  className: a,
+  limit: l = 5,
   position: c = "bottom-right"
 }) => {
-  const s = M(["pds-toaster", l]);
+  const s = w(["pds-toaster", a]);
   return /* @__PURE__ */ e.createElement(
     t4,
     {
@@ -5583,7 +5571,7 @@ const _4 = {
       closeButton: X4,
       draggable: !1,
       icon: !1,
-      limit: a,
+      limit: l,
       position: c,
       role: "status",
       transition: s4
@@ -5592,84 +5580,84 @@ const _4 = {
 };
 var Q4 = /* @__PURE__ */ ((t) => (t.Critical = "critical", t.Info = "info", t.Success = "success", t.Warning = "warning", t.Working = "working", t))(Q4 || {});
 const x0 = () => {
-  const t = (a, c, n = {}) => {
-    const s = /* @__PURE__ */ e.createElement(Y4, { type: a }, c);
+  const t = (l, c, n = {}) => {
+    const s = /* @__PURE__ */ e.createElement(Y4, { type: l }, c);
     let i = {
       ...n
     };
-    return a === "critical" && (i = {
+    return l === "critical" && (i = {
       ...i,
       role: "alert"
-    }), a === "working" && (i = {
+    }), l === "working" && (i = {
       ...i,
       closeButton: !1,
       closeOnClick: !1
     }), g2(s, i);
-  }, l = a4({
+  }, a = l4({
     collapse: !1,
     enter: "pds-toast--bounceInPlace",
     exit: "pds-toast--slideOut"
   });
-  return [t, g2, l];
+  return [t, g2, a];
 }, N0 = ({
   children: t,
-  className: l,
-  padding: a = "standard",
+  className: a,
+  padding: l = "standard",
   variant: c = "default",
   ...n
 }) => {
-  const s = "pds-panel", i = c !== "default" ? `${s}--${c}` : null, r = `${s}__content`, d = a !== "standard" ? `${r}--pad-${a}` : null;
+  const s = "pds-panel", i = c !== "default" ? `${s}--${c}` : null, r = `${s}__content`, d = l !== "standard" ? `${r}--pad-${l}` : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([s, i, l ?? ""]),
+      className: w([s, i, a ?? ""]),
       ...n
     },
-    /* @__PURE__ */ e.createElement("div", { className: M([r, d]) }, t)
+    /* @__PURE__ */ e.createElement("div", { className: w([r, d]) }, t)
   );
 }, D0 = ({
   children: t,
-  className: l,
-  expandButtonAriaLabel: a,
+  className: a,
+  expandButtonAriaLabel: l,
   isExpandable: c = !1,
   ...n
 }) => {
-  const s = "pds-panel-row", [i, r] = j(!1), d = t1(null), o = t1(null), m = p1(t), z = m["items-left"], p = m["items-right"], f = m["items-below"], u = () => {
-    const h = o.current, w = d.current;
-    if (!h || !w) return;
-    const g = !i;
-    r(g), g ? (Object.assign(h.style, {
+  const s = "pds-panel-row", [i, r] = j(!1), d = t1(null), o = t1(null), m = p1(t), C = m["items-left"], g = m["items-right"], f = m["items-below"], u = () => {
+    const h = o.current, M = d.current;
+    if (!h || !M) return;
+    const v = !i;
+    r(v), v ? (Object.assign(h.style, {
       display: "block",
       height: "auto",
       opacity: "1"
-    }), w.classList.add("is-expanded")) : (Object.assign(h.style, {
+    }), M.classList.add("is-expanded")) : (Object.assign(h.style, {
       height: "0",
       opacity: "0",
       display: "none"
-    }), w.classList.remove("is-expanded"));
+    }), M.classList.remove("is-expanded"));
   };
   return /* @__PURE__ */ e.createElement(
     "li",
     {
-      className: M([s, l ?? ""]),
+      className: w([s, a ?? ""]),
       ...n,
       ref: d
     },
     /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: M([
+        className: w([
           `${s}__main`,
           c ? "is-expandable" : ""
         ])
       },
-      z && /* @__PURE__ */ e.createElement("div", { className: `${s}__items ${s}__items--left` }, z),
-      p && /* @__PURE__ */ e.createElement("div", { className: `${s}__items ${s}__items--right` }, p),
+      C && /* @__PURE__ */ e.createElement("div", { className: `${s}__items ${s}__items--left` }, C),
+      g && /* @__PURE__ */ e.createElement("div", { className: `${s}__items ${s}__items--right` }, g),
       c && /* @__PURE__ */ e.createElement(
         "button",
         {
           "aria-expanded": i,
-          "aria-label": a,
+          "aria-label": l,
           className: `${s}__expand-button`,
           onClick: u
         },
@@ -5694,20 +5682,20 @@ const x0 = () => {
   );
 }, P0 = ({
   alt: t = "",
-  className: l,
-  height: a,
+  className: a,
+  height: l,
   srcFallback: c,
   srcWebp: n,
   width: s,
   ...i
 }) => {
   const r = "pds-picture";
-  return /* @__PURE__ */ e.createElement("picture", { className: M([r, l ?? ""]) }, /* @__PURE__ */ e.createElement("source", { srcSet: n, type: "image/webp" }), /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("picture", { className: w([r, a ?? ""]) }, /* @__PURE__ */ e.createElement("source", { srcSet: n, type: "image/webp" }), /* @__PURE__ */ e.createElement(
     "img",
     {
       alt: t,
       className: `${r}__img`,
-      height: a,
+      height: l,
       src: c,
       width: s,
       ...i
@@ -5715,29 +5703,29 @@ const x0 = () => {
   ));
 }, S0 = ({
   className: t,
-  destination: l = "main",
-  text: a = "Skip to main content",
+  destination: a = "main",
+  text: l = "Skip to main content",
   ...c
 }) => /* @__PURE__ */ e.createElement(
   "a",
   {
-    className: M(["pds-skiplink", t]),
-    href: `#${l}`,
+    className: w(["pds-skiplink", t]),
+    href: `#${a}`,
     ...c
   },
-  a
+  l
 ), H0 = ({
   className: t,
-  label: l = null,
-  size: a = "s",
+  label: a = null,
+  size: l = "s",
   type: c = "neutral",
   ...n
 }) => {
-  const s = "pds-status-indicator", i = `${s}--${c}`, r = a !== "s" ? `${s}--${a}` : null;
+  const s = "pds-status-indicator", i = `${s}--${c}`, r = l !== "s" ? `${s}--${l}` : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([
+      className: w([
         s,
         i,
         r,
@@ -5753,12 +5741,12 @@ const x0 = () => {
         size: "m"
       }
     ) : /* @__PURE__ */ e.createElement("span", { "aria-hidden": "true", className: `${s}__icon`, role: "img" }),
-    l && /* @__PURE__ */ e.createElement("span", { className: "pds-status-indicator__label" }, l)
+    a && /* @__PURE__ */ e.createElement("span", { className: "pds-status-indicator__label" }, a)
   );
 }, I0 = ({
   className: t,
-  platform: l,
-  videoId: a,
+  platform: a,
+  videoId: l,
   videoTitle: c,
   ...n
 }) => {
@@ -5766,14 +5754,14 @@ const x0 = () => {
     "iframe",
     {
       allow: "autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media",
-      src: `https://fast.wistia.net/embed/iframe/${a}`,
+      src: `https://fast.wistia.net/embed/iframe/${l}`,
       title: `Wistia video player${c ? `: ${c}` : ""}`
     }
   ), r = /* @__PURE__ */ e.createElement(
     "iframe",
     {
       allow: "autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media",
-      src: `https://player.vimeo.com/video/${a}`,
+      src: `https://player.vimeo.com/video/${l}`,
       title: `Vimeo video player${c ? `: ${c}` : ""}`
     }
   ), d = /* @__PURE__ */ e.createElement(
@@ -5782,12 +5770,12 @@ const x0 = () => {
       allowFullScreen: !0,
       allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
       referrerPolicy: "strict-origin-when-cross-origin",
-      src: `https://www.youtube.com/embed/${a}`,
+      src: `https://www.youtube.com/embed/${l}`,
       title: `YouTube video player${c ? `: ${c}` : ""}`
     }
   );
   let o;
-  switch (l) {
+  switch (a) {
     case "vimeo":
       o = r;
       break;
@@ -5798,15 +5786,15 @@ const x0 = () => {
       o = d;
       break;
   }
-  return /* @__PURE__ */ e.createElement("div", { className: M([s, t ?? ""]), ...n }, o);
+  return /* @__PURE__ */ e.createElement("div", { className: w([s, t ?? ""]), ...n }, o);
 }, V0 = ({
   className: t,
-  option: l,
-  ...a
+  option: a,
+  ...l
 }) => {
-  const c = "pds-site-option-display", n = l.type ? P4[l.type] : "bolt", s = t1(null), [i] = l4(s), r = i.width / 16 - 7.5;
+  const c = "pds-site-option-display", n = a.type ? P4[a.type] : "bolt", s = t1(null), [i] = a4(s), r = i.width / 16 - 7.5;
   let d, o;
-  l.status === "active" && (d = "Active", o = "success"), l.status === "frozen" && (d = "Frozen", o = "frozen"), l.status === "restricted" && (d = "Restricted", o = "critical");
+  a.status === "active" && (d = "Active", o = "success"), a.status === "frozen" && (d = "Frozen", o = "frozen"), a.status === "restricted" && (d = "Restricted", o = "critical");
   const m = /* @__PURE__ */ e.createElement(
     o4,
     {
@@ -5819,9 +5807,9 @@ const x0 = () => {
     "div",
     {
       ref: s,
-      className: M([c, t ?? ""]),
-      title: l.name,
-      ...a
+      className: w([c, t ?? ""]),
+      title: a.name,
+      ...l
     },
     /* @__PURE__ */ e.createElement("div", { className: `${c}__inner`, style: { pointerEvents: "none" } }, /* @__PURE__ */ e.createElement("div", { className: `${c}__icon` }, /* @__PURE__ */ e.createElement(O, { iconName: n })), /* @__PURE__ */ e.createElement(
       "div",
@@ -5829,14 +5817,14 @@ const x0 = () => {
         className: `${c}__label`,
         style: { maxWidth: `${r}rem` }
       },
-      l.name
+      a.name
     )),
     /* @__PURE__ */ e.createElement("div", { className: `${c}__status`, style: { pointerEvents: "none" } }, m)
   );
 }, j0 = ({
   children: t,
-  className: l,
-  hasSidebarToggle: a,
+  className: a,
+  hasSidebarToggle: l,
   isSidebarCollapsed: c,
   labels: n = {
     collapseSidebar: "Collapse sidebar",
@@ -5846,39 +5834,40 @@ const x0 = () => {
   mainContentElement: i = "main",
   mainContentProps: r,
   onSidebarToggle: d,
-  sidebarBackground: o,
-  sidebarCollapsedWidth: m = 3.875,
-  sidebarExpandedWidth: z = "15%",
-  sidebarExpandedWidthMin: p = 13,
-  sidebarProps: f,
-  ...u
+  scrollableContent: o,
+  sidebarBackground: m,
+  sidebarCollapsedWidth: C = 3.875,
+  sidebarExpandedWidth: g = "15%",
+  sidebarExpandedWidthMin: f = 13,
+  sidebarProps: u,
+  ...h
 }) => {
-  let h = !1;
-  const w = C1(M1);
-  w && (h = w.isMobile);
-  const [g, C] = j(
+  let M = !1;
+  const v = C1(M1);
+  v && (M = v.isMobile);
+  const [z, L] = j(
     c || !1
   );
   K(() => {
-    C(c || !1);
+    L(c || !1);
   }, [c]);
-  const L = "pds-app-layout", _ = h ? `${L}--isMobile` : null, D = g ? `${m}rem` : `${z}`, k = {
-    backgroundColor: o || void 0,
-    minWidth: g ? `${m}rem` : `${p}rem`,
+  const $ = "pds-app-layout", D = M ? `${$}--isMobile` : null, k = o ? `${$}--scrollable` : null, y = z ? `${C}rem` : `${g}`, p = {
+    backgroundColor: m || void 0,
+    minWidth: z ? `${C}rem` : `${f}rem`,
     transition: "all 200ms ease-in-out",
-    width: D
-  }, y = () => {
+    width: y
+  }, x = () => {
     if (d) {
       d();
       return;
     }
-    C(!g);
-  }, v = p1(t), x = v.__unslotted, P = v.sidebar, N = B2(
+    L(!z);
+  }, P = p1(t), N = P.__unslotted, E = P.sidebar, Z = B2(
     i,
     {
       ...r,
-      className: M([
-        `${L}__main`,
+      className: w([
+        `${$}__main`,
         r?.className
       ]),
       style: {
@@ -5886,73 +5875,78 @@ const x0 = () => {
         backgroundColor: s || void 0
       }
     },
-    x
-  ), E = /* @__PURE__ */ e.createElement(e.Fragment, null, P && /* @__PURE__ */ e.createElement(
+    N
+  ), S = /* @__PURE__ */ e.createElement(e.Fragment, null, E && /* @__PURE__ */ e.createElement(
     "div",
     {
-      ...f,
-      className: M([
-        `${L}__sidebar`,
-        f?.className
+      ...u,
+      className: w([
+        `${$}__sidebar`,
+        u?.className
       ]),
       style: {
-        ...f?.style,
-        backgroundColor: o || void 0
+        ...u?.style,
+        backgroundColor: m || void 0
       }
     },
-    P
-  ), N), Z = /* @__PURE__ */ e.createElement(e.Fragment, null, P && /* @__PURE__ */ e.createElement(
+    E
+  ), Z), _ = /* @__PURE__ */ e.createElement(e.Fragment, null, E && /* @__PURE__ */ e.createElement(
     "div",
     {
-      ...f,
-      className: M([
-        `${L}__sidebar`,
-        g ? `${L}__sidebar--collapsed` : null,
-        f?.className
+      ...u,
+      className: w([
+        `${$}__sidebar`,
+        z ? `${$}__sidebar--collapsed` : null,
+        u?.className
       ]),
-      style: k
+      style: p
     },
-    a && /* @__PURE__ */ e.createElement(
+    l && /* @__PURE__ */ e.createElement(
       "button",
       {
-        "aria-expanded": !g,
-        "aria-label": g ? n.expandSidebar : n.collapseSidebar,
-        className: `${L}__sidebar-toggle-button`,
-        onClick: y,
-        title: g ? n.expandSidebar : n.collapseSidebar,
+        "aria-expanded": !z,
+        "aria-label": z ? n.expandSidebar : n.collapseSidebar,
+        className: `${$}__sidebar-toggle-button`,
+        onClick: x,
+        title: z ? n.expandSidebar : n.collapseSidebar,
         type: "button"
       },
-      /* @__PURE__ */ e.createElement("span", { className: `${L}__sidebar-toggle-icon` }, /* @__PURE__ */ e.createElement(O, { iconName: "angleLeft", iconSize: "s", verticalAlign: "-1px" }))
+      /* @__PURE__ */ e.createElement("span", { className: `${$}__sidebar-toggle-icon` }, /* @__PURE__ */ e.createElement(O, { iconName: "angleLeft", iconSize: "s", verticalAlign: "-1px" }))
     ),
-    /* @__PURE__ */ e.createElement("div", { className: `${L}__sidebar-inner` }, P)
-  ), N);
+    /* @__PURE__ */ e.createElement("div", { className: `${$}__sidebar-inner` }, E)
+  ), Z);
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([L, _, l ?? ""]),
-      ...u
+      className: w([
+        $,
+        D,
+        k,
+        a ?? ""
+      ]),
+      ...h
     },
-    h ? E : Z
+    M ? S : _
   );
 }, O0 = ({
   children: t,
-  className: l,
-  width: a = "standard",
+  className: a,
+  width: l = "standard",
   ...c
 }) => {
-  const n = "pds-container", s = a !== "standard" ? `${n}--${a}` : null;
+  const n = "pds-container", s = l !== "standard" ? `${n}--${l}` : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([n, s, l ?? ""]),
+      className: w([n, s, a ?? ""]),
       ...c
     },
     t
   );
 }, Z0 = ({
   children: t,
-  className: l,
-  sidebarMinWidth: a = 14.5,
+  className: a,
+  sidebarMinWidth: l = 14.5,
   sidebarWidth: c = "18%",
   ...n
 }) => {
@@ -5961,25 +5955,25 @@ const x0 = () => {
   i && (s = i.isMobile);
   const r = "pds-docs-layout", d = s ? `${r}--isMobile` : null, o = {
     width: c,
-    minWidth: `${a}rem`
-  }, m = p1(t), z = m.__unslotted || m.content, p = m.sidebar, f = /* @__PURE__ */ e.createElement(e.Fragment, null, p && /* @__PURE__ */ e.createElement("aside", { className: `${r}__sidebar` }, p), /* @__PURE__ */ e.createElement("div", { className: `${r}__content` }, z)), u = /* @__PURE__ */ e.createElement(e.Fragment, null, p && /* @__PURE__ */ e.createElement("aside", { className: `${r}__sidebar`, style: o }, /* @__PURE__ */ e.createElement("div", { className: `${r}__sidebar-inner` }, p)), /* @__PURE__ */ e.createElement("div", { className: `${r}__content` }, z));
+    minWidth: `${l}rem`
+  }, m = p1(t), C = m.__unslotted || m.content, g = m.sidebar, f = /* @__PURE__ */ e.createElement(e.Fragment, null, g && /* @__PURE__ */ e.createElement("aside", { className: `${r}__sidebar` }, g), /* @__PURE__ */ e.createElement("div", { className: `${r}__content` }, C)), u = /* @__PURE__ */ e.createElement(e.Fragment, null, g && /* @__PURE__ */ e.createElement("aside", { className: `${r}__sidebar`, style: o }, /* @__PURE__ */ e.createElement("div", { className: `${r}__sidebar-inner` }, g)), /* @__PURE__ */ e.createElement("div", { className: `${r}__content` }, C));
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([
+      className: w([
         r,
         d,
         "pds-container pds-container--x-wide",
-        l ?? ""
+        a ?? ""
       ]),
       ...n
     },
     s ? f : u
   );
-}, T0 = ({
+}, F0 = ({
   alignContent: t = "flex-start",
-  alignItems: l = "stretch",
-  children: a,
+  alignItems: a = "stretch",
+  children: l,
   className: c,
   flexDirection: n = "row",
   flexWrap: s = "nowrap",
@@ -5988,55 +5982,55 @@ const x0 = () => {
   mobileAlignContent: d,
   mobileAlignItems: o,
   mobileFlexDirection: m = "column",
-  mobileFlexWrap: z,
-  mobileGap: p,
+  mobileFlexWrap: C,
+  mobileGap: g,
   mobileJustifyContent: f,
   ...u
 }) => {
-  let w = H2() <= 640;
-  const g = C1(M1);
-  g && (w = g.isMobile);
-  const C = "pds-flex", L = `${C}-container`, _ = w ? `${L}--mobile` : null;
+  let M = H2() <= 640;
+  const v = C1(M1);
+  v && (M = v.isMobile);
+  const z = "pds-flex", L = `${z}-container`, $ = M ? `${L}--mobile` : null;
   let D = null;
-  w ? D = `${C}-direction--${m}` : n !== "row" && (D = `${C}-direction--${n}`);
+  M ? D = `${z}-direction--${m}` : n !== "row" && (D = `${z}-direction--${n}`);
   let k = null;
-  w ? z ? z !== "nowrap" && (k = `${C}-wrap--${z}`) : s !== "nowrap" && (k = `${C}-wrap--${s}`) : s !== "nowrap" && (k = `${C}-wrap--${s}`);
+  M ? C ? C !== "nowrap" && (k = `${z}-wrap--${C}`) : s !== "nowrap" && (k = `${z}-wrap--${s}`) : s !== "nowrap" && (k = `${z}-wrap--${s}`);
   let y = null;
-  w ? f ? f !== "flex-start" && (y = `${C}-justify--${f}`) : r !== "flex-start" && (y = `${C}-justify--${r}`) : r !== "flex-start" && (y = `${C}-justify--${r}`);
-  let v = null;
-  w ? o ? o !== "stretch" && (v = `${C}-align-items--${o}`) : l !== "stretch" && (v = `${C}-align-items--${l}`) : l !== "stretch" && (v = `${C}-align-items--${l}`);
+  M ? f ? f !== "flex-start" && (y = `${z}-justify--${f}`) : r !== "flex-start" && (y = `${z}-justify--${r}`) : r !== "flex-start" && (y = `${z}-justify--${r}`);
+  let p = null;
+  M ? o ? o !== "stretch" && (p = `${z}-align-items--${o}`) : a !== "stretch" && (p = `${z}-align-items--${a}`) : a !== "stretch" && (p = `${z}-align-items--${a}`);
   let x = null;
-  w ? d ? d !== "flex-start" && (x = `${C}-align-content--${d}`) : t !== "flex-start" && (x = `${C}-align-content--${t}`) : t !== "flex-start" && (x = `${C}-align-content--${t}`);
+  M ? d ? d !== "flex-start" && (x = `${z}-align-content--${d}`) : t !== "flex-start" && (x = `${z}-align-content--${t}`) : t !== "flex-start" && (x = `${z}-align-content--${t}`);
   let P = null;
-  return w ? p ? p !== "none" && (P = `${C}-gap--${p}`) : i !== "none" && (P = `${C}-gap--${i}`) : i !== "none" && (P = `${C}-gap--${i}`), /* @__PURE__ */ e.createElement(
+  return M ? g ? g !== "none" && (P = `${z}-gap--${g}`) : i !== "none" && (P = `${z}-gap--${i}`) : i !== "none" && (P = `${z}-gap--${i}`), /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([
+      className: w([
         L,
-        _,
+        $,
         D,
         k,
         y,
-        v,
+        p,
         x,
         P,
         c ?? ""
       ]),
       ...u
     },
-    a
+    l
   );
-}, A0 = ({
+}, T0 = ({
   children: t,
-  mobileMenuMaxWidth: l = 640
-}) => /* @__PURE__ */ e.createElement(S4, { mobileMenuMaxWidth: l }, /* @__PURE__ */ e.createElement(L4, null, t)), F0 = ({
+  mobileMenuMaxWidth: a = 640
+}) => /* @__PURE__ */ e.createElement(S4, { mobileMenuMaxWidth: a }, /* @__PURE__ */ e.createElement(L4, null, t)), A0 = ({
   children: t,
-  className: l,
-  gridGap: a = "standard",
+  className: a,
+  gridGap: l = "standard",
   verticalAlign: c = "start",
   ...n
 }) => {
-  const s = "pds-three-item-layout", i = a === "standard" ? "pds-grid" : `pds-grid pds-grid--${a}`, r = `${s}--${c}`, d = p1(t), o = [
+  const s = "pds-three-item-layout", i = l === "standard" ? "pds-grid" : `pds-grid pds-grid--${l}`, r = `${s}--${c}`, d = p1(t), o = [
     d["first-item"],
     d["second-item"],
     d["third-item"]
@@ -6044,18 +6038,18 @@ const x0 = () => {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([
+      className: w([
         s,
         i,
         r,
-        l
+        a
       ]),
       ...n
     },
-    o.map((m, z) => /* @__PURE__ */ e.createElement(
+    o.map((m, C) => /* @__PURE__ */ e.createElement(
       "div",
       {
-        key: z,
+        key: C,
         className: "pds-grid-item pds-grid-item--sm-12 pds-grid-item--md-4 pds-grid-item--lg-4"
       },
       m
@@ -6063,56 +6057,56 @@ const x0 = () => {
   );
 }, B0 = ({
   children: t,
-  className: l,
-  gridGap: a = "standard",
+  className: a,
+  gridGap: l = "standard",
   layoutVariant: c = "equal",
   verticalAlign: n = "start",
   ...s
 }) => {
-  const i = "pds-two-item-layout", r = a === "standard" ? "pds-grid" : `pds-grid pds-grid--${a}`, d = `${i}--${n}`, o = ["pds-grid-item--md-6"], m = ["pds-grid-item--md-4", "pds-grid-item--lg-3"], z = ["pds-grid-item--md-8", "pds-grid-item--lg-9"], p = ["pds-grid-item", "pds-grid-item--sm-4"];
+  const i = "pds-two-item-layout", r = l === "standard" ? "pds-grid" : `pds-grid pds-grid--${l}`, d = `${i}--${n}`, o = ["pds-grid-item--md-6"], m = ["pds-grid-item--md-4", "pds-grid-item--lg-3"], C = ["pds-grid-item--md-8", "pds-grid-item--lg-9"], g = ["pds-grid-item", "pds-grid-item--sm-4"];
   let f, u;
   switch (c) {
     case "equal":
-      f = p.concat(o), u = p.concat(o);
+      f = g.concat(o), u = g.concat(o);
       break;
     case "one-third-start":
-      f = p.concat(m), u = p.concat(z);
+      f = g.concat(m), u = g.concat(C);
       break;
     case "one-third-end":
-      f = p.concat(z), u = p.concat(m);
+      f = g.concat(C), u = g.concat(m);
   }
-  const h = p1(t), w = h["first-item"], g = h["second-item"];
+  const h = p1(t), M = h["first-item"], v = h["second-item"];
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: M([
+      className: w([
         i,
         r,
         d,
-        l
+        a
       ]),
       ...s
     },
-    /* @__PURE__ */ e.createElement("div", { className: f.join(" ").trim() }, w),
-    /* @__PURE__ */ e.createElement("div", { className: u.join(" ").trim() }, g)
+    /* @__PURE__ */ e.createElement("div", { className: f.join(" ").trim() }, M),
+    /* @__PURE__ */ e.createElement("div", { className: u.join(" ").trim() }, v)
   );
 }, R0 = () => {
-  const t = typeof window < "u", l = (n) => n >= h4 ? "xl" : n >= m4 ? "lg" : n >= d4 ? "md" : "sm", [a, c] = j(
-    t ? l(window.innerWidth) : "lg"
+  const t = typeof window < "u", a = (n) => n >= h4 ? "xl" : n >= m4 ? "lg" : n >= d4 ? "md" : "sm", [l, c] = j(
+    t ? a(window.innerWidth) : "lg"
   );
   return K(() => {
     if (!t) return;
     const n = () => {
-      c(l(window.innerWidth));
+      c(a(window.innerWidth));
     };
     return n(), window.addEventListener("resize", n), () => {
       window.removeEventListener("resize", n);
     };
-  }, []), a;
+  }, []), l;
 }, q0 = (t) => {
-  const l = typeof window < "u", a = (s) => l ? window.matchMedia(s).matches : !1, [c, n] = j(a(t));
+  const a = typeof window < "u", l = (s) => a ? window.matchMedia(s).matches : !1, [c, n] = j(l(t));
   return K(() => {
-    if (!l) return;
+    if (!a) return;
     const s = window.matchMedia(t), i = () => {
       n(s.matches);
     };
@@ -6136,15 +6130,16 @@ export {
   O0 as Container,
   Z0 as DocsLayout,
   f0 as Drawer,
-  T0 as FlexContainer,
-  A0 as GlobalWrapper,
+  F0 as FlexContainer,
+  T0 as GlobalWrapper,
   O as Icon,
-  T1 as IconButton,
+  F1 as IconButton,
   _0 as InlineMessage,
   H4 as MenuButton,
   M0 as Modal,
   N0 as Panel,
   D0 as PanelRow,
+  R4 as PantheonLogo,
   P0 as Picture,
   C0 as RadioGroup,
   M1 as ResponsiveContext,
@@ -6167,7 +6162,7 @@ export {
   y2 as Tally,
   b0 as TextInput,
   L0 as Textarea,
-  F0 as ThreeItemLayout,
+  A0 as ThreeItemLayout,
   Y4 as Toast,
   Q4 as ToastType,
   k0 as Toaster,