@pantheon-systems/pds-toolkit-react 2.0.0-alpha.6 → 2.0.0-alpha.8

package/dist/index.js

@@ -1,17 +1,17 @@
-import e, { Children as i1, isValidElement as h2, useState as H, cloneElement as _2, useCallback as $2, useEffect as l2, createContext as n1, useContext as D2, forwardRef as P2, useRef as J, useLayoutEffect as _1 } from "react";
+import e, { Children as i1, isValidElement as h2, useState as V, cloneElement as _2, useCallback as $2, useEffect as l2, createContext as n1, useContext as D2, forwardRef as k2, useRef as J, useLayoutEffect as _1 } from "react";
 import D1 from "hash-sum";
-import { useFloating as r1, autoUpdate as o1, offset as P1, flip as m1, shift as k1, useHover as x1, useFocus as N1, useDismiss as S1, useRole as I1, useInteractions as j1, FloatingPortal as T1, useId as B1 } from "@floating-ui/react";
+import { useFloating as r1, autoUpdate as o1, offset as k1, flip as m1, shift as P1, useHover as x1, useFocus as N1, useDismiss as S1, useRole as I1, useInteractions as j1, FloatingPortal as T1, useId as B1 } from "@floating-ui/react";
 import { ToastContainer as A1, Slide as O1, cssTransition as H1, toast as e1 } from "react-toastify";
 import { useMeasure as R1 } from "@reactuses/core";
