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

package/dist/index.js

@@ -3,7 +3,7 @@ import D1 from "hash-sum";
 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) => {
+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)) {
@@ -12,7 +12,7 @@ import './index.css';const V1 = () => Math.random().toString(32).substring(2, 13
     } else
       c.push(a);
   }), c.length > 0 && (l.__unslotted = c), l;
-}, w = (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 = {
+}, 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,
     svgPathData: "M183.215 0L254.271 277.176H204.614L302 512L46.228 187.779H135.272L0 0.434418L144.526 0.459972L145.968 0H183.215Z",
@@ -1741,7 +1741,7 @@ import './index.css';const V1 = () => Math.random().toString(32).substring(2, 13
     "svg",
     {
       "aria-hidden": "true",
-      className: w([o, t ?? ""]),
+      className: v([o, t ?? ""]),
       fill: "none",
       focusable: "false",
       preserveAspectRatio: "xMidYMid meet",
@@ -1804,7 +1804,7 @@ import './index.css';const V1 = () => Math.random().toString(32).substring(2, 13
       onLoad: () => g(!1),
       src: `${a}`
     }
-  ) : /* @__PURE__ */ e.createElement("span", { style: p }, c && /* @__PURE__ */ e.createElement(O, { className: `${o}__user-icon`, iconName: "user" })), M = /* @__PURE__ */ e.createElement("span", { className: `${o}__content` }, u), C = n && h2(n) ? _2(
+  ) : /* @__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`,
@@ -1815,10 +1815,10 @@ import './index.css';const V1 = () => Math.random().toString(32).substring(2, 13
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: w([o, m, d, l]),
+      className: v([o, m, d, l]),
       ...r
     },
-    n ? C : M
+    n ? C : w
   );
 }, O4 = ({
   className: t,
@@ -1831,7 +1831,7 @@ import './index.css';const V1 = () => Math.random().toString(32).substring(2, 13
   return /* @__PURE__ */ e.createElement(
     "span",
     {
-      className: w([
+      className: v([
         s,
         i,
         r,
@@ -1854,10 +1854,10 @@ import './index.css';const V1 = () => Math.random().toString(32).substring(2, 13
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: w([r, o, t ?? ""]),
+      className: v([r, o, t ?? ""]),
       ...i
     },
-    c === !0 && /* @__PURE__ */ e.createElement("span", { className: w([m, d]) }, s && /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, n, " ", s)),
+    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 = ({
@@ -1878,7 +1878,7 @@ import './index.css';const V1 = () => Math.random().toString(32).substring(2, 13
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: w([
+      className: v([
         i,
         r,
         o,
@@ -1969,10 +1969,10 @@ const Y2 = (t) => {
   zIndex: m = s4,
   ...d
 }) => {
-  const [L, g] = V(!1), f = typeof c, p = "pds-tooltip", u = w([
+  const [L, g] = V(!1), f = typeof c, p = "pds-tooltip", u = v([
     `${p}__trigger-custom`,
     f === "string" ? `${p}__trigger-text` : null
-  ]), M = w([
+  ]), w = v([
     `${p}__trigger`,
     `${p}__trigger--${r}`
   ]), { context: C, floatingStyles: z, refs: b } = r1({
@@ -1985,13 +1985,13 @@ const Y2 = (t) => {
     restMs: 300,
     delay: { open: 100, close: 0 },
     move: !1
-  }), P = N1(C), k = S1(C), y = I1(C, { role: "tooltip" }), { getFloatingProps: v, getReferenceProps: S } = j1([
+  }), P = N1(C), k = S1(C), y = I1(C, { role: "tooltip" }), { getFloatingProps: M, getReferenceProps: S } = j1([
     D,
     P,
     k,
     y
   ]);
-  return /* @__PURE__ */ e.createElement("div", { className: w([p, t ?? ""]), ...d }, c ? /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: v([p, t ?? ""]), ...d }, c ? /* @__PURE__ */ e.createElement(
     "span",
     {
       ref: b.setReference,
@@ -2004,7 +2004,7 @@ const Y2 = (t) => {
     {
       ref: b.setReference,
       "aria-label": s,
-      className: M,
+      className: w,
       type: "button",
       ...S()
     },
@@ -2029,7 +2029,7 @@ const Y2 = (t) => {
         pointerEvents: L ? "auto" : "none",
         transition: "var(--pds-animation-transition-reveal)"
       },
-      ...v()
+      ...M()
     },
     l
   )));
@@ -2058,7 +2058,7 @@ const Y2 = (t) => {
   showLabel: r = !0,
   tooltipText: o = null
 }) => {
-  const m = w([
+  const m = v([
     "pds-input-label",
     r ? null : "visually-hidden",
     t ?? ""
@@ -2077,7 +2077,7 @@ const Y2 = (t) => {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: w([r, o, t ?? ""]),
+      className: v([r, o, t ?? ""]),
       id: l ? `${a}__message-hidden` : `${a}__message`,
       role: i === "error" ? "alert" : null
     },
@@ -2091,7 +2091,7 @@ const Y2 = (t) => {
   filter: "barsFilter"
 }, L1 = ({ variant: t }) => {
   const l = "pds-input-prefix";
-  return /* @__PURE__ */ e.createElement("div", { className: w([l, `${l}--${t}`]) }, /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: v([l, `${l}--${t}`]) }, /* @__PURE__ */ e.createElement(
     O,
     {
       className: `${l}__icon`,
@@ -2134,7 +2134,7 @@ const Y2 = (t) => {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: w([i, r]),
+      className: v([i, r]),
       id: `${l}__counter`
     },
     t,
@@ -2151,7 +2151,7 @@ k2(
       {
         ref: n,
         "aria-selected": c,
-        className: w([i, r, l ?? ""]),
+        className: v([i, r, l ?? ""]),
         id: s,
         role: "option",
         ...a
@@ -2190,7 +2190,7 @@ const d4 = {
   "4xl": K2,
   "5xl": u1,
   "6xl": h1
-}, P2 = ({
+}, x2 = ({
   className: t = "",
   colorType: l = "full-color",
   isInline: c = !1,
@@ -2210,7 +2210,7 @@ const d4 = {
     "span",
     {
       "aria-hidden": "true",
-      className: w([r, o, m, t]),
+      className: v([r, o, m, t]),
       role: "status",
       style: p,
       ...i
@@ -2236,24 +2236,24 @@ const d4 = {
     tooltipText: f,
     variant: p = "primary",
     ...u
-  }, M) => {
+  }, 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, v;
+    let y, M;
     switch (g) {
       case "xs":
-        y = "s", v = "s";
+        y = "s", M = "s";
         break;
       case "s":
-        y = "m", v = "m";
+        y = "m", M = "m";
         break;
       case "m":
-        y = "m", v = "m";
+        y = "m", M = "m";
         break;
       case "l":
-        y = "m", v = "l";
+        y = "m", M = "l";
         break;
       case "xl":
-        y = "l", v = "l";
+        y = "l", M = "l";
         break;
     }
     let S = "monochromatic";
@@ -2272,9 +2272,9 @@ const d4 = {
     const W = /* @__PURE__ */ e.createElement(
       "button",
       {
-        ref: M,
+        ref: w,
         "aria-label": t,
-        className: w([
+        className: v([
           C,
           z,
           b,
@@ -2289,11 +2289,11 @@ const d4 = {
         ...u
       },
       m && !r && /* @__PURE__ */ e.createElement(
-        P2,
+        x2,
         {
           className: `${C}__working-indicator`,
           colorType: S,
-          size: v
+          size: M
         }
       ),
       _
@@ -2311,7 +2311,7 @@ const d4 = {
   variant: r = "primary",
   ...o
 }) => {
-  const m = "pds-button-link", d = "pds-button", L = `${d}--${s}`, g = `${d}--${r}`, f = w([
+  const m = "pds-button-link", d = "pds-button", L = `${d}--${s}`, g = `${d}--${r}`, f = v([
     d,
     L,
     g
@@ -2337,7 +2337,7 @@ const d4 = {
       u = "m";
       break;
   }
-  const M = /* @__PURE__ */ e.createElement(
+  const w = /* @__PURE__ */ e.createElement(
     O,
     {
       key: a,
@@ -2347,7 +2347,7 @@ const d4 = {
     }
   );
   let C = [p];
-  c === "icon-start" && a ? C = [M, p] : c === "icon-end" && a && (C = [p, M]);
+  c === "icon-start" && a ? C = [w, p] : c === "icon-end" && a && (C = [p, w]);
   const z = h2(n) ? _2(
     n,
     Object.assign({}, n.props, {
@@ -2359,13 +2359,13 @@ const d4 = {
     B2,
     {
       disabled: !0,
-      className: w([m, t ?? ""]),
+      className: v([m, t ?? ""]),
       label: C,
       size: s,
       tooltipText: i ?? null,
       variant: r
     }
-  ) : /* @__PURE__ */ e.createElement("span", { className: w([m, t ?? ""]), ...o }, z);
+  ) : /* @__PURE__ */ e.createElement("span", { className: v([m, t ?? ""]), ...o }, z);
 }, p4 = (t, l) => {
   const [c, a] = V(!1), n = l?.duration;
   return l2(() => {
@@ -2382,7 +2382,7 @@ const d4 = {
       } catch {
       }
   }];
-}, I2 = k2(
+}, j2 = k2(
   ({
     ariaLabel: t,
     buttonType: l = "button",
@@ -2401,16 +2401,16 @@ const d4 = {
       hide: `${g}--hide`,
       scaleIn: `${g}--scaleIn`
     };
-    let M, C;
+    let w, C;
     switch (o) {
       case "s":
-        C = "m", M = 8;
+        C = "m", w = 8;
         break;
       case "m":
-        C = "l", M = 11;
+        C = "l", w = 11;
         break;
       default:
-        C = "m", M = 8;
+        C = "m", w = 8;
         break;
     }
     const z = s !== null, b = J(null), D = J(null), P = () => {
@@ -2420,8 +2420,8 @@ const d4 = {
           u.hide
         ), b.current.classList.add(u.scaleIn), D.current.classList.remove(u.scaleIn), D.current.classList.add(u.hide);
       }, 2e3);
-    }, k = (v) => {
-      z && P(), r && r(v);
+    }, 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,
       {
@@ -2456,7 +2456,7 @@ const d4 = {
       {
         ref: L,
         "aria-label": t,
-        className: w([
+        className: v([
           g,
           f,
           p,
@@ -2474,7 +2474,7 @@ const d4 = {
           className: `${g}__tooltip`,
           content: t,
           customTrigger: y,
-          offsetValue: M
+          offsetValue: w
         }
       ) : y
     );
@@ -2489,11 +2489,11 @@ const d4 = {
 }) => {
   const i = "pds-clipboard-button", [r, o] = p4(c);
   return /* @__PURE__ */ e.createElement(
-    I2,
+    j2,
     {
       ariaLabel: t,
       buttonType: "button",
-      className: w([i, l ?? ""]),
+      className: v([i, l ?? ""]),
       disabled: a,
       icon2Name: "check",
       iconName: "copy",
@@ -2515,7 +2515,7 @@ const d4 = {
     "button",
     {
       "aria-label": t,
-      className: w([s, i, l ?? ""]),
+      className: v([s, i, l ?? ""]),
       onClick: c,
       type: "button",
       ...n
@@ -2550,7 +2550,7 @@ const d4 = {
   wordpress: "wordpress",
   gatsby: "bolt",
   nextjs: "bolt"
-}, w1 = () => {
+}, M1 = () => {
   const t = typeof window < "u", [l, c] = V(
     t && window.innerWidth !== void 0 ? window.innerWidth : 1024
   );
@@ -2564,18 +2564,18 @@ const d4 = {
       window.removeEventListener("resize", a);
     };
   }, []), l;
-}, x2 = n1(null), L4 = ({
+}, N2 = n1(null), L4 = ({
   children: t,
   mobileMenuMaxWidth: l = 640
 }) => {
-  const c = w1(), a = c <= l, n = {
+  const c = M1(), a = c <= l, n = {
     isMobile: a,
     mobileMenuMaxWidth: l,
     windowWidth: c
   };
   return l2(() => {
     a ? document.body.classList.add("pds-no-scroll-x") : document.body.classList.remove("pds-no-scroll-x");
-  }, [a]), /* @__PURE__ */ e.createElement(x2.Provider, { value: n }, t);
+  }, [a]), /* @__PURE__ */ e.createElement(N2.Provider, { value: n }, t);
 }, C4 = ({
   className: t,
   disabled: l,
@@ -2594,24 +2594,24 @@ const d4 = {
   withinNavbar: p,
   ...u
 }) => {
-  const { placement: M, refs: C, strategy: z, x: b, y: D } = r1({
+  const { placement: w, refs: C, strategy: z, x: b, y: D } = r1({
     placement: "bottom-start",
     middleware: [m1()],
     whileElementsMounted: o1
   });
   let P = !1;
-  const k = D2(x2);
+  const k = D2(N2);
   k && (P = k.isMobile);
-  const y = f === "navbar" && P, v = "pds-menu-button", S = y ? `${v}--isMobile` : null, I = p ? `${v}--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([]);
+  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 h = W.current;
-    return h && (h.dataset.fuiPlacement = M), K && (setTimeout(() => {
+    return h && (h.dataset.fuiPlacement = w), K && (setTimeout(() => {
       h.focus();
     }, 0), n2(!1)), () => {
       window.removeEventListener("mousedown", L2, !0);
     };
-  }, [R, M]);
+  }, [R, w]);
   const q = (h, j) => {
     r2(h), o2(j);
   }, U = () => {
@@ -2643,11 +2643,11 @@ const d4 = {
   }, f2 = () => {
     const h = T.current[Q];
     u2(h);
-  }, N2 = (h) => {
+  }, S2 = (h) => {
     R ? e2() : U(), m && m(), h.stopPropagation(), h.preventDefault();
   }, A2 = (h) => {
     u2(h.currentTarget.id), y || e2();
-  }, S2 = (h) => {
+  }, I2 = (h) => {
     const j = h.key;
     let E = !1;
     switch (j) {
@@ -2777,7 +2777,7 @@ const d4 = {
         "li",
         {
           key: H,
-          className: `${v}__listbox-heading`,
+          className: `${M}__listbox-heading`,
           id: H || null,
           role: "presentation"
         },
@@ -2789,7 +2789,7 @@ const d4 = {
       T.current.push(B), A.current.push(h);
       let g2 = !1;
       Z !== "" && !h.disabled && (g2 = Z === B);
-      const c2 = "isCritical" in h && h.isCritical, M2 = "criticalLabel" in h ? h.criticalLabel : void 0;
+      const c2 = "isCritical" in h && h.isCritical, w2 = "criticalLabel" in h ? h.criticalLabel : void 0;
       let a2 = [];
       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(
@@ -2802,20 +2802,20 @@ const d4 = {
         );
         a2.unshift(d2);
       }
-      c2 && M2 && a2.unshift(
-        /* @__PURE__ */ e.createElement("span", { key: `critical-${N}`, className: "visually-hidden" }, M2)
+      c2 && w2 && a2.unshift(
+        /* @__PURE__ */ e.createElement("span", { key: `critical-${N}`, className: "visually-hidden" }, w2)
       );
       let p2;
-      h.description && (p2 = /* @__PURE__ */ e.createElement("span", { className: `${v}__item-description` }, h.description));
+      h.description && (p2 = /* @__PURE__ */ e.createElement("span", { className: `${M}__item-description` }, h.description));
       let b2;
       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: `${v}__item-label` }, a2), p2);
+        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: `${v}__item-label` }, a2), p2);
-      const O2 = w([
-        g2 ? `${v}__item-focused` : null,
-        c2 ? `${v}__item-critical` : null
+        b2 = /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: `${M}__item-label` }, a2), p2);
+      const O2 = v([
+        g2 ? `${M}__item-focused` : null,
+        c2 ? `${M}__item-critical` : null
       ]);
       return /* @__PURE__ */ e.createElement(
         "li",
@@ -2844,8 +2844,8 @@ const d4 = {
     const j = h, E = h.filter(
       F2 || V2
     ), H = E.length > 0;
-    let $ = [`${v}__listbox`];
-    if (p && $.push(`${v}__listbox--navbar`), o === "end" && $.push(`${v}__listbox--end`), c === "icon-only" && $.push(`${v}__listbox--icon-only`), $ = w($), H) {
+    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());
@@ -2874,9 +2874,9 @@ const d4 = {
           },
           tabIndex: -1
         },
-        G.map((c2, M2) => {
-          x = s2.current[M2];
-          const a2 = "isHeading" in c2[0] && c2[0].isHeading, p2 = a2 ? `${N}-group-${x}-heading` : "", b2 = `${N}-group-${x}`, O2 = a2 ? null : `${g} ${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",
             {
@@ -2927,15 +2927,15 @@ const d4 = {
       "aria-controls": _,
       "aria-expanded": R,
       "aria-haspopup": "true",
-      className: `${v}__trigger`,
+      className: `${M}__trigger`,
       disabled: l,
       displayType: c,
       iconName: "angleDown",
       id: N,
       isSplitButton: s,
       label: i,
-      onClick: N2,
-      onKeyDown: S2,
+      onClick: S2,
+      onKeyDown: I2,
       size: d,
       type: "button",
       variant: f
@@ -2943,36 +2943,36 @@ const d4 = {
   )), c === "icon-only") {
     const h = Y2(i);
     t2 = /* @__PURE__ */ e.createElement(
-      I2,
+      j2,
       {
         ref: C.setReference,
         "aria-controls": _,
         "aria-expanded": R,
         "aria-haspopup": "true",
         ariaLabel: h,
-        className: `${v}__trigger ${v}__trigger--icon-only`,
+        className: `${M}__trigger ${M}__trigger--icon-only`,
         disabled: l,
         hasTooltip: !1,
         iconName: a,
         id: N,
-        onClick: N2,
-        onKeyDown: S2,
+        onClick: S2,
+        onKeyDown: I2,
         size: d,
         type: "button",
         variant: "standard"
       }
     );
   }
-  const w2 = (h) => {
+  const M2 = (h) => {
     const j = h.target;
-    j.classList.toggle(`${v}__toggle--expanded`), j.setAttribute(
+    j.classList.toggle(`${M}__toggle--expanded`), j.setAttribute(
       "aria-expanded",
       j.getAttribute("aria-expanded") === "true" ? "false" : "true"
-    ), j.nextElementSibling.classList.toggle(`${v}__mobile-menu--expanded`);
-  }, M1 = () => /* @__PURE__ */ e.createElement("ul", { className: `${v}__mobile-menu`, role: "menu" }, r.map((h, j) => C2(h, j)));
+    ), 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 = c === "icon-end" ? "pds-button pds-button--navbar" : null, E1 = w([
-    `${v}__toggle`,
+  const b1 = c === "icon-end" ? "pds-button pds-button--navbar" : null, E1 = v([
+    `${M}__toggle`,
     b1
   ]);
   y && (J2 = /* @__PURE__ */ e.createElement(
@@ -2982,26 +2982,26 @@ const d4 = {
       className: E1,
       disabled: l,
       id: N,
-      onClick: w2,
+      onClick: M2,
       type: "button"
     },
-    c === "icon-only" ? /* @__PURE__ */ e.createElement("span", { className: `${v}__icon-label` }, /* @__PURE__ */ e.createElement(O, { iconName: a }), " ", i) : i,
+    c === "icon-only" ? /* @__PURE__ */ e.createElement("span", { className: `${M}__icon-label` }, /* @__PURE__ */ e.createElement(O, { iconName: a }), " ", i) : i,
     /* @__PURE__ */ e.createElement(
       O,
       {
-        className: `${v}__toggle-icon ${v}__toggle-icon--${c}`,
+        className: `${M}__toggle-icon ${M}__toggle-icon--${c}`,
         iconName: "angleDown",
         iconSize: "m"
       }
     )
   ));
-  const y1 = J2, $1 = R ? `${v}--expanded` : null;
+  const y1 = J2, $1 = R ? `${M}--expanded` : null;
   return /* @__PURE__ */ e.createElement(
     "span",
     {
       ref: Y,
-      className: w([
-        v,
+      className: v([
+        M,
         I,
         S,
         $1,
@@ -3010,7 +3010,7 @@ const d4 = {
       "data-testid": L,
       ...u
     },
-    y ? /* @__PURE__ */ e.createElement(e.Fragment, null, y1, /* @__PURE__ */ e.createElement(M1, null)) : /* @__PURE__ */ e.createElement(e.Fragment, null, t2, F(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,
@@ -3024,7 +3024,7 @@ const d4 = {
   value: o,
   ...m
 }) => {
-  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", [M, C] = V(
+  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);
@@ -3033,7 +3033,7 @@ const d4 = {
     return /* @__PURE__ */ e.createElement(
       "fieldset",
       {
-        className: w([
+        className: v([
           d,
           g,
           L,
@@ -3043,12 +3043,12 @@ const d4 = {
       },
       /* @__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 : M === b.value, k = `${d}__option`, y = P ? `${k}--checked` : null;
+        const P = p ? o === b.value : w === b.value, k = `${d}__option`, y = P ? `${k}--checked` : null;
         return /* @__PURE__ */ e.createElement(
           "div",
           {
             key: `${a}-option-${D}`,
-            className: w([k, y])
+            className: v([k, y])
           },
           /* @__PURE__ */ e.createElement(
             "input",
@@ -3125,7 +3125,7 @@ const d4 = {
   )), /* @__PURE__ */ e.createElement(
     "span",
     {
-      className: w([o, m, l]),
+      className: v([o, m, l]),
       id: a,
       ...r
     },
@@ -3147,7 +3147,7 @@ const d4 = {
       }
     )
   );
-}, w4 = {
+}, M4 = {
   drupal: "Drupal",
   drupal7: "Drupal 7",
   "front-end-sites": "Next.js and Gatsby",
@@ -3162,7 +3162,7 @@ const d4 = {
   splunk: "Splunk",
   "sumo-logic": "Sumo Logic",
   wordpress: "WordPress"
-}, M4 = ({
+}, w4 = ({
   className: t,
   iconSize: l = "2xl",
   platformType: c,
@@ -3189,7 +3189,7 @@ const d4 = {
     r = /* @__PURE__ */ e.createElement(
       "span",
       {
-        "aria-label": w4[c],
+        "aria-label": M4[c],
         className: `${n}__group`,
         role: "img"
       },
@@ -3201,7 +3201,7 @@ const d4 = {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: w([n, s, i, t]),
+      className: v([n, s, i, t]),
       ...a
     },
     r
@@ -3511,7 +3511,7 @@ const d4 = {
   ...r
 }) => {
   const o = "pds-sso-button", m = `${o}--${i}`, d = i === "m" ? "l" : "2xl", L = /* @__PURE__ */ e.createElement(
-    M4,
+    w4,
     {
       className: `${o}__icon`,
       iconSize: d,
@@ -3521,7 +3521,7 @@ const d4 = {
   return /* @__PURE__ */ e.createElement(
     "button",
     {
-      className: w([o, m, l]),
+      className: v([o, m, l]),
       disabled: c,
       onClick: n,
       type: t,
@@ -3547,20 +3547,20 @@ const d4 = {
   tooltipText: f,
   ...p
 }) => {
-  const u = "pds-utility-button", M = r ? "pds-pulse" : null, C = (v) => n && !m ? /* @__PURE__ */ e.createElement(O, { key: v, className: `${u}__icon`, iconName: n }) : null, z = () => m ? /* @__PURE__ */ e.createElement(
-    P2,
+  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: `${u}__spinner`,
       colorType: "monochromatic",
       size: "s"
     }
-  ) : null, b = (v) => {
+  ) : null, b = (M) => {
     const S = [];
     return s === "before" && S.push(C("icon-before")), S.push(z()), S.push(
-      /* @__PURE__ */ e.createElement("span", { key: "label", className: `${u}__label` }, v)
+      /* @__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 = w([
+  }, D = L && h2(L) ? L.props.children : d, P = v([
     u,
     a ? `${u}--border` : null,
     i ? `${u}--critical` : null,
@@ -3569,26 +3569,26 @@ const d4 = {
     m ? `${u}--working` : null,
     o ? `${u}--monospace` : null,
     l ?? ""
-  ]), k = (v) => f ? /* @__PURE__ */ e.createElement(T2, { content: f, customTrigger: v }) : v;
+  ]), k = (M) => f ? /* @__PURE__ */ e.createElement(T2, { content: f, customTrigger: M }) : M;
   if (L && !c) {
-    const v = h2(L) ? _2(
+    const M = h2(L) ? _2(
       L,
       Object.assign({}, L.props, {
-        className: w([
+        className: v([
           `${u}__button`,
-          M,
+          w,
           L.props.className ?? ""
         ]),
         children: b(D)
       })
     ) : null;
-    return /* @__PURE__ */ e.createElement("div", { className: P, ...p }, k(v));
+    return /* @__PURE__ */ e.createElement("div", { className: P, ...p }, k(M));
   }
   const y = /* @__PURE__ */ e.createElement(
     "button",
     {
       "aria-disabled": c || r || m,
-      className: w([`${u}__button`, M]),
+      className: v([`${u}__button`, w]),
       onClick: c ? void 0 : g,
       type: "button",
       ...t
@@ -3596,7 +3596,29 @@ const d4 = {
     b(D)
   );
   return /* @__PURE__ */ e.createElement("div", { className: P, ...p }, k(y));
-}, G4 = k2(
+}, 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)
+  );
+}, W4 = k2(
   ({
     className: t,
     counterMaxLength: l,
@@ -3614,7 +3636,7 @@ const d4 = {
     readonly: f = !1,
     required: p = !1,
     rows: u = 5,
-    showLabel: M,
+    showLabel: w,
     size: C = "s",
     textareaProps: z,
     tooltipText: b = null,
@@ -3629,7 +3651,7 @@ const d4 = {
     validationMessage: P,
     validationStatus: k,
     value: y,
-    ...v
+    ...M
   }, S) => {
     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 : ""
@@ -3641,7 +3663,7 @@ const d4 = {
     return /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: w([
+        className: v([
           X.base,
           N,
           K,
@@ -3653,7 +3675,7 @@ const d4 = {
           t ?? ""
         ]),
         style: s ? I : null,
-        ...v
+        ...M
       },
       /* @__PURE__ */ e.createElement("div", { className: `${N}__inputlabel-wrapper` }, /* @__PURE__ */ e.createElement(
         z1,
@@ -3663,7 +3685,7 @@ const d4 = {
           id: n,
           label: r,
           required: p,
-          showLabel: M,
+          showLabel: w,
           tooltipText: b
         }
       ), l && /* @__PURE__ */ e.createElement(
@@ -3681,7 +3703,7 @@ const d4 = {
           ref: S,
           "aria-describedby": Z ? `${n}__message` : null,
           "aria-invalid": k === "error",
-          className: w([`${N}--textarea`, _]),
+          className: v([`${N}--textarea`, _]),
           disabled: a,
           id: n,
           name: n,
@@ -3708,7 +3730,7 @@ const d4 = {
       )
     );
   }
-), b4 = () => /* @__PURE__ */ e.createElement("div", { className: "pds-text-input__url-prefix" }, "https://"), W4 = k2(
+), b4 = () => /* @__PURE__ */ e.createElement("div", { className: "pds-text-input__url-prefix" }, "https://"), U4 = k2(
   ({
     autoComplete: t,
     className: l,
@@ -3726,7 +3748,7 @@ const d4 = {
     onBlur: f,
     onChange: p,
     onClear: u,
-    onFocus: M,
+    onFocus: w,
     placeholder: C,
     readonly: z = !1,
     required: b = !1,
@@ -3734,7 +3756,7 @@ const d4 = {
     showLabel: P = !0,
     showVisibilityToggle: k = !1,
     size: y = "s",
-    tooltipText: v = null,
+    tooltipText: M = null,
     translationStrings: S = {
       clearButton: "Clear input text",
       counterOverLimit: "Character limit exceeded by",
@@ -3754,30 +3776,30 @@ const d4 = {
     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, N2 = (F) => {
+    ), f2 = W || z2, S2 = (F) => {
       if (k && m2 && L2(!1), r && I === "url") {
-        const t2 = l1(F.target.value), w2 = {
+        const t2 = l1(F.target.value), M2 = {
           ...F,
           target: {
             ...F.target,
             value: t2
           }
         };
-        f && f(w2);
+        f && f(M2);
       } else f && f(F);
     }, A2 = (F) => {
       if (r && I === "url") {
-        const t2 = l1(F.target.value), w2 = {
+        const t2 = l1(F.target.value), M2 = {
           ...F,
           target: {
             ...F.target,
             value: t2
           }
         };
-        U || u2(t2), p && p(w2);
+        U || u2(t2), p && p(M2);
       } else
         U || u2(F.target.value), p && p(F);
-    }, S2 = () => {
+    }, I2 = () => {
       U || u2(""), u && u();
       const F = document.getElementById(o);
       F && F.focus();
@@ -3790,7 +3812,7 @@ const d4 = {
     return k && I === "password" && (m2 ? v2 = "text" : v2 = "password"), /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: w([
+        className: v([
           X.base,
           K,
           s2,
@@ -3813,7 +3835,7 @@ const d4 = {
           label: L,
           required: b,
           showLabel: P,
-          tooltipText: v
+          tooltipText: M
         }
       ),
       k && I === "password" && /* @__PURE__ */ e.createElement("div", { "aria-live": "polite", className: "visually-hidden" }, `${S.visibilityStatus} ${m2 ? "visible" : "hidden"}.`),
@@ -3835,9 +3857,9 @@ const d4 = {
             disabled: n,
             id: o,
             name: o,
-            onBlur: N2,
+            onBlur: S2,
             onChange: A2,
-            onFocus: M,
+            onFocus: w,
             placeholder: C,
             readOnly: z,
             required: b,
@@ -3850,7 +3872,7 @@ const d4 = {
           o4,
           {
             clearLabel: S.clearButton,
-            handleClearInput: S2,
+            handleClearInput: I2,
             id: o
           }
         ),
@@ -3906,7 +3928,7 @@ const d4 = {
         return !0;
   }
   return !1;
-}, U4 = ({
+}, K4 = ({
   ariaLabel: t,
   className: l,
   menuItems: c,
@@ -3914,11 +3936,11 @@ const d4 = {
   ...n
 }) => {
   let s = !1;
-  const i = D2(x2);
+  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 u = (M) => {
+    const u = (w) => {
       if (s) return;
       const C = r.current;
       if (!C) return;
@@ -3928,12 +3950,12 @@ const d4 = {
       if (z.length === 0) return;
       const b = document.activeElement, D = z.indexOf(b);
       if (D !== -1) {
-        if (M.key === "ArrowRight") {
-          M.preventDefault();
+        if (w.key === "ArrowRight") {
+          w.preventDefault();
           const P = (D + 1) % z.length;
           z[P].focus();
-        } else if (M.key === "ArrowLeft") {
-          M.preventDefault();
+        } else if (w.key === "ArrowLeft") {
+          w.preventDefault();
           const P = (D - 1 + z.length) % z.length;
           z[P].focus();
         }
@@ -3943,22 +3965,22 @@ const d4 = {
       document.removeEventListener("keydown", u);
     };
   }, [s]);
-  const L = ({ isActive: u, linkContent: M }) => {
+  const L = ({ isActive: u, linkContent: w }) => {
     const C = `${o}__item`;
     return /* @__PURE__ */ e.createElement(
       "li",
       {
-        className: w([
+        className: v([
           C,
           u ? `${C}--active` : null
         ])
       },
-      M
+      w
     );
-  }, g = c.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: `${o}__menu` }, c.map((u, M) => /* @__PURE__ */ e.createElement(
+  }, g = c.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: `${o}__menu` }, c.map((u, w) => /* @__PURE__ */ e.createElement(
     L,
     {
-      key: M,
+      key: w,
       isActive: X2(u),
       linkContent: u.linkContent
     }
@@ -3986,7 +4008,7 @@ const d4 = {
     {
       ref: r,
       "aria-label": t,
-      className: w([
+      className: v([
         o,
         d,
         m,
@@ -4001,7 +4023,7 @@ const d4 = {
   warning: "triangleExclamation",
   critical: "diamondExclamation",
   discovery: "bullhorn"
-}, G2 = 200, $4 = 50, K4 = ({
+}, G2 = 200, $4 = 50, X4 = ({
   banners: t,
   className: l,
   dataContext: c = "product",
@@ -4011,7 +4033,7 @@ const d4 = {
   typeLabels: i = { ...Q2, neutral: "Notice" },
   ...r
 }) => {
-  const o = c === "marketing", [m, d] = V(t), [L, g] = V(null), [f, p] = V(null), [u, M] = V({});
+  const o = c === "marketing", [m, d] = V(t), [L, g] = V(null), [f, p] = V(null), [u, w] = V({});
   l2(() => {
     d(t);
   }, [t]);
@@ -4024,7 +4046,7 @@ const d4 = {
     info: `${z}--info`,
     neutral: `${z}--neutral`,
     warning: `${z}--warning`
-  }, P = m[0].type, k = P ? `${z}-group--${P}` : null, y = (_) => R2 - _, v = (_) => _ === 0 ? 0 : -1, S = () => {
+  }, 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),
@@ -4032,7 +4054,7 @@ const d4 = {
       ]), g(null);
     }, G2);
   }, I = () => {
-    M({
+    w({
       [m[0].id]: R2 + 2,
       [m[C - 1].id]: R2 + 1
     }), setTimeout(() => {
@@ -4041,7 +4063,7 @@ const d4 = {
       d((_) => [
         _[_.length - 1],
         ..._.slice(0, _.length - 1)
-      ]), g(null), M({});
+      ]), g(null), w({});
     }, G2);
   }, 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) => {
@@ -4055,7 +4077,7 @@ const d4 = {
       "div",
       {
         key: R,
-        className: w([
+        className: v([
           z,
           D[Z],
           L === R ? `${z}--fading` : null,
@@ -4078,7 +4100,7 @@ const d4 = {
         {
           className: `${z}__dismiss-button`,
           onClick: o2,
-          tabIndex: v(W),
+          tabIndex: M(W),
           type: "button"
         },
         a
@@ -4088,7 +4110,7 @@ const d4 = {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: w([
+      className: v([
         `${z}-group`,
         k,
         b,
@@ -4098,7 +4120,7 @@ const d4 = {
       ...r
     },
     C > 1 ? /* @__PURE__ */ e.createElement("div", { className: `${z}__navigation` }, /* @__PURE__ */ e.createElement(
-      I2,
+      j2,
       {
         ariaLabel: s,
         className: `${z}__nav-button ${z}__nav-button--prev`,
@@ -4107,7 +4129,7 @@ const d4 = {
         size: "m"
       }
     ), /* @__PURE__ */ e.createElement(
-      I2,
+      j2,
       {
         ariaLabel: n,
         className: `${z}__nav-button ${z}__nav-button--next`,
@@ -4122,7 +4144,7 @@ const d4 = {
   warning: "triangleExclamation",
   success: "circleCheck",
   critical: "diamondExclamation"
-}, X4 = ({
+}, Y4 = ({
   className: t,
   message: l,
   title: c,
@@ -4144,11 +4166,11 @@ const d4 = {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: w([i, r[a], t ?? ""]),
+      className: v([i, r[a], t ?? ""]),
       role: o,
       ...s
     },
-    /* @__PURE__ */ e.createElement("div", { className: `${i}__icon ${i}__icon-${a}` }, a === "working" ? /* @__PURE__ */ e.createElement(P2, { colorType: "monochromatic", size: "m" }) : /* @__PURE__ */ e.createElement(
+    /* @__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: `${a}` in W2 ? W2[a] : W2.info,
@@ -4163,7 +4185,7 @@ const d4 = {
   success: "circleCheck",
   critical: "diamondExclamation",
   discovery: "squareQuestion"
-}, Y4 = ({
+}, Q4 = ({
   className: t,
   ctaButton: l,
   dataContext: c = "product",
@@ -4186,12 +4208,12 @@ const d4 = {
     discovery: `${p}--discovery`,
     dismissing: `${p}--dismissing`,
     dismissed: `${p}--dismissed`
-  }, M = 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 = () => {
+  }, 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
     });
-  }, k = (v) => {
-    r(v, n);
+  }, 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);
@@ -4201,10 +4223,10 @@ const d4 = {
     "div",
     {
       ref: f,
-      className: w([
+      className: v([
         p,
         u[m],
-        M,
+        w,
         C,
         t ?? ""
       ]),
@@ -4266,10 +4288,10 @@ const d4 = {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: w([s, i[a], l]),
+      className: v([s, i[a], l]),
       id: c
     },
-    /* @__PURE__ */ e.createElement("div", { className: `${s}__icon-container` }, a === "working" ? /* @__PURE__ */ e.createElement(P2, { colorType: "monochromatic-reverse", size: "l" }) : /* @__PURE__ */ e.createElement(
+    /* @__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--${a}`,
@@ -4287,16 +4309,19 @@ 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: c = 5,
   position: a = "bottom-right"
 }) => {
-  const s = w(["pds-toaster", l]);
+  const s = v(["pds-toaster", l]);
   return /* @__PURE__ */ e.createElement(
     A1,
     {
@@ -4314,7 +4339,7 @@ const d4 = {
   );
 };
 var x4 = /* @__PURE__ */ ((t) => (t.Critical = "critical", t.Info = "info", t.Success = "success", t.Warning = "warning", t.Working = "working", t))(x4 || {});
-const J4 = () => {
+const e0 = () => {
   const t = (c, a, n = {}) => {
     const s = /* @__PURE__ */ e.createElement(k4, { type: c }, a);
     let i = {
@@ -4322,14 +4347,9 @@ const J4 = () => {
     };
     return c === "critical" && (i = {
       ...i,
-      autoClose: !1,
       role: "alert"
-    }), c === "warning" && (i = {
-      ...i,
-      autoClose: !1
     }), c === "working" && (i = {
       ...i,
-      autoClose: !1,
       closeButton: !1,
       closeOnClick: !1
     }), e1(s, i);
@@ -4339,38 +4359,38 @@ const J4 = () => {
     exit: "pds-toast--slideOut"
   });
   return [t, e1, l];
-}, e0 = ({
+}, t0 = ({
   children: t,
   className: l,
   expandButtonAriaLabel: c,
   isExpandable: a = !1,
   ...n
 }) => {
-  const s = "pds-panel-row", [i, r] = V(!1), o = J(null), m = J(null), d = j2(t), L = d["items-left"], g = d["items-right"], f = d["items-below"], p = () => {
-    const u = m.current, M = o.current;
-    if (!u || !M) return;
+  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"
-    }), M.classList.add("is-expanded")) : (Object.assign(u.style, {
+    }), w.classList.add("is-expanded")) : (Object.assign(u.style, {
       height: "0",
       opacity: "0",
       display: "none"
-    }), M.classList.remove("is-expanded"));
+    }), w.classList.remove("is-expanded"));
   };
   return /* @__PURE__ */ e.createElement(
     "li",
     {
-      className: w([s, l ?? ""]),
+      className: v([s, l ?? ""]),
       ...n,
       ref: o
     },
     /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: w([
+        className: v([
           `${s}__main`,
           a ? "is-expandable" : ""
         ])
@@ -4404,7 +4424,7 @@ const J4 = () => {
       /* @__PURE__ */ e.createElement("div", { className: `${s}__items-inside` }, f)
     )
   );
-}, t0 = ({
+}, s0 = ({
   alt: t = "",
   className: l,
   height: c,
@@ -4414,7 +4434,7 @@ const J4 = () => {
   ...i
 }) => {
   const r = "pds-picture";
-  return /* @__PURE__ */ e.createElement("picture", { className: w([r, l ?? ""]) }, /* @__PURE__ */ e.createElement("source", { srcSet: n, 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,
@@ -4425,7 +4445,7 @@ const J4 = () => {
       ...i
     }
   ));
-}, s0 = ({
+}, c0 = ({
   className: t,
   destination: l = "main",
   text: c = "Skip to main content",
@@ -4433,12 +4453,12 @@ const J4 = () => {
 }) => /* @__PURE__ */ e.createElement(
   "a",
   {
-    className: w(["pds-skiplink", t]),
+    className: v(["pds-skiplink", t]),
     href: `#${l}`,
     ...a
   },
   c
-), c0 = ({
+), a0 = ({
   className: t,
   label: l = null,
   size: c = "s",
@@ -4449,7 +4469,7 @@ const J4 = () => {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: w([
+      className: v([
         s,
         i,
         r,
@@ -4458,7 +4478,7 @@ const J4 = () => {
       ...n
     },
     a === "working" ? /* @__PURE__ */ e.createElement(
-      P2,
+      x2,
       {
         className: `${s}__spinner`,
         colorType: "monochromatic",
@@ -4467,7 +4487,7 @@ 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: c,
@@ -4506,13 +4526,12 @@ const J4 = () => {
     case "wistia":
       m = i;
       break;
-    case "youtube":
     default:
       m = o;
       break;
   }
-  return /* @__PURE__ */ e.createElement("div", { className: w([s, t ?? ""]), ...n }, m);
-}, l0 = ({
+  return /* @__PURE__ */ e.createElement("div", { className: v([s, t ?? ""]), ...n }, m);
+}, i0 = ({
   className: t,
   option: l,
   ...c
@@ -4532,7 +4551,7 @@ const J4 = () => {
     "div",
     {
       ref: s,
-      className: w([a, t ?? ""]),
+      className: v([a, t ?? ""]),
       title: l.name,
       ...c
     },
@@ -4546,7 +4565,7 @@ const J4 = () => {
     )),
     /* @__PURE__ */ e.createElement("div", { className: `${a}__status`, style: { pointerEvents: "none" } }, d)
   );
-}, i0 = ({
+}, n0 = ({
   children: t,
   className: l,
   width: c = "standard",
@@ -4556,12 +4575,12 @@ const J4 = () => {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: w([n, s, l ?? ""]),
+      className: v([n, s, l ?? ""]),
       ...a
     },
     t
   );
-}, n0 = ({
+}, r0 = ({
   children: t,
   className: l,
   sidebarMinWidth: c = 14.5,
@@ -4569,16 +4588,16 @@ const J4 = () => {
   ...n
 }) => {
   let s = !1;
-  const i = D2(x2);
+  const i = D2(N2);
   i && (s = i.isMobile);
   const r = "pds-docs-layout", o = s ? `${r}--isMobile` : null, m = {
     width: a,
     minWidth: `${c}rem`
-  }, d = j2(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));
+  }, 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",
     {
-      className: w([
+      className: v([
         r,
         o,
         "pds-container pds-container--x-wide",
@@ -4588,7 +4607,7 @@ const J4 = () => {
     },
     s ? f : p
   );
-}, r0 = ({
+}, o0 = ({
   alignContent: t = "flex-start",
   alignItems: l = "stretch",
   children: c,
@@ -4605,31 +4624,31 @@ const J4 = () => {
   mobileJustifyContent: f,
   ...p
 }) => {
-  let M = w1() <= 640;
-  const C = D2(x2);
-  C && (M = C.isMobile);
-  const z = "pds-flex", b = `${z}-container`, D = M ? `${b}--mobile` : null;
+  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;
-  M ? P = `${z}-direction--${d}` : n !== "row" && (P = `${z}-direction--${n}`);
+  w ? P = `${z}-direction--${d}` : n !== "row" && (P = `${z}-direction--${n}`);
   let k = null;
-  M ? L ? L !== "nowrap" && (k = `${z}-wrap--${L}`) : s !== "nowrap" && (k = `${z}-wrap--${s}`) : s !== "nowrap" && (k = `${z}-wrap--${s}`);
+  w ? L ? L !== "nowrap" && (k = `${z}-wrap--${L}`) : s !== "nowrap" && (k = `${z}-wrap--${s}`) : s !== "nowrap" && (k = `${z}-wrap--${s}`);
   let y = null;
-  M ? f ? f !== "flex-start" && (y = `${z}-justify--${f}`) : r !== "flex-start" && (y = `${z}-justify--${r}`) : r !== "flex-start" && (y = `${z}-justify--${r}`);
-  let v = null;
-  M ? m ? m !== "stretch" && (v = `${z}-align-items--${m}`) : l !== "stretch" && (v = `${z}-align-items--${l}`) : l !== "stretch" && (v = `${z}-align-items--${l}`);
+  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;
-  M ? 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}`);
+  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 M ? g ? g !== "none" && (I = `${z}-gap--${g}`) : i !== "none" && (I = `${z}-gap--${i}`) : i !== "none" && (I = `${z}-gap--${i}`), /* @__PURE__ */ e.createElement(
+  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: w([
+      className: v([
         b,
         D,
         P,
         k,
         y,
-        v,
+        M,
         S,
         I,
         a ?? ""
@@ -4638,17 +4657,17 @@ const J4 = () => {
     },
     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: c = "standard",
   verticalAlign: a = "start",
   ...n
 }) => {
-  const s = "pds-three-item-layout", i = c === "standard" ? "pds-grid" : `pds-grid pds-grid--${c}`, r = `${s}--${a}`, 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"]
@@ -4656,7 +4675,7 @@ const J4 = () => {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: w([
+      className: v([
         s,
         i,
         r,
@@ -4673,7 +4692,7 @@ const J4 = () => {
       d
     ))
   );
-}, d0 = ({
+}, h0 = ({
   children: t,
   className: l,
   gridGap: c = "standard",
@@ -4693,11 +4712,11 @@ const J4 = () => {
     case "one-third-end":
       f = g.concat(L), p = g.concat(d);
   }
-  const u = j2(t), M = u["first-item"], C = u["second-item"];
+  const u = P2(t), w = u["first-item"], C = u["second-item"];
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: w([
+      className: v([
         i,
         r,
         o,
@@ -4705,10 +4724,10 @@ const J4 = () => {
       ]),
       ...s
     },
-    /* @__PURE__ */ e.createElement("div", { className: f.join(" ").trim() }, M),
+    /* @__PURE__ */ e.createElement("div", { className: f.join(" ").trim() }, w),
     /* @__PURE__ */ e.createElement("div", { className: p.join(" ").trim() }, C)
   );
-}, h0 = () => {
+}, 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"
   );
@@ -4721,7 +4740,7 @@ const J4 = () => {
       window.removeEventListener("resize", n);
     };
   }, []), c;
-}, u0 = (t) => {
+}, 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;
@@ -4734,58 +4753,59 @@ const J4 = () => {
 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,
+  n0 as Container,
+  r0 as DocsLayout,
+  o0 as FlexContainer,
+  m0 as GlobalWrapper,
   O as Icon,
-  I2 as IconButton,
-  X4 as InlineMessage,
+  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,
-  P2 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,
+  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