-import './index.css';const V1 = () => Math.random().toString(32).substring(2, 13), j2 = (t) => {
-  const l = {}, a = [];
-  return i1.forEach(t, (c) => {
-    if (h2(c)) {
-      const i = c.props.slot;
-      i ? l[i] ? l[i].push(c) : l[i] = [c] : a.push(c);
+import './index.css';const V1 = () => Math.random().toString(32).substring(2, 13), P2 = (t) => {
+  const l = {}, c = [];
+  return i1.forEach(t, (a) => {
+    if (h2(a)) {
+      const n = a.props.slot;
+      n ? l[n] ? l[n].push(a) : l[n] = [a] : c.push(a);
     } else
-      a.push(c);
-  }), a.length > 0 && (l.__unslotted = a), l;
+      c.push(a);
+  }), c.length > 0 && (l.__unslotted = c), l;
 }, v = (t) => t.join(" ").trim().replace(/\s+/g, " "), F1 = (t) => t ? t.startsWith("data:") ? /^data:image\/(png|jpeg|jpg|gif|bmp|webp);base64,[A-Za-z0-9+/]+=*$/.test(t) : !0 : !1, t1 = {
   boltPantheon: {
     height: 512,
@@ -1720,22 +1720,22 @@ import './index.css';const V1 = () => Math.random().toString(32).substring(2, 13
   "xmarkLarge",
   "xTwitter",
   "youtube"
-], A = ({
+], O = ({
   className: t,
   display: l = "inline-block",
-  iconName: a,
-  iconSize: c = "l",
-  style: i,
+  iconName: c,
+  iconSize: a = "l",
+  style: n,
   verticalAlign: s = "middle",
-  ...n
+  ...i
 }) => {
-  const r = "pds-icon", o = `${r} ${r}--${c} ${r}--${a}`, m = Z1[a], h = `0 0 ${m.width} ${m.height}`, z = a in t1 ? t1[a] : null;
-  let d;
-  if (z?.type === "complex")
-    d = z.render();
+  const r = "pds-icon", o = `${r} ${r}--${a} ${r}--${c}`, m = Z1[c], d = `0 0 ${m.width} ${m.height}`, L = c in t1 ? t1[c] : null;
+  let g;
+  if (L?.type === "complex")
+    g = L.render();
   else {
-    const f = z?.type === "path" ? z.svgPathData : m.svgPathData;
-    d = Array.isArray(f) ? f.map((C, g) => /* @__PURE__ */ e.createElement("path", { key: g, d: C, fill: "currentColor" })) : /* @__PURE__ */ e.createElement("path", { d: f, fill: "currentColor" });
+    const f = L?.type === "path" ? L.svgPathData : m.svgPathData;
+    g = Array.isArray(f) ? f.map((p, u) => /* @__PURE__ */ e.createElement("path", { key: u, d: p, fill: "currentColor" })) : /* @__PURE__ */ e.createElement("path", { d: f, fill: "currentColor" });
   }
   return /* @__PURE__ */ e.createElement(
     "svg",
@@ -1749,13 +1749,13 @@ import './index.css';const V1 = () => Math.random().toString(32).substring(2, 13
       style: {
         display: l,
         verticalAlign: s,
-        ...i
+        ...n
       },
-      viewBox: h,
+      viewBox: d,
       xmlns: "http://www.w3.org/2000/svg",
-      ...n
+      ...i
     },
-    d
+    g
   );
 }, s1 = [
   "dawn",
@@ -1780,92 +1780,92 @@ import './index.css';const V1 = () => Math.random().toString(32).substring(2, 13
 }, A4 = ({
   ariaLabel: t,
   className: l,
-  hasUserFallback: a = !1,
-  imageSrc: c,
-  linkContent: i,
+  hasUserFallback: c = !1,
+  imageSrc: a,
+  linkContent: n,
   size: s = "s",
-  uniqueId: n,
+  uniqueId: i,
   ...r
 }) => {
-  const o = "pds-avatar", m = `${o}--${s}`, h = c ? `${o}--image` : null, [z, d] = H(void 0), C = {
-    backgroundImage: n ? `var(--pds-gradient-avatar-${q1(n)})` : null,
+  const o = "pds-avatar", m = `${o}--${s}`, d = a ? `${o}--image` : null, [L, g] = V(void 0), p = {
+    backgroundImage: i ? `var(--pds-gradient-avatar-${q1(i)})` : null,
     borderRadius: "100%",
     height: "100%",
     width: "100%",
     display: "flex",
     alignItems: "center",
     justifyContent: "center"
-  }, g = F1(c) && !z ? /* @__PURE__ */ e.createElement(
+  }, u = F1(a) && !L ? /* @__PURE__ */ e.createElement(
     "img",
     {
       alt: "",
       className: `${o}__image`,
-      onError: () => d(!0),
-      onLoad: () => d(!1),
-      src: `${c}`
+      onError: () => g(!0),
+      onLoad: () => g(!1),
+      src: `${a}`
     }
-  ) : /* @__PURE__ */ e.createElement("span", { style: C }, a && /* @__PURE__ */ e.createElement(A, { className: `${o}__user-icon`, iconName: "user" })), p = /* @__PURE__ */ e.createElement("span", { className: `${o}__content` }, g), L = i && h2(i) ? _2(
-    i,
-    Object.assign({}, i.props, {
+  ) : /* @__PURE__ */ e.createElement("span", { style: p }, c && /* @__PURE__ */ e.createElement(O, { className: `${o}__user-icon`, iconName: "user" })), w = /* @__PURE__ */ e.createElement("span", { className: `${o}__content` }, u), C = n && h2(n) ? _2(
+    n,
+    Object.assign({}, n.props, {
       className: `${o}__content ${o}__content--link`,
       "aria-label": t
     }),
-    g
+    u
   ) : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: v([o, m, h, l]),
+      className: v([o, m, d, l]),
       ...r
     },
-    i ? L : p
+    n ? C : w
   );
 }, O4 = ({
   className: t,
   color: l = "gaia",
-  label: a,
-  size: c = "m",
-  ...i
+  label: c,
+  size: a = "m",
+  ...n
 }) => {
-  const s = "pds-badge", n = `${s}--${l}`, r = c !== "m" ? `${s}--${c}` : null;
+  const s = "pds-badge", i = `${s}--${l}`, r = a !== "m" ? `${s}--${a}` : null;
   return /* @__PURE__ */ e.createElement(
     "span",
     {
       className: v([
         s,
-        n,
+        i,
         r,
         t ?? ""
       ]),
-      ...i
+      ...n
     },
-    /* @__PURE__ */ e.createElement("span", { className: `${s}__label` }, a)
+    /* @__PURE__ */ e.createElement("span", { className: `${s}__label` }, c)
   );
 }, G1 = ({
   className: t,
   color: l = "transparent",
-  hasStatusIndicator: a = !1,
-  label: c,
-  statusIndicatorText: i = "Status indicator: ",
+  hasStatusIndicator: c = !1,
+  label: a,
+  statusIndicatorText: n = "Status indicator: ",
   statusType: s,
-  ...n
+  ...i
 }) => {
-  const r = "pds-status-badge", o = `${r}--${l}`, m = `${r}__status`, h = s ? `${m}--${s}` : null;
+  const r = "pds-status-badge", o = `${r}--${l}`, m = `${r}__status`, d = s ? `${m}--${s}` : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
       className: v([r, o, t ?? ""]),
-      ...n
+      ...i
     },
-    a === !0 && /* @__PURE__ */ e.createElement("span", { className: v([m, h]) }, s && /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, i, " ", s)),
-    /* @__PURE__ */ e.createElement("span", { className: `${r}__label` }, c)
+    c === !0 && /* @__PURE__ */ e.createElement("span", { className: v([m, d]) }, s && /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, n, " ", s)),
+    /* @__PURE__ */ e.createElement("span", { className: `${r}__label` }, a)
   );
 }, d1 = ({
   className: t,
   label: l,
-  size: a = "s",
-  type: c = "neutral",
-  typeLabels: i = {
+  size: c = "s",
+  type: a = "neutral",
+  typeLabels: n = {
     info: "Information",
     success: "Success",
     warning: "Warning",
@@ -1874,19 +1874,19 @@ import './index.css';const V1 = () => Math.random().toString(32).substring(2, 13
   },
   ...s
 }) => {
-  const n = "pds-tally", r = `${n}--${c}`, o = `${n}--${a}`, m = `${i[c]}: `;
+  const i = "pds-tally", r = `${i}--${a}`, o = `${i}--${c}`, m = `${n[a]}: `;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
       className: v([
-        n,
+        i,
         r,
         o,
         t ?? ""
       ]),
       ...s
     },
-    /* @__PURE__ */ e.createElement("div", { className: `${n}__label` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, m), l)
+    /* @__PURE__ */ e.createElement("div", { className: `${i}__label` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, m), l)
   );
 };
 d1.displayName = "Tally";
@@ -1901,10 +1901,10 @@ const Y2 = (t) => {
 }, W1 = 768, U1 = 1280, K1 = 1440, X1 = "5rem", Y1 = "4rem", Q1 = "3rem", J1 = "2.5rem", e4 = "2rem", t4 = "1.5rem", h1 = "1.25rem", u1 = "1rem", K2 = "0.75rem", E2 = "0.625rem", R2 = 500, s4 = 700, y2 = "0.75rem", c1 = "0.875rem", a1 = "1rem", g1 = n1(null), c4 = ({
   children: t
 }) => {
-  const [l, a] = H(0), c = $2(() => {
-    a((r) => r + 1);
-  }, []), i = $2(() => {
-    a((r) => Math.max(0, r - 1));
+  const [l, c] = V(0), a = $2(() => {
+    c((r) => r + 1);
+  }, []), n = $2(() => {
+    c((r) => Math.max(0, r - 1));
   }, []), s = l > 0;
   l2(() => {
     if (!s)
@@ -1916,12 +1916,12 @@ const Y2 = (t) => {
       document.removeEventListener("keydown", r, { capture: !0 });
     };
   }, [s]);
-  const n = {
-    closeOverlay: i,
+  const i = {
+    closeOverlay: n,
     hasOpenOverlay: s,
-    openOverlay: c
+    openOverlay: a
   };
-  return /* @__PURE__ */ e.createElement(g1.Provider, { value: n }, t);
+  return /* @__PURE__ */ e.createElement(g1.Provider, { value: i }, t);
 }, a4 = () => {
   const t = D2(g1);
   if (!t)
@@ -1929,107 +1929,107 @@ const Y2 = (t) => {
       "useOverlayContext must be used within OverlayContextProvider"
     );
   return t;
-}, l4 = (t, l, a) => {
+}, l4 = (t, l, c) => {
   const {
-    altKey: c = !1,
-    ctrlKey: i = !1,
+    altKey: a = !1,
+    ctrlKey: n = !1,
     enabled: s = !0,
-    metaKey: n = !1,
+    metaKey: i = !1,
     shiftKey: r = !1
-  } = a ?? {}, [o, m] = H(!1), h = $2(
-    (f) => f.altKey === c && f.ctrlKey === i && f.metaKey === n && f.shiftKey === r,
-    [c, i, n, r]
-  ), z = $2(
+  } = c ?? {}, [o, m] = V(!1), d = $2(
+    (f) => f.altKey === a && f.ctrlKey === n && f.metaKey === i && f.shiftKey === r,
+    [a, n, i, r]
+  ), L = $2(
     (f) => {
-      f.key === t && h(f) && (m(!0), l && l(f));
+      f.key === t && d(f) && (m(!0), l && l(f));
     },
-    [t, l, h]
-  ), d = $2(
+    [t, l, d]
+  ), g = $2(
     (f) => {
-      f.key === t && h(f) && m(!1);
+      f.key === t && d(f) && m(!1);
     },
-    [t, h]
+    [t, d]
   );
   return l2(() => {
     if (s)
-      return window.addEventListener("keydown", z), window.addEventListener("keyup", d), () => {
-        window.removeEventListener("keydown", z), window.removeEventListener("keyup", d);
+      return window.addEventListener("keydown", L), window.addEventListener("keyup", g), () => {
+        window.removeEventListener("keydown", L), window.removeEventListener("keyup", g);
       };
-  }, [z, d, s]), o;
+  }, [L, g, s]), o;
 }, T2 = ({
   className: t,
   content: l,
-  customTrigger: a = null,
-  offsetValue: c = 6,
-  preferredPlacement: i = "top",
+  customTrigger: c = null,
+  offsetValue: a = 6,
+  preferredPlacement: n = "top",
   triggerAccessibleText: s = "Show more information",
-  triggerIcon: n = "circleInfo",
+  triggerIcon: i = "circleInfo",
   triggerIconColor: r = "default",
   triggerIconSize: o = "m",
   zIndex: m = s4,
-  ...h
+  ...d
 }) => {
-  const [z, d] = H(!1), f = typeof a, C = "pds-tooltip", g = v([
-    `${C}__trigger-custom`,
-    f === "string" ? `${C}__trigger-text` : null
-  ]), p = v([
-    `${C}__trigger`,
-    `${C}__trigger--${r}`
-  ]), { context: L, floatingStyles: b, refs: M } = r1({
-    placement: i,
-    open: z,
-    onOpenChange: d,
-    middleware: [P1(c), m1(), k1()],
+  const [L, g] = V(!1), f = typeof c, p = "pds-tooltip", u = v([
+    `${p}__trigger-custom`,
+    f === "string" ? `${p}__trigger-text` : null
+  ]), w = v([
+    `${p}__trigger`,
+    `${p}__trigger--${r}`
+  ]), { context: C, floatingStyles: z, refs: b } = r1({
+    placement: n,
+    open: L,
+    onOpenChange: g,
+    middleware: [k1(a), m1(), P1()],
     whileElementsMounted: o1
-  }), D = x1(L, {
+  }), D = x1(C, {
     restMs: 300,
     delay: { open: 100, close: 0 },
     move: !1
-  }), N = N1(L), P = S1(L), _ = I1(L, { role: "tooltip" }), { getFloatingProps: w, getReferenceProps: S } = j1([
+  }), P = N1(C), k = S1(C), y = I1(C, { role: "tooltip" }), { getFloatingProps: M, getReferenceProps: S } = j1([
     D,
-    N,
     P,
-    _
+    k,
+    y
   ]);
-  return /* @__PURE__ */ e.createElement("div", { className: v([C, t ?? ""]), ...h }, a ? /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: v([p, t ?? ""]), ...d }, c ? /* @__PURE__ */ e.createElement(
     "span",
     {
-      ref: M.setReference,
-      className: g,
+      ref: b.setReference,
+      className: u,
       ...S()
     },
-    a
+    c
   ) : /* @__PURE__ */ e.createElement(
     "button",
     {
-      ref: M.setReference,
+      ref: b.setReference,
       "aria-label": s,
-      className: p,
+      className: w,
       type: "button",
       ...S()
     },
     /* @__PURE__ */ e.createElement(
-      A,
+      O,
       {
-        className: `${C}__icon`,
-        iconName: n,
+        className: `${p}__icon`,
+        iconName: i,
         iconSize: o
       }
     )
   ), /* @__PURE__ */ e.createElement(T1, null, /* @__PURE__ */ e.createElement(
     "div",
     {
-      ref: M.setFloating,
-      "aria-hidden": !z,
-      className: `${C}__container`,
+      ref: b.setFloating,
+      "aria-hidden": !L,
+      className: `${p}__container`,
       style: {
-        ...b,
+        ...z,
         zIndex: m,
-        opacity: z ? 1 : 0,
-        pointerEvents: z ? "auto" : "none",
+        opacity: L ? 1 : 0,
+        pointerEvents: L ? "auto" : "none",
         transition: "var(--pds-animation-transition-reveal)"
       },
-      ...w()
+      ...M()
     },
     l
   )));
@@ -2041,7 +2041,7 @@ const Y2 = (t) => {
   success: "pds-has-success",
   readonly: "pds-is-readonly"
 }, p1 = (t) => t ? { maxWidth: `${t / 16}rem` } : null, l1 = (t) => t.replace(/^(https?:\/\/)/, ""), i4 = () => /* @__PURE__ */ e.createElement("span", { className: "pds-input-label__required" }, /* @__PURE__ */ e.createElement(
-  A,
+  O,
   {
     className: "pds-input-label__required-icon",
     iconName: "asterisk",
@@ -2050,11 +2050,11 @@ const Y2 = (t) => {
 )), z1 = ({
   className: t,
   disabled: l,
-  id: a,
-  isLegend: c,
-  isPseudoLabel: i,
+  id: c,
+  isLegend: a,
+  isPseudoLabel: n,
   label: s,
-  required: n,
+  required: i,
   showLabel: r = !0,
   tooltipText: o = null
 }) => {
@@ -2062,27 +2062,27 @@ const Y2 = (t) => {
     "pds-input-label",
     r ? null : "visually-hidden",
     t ?? ""
-  ]), h = /* @__PURE__ */ e.createElement(e.Fragment, null, s, n && !l && /* @__PURE__ */ e.createElement(i4, null), o && /* @__PURE__ */ e.createElement(T2, { content: o }, /* @__PURE__ */ e.createElement("span", null, /* @__PURE__ */ e.createElement(A, { iconName: "circleInfo", iconSize: "s" }))));
-  return c ? /* @__PURE__ */ e.createElement("legend", { className: m, id: `${a}-legend` }, h) : i ? /* @__PURE__ */ e.createElement("span", { className: m, id: `${a}-field-label` }, h) : /* @__PURE__ */ e.createElement("label", { className: m, htmlFor: a, id: `${a}-label` }, h);
+  ]), d = /* @__PURE__ */ e.createElement(e.Fragment, null, s, i && !l && /* @__PURE__ */ e.createElement(i4, null), o && /* @__PURE__ */ e.createElement(T2, { content: o }, /* @__PURE__ */ e.createElement("span", null, /* @__PURE__ */ e.createElement(O, { iconName: "circleInfo", iconSize: "s" }))));
+  return a ? /* @__PURE__ */ e.createElement("legend", { className: m, id: `${c}-legend` }, d) : n ? /* @__PURE__ */ e.createElement("span", { className: m, id: `${c}-field-label` }, d) : /* @__PURE__ */ e.createElement("label", { className: m, htmlFor: c, id: `${c}-label` }, d);
 }, f1 = ({
   className: t,
   forInputGroup: l = !1,
-  hasValidationMessage: a,
-  id: c,
-  message: i,
+  hasValidationMessage: c,
+  id: a,
+  message: n,
   validationMessageHasDecorators: s,
-  validationStatus: n
+  validationStatus: i
 }) => {
-  const r = "pds-input-message", o = n && a ? `${r}--${n}` : null;
+  const r = "pds-input-message", o = i && c ? `${r}--${i}` : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
       className: v([r, o, t ?? ""]),
-      id: l ? `${c}__message-hidden` : `${c}__message`,
-      role: n === "error" ? "alert" : null
+      id: l ? `${a}__message-hidden` : `${a}__message`,
+      role: i === "error" ? "alert" : null
     },
-    s && n && /* @__PURE__ */ e.createElement(L1, { variant: n }),
-    /* @__PURE__ */ e.createElement("div", { className: `${r}__text` }, i)
+    s && i && /* @__PURE__ */ e.createElement(L1, { variant: i }),
+    /* @__PURE__ */ e.createElement("div", { className: `${r}__text` }, n)
   );
 }, n4 = {
   search: "magnifyingGlass",
@@ -2092,7 +2092,7 @@ const Y2 = (t) => {
 }, L1 = ({ variant: t }) => {
   const l = "pds-input-prefix";
   return /* @__PURE__ */ e.createElement("div", { className: v([l, `${l}--${t}`]) }, /* @__PURE__ */ e.createElement(
-    A,
+    O,
     {
       className: `${l}__icon`,
       iconName: n4[t],
@@ -2103,58 +2103,58 @@ const Y2 = (t) => {
   inputId: t,
   shortcutLabel: l
 }) => {
-  const { hasOpenOverlay: a } = a4();
-  return l4("/", (i) => {
+  const { hasOpenOverlay: c } = a4();
+  return l4("/", (n) => {
     const s = document.getElementById(t);
-    s && s.focus(), i.preventDefault();
+    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(A, { iconName: "slashForward", iconSize: "s" }));
+    enabled: !c
+  }), /* @__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" }));
 }, o4 = ({
   clearLabel: t,
   handleClearInput: l,
-  id: a
+  id: c
 }) => /* @__PURE__ */ e.createElement(
   "button",
   {
-    "aria-controls": a,
+    "aria-controls": c,
     className: "pds-input-clear-button",
     onClick: l,
     title: t,
     type: "button"
   },
-  /* @__PURE__ */ e.createElement(A, { iconName: "xmark", iconSize: "m" })
+  /* @__PURE__ */ e.createElement(O, { iconName: "xmark", iconSize: "m" })
 ), C1 = ({
   currentLength: t,
   id: l,
-  maxLength: a,
-  overLimitMessage: c = "Character limit exceeded by"
+  maxLength: c,
+  overLimitMessage: a = "Character limit exceeded by"
 }) => {
-  const i = t > a, s = t - a, n = "pds-input-character-counter", r = i ? `${n}--overLimit` : null;
+  const n = t > c, s = t - c, i = "pds-input-character-counter", r = n ? `${i}--overLimit` : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: v([n, r]),
+      className: v([i, r]),
       id: `${l}__counter`
     },
     t,
     "/",
-    a,
-    /* @__PURE__ */ e.createElement("span", { "aria-live": "polite", className: "visually-hidden" }, i && `${c} ${s}`)
+    c,
+    /* @__PURE__ */ e.createElement("span", { "aria-live": "polite", className: "visually-hidden" }, n && `${a} ${s}`)
   );
 }, m4 = ({ label: t, ...l }) => /* @__PURE__ */ e.createElement("span", { className: "visually-hidden", ...l }, t);
-P2(
-  ({ children: t, className: l, isActive: a, ...c }, i) => {
-    const s = B1(), n = "pds-input__select-option", r = a ? `${n}--active` : null;
+k2(
+  ({ children: t, className: l, isActive: c, ...a }, n) => {
+    const s = B1(), i = "pds-input__select-option", r = c ? `${i}--active` : null;
     return /* @__PURE__ */ e.createElement(
       "li",
       {
-        ref: i,
-        "aria-selected": a,
-        className: v([n, r, l ?? ""]),
+        ref: n,
+        "aria-selected": c,
+        className: v([i, r, l ?? ""]),
         id: s,
         role: "option",
-        ...c
+        ...a
       },
       t
     );
@@ -2190,21 +2190,21 @@ const d4 = {
   "4xl": K2,
   "5xl": u1,
   "6xl": h1
-}, k2 = ({
+}, x2 = ({
   className: t = "",
   colorType: l = "full-color",
-  isInline: a = !1,
-  label: c = "Loading",
-  showLabel: i = !1,
+  isInline: c = !1,
+  label: a = "Loading",
+  showLabel: n = !1,
   size: s = "3xl",
-  ...n
+  ...i
 }) => {
-  const r = "pds-spinner", o = l !== "full-color" ? `${r}--${l}` : null, m = a ? `${r}--inline` : null, h = d4[s], z = h4[s], d = u4[s], f = Math.ceil(parseFloat(h) * 16 * 0.13), C = {
-    "--spinner-size": h,
+  const r = "pds-spinner", o = l !== "full-color" ? `${r}--${l}` : null, m = c ? `${r}--inline` : null, d = d4[s], L = h4[s], g = u4[s], f = Math.ceil(parseFloat(d) * 16 * 0.13), p = {
+    "--spinner-size": d,
     "--spinner-line": `${f}px`
-  }, g = {
-    fontSize: z,
-    marginBlockStart: d
+  }, u = {
+    fontSize: L,
+    marginBlockStart: g
   };
   return /* @__PURE__ */ e.createElement(
     "span",
@@ -2212,147 +2212,147 @@ const d4 = {
       "aria-hidden": "true",
       className: v([r, o, m, t]),
       role: "status",
-      style: C,
-      ...n
+      style: p,
+      ...i
     },
     /* @__PURE__ */ e.createElement("span", { className: `${r}__icon` }),
-    i && !a ? /* @__PURE__ */ e.createElement("span", { className: `${r}__label`, style: g }, c) : /* @__PURE__ */ e.createElement(m4, { label: c })
+    n && !c ? /* @__PURE__ */ e.createElement("span", { className: `${r}__label`, style: u }, a) : /* @__PURE__ */ e.createElement(m4, { label: a })
   );
-}, B2 = P2(
+}, B2 = k2(
   ({
     ariaLabel: t,
     buttonType: l = "button",
-    className: a = "",
-    disabled: c = !1,
-    displayType: i = "label-only",
+    className: c = "",
+    disabled: a = !1,
+    displayType: n = "label-only",
     iconName: s,
-    isFullWidth: n = !1,
+    isFullWidth: i = !1,
     isLoading: r = !1,
     isSplitButton: o = !1,
     isWorking: m = !1,
-    label: h,
-    onClick: z,
-    size: d = "s",
+    label: d,
+    onClick: L,
+    size: g = "s",
     tooltipText: f,
-    variant: C = "primary",
-    ...g
-  }, p) => {
-    const L = "pds-button", b = `${L}--${d}`, M = `${L}--${C}`, D = n ? `${L}--full-width` : null, N = r ? `${L}--loading` : null, P = r ? "pds-pulse" : null;
-    let _, w;
-    switch (d) {
+    variant: p = "primary",
+    ...u
+  }, w) => {
+    const C = "pds-button", z = `${C}--${g}`, b = `${C}--${p}`, D = i ? `${C}--full-width` : null, P = r ? `${C}--loading` : null, k = r ? "pds-pulse" : null;
+    let y, M;
+    switch (g) {
       case "xs":
-        _ = "s", w = "s";
+        y = "s", M = "s";
         break;
       case "s":
-        _ = "m", w = "m";
+        y = "m", M = "m";
         break;
       case "m":
-        _ = "m", w = "m";
+        y = "m", M = "m";
         break;
       case "l":
-        _ = "m", w = "l";
+        y = "m", M = "l";
         break;
       case "xl":
-        _ = "l", w = "l";
+        y = "l", M = "l";
         break;
     }
     let S = "monochromatic";
-    ["primary"].includes(C) && (S = "monochromatic-reverse");
-    const k = /* @__PURE__ */ e.createElement(
-      A,
+    ["primary"].includes(p) && (S = "monochromatic-reverse");
+    const N = /* @__PURE__ */ e.createElement(
+      O,
       {
         key: "icon",
-        className: `${L}__icon`,
+        className: `${C}__icon`,
         iconName: s,
-        iconSize: _
+        iconSize: y
       }
     );
-    let R = [h];
-    i == "icon-start" && s && R.unshift(k), i == "icon-end" && s && R.push(k), o && (R = [k], t = Y2(h));
-    const F = /* @__PURE__ */ e.createElement(
+    let _ = [d];
+    n == "icon-start" && s && _.unshift(N), n == "icon-end" && s && _.push(N), o && (_ = [N], t = Y2(d));
+    const W = /* @__PURE__ */ e.createElement(
       "button",
       {
-        ref: p,
+        ref: w,
         "aria-label": t,
         className: v([
-          L,
+          C,
+          z,
           b,
-          M,
           D,
-          N,
           P,
-          a
+          k,
+          c
         ]),
-        disabled: c || r || m,
-        onClick: z,
+        disabled: a || r || m,
+        onClick: L,
         type: l,
-        ...g
+        ...u
       },
       m && !r && /* @__PURE__ */ e.createElement(
-        k2,
+        x2,
         {
-          className: `${L}__working-indicator`,
+          className: `${C}__working-indicator`,
           colorType: S,
-          size: w
+          size: M
         }
       ),
-      R
+      _
     );
-    return (c || r || m) && f ? /* @__PURE__ */ e.createElement(T2, { content: f, customTrigger: F }) : /* @__PURE__ */ e.createElement(e.Fragment, null, F);
+    return (a || r || m) && f ? /* @__PURE__ */ e.createElement(T2, { content: f, customTrigger: W }) : /* @__PURE__ */ e.createElement(e.Fragment, null, W);
   }
 ), g4 = ({
   className: t,
   disabled: l = !1,
-  displayType: a = "label-only",
-  iconName: c,
-  linkContent: i,
+  displayType: c = "label-only",
+  iconName: a,
+  linkContent: n,
   size: s = "s",
-  tooltipText: n,
+  tooltipText: i,
   variant: r = "primary",
   ...o
 }) => {
-  const m = "pds-button-link", h = "pds-button", z = `${h}--${s}`, d = `${h}--${r}`, f = v([
-    h,
-    z,
-    d
-  ]), C = h2(i) ? i.props.children : null;
-  let g;
+  const m = "pds-button-link", d = "pds-button", L = `${d}--${s}`, g = `${d}--${r}`, f = v([
+    d,
+    L,
+    g
+  ]), p = h2(n) ? n.props.children : null;
+  let u;
   switch (s) {
     case "xs":
-      g = "s";
+      u = "s";
       break;
     case "s":
-      g = "m";
+      u = "m";
       break;
     case "m":
-      g = "m";
+      u = "m";
       break;
     case "l":
-      g = "m";
+      u = "m";
       break;
     case "xl":
-      g = "l";
+      u = "l";
       break;
     default:
-      g = "m";
+      u = "m";
       break;
   }
-  const p = /* @__PURE__ */ e.createElement(
-    A,
+  const w = /* @__PURE__ */ e.createElement(
+    O,
     {
-      key: c,
+      key: a,
       className: `${m}__icon`,
-      iconName: c,
-      iconSize: g
+      iconName: a,
+      iconSize: u
     }
   );
-  let L = [C];
-  a === "icon-start" && c ? L = [p, C] : a === "icon-end" && c && (L = [C, p]);
-  const b = h2(i) ? _2(
-    i,
-    Object.assign({}, i.props, {
+  let C = [p];
+  c === "icon-start" && a ? C = [w, p] : c === "icon-end" && a && (C = [p, w]);
+  const z = h2(n) ? _2(
+    n,
+    Object.assign({}, n.props, {
       className: f,
-      children: L
+      children: C
     })
   ) : null;
   return l ? /* @__PURE__ */ e.createElement(
@@ -2360,167 +2360,167 @@ const d4 = {
     {
       disabled: !0,
       className: v([m, t ?? ""]),
-      label: L,
+      label: C,
       size: s,
-      tooltipText: n ?? null,
+      tooltipText: i ?? null,
       variant: r
     }
-  ) : /* @__PURE__ */ e.createElement("span", { className: v([m, t ?? ""]), ...o }, b);
+  ) : /* @__PURE__ */ e.createElement("span", { className: v([m, t ?? ""]), ...o }, z);
 }, p4 = (t, l) => {
-  const [a, c] = H(!1), i = l?.duration;
+  const [c, a] = V(!1), n = l?.duration;
   return l2(() => {
-    let n;
-    return a && i && (n = setTimeout(() => {
-      c(!1);
-    }, i)), () => {
-      n && clearTimeout(n);
+    let i;
+    return c && n && (i = setTimeout(() => {
+      a(!1);
+    }, n)), () => {
+      i && clearTimeout(i);
     };
-  }, [a, i]), [a, async () => {
+  }, [c, n]), [c, async () => {
     if (navigator.clipboard)
       try {
-        await navigator.clipboard.writeText(t), c(!0);
+        await navigator.clipboard.writeText(t), a(!0);
       } catch {
       }
   }];
-}, I2 = P2(
+}, j2 = k2(
   ({
     ariaLabel: t,
     buttonType: l = "button",
-    className: a,
-    disabled: c = !1,
-    hasTooltip: i = !0,
+    className: c,
+    disabled: a = !1,
+    hasTooltip: n = !0,
     icon2Name: s = null,
-    iconName: n,
+    iconName: i,
     onClick: r,
     size: o = "s",
     variant: m = "standard",
-    ...h
-  }, z) => {
-    const d = "pds-icon-button", f = o !== "s" ? `${d}--${o}` : null, C = m !== "standard" ? `${d}--${m}` : null, g = {
-      fadeOut: `${d}--fadeOut`,
-      hide: `${d}--hide`,
-      scaleIn: `${d}--scaleIn`
+    ...d
+  }, L) => {
+    const g = "pds-icon-button", f = o !== "s" ? `${g}--${o}` : null, p = m !== "standard" ? `${g}--${m}` : null, u = {
+      fadeOut: `${g}--fadeOut`,
+      hide: `${g}--hide`,
+      scaleIn: `${g}--scaleIn`
     };
-    let p, L;
+    let w, C;
     switch (o) {
       case "s":
-        L = "m", p = 8;
+        C = "m", w = 8;
         break;
       case "m":
-        L = "l", p = 11;
+        C = "l", w = 11;
         break;
       default:
-        L = "m", p = 8;
+        C = "m", w = 8;
         break;
     }
-    const b = s !== null, M = J(null), D = J(null), N = () => {
-      M.current.classList.add(g.fadeOut), M.current.classList.add(g.hide), D.current.classList.remove(g.hide), D.current.classList.add(g.scaleIn), setTimeout(() => {
-        M.current.classList.remove(
-          g.fadeOut,
-          g.hide
-        ), M.current.classList.add(g.scaleIn), D.current.classList.remove(g.scaleIn), D.current.classList.add(g.hide);
+    const z = s !== null, b = J(null), D = J(null), P = () => {
+      b.current.classList.add(u.fadeOut), b.current.classList.add(u.hide), D.current.classList.remove(u.hide), D.current.classList.add(u.scaleIn), setTimeout(() => {
+        b.current.classList.remove(
+          u.fadeOut,
+          u.hide
+        ), b.current.classList.add(u.scaleIn), D.current.classList.remove(u.scaleIn), D.current.classList.add(u.hide);
       }, 2e3);
-    }, P = (w) => {
-      b && N(), r && r(w);
-    }, _ = b ? /* @__PURE__ */ e.createElement("div", { className: `${d}__content` }, /* @__PURE__ */ e.createElement("div", { ref: M, className: `${d}__icon-wrapper` }, /* @__PURE__ */ e.createElement(
-      A,
+    }, k = (M) => {
+      z && P(), r && r(M);
+    }, y = z ? /* @__PURE__ */ e.createElement("div", { className: `${g}__content` }, /* @__PURE__ */ e.createElement("div", { ref: b, className: `${g}__icon-wrapper` }, /* @__PURE__ */ e.createElement(
+      O,
       {
-        className: `${d}__icon`,
-        iconName: n,
-        iconSize: L
+        className: `${g}__icon`,
+        iconName: i,
+        iconSize: C
       }
     )), /* @__PURE__ */ e.createElement(
       "div",
       {
         ref: D,
-        className: `${d}__icon-wrapper ${g.hide}`
+        className: `${g}__icon-wrapper ${u.hide}`
       },
       /* @__PURE__ */ e.createElement(
-        A,
+        O,
         {
-          className: `${d}__icon`,
+          className: `${g}__icon`,
           iconName: s,
-          iconSize: L
+          iconSize: C
         }
       )
-    )) : /* @__PURE__ */ e.createElement("div", { className: `${d}__content` }, /* @__PURE__ */ e.createElement(
-      A,
+    )) : /* @__PURE__ */ e.createElement("div", { className: `${g}__content` }, /* @__PURE__ */ e.createElement(
+      O,
       {
-        className: `${d}__icon`,
-        iconName: n,
-        iconSize: L
+        className: `${g}__icon`,
+        iconName: i,
+        iconSize: C
       }
     ));
     return /* @__PURE__ */ e.createElement(
       "button",
       {
-        ref: z,
+        ref: L,
         "aria-label": t,
         className: v([
-          d,
+          g,
           f,
-          C,
-          a
+          p,
+          c
         ]),
-        disabled: c,
-        onClick: P,
-        title: i && !c ? null : t,
+        disabled: a,
+        onClick: k,
+        title: n && !a ? null : t,
         type: l,
-        ...h
+        ...d
       },
-      i && !c ? /* @__PURE__ */ e.createElement(
+      n && !a ? /* @__PURE__ */ e.createElement(
         T2,
         {
-          className: `${d}__tooltip`,
+          className: `${g}__tooltip`,
           content: t,
-          customTrigger: _,
-          offsetValue: p
+          customTrigger: y,
+          offsetValue: w
         }
-      ) : _
+      ) : y
     );
   }
 ), H4 = ({
   ariaLabel: t = "Copy to clipboard",
   className: l,
-  clipboardText: a = "",
-  disabled: c,
-  variant: i = "standard",
+  clipboardText: c = "",
+  disabled: a,
+  variant: n = "standard",
   ...s
 }) => {
-  const n = "pds-clipboard-button", [r, o] = p4(a);
+  const i = "pds-clipboard-button", [r, o] = p4(c);
   return /* @__PURE__ */ e.createElement(
-    I2,
+    j2,
     {
       ariaLabel: t,
       buttonType: "button",
-      className: v([n, l ?? ""]),
-      disabled: c,
+      className: v([i, l ?? ""]),
+      disabled: a,
       icon2Name: "check",
       iconName: "copy",
       onClick: o,
       size: "m",
-      variant: i,
+      variant: n,
       ...s
     }
   );
 }, v1 = ({
   ariaLabel: t = "Close",
   className: l,
-  onClick: a,
-  size: c = "l",
-  ...i
+  onClick: c,
+  size: a = "l",
+  ...n
 }) => {
-  const s = "pds-close-button", n = `${s}--${c}`;
+  const s = "pds-close-button", i = `${s}--${a}`;
   return /* @__PURE__ */ e.createElement(
     "button",
     {
       "aria-label": t,
-      className: v([s, n, l ?? ""]),
-      onClick: a,
+      className: v([s, i, l ?? ""]),
+      onClick: c,
       type: "button",
-      ...i
+      ...n
     },
-    /* @__PURE__ */ e.createElement(A, { className: `${s}__icon`, iconName: "xmarkLarge" })
+    /* @__PURE__ */ e.createElement(O, { className: `${s}__icon`, iconName: "xmarkLarge" })
   );
 }, Q2 = {
   info: "Information",
@@ -2550,122 +2550,122 @@ const d4 = {
   wordpress: "wordpress",
   gatsby: "bolt",
   nextjs: "bolt"
-}, w1 = () => {
-  const t = typeof window < "u", [l, a] = H(
+}, M1 = () => {
+  const t = typeof window < "u", [l, c] = V(
     t && window.innerWidth !== void 0 ? window.innerWidth : 1024
   );
   return l2(() => {
     if (!t) return;
-    a(window.innerWidth);
-    const c = () => {
-      a(window.innerWidth);
+    c(window.innerWidth);
+    const a = () => {
+      c(window.innerWidth);
     };
-    return window.addEventListener("resize", c), () => {
-      window.removeEventListener("resize", c);
+    return window.addEventListener("resize", a), () => {
+      window.removeEventListener("resize", a);
     };
   }, []), l;
-}, x2 = n1(null), L4 = ({
+}, N2 = n1(null), L4 = ({
   children: t,
   mobileMenuMaxWidth: l = 640
 }) => {
-  const a = w1(), c = a <= l, i = {
-    isMobile: c,
+  const c = M1(), a = c <= l, n = {
+    isMobile: a,
     mobileMenuMaxWidth: l,
-    windowWidth: a
+    windowWidth: c
   };
   return l2(() => {
-    c ? document.body.classList.add("pds-no-scroll-x") : document.body.classList.remove("pds-no-scroll-x");
-  }, [c]), /* @__PURE__ */ e.createElement(x2.Provider, { value: i }, t);
+    a ? document.body.classList.add("pds-no-scroll-x") : document.body.classList.remove("pds-no-scroll-x");
+  }, [a]), /* @__PURE__ */ e.createElement(N2.Provider, { value: n }, t);
 }, C4 = ({
   className: t,
   disabled: l,
-  displayType: a = "icon-end",
-  iconName: c = "ellipsisVertical",
-  id: i,
+  displayType: c = "icon-end",
+  iconName: a = "ellipsisVertical",
+  id: n,
   isSplitButton: s = !1,
-  label: n,
+  label: i,
   menuItems: r,
   menuPosition: o = "start",
   onClick: m,
-  size: h = "s",
-  testId: z,
-  undefinedLabel: d = "Unlabeled group",
+  size: d = "s",
+  testId: L,
+  undefinedLabel: g = "Unlabeled group",
   variant: f = "primary",
-  withinNavbar: C,
-  ...g
+  withinNavbar: p,
+  ...u
 }) => {
-  const { placement: p, refs: L, strategy: b, x: M, y: D } = r1({
+  const { placement: w, refs: C, strategy: z, x: b, y: D } = r1({
     placement: "bottom-start",
     middleware: [m1()],
     whileElementsMounted: o1
   });
-  let N = !1;
-  const P = D2(x2);
-  P && (N = P.isMobile);
-  const _ = f === "navbar" && N, w = "pds-menu-button", S = _ ? `${w}--isMobile` : null, y = C ? `${w}--navbar` : null, k = i, [R] = H(`menu-button-${i}`), F = L.floating, Y = J(null), [q, i2] = H(!1), [Z, n2] = H(!1), [U, r2] = H(""), [Q, o2] = H(0), s2 = J([]), T = J([]), B = J([]);
+  let P = !1;
+  const k = D2(N2);
+  k && (P = k.isMobile);
+  const y = f === "navbar" && P, M = "pds-menu-button", S = y ? `${M}--isMobile` : null, I = p ? `${M}--navbar` : null, N = n, [_] = V(`menu-button-${n}`), W = C.floating, Y = J(null), [R, i2] = V(!1), [K, n2] = V(!1), [Z, r2] = V(""), [Q, o2] = V(0), s2 = J([]), T = J([]), A = J([]);
   _1(() => {
     window.addEventListener("mousedown", L2, !0);
-    const u = F.current;
-    return u && (u.dataset.fuiPlacement = p), Z && (setTimeout(() => {
-      u.focus();
+    const h = W.current;
+    return h && (h.dataset.fuiPlacement = w), K && (setTimeout(() => {
+      h.focus();
     }, 0), n2(!1)), () => {
       window.removeEventListener("mousedown", L2, !0);
     };
-  }, [q, p]);
-  const W = (u, I) => {
-    r2(u), o2(I);
-  }, K = () => {
+  }, [R, w]);
+  const q = (h, j) => {
+    r2(h), o2(j);
+  }, U = () => {
     i2(!0), n2(!0);
   }, e2 = () => {
-    i2(!1), W(void 0, -1), Y.current?.querySelector(
-      `#${k}`
+    i2(!1), q(void 0, -1), Y.current?.querySelector(
+      `#${N}`
     )?.focus();
-  }, z2 = (u) => {
-    u = u.toLowerCase();
-    let I = !1;
-    for (let E = Q + 1; E < B.current.length; E++)
-      if (B.current[E].label.toLowerCase().startsWith(u)) {
-        W(T.current[E], E), I = !0;
+  }, z2 = (h) => {
+    h = h.toLowerCase();
+    let j = !1;
+    for (let E = Q + 1; E < A.current.length; E++)
+      if (A.current[E].label.toLowerCase().startsWith(h)) {
+        q(T.current[E], E), j = !0;
         break;
       }
-    if (I === !1) {
+    if (j === !1) {
       for (let E = 0; E < Q; E++)
-        if (B.current[E].label.toLowerCase().startsWith(u)) {
-          W(T.current[E], E);
+        if (A.current[E].label.toLowerCase().startsWith(h)) {
+          q(T.current[E], E);
           break;
         }
     }
-  }, u2 = (u) => {
-    const I = T.current.indexOf(u), E = B.current[I];
+  }, u2 = (h) => {
+    const j = T.current.indexOf(h), E = A.current[j];
     E.callback && !E.disabled && E.callback(E), E.linkContent && !E.disabled && Y.current?.querySelector(
-      `#${u} a`
+      `#${h} a`
     )?.click();
   }, f2 = () => {
-    const u = T.current[Q];
-    u2(u);
-  }, N2 = (u) => {
-    q ? e2() : K(), m && m(), u.stopPropagation(), u.preventDefault();
-  }, A2 = (u) => {
-    u2(u.currentTarget.id), _ || e2();
-  }, S2 = (u) => {
-    const I = u.key;
+    const h = T.current[Q];
+    u2(h);
+  }, S2 = (h) => {
+    R ? e2() : U(), m && m(), h.stopPropagation(), h.preventDefault();
+  }, A2 = (h) => {
+    u2(h.currentTarget.id), y || e2();
+  }, I2 = (h) => {
+    const j = h.key;
     let E = !1;
-    switch (I) {
+    switch (j) {
       // open menu and focus on first menu item
       case " ":
       case "Enter":
       case "ArrowDown":
       case "Down": {
-        K();
-        let O = 0;
-        for (let $ = 0; $ < B.current.length; $++)
-          if (!B.current[$]?.disabled) {
-            O = $;
+        U();
+        let H = 0;
+        for (let $ = 0; $ < A.current.length; $++)
+          if (!A.current[$]?.disabled) {
+            H = $;
             break;
           }
-        W(
-          T.current[O],
-          O
+        q(
+          T.current[H],
+          H
         ), E = !0, m && m();
         break;
       }
@@ -2677,32 +2677,32 @@ const d4 = {
       // open menu and focus on last menu item
       case "Up":
       case "ArrowUp": {
-        K();
-        let O = T.current.length - 1;
+        U();
+        let H = T.current.length - 1;
         for (let $ = T.current.length - 1; $ >= 0; $--)
-          if (!B.current[$]?.disabled) {
-            O = $;
+          if (!A.current[$]?.disabled) {
+            H = $;
             break;
           }
-        W(
-          T.current[O],
-          O
+        q(
+          T.current[H],
+          H
         ), E = !0;
         break;
       }
     }
-    E && (u.stopPropagation(), u.preventDefault());
-  }, m2 = (u) => {
-    const I = u.key;
-    let E = !1, O = "", $ = 0;
+    E && (h.stopPropagation(), h.preventDefault());
+  }, m2 = (h) => {
+    const j = h.key;
+    let E = !1, H = "", $ = 0;
     function G(x) {
       return x.length === 1 && x.match(/\S/);
     }
-    if (!(u.ctrlKey || u.altKey || u.metaKey)) {
-      if (u.shiftKey)
-        G(I) && (z2(I), E = !0), u.key === "Tab" && (e2(), E = !0);
+    if (!(h.ctrlKey || h.altKey || h.metaKey)) {
+      if (h.shiftKey)
+        G(j) && (z2(j), E = !0), h.key === "Tab" && (e2(), E = !0);
       else
-        switch (I) {
+        switch (j) {
           case " ":
           case "Enter":
             e2(), f2(), E = !0;
@@ -2714,30 +2714,30 @@ const d4 = {
           case "Up":
           case "ArrowUp": {
             let x = 0;
-            const j = T.current.length;
-            for ($ = Q - 1; x < j && ($ < 0 && ($ = T.current.length - 1), !!B.current[$]?.disabled); )
+            const B = T.current.length;
+            for ($ = Q - 1; x < B && ($ < 0 && ($ = T.current.length - 1), !!A.current[$]?.disabled); )
               $--, x++;
-            O = T.current[$], W(O, $), E = !0;
+            H = T.current[$], q(H, $), E = !0;
             break;
           }
           case "ArrowDown":
           case "Down": {
             let x = 0;
-            const j = T.current.length;
-            for ($ = Q + 1; x < j && ($ > T.current.length - 1 && ($ = 0), !!B.current[$]?.disabled); )
+            const B = T.current.length;
+            for ($ = Q + 1; x < B && ($ > T.current.length - 1 && ($ = 0), !!A.current[$]?.disabled); )
               $++, x++;
-            O = T.current[$], W(O, $), E = !0;
+            H = T.current[$], q(H, $), E = !0;
             break;
           }
           case "Home":
           case "PageUp": {
             let x = 0;
-            for (let j = 0; j < B.current.length; j++)
-              if (!B.current[j]?.disabled) {
-                x = j;
+            for (let B = 0; B < A.current.length; B++)
+              if (!A.current[B]?.disabled) {
+                x = B;
                 break;
               }
-            W(
+            q(
               T.current[x],
               x
             ), E = !0;
@@ -2746,12 +2746,12 @@ const d4 = {
           case "End":
           case "PageDown": {
             let x = T.current.length - 1;
-            for (let j = T.current.length - 1; j >= 0; j--)
-              if (!B.current[j]?.disabled) {
-                x = j;
+            for (let B = T.current.length - 1; B >= 0; B--)
+              if (!A.current[B]?.disabled) {
+                x = B;
                 break;
               }
-            W(
+            q(
               T.current[x],
               x
             ), E = !0;
@@ -2761,70 +2761,70 @@ const d4 = {
             e2();
             break;
           default:
-            G(I) && (z2(I), E = !0);
+            G(j) && (z2(j), E = !0);
             break;
         }
-      E && (u.stopPropagation(), u.preventDefault());
+      E && (h.stopPropagation(), h.preventDefault());
     }
-  }, L2 = (u) => {
-    Y.current && !Y.current.contains(u.target) && q && e2();
-  }, C2 = (u, I, E = "", O = "", ...$) => {
-    const G = E ? `-group-${E}` : "", x = k + G + "-item-" + (I + 1), j = "id" in u && u.id ? u.id : x;
-    if (V2(u))
-      return /* @__PURE__ */ e.createElement("li", { key: j, role: "separator" });
-    if (F2(u))
+  }, L2 = (h) => {
+    Y.current && !Y.current.contains(h.target) && R && e2();
+  }, C2 = (h, j, E = "", H = "", ...$) => {
+    const G = E ? `-group-${E}` : "", x = N + G + "-item-" + (j + 1), B = "id" in h && h.id ? h.id : x;
+    if (V2(h))
+      return /* @__PURE__ */ e.createElement("li", { key: B, role: "separator" });
+    if (F2(h))
       return /* @__PURE__ */ e.createElement(
         "li",
         {
-          key: O,
-          className: `${w}__listbox-heading`,
-          id: O || null,
+          key: H,
+          className: `${M}__listbox-heading`,
+          id: H || null,
           role: "presentation"
         },
-        u.label
+        h.label
       );
-    if (z4(u))
-      return /* @__PURE__ */ e.createElement("li", { key: j, role: "presentation" }, u.nodeContent);
-    if (Z2(u) || "label" in u && u.label) {
-      T.current.push(j), B.current.push(u);
+    if (z4(h))
+      return /* @__PURE__ */ e.createElement("li", { key: B, role: "presentation" }, h.nodeContent);
+    if (Z2(h) || "label" in h && h.label) {
+      T.current.push(B), A.current.push(h);
       let g2 = !1;
-      U !== "" && !u.disabled && (g2 = U === j);
-      const c2 = "isCritical" in u && u.isCritical, M2 = "criticalLabel" in u ? u.criticalLabel : void 0;
+      Z !== "" && !h.disabled && (g2 = Z === B);
+      const c2 = "isCritical" in h && h.isCritical, w2 = "criticalLabel" in h ? h.criticalLabel : void 0;
       let a2 = [];
-      if ("label" in u && u.label && (a2 = [u.label]), Z2(u) && u.linkContent && (a2 = [u.linkContent.props.children]), u.iconName) {
+      if ("label" in h && h.label && (a2 = [h.label]), Z2(h) && h.linkContent && (a2 = [h.linkContent.props.children]), h.iconName) {
         const d2 = /* @__PURE__ */ e.createElement(
-          A,
+          O,
           {
-            key: `icon-${k}`,
-            iconName: u.iconName,
+            key: `icon-${N}`,
+            iconName: h.iconName,
             iconSize: "m"
           }
         );
         a2.unshift(d2);
       }
-      c2 && M2 && a2.unshift(
-        /* @__PURE__ */ e.createElement("span", { key: `critical-${k}`, className: "visually-hidden" }, M2)
+      c2 && w2 && a2.unshift(
+        /* @__PURE__ */ e.createElement("span", { key: `critical-${N}`, className: "visually-hidden" }, w2)
       );
       let p2;
-      u.description && (p2 = /* @__PURE__ */ e.createElement("span", { className: `${w}__item-description` }, u.description));
+      h.description && (p2 = /* @__PURE__ */ e.createElement("span", { className: `${M}__item-description` }, h.description));
       let b2;
-      if (Z2(u) && u.linkContent) {
-        const d2 = u.linkContent, H2 = d2.type;
-        b2 = /* @__PURE__ */ e.createElement(H2, { tabIndex: -1, ...d2.props }, /* @__PURE__ */ e.createElement("span", { className: `${w}__item-label` }, a2), p2);
+      if (Z2(h) && h.linkContent) {
+        const d2 = h.linkContent, H2 = d2.type;
+        b2 = /* @__PURE__ */ e.createElement(H2, { tabIndex: -1, ...d2.props }, /* @__PURE__ */ e.createElement("span", { className: `${M}__item-label` }, a2), p2);
       } else
-        b2 = /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: `${w}__item-label` }, a2), p2);
+        b2 = /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: `${M}__item-label` }, a2), p2);
       const O2 = v([
-        g2 ? `${w}__item-focused` : null,
-        c2 ? `${w}__item-critical` : null
+        g2 ? `${M}__item-focused` : null,
+        c2 ? `${M}__item-critical` : null
       ]);
       return /* @__PURE__ */ e.createElement(
         "li",
         {
-          key: j,
-          "aria-disabled": u.disabled ? !0 : null,
+          key: B,
+          "aria-disabled": h.disabled ? !0 : null,
           className: O2,
-          "data-testid": u.testId,
-          id: j,
+          "data-testid": h.testId,
+          id: B,
           onClick: A2,
           role: "menuitem",
           tabIndex: -1,
@@ -2833,50 +2833,50 @@ const d4 = {
         b2
       );
     }
-  }, v2 = (u, I) => {
-    const E = [], O = [...I];
-    let $ = O.shift(), G = [];
-    return u.map((x, j) => {
-      x !== $ ? (G.push(x), j + 1 === u.length && E.push(G)) : (E.push(G), G = [], G.push(x), $ = O.shift());
+  }, v2 = (h, j) => {
+    const E = [], H = [...j];
+    let $ = H.shift(), G = [];
+    return h.map((x, B) => {
+      x !== $ ? (G.push(x), B + 1 === h.length && E.push(G)) : (E.push(G), G = [], G.push(x), $ = H.shift());
     }), E.filter((x) => x.length > 0);
-  }, V = (u) => {
-    T.current = [], B.current = [];
-    const I = u, E = u.filter(
+  }, F = (h) => {
+    T.current = [], A.current = [];
+    const j = h, E = h.filter(
       F2 || V2
-    ), O = E.length > 0;
-    let $ = [`${w}__listbox`];
-    if (C && $.push(`${w}__listbox--navbar`), o === "end" && $.push(`${w}__listbox--end`), a === "icon-only" && $.push(`${w}__listbox--icon-only`), $ = v($), O) {
-      const G = v2(u, E);
+    ), H = E.length > 0;
+    let $ = [`${M}__listbox`];
+    if (p && $.push(`${M}__listbox--navbar`), o === "end" && $.push(`${M}__listbox--end`), c === "icon-only" && $.push(`${M}__listbox--icon-only`), $ = v($), H) {
+      const G = v2(h, E);
       G.forEach(() => {
         s2.current.push(V1());
       });
       let x = s2.current[0];
-      const j = G[0].findIndex(
+      const B = G[0].findIndex(
         (c2) => !V2(c2) && !F2(c2)
-      ), g2 = `${k}-group-${x}-item-${j + 1}`;
+      ), g2 = `${N}-group-${x}-item-${B + 1}`;
       return /* @__PURE__ */ e.createElement(
         "div",
         {
-          ref: L.setFloating,
-          "aria-activedescendant": U !== "" ? U : g2,
-          "aria-labelledby": k,
+          ref: C.setFloating,
+          "aria-activedescendant": Z !== "" ? Z : g2,
+          "aria-labelledby": N,
           className: $.toString(),
-          id: R,
+          id: _,
           onKeyDown: m2,
           role: "menu",
           style: {
-            visibility: q ? "visible" : "hidden",
-            opacity: q ? "1" : "0",
+            visibility: R ? "visible" : "hidden",
+            opacity: R ? "1" : "0",
             transition: "var(--pds-animation-transition-reveal)",
-            position: b,
-            transform: `translate(${Math.round(M)}px,${Math.round(D)}px)`,
+            position: z,
+            transform: `translate(${Math.round(b)}px,${Math.round(D)}px)`,
             zIndex: "var(--pds-z-index-dropdown)"
           },
           tabIndex: -1
         },
-        G.map((c2, M2) => {
-          x = s2.current[M2];
-          const a2 = "isHeading" in c2[0] && c2[0].isHeading, p2 = a2 ? `${k}-group-${x}-heading` : "", b2 = `${k}-group-${x}`, O2 = a2 ? null : `${d} ${M2 + 1}`;
+        G.map((c2, w2) => {
+          x = s2.current[w2];
+          const a2 = "isHeading" in c2[0] && c2[0].isHeading, p2 = a2 ? `${N}-group-${x}-heading` : "", b2 = `${N}-group-${x}`, O2 = a2 ? null : `${g} ${w2 + 1}`;
           return /* @__PURE__ */ e.createElement(
             "ul",
             {
@@ -2895,195 +2895,195 @@ const d4 = {
         })
       );
     } else {
-      const G = `${k}-item-1`;
+      const G = `${N}-item-1`;
       return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
         "ul",
         {
-          ref: L.setFloating,
-          "aria-activedescendant": U !== "" ? U : G,
-          "aria-labelledby": k,
+          ref: C.setFloating,
+          "aria-activedescendant": Z !== "" ? Z : G,
+          "aria-labelledby": N,
           className: $.toString(),
-          id: R,
+          id: _,
           onKeyDown: m2,
           role: "menu",
           style: {
-            visibility: q ? "visible" : "hidden",
-            opacity: q ? "1" : "0",
+            visibility: R ? "visible" : "hidden",
+            opacity: R ? "1" : "0",
             transition: "var(--pds-animation-transition-reveal)",
-            position: b,
-            transform: `translate(${Math.round(M)}px,${Math.round(D)}px)`
+            position: z,
+            transform: `translate(${Math.round(b)}px,${Math.round(D)}px)`
           },
           tabIndex: -1
         },
-        I.map((x, j) => C2(x, j))
+        j.map((x, B) => C2(x, B))
       ));
     }
   };
   let t2;
-  if (a === "icon-end" && (t2 = /* @__PURE__ */ e.createElement(
+  if (c === "icon-end" && (t2 = /* @__PURE__ */ e.createElement(
     B2,
     {
-      ref: L.setReference,
-      "aria-controls": R,
-      "aria-expanded": q,
+      ref: C.setReference,
+      "aria-controls": _,
+      "aria-expanded": R,
       "aria-haspopup": "true",
-      className: `${w}__trigger`,
+      className: `${M}__trigger`,
       disabled: l,
-      displayType: a,
+      displayType: c,
       iconName: "angleDown",
-      id: k,
+      id: N,
       isSplitButton: s,
-      label: n,
-      onClick: N2,
-      onKeyDown: S2,
-      size: h,
+      label: i,
+      onClick: S2,
+      onKeyDown: I2,
+      size: d,
       type: "button",
       variant: f
     }
-  )), a === "icon-only") {
-    const u = Y2(n);
+  )), c === "icon-only") {
+    const h = Y2(i);
     t2 = /* @__PURE__ */ e.createElement(
-      I2,
+      j2,
       {
-        ref: L.setReference,
-        "aria-controls": R,
-        "aria-expanded": q,
+        ref: C.setReference,
+        "aria-controls": _,
+        "aria-expanded": R,
         "aria-haspopup": "true",
-        ariaLabel: u,
-        className: `${w}__trigger ${w}__trigger--icon-only`,
+        ariaLabel: h,
+        className: `${M}__trigger ${M}__trigger--icon-only`,
         disabled: l,
         hasTooltip: !1,
-        iconName: c,
-        id: k,
-        onClick: N2,
-        onKeyDown: S2,
-        size: h,
+        iconName: a,
+        id: N,
+        onClick: S2,
+        onKeyDown: I2,
+        size: d,
         type: "button",
         variant: "standard"
       }
     );
   }
-  const w2 = (u) => {
-    const I = u.target;
-    I.classList.toggle(`${w}__toggle--expanded`), I.setAttribute(
+  const M2 = (h) => {
+    const j = h.target;
+    j.classList.toggle(`${M}__toggle--expanded`), j.setAttribute(
       "aria-expanded",
-      I.getAttribute("aria-expanded") === "true" ? "false" : "true"
-    ), I.nextElementSibling.classList.toggle(`${w}__mobile-menu--expanded`);
-  }, M1 = () => /* @__PURE__ */ e.createElement("ul", { className: `${w}__mobile-menu`, role: "menu" }, r.map((u, I) => C2(u, I)));
+      j.getAttribute("aria-expanded") === "true" ? "false" : "true"
+    ), j.nextElementSibling.classList.toggle(`${M}__mobile-menu--expanded`);
+  }, w1 = () => /* @__PURE__ */ e.createElement("ul", { className: `${M}__mobile-menu`, role: "menu" }, r.map((h, j) => C2(h, j)));
   let J2;
-  const b1 = a === "icon-end" ? "pds-button pds-button--navbar" : null, E1 = v([
-    `${w}__toggle`,
+  const b1 = c === "icon-end" ? "pds-button pds-button--navbar" : null, E1 = v([
+    `${M}__toggle`,
     b1
   ]);
-  _ && (J2 = /* @__PURE__ */ e.createElement(
+  y && (J2 = /* @__PURE__ */ e.createElement(
     "button",
     {
       "aria-expanded": !1,
       className: E1,
       disabled: l,
-      id: k,
-      onClick: w2,
+      id: N,
+      onClick: M2,
       type: "button"
     },
-    a === "icon-only" ? /* @__PURE__ */ e.createElement("span", { className: `${w}__icon-label` }, /* @__PURE__ */ e.createElement(A, { iconName: c }), " ", n) : n,
+    c === "icon-only" ? /* @__PURE__ */ e.createElement("span", { className: `${M}__icon-label` }, /* @__PURE__ */ e.createElement(O, { iconName: a }), " ", i) : i,
     /* @__PURE__ */ e.createElement(
-      A,
+      O,
       {
-        className: `${w}__toggle-icon ${w}__toggle-icon--${a}`,
+        className: `${M}__toggle-icon ${M}__toggle-icon--${c}`,
         iconName: "angleDown",
         iconSize: "m"
       }
     )
   ));
-  const y1 = J2, $1 = q ? `${w}--expanded` : null;
+  const y1 = J2, $1 = R ? `${M}--expanded` : null;
   return /* @__PURE__ */ e.createElement(
     "span",
     {
       ref: Y,
       className: v([
-        w,
-        y,
+        M,
+        I,
         S,
         $1,
         t
       ]),
-      "data-testid": z,
-      ...g
+      "data-testid": L,
+      ...u
     },
-    _ ? /* @__PURE__ */ e.createElement(e.Fragment, null, y1, /* @__PURE__ */ e.createElement(M1, null)) : /* @__PURE__ */ e.createElement(e.Fragment, null, t2, V(r))
+    y ? /* @__PURE__ */ e.createElement(e.Fragment, null, y1, /* @__PURE__ */ e.createElement(w1, null)) : /* @__PURE__ */ e.createElement(e.Fragment, null, t2, F(r))
   );
 }, F4 = ({
   className: t,
   defaultValue: l,
-  disabled: a = !1,
-  id: c,
-  label: i,
+  disabled: c = !1,
+  id: a,
+  label: n,
   onChange: s,
-  options: n,
+  options: i,
   size: r = "s",
   value: o,
   ...m
 }) => {
-  const h = "pds-segmented-button", z = a ? "pds-is-disabled" : null, d = `${h}--${r}`, f = r === "s" ? "s" : "m", C = typeof o < "u", g = typeof l < "u", [p, L] = H(
-    g ? l : ""
-  ), b = (M) => {
-    L(M.target.value), s && s(M.target.value);
+  const d = "pds-segmented-button", L = c ? "pds-is-disabled" : null, g = `${d}--${r}`, f = r === "s" ? "s" : "m", p = typeof o < "u", u = typeof l < "u", [w, C] = V(
+    u ? l : ""
+  ), z = (b) => {
+    C(b.target.value), s && s(b.target.value);
   };
-  if (n.length >= 2 && n.length <= 6)
+  if (i.length >= 2 && i.length <= 6)
     return /* @__PURE__ */ e.createElement(
       "fieldset",
       {
         className: v([
-          h,
           d,
-          z,
+          g,
+          L,
           t ?? ""
         ]),
         ...m
       },
-      /* @__PURE__ */ e.createElement("legend", { className: "visually-hidden" }, i),
-      /* @__PURE__ */ e.createElement("div", { className: `${h}__options` }, n.map((M, D) => {
-        const N = C ? o === M.value : p === M.value, P = `${h}__option`, _ = N ? `${P}--checked` : null;
+      /* @__PURE__ */ e.createElement("legend", { className: "visually-hidden" }, n),
+      /* @__PURE__ */ e.createElement("div", { className: `${d}__options` }, i.map((b, D) => {
+        const P = p ? o === b.value : w === b.value, k = `${d}__option`, y = P ? `${k}--checked` : null;
         return /* @__PURE__ */ e.createElement(
           "div",
           {
-            key: `${c}-option-${D}`,
-            className: v([P, _])
+            key: `${a}-option-${D}`,
+            className: v([k, y])
           },
           /* @__PURE__ */ e.createElement(
             "input",
             {
-              checked: N,
+              checked: P,
               className: "visually-hidden",
-              disabled: a || M.disabled,
-              id: M.id ? M.id : `${c}-option-${D}`,
-              name: c,
-              onChange: b,
+              disabled: c || b.disabled,
+              id: b.id ? b.id : `${a}-option-${D}`,
+              name: a,
+              onChange: z,
               type: "radio",
-              value: M.value
+              value: b.value
             }
           ),
           /* @__PURE__ */ e.createElement(
             "label",
             {
-              htmlFor: M.id ? M.id : `${c}-option-${D}`,
-              title: M.label
+              htmlFor: b.id ? b.id : `${a}-option-${D}`,
+              title: b.label
             },
-            M.iconName && /* @__PURE__ */ e.createElement(
-              A,
+            b.iconName && /* @__PURE__ */ e.createElement(
+              O,
               {
-                className: `${h}__icon`,
-                iconName: M.iconName,
+                className: `${d}__icon`,
+                iconName: b.iconName,
                 iconSize: f
               }
             ),
-            /* @__PURE__ */ e.createElement("span", { className: `${h}__label-text` }, M.label),
-            M.tally && /* @__PURE__ */ e.createElement(
+            /* @__PURE__ */ e.createElement("span", { className: `${d}__label-text` }, b.label),
+            b.tally && /* @__PURE__ */ e.createElement(
               d1,
               {
-                className: `${h}__tally`,
-                label: M.tally.label,
-                type: M.tally.type
+                className: `${d}__tally`,
+                label: b.tally.label,
+                type: b.tally.type
               }
             )
           )
@@ -3093,61 +3093,61 @@ const d4 = {
 }, v4 = ({
   actionItems: t,
   className: l,
-  disabled: a,
-  id: c,
-  moreActionsLabel: i = "More actions",
+  disabled: c,
+  id: a,
+  moreActionsLabel: n = "More actions",
   size: s = "s",
-  variant: n = "primary",
+  variant: i = "primary",
   ...r
 }) => {
-  const o = "pds-split-button", m = `${o}--${n}`, h = t[0], z = t.slice(1);
-  let d = null;
-  return "isLink" in h && h.isLink === !0 ? d = /* @__PURE__ */ e.createElement(
+  const o = "pds-split-button", m = `${o}--${i}`, d = t[0], L = t.slice(1);
+  let g = null;
+  return "isLink" in d && d.isLink === !0 ? g = /* @__PURE__ */ e.createElement(
     g4,
     {
       className: `${o}__primary-action`,
-      disabled: a,
+      disabled: c,
       displayType: "label-only",
-      linkContent: h.linkContent,
+      linkContent: d.linkContent,
       size: s,
-      variant: n
+      variant: i
     }
-  ) : "label" in h && (d = /* @__PURE__ */ e.createElement(
+  ) : "label" in d && (g = /* @__PURE__ */ e.createElement(
     B2,
     {
       className: `${o}__primary-action`,
-      disabled: a,
-      label: h.label,
-      onClick: () => h.callback(),
+      disabled: c,
+      label: d.label,
+      onClick: () => d.callback(),
       size: s,
-      variant: n
+      variant: i
     }
   )), /* @__PURE__ */ e.createElement(
     "span",
     {
       className: v([o, m, l]),
-      id: c,
+      id: a,
       ...r
     },
-    d,
+    g,
     /* @__PURE__ */ e.createElement(
       C4,
       {
         isSplitButton: !0,
         className: `${o}__menu-button`,
-        disabled: a,
+        disabled: c,
         displayType: "icon-end",
-        id: `${c}-menu`,
-        label: i,
-        menuItems: z,
+        id: `${a}-menu`,
+        label: n,
+        menuItems: L,
         size: s,
         testId: null,
-        variant: n,
+        variant: i,
         withinNavbar: !1
       }
     )
   );
-}, w4 = {
+}, M4 = {
   drupal: "Drupal",
   drupal7: "Drupal 7",
   "front-end-sites": "Next.js and Gatsby",
@@ -3162,17 +3162,17 @@ const d4 = {
   splunk: "Splunk",
   "sumo-logic": "Sumo Logic",
   wordpress: "WordPress"
-}, M4 = ({
+}, w4 = ({
   className: t,
   iconSize: l = "2xl",
-  platformType: a,
-  ...c
+  platformType: c,
+  ...a
 }) => {
-  const i = "pds-platform-icon", s = `pds-platform-icon--${a}`, n = `pds-platform-icon--${l}`;
+  const n = "pds-platform-icon", s = `pds-platform-icon--${c}`, i = `pds-platform-icon--${l}`;
   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(c)) {
     let m = [];
-    switch (a) {
+    switch (c) {
       case "front-end-sites":
         m = ["next", "gatsby"];
         break;
@@ -3189,20 +3189,20 @@ const d4 = {
     r = /* @__PURE__ */ e.createElement(
       "span",
       {
-        "aria-label": w4[a],
-        className: `${i}__group`,
+        "aria-label": M4[c],
+        className: `${n}__group`,
         role: "img"
       },
       _2(q2[m[0]], { "aria-hidden": "true" }),
       _2(q2[m[1]], { "aria-hidden": "true" })
     );
   } else
-    r = q2[a];
+    r = q2[c];
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: v([i, s, n, t]),
-      ...c
+      className: v([n, s, i, t]),
+      ...a
     },
     r
   );
@@ -3503,18 +3503,18 @@ const d4 = {
 }, Z4 = ({
   buttonType: t = "button",
   className: l = "",
-  disabled: a = !1,
-  label: c,
-  onClick: i,
+  disabled: c = !1,
+  label: a,
+  onClick: n,
   platform: s,
-  size: n = "m",
+  size: i = "m",
   ...r
 }) => {
-  const o = "pds-sso-button", m = `${o}--${n}`, h = n === "m" ? "l" : "2xl", z = /* @__PURE__ */ e.createElement(
-    M4,
+  const o = "pds-sso-button", m = `${o}--${i}`, d = i === "m" ? "l" : "2xl", L = /* @__PURE__ */ e.createElement(
+    w4,
     {
       className: `${o}__icon`,
-      iconSize: h,
+      iconSize: d,
       platformType: s
     }
   );
@@ -3522,102 +3522,124 @@ const d4 = {
     "button",
     {
       className: v([o, m, l]),
-      disabled: a,
-      onClick: i,
+      disabled: c,
+      onClick: n,
       type: t,
       ...r
     },
-    z,
-    c
+    L,
+    a
   );
 }, q4 = ({
   buttonProps: t,
   className: l,
-  disabled: a = !1,
-  hasBorder: c = !1,
-  iconName: i,
+  disabled: c = !1,
+  hasBorder: a = !1,
+  iconName: n,
   iconPosition: s = "before",
-  isCritical: n = !1,
+  isCritical: i = !1,
   isLoading: r,
   isMonospace: o = !1,
   isWorking: m,
-  label: h,
-  linkContent: z,
-  onClick: d,
+  label: d,
+  linkContent: L,
+  onClick: g,
   tooltipText: f,
-  ...C
+  ...p
 }) => {
-  const g = "pds-utility-button", p = r ? "pds-pulse" : null, L = (w) => i && !m ? /* @__PURE__ */ e.createElement(A, { key: w, className: `${g}__icon`, iconName: i }) : null, b = () => m ? /* @__PURE__ */ e.createElement(
-    k2,
+  const u = "pds-utility-button", w = r ? "pds-pulse" : null, C = (M) => n && !m ? /* @__PURE__ */ e.createElement(O, { key: M, className: `${u}__icon`, iconName: n }) : null, z = () => m ? /* @__PURE__ */ e.createElement(
+    x2,
     {
       key: "spinner",
-      className: `${g}__spinner`,
+      className: `${u}__spinner`,
       colorType: "monochromatic",
       size: "s"
     }
-  ) : null, M = (w) => {
+  ) : null, b = (M) => {
     const S = [];
-    return s === "before" && S.push(L("icon-before")), S.push(b()), S.push(
-      /* @__PURE__ */ e.createElement("span", { key: "label", className: `${g}__label` }, w)
-    ), s === "after" && S.push(L("icon-after")), S.filter(Boolean);
-  }, D = z && h2(z) ? z.props.children : h, N = v([
-    g,
-    c ? `${g}--border` : null,
-    n ? `${g}--critical` : null,
-    a ? `${g}--disabled` : null,
-    r ? `${g}--loading` : null,
-    m ? `${g}--working` : null,
-    o ? `${g}--monospace` : null,
+    return s === "before" && S.push(C("icon-before")), S.push(z()), S.push(
+      /* @__PURE__ */ e.createElement("span", { key: "label", className: `${u}__label` }, M)
+    ), s === "after" && S.push(C("icon-after")), S.filter(Boolean);
+  }, D = L && h2(L) ? L.props.children : d, P = v([
+    u,
+    a ? `${u}--border` : null,
+    i ? `${u}--critical` : null,
+    c ? `${u}--disabled` : null,
+    r ? `${u}--loading` : null,
+    m ? `${u}--working` : null,
+    o ? `${u}--monospace` : null,
     l ?? ""
-  ]), P = (w) => f ? /* @__PURE__ */ e.createElement(T2, { content: f, customTrigger: w }) : w;
-  if (z && !a) {
-    const w = h2(z) ? _2(
-      z,
-      Object.assign({}, z.props, {
+  ]), k = (M) => f ? /* @__PURE__ */ e.createElement(T2, { content: f, customTrigger: M }) : M;
+  if (L && !c) {
+    const M = h2(L) ? _2(
+      L,
+      Object.assign({}, L.props, {
         className: v([
-          `${g}__button`,
-          p,
-          z.props.className ?? ""
+          `${u}__button`,
+          w,
+          L.props.className ?? ""
         ]),
-        children: M(D)
+        children: b(D)
       })
     ) : null;
-    return /* @__PURE__ */ e.createElement("div", { className: N, ...C }, P(w));
+    return /* @__PURE__ */ e.createElement("div", { className: P, ...p }, k(M));
   }
-  const _ = /* @__PURE__ */ e.createElement(
+  const y = /* @__PURE__ */ e.createElement(
     "button",
     {
-      "aria-disabled": a || r || m,
-      className: v([`${g}__button`, p]),
-      onClick: a ? void 0 : d,
+      "aria-disabled": c || r || m,
+      className: v([`${u}__button`, w]),
+      onClick: c ? void 0 : g,
       type: "button",
       ...t
     },
-    M(D)
+    b(D)
+  );
+  return /* @__PURE__ */ e.createElement("div", { className: P, ...p }, k(y));
+}, G4 = ({
+  background: t = "default",
+  children: l,
+  className: c,
+  padding: a = "standard",
+  ...n
+}) => {
+  const s = "pds-card", i = t !== "default" ? `${s}--${t}` : null, r = a !== "standard" ? `${s}--pad-${a}` : null, o = P2(l), m = o.image, d = o.__unslotted || o.main;
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: v([
+        s,
+        i,
+        r,
+        c ?? ""
+      ]),
+      ...n
+    },
+    m && /* @__PURE__ */ e.createElement("div", { className: `${s}__image` }, m[0]),
+    d && /* @__PURE__ */ e.createElement("div", { className: `${s}__main` }, d)
   );
-  return /* @__PURE__ */ e.createElement("div", { className: N, ...C }, P(_));
-}, G4 = P2(
+}, W4 = k2(
   ({
     className: t,
     counterMaxLength: l,
-    defaultValue: a,
-    disabled: c = !1,
-    id: i,
+    defaultValue: c,
+    disabled: a = !1,
+    id: n,
     inputWidth: s,
-    isResizable: n = !0,
+    isResizable: i = !0,
     label: r,
     message: o,
     onBlur: m,
-    onChange: h,
-    onFocus: z,
-    placeholder: d,
+    onChange: d,
+    onFocus: L,
+    placeholder: g,
     readonly: f = !1,
-    required: C = !1,
-    rows: g = 5,
-    showLabel: p,
-    size: L = "s",
-    textareaProps: b,
-    tooltipText: M = null,
+    required: p = !1,
+    rows: u = 5,
+    showLabel: w,
+    size: C = "s",
+    textareaProps: z,
+    tooltipText: b = null,
     translationStrings: D = {
       clearButton: "Clear input text",
       counterOverLimit: "Character limit exceeded by",
@@ -3626,115 +3648,115 @@ const d4 = {
       visibilityToggleHide: "Hide input value",
       visibilityToggleShow: "Show input value"
     },
-    validationMessage: N,
-    validationStatus: P,
-    value: _,
-    ...w
+    validationMessage: P,
+    validationStatus: k,
+    value: y,
+    ...M
   }, S) => {
-    const y = p1(s), k = "pds-textarea", R = n ? "pds-is-resizable" : null, F = c ? X.disabled : null, Y = C && !c ? X.required : null, q = P === "error" ? X.error : null, i2 = P === "success" ? X.success : null, Z = L !== "s" ? `${k}--${L}` : null, n2 = f ? X.readonly : null, U = N || o, r2 = _ != null && h !== void 0, Q = typeof a < "u", [o2, s2] = H(
-      Q ? a : ""
-    ), T = _ || o2, B = (K) => {
-      r2 || s2(K.target.value), h && h(K);
-    }, W = (K) => {
-      m && m(K);
+    const I = p1(s), N = "pds-textarea", _ = i ? "pds-is-resizable" : null, W = a ? X.disabled : null, Y = p && !a ? X.required : null, R = k === "error" ? X.error : null, i2 = k === "success" ? X.success : null, K = C !== "s" ? `${N}--${C}` : null, n2 = f ? X.readonly : null, Z = P || o, r2 = y != null && d !== void 0, Q = typeof c < "u", [o2, s2] = V(
+      Q ? c : ""
+    ), T = y || o2, A = (U) => {
+      r2 || s2(U.target.value), d && d(U);
+    }, q = (U) => {
+      m && m(U);
     };
     return /* @__PURE__ */ e.createElement(
       "div",
       {
         className: v([
           X.base,
-          k,
-          Z,
-          F,
+          N,
+          K,
+          W,
           Y,
-          q,
+          R,
           i2,
           n2,
           t ?? ""
         ]),
-        style: s ? y : null,
-        ...w
+        style: s ? I : null,
+        ...M
       },
-      /* @__PURE__ */ e.createElement("div", { className: `${k}__inputlabel-wrapper` }, /* @__PURE__ */ e.createElement(
+      /* @__PURE__ */ e.createElement("div", { className: `${N}__inputlabel-wrapper` }, /* @__PURE__ */ e.createElement(
         z1,
         {
-          className: `${k}__inputlabel`,
-          disabled: c,
-          id: i,
+          className: `${N}__inputlabel`,
+          disabled: a,
+          id: n,
           label: r,
-          required: C,
-          showLabel: p,
-          tooltipText: M
+          required: p,
+          showLabel: w,
+          tooltipText: b
         }
       ), l && /* @__PURE__ */ e.createElement(
         C1,
         {
           currentLength: T.length,
-          id: i,
+          id: n,
           maxLength: l,
           overLimitMessage: D.counterOverLimit
         }
       )),
-      /* @__PURE__ */ e.createElement("div", { className: `${k}__input-wrapper` }, /* @__PURE__ */ e.createElement(
+      /* @__PURE__ */ e.createElement("div", { className: `${N}__input-wrapper` }, /* @__PURE__ */ e.createElement(
         "textarea",
         {
           ref: S,
-          "aria-describedby": U ? `${i}__message` : null,
-          "aria-invalid": P === "error",
-          className: v([`${k}--textarea`, R]),
-          disabled: c,
-          id: i,
-          name: i,
-          onBlur: W,
-          onChange: B,
-          onFocus: z,
-          placeholder: d,
+          "aria-describedby": Z ? `${n}__message` : null,
+          "aria-invalid": k === "error",
+          className: v([`${N}--textarea`, _]),
+          disabled: a,
+          id: n,
+          name: n,
+          onBlur: q,
+          onChange: A,
+          onFocus: L,
+          placeholder: g,
           readOnly: f,
-          required: C,
-          rows: g,
-          value: r2 ? _ : o2,
-          ...b
+          required: p,
+          rows: u,
+          value: r2 ? y : o2,
+          ...z
         }
       )),
-      U && /* @__PURE__ */ e.createElement(
+      Z && /* @__PURE__ */ e.createElement(
         f1,
         {
           validationMessageHasDecorators: !0,
-          hasValidationMessage: !!N,
-          id: i,
-          message: U,
-          validationStatus: P
+          hasValidationMessage: !!P,
+          id: n,
+          message: Z,
+          validationStatus: k
         }
       )
     );
   }
-), b4 = () => /* @__PURE__ */ e.createElement("div", { className: "pds-text-input__url-prefix" }, "https://"), W4 = P2(
+), b4 = () => /* @__PURE__ */ e.createElement("div", { className: "pds-text-input__url-prefix" }, "https://"), U4 = k2(
   ({
     autoComplete: t,
     className: l,
-    counterMaxLength: a,
-    defaultValue: c,
-    disabled: i = !1,
+    counterMaxLength: c,
+    defaultValue: a,
+    disabled: n = !1,
     hasClearButton: s = !1,
-    hasSearchShortcut: n = !1,
+    hasSearchShortcut: i = !1,
     hasUrlPrefix: r = !1,
     id: o,
     inputProps: m,
-    inputWidth: h,
-    label: z,
-    message: d,
+    inputWidth: d,
+    label: L,
+    message: g,
     onBlur: f,
-    onChange: C,
-    onClear: g,
-    onFocus: p,
-    placeholder: L,
-    readonly: b = !1,
-    required: M = !1,
+    onChange: p,
+    onClear: u,
+    onFocus: w,
+    placeholder: C,
+    readonly: z = !1,
+    required: b = !1,
     searchIcon: D = "search",
-    showLabel: N = !0,
-    showVisibilityToggle: P = !1,
-    size: _ = "s",
-    tooltipText: w = null,
+    showLabel: P = !0,
+    showVisibilityToggle: k = !1,
+    size: y = "s",
+    tooltipText: M = null,
     translationStrings: S = {
       clearButton: "Clear input text",
       counterOverLimit: "Character limit exceeded by",
@@ -3743,106 +3765,106 @@ const d4 = {
       visibilityToggleHide: "Hide input value",
       visibilityToggleShow: "Show input value"
     },
-    type: y = "text",
-    validationMessage: k,
-    validationStatus: R,
-    value: F,
+    type: I = "text",
+    validationMessage: N,
+    validationStatus: _,
+    value: W,
     ...Y
-  }, q) => {
-    const i2 = p1(h), Z = "pds-text-input", n2 = i ? X.disabled : null, U = M && !i ? X.required : null, r2 = R === "error" ? X.error : null, Q = R === "success" ? X.success : null, o2 = b ? X.readonly : null, s2 = _ !== "s" ? `${Z}--${_}` : null, T = r && y === "url" ? `${Z}--has-url-prefix` : null;
-    let B = null;
-    y === "search" && (B = "search"), y === "search" && D === "filter" && (B = "filter"), R === "error" && (B = "error"), R === "success" && (B = "success");
-    const W = k || d, K = typeof F < "u", e2 = typeof c < "u", [z2, u2] = H(
-      e2 ? c : ""
-    ), f2 = F || z2, N2 = (V) => {
-      if (P && m2 && L2(!1), r && y === "url") {
-        const t2 = l1(V.target.value), w2 = {
-          ...V,
+  }, R) => {
+    const i2 = p1(d), K = "pds-text-input", n2 = n ? X.disabled : null, Z = b && !n ? X.required : null, r2 = _ === "error" ? X.error : null, Q = _ === "success" ? X.success : null, o2 = z ? X.readonly : null, s2 = y !== "s" ? `${K}--${y}` : null, T = r && I === "url" ? `${K}--has-url-prefix` : null;
+    let A = null;
+    I === "search" && (A = "search"), I === "search" && D === "filter" && (A = "filter"), _ === "error" && (A = "error"), _ === "success" && (A = "success");
+    const q = N || g, U = typeof W < "u", e2 = typeof a < "u", [z2, u2] = V(
+      e2 ? a : ""
+    ), f2 = W || z2, S2 = (F) => {
+      if (k && m2 && L2(!1), r && I === "url") {
+        const t2 = l1(F.target.value), M2 = {
+          ...F,
           target: {
-            ...V.target,
+            ...F.target,
             value: t2
           }
         };
-        f && f(w2);
-      } else f && f(V);
-    }, A2 = (V) => {
-      if (r && y === "url") {
-        const t2 = l1(V.target.value), w2 = {
-          ...V,
+        f && f(M2);
+      } else f && f(F);
+    }, A2 = (F) => {
+      if (r && I === "url") {
+        const t2 = l1(F.target.value), M2 = {
+          ...F,
           target: {
-            ...V.target,
+            ...F.target,
             value: t2
           }
         };
-        K || u2(t2), C && C(w2);
+        U || u2(t2), p && p(M2);
       } else
-        K || u2(V.target.value), C && C(V);
-    }, S2 = () => {
-      K || u2(""), g && g();
-      const V = document.getElementById(o);
-      V && V.focus();
-    }, [m2, L2] = H(!1), C2 = () => {
+        U || u2(F.target.value), p && p(F);
+    }, I2 = () => {
+      U || u2(""), u && u();
+      const F = document.getElementById(o);
+      F && F.focus();
+    }, [m2, L2] = V(!1), C2 = () => {
       L2((t2) => !t2);
-      const V = document.getElementById(o);
-      V && V.focus();
+      const F = document.getElementById(o);
+      F && F.focus();
     };
-    let v2 = y;
-    return P && y === "password" && (m2 ? v2 = "text" : v2 = "password"), /* @__PURE__ */ e.createElement(
+    let v2 = I;
+    return k && I === "password" && (m2 ? v2 = "text" : v2 = "password"), /* @__PURE__ */ e.createElement(
       "div",
       {
         className: v([
           X.base,
-          Z,
+          K,
           s2,
           n2,
-          U,
+          Z,
           r2,
           Q,
           o2,
           T,
           l ?? ""
         ]),
-        style: h ? i2 : null,
+        style: d ? i2 : null,
         ...Y
       },
       /* @__PURE__ */ e.createElement(
         z1,
         {
-          disabled: i,
+          disabled: n,
           id: o,
-          label: z,
-          required: M,
-          showLabel: N,
-          tooltipText: w
+          label: L,
+          required: b,
+          showLabel: P,
+          tooltipText: M
         }
       ),
-      P && y === "password" && /* @__PURE__ */ e.createElement("div", { "aria-live": "polite", className: "visually-hidden" }, `${S.visibilityStatus} ${m2 ? "visible" : "hidden"}.`),
+      k && I === "password" && /* @__PURE__ */ e.createElement("div", { "aria-live": "polite", className: "visually-hidden" }, `${S.visibilityStatus} ${m2 ? "visible" : "hidden"}.`),
       /* @__PURE__ */ e.createElement(
         "div",
         {
-          className: `${Z}__input-wrapper ${r && y === "url" ? `${Z}__input-wrapper--has-prefix` : ""}`
+          className: `${K}__input-wrapper ${r && I === "url" ? `${K}__input-wrapper--has-prefix` : ""}`
         },
-        B && /* @__PURE__ */ e.createElement(L1, { variant: B }),
-        r && y === "url" && /* @__PURE__ */ e.createElement(b4, null),
+        A && /* @__PURE__ */ e.createElement(L1, { variant: A }),
+        r && I === "url" && /* @__PURE__ */ e.createElement(b4, null),
         /* @__PURE__ */ e.createElement(
           "input",
           {
-            ref: q,
-            "aria-describedby": W ? `${o}__message` : null,
-            "aria-invalid": R === "error" ? !0 : null,
-            autoComplete: y === "password" ? "off" : t,
-            className: `${Z}__input ${r && y === "url" ? `${Z}__input--has-prefix` : ""}`,
-            disabled: i,
+            ref: R,
+            "aria-describedby": q ? `${o}__message` : null,
+            "aria-invalid": _ === "error" ? !0 : null,
+            autoComplete: I === "password" ? "off" : t,
+            className: `${K}__input ${r && I === "url" ? `${K}__input--has-prefix` : ""}`,
+            disabled: n,
             id: o,
             name: o,
-            onBlur: N2,
+            onBlur: S2,
             onChange: A2,
-            onFocus: p,
-            placeholder: L,
-            readOnly: b,
-            required: M,
+            onFocus: w,
+            placeholder: C,
+            readOnly: z,
+            required: b,
             type: v2,
-            value: K ? F : z2,
+            value: U ? W : z2,
             ...m
           }
         ),
@@ -3850,47 +3872,47 @@ const d4 = {
           o4,
           {
             clearLabel: S.clearButton,
-            handleClearInput: S2,
+            handleClearInput: I2,
             id: o
           }
         ),
-        P && y === "password" && /* @__PURE__ */ e.createElement(
+        k && I === "password" && /* @__PURE__ */ e.createElement(
           "button",
           {
             "aria-controls": o,
-            className: `${Z}__visibility-toggle`,
+            className: `${K}__visibility-toggle`,
             onClick: C2,
-            onMouseDown: (V) => V.preventDefault(),
+            onMouseDown: (F) => F.preventDefault(),
             title: m2 ? S.visibilityToggleHide : S.visibilityToggleShow,
             type: "button"
           },
-          /* @__PURE__ */ e.createElement(A, { iconName: m2 ? "eyeSlash" : "eye", iconSize: "m" })
+          /* @__PURE__ */ e.createElement(O, { iconName: m2 ? "eyeSlash" : "eye", iconSize: "m" })
         ),
-        n && y === "search" && !f2 && /* @__PURE__ */ e.createElement(
+        i && I === "search" && !f2 && /* @__PURE__ */ e.createElement(
           r4,
           {
             inputId: o,
             shortcutLabel: S.searchShortcut
           }
         ),
-        a && y !== "password" && /* @__PURE__ */ e.createElement(
+        c && I !== "password" && /* @__PURE__ */ e.createElement(
           C1,
           {
             currentLength: f2.length,
             id: o,
-            maxLength: a,
+            maxLength: c,
             overLimitMessage: S.counterOverLimit
           }
         )
       ),
-      W && /* @__PURE__ */ e.createElement(
+      q && /* @__PURE__ */ e.createElement(
         f1,
         {
-          hasValidationMessage: !!k,
+          hasValidationMessage: !!N,
           id: o,
-          message: W,
+          message: q,
           validationMessageHasDecorators: !1,
-          validationStatus: R
+          validationStatus: _
         }
       )
     );
@@ -3906,78 +3928,78 @@ const d4 = {
         return !0;
   }
   return !1;
-}, U4 = ({
+}, K4 = ({
   ariaLabel: t,
   className: l,
-  menuItems: a,
-  size: c = "s",
-  ...i
+  menuItems: c,
+  size: a = "s",
+  ...n
 }) => {
   let s = !1;
-  const n = D2(x2);
-  n && (s = n.isMobile);
-  const r = J(null), o = "pds-button-nav", m = s ? `${o}--isMobile` : null, h = `${o}--${c}`;
+  const i = D2(N2);
+  i && (s = i.isMobile);
+  const r = J(null), o = "pds-button-nav", m = s ? `${o}--isMobile` : null, d = `${o}--${a}`;
   l2(() => {
-    const g = (p) => {
+    const u = (w) => {
       if (s) return;
-      const L = r.current;
-      if (!L) return;
-      const b = Array.from(
-        L.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])')
+      const C = r.current;
+      if (!C) return;
+      const z = Array.from(
+        C.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])')
       );
-      if (b.length === 0) return;
-      const M = document.activeElement, D = b.indexOf(M);
+      if (z.length === 0) return;
+      const b = document.activeElement, D = z.indexOf(b);
       if (D !== -1) {
-        if (p.key === "ArrowRight") {
-          p.preventDefault();
-          const N = (D + 1) % b.length;
-          b[N].focus();
-        } else if (p.key === "ArrowLeft") {
-          p.preventDefault();
-          const N = (D - 1 + b.length) % b.length;
-          b[N].focus();
+        if (w.key === "ArrowRight") {
+          w.preventDefault();
+          const P = (D + 1) % z.length;
+          z[P].focus();
+        } else if (w.key === "ArrowLeft") {
+          w.preventDefault();
+          const P = (D - 1 + z.length) % z.length;
+          z[P].focus();
         }
       }
     };
-    return document.addEventListener("keydown", g), () => {
-      document.removeEventListener("keydown", g);
+    return document.addEventListener("keydown", u), () => {
+      document.removeEventListener("keydown", u);
     };
   }, [s]);
-  const z = ({ isActive: g, linkContent: p }) => {
-    const L = `${o}__item`;
+  const L = ({ isActive: u, linkContent: w }) => {
+    const C = `${o}__item`;
     return /* @__PURE__ */ e.createElement(
       "li",
       {
         className: v([
-          L,
-          g ? `${L}--active` : null
+          C,
+          u ? `${C}--active` : null
         ])
       },
-      p
+      w
     );
-  }, d = a.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: `${o}__menu` }, a.map((g, p) => /* @__PURE__ */ e.createElement(
-    z,
+  }, g = c.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: `${o}__menu` }, c.map((u, w) => /* @__PURE__ */ e.createElement(
+    L,
     {
-      key: p,
-      isActive: X2(g),
-      linkContent: g.linkContent
+      key: w,
+      isActive: X2(u),
+      linkContent: u.linkContent
     }
   ))) : null, f = [];
-  a.map((g) => {
-    g.linkContent && (X2(g) ? f.unshift({
-      linkContent: g.linkContent,
+  c.map((u) => {
+    u.linkContent && (X2(u) ? f.unshift({
+      linkContent: u.linkContent,
       isLink: !0
     }) : f.push({
-      linkContent: g.linkContent,
+      linkContent: u.linkContent,
       isLink: !0
     }));
   });
-  const C = f.length > 0 ? /* @__PURE__ */ e.createElement(
+  const p = f.length > 0 ? /* @__PURE__ */ e.createElement(
     v4,
     {
       actionItems: f,
       id: "mobile-nav-split-button",
-      size: c,
+      size: a,
       variant: "secondary"
     }
   ) : null;
@@ -3988,96 +4010,97 @@ const d4 = {
       "aria-label": t,
       className: v([
         o,
-        h,
+        d,
         m,
         l ?? ""
       ]),
-      ...i
+      ...n
     },
-    s ? C : d
+    s ? p : g
   );
 }, y4 = {
   info: "circleInfo",
   warning: "triangleExclamation",
   critical: "diamondExclamation",
   discovery: "bullhorn"
-}, G2 = 200, $4 = 50, K4 = ({
+}, G2 = 200, $4 = 50, X4 = ({
   banners: t,
   className: l,
+  dataContext: c = "product",
   dismissLabel: a = "Dismiss",
-  labelNext: c = "Go to next message",
-  labelPrevious: i = "Go to previous message",
-  typeLabels: s = { ...Q2, neutral: "Notice" },
-  ...n
+  labelNext: n = "Go to next message",
+  labelPrevious: s = "Go to previous message",
+  typeLabels: i = { ...Q2, neutral: "Notice" },
+  ...r
 }) => {
-  const [r, o] = H(t), [m, h] = H(null), [z, d] = H(null), [f, C] = H({});
+  const o = c === "marketing", [m, d] = V(t), [L, g] = V(null), [f, p] = V(null), [u, w] = V({});
   l2(() => {
-    o(t);
+    d(t);
   }, [t]);
-  const g = r.length;
-  if (g === 0)
+  const C = m.length;
+  if (C === 0)
     return null;
-  const p = "pds-banner", L = g > 1 ? `${p}-group--multiple` : null, b = {
-    critical: `${p}--critical`,
-    discovery: `${p}--discovery`,
-    info: `${p}--info`,
-    neutral: `${p}--neutral`,
-    warning: `${p}--warning`
-  }, M = r[0].type, D = M ? `${p}-group--${M}` : null, N = (y) => R2 - y, P = (y) => y === 0 ? 0 : -1, _ = () => {
-    h(r[0].id), setTimeout(() => {
-      o((y) => [
-        ...y.slice(1),
-        y[0]
-      ]), h(null);
+  const z = "pds-banner", b = C > 1 ? `${z}-group--multiple` : null, D = {
+    critical: `${z}--critical`,
+    discovery: `${z}--discovery`,
+    info: `${z}--info`,
+    neutral: `${z}--neutral`,
+    warning: `${z}--warning`
+  }, P = m[0].type, k = P ? `${z}-group--${P}` : null, y = (_) => R2 - _, M = (_) => _ === 0 ? 0 : -1, S = () => {
+    g(m[0].id), setTimeout(() => {
+      d((_) => [
+        ..._.slice(1),
+        _[0]
+      ]), g(null);
     }, G2);
-  }, w = () => {
-    C({
-      [r[0].id]: R2 + 2,
-      [r[g - 1].id]: R2 + 1
+  }, I = () => {
+    w({
+      [m[0].id]: R2 + 2,
+      [m[C - 1].id]: R2 + 1
     }), setTimeout(() => {
-      h(r[0].id);
+      g(m[0].id);
     }, $4), setTimeout(() => {
-      o((y) => [
-        y[y.length - 1],
-        ...y.slice(0, y.length - 1)
-      ]), h(null), C({});
+      d((_) => [
+        _[_.length - 1],
+        ..._.slice(0, _.length - 1)
+      ]), g(null), w({});
     }, G2);
-  }, S = (y, k) => {
-    const { iconName: R, id: F, isDismissible: Y, message: q, onDismiss: i2, type: Z } = y, n2 = Z === "critical" ? "alert" : "status", U = `${s[Z]}:  `, r2 = (o2) => {
-      o2.preventDefault(), d(F), setTimeout(() => {
-        i2?.(), d(null), o((s2) => s2.filter(
-          (B) => B.id !== F
+  }, N = (_, W) => {
+    const { iconName: Y, id: R, isDismissible: i2, message: K, onDismiss: n2, type: Z } = _, r2 = Z === "critical" ? "alert" : "status", Q = `${i[Z]}:  `, o2 = (T) => {
+      T.preventDefault(), p(R), setTimeout(() => {
+        n2?.(), p(null), d((A) => A.filter(
+          (U) => U.id !== R
         ));
       }, G2);
-    }, Q = f[F] ?? N(k);
+    }, s2 = u[R] ?? y(W);
     return /* @__PURE__ */ e.createElement(
       "div",
       {
-        key: F,
+        key: R,
         className: v([
-          p,
-          b[Z],
-          m === F ? `${p}--fading` : null,
-          z === F ? `${p}--dismissing` : null
+          z,
+          D[Z],
+          L === R ? `${z}--fading` : null,
+          f === R ? `${z}--dismissing` : null
         ]),
-        id: F,
-        role: n2,
-        style: { zIndex: Q }
+        id: R,
+        role: r2,
+        style: { zIndex: s2 }
       },
-      /* @__PURE__ */ e.createElement("div", { className: `${p}__content` }, /* @__PURE__ */ e.createElement(
-        A,
+      /* @__PURE__ */ e.createElement("div", { className: `${z}__content` }, /* @__PURE__ */ e.createElement(
+        O,
         {
-          className: `${p}__icon ${p}__icon--${y.type}`,
-          iconName: Z === "neutral" ? R : y4[Z],
-          iconSize: "m"
+          className: `${z}__icon ${z}__icon--${_.type}`,
+          iconName: Z === "neutral" ? Y : y4[Z],
+          iconSize: o ? "l" : "m"
         }
-      ), /* @__PURE__ */ e.createElement("div", { className: `${p}__message` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, U, " "), q)),
-      Y && /* @__PURE__ */ e.createElement(
+      ), /* @__PURE__ */ e.createElement("div", { className: `${z}__message` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, Q, " "), K)),
+      i2 && /* @__PURE__ */ e.createElement(
         "button",
         {
-          className: `${p}__dismiss-button`,
-          onClick: r2,
-          tabIndex: P(k),
+          className: `${z}__dismiss-button`,
+          onClick: o2,
+          tabIndex: M(W),
           type: "button"
         },
         a
@@ -4088,72 +4111,73 @@ const d4 = {
     "div",
     {
       className: v([
-        `${p}-group`,
-        D,
-        L,
+        `${z}-group`,
+        k,
+        b,
         l ?? ""
       ]),
-      ...n
+      "data-context": c,
+      ...r
     },
-    g > 1 ? /* @__PURE__ */ e.createElement("div", { className: `${p}__navigation` }, /* @__PURE__ */ e.createElement(
-      I2,
+    C > 1 ? /* @__PURE__ */ e.createElement("div", { className: `${z}__navigation` }, /* @__PURE__ */ e.createElement(
+      j2,
       {
-        ariaLabel: i,
-        className: `${p}__nav-button ${p}__nav-button--prev`,
+        ariaLabel: s,
+        className: `${z}__nav-button ${z}__nav-button--prev`,
         iconName: "angleLeft",
-        onClick: w,
+        onClick: I,
         size: "m"
       }
     ), /* @__PURE__ */ e.createElement(
-      I2,
+      j2,
       {
-        ariaLabel: c,
-        className: `${p}__nav-button ${p}__nav-button--next`,
+        ariaLabel: n,
+        className: `${z}__nav-button ${z}__nav-button--next`,
         iconName: "angleRight",
-        onClick: _,
+        onClick: S,
         size: "m"
       }
-    ), r.map((y, k) => S(y, k))) : S(r[0], 0)
+    ), m.map((_, W) => N(_, W))) : N(m[0], 0)
   );
 }, W2 = {
   info: "circleInfo",
   warning: "triangleExclamation",
   success: "circleCheck",
   critical: "diamondExclamation"
-}, X4 = ({
+}, Y4 = ({
   className: t,
   message: l,
-  title: a,
-  type: c,
-  typeLabels: i = {
+  title: c,
+  type: a,
+  typeLabels: n = {
     ...Q2,
     working: "Working"
   },
   ...s
 }) => {
-  const n = "pds-inline-message", r = {
-    error: `${n}--error`,
-    success: `${n}--success`,
-    warning: `${n}--warning`,
-    info: `${n}--info`,
-    critical: `${n}--critical`,
-    working: `${n}--working`
-  }, o = c === "critical" ? "alert" : "status", m = `${i[c]}: `, h = typeof l == "string" ? /* @__PURE__ */ e.createElement("p", null, l) : l;
+  const i = "pds-inline-message", r = {
+    error: `${i}--error`,
+    success: `${i}--success`,
+    warning: `${i}--warning`,
+    info: `${i}--info`,
+    critical: `${i}--critical`,
+    working: `${i}--working`
+  }, o = a === "critical" ? "alert" : "status", m = `${n[a]}: `, d = typeof l == "string" ? /* @__PURE__ */ e.createElement("p", null, l) : l;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: v([n, r[c], t ?? ""]),
+      className: v([i, r[a], t ?? ""]),
       role: o,
       ...s
     },
-    /* @__PURE__ */ e.createElement("div", { className: `${n}__icon ${n}__icon-${c}` }, c === "working" ? /* @__PURE__ */ e.createElement(k2, { colorType: "monochromatic", size: "m" }) : /* @__PURE__ */ e.createElement(
-      A,
+    /* @__PURE__ */ e.createElement("div", { className: `${i}__icon ${i}__icon-${a}` }, a === "working" ? /* @__PURE__ */ e.createElement(x2, { colorType: "monochromatic", size: "m" }) : /* @__PURE__ */ e.createElement(
+      O,
       {
-        iconName: `${c}` in W2 ? W2[c] : W2.info,
+        iconName: `${a}` in W2 ? W2[a] : W2.info,
         iconSize: "m"
       }
     )),
-    /* @__PURE__ */ e.createElement("div", { className: `${n}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, m), /* @__PURE__ */ e.createElement("div", { className: `${n}__title` }, a), /* @__PURE__ */ e.createElement("div", { className: `${n}__message` }, h))
+    /* @__PURE__ */ e.createElement("div", { className: `${i}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, m), /* @__PURE__ */ e.createElement("div", { className: `${i}__title` }, c), /* @__PURE__ */ e.createElement("div", { className: `${i}__message` }, d))
   );
 }, U2 = {
   info: "circleInfo",
@@ -4161,76 +4185,78 @@ const d4 = {
   success: "circleCheck",
   critical: "diamondExclamation",
   discovery: "squareQuestion"
-}, Y4 = ({
+}, Q4 = ({
   className: t,
   ctaButton: l,
+  dataContext: c = "product",
   dismissLabel: a = "Dismiss",
-  id: c,
-  isDismissible: i,
-  message: s,
-  onDismiss: n,
-  title: r,
-  type: o = "info",
-  typeLabels: m = Q2,
-  ...h
+  id: n,
+  isDismissible: s,
+  message: i,
+  onDismiss: r,
+  title: o,
+  type: m = "info",
+  typeLabels: d = Q2,
+  ...L
 }) => {
-  const z = J(null), d = "pds-section-message", f = {
-    error: `${d}--error`,
-    success: `${d}--success`,
-    warning: `${d}--warning`,
-    info: `${d}--info`,
-    critical: `${d}--critical`,
-    discovery: `${d}--discovery`,
-    dismissing: `${d}--dismissing`,
-    dismissed: `${d}--dismissed`
-  }, C = i ? `${d}--hasDismiss` : null, g = r ? `${d}--hasTitle` : null, p = o === "critical" ? "alert" : "status", L = `${m[o]}: `, b = typeof s == "string" ? /* @__PURE__ */ e.createElement("p", null, s) : s, M = () => {
-    z.current.addEventListener("animationend", D, {
+  const g = c === "marketing", f = J(null), p = "pds-section-message", u = {
+    error: `${p}--error`,
+    success: `${p}--success`,
+    warning: `${p}--warning`,
+    info: `${p}--info`,
+    critical: `${p}--critical`,
+    discovery: `${p}--discovery`,
+    dismissing: `${p}--dismissing`,
+    dismissed: `${p}--dismissed`
+  }, w = s ? `${p}--hasDismiss` : null, C = o ? `${p}--hasTitle` : null, z = m === "critical" ? "alert" : "status", b = `${d[m]}: `, D = typeof i == "string" ? /* @__PURE__ */ e.createElement("p", null, i) : i, P = () => {
+    f.current.addEventListener("animationend", k, {
       once: !0
     });
-  }, D = (P) => {
-    n(P, c);
-  }, N = () => {
-    M(), z.current.classList.toggle(f.dismissing), setTimeout(() => {
-      z.current.classList.toggle(f.dismissing), z.current.classList.toggle(f.dismissed);
+  }, k = (M) => {
+    r(M, n);
+  }, y = () => {
+    P(), f.current.classList.toggle(u.dismissing), setTimeout(() => {
+      f.current.classList.toggle(u.dismissing), f.current.classList.toggle(u.dismissed);
     }, 400);
   };
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      ref: z,
+      ref: f,
       className: v([
-        d,
-        f[o],
+        p,
+        u[m],
+        w,
         C,
-        g,
         t ?? ""
       ]),
-      id: c,
-      role: p,
-      ...h
+      "data-context": c,
+      id: n,
+      role: z,
+      ...L
     },
-    /* @__PURE__ */ e.createElement("div", { className: `${d}__content` }, /* @__PURE__ */ e.createElement("div", { className: `${d}__icon ${d}__icon-${o}` }, /* @__PURE__ */ e.createElement(
-      A,
+    /* @__PURE__ */ e.createElement("div", { className: `${p}__content` }, /* @__PURE__ */ e.createElement("div", { className: `${p}__icon ${p}__icon-${m}` }, /* @__PURE__ */ e.createElement(
+      O,
       {
-        iconName: `${o}` in U2 ? U2[o] : U2.info,
-        iconSize: "m"
+        iconName: `${m}` in U2 ? U2[m] : U2.info,
+        iconSize: g ? "l" : "m"
       }
-    )), /* @__PURE__ */ e.createElement("div", { className: `${d}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, L), r && /* @__PURE__ */ e.createElement("div", { className: `${d}__title` }, r), /* @__PURE__ */ e.createElement("div", { className: `${d}__message` }, b))),
-    (l || i) && /* @__PURE__ */ e.createElement("div", { className: `${d}__actions` }, l && /* @__PURE__ */ e.createElement(
+    )), /* @__PURE__ */ e.createElement("div", { className: `${p}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, b), o && /* @__PURE__ */ e.createElement("div", { className: `${p}__title` }, o), /* @__PURE__ */ e.createElement("div", { className: `${p}__message` }, D))),
+    (l || s) && /* @__PURE__ */ e.createElement("div", { className: `${p}__actions` }, l && /* @__PURE__ */ e.createElement(
       B2,
       {
         ...l,
-        className: `${d}__cta`,
-        size: "s",
+        className: `${p}__cta`,
+        size: g ? "m" : "s",
         variant: "secondary"
       }
-    ), i && /* @__PURE__ */ e.createElement(
+    ), s && /* @__PURE__ */ e.createElement(
       v1,
       {
         ariaLabel: a,
-        className: `${d}__dismiss`,
-        onClick: N,
-        size: "l"
+        className: `${p}__dismiss`,
+        onClick: y,
+        size: g ? "xl" : "l"
       }
     ))
   );
@@ -4245,37 +4271,37 @@ const d4 = {
   warning: "Warning",
   critical: "Critical",
   working: "Working..."
-}, P4 = ({
+}, k4 = ({
   children: t,
   className: l,
-  id: a,
-  type: c = "info",
-  typeLabels: i = D4
+  id: c,
+  type: a = "info",
+  typeLabels: n = D4
 }) => {
-  const s = "pds-toast", n = {
+  const s = "pds-toast", i = {
     critical: `${s}--critical`,
     info: `${s}--info`,
     success: `${s}--success`,
     warning: `${s}--warning`,
     working: `${s}--working`
-  }, r = `${i[c]} `;
+  }, r = `${n[a]} `;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: v([s, n[c], l]),
-      id: a
+      className: v([s, i[a], l]),
+      id: c
     },
-    /* @__PURE__ */ e.createElement("div", { className: `${s}__icon-container` }, c === "working" ? /* @__PURE__ */ e.createElement(k2, { colorType: "monochromatic-reverse", size: "l" }) : /* @__PURE__ */ e.createElement(
-      A,
+    /* @__PURE__ */ e.createElement("div", { className: `${s}__icon-container` }, a === "working" ? /* @__PURE__ */ e.createElement(x2, { colorType: "monochromatic-reverse", size: "l" }) : /* @__PURE__ */ e.createElement(
+      O,
       {
-        className: `${s}__icon ${s}__icon--${c}`,
-        iconName: _4[c],
+        className: `${s}__icon ${s}__icon--${a}`,
+        iconName: _4[a],
         iconSize: "m"
       }
     )),
     /* @__PURE__ */ e.createElement("div", { className: `${s}__message` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, r), t)
   );
-}, k4 = ({
+}, P4 = ({
   ariaLabel: t,
   closeToast: l
 }) => /* @__PURE__ */ e.createElement(
@@ -4283,14 +4309,17 @@ const d4 = {
   {
     ariaLabel: t || "Close",
     className: "pds-toaster__close-button",
-    onClick: () => l(null),
-    size: "l"
+    onClick: (c) => {
+      c.stopPropagation(), l(c);
+    },
+    size: "l",
+    tabIndex: 0
   }
-), Q4 = ({
-  autoCloseDuration: t = 5e3,
+), J4 = ({
+  autoCloseDuration: t = !1,
   className: l,
-  limit: a = 5,
-  position: c = "bottom-right"
+  limit: c = 5,
+  position: a = "bottom-right"
 }) => {
   const s = v(["pds-toaster", l]);
   return /* @__PURE__ */ e.createElement(
@@ -4299,68 +4328,63 @@ const d4 = {
       newestOnTop: !0,
       autoClose: t,
       className: s,
-      closeButton: k4,
+      closeButton: P4,
       draggable: !1,
       icon: !1,
-      limit: a,
-      position: c,
+      limit: c,
+      position: a,
       role: "status",
       transition: O1
     }
   );
 };
 var x4 = /* @__PURE__ */ ((t) => (t.Critical = "critical", t.Info = "info", t.Success = "success", t.Warning = "warning", t.Working = "working", t))(x4 || {});
-const J4 = () => {
-  const t = (a, c, i = {}) => {
-    const s = /* @__PURE__ */ e.createElement(P4, { type: a }, c);
-    let n = {
-      ...i
+const e0 = () => {
+  const t = (c, a, n = {}) => {
+    const s = /* @__PURE__ */ e.createElement(k4, { type: c }, a);
+    let i = {
+      ...n
     };
-    return a === "critical" && (n = {
-      ...n,
-      autoClose: !1,
+    return c === "critical" && (i = {
+      ...i,
       role: "alert"
-    }), a === "warning" && (n = {
-      ...n,
-      autoClose: !1
-    }), a === "working" && (n = {
-      ...n,
-      autoClose: !1,
+    }), c === "working" && (i = {
+      ...i,
       closeButton: !1,
       closeOnClick: !1
-    }), e1(s, n);
+    }), e1(s, i);
   }, l = H1({
     collapse: !1,
     enter: "pds-toast--bounceInPlace",
     exit: "pds-toast--slideOut"
   });
   return [t, e1, l];
-}, e0 = ({
+}, t0 = ({
   children: t,
   className: l,
-  expandButtonAriaLabel: a,
-  isExpandable: c = !1,
-  ...i
+  expandButtonAriaLabel: c,
+  isExpandable: a = !1,
+  ...n
 }) => {
-  const s = "pds-panel-row", [n, r] = H(!1), o = J(null), m = J(null), h = j2(t), z = h["items-left"], d = h["items-right"], f = h["items-below"], C = () => {
-    const g = m.current, p = o.current;
-    if (!g || !p) return;
-    const L = !n;
-    r(L), L ? (Object.assign(g.style, {
+  const s = "pds-panel-row", [i, r] = V(!1), o = J(null), m = J(null), d = P2(t), L = d["items-left"], g = d["items-right"], f = d["items-below"], p = () => {
+    const u = m.current, w = o.current;
+    if (!u || !w) return;
+    const C = !i;
+    r(C), C ? (Object.assign(u.style, {
       display: "block",
       height: "auto",
       opacity: "1"
-    }), p.classList.add("is-expanded")) : (Object.assign(g.style, {
+    }), w.classList.add("is-expanded")) : (Object.assign(u.style, {
       height: "0",
       opacity: "0",
       display: "none"
-    }), p.classList.remove("is-expanded"));
+    }), w.classList.remove("is-expanded"));
   };
   return /* @__PURE__ */ e.createElement(
     "li",
     {
       className: v([s, l ?? ""]),
-      ...i,
+      ...n,
       ref: o
     },
     /* @__PURE__ */ e.createElement(
@@ -4368,29 +4392,29 @@ const J4 = () => {
       {
         className: v([
           `${s}__main`,
-          c ? "is-expandable" : ""
+          a ? "is-expandable" : ""
         ])
       },
-      z && /* @__PURE__ */ e.createElement("div", { className: `${s}__items ${s}__items--left` }, z),
-      d && /* @__PURE__ */ e.createElement("div", { className: `${s}__items ${s}__items--right` }, d),
-      c && /* @__PURE__ */ e.createElement(
+      L && /* @__PURE__ */ e.createElement("div", { className: `${s}__items ${s}__items--left` }, L),
+      g && /* @__PURE__ */ e.createElement("div", { className: `${s}__items ${s}__items--right` }, g),
+      a && /* @__PURE__ */ e.createElement(
         "button",
         {
-          "aria-expanded": n,
-          "aria-label": a,
+          "aria-expanded": i,
+          "aria-label": c,
           className: `${s}__expand-button`,
-          onClick: C
+          onClick: p
         },
         /* @__PURE__ */ e.createElement(
-          A,
+          O,
           {
-            className: `${s}__expand-icon ${n ? "rotated" : ""}`,
+            className: `${s}__expand-icon ${i ? "rotated" : ""}`,
             iconName: "angleDown"
           }
         )
       )
     ),
-    c && f && /* @__PURE__ */ e.createElement(
+    a && f && /* @__PURE__ */ e.createElement(
       "div",
       {
         ref: m,
@@ -4400,61 +4424,61 @@ const J4 = () => {
       /* @__PURE__ */ e.createElement("div", { className: `${s}__items-inside` }, f)
     )
   );
-}, t0 = ({
+}, s0 = ({
   alt: t = "",
   className: l,
-  height: a,
-  srcFallback: c,
-  srcWebp: i,
+  height: c,
+  srcFallback: a,
+  srcWebp: n,
   width: s,
-  ...n
+  ...i
 }) => {
   const r = "pds-picture";
-  return /* @__PURE__ */ e.createElement("picture", { className: v([r, l ?? ""]) }, /* @__PURE__ */ e.createElement("source", { srcSet: i, type: "image/webp" }), /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("picture", { className: v([r, l ?? ""]) }, /* @__PURE__ */ e.createElement("source", { srcSet: n, type: "image/webp" }), /* @__PURE__ */ e.createElement(
     "img",
     {
       alt: t,
       className: `${r}__img`,
-      height: a,
-      src: c,
+      height: c,
+      src: a,
       width: s,
-      ...n
+      ...i
     }
   ));
-}, s0 = ({
+}, c0 = ({
   className: t,
   destination: l = "main",
-  text: a = "Skip to main content",
-  ...c
+  text: c = "Skip to main content",
+  ...a
 }) => /* @__PURE__ */ e.createElement(
   "a",
   {
     className: v(["pds-skiplink", t]),
     href: `#${l}`,
-    ...c
+    ...a
   },
-  a
-), c0 = ({
+  c
+), a0 = ({
   className: t,
   label: l = null,
-  size: a = "s",
-  type: c = "neutral",
-  ...i
+  size: c = "s",
+  type: a = "neutral",
+  ...n
 }) => {
-  const s = "pds-status-indicator", n = `${s}--${c}`, r = a !== "s" ? `${s}--${a}` : null;
+  const s = "pds-status-indicator", i = `${s}--${a}`, r = c !== "s" ? `${s}--${c}` : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
       className: v([
         s,
-        n,
+        i,
         r,
         t ?? ""
       ]),
-      ...i
+      ...n
     },
-    c === "working" ? /* @__PURE__ */ e.createElement(
-      k2,
+    a === "working" ? /* @__PURE__ */ e.createElement(
+      x2,
       {
         className: `${s}__spinner`,
         colorType: "monochromatic",
@@ -4463,26 +4487,26 @@ const J4 = () => {
     ) : /* @__PURE__ */ e.createElement("span", { "aria-hidden": "true", className: `${s}__icon`, role: "img" }),
     l && /* @__PURE__ */ e.createElement("span", { className: "pds-status-indicator__label" }, l)
   );
-}, a0 = ({
+}, l0 = ({
   className: t,
   platform: l,
-  videoId: a,
-  videoTitle: c,
-  ...i
+  videoId: c,
+  videoTitle: a,
+  ...n
 }) => {
-  const s = "pds-video-embed", n = /* @__PURE__ */ e.createElement(
+  const s = "pds-video-embed", i = /* @__PURE__ */ e.createElement(
     "iframe",
     {
       allow: "autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media",
-      src: `https://fast.wistia.net/embed/iframe/${a}`,
-      title: `Wistia video player${c ? `: ${c}` : ""}`
+      src: `https://fast.wistia.net/embed/iframe/${c}`,
+      title: `Wistia video player${a ? `: ${a}` : ""}`
     }
   ), r = /* @__PURE__ */ e.createElement(
     "iframe",
     {
       allow: "autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media",
-      src: `https://player.vimeo.com/video/${a}`,
-      title: `Vimeo video player${c ? `: ${c}` : ""}`
+      src: `https://player.vimeo.com/video/${c}`,
+      title: `Vimeo video player${a ? `: ${a}` : ""}`
     }
   ), o = /* @__PURE__ */ e.createElement(
     "iframe",
@@ -4490,8 +4514,8 @@ const J4 = () => {
       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}`,
-      title: `YouTube video player${c ? `: ${c}` : ""}`
+      src: `https://www.youtube.com/embed/${c}`,
+      title: `YouTube video player${a ? `: ${a}` : ""}`
     }
   );
   let m;
@@ -4500,23 +4524,22 @@ const J4 = () => {
       m = r;
       break;
     case "wistia":
-      m = n;
+      m = i;
       break;
-    case "youtube":
     default:
       m = o;
       break;
   }
-  return /* @__PURE__ */ e.createElement("div", { className: v([s, t ?? ""]), ...i }, m);
-}, l0 = ({
+  return /* @__PURE__ */ e.createElement("div", { className: v([s, t ?? ""]), ...n }, m);
+}, i0 = ({
   className: t,
   option: l,
-  ...a
+  ...c
 }) => {
-  const c = "pds-site-option-display", i = l.type ? f4[l.type] : "bolt", s = J(null), [n] = R1(s), r = n.width / 16 - 7.5;
+  const a = "pds-site-option-display", n = l.type ? f4[l.type] : "bolt", s = J(null), [i] = R1(s), r = i.width / 16 - 7.5;
   let o, m;
   l.status === "active" && (o = "Active", m = "success"), l.status === "frozen" && (o = "Frozen", m = "frozen"), l.status === "restricted" && (o = "Restricted", m = "critical");
-  const h = /* @__PURE__ */ e.createElement(
+  const d = /* @__PURE__ */ e.createElement(
     G1,
     {
       hasStatusIndicator: !0,
@@ -4528,49 +4551,49 @@ const J4 = () => {
     "div",
     {
       ref: s,
-      className: v([c, t ?? ""]),
+      className: v([a, t ?? ""]),
       title: l.name,
-      ...a
+      ...c
     },
-    /* @__PURE__ */ e.createElement("div", { className: `${c}__inner`, style: { pointerEvents: "none" } }, /* @__PURE__ */ e.createElement("div", { className: `${c}__icon` }, /* @__PURE__ */ e.createElement(A, { iconName: i })), /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ e.createElement("div", { className: `${a}__inner`, style: { pointerEvents: "none" } }, /* @__PURE__ */ e.createElement("div", { className: `${a}__icon` }, /* @__PURE__ */ e.createElement(O, { iconName: n })), /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: `${c}__label`,
+        className: `${a}__label`,
         style: { maxWidth: `${r}rem` }
       },
       l.name
     )),
-    /* @__PURE__ */ e.createElement("div", { className: `${c}__status`, style: { pointerEvents: "none" } }, h)
+    /* @__PURE__ */ e.createElement("div", { className: `${a}__status`, style: { pointerEvents: "none" } }, d)
   );
-}, i0 = ({
+}, n0 = ({
   children: t,
   className: l,
-  width: a = "standard",
-  ...c
+  width: c = "standard",
+  ...a
 }) => {
-  const i = "pds-container", s = a !== "standard" ? `${i}--${a}` : null;
+  const n = "pds-container", s = c !== "standard" ? `${n}--${c}` : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: v([i, s, l ?? ""]),
-      ...c
+      className: v([n, s, l ?? ""]),
+      ...a
     },
     t
   );
-}, n0 = ({
+}, r0 = ({
   children: t,
   className: l,
-  sidebarMinWidth: a = 14.5,
-  sidebarWidth: c = "18%",
-  ...i
+  sidebarMinWidth: c = 14.5,
+  sidebarWidth: a = "18%",
+  ...n
 }) => {
   let s = !1;
-  const n = D2(x2);
-  n && (s = n.isMobile);
+  const i = D2(N2);
+  i && (s = i.isMobile);
   const r = "pds-docs-layout", o = s ? `${r}--isMobile` : null, m = {
-    width: c,
-    minWidth: `${a}rem`
-  }, h = j2(t), z = h.__unslotted || h.content, d = h.sidebar, f = /* @__PURE__ */ e.createElement(e.Fragment, null, d && /* @__PURE__ */ e.createElement("aside", { className: `${r}__sidebar` }, d), /* @__PURE__ */ e.createElement("div", { className: `${r}__content` }, z)), C = /* @__PURE__ */ e.createElement(e.Fragment, null, d && /* @__PURE__ */ e.createElement("aside", { className: `${r}__sidebar`, style: m }, /* @__PURE__ */ e.createElement("div", { className: `${r}__sidebar-inner` }, d)), /* @__PURE__ */ e.createElement("div", { className: `${r}__content` }, z));
+    width: a,
+    minWidth: `${c}rem`
+  }, d = P2(t), L = d.__unslotted || d.content, g = d.sidebar, f = /* @__PURE__ */ e.createElement(e.Fragment, null, g && /* @__PURE__ */ e.createElement("aside", { className: `${r}__sidebar` }, g), /* @__PURE__ */ e.createElement("div", { className: `${r}__content` }, L)), p = /* @__PURE__ */ e.createElement(e.Fragment, null, g && /* @__PURE__ */ e.createElement("aside", { className: `${r}__sidebar`, style: m }, /* @__PURE__ */ e.createElement("div", { className: `${r}__sidebar-inner` }, g)), /* @__PURE__ */ e.createElement("div", { className: `${r}__content` }, L));
   return /* @__PURE__ */ e.createElement(
     "div",
     {
@@ -4580,71 +4603,71 @@ const J4 = () => {
         "pds-container pds-container--x-wide",
         l ?? ""
       ]),
-      ...i
+      ...n
     },
-    s ? f : C
+    s ? f : p
   );
-}, r0 = ({
+}, o0 = ({
   alignContent: t = "flex-start",
   alignItems: l = "stretch",
-  children: a,
-  className: c,
-  flexDirection: i = "row",
+  children: c,
+  className: a,
+  flexDirection: n = "row",
   flexWrap: s = "nowrap",
-  gap: n = "standard",
+  gap: i = "standard",
   justifyContent: r = "flex-start",
   mobileAlignContent: o,
   mobileAlignItems: m,
-  mobileFlexDirection: h = "column",
-  mobileFlexWrap: z,
-  mobileGap: d,
+  mobileFlexDirection: d = "column",
+  mobileFlexWrap: L,
+  mobileGap: g,
   mobileJustifyContent: f,
-  ...C
+  ...p
 }) => {
-  let p = w1() <= 640;
-  const L = D2(x2);
-  L && (p = L.isMobile);
-  const b = "pds-flex", M = `${b}-container`, D = p ? `${M}--mobile` : null;
-  let N = null;
-  p ? N = `${b}-direction--${h}` : i !== "row" && (N = `${b}-direction--${i}`);
+  let w = M1() <= 640;
+  const C = D2(N2);
+  C && (w = C.isMobile);
+  const z = "pds-flex", b = `${z}-container`, D = w ? `${b}--mobile` : null;
   let P = null;
-  p ? z ? z !== "nowrap" && (P = `${b}-wrap--${z}`) : s !== "nowrap" && (P = `${b}-wrap--${s}`) : s !== "nowrap" && (P = `${b}-wrap--${s}`);
-  let _ = null;
-  p ? f ? f !== "flex-start" && (_ = `${b}-justify--${f}`) : r !== "flex-start" && (_ = `${b}-justify--${r}`) : r !== "flex-start" && (_ = `${b}-justify--${r}`);
-  let w = null;
-  p ? m ? m !== "stretch" && (w = `${b}-align-items--${m}`) : l !== "stretch" && (w = `${b}-align-items--${l}`) : l !== "stretch" && (w = `${b}-align-items--${l}`);
-  let S = null;
-  p ? o ? o !== "flex-start" && (S = `${b}-align-content--${o}`) : t !== "flex-start" && (S = `${b}-align-content--${t}`) : t !== "flex-start" && (S = `${b}-align-content--${t}`);
+  w ? P = `${z}-direction--${d}` : n !== "row" && (P = `${z}-direction--${n}`);
+  let k = null;
+  w ? L ? L !== "nowrap" && (k = `${z}-wrap--${L}`) : s !== "nowrap" && (k = `${z}-wrap--${s}`) : s !== "nowrap" && (k = `${z}-wrap--${s}`);
   let y = null;
-  return p ? d ? d !== "none" && (y = `${b}-gap--${d}`) : n !== "none" && (y = `${b}-gap--${n}`) : n !== "none" && (y = `${b}-gap--${n}`), /* @__PURE__ */ e.createElement(
+  w ? f ? f !== "flex-start" && (y = `${z}-justify--${f}`) : r !== "flex-start" && (y = `${z}-justify--${r}`) : r !== "flex-start" && (y = `${z}-justify--${r}`);
+  let M = null;
+  w ? m ? m !== "stretch" && (M = `${z}-align-items--${m}`) : l !== "stretch" && (M = `${z}-align-items--${l}`) : l !== "stretch" && (M = `${z}-align-items--${l}`);
+  let S = null;
+  w ? o ? o !== "flex-start" && (S = `${z}-align-content--${o}`) : t !== "flex-start" && (S = `${z}-align-content--${t}`) : t !== "flex-start" && (S = `${z}-align-content--${t}`);
+  let I = null;
+  return w ? g ? g !== "none" && (I = `${z}-gap--${g}`) : i !== "none" && (I = `${z}-gap--${i}`) : i !== "none" && (I = `${z}-gap--${i}`), /* @__PURE__ */ e.createElement(
     "div",
     {
       className: v([
-        M,
+        b,
         D,
-        N,
         P,
-        _,
-        w,
-        S,
+        k,
         y,
-        c ?? ""
+        M,
+        S,
+        I,
+        a ?? ""
       ]),
-      ...C
+      ...p
     },
-    a
+    c
   );
-}, o0 = ({
+}, m0 = ({
   children: t,
   mobileMenuMaxWidth: l = 640
-}) => /* @__PURE__ */ e.createElement(L4, { mobileMenuMaxWidth: l }, /* @__PURE__ */ e.createElement(c4, null, t)), m0 = ({
+}) => /* @__PURE__ */ e.createElement(L4, { mobileMenuMaxWidth: l }, /* @__PURE__ */ e.createElement(c4, null, t)), d0 = ({
   children: t,
   className: l,
-  gridGap: a = "standard",
-  verticalAlign: c = "start",
-  ...i
+  gridGap: c = "standard",
+  verticalAlign: a = "start",
+  ...n
 }) => {
-  const s = "pds-three-item-layout", n = a === "standard" ? "pds-grid" : `pds-grid pds-grid--${a}`, r = `${s}--${c}`, o = j2(t), m = [
+  const s = "pds-three-item-layout", i = c === "standard" ? "pds-grid" : `pds-grid pds-grid--${c}`, r = `${s}--${a}`, o = P2(t), m = [
     o["first-item"],
     o["second-item"],
     o["third-item"]
@@ -4654,134 +4677,135 @@ const J4 = () => {
     {
       className: v([
         s,
-        n,
+        i,
         r,
         l
       ]),
-      ...i
+      ...n
     },
-    m.map((h, z) => /* @__PURE__ */ e.createElement(
+    m.map((d, L) => /* @__PURE__ */ e.createElement(
       "div",
       {
-        key: z,
+        key: L,
         className: "pds-grid-item pds-grid-item--sm-12 pds-grid-item--md-4 pds-grid-item--lg-4"
       },
-      h
+      d
     ))
   );
-}, d0 = ({
+}, h0 = ({
   children: t,
   className: l,
-  gridGap: a = "standard",
-  layoutVariant: c = "equal",
-  verticalAlign: i = "start",
+  gridGap: c = "standard",
+  layoutVariant: a = "equal",
+  verticalAlign: n = "start",
   ...s
 }) => {
-  const n = "pds-two-item-layout", r = a === "standard" ? "pds-grid" : `pds-grid pds-grid--${a}`, o = `${n}--${i}`, m = ["pds-grid-item--md-6"], h = ["pds-grid-item--md-4", "pds-grid-item--lg-3"], z = ["pds-grid-item--md-8", "pds-grid-item--lg-9"], d = ["pds-grid-item", "pds-grid-item--sm-4"];
-  let f, C;
-  switch (c) {
+  const i = "pds-two-item-layout", r = c === "standard" ? "pds-grid" : `pds-grid pds-grid--${c}`, o = `${i}--${n}`, m = ["pds-grid-item--md-6"], d = ["pds-grid-item--md-4", "pds-grid-item--lg-3"], L = ["pds-grid-item--md-8", "pds-grid-item--lg-9"], g = ["pds-grid-item", "pds-grid-item--sm-4"];
+  let f, p;
+  switch (a) {
     case "equal":
-      f = d.concat(m), C = d.concat(m);
+      f = g.concat(m), p = g.concat(m);
       break;
     case "one-third-start":
-      f = d.concat(h), C = d.concat(z);
+      f = g.concat(d), p = g.concat(L);
       break;
     case "one-third-end":
-      f = d.concat(z), C = d.concat(h);
+      f = g.concat(L), p = g.concat(d);
   }
-  const g = j2(t), p = g["first-item"], L = g["second-item"];
+  const u = P2(t), w = u["first-item"], C = u["second-item"];
   return /* @__PURE__ */ e.createElement(
     "div",
     {
       className: v([
-        n,
+        i,
         r,
         o,
         l
       ]),
       ...s
     },
-    /* @__PURE__ */ e.createElement("div", { className: f.join(" ").trim() }, p),
-    /* @__PURE__ */ e.createElement("div", { className: C.join(" ").trim() }, L)
+    /* @__PURE__ */ e.createElement("div", { className: f.join(" ").trim() }, w),
+    /* @__PURE__ */ e.createElement("div", { className: p.join(" ").trim() }, C)
   );
-}, h0 = () => {
-  const t = typeof window < "u", l = (i) => i >= K1 ? "xl" : i >= U1 ? "lg" : i >= W1 ? "md" : "sm", [a, c] = H(
+}, u0 = () => {
+  const t = typeof window < "u", l = (n) => n >= K1 ? "xl" : n >= U1 ? "lg" : n >= W1 ? "md" : "sm", [c, a] = V(
     t ? l(window.innerWidth) : "lg"
   );
   return l2(() => {
     if (!t) return;
-    const i = () => {
-      c(l(window.innerWidth));
+    const n = () => {
+      a(l(window.innerWidth));
     };
-    return i(), window.addEventListener("resize", i), () => {
-      window.removeEventListener("resize", i);
+    return n(), window.addEventListener("resize", n), () => {
+      window.removeEventListener("resize", n);
     };
-  }, []), a;
-}, u0 = (t) => {
-  const l = typeof window < "u", a = (s) => l ? window.matchMedia(s).matches : !1, [c, i] = H(a(t));
+  }, []), c;
+}, g0 = (t) => {
+  const l = typeof window < "u", c = (s) => l ? window.matchMedia(s).matches : !1, [a, n] = V(c(t));
   return l2(() => {
     if (!l) return;
-    const s = window.matchMedia(t), n = () => {
-      i(s.matches);
+    const s = window.matchMedia(t), i = () => {
+      n(s.matches);
     };
-    return i(s.matches), s.addEventListener ? (s.addEventListener("change", n), () => s.removeEventListener("change", n)) : (s.addListener(n), () => s.removeListener(n));
-  }, [t]), c;
+    return n(s.matches), s.addEventListener ? (s.addEventListener("change", i), () => s.removeEventListener("change", i)) : (s.addListener(i), () => s.removeListener(i));
+  }, [t]), a;
 };
 export {
   A4 as Avatar,
   O4 as Badge,
-  K4 as Banner,
+  X4 as Banner,
   B2 as Button,
   g4 as ButtonLink,
-  U4 as ButtonNav,
+  K4 as ButtonNav,
+  G4 as Card,
   H4 as ClipboardButton,
   v1 as CloseButton,
-  i0 as Container,
-  n0 as DocsLayout,
-  r0 as FlexContainer,
-  o0 as GlobalWrapper,
-  A as Icon,
-  I2 as IconButton,
-  X4 as InlineMessage,
+  n0 as Container,
+  r0 as DocsLayout,
+  o0 as FlexContainer,
+  m0 as GlobalWrapper,
+  O as Icon,
+  j2 as IconButton,
+  Y4 as InlineMessage,
   C4 as MenuButton,
-  e0 as PanelRow,
-  t0 as Picture,
-  x2 as ResponsiveContext,
+  t0 as PanelRow,
+  s0 as Picture,
+  N2 as ResponsiveContext,
   L4 as ResponsiveContextProvider,
   Z4 as SSOButton,
-  Y4 as SectionMessage,
+  Q4 as SectionMessage,
   F4 as SegmentedButton,
-  l0 as SiteOptionDisplay,
+  i0 as SiteOptionDisplay,
   R4 as SitePlanLevelLabel,
   f4 as SiteTypeIcon,
   V4 as SiteTypeLabel,
-  s0 as Skiplink,
-  k2 as Spinner,
+  c0 as Skiplink,
+  x2 as Spinner,
   v4 as SplitButton,
   G1 as StatusBadge,
-  c0 as StatusIndicator,
+  a0 as StatusIndicator,
   Q2 as StatusTypeLabels,
   d1 as Tally,
-  W4 as TextInput,
-  G4 as Textarea,
-  m0 as ThreeItemLayout,
-  P4 as Toast,
+  U4 as TextInput,
+  W4 as Textarea,
+  d0 as ThreeItemLayout,
+  k4 as Toast,
   x4 as ToastType,
-  Q4 as Toaster,
+  J4 as Toaster,
   T2 as Tooltip,
-  d0 as TwoItemLayout,
+  h0 as TwoItemLayout,
   q4 as UtilityButton,
-  a0 as VideoEmbed,
+  l0 as VideoEmbed,
   B4 as iconList,
   F2 as isHeadingItemType,
   Z2 as isLinkItemType,
   z4 as isNodeItemType,
   V2 as isSeparatorItemType,
-  h0 as useBreakpoint,
+  u0 as useBreakpoint,
   p4 as useClipboard,
   l4 as useKeyPress,
-  u0 as useMediaQuery,
-  J4 as useToast,
-  w1 as useWindowWidth
+  g0 as useMediaQuery,
+  e0 as useToast,
+  M1 as useWindowWidth
 };
 //# sourceMappingURL=index.js.map