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

package/dist/index.js

@@ -1,55 +1,18 @@
-import e, { Children as l1, isValidElement as z2, useState as O, useCallback as M2, useEffect as c2, createContext as a1, forwardRef as k2, cloneElement as n1, useRef as Q, useContext as P2, useLayoutEffect as M1 } from "react";
-import { useFloating as i1, autoUpdate as r1, offset as b1, flip as o1, shift as y1, useHover as E1, useFocus as $1, useDismiss as D1, useRole as _1, useInteractions as k1, FloatingPortal as P1, useId as x1 } from "@floating-ui/react";
-import { ToastContainer as N1, Slide as S1, cssTransition as I1, toast as e1 } from "react-toastify";
-import { useMeasure as j1 } from "@reactuses/core";
-import './index.css';const T1 = () => Math.random().toString(32).substring(2, 13), x2 = (t) => {
-  const a = {}, l = [];
-  return l1.forEach(t, (s) => {
-    if (z2(s)) {
-      const r = s.props.slot;
-      r ? a[r] ? a[r].push(s) : a[r] = [s] : l.push(s);
+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 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 { 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);
     } else
-      l.push(s);
-  }), l.length > 0 && (a.__unslotted = l), a;
-}, b = (t) => t.join(" ").trim().replace(/\s+/g, " "), d1 = ({
-  className: t,
-  label: a,
-  size: l = "s",
-  type: s = "neutral",
-  typeLabels: r = {
-    info: "Information",
-    success: "Success",
-    warning: "Warning",
-    critical: "Critical",
-    neutral: ""
-  },
-  ...c
-}) => {
-  const n = "pds-tally", i = `${n}--${s}`, m = `${n}--${l}`, h = `${r[s]}: `;
-  return /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      className: b([
-        n,
-        i,
-        m,
-        t ?? ""
-      ]),
-      ...c
-    },
-    /* @__PURE__ */ e.createElement("div", { className: `${n}__label` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, h), a)
-  );
-};
-d1.displayName = "Tally";
-const W2 = (t) => {
-  if (typeof t == "string" || typeof t == "number")
-    return String(t);
-  if (z2(t)) {
-    const a = t.props;
-    return l1.toArray(a.children).map(W2).join("");
-  }
-  return "";
-}, A1 = 768, R1 = 1280, B1 = 1440, O1 = "5rem", H1 = "4rem", V1 = "3rem", m1 = "2.5rem", h1 = "2rem", g1 = "1.5rem", X2 = "1.25rem", Y2 = "1rem", D2 = "0.75rem", u2 = "0.625rem", O2 = 500, F1 = 700, t1 = {
+      a.push(c);
+  }), a.length > 0 && (l.__unslotted = a), 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,
     svgPathData: "M183.215 0L254.271 277.176H204.614L302 512L46.228 187.779H135.272L0 0.434418L144.526 0.459972L145.968 0H183.215Z",
@@ -1001,6 +964,13 @@ const W2 = (t) => {
     svgPathData: "M139.7 69.8c7.6-10.9 5-25.8-5.9-33.4s-25.8-5-33.4 5.9L60.7 98.8 41 79C31.6 69.7 16.4 69.7 7 79S-2.3 103.6 7 113l40 40c5 5 12 7.6 19.1 6.9s13.5-4.3 17.6-10.1l56-80zm0 160c7.6-10.9 5-25.8-5.9-33.4s-25.8-5-33.4 5.9L60.7 258.8 41 239c-9.4-9.4-24.6-9.4-33.9 0S-2.3 263.6 7 273l40 40c5 5 12 7.6 19.1 6.9s13.5-4.3 17.6-10.1l56-80zM192 96c0 13.3 10.7 24 24 24l272 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L216 72c-13.3 0-24 10.7-24 24zm0 160c0 13.3 10.7 24 24 24l272 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-272 0c-13.3 0-24 10.7-24 24zM160 416c0 13.3 10.7 24 24 24l304 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-304 0c-13.3 0-24 10.7-24 24zm-64 0a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z",
     width: 512
   },
+  locationCrosshairs: {
+    aliases: ["location", "gps", "target", "crosshair"],
+    categories: ["navigation"],
+    height: 512,
+    svgPathData: "M288-16c13.3 0 24 10.7 24 24l0 25.3C416.5 44.4 499.6 127.5 510.7 232l25.3 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-25.3 0C499.6 384.5 416.5 467.6 312 478.7l0 25.3c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-25.3C159.5 467.6 76.4 384.5 65.3 280L40 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l25.3 0C76.4 127.5 159.5 44.4 264 33.3L264 8c0-13.3 10.7-24 24-24zM464 256a176 176 0 1 0 -352 0 176 176 0 1 0 352 0zm-112 0a64 64 0 1 0 -128 0 64 64 0 1 0 128 0zm-176 0a112 112 0 1 1 224 0 112 112 0 1 1 -224 0z",
+    width: 576
+  },
   lock: {
     aliases: ["locked", "password", "secure", "private"],
     categories: ["actions", "security", "status"],
@@ -1547,7 +1517,7 @@ const W2 = (t) => {
     svgPathData: "M549.7 124.1C543.5 100.4 524.9 81.8 501.4 75.5 458.9 64 288.1 64 288.1 64S117.3 64 74.7 75.5C51.2 81.8 32.7 100.4 26.4 124.1 15 167 15 256.4 15 256.4s0 89.4 11.4 132.3c6.3 23.6 24.8 41.5 48.3 47.8 42.6 11.5 213.4 11.5 213.4 11.5s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zM232.2 337.6l0-162.4 142.7 81.2-142.7 81.2z",
     width: 576
   }
-}, $4 = [
+}, B4 = [
   "angleDown",
   "angleLeft",
   "angleRight",
@@ -1671,6 +1641,7 @@ const W2 = (t) => {
   "linkSimple",
   "linkSimpleSlash",
   "listCheck",
+  "locationCrosshairs",
   "lock",
   "lockOpen",
   "magnifyingGlass",
@@ -1749,529 +1720,710 @@ const W2 = (t) => {
   "xmarkLarge",
   "xTwitter",
   "youtube"
-], q1 = {
-  "2xl": h1,
-  "3xl": m1,
-  l: X2,
-  m: Y2,
-  s: D2,
-  xl: g1,
-  xs: u2
-}, V = ({
+], A = ({
   className: t,
-  display: a = "inline-block",
-  iconName: l,
-  iconSize: s = "l",
-  style: r,
-  verticalAlign: c = "middle",
+  display: l = "inline-block",
+  iconName: a,
+  iconSize: c = "l",
+  style: i,
+  verticalAlign: s = "middle",
   ...n
 }) => {
-  const i = "pds-icon", m = `${i} ${i}--${s} ${i}--${l}`, h = Z1[l], p = `0 0 ${h.width} ${h.height}`, f = l in t1 ? t1[l] : null;
+  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 (f?.type === "complex")
-    d = f.render();
+  if (z?.type === "complex")
+    d = z.render();
   else {
-    const g = f?.type === "path" ? f.svgPathData : h.svgPathData;
-    d = Array.isArray(g) ? g.map((M, o) => /* @__PURE__ */ e.createElement("path", { key: o, d: M, fill: "currentColor" })) : /* @__PURE__ */ e.createElement("path", { d: g, fill: "currentColor" });
+    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" });
   }
   return /* @__PURE__ */ e.createElement(
     "svg",
     {
       "aria-hidden": "true",
-      className: b([m, t ?? ""]),
+      className: v([o, t ?? ""]),
       fill: "none",
       focusable: "false",
-      height: q1[s],
       preserveAspectRatio: "xMidYMid meet",
       role: "img",
       style: {
-        display: a,
-        flexShrink: 0,
-        overflow: "visible",
-        verticalAlign: c,
-        ...r
+        display: l,
+        verticalAlign: s,
+        ...i
       },
-      viewBox: p,
+      viewBox: h,
       xmlns: "http://www.w3.org/2000/svg",
       ...n
     },
     d
   );
-}, w2 = "0.75rem", s1 = "0.875rem", c1 = "1rem", U1 = a1(null), G1 = ({
+}, s1 = [
+  "dawn",
+  "dragonfruit",
+  "dusk",
+  "earth",
+  "fall",
+  "grape",
+  "midnight",
+  "moon",
+  "plum",
+  "spring",
+  "summer",
+  "sun",
+  "sundown",
+  "sunrise",
+  "twilight",
+  "winter"
+], q1 = (t) => {
+  const l = parseInt(D1(t), 16);
+  return s1[l % s1.length];
+}, A4 = ({
+  ariaLabel: t,
+  className: l,
+  hasUserFallback: a = !1,
+  imageSrc: c,
+  linkContent: i,
+  size: s = "s",
+  uniqueId: n,
+  ...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,
+    borderRadius: "100%",
+    height: "100%",
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, g = F1(c) && !z ? /* @__PURE__ */ e.createElement(
+    "img",
+    {
+      alt: "",
+      className: `${o}__image`,
+      onError: () => d(!0),
+      onLoad: () => d(!1),
+      src: `${c}`
+    }
+  ) : /* @__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, {
+      className: `${o}__content ${o}__content--link`,
+      "aria-label": t
+    }),
+    g
+  ) : null;
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: v([o, m, h, l]),
+      ...r
+    },
+    i ? L : p
+  );
+}, O4 = ({
+  className: t,
+  color: l = "gaia",
+  label: a,
+  size: c = "m",
+  ...i
+}) => {
+  const s = "pds-badge", n = `${s}--${l}`, r = c !== "m" ? `${s}--${c}` : null;
+  return /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      className: v([
+        s,
+        n,
+        r,
+        t ?? ""
+      ]),
+      ...i
+    },
+    /* @__PURE__ */ e.createElement("span", { className: `${s}__label` }, a)
+  );
+}, G1 = ({
+  className: t,
+  color: l = "transparent",
+  hasStatusIndicator: a = !1,
+  label: c,
+  statusIndicatorText: i = "Status indicator: ",
+  statusType: s,
+  ...n
+}) => {
+  const r = "pds-status-badge", o = `${r}--${l}`, m = `${r}__status`, h = s ? `${m}--${s}` : null;
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: v([r, o, t ?? ""]),
+      ...n
+    },
+    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)
+  );
+}, d1 = ({
+  className: t,
+  label: l,
+  size: a = "s",
+  type: c = "neutral",
+  typeLabels: i = {
+    info: "Information",
+    success: "Success",
+    warning: "Warning",
+    critical: "Critical",
+    neutral: ""
+  },
+  ...s
+}) => {
+  const n = "pds-tally", r = `${n}--${c}`, o = `${n}--${a}`, m = `${i[c]}: `;
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: v([
+        n,
+        r,
+        o,
+        t ?? ""
+      ]),
+      ...s
+    },
+    /* @__PURE__ */ e.createElement("div", { className: `${n}__label` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, m), l)
+  );
+};
+d1.displayName = "Tally";
+const Y2 = (t) => {
+  if (typeof t == "string" || typeof t == "number")
+    return String(t);
+  if (h2(t)) {
+    const l = t.props;
+    return i1.toArray(l.children).map(Y2).join("");
+  }
+  return "";
+}, 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 [a, l] = O(0), s = M2(() => {
-    l((i) => i + 1);
-  }, []), r = M2(() => {
-    l((i) => Math.max(0, i - 1));
-  }, []), c = a > 0;
-  c2(() => {
-    if (!c)
+  const [l, a] = H(0), c = $2(() => {
+    a((r) => r + 1);
+  }, []), i = $2(() => {
+    a((r) => Math.max(0, r - 1));
+  }, []), s = l > 0;
+  l2(() => {
+    if (!s)
       return;
-    const i = (m) => {
-      ["/"].includes(m.key) && (m.preventDefault(), m.stopPropagation(), m.stopImmediatePropagation());
+    const r = (o) => {
+      ["/"].includes(o.key) && (o.preventDefault(), o.stopPropagation(), o.stopImmediatePropagation());
     };
-    return document.addEventListener("keydown", i, { capture: !0 }), () => {
-      document.removeEventListener("keydown", i, { capture: !0 });
+    return document.addEventListener("keydown", r, { capture: !0 }), () => {
+      document.removeEventListener("keydown", r, { capture: !0 });
     };
-  }, [c]);
+  }, [s]);
   const n = {
-    closeOverlay: r,
-    hasOpenOverlay: c,
-    openOverlay: s
+    closeOverlay: i,
+    hasOpenOverlay: s,
+    openOverlay: c
   };
-  return /* @__PURE__ */ e.createElement(U1.Provider, { value: n }, t);
-}, D4 = (t, a, l) => {
+  return /* @__PURE__ */ e.createElement(g1.Provider, { value: n }, t);
+}, a4 = () => {
+  const t = D2(g1);
+  if (!t)
+    throw new Error(
+      "useOverlayContext must be used within OverlayContextProvider"
+    );
+  return t;
+}, l4 = (t, l, a) => {
   const {
-    altKey: s = !1,
-    ctrlKey: r = !1,
-    enabled: c = !0,
+    altKey: c = !1,
+    ctrlKey: i = !1,
+    enabled: s = !0,
     metaKey: n = !1,
-    shiftKey: i = !1
-  } = l ?? {}, [m, h] = O(!1), p = M2(
-    (g) => g.altKey === s && g.ctrlKey === r && g.metaKey === n && g.shiftKey === i,
-    [s, r, n, i]
-  ), f = M2(
-    (g) => {
-      g.key === t && p(g) && (h(!0), a && a(g));
+    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(
+    (f) => {
+      f.key === t && h(f) && (m(!0), l && l(f));
     },
-    [t, a, p]
-  ), d = M2(
-    (g) => {
-      g.key === t && p(g) && h(!1);
+    [t, l, h]
+  ), d = $2(
+    (f) => {
+      f.key === t && h(f) && m(!1);
     },
-    [t, p]
+    [t, h]
   );
-  return c2(() => {
-    if (c)
-      return window.addEventListener("keydown", f), window.addEventListener("keyup", d), () => {
-        window.removeEventListener("keydown", f), window.removeEventListener("keyup", d);
+  return l2(() => {
+    if (s)
+      return window.addEventListener("keydown", z), window.addEventListener("keyup", d), () => {
+        window.removeEventListener("keydown", z), window.removeEventListener("keyup", d);
       };
-  }, [f, d, c]), m;
-}, N2 = ({
+  }, [z, d, s]), o;
+}, T2 = ({
   className: t,
-  content: a,
-  customTrigger: l = null,
-  offsetValue: s = 8,
-  preferredPlacement: r = "top",
-  triggerAccessibleText: c = "Show more information",
+  content: l,
+  customTrigger: a = null,
+  offsetValue: c = 6,
+  preferredPlacement: i = "top",
+  triggerAccessibleText: s = "Show more information",
   triggerIcon: n = "circleInfo",
-  triggerIconColor: i = "default",
-  triggerIconSize: m = "s",
-  zIndex: h = F1,
-  ...p
+  triggerIconColor: r = "default",
+  triggerIconSize: o = "m",
+  zIndex: m = s4,
+  ...h
 }) => {
-  const [f, d] = O(!1), g = typeof l, M = "pds-tooltip", o = b([
-    `${M}__trigger-custom`,
-    g === "string" ? `${M}__trigger-text` : null
-  ]), z = b([
-    `${M}__trigger`,
-    `${M}__trigger--${i}`
-  ]), { context: L, floatingStyles: y, refs: w } = i1({
-    placement: r,
-    open: f,
+  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: [b1(s), o1(), y1()],
-    whileElementsMounted: r1
-  }), _ = E1(L, {
+    middleware: [P1(c), m1(), k1()],
+    whileElementsMounted: o1
+  }), D = x1(L, {
     restMs: 300,
     delay: { open: 100, close: 0 },
     move: !1
-  }), k = $1(L), S = D1(L), x = _1(L, { role: "tooltip" }), { getFloatingProps: v, getReferenceProps: T } = k1([
-    _,
-    k,
-    S,
-    x
+  }), N = N1(L), P = S1(L), _ = I1(L, { role: "tooltip" }), { getFloatingProps: w, getReferenceProps: S } = j1([
+    D,
+    N,
+    P,
+    _
   ]);
-  return /* @__PURE__ */ e.createElement("div", { className: b([M, t ?? ""]), ...p }, l ? /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: v([C, t ?? ""]), ...h }, a ? /* @__PURE__ */ e.createElement(
     "span",
     {
-      ref: w.setReference,
-      className: o,
-      ...T()
+      ref: M.setReference,
+      className: g,
+      ...S()
     },
-    l
+    a
   ) : /* @__PURE__ */ e.createElement(
     "button",
     {
-      ref: w.setReference,
-      "aria-label": c,
-      className: z,
+      ref: M.setReference,
+      "aria-label": s,
+      className: p,
       type: "button",
-      ...T()
+      ...S()
     },
     /* @__PURE__ */ e.createElement(
-      V,
+      A,
       {
-        className: `${M}__icon`,
+        className: `${C}__icon`,
         iconName: n,
-        iconSize: m
+        iconSize: o
       }
     )
-  ), /* @__PURE__ */ e.createElement(P1, null, /* @__PURE__ */ e.createElement(
+  ), /* @__PURE__ */ e.createElement(T1, null, /* @__PURE__ */ e.createElement(
     "div",
     {
-      ref: w.setFloating,
-      "aria-hidden": !f,
-      className: `${M}__container`,
+      ref: M.setFloating,
+      "aria-hidden": !z,
+      className: `${C}__container`,
       style: {
-        ...y,
-        zIndex: h,
-        opacity: f ? 1 : 0,
-        pointerEvents: f ? "auto" : "none",
+        ...b,
+        zIndex: m,
+        opacity: z ? 1 : 0,
+        pointerEvents: z ? "auto" : "none",
         transition: "var(--pds-animation-transition-reveal)"
       },
-      ...v()
+      ...w()
     },
-    a
+    l
   )));
-}, p2 = {
+}, X = {
   base: "pds-input",
   disabled: "pds-is-disabled",
   required: "pds-is-required",
   error: "pds-has-error",
-  success: "pds-has-success"
-}, K1 = (t) => t ? { maxWidth: `${t / 16}rem` } : null, W1 = () => /* @__PURE__ */ e.createElement("span", { className: "pds-input-label__required" }, /* @__PURE__ */ e.createElement(
-  V,
+  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,
   {
     className: "pds-input-label__required-icon",
     iconName: "asterisk",
     iconSize: "s"
   }
-)), X1 = ({
+)), z1 = ({
   className: t,
-  disabled: a,
-  id: l,
-  isLegend: s,
-  isPseudoLabel: r,
-  label: c,
+  disabled: l,
+  id: a,
+  isLegend: c,
+  isPseudoLabel: i,
+  label: s,
   required: n,
-  showLabel: i = !0,
-  tooltipText: m = null
+  showLabel: r = !0,
+  tooltipText: o = null
 }) => {
-  const h = b([
+  const m = v([
     "pds-input-label",
-    i ? null : "visually-hidden",
+    r ? null : "visually-hidden",
     t ?? ""
-  ]), p = /* @__PURE__ */ e.createElement(e.Fragment, null, c, n && !a && /* @__PURE__ */ e.createElement(W1, null), m && /* @__PURE__ */ e.createElement(N2, { content: m }, /* @__PURE__ */ e.createElement("span", null, /* @__PURE__ */ e.createElement(V, { iconName: "circleInfo", iconSize: "s" }))));
-  return s ? /* @__PURE__ */ e.createElement("legend", { className: h, id: `${l}-legend` }, p) : r ? /* @__PURE__ */ e.createElement("span", { className: h, id: `${l}-field-label` }, p) : /* @__PURE__ */ e.createElement("label", { className: h, htmlFor: l, id: `${l}-label` }, p);
-}, Y1 = ({
+  ]), 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);
+}, f1 = ({
   className: t,
-  forInputGroup: a = !1,
-  hasValidationMessage: l,
-  id: s,
-  message: r,
-  validationMessageHasDecorators: c,
+  forInputGroup: l = !1,
+  hasValidationMessage: a,
+  id: c,
+  message: i,
+  validationMessageHasDecorators: s,
   validationStatus: n
 }) => {
-  const i = "pds-input-message", m = n && l ? `${i}--${n}` : null;
+  const r = "pds-input-message", o = n && a ? `${r}--${n}` : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: b([i, m, t ?? ""]),
-      id: a ? `${s}__message-hidden` : `${s}__message`,
+      className: v([r, o, t ?? ""]),
+      id: l ? `${c}__message-hidden` : `${c}__message`,
       role: n === "error" ? "alert" : null
     },
-    c && n && /* @__PURE__ */ e.createElement(J1, { variant: n }),
-    /* @__PURE__ */ e.createElement("div", { className: `${i}__text` }, r)
+    s && n && /* @__PURE__ */ e.createElement(L1, { variant: n }),
+    /* @__PURE__ */ e.createElement("div", { className: `${r}__text` }, i)
   );
-}, Q1 = {
+}, n4 = {
   search: "magnifyingGlass",
   error: "triangleExclamation",
   success: "check",
   filter: "barsFilter"
-}, J1 = ({ variant: t }) => {
-  const a = "pds-input-decorator";
-  return /* @__PURE__ */ e.createElement("div", { className: b([a, `${a}--${t}`]) }, /* @__PURE__ */ e.createElement(
-    V,
+}, L1 = ({ variant: t }) => {
+  const l = "pds-input-prefix";
+  return /* @__PURE__ */ e.createElement("div", { className: v([l, `${l}--${t}`]) }, /* @__PURE__ */ e.createElement(
+    A,
     {
-      className: `${a}__icon`,
-      iconName: Q1[t],
+      className: `${l}__icon`,
+      iconName: n4[t],
       iconSize: "m"
     }
   ));
-}, e4 = ({ label: t, ...a }) => /* @__PURE__ */ e.createElement("span", { className: "visually-hidden", ...a }, t);
-k2(
-  ({ children: t, className: a, isActive: l, ...s }, r) => {
-    const c = x1(), n = "pds-input__select-option", i = l ? `${n}--active` : null;
+}, r4 = ({
+  inputId: t,
+  shortcutLabel: l
+}) => {
+  const { hasOpenOverlay: a } = a4();
+  return l4("/", (i) => {
+    const s = document.getElementById(t);
+    s && s.focus(), i.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" }));
+}, o4 = ({
+  clearLabel: t,
+  handleClearInput: l,
+  id: a
+}) => /* @__PURE__ */ e.createElement(
+  "button",
+  {
+    "aria-controls": a,
+    className: "pds-input-clear-button",
+    onClick: l,
+    title: t,
+    type: "button"
+  },
+  /* @__PURE__ */ e.createElement(A, { iconName: "xmark", iconSize: "m" })
+), C1 = ({
+  currentLength: t,
+  id: l,
+  maxLength: a,
+  overLimitMessage: c = "Character limit exceeded by"
+}) => {
+  const i = t > a, s = t - a, n = "pds-input-character-counter", r = i ? `${n}--overLimit` : null;
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: v([n, r]),
+      id: `${l}__counter`
+    },
+    t,
+    "/",
+    a,
+    /* @__PURE__ */ e.createElement("span", { "aria-live": "polite", className: "visually-hidden" }, i && `${c} ${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;
     return /* @__PURE__ */ e.createElement(
       "li",
       {
-        ref: r,
-        "aria-selected": l,
-        className: b([n, i, a ?? ""]),
-        id: c,
+        ref: i,
+        "aria-selected": a,
+        className: v([n, r, l ?? ""]),
+        id: s,
         role: "option",
-        ...s
+        ...c
       },
       t
     );
   }
 );
-const t4 = {
-  s: D2,
-  m: Y2,
-  l: X2,
-  xl: g1,
-  "2xl": h1,
-  "3xl": m1,
-  "4xl": V1,
-  "5xl": H1,
-  "6xl": O1
-}, s4 = {
-  s: w2,
-  m: w2,
-  l: w2,
-  xl: w2,
-  "2xl": w2,
-  "3xl": s1,
-  "4xl": s1,
-  "5xl": c1,
-  "6xl": c1
-}, c4 = {
-  s: u2,
-  m: u2,
-  l: u2,
-  xl: u2,
-  "2xl": u2,
-  "3xl": D2,
-  "4xl": D2,
-  "5xl": Y2,
-  "6xl": X2
-}, S2 = ({
+const d4 = {
+  s: K2,
+  m: u1,
+  l: h1,
+  xl: t4,
+  "2xl": e4,
+  "3xl": J1,
+  "4xl": Q1,
+  "5xl": Y1,
+  "6xl": X1
+}, h4 = {
+  s: y2,
+  m: y2,
+  l: y2,
+  xl: y2,
+  "2xl": y2,
+  "3xl": c1,
+  "4xl": c1,
+  "5xl": a1,
+  "6xl": a1
+}, u4 = {
+  s: E2,
+  m: E2,
+  l: E2,
+  xl: E2,
+  "2xl": E2,
+  "3xl": K2,
+  "4xl": K2,
+  "5xl": u1,
+  "6xl": h1
+}, k2 = ({
   className: t = "",
-  colorType: a = "full-color",
-  isInline: l = !1,
-  label: s = "Loading",
-  showLabel: r = !1,
-  size: c = "3xl",
+  colorType: l = "full-color",
+  isInline: a = !1,
+  label: c = "Loading",
+  showLabel: i = !1,
+  size: s = "3xl",
   ...n
 }) => {
-  const i = "pds-spinner", m = a !== "full-color" ? `${i}--${a}` : null, h = l ? `${i}--inline` : null, p = t4[c], f = s4[c], d = c4[c], g = Math.ceil(parseFloat(p) * 16 * 0.13), M = {
-    "--spinner-size": p,
-    "--spinner-line": `${g}px`
-  }, o = {
-    fontSize: f,
+  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,
+    "--spinner-line": `${f}px`
+  }, g = {
+    fontSize: z,
     marginBlockStart: d
   };
   return /* @__PURE__ */ e.createElement(
     "span",
     {
       "aria-hidden": "true",
-      className: b([i, m, h, t]),
+      className: v([r, o, m, t]),
       role: "status",
-      style: M,
+      style: C,
       ...n
     },
-    /* @__PURE__ */ e.createElement("span", { className: `${i}__icon` }),
-    r && !l ? /* @__PURE__ */ e.createElement("span", { className: `${i}__label`, style: o }, s) : /* @__PURE__ */ e.createElement(e4, { label: s })
+    /* @__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 })
   );
-}, I2 = k2(
+}, B2 = P2(
   ({
     ariaLabel: t,
-    buttonType: a = "button",
-    className: l = "",
-    disabled: s = !1,
-    displayType: r = "label-only",
-    iconName: c,
+    buttonType: l = "button",
+    className: a = "",
+    disabled: c = !1,
+    displayType: i = "label-only",
+    iconName: s,
     isFullWidth: n = !1,
-    isLoading: i = !1,
-    isSplitButton: m = !1,
-    isWorking: h = !1,
-    label: p,
-    onClick: f,
+    isLoading: r = !1,
+    isSplitButton: o = !1,
+    isWorking: m = !1,
+    label: h,
+    onClick: z,
     size: d = "s",
-    tooltipText: g,
-    variant: M = "primary",
-    ...o
-  }, z) => {
-    const L = "pds-button", y = `${L}--${d}`, w = `${L}--${M}`, _ = n ? `${L}--full-width` : null, k = i ? `${L}--loading` : null, S = i ? "pds-pulse" : null;
-    let x, v;
+    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) {
       case "xs":
-        x = "s", v = "s";
+        _ = "s", w = "s";
         break;
       case "s":
-        x = "m", v = "m";
+        _ = "m", w = "m";
         break;
       case "m":
-        x = "m", v = "m";
+        _ = "m", w = "m";
         break;
       case "l":
-        x = "m", v = "l";
+        _ = "m", w = "l";
         break;
       case "xl":
-        x = "l", v = "l";
+        _ = "l", w = "l";
         break;
     }
-    let T = "monochromatic";
-    ["primary"].includes(M) && (T = "monochromatic-reverse");
-    const C = /* @__PURE__ */ e.createElement(
-      V,
+    let S = "monochromatic";
+    ["primary"].includes(C) && (S = "monochromatic-reverse");
+    const k = /* @__PURE__ */ e.createElement(
+      A,
       {
         key: "icon",
         className: `${L}__icon`,
-        iconName: c,
-        iconSize: x
+        iconName: s,
+        iconSize: _
       }
     );
-    let U = [p];
-    r == "icon-start" && c && U.unshift(C), r == "icon-end" && c && U.push(C), m && (U = [C], t = W2(p));
-    const A = /* @__PURE__ */ e.createElement(
+    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(
       "button",
       {
-        ref: z,
+        ref: p,
         "aria-label": t,
-        className: b([
+        className: v([
           L,
-          y,
-          w,
-          _,
-          k,
-          S,
-          l
+          b,
+          M,
+          D,
+          N,
+          P,
+          a
         ]),
-        disabled: s || i || h,
-        onClick: f,
-        type: a,
-        ...o
+        disabled: c || r || m,
+        onClick: z,
+        type: l,
+        ...g
       },
-      h && !i && /* @__PURE__ */ e.createElement(
-        S2,
+      m && !r && /* @__PURE__ */ e.createElement(
+        k2,
         {
           className: `${L}__working-indicator`,
-          colorType: T,
-          size: v
+          colorType: S,
+          size: w
         }
       ),
-      U
+      R
     );
-    return (s || i || h) && g ? /* @__PURE__ */ e.createElement(N2, { content: g, customTrigger: A }) : /* @__PURE__ */ e.createElement(e.Fragment, null, A);
+    return (c || r || m) && f ? /* @__PURE__ */ e.createElement(T2, { content: f, customTrigger: F }) : /* @__PURE__ */ e.createElement(e.Fragment, null, F);
   }
-), l4 = ({
+), g4 = ({
   className: t,
-  disabled: a = !1,
-  displayType: l = "label-only",
-  iconName: s,
-  linkContent: r,
-  size: c = "s",
+  disabled: l = !1,
+  displayType: a = "label-only",
+  iconName: c,
+  linkContent: i,
+  size: s = "s",
   tooltipText: n,
-  variant: i = "primary",
-  ...m
+  variant: r = "primary",
+  ...o
 }) => {
-  const h = "pds-button-link", p = "pds-button", f = `${p}--${c}`, d = `${p}--${i}`, g = b([
-    p,
-    f,
+  const m = "pds-button-link", h = "pds-button", z = `${h}--${s}`, d = `${h}--${r}`, f = v([
+    h,
+    z,
     d
-  ]), M = z2(r) ? r.props.children : null;
-  let o;
-  switch (c) {
+  ]), C = h2(i) ? i.props.children : null;
+  let g;
+  switch (s) {
     case "xs":
-      o = "s";
+      g = "s";
       break;
     case "s":
-      o = "m";
+      g = "m";
       break;
     case "m":
-      o = "m";
+      g = "m";
       break;
     case "l":
-      o = "m";
+      g = "m";
       break;
     case "xl":
-      o = "l";
+      g = "l";
       break;
     default:
-      o = "m";
+      g = "m";
       break;
   }
-  const z = /* @__PURE__ */ e.createElement(
-    V,
+  const p = /* @__PURE__ */ e.createElement(
+    A,
     {
-      key: s,
-      className: `${h}__icon`,
-      iconName: s,
-      iconSize: o
+      key: c,
+      className: `${m}__icon`,
+      iconName: c,
+      iconSize: g
     }
   );
-  let L = [M];
-  l === "icon-start" && s ? L = [z, M] : l === "icon-end" && s && (L = [M, z]);
-  const y = z2(r) ? n1(
-    r,
-    Object.assign({}, r.props, {
-      className: g,
+  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, {
+      className: f,
       children: L
     })
   ) : null;
-  return a ? /* @__PURE__ */ e.createElement(
-    I2,
+  return l ? /* @__PURE__ */ e.createElement(
+    B2,
     {
       disabled: !0,
-      className: b([h, t ?? ""]),
+      className: v([m, t ?? ""]),
       label: L,
-      size: c,
+      size: s,
       tooltipText: n ?? null,
-      variant: i
+      variant: r
     }
-  ) : /* @__PURE__ */ e.createElement("span", { className: b([h, t ?? ""]), ...m }, y);
-}, a4 = (t, a) => {
-  const [l, s] = O(!1), r = a?.duration;
-  return c2(() => {
+  ) : /* @__PURE__ */ e.createElement("span", { className: v([m, t ?? ""]), ...o }, b);
+}, p4 = (t, l) => {
+  const [a, c] = H(!1), i = l?.duration;
+  return l2(() => {
     let n;
-    return l && r && (n = setTimeout(() => {
-      s(!1);
-    }, r)), () => {
+    return a && i && (n = setTimeout(() => {
+      c(!1);
+    }, i)), () => {
       n && clearTimeout(n);
     };
-  }, [l, r]), [l, async () => {
+  }, [a, i]), [a, async () => {
     if (navigator.clipboard)
       try {
-        await navigator.clipboard.writeText(t), s(!0);
+        await navigator.clipboard.writeText(t), c(!0);
       } catch {
       }
   }];
-}, _2 = k2(
+}, I2 = P2(
   ({
     ariaLabel: t,
-    buttonType: a = "button",
-    className: l,
-    disabled: s = !1,
-    hasTooltip: r = !0,
-    icon2Name: c = null,
+    buttonType: l = "button",
+    className: a,
+    disabled: c = !1,
+    hasTooltip: i = !0,
+    icon2Name: s = null,
     iconName: n,
-    onClick: i,
-    size: m = "s",
-    variant: h = "standard",
-    ...p
-  }, f) => {
-    const d = "pds-icon-button", g = m !== "s" ? `${d}--${m}` : null, M = h !== "standard" ? `${d}--${h}` : null, o = {
+    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`
     };
-    let z, L;
-    switch (m) {
+    let p, L;
+    switch (o) {
       case "s":
-        L = "m", z = 8;
+        L = "m", p = 8;
         break;
       case "m":
-        L = "l", z = 11;
+        L = "l", p = 11;
         break;
       default:
-        L = "m", z = 8;
+        L = "m", p = 8;
         break;
     }
-    const y = c !== null, w = Q(null), _ = Q(null), k = () => {
-      w.current.classList.add(o.fadeOut), w.current.classList.add(o.hide), _.current.classList.remove(o.hide), _.current.classList.add(o.scaleIn), setTimeout(() => {
-        w.current.classList.remove(
-          o.fadeOut,
-          o.hide
-        ), w.current.classList.add(o.scaleIn), _.current.classList.remove(o.scaleIn), _.current.classList.add(o.hide);
+    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);
       }, 2e3);
-    }, S = (v) => {
-      y && k(), i && i(v);
-    }, x = y ? /* @__PURE__ */ e.createElement("div", { className: `${d}__content` }, /* @__PURE__ */ e.createElement("div", { ref: w, className: `${d}__icon-wrapper` }, /* @__PURE__ */ e.createElement(
-      V,
+    }, 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,
       {
         className: `${d}__icon`,
         iconName: n,
@@ -2280,19 +2432,19 @@ const t4 = {
     )), /* @__PURE__ */ e.createElement(
       "div",
       {
-        ref: _,
-        className: `${d}__icon-wrapper ${o.hide}`
+        ref: D,
+        className: `${d}__icon-wrapper ${g.hide}`
       },
       /* @__PURE__ */ e.createElement(
-        V,
+        A,
         {
           className: `${d}__icon`,
-          iconName: c,
+          iconName: s,
           iconSize: L
         }
       )
     )) : /* @__PURE__ */ e.createElement("div", { className: `${d}__content` }, /* @__PURE__ */ e.createElement(
-      V,
+      A,
       {
         className: `${d}__icon`,
         iconName: n,
@@ -2302,73 +2454,73 @@ const t4 = {
     return /* @__PURE__ */ e.createElement(
       "button",
       {
-        ref: f,
+        ref: z,
         "aria-label": t,
-        className: b([
+        className: v([
           d,
-          g,
-          M,
-          l
+          f,
+          C,
+          a
         ]),
-        disabled: s,
-        onClick: S,
-        title: r && !s ? null : t,
-        type: a,
-        ...p
+        disabled: c,
+        onClick: P,
+        title: i && !c ? null : t,
+        type: l,
+        ...h
       },
-      r && !s ? /* @__PURE__ */ e.createElement(
-        N2,
+      i && !c ? /* @__PURE__ */ e.createElement(
+        T2,
         {
           className: `${d}__tooltip`,
           content: t,
-          customTrigger: x,
-          offsetValue: z
+          customTrigger: _,
+          offsetValue: p
         }
-      ) : x
+      ) : _
     );
   }
-), _4 = ({
+), H4 = ({
   ariaLabel: t = "Copy to clipboard",
-  className: a,
-  clipboardText: l = "",
-  disabled: s,
-  variant: r = "standard",
-  ...c
+  className: l,
+  clipboardText: a = "",
+  disabled: c,
+  variant: i = "standard",
+  ...s
 }) => {
-  const n = "pds-clipboard-button", [i, m] = a4(l);
+  const n = "pds-clipboard-button", [r, o] = p4(a);
   return /* @__PURE__ */ e.createElement(
-    _2,
+    I2,
     {
       ariaLabel: t,
       buttonType: "button",
-      className: b([n, a ?? ""]),
-      disabled: s,
+      className: v([n, l ?? ""]),
+      disabled: c,
       icon2Name: "check",
       iconName: "copy",
-      onClick: m,
+      onClick: o,
       size: "m",
-      variant: r,
-      ...c
+      variant: i,
+      ...s
     }
   );
-}, u1 = ({
+}, v1 = ({
   ariaLabel: t = "Close",
-  className: a,
-  onClick: l,
-  size: s = "l",
-  ...r
+  className: l,
+  onClick: a,
+  size: c = "l",
+  ...i
 }) => {
-  const c = "pds-close-button", n = `${c}--${s}`;
+  const s = "pds-close-button", n = `${s}--${c}`;
   return /* @__PURE__ */ e.createElement(
     "button",
     {
       "aria-label": t,
-      className: b([c, n, a ?? ""]),
-      onClick: l,
+      className: v([s, n, l ?? ""]),
+      onClick: a,
       type: "button",
-      ...r
+      ...i
     },
-    /* @__PURE__ */ e.createElement(V, { className: `${c}__icon`, iconName: "xmarkLarge" })
+    /* @__PURE__ */ e.createElement(A, { className: `${s}__icon`, iconName: "xmarkLarge" })
   );
 }, Q2 = {
   info: "Information",
@@ -2376,7 +2528,7 @@ const t4 = {
   warning: "Warning",
   critical: "Critical",
   discovery: "Discovery"
-}, H2 = (t) => "isSeparator" in t && t.isSeparator, V2 = (t) => "isHeading" in t && t.isHeading, F2 = (t) => "isLink" in t && t.isLink, n4 = (t) => "isNode" in t && t.isNode, k4 = {
+}, V2 = (t) => "isSeparator" in t && t.isSeparator, F2 = (t) => "isHeading" in t && t.isHeading, Z2 = (t) => "isLink" in t && t.isLink, z4 = (t) => "isNode" in t && t.isNode, R4 = {
   sandbox: "Sandbox",
   basic: "Basic",
   "performance-small": "Performance Small",
@@ -2388,114 +2540,114 @@ const t4 = {
   pro: "Professional",
   business: "Business",
   "flagship-performance": "Flagship Performance"
-}, P4 = {
+}, V4 = {
   drupal: "Drupal",
   wordpress: "WordPress",
   gatsby: "Gatsby",
   nextjs: "Next.js"
-}, i4 = {
+}, f4 = {
   drupal: "drupal",
   wordpress: "wordpress",
   gatsby: "bolt",
   nextjs: "bolt"
-}, p1 = () => {
-  const t = typeof window < "u", [a, l] = O(
+}, w1 = () => {
+  const t = typeof window < "u", [l, a] = H(
     t && window.innerWidth !== void 0 ? window.innerWidth : 1024
   );
-  return c2(() => {
+  return l2(() => {
     if (!t) return;
-    l(window.innerWidth);
-    const s = () => {
-      l(window.innerWidth);
+    a(window.innerWidth);
+    const c = () => {
+      a(window.innerWidth);
     };
-    return window.addEventListener("resize", s), () => {
-      window.removeEventListener("resize", s);
+    return window.addEventListener("resize", c), () => {
+      window.removeEventListener("resize", c);
     };
-  }, []), a;
-}, b2 = a1(null), r4 = ({
+  }, []), l;
+}, x2 = n1(null), L4 = ({
   children: t,
-  mobileMenuMaxWidth: a = 640
+  mobileMenuMaxWidth: l = 640
 }) => {
-  const l = p1(), s = l <= a, r = {
-    isMobile: s,
-    mobileMenuMaxWidth: a,
-    windowWidth: l
+  const a = w1(), c = a <= l, i = {
+    isMobile: c,
+    mobileMenuMaxWidth: l,
+    windowWidth: a
   };
-  return c2(() => {
-    s ? document.body.classList.add("pds-no-scroll-x") : document.body.classList.remove("pds-no-scroll-x");
-  }, [s]), /* @__PURE__ */ e.createElement(b2.Provider, { value: r }, t);
-}, o4 = ({
+  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);
+}, C4 = ({
   className: t,
-  disabled: a,
-  displayType: l = "icon-end",
-  iconName: s = "ellipsisVertical",
-  id: r,
-  isSplitButton: c = !1,
+  disabled: l,
+  displayType: a = "icon-end",
+  iconName: c = "ellipsisVertical",
+  id: i,
+  isSplitButton: s = !1,
   label: n,
-  menuItems: i,
-  menuPosition: m = "start",
-  onClick: h,
-  size: p = "s",
-  testId: f,
+  menuItems: r,
+  menuPosition: o = "start",
+  onClick: m,
+  size: h = "s",
+  testId: z,
   undefinedLabel: d = "Unlabeled group",
-  variant: g = "primary",
-  withinNavbar: M,
-  ...o
+  variant: f = "primary",
+  withinNavbar: C,
+  ...g
 }) => {
-  const { placement: z, refs: L, strategy: y, x: w, y: _ } = i1({
+  const { placement: p, refs: L, strategy: b, x: M, y: D } = r1({
     placement: "bottom-start",
-    middleware: [o1()],
-    whileElementsMounted: r1
+    middleware: [m1()],
+    whileElementsMounted: o1
   });
-  let k = !1;
-  const S = P2(b2);
-  S && (k = S.isMobile);
-  const x = g === "navbar" && k, v = "pds-menu-button", T = x ? `${v}--isMobile` : null, N = M ? `${v}--navbar` : null, C = r, [U] = O(`menu-button-${r}`), A = L.floating, K = Q(null), [F, e2] = O(!1), [W, t2] = O(!1), [J, d2] = O(""), [l2, m2] = O(0), a2 = Q([]), H = Q([]), Z = Q([]);
-  M1(() => {
-    window.addEventListener("mousedown", q, !0);
-    const u = A.current;
-    return u && (u.dataset.fuiPlacement = z), W && (setTimeout(() => {
+  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([]);
+  _1(() => {
+    window.addEventListener("mousedown", L2, !0);
+    const u = F.current;
+    return u && (u.dataset.fuiPlacement = p), Z && (setTimeout(() => {
       u.focus();
-    }, 0), t2(!1)), () => {
-      window.removeEventListener("mousedown", q, !0);
+    }, 0), n2(!1)), () => {
+      window.removeEventListener("mousedown", L2, !0);
     };
-  }, [F, z]);
-  const X = (u, I) => {
-    d2(u), m2(I);
-  }, f2 = () => {
-    e2(!0), t2(!0);
-  }, s2 = () => {
-    e2(!1), X(void 0, -1), K.current?.querySelector(
-      `#${C}`
+  }, [q, p]);
+  const W = (u, I) => {
+    r2(u), o2(I);
+  }, K = () => {
+    i2(!0), n2(!0);
+  }, e2 = () => {
+    i2(!1), W(void 0, -1), Y.current?.querySelector(
+      `#${k}`
     )?.focus();
-  }, y2 = (u) => {
+  }, z2 = (u) => {
     u = u.toLowerCase();
     let I = !1;
-    for (let E = l2 + 1; E < Z.current.length; E++)
-      if (Z.current[E].label.toLowerCase().startsWith(u)) {
-        X(H.current[E], E), I = !0;
+    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;
         break;
       }
     if (I === !1) {
-      for (let E = 0; E < l2; E++)
-        if (Z.current[E].label.toLowerCase().startsWith(u)) {
-          X(H.current[E], E);
+      for (let E = 0; E < Q; E++)
+        if (B.current[E].label.toLowerCase().startsWith(u)) {
+          W(T.current[E], E);
           break;
         }
     }
-  }, E2 = (u) => {
-    const I = H.current.indexOf(u), E = Z.current[I];
-    E.callback && !E.disabled && E.callback(E), E.linkContent && !E.disabled && K.current?.querySelector(
+  }, u2 = (u) => {
+    const I = T.current.indexOf(u), E = B.current[I];
+    E.callback && !E.disabled && E.callback(E), E.linkContent && !E.disabled && Y.current?.querySelector(
       `#${u} a`
     )?.click();
-  }, j2 = () => {
-    const u = H.current[l2];
-    E2(u);
-  }, $2 = (u) => {
-    F ? s2() : f2(), h && h(), u.stopPropagation(), u.preventDefault();
-  }, T2 = (u) => {
-    E2(u.currentTarget.id), x || s2();
-  }, $ = (u) => {
+  }, 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;
     let E = !1;
     switch (I) {
@@ -2504,538 +2656,564 @@ const t4 = {
       case "Enter":
       case "ArrowDown":
       case "Down": {
-        f2();
-        let B = 0;
-        for (let D = 0; D < Z.current.length; D++)
-          if (!Z.current[D]?.disabled) {
-            B = D;
+        K();
+        let O = 0;
+        for (let $ = 0; $ < B.current.length; $++)
+          if (!B.current[$]?.disabled) {
+            O = $;
             break;
           }
-        X(
-          H.current[B],
-          B
-        ), E = !0, h && h();
+        W(
+          T.current[O],
+          O
+        ), E = !0, m && m();
         break;
       }
       // close menu
       case "Esc":
       case "Escape":
-        s2(), E = !0;
+        e2(), E = !0;
         break;
       // open menu and focus on last menu item
       case "Up":
       case "ArrowUp": {
-        f2();
-        let B = H.current.length - 1;
-        for (let D = H.current.length - 1; D >= 0; D--)
-          if (!Z.current[D]?.disabled) {
-            B = D;
+        K();
+        let O = T.current.length - 1;
+        for (let $ = T.current.length - 1; $ >= 0; $--)
+          if (!B.current[$]?.disabled) {
+            O = $;
             break;
           }
-        X(
-          H.current[B],
-          B
+        W(
+          T.current[O],
+          O
         ), E = !0;
         break;
       }
     }
     E && (u.stopPropagation(), u.preventDefault());
-  }, R = (u) => {
+  }, m2 = (u) => {
     const I = u.key;
-    let E = !1, B = "", D = 0;
-    function G(P) {
-      return P.length === 1 && P.match(/\S/);
+    let E = !1, O = "", $ = 0;
+    function G(x) {
+      return x.length === 1 && x.match(/\S/);
     }
     if (!(u.ctrlKey || u.altKey || u.metaKey)) {
       if (u.shiftKey)
-        G(I) && (y2(I), E = !0), u.key === "Tab" && (s2(), E = !0);
+        G(I) && (z2(I), E = !0), u.key === "Tab" && (e2(), E = !0);
       else
         switch (I) {
           case " ":
           case "Enter":
-            s2(), j2(), E = !0;
+            e2(), f2(), E = !0;
             break;
           case "Esc":
           case "Escape":
-            s2(), E = !0;
+            e2(), E = !0;
             break;
           case "Up":
           case "ArrowUp": {
-            let P = 0;
-            const j = H.current.length;
-            for (D = l2 - 1; P < j && (D < 0 && (D = H.current.length - 1), !!Z.current[D]?.disabled); )
-              D--, P++;
-            B = H.current[D], X(B, D), E = !0;
+            let x = 0;
+            const j = T.current.length;
+            for ($ = Q - 1; x < j && ($ < 0 && ($ = T.current.length - 1), !!B.current[$]?.disabled); )
+              $--, x++;
+            O = T.current[$], W(O, $), E = !0;
             break;
           }
           case "ArrowDown":
           case "Down": {
-            let P = 0;
-            const j = H.current.length;
-            for (D = l2 + 1; P < j && (D > H.current.length - 1 && (D = 0), !!Z.current[D]?.disabled); )
-              D++, P++;
-            B = H.current[D], X(B, D), E = !0;
+            let x = 0;
+            const j = T.current.length;
+            for ($ = Q + 1; x < j && ($ > T.current.length - 1 && ($ = 0), !!B.current[$]?.disabled); )
+              $++, x++;
+            O = T.current[$], W(O, $), E = !0;
             break;
           }
           case "Home":
           case "PageUp": {
-            let P = 0;
-            for (let j = 0; j < Z.current.length; j++)
-              if (!Z.current[j]?.disabled) {
-                P = j;
+            let x = 0;
+            for (let j = 0; j < B.current.length; j++)
+              if (!B.current[j]?.disabled) {
+                x = j;
                 break;
               }
-            X(
-              H.current[P],
-              P
+            W(
+              T.current[x],
+              x
             ), E = !0;
             break;
           }
           case "End":
           case "PageDown": {
-            let P = H.current.length - 1;
-            for (let j = H.current.length - 1; j >= 0; j--)
-              if (!Z.current[j]?.disabled) {
-                P = j;
+            let x = T.current.length - 1;
+            for (let j = T.current.length - 1; j >= 0; j--)
+              if (!B.current[j]?.disabled) {
+                x = j;
                 break;
               }
-            X(
-              H.current[P],
-              P
+            W(
+              T.current[x],
+              x
             ), E = !0;
             break;
           }
           case "Tab":
-            s2();
+            e2();
             break;
           default:
-            G(I) && (y2(I), E = !0);
+            G(I) && (z2(I), E = !0);
             break;
         }
       E && (u.stopPropagation(), u.preventDefault());
     }
-  }, q = (u) => {
-    K.current && !K.current.contains(u.target) && F && s2();
-  }, Y = (u, I, E = "", B = "", ...D) => {
-    const G = E ? `-group-${E}` : "", P = C + G + "-item-" + (I + 1), j = "id" in u && u.id ? u.id : P;
-    if (H2(u))
-      return /* @__PURE__ */ e.createElement("li", { key: j, role: "separator" });
+  }, 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))
       return /* @__PURE__ */ e.createElement(
         "li",
         {
-          key: B,
-          className: `${v}__listbox-heading`,
-          id: B || null,
+          key: O,
+          className: `${w}__listbox-heading`,
+          id: O || null,
           role: "presentation"
         },
         u.label
       );
-    if (n4(u))
+    if (z4(u))
       return /* @__PURE__ */ e.createElement("li", { key: j, role: "presentation" }, u.nodeContent);
-    if (F2(u) || "label" in u && u.label) {
-      H.current.push(j), Z.current.push(u);
-      let h2 = !1;
-      J !== "" && !u.disabled && (h2 = J === j);
-      const n2 = "isCritical" in u && u.isCritical, C2 = "criticalLabel" in u ? u.criticalLabel : void 0;
-      let i2 = [];
-      if ("label" in u && u.label && (i2 = [u.label]), F2(u) && u.linkContent && (i2 = [u.linkContent.props.children]), u.iconName) {
-        const o2 = /* @__PURE__ */ e.createElement(
-          V,
+    if (Z2(u) || "label" in u && u.label) {
+      T.current.push(j), B.current.push(u);
+      let g2 = !1;
+      U !== "" && !u.disabled && (g2 = U === j);
+      const c2 = "isCritical" in u && u.isCritical, M2 = "criticalLabel" in u ? u.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) {
+        const d2 = /* @__PURE__ */ e.createElement(
+          A,
           {
-            key: `icon-${C}`,
+            key: `icon-${k}`,
             iconName: u.iconName,
             iconSize: "m"
           }
         );
-        i2.unshift(o2);
+        a2.unshift(d2);
       }
-      n2 && C2 && i2.unshift(
-        /* @__PURE__ */ e.createElement("span", { key: `critical-${C}`, className: "visually-hidden" }, C2)
+      c2 && M2 && a2.unshift(
+        /* @__PURE__ */ e.createElement("span", { key: `critical-${k}`, className: "visually-hidden" }, M2)
       );
-      let g2;
-      u.description && (g2 = /* @__PURE__ */ e.createElement("span", { className: `${v}__item-description` }, u.description));
-      let v2;
-      if (F2(u) && u.linkContent) {
-        const o2 = u.linkContent, B2 = o2.type;
-        v2 = /* @__PURE__ */ e.createElement(B2, { tabIndex: -1, ...o2.props }, /* @__PURE__ */ e.createElement("span", { className: `${v}__item-label` }, i2), g2);
+      let p2;
+      u.description && (p2 = /* @__PURE__ */ e.createElement("span", { className: `${w}__item-description` }, u.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);
       } else
-        v2 = /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: `${v}__item-label` }, i2), g2);
-      const R2 = b([
-        h2 ? `${v}__item-focused` : null,
-        n2 ? `${v}__item-critical` : null
+        b2 = /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: `${w}__item-label` }, a2), p2);
+      const O2 = v([
+        g2 ? `${w}__item-focused` : null,
+        c2 ? `${w}__item-critical` : null
       ]);
       return /* @__PURE__ */ e.createElement(
         "li",
         {
           key: j,
           "aria-disabled": u.disabled ? !0 : null,
-          className: R2,
+          className: O2,
           "data-testid": u.testId,
           id: j,
-          onClick: T2,
+          onClick: A2,
           role: "menuitem",
           tabIndex: -1,
-          ...D
+          ...$
         },
-        v2
+        b2
       );
     }
-  }, A2 = (u, I) => {
-    const E = [], B = [...I];
-    let D = B.shift(), G = [];
-    return u.map((P, j) => {
-      P !== D ? (G.push(P), j + 1 === u.length && E.push(G)) : (E.push(G), G = [], G.push(P), D = B.shift());
-    }), E.filter((P) => P.length > 0);
-  }, L2 = (u) => {
-    H.current = [], Z.current = [];
+  }, 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());
+    }), E.filter((x) => x.length > 0);
+  }, V = (u) => {
+    T.current = [], B.current = [];
     const I = u, E = u.filter(
-      V2 || H2
-    ), B = E.length > 0;
-    let D = [`${v}__listbox`];
-    if (M && D.push(`${v}__listbox--navbar`), m === "end" && D.push(`${v}__listbox--end`), l === "icon-only" && D.push(`${v}__listbox--icon-only`), D = b(D), B) {
-      const G = A2(u, E);
+      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);
       G.forEach(() => {
-        a2.current.push(T1());
+        s2.current.push(V1());
       });
-      let P = a2.current[0];
+      let x = s2.current[0];
       const j = G[0].findIndex(
-        (n2) => !H2(n2) && !V2(n2)
-      ), h2 = `${C}-group-${P}-item-${j + 1}`;
+        (c2) => !V2(c2) && !F2(c2)
+      ), g2 = `${k}-group-${x}-item-${j + 1}`;
       return /* @__PURE__ */ e.createElement(
         "div",
         {
           ref: L.setFloating,
-          "aria-activedescendant": J !== "" ? J : h2,
-          "aria-labelledby": C,
-          className: D.toString(),
-          id: U,
-          onKeyDown: R,
+          "aria-activedescendant": U !== "" ? U : g2,
+          "aria-labelledby": k,
+          className: $.toString(),
+          id: R,
+          onKeyDown: m2,
           role: "menu",
           style: {
-            visibility: F ? "visible" : "hidden",
-            opacity: F ? "1" : "0",
+            visibility: q ? "visible" : "hidden",
+            opacity: q ? "1" : "0",
             transition: "var(--pds-animation-transition-reveal)",
-            position: y,
-            transform: `translate(${Math.round(w)}px,${Math.round(_)}px)`,
+            position: b,
+            transform: `translate(${Math.round(M)}px,${Math.round(D)}px)`,
             zIndex: "var(--pds-z-index-dropdown)"
           },
           tabIndex: -1
         },
-        G.map((n2, C2) => {
-          P = a2.current[C2];
-          const i2 = "isHeading" in n2[0] && n2[0].isHeading, g2 = i2 ? `${C}-group-${P}-heading` : "", v2 = `${C}-group-${P}`, R2 = i2 ? null : `${d} ${C2 + 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}`;
           return /* @__PURE__ */ e.createElement(
             "ul",
             {
-              key: v2,
-              "aria-label": R2,
-              "aria-labelledby": g2,
+              key: b2,
+              "aria-label": O2,
+              "aria-labelledby": p2,
               role: "group"
             },
-            n2.map((o2, B2) => Y(
-              o2,
-              B2,
-              P,
-              g2
+            c2.map((d2, H2) => C2(
+              d2,
+              H2,
+              x,
+              p2
             ))
           );
         })
       );
     } else {
-      const G = `${C}-item-1`;
+      const G = `${k}-item-1`;
       return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
         "ul",
         {
           ref: L.setFloating,
-          "aria-activedescendant": J !== "" ? J : G,
-          "aria-labelledby": C,
-          className: D.toString(),
-          id: U,
-          onKeyDown: R,
+          "aria-activedescendant": U !== "" ? U : G,
+          "aria-labelledby": k,
+          className: $.toString(),
+          id: R,
+          onKeyDown: m2,
           role: "menu",
           style: {
-            visibility: F ? "visible" : "hidden",
-            opacity: F ? "1" : "0",
+            visibility: q ? "visible" : "hidden",
+            opacity: q ? "1" : "0",
             transition: "var(--pds-animation-transition-reveal)",
-            position: y,
-            transform: `translate(${Math.round(w)}px,${Math.round(_)}px)`
+            position: b,
+            transform: `translate(${Math.round(M)}px,${Math.round(D)}px)`
           },
           tabIndex: -1
         },
-        I.map((P, j) => Y(P, j))
+        I.map((x, j) => C2(x, j))
       ));
     }
   };
-  let r2;
-  if (l === "icon-end" && (r2 = /* @__PURE__ */ e.createElement(
-    I2,
+  let t2;
+  if (a === "icon-end" && (t2 = /* @__PURE__ */ e.createElement(
+    B2,
     {
       ref: L.setReference,
-      "aria-controls": U,
-      "aria-expanded": F,
+      "aria-controls": R,
+      "aria-expanded": q,
       "aria-haspopup": "true",
-      className: `${v}__trigger`,
-      disabled: a,
-      displayType: l,
+      className: `${w}__trigger`,
+      disabled: l,
+      displayType: a,
       iconName: "angleDown",
-      id: C,
-      isSplitButton: c,
+      id: k,
+      isSplitButton: s,
       label: n,
-      onClick: $2,
-      onKeyDown: $,
-      size: p,
+      onClick: N2,
+      onKeyDown: S2,
+      size: h,
       type: "button",
-      variant: g
+      variant: f
     }
-  )), l === "icon-only") {
-    const u = W2(n);
-    r2 = /* @__PURE__ */ e.createElement(
-      _2,
+  )), a === "icon-only") {
+    const u = Y2(n);
+    t2 = /* @__PURE__ */ e.createElement(
+      I2,
       {
         ref: L.setReference,
-        "aria-controls": U,
-        "aria-expanded": F,
+        "aria-controls": R,
+        "aria-expanded": q,
         "aria-haspopup": "true",
         ariaLabel: u,
-        className: `${v}__trigger ${v}__trigger--icon-only`,
-        disabled: a,
+        className: `${w}__trigger ${w}__trigger--icon-only`,
+        disabled: l,
         hasTooltip: !1,
-        iconName: s,
-        id: C,
-        onClick: $2,
-        onKeyDown: $,
-        size: p,
+        iconName: c,
+        id: k,
+        onClick: N2,
+        onKeyDown: S2,
+        size: h,
         type: "button",
         variant: "standard"
       }
     );
   }
-  const z1 = (u) => {
+  const w2 = (u) => {
     const I = u.target;
-    I.classList.toggle(`${v}__toggle--expanded`), I.setAttribute(
+    I.classList.toggle(`${w}__toggle--expanded`), I.setAttribute(
       "aria-expanded",
       I.getAttribute("aria-expanded") === "true" ? "false" : "true"
-    ), I.nextElementSibling.classList.toggle(`${v}__mobile-menu--expanded`);
-  }, f1 = () => /* @__PURE__ */ e.createElement("ul", { className: `${v}__mobile-menu`, role: "menu" }, i.map((u, I) => Y(u, I)));
+    ), 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)));
   let J2;
-  const L1 = l === "icon-end" ? "pds-button pds-button--navbar" : null, C1 = b([
-    `${v}__toggle`,
-    L1
+  const b1 = a === "icon-end" ? "pds-button pds-button--navbar" : null, E1 = v([
+    `${w}__toggle`,
+    b1
   ]);
-  x && (J2 = /* @__PURE__ */ e.createElement(
+  _ && (J2 = /* @__PURE__ */ e.createElement(
     "button",
     {
       "aria-expanded": !1,
-      className: C1,
-      disabled: a,
-      id: C,
-      onClick: z1,
+      className: E1,
+      disabled: l,
+      id: k,
+      onClick: w2,
       type: "button"
     },
-    l === "icon-only" ? /* @__PURE__ */ e.createElement("span", { className: `${v}__icon-label` }, /* @__PURE__ */ e.createElement(V, { iconName: s }), " ", n) : n,
+    a === "icon-only" ? /* @__PURE__ */ e.createElement("span", { className: `${w}__icon-label` }, /* @__PURE__ */ e.createElement(A, { iconName: c }), " ", n) : n,
     /* @__PURE__ */ e.createElement(
-      V,
+      A,
       {
-        className: `${v}__toggle-icon ${v}__toggle-icon--${l}`,
+        className: `${w}__toggle-icon ${w}__toggle-icon--${a}`,
         iconName: "angleDown",
         iconSize: "m"
       }
     )
   ));
-  const v1 = J2, w1 = F ? `${v}--expanded` : null;
+  const y1 = J2, $1 = q ? `${w}--expanded` : null;
   return /* @__PURE__ */ e.createElement(
     "span",
     {
-      ref: K,
-      className: b([
-        v,
-        N,
-        T,
-        w1,
+      ref: Y,
+      className: v([
+        w,
+        y,
+        S,
+        $1,
         t
       ]),
-      "data-testid": f,
-      ...o
+      "data-testid": z,
+      ...g
     },
-    x ? /* @__PURE__ */ e.createElement(e.Fragment, null, v1, /* @__PURE__ */ e.createElement(f1, null)) : /* @__PURE__ */ e.createElement(e.Fragment, null, r2, L2(i))
+    _ ? /* @__PURE__ */ e.createElement(e.Fragment, null, y1, /* @__PURE__ */ e.createElement(M1, null)) : /* @__PURE__ */ e.createElement(e.Fragment, null, t2, V(r))
   );
-}, x4 = ({
+}, F4 = ({
   className: t,
-  defaultValue: a,
-  disabled: l = !1,
-  id: s,
-  label: r,
-  onChange: c,
+  defaultValue: l,
+  disabled: a = !1,
+  id: c,
+  label: i,
+  onChange: s,
   options: n,
-  size: i = "s",
-  value: m,
-  ...h
+  size: r = "s",
+  value: o,
+  ...m
 }) => {
-  const p = "pds-segmented-button", f = l ? "pds-is-disabled" : null, d = `${p}--${i}`, g = i === "s" ? "s" : "m", M = typeof m < "u", o = typeof a < "u", [z, L] = O(
-    o ? a : ""
-  ), y = (w) => {
-    L(w.target.value), c && c(w.target.value);
+  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);
   };
   if (n.length >= 2 && n.length <= 6)
     return /* @__PURE__ */ e.createElement(
       "fieldset",
       {
-        className: b([
-          p,
+        className: v([
+          h,
           d,
-          f,
+          z,
           t ?? ""
         ]),
-        ...h
+        ...m
       },
-      /* @__PURE__ */ e.createElement("legend", { className: "visually-hidden" }, r),
-      /* @__PURE__ */ e.createElement("div", { className: `${p}__options` }, n.map((w, _) => {
-        const k = M ? m === w.value : z === w.value, S = `${p}__option`, x = k ? `${S}--checked` : null;
+      /* @__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;
         return /* @__PURE__ */ e.createElement(
           "div",
           {
-            key: `${s}-option-${_}`,
-            className: b([S, x])
+            key: `${c}-option-${D}`,
+            className: v([P, _])
           },
           /* @__PURE__ */ e.createElement(
             "input",
             {
-              checked: k,
+              checked: N,
               className: "visually-hidden",
-              disabled: l || w.disabled,
-              id: w.id ? w.id : `${s}-option-${_}`,
-              name: s,
-              onChange: y,
+              disabled: a || M.disabled,
+              id: M.id ? M.id : `${c}-option-${D}`,
+              name: c,
+              onChange: b,
               type: "radio",
-              value: w.value
+              value: M.value
             }
           ),
           /* @__PURE__ */ e.createElement(
             "label",
             {
-              htmlFor: w.id ? w.id : `${s}-option-${_}`,
-              title: w.label
+              htmlFor: M.id ? M.id : `${c}-option-${D}`,
+              title: M.label
             },
-            w.iconName && /* @__PURE__ */ e.createElement(
-              V,
+            M.iconName && /* @__PURE__ */ e.createElement(
+              A,
               {
-                className: `${p}__icon`,
-                iconName: w.iconName,
-                iconSize: g
+                className: `${h}__icon`,
+                iconName: M.iconName,
+                iconSize: f
               }
             ),
-            /* @__PURE__ */ e.createElement("span", { className: `${p}__label-text` }, w.label),
-            w.tally && /* @__PURE__ */ e.createElement(
+            /* @__PURE__ */ e.createElement("span", { className: `${h}__label-text` }, M.label),
+            M.tally && /* @__PURE__ */ e.createElement(
               d1,
               {
-                className: `${p}__tally`,
-                label: w.tally.label,
-                type: w.tally.type
+                className: `${h}__tally`,
+                label: M.tally.label,
+                type: M.tally.type
               }
             )
           )
         );
       }))
     );
-}, d4 = ({
+}, v4 = ({
   actionItems: t,
-  className: a,
-  disabled: l,
-  id: s,
-  moreActionsLabel: r = "More actions",
-  size: c = "s",
+  className: l,
+  disabled: a,
+  id: c,
+  moreActionsLabel: i = "More actions",
+  size: s = "s",
   variant: n = "primary",
-  ...i
+  ...r
 }) => {
-  const m = "pds-split-button", h = `${m}--${n}`, p = t[0], f = t.slice(1);
+  const o = "pds-split-button", m = `${o}--${n}`, h = t[0], z = t.slice(1);
   let d = null;
-  return "isLink" in p && p.isLink === !0 ? d = /* @__PURE__ */ e.createElement(
-    l4,
+  return "isLink" in h && h.isLink === !0 ? d = /* @__PURE__ */ e.createElement(
+    g4,
     {
-      className: `${m}__primary-action`,
-      disabled: l,
+      className: `${o}__primary-action`,
+      disabled: a,
       displayType: "label-only",
-      linkContent: p.linkContent,
-      size: c,
+      linkContent: h.linkContent,
+      size: s,
       variant: n
     }
-  ) : "label" in p && (d = /* @__PURE__ */ e.createElement(
-    I2,
+  ) : "label" in h && (d = /* @__PURE__ */ e.createElement(
+    B2,
     {
-      className: `${m}__primary-action`,
-      disabled: l,
-      label: p.label,
-      onClick: () => p.callback(),
-      size: c,
+      className: `${o}__primary-action`,
+      disabled: a,
+      label: h.label,
+      onClick: () => h.callback(),
+      size: s,
       variant: n
     }
   )), /* @__PURE__ */ e.createElement(
     "span",
     {
-      className: b([m, h, a]),
-      id: s,
-      ...i
+      className: v([o, m, l]),
+      id: c,
+      ...r
     },
     d,
     /* @__PURE__ */ e.createElement(
-      o4,
+      C4,
       {
         isSplitButton: !0,
-        className: `${m}__menu-button`,
-        disabled: l,
+        className: `${o}__menu-button`,
+        disabled: a,
         displayType: "icon-end",
-        id: `${s}-menu`,
-        label: r,
-        menuItems: f,
-        size: c,
+        id: `${c}-menu`,
+        label: i,
+        menuItems: z,
+        size: s,
         testId: null,
         variant: n,
         withinNavbar: !1
       }
     )
   );
-}, m4 = ({
+}, w4 = {
+  drupal: "Drupal",
+  drupal7: "Drupal 7",
+  "front-end-sites": "Next.js and Gatsby",
+  gatsby: "Gatsby",
+  "gatsby-wp": "Gatsby and WordPress",
+  google: "Google",
+  "import-custom": "Add custom",
+  microsoft: "Microsoft",
+  next: "Next.js",
+  "next-drupal": "Next.js and Drupal",
+  "next-wp": "Next.js and WordPress",
+  splunk: "Splunk",
+  "sumo-logic": "Sumo Logic",
+  wordpress: "WordPress"
+}, M4 = ({
   className: t,
-  iconSize: a = "2xl",
-  platformType: l,
-  ...s
+  iconSize: l = "2xl",
+  platformType: a,
+  ...c
 }) => {
-  const r = "pds-platform-icon", c = `pds-platform-icon--${l}`, n = `pds-platform-icon--${a}`;
-  let i;
-  if (["front-end-sites", "gatsby-wp", "next-drupal", "next-wp"].includes(l)) {
-    let h = [];
-    switch (l) {
+  const i = "pds-platform-icon", s = `pds-platform-icon--${a}`, n = `pds-platform-icon--${l}`;
+  let r;
+  if (["front-end-sites", "gatsby-wp", "next-drupal", "next-wp"].includes(a)) {
+    let m = [];
+    switch (a) {
       case "front-end-sites":
-        h = ["next", "gatsby"];
+        m = ["next", "gatsby"];
         break;
       case "next-drupal":
-        h = ["next", "drupal"];
+        m = ["next", "drupal"];
         break;
       case "gatsby-wp":
-        h = ["gatsby", "wordpress"];
+        m = ["gatsby", "wordpress"];
         break;
       case "next-wp":
-        h = ["next", "wordpress"];
+        m = ["next", "wordpress"];
         break;
     }
-    i = /* @__PURE__ */ e.createElement("span", { className: `${r}__group` }, Z2[h[0]], Z2[h[1]]);
+    r = /* @__PURE__ */ e.createElement(
+      "span",
+      {
+        "aria-label": w4[a],
+        className: `${i}__group`,
+        role: "img"
+      },
+      _2(q2[m[0]], { "aria-hidden": "true" }),
+      _2(q2[m[1]], { "aria-hidden": "true" })
+    );
   } else
-    i = Z2[l];
+    r = q2[a];
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: b([r, c, n, t]),
-      ...s
+      className: v([i, s, n, t]),
+      ...c
     },
-    i
+    r
   );
-}, Z2 = {
+}, q2 = {
   drupal: /* @__PURE__ */ e.createElement(
     "svg",
     {
+      "aria-label": "Drupal",
       fill: "none",
       height: "32",
+      role: "img",
       viewBox: "0 0 32 32",
       width: "32",
       xmlns: "http://www.w3.org/2000/svg"
@@ -3060,8 +3238,10 @@ const t4 = {
   drupal7: /* @__PURE__ */ e.createElement(
     "svg",
     {
+      "aria-label": "Drupal 7",
       fill: "none",
       height: "32",
+      role: "img",
       viewBox: "0 0 32 32",
       width: "32",
       xmlns: "http://www.w3.org/2000/svg"
@@ -3086,8 +3266,10 @@ const t4 = {
   wordpress: /* @__PURE__ */ e.createElement(
     "svg",
     {
+      "aria-label": "WordPress",
       fill: "none",
       height: "32",
+      role: "img",
       viewBox: "0 0 32 32",
       width: "32",
       xmlns: "http://www.w3.org/2000/svg"
@@ -3111,8 +3293,10 @@ const t4 = {
   gatsby: /* @__PURE__ */ e.createElement(
     "svg",
     {
+      "aria-label": "Gatsby",
       fill: "none",
       height: "32",
+      role: "img",
       viewBox: "0 0 32 32",
       width: "32",
       xmlns: "http://www.w3.org/2000/svg"
@@ -3141,8 +3325,10 @@ const t4 = {
   google: /* @__PURE__ */ e.createElement(
     "svg",
     {
+      "aria-label": "Google",
       fill: "none",
       height: "30",
+      role: "img",
       viewBox: "0 0 30 30",
       width: "30",
       xmlns: "http://www.w3.org/2000/svg"
@@ -3179,8 +3365,10 @@ const t4 = {
   microsoft: /* @__PURE__ */ e.createElement(
     "svg",
     {
+      "aria-label": "Microsoft",
       fill: "none",
       height: "30",
+      role: "img",
       viewBox: "0 0 30 30",
       width: "30",
       xmlns: "http://www.w3.org/2000/svg"
@@ -3191,8 +3379,10 @@ const t4 = {
   next: /* @__PURE__ */ e.createElement(
     "svg",
     {
+      "aria-label": "Next.js",
       fill: "none",
       height: "32",
+      role: "img",
       viewBox: "0 0 180 180",
       width: "32",
       xmlns: "http://www.w3.org/2000/svg"
@@ -3255,8 +3445,10 @@ const t4 = {
   splunk: /* @__PURE__ */ e.createElement(
     "svg",
     {
+      "aria-label": "Splunk",
       fill: "none",
       height: "32",
+      role: "img",
       viewBox: "0 0 32 32",
       width: "32",
       xmlns: "http://www.w3.org/2000/svg"
@@ -3272,8 +3464,10 @@ const t4 = {
   "sumo-logic": /* @__PURE__ */ e.createElement(
     "svg",
     {
+      "aria-label": "Sumo Logic",
       fill: "none",
       height: "32",
+      role: "img",
       viewBox: "0 0 32 32",
       width: "32",
       xmlns: "http://www.w3.org/2000/svg"
@@ -3289,8 +3483,10 @@ const t4 = {
   "import-custom": /* @__PURE__ */ e.createElement(
     "svg",
     {
+      "aria-label": "Add custom",
       fill: "none",
       height: "32",
+      role: "img",
       viewBox: "0 0 32 32",
       width: "32",
       xmlns: "http://www.w3.org/2000/svg"
@@ -3304,644 +3500,681 @@ const t4 = {
       }
     )
   )
-}, N4 = ({
+}, Z4 = ({
   buttonType: t = "button",
-  className: a = "",
-  disabled: l = !1,
-  label: s,
-  onClick: r,
-  platform: c,
+  className: l = "",
+  disabled: a = !1,
+  label: c,
+  onClick: i,
+  platform: s,
   size: n = "m",
-  ...i
+  ...r
 }) => {
-  const m = "pds-sso-button", h = `${m}--${n}`, p = n === "m" ? "l" : "2xl", f = /* @__PURE__ */ e.createElement(
-    m4,
+  const o = "pds-sso-button", m = `${o}--${n}`, h = n === "m" ? "l" : "2xl", z = /* @__PURE__ */ e.createElement(
+    M4,
     {
-      className: `${m}__icon`,
-      iconSize: p,
-      platformType: c
+      className: `${o}__icon`,
+      iconSize: h,
+      platformType: s
     }
   );
   return /* @__PURE__ */ e.createElement(
     "button",
     {
-      className: b([m, h, a]),
-      disabled: l,
-      onClick: r,
+      className: v([o, m, l]),
+      disabled: a,
+      onClick: i,
       type: t,
-      ...i
+      ...r
     },
-    f,
-    s
+    z,
+    c
   );
-}, S4 = ({
+}, q4 = ({
   buttonProps: t,
-  className: a,
-  disabled: l = !1,
-  hasBorder: s = !1,
-  iconName: r,
-  iconPosition: c = "before",
+  className: l,
+  disabled: a = !1,
+  hasBorder: c = !1,
+  iconName: i,
+  iconPosition: s = "before",
   isCritical: n = !1,
-  isLoading: i,
-  isMonospace: m = !1,
-  isWorking: h,
-  label: p,
-  linkContent: f,
+  isLoading: r,
+  isMonospace: o = !1,
+  isWorking: m,
+  label: h,
+  linkContent: z,
   onClick: d,
-  tooltipText: g,
-  ...M
+  tooltipText: f,
+  ...C
 }) => {
-  const o = "pds-utility-button", z = i ? "pds-pulse" : null, L = (v) => r && !h ? /* @__PURE__ */ e.createElement(V, { key: v, className: `${o}__icon`, iconName: r }) : null, y = () => h ? /* @__PURE__ */ e.createElement(
-    S2,
+  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,
     {
       key: "spinner",
-      className: `${o}__spinner`,
+      className: `${g}__spinner`,
       colorType: "monochromatic",
       size: "s"
     }
-  ) : null, w = (v) => {
-    const T = [];
-    return c === "before" && T.push(L("icon-before")), T.push(y()), T.push(
-      /* @__PURE__ */ e.createElement("span", { key: "label", className: `${o}__label` }, v)
-    ), c === "after" && T.push(L("icon-after")), T.filter(Boolean);
-  }, _ = f && z2(f) ? f.props.children : p, k = b([
-    o,
-    s ? `${o}--border` : null,
-    n ? `${o}--critical` : null,
-    l ? `${o}--disabled` : null,
-    i ? `${o}--loading` : null,
-    h ? `${o}--working` : null,
-    m ? `${o}--monospace` : null,
-    a ?? ""
-  ]), S = (v) => g ? /* @__PURE__ */ e.createElement(N2, { content: g, customTrigger: v }) : v;
-  if (f && !l) {
-    const v = z2(f) ? n1(
-      f,
-      Object.assign({}, f.props, {
-        className: b([
-          `${o}__button`,
-          z,
-          f.props.className ?? ""
+  ) : null, M = (w) => {
+    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,
+    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, {
+        className: v([
+          `${g}__button`,
+          p,
+          z.props.className ?? ""
         ]),
-        children: w(_)
+        children: M(D)
       })
     ) : null;
-    return /* @__PURE__ */ e.createElement("div", { className: k, ...M }, S(v));
+    return /* @__PURE__ */ e.createElement("div", { className: N, ...C }, P(w));
   }
-  const x = /* @__PURE__ */ e.createElement(
+  const _ = /* @__PURE__ */ e.createElement(
     "button",
     {
-      "aria-disabled": l || i || h,
-      className: b([`${o}__button`, z]),
-      onClick: l ? void 0 : d,
+      "aria-disabled": a || r || m,
+      className: v([`${g}__button`, p]),
+      onClick: a ? void 0 : d,
       type: "button",
       ...t
     },
-    w(_)
+    M(D)
   );
-  return /* @__PURE__ */ e.createElement("div", { className: k, ...M }, S(x));
-}, h4 = ({
-  disabled: t,
-  dropTargetDirection: a,
-  focusedIndex: l,
-  index: s,
-  isDragging: r,
-  isSortable: c,
-  onDragEnd: n,
-  onDragOver: i,
-  onDragStart: m,
-  onKeyboardMove: h,
-  onRemove: p,
-  setFocusedIndex: f,
-  tag: d,
-  totalTags: g,
-  translationStrings: M
-}) => {
-  const o = Q(null), z = "pds-tags-input__tag";
-  c2(() => {
-    l === s && o.current && o.current.focus();
-  }, [l, s]);
-  const L = (C) => {
-    if (!c || !o.current) return;
-    const U = window.getComputedStyle(
-      o.current.closest(".pds-tags-input") || document.documentElement
-    ), A = U.getPropertyValue("--tag-hover-background").trim(), K = U.getPropertyValue("--tag-text-hover-color").trim(), F = U.getPropertyValue("--tag-selected-outline").trim(), e2 = o.current.style.backgroundColor, W = o.current.style.color, t2 = o.current.style.outline, J = o.current.style.outlineOffset;
-    o.current.style.backgroundColor = A, o.current.style.color = K, o.current.style.outline = F, o.current.style.outlineOffset = "-1px", o.current.offsetHeight, C.dataTransfer.effectAllowed = "move", C.dataTransfer.setData("text/html", C.currentTarget.innerHTML), setTimeout(() => {
-      o.current && (o.current.style.backgroundColor = e2, o.current.style.color = W, o.current.style.outline = t2, o.current.style.outlineOffset = J, o.current.classList.add(`${z}--dragging`));
-    }, 0), m(d.id);
-  }, y = (C) => {
-    if (!c || !o.current) return;
-    C.preventDefault(), C.dataTransfer.dropEffect = "move";
-    const U = o.current.getBoundingClientRect(), A = C.clientX, K = U.left + U.width / 2, F = A < K ? "before" : "after";
-    i(d.id, F);
-  }, w = (C) => {
-    if (!t) {
-      if (c) {
-        if ((C.key === "ArrowLeft" || C.key === "ArrowUp") && C.shiftKey && s > 0) {
-          C.preventDefault(), h(s, s - 1), f(s - 1);
-          return;
-        } else if ((C.key === "ArrowRight" || C.key === "ArrowDown") && C.shiftKey && s < g - 1) {
-          C.preventDefault(), h(s, s + 1), f(s + 1);
-          return;
-        }
-      }
-      C.key === "Delete" ? (C.preventDefault(), p(d.id), s > 0 && f(s - 1)) : C.key === "ArrowLeft" && !C.shiftKey && s > 0 ? (C.preventDefault(), f(s - 1)) : C.key === "ArrowRight" && !C.shiftKey && s < g - 1 && (C.preventDefault(), f(s + 1));
-    }
-  }, _ = String(s + 1), k = String(g), S = c ? M.tagAriaLabel : M.tagAriaLabelSimple, x = `${d.value}, ${S.replace("{index}", _).replace("{total}", k)}`, v = r ? `${z}--dragging` : null, T = t ? p2.disabled : null, N = a ? `${z}--drop-target-${a}` : null;
-  return /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      ref: o,
-      "aria-label": x,
-      className: b([
-        z,
-        v,
-        T,
-        N
-      ]),
-      draggable: c && !t,
-      onDragEnd: c ? n : void 0,
-      onDragOver: c ? y : void 0,
-      onDragStart: c ? L : void 0,
-      onKeyDown: w,
-      role: "button",
-      tabIndex: t ? -1 : 0
+  return /* @__PURE__ */ e.createElement("div", { className: N, ...C }, P(_));
+}, G4 = P2(
+  ({
+    className: t,
+    counterMaxLength: l,
+    defaultValue: a,
+    disabled: c = !1,
+    id: i,
+    inputWidth: s,
+    isResizable: n = !0,
+    label: r,
+    message: o,
+    onBlur: m,
+    onChange: h,
+    onFocus: z,
+    placeholder: d,
+    readonly: f = !1,
+    required: C = !1,
+    rows: g = 5,
+    showLabel: p,
+    size: L = "s",
+    textareaProps: b,
+    tooltipText: M = null,
+    translationStrings: D = {
+      clearButton: "Clear input text",
+      counterOverLimit: "Character limit exceeded by",
+      searchShortcut: "Press / to focus the search field",
+      visibilityStatus: "The value of the input is",
+      visibilityToggleHide: "Hide input value",
+      visibilityToggleShow: "Show input value"
     },
-    c && /* @__PURE__ */ e.createElement("span", { "aria-hidden": "true", className: `${z}-grip` }, /* @__PURE__ */ e.createElement(V, { iconName: "gripDotsVertical", iconSize: "s" })),
-    /* @__PURE__ */ e.createElement("span", { className: `${z}-text` }, d.value),
-    /* @__PURE__ */ e.createElement(
-      "button",
+    validationMessage: N,
+    validationStatus: P,
+    value: _,
+    ...w
+  }, 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);
+    };
+    return /* @__PURE__ */ e.createElement(
+      "div",
       {
-        "aria-label": M.tagRemove.replace("{value}", d.value),
-        className: `${z}-remove`,
-        disabled: t,
-        onClick: (C) => {
-          C.stopPropagation(), p(d.id);
-        },
-        tabIndex: 0,
-        type: "button"
+        className: v([
+          X.base,
+          k,
+          Z,
+          F,
+          Y,
+          q,
+          i2,
+          n2,
+          t ?? ""
+        ]),
+        style: s ? y : null,
+        ...w
       },
-      /* @__PURE__ */ e.createElement(
-        V,
+      /* @__PURE__ */ e.createElement("div", { className: `${k}__inputlabel-wrapper` }, /* @__PURE__ */ e.createElement(
+        z1,
         {
-          className: `${z}-remove-icon`,
-          iconName: "xmark",
-          iconSize: "m"
+          className: `${k}__inputlabel`,
+          disabled: c,
+          id: i,
+          label: r,
+          required: C,
+          showLabel: p,
+          tooltipText: M
+        }
+      ), l && /* @__PURE__ */ e.createElement(
+        C1,
+        {
+          currentLength: T.length,
+          id: i,
+          maxLength: l,
+          overLimitMessage: D.counterOverLimit
+        }
+      )),
+      /* @__PURE__ */ e.createElement("div", { className: `${k}__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,
+          readOnly: f,
+          required: C,
+          rows: g,
+          value: r2 ? _ : o2,
+          ...b
+        }
+      )),
+      U && /* @__PURE__ */ e.createElement(
+        f1,
+        {
+          validationMessageHasDecorators: !0,
+          hasValidationMessage: !!N,
+          id: i,
+          message: U,
+          validationStatus: P
         }
       )
-    )
-  );
-}, I4 = k2(
+    );
+  }
+), b4 = () => /* @__PURE__ */ e.createElement("div", { className: "pds-text-input__url-prefix" }, "https://"), W4 = P2(
   ({
-    addMorePlaceholder: t = "Add another",
-    className: a,
-    disabled: l = !1,
-    id: s,
-    inputMinHeight: r = 80,
-    inputWidth: c,
-    isSortable: n = !1,
-    label: i,
-    message: m,
-    onChange: h,
-    placeholder: p,
-    required: f = !1,
-    showLabel: d = !0,
-    tags: g,
-    tooltipText: M = null,
-    translationStrings: o = {
-      inputInstructions: "Type a tag name and press Enter to add. Press Backspace on empty input to remove last tag. Press left arrow on empty input to navigate to tags.",
-      tagAriaLabel: "tag {index} of {total}. Press Shift plus arrow keys to reorder, Delete to remove.",
-      tagAriaLabelSimple: "tag {index} of {total}. Press Delete to remove.",
-      tagRemove: "Remove {value}",
-      tagsListLabel: "Current tags"
+    autoComplete: t,
+    className: l,
+    counterMaxLength: a,
+    defaultValue: c,
+    disabled: i = !1,
+    hasClearButton: s = !1,
+    hasSearchShortcut: n = !1,
+    hasUrlPrefix: r = !1,
+    id: o,
+    inputProps: m,
+    inputWidth: h,
+    label: z,
+    message: d,
+    onBlur: f,
+    onChange: C,
+    onClear: g,
+    onFocus: p,
+    placeholder: L,
+    readonly: b = !1,
+    required: M = !1,
+    searchIcon: D = "search",
+    showLabel: N = !0,
+    showVisibilityToggle: P = !1,
+    size: _ = "s",
+    tooltipText: w = null,
+    translationStrings: S = {
+      clearButton: "Clear input text",
+      counterOverLimit: "Character limit exceeded by",
+      searchShortcut: "Press / to focus the search field",
+      visibilityStatus: "The value of the input is",
+      visibilityToggleHide: "Hide input value",
+      visibilityToggleShow: "Show input value"
     },
-    validationMessage: z,
-    validationStatus: L,
-    ...y
-  }, w) => {
-    const _ = K1(c), k = "pds-tags-input", S = l ? p2.disabled : null, x = f && !l ? p2.required : null, v = L === "error" ? p2.error : null, T = L === "success" ? p2.success : null, N = z || m, [C, U] = O(""), [A, K] = O(null), [F, e2] = O(null), [W, t2] = O(null), [J, d2] = O(null), [l2, m2] = O(""), a2 = Q(null), H = g.length > 0 ? t : p, Z = ($) => {
-      m2($), setTimeout(() => m2(""), 1e3);
-    }, X = ($) => {
-      h($);
-    }, f2 = ($) => {
-      K($);
-    }, s2 = () => {
-      K(null), e2(null), t2(null);
-    }, y2 = ($, R) => {
-      A === null || A === $ || (e2($), t2(R));
-    }, E2 = ($) => {
-      if ($.preventDefault(), A === null || F === null || W === null)
-        return;
-      const R = g.findIndex((r2) => r2.id === A), q = g.findIndex((r2) => r2.id === F);
-      if (R === -1 || q === -1) return;
-      const Y = [...g], [A2] = Y.splice(R, 1);
-      let L2 = q;
-      W === "after" ? L2 = R < q ? q : q + 1 : L2 = (R < q, q), Y.splice(L2, 0, A2), X(Y), Z("Tag reordered"), K(null), e2(null), t2(null);
-    }, j2 = ($, R) => {
-      const q = [...g], [Y] = q.splice($, 1);
-      q.splice(R, 0, Y), Z(
-        `${Y.value} moved to position ${R + 1} of ${g.length}`
-      ), X(q);
-    }, $2 = ($) => {
-      const R = g.find((Y) => Y.id === $), q = g.filter((Y) => Y.id !== $);
-      X(q), R && Z(`${R.value} removed`), setTimeout(() => {
-        a2.current && a2.current.focus();
-      }, 0);
-    }, T2 = ($) => {
-      if (!l)
-        if ($.key === "Enter" && C.trim()) {
-          $.preventDefault();
-          const R = {
-            id: Date.now().toString(),
-            value: C.trim()
-          };
-          X([...g, R]), Z(`${C.trim()} added`), U("");
-        } else if ($.key === "Backspace" && !C && g.length > 0) {
-          const R = g[g.length - 1];
-          X(g.slice(0, -1)), Z(`${R.value} removed`);
-        } else $.key === "ArrowLeft" && !C && g.length > 0 && ($.preventDefault(), d2(g.length - 1));
+    type: y = "text",
+    validationMessage: k,
+    validationStatus: R,
+    value: F,
+    ...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,
+          target: {
+            ...V.target,
+            value: t2
+          }
+        };
+        f && f(w2);
+      } else f && f(V);
+    }, A2 = (V) => {
+      if (r && y === "url") {
+        const t2 = l1(V.target.value), w2 = {
+          ...V,
+          target: {
+            ...V.target,
+            value: t2
+          }
+        };
+        K || u2(t2), C && C(w2);
+      } 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 = () => {
+      L2((t2) => !t2);
+      const V = document.getElementById(o);
+      V && V.focus();
     };
-    return /* @__PURE__ */ e.createElement(
+    let v2 = y;
+    return P && y === "password" && (m2 ? v2 = "text" : v2 = "password"), /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: b([
-          p2.base,
-          k,
-          S,
-          x,
-          v,
+        className: v([
+          X.base,
+          Z,
+          s2,
+          n2,
+          U,
+          r2,
+          Q,
+          o2,
           T,
-          a ?? ""
+          l ?? ""
         ]),
-        style: c ? _ : null,
-        ...y
+        style: h ? i2 : null,
+        ...Y
       },
       /* @__PURE__ */ e.createElement(
-        X1,
+        z1,
         {
-          disabled: l,
-          id: s,
-          label: i,
-          required: f,
-          showLabel: d,
-          tooltipText: M
+          disabled: i,
+          id: o,
+          label: z,
+          required: M,
+          showLabel: N,
+          tooltipText: w
         }
       ),
-      /* @__PURE__ */ e.createElement("div", { "aria-atomic": "true", "aria-live": "polite", className: "visually-hidden" }, l2),
+      P && y === "password" && /* @__PURE__ */ e.createElement("div", { "aria-live": "polite", className: "visually-hidden" }, `${S.visibilityStatus} ${m2 ? "visible" : "hidden"}.`),
       /* @__PURE__ */ e.createElement(
         "div",
         {
-          "aria-labelledby": `${s}-label`,
-          className: `${k}__input-wrapper`,
-          role: "group",
-          style: { minHeight: `${r}px` }
+          className: `${Z}__input-wrapper ${r && y === "url" ? `${Z}__input-wrapper--has-prefix` : ""}`
         },
-        g.length > 0 && /* @__PURE__ */ e.createElement(
-          "div",
+        B && /* @__PURE__ */ e.createElement(L1, { variant: B }),
+        r && y === "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,
+            id: o,
+            name: o,
+            onBlur: N2,
+            onChange: A2,
+            onFocus: p,
+            placeholder: L,
+            readOnly: b,
+            required: M,
+            type: v2,
+            value: K ? F : z2,
+            ...m
+          }
+        ),
+        s && f2 && /* @__PURE__ */ e.createElement(
+          o4,
+          {
+            clearLabel: S.clearButton,
+            handleClearInput: S2,
+            id: o
+          }
+        ),
+        P && y === "password" && /* @__PURE__ */ e.createElement(
+          "button",
           {
-            "aria-label": o.tagsListLabel,
-            className: `${k}__tags`,
-            onDrop: n ? E2 : void 0,
-            role: "list"
+            "aria-controls": o,
+            className: `${Z}__visibility-toggle`,
+            onClick: C2,
+            onMouseDown: (V) => V.preventDefault(),
+            title: m2 ? S.visibilityToggleHide : S.visibilityToggleShow,
+            type: "button"
           },
-          g.map(($, R) => {
-            let q = null;
-            return A && A !== $.id && (F === $.id && W === "before" ? q = "before" : F === $.id && W === "after" && R === g.length - 1 ? q = "after" : R > 0 && F === g[R - 1].id && W === "after" && (q = "before")), /* @__PURE__ */ e.createElement("div", { key: $.id, role: "listitem" }, /* @__PURE__ */ e.createElement(
-              h4,
-              {
-                disabled: l,
-                dropTargetDirection: q,
-                focusedIndex: J,
-                index: R,
-                isDragging: A === $.id,
-                isSortable: n,
-                onDragEnd: s2,
-                onDragOver: y2,
-                onDragStart: f2,
-                onKeyboardMove: j2,
-                onRemove: $2,
-                setFocusedIndex: d2,
-                tag: $,
-                totalTags: g.length,
-                translationStrings: o
-              }
-            ));
-          })
+          /* @__PURE__ */ e.createElement(A, { iconName: m2 ? "eyeSlash" : "eye", iconSize: "m" })
         ),
-        /* @__PURE__ */ e.createElement(
-          "input",
+        n && y === "search" && !f2 && /* @__PURE__ */ e.createElement(
+          r4,
           {
-            ref: ($) => {
-              a2.current = $, typeof w == "function" ? w($) : w && (w.current = $);
-            },
-            "aria-describedby": `${s}__instructions`,
-            "aria-invalid": L === "error" ? !0 : null,
-            className: `${k}__input`,
-            disabled: l,
-            id: s,
-            name: s,
-            onChange: ($) => U($.target.value),
-            onKeyDown: T2,
-            placeholder: H,
-            required: f,
-            type: "text",
-            value: C
+            inputId: o,
+            shortcutLabel: S.searchShortcut
           }
         ),
-        /* @__PURE__ */ e.createElement("div", { className: "visually-hidden", id: `${s}__instructions` }, o.inputInstructions)
+        a && y !== "password" && /* @__PURE__ */ e.createElement(
+          C1,
+          {
+            currentLength: f2.length,
+            id: o,
+            maxLength: a,
+            overLimitMessage: S.counterOverLimit
+          }
+        )
       ),
-      N && /* @__PURE__ */ e.createElement(
-        Y1,
+      W && /* @__PURE__ */ e.createElement(
+        f1,
         {
-          hasValidationMessage: !!z,
-          id: s,
-          message: N,
+          hasValidationMessage: !!k,
+          id: o,
+          message: W,
           validationMessageHasDecorators: !1,
-          validationStatus: L
+          validationStatus: R
         }
       )
     );
   }
-), g4 = (t) => typeof t.linkContent != "string" ? !!(t.isActive || t.linkContent.props.className && t.linkContent.props.className.includes(
+), E4 = (t) => typeof t.linkContent != "string" ? !!(t.isActive || t.linkContent.props.className && t.linkContent.props.className.includes(
   "pds-isActive"
-)) : !1, K2 = (t) => {
-  if (g4(t))
+)) : !1, X2 = (t) => {
+  if (E4(t))
     return !0;
   if (t.links) {
-    for (let a = 0; a < t.links.length; a++)
-      if (K2(t.links[a]))
+    for (let l = 0; l < t.links.length; l++)
+      if (X2(t.links[l]))
         return !0;
   }
   return !1;
-}, j4 = ({
+}, U4 = ({
   ariaLabel: t,
-  className: a,
-  menuItems: l,
-  size: s = "s",
-  ...r
+  className: l,
+  menuItems: a,
+  size: c = "s",
+  ...i
 }) => {
-  let c = !1;
-  const n = P2(b2);
-  n && (c = n.isMobile);
-  const i = Q(null), m = "pds-button-nav", h = c ? `${m}--isMobile` : null, p = `${m}--${s}`;
-  c2(() => {
-    const o = (z) => {
-      if (c) return;
-      const L = i.current;
+  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}`;
+  l2(() => {
+    const g = (p) => {
+      if (s) return;
+      const L = r.current;
       if (!L) return;
-      const y = Array.from(
+      const b = Array.from(
         L.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])')
       );
-      if (y.length === 0) return;
-      const w = document.activeElement, _ = y.indexOf(w);
-      if (_ !== -1) {
-        if (z.key === "ArrowRight") {
-          z.preventDefault();
-          const k = (_ + 1) % y.length;
-          y[k].focus();
-        } else if (z.key === "ArrowLeft") {
-          z.preventDefault();
-          const k = (_ - 1 + y.length) % y.length;
-          y[k].focus();
+      if (b.length === 0) return;
+      const M = document.activeElement, D = b.indexOf(M);
+      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();
         }
       }
     };
-    return document.addEventListener("keydown", o), () => {
-      document.removeEventListener("keydown", o);
+    return document.addEventListener("keydown", g), () => {
+      document.removeEventListener("keydown", g);
     };
-  }, [c]);
-  const f = ({ isActive: o, linkContent: z }) => {
-    const L = `${m}__item`;
+  }, [s]);
+  const z = ({ isActive: g, linkContent: p }) => {
+    const L = `${o}__item`;
     return /* @__PURE__ */ e.createElement(
       "li",
       {
-        className: b([
+        className: v([
           L,
-          o ? `${L}--active` : null
+          g ? `${L}--active` : null
         ])
       },
-      z
+      p
     );
-  }, d = l.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: `${m}__menu` }, l.map((o, z) => /* @__PURE__ */ e.createElement(
-    f,
+  }, d = a.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: `${o}__menu` }, a.map((g, p) => /* @__PURE__ */ e.createElement(
+    z,
     {
-      key: z,
-      isActive: K2(o),
-      linkContent: o.linkContent
+      key: p,
+      isActive: X2(g),
+      linkContent: g.linkContent
     }
-  ))) : null, g = [];
-  l.map((o) => {
-    o.linkContent && (K2(o) ? g.unshift({
-      linkContent: o.linkContent,
+  ))) : null, f = [];
+  a.map((g) => {
+    g.linkContent && (X2(g) ? f.unshift({
+      linkContent: g.linkContent,
       isLink: !0
-    }) : g.push({
-      linkContent: o.linkContent,
+    }) : f.push({
+      linkContent: g.linkContent,
       isLink: !0
     }));
   });
-  const M = g.length > 0 ? /* @__PURE__ */ e.createElement(
-    d4,
+  const C = f.length > 0 ? /* @__PURE__ */ e.createElement(
+    v4,
     {
-      actionItems: g,
+      actionItems: f,
       id: "mobile-nav-split-button",
-      size: s,
+      size: c,
       variant: "secondary"
     }
   ) : null;
   return /* @__PURE__ */ e.createElement(
     "nav",
     {
-      ref: i,
+      ref: r,
       "aria-label": t,
-      className: b([
-        m,
-        p,
+      className: v([
+        o,
         h,
-        a ?? ""
+        m,
+        l ?? ""
       ]),
-      ...r
+      ...i
     },
-    c ? M : d
+    s ? C : d
   );
-}, u4 = {
+}, y4 = {
   info: "circleInfo",
   warning: "triangleExclamation",
   critical: "diamondExclamation",
   discovery: "bullhorn"
-}, q2 = 200, p4 = 50, T4 = ({
+}, G2 = 200, $4 = 50, K4 = ({
   banners: t,
-  className: a,
-  dismissLabel: l = "Dismiss",
-  labelNext: s = "Go to next message",
-  labelPrevious: r = "Go to previous message",
-  typeLabels: c = { ...Q2, neutral: "Notice" },
+  className: l,
+  dismissLabel: a = "Dismiss",
+  labelNext: c = "Go to next message",
+  labelPrevious: i = "Go to previous message",
+  typeLabels: s = { ...Q2, neutral: "Notice" },
   ...n
 }) => {
-  const [i, m] = O(t), [h, p] = O(null), [f, d] = O(null), [g, M] = O({});
-  c2(() => {
-    m(t);
+  const [r, o] = H(t), [m, h] = H(null), [z, d] = H(null), [f, C] = H({});
+  l2(() => {
+    o(t);
   }, [t]);
-  const o = i.length;
-  if (o === 0)
+  const g = r.length;
+  if (g === 0)
     return null;
-  const z = "pds-banner", L = o > 1 ? `${z}-group--multiple` : null, y = {
-    critical: `${z}--critical`,
-    discovery: `${z}--discovery`,
-    info: `${z}--info`,
-    neutral: `${z}--neutral`,
-    warning: `${z}--warning`
-  }, w = i[0].type, _ = w ? `${z}-group--${w}` : null, k = (N) => O2 - N, S = (N) => N === 0 ? 0 : -1, x = () => {
-    p(i[0].id), setTimeout(() => {
-      m((N) => [
-        ...N.slice(1),
-        N[0]
-      ]), p(null);
-    }, q2);
-  }, v = () => {
-    M({
-      [i[0].id]: O2 + 2,
-      [i[o - 1].id]: O2 + 1
+  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);
+    }, G2);
+  }, w = () => {
+    C({
+      [r[0].id]: R2 + 2,
+      [r[g - 1].id]: R2 + 1
     }), setTimeout(() => {
-      p(i[0].id);
-    }, p4), setTimeout(() => {
-      m((N) => [
-        N[N.length - 1],
-        ...N.slice(0, N.length - 1)
-      ]), p(null), M({});
-    }, q2);
-  }, T = (N, C) => {
-    const { iconName: U, id: A, isDismissible: K, message: F, onDismiss: e2, type: W } = N, t2 = W === "critical" ? "alert" : "status", J = `${c[W]}:  `, d2 = (m2) => {
-      m2.preventDefault(), d(A), setTimeout(() => {
-        e2?.(), d(null), m((a2) => a2.filter(
-          (Z) => Z.id !== A
+      h(r[0].id);
+    }, $4), setTimeout(() => {
+      o((y) => [
+        y[y.length - 1],
+        ...y.slice(0, y.length - 1)
+      ]), h(null), C({});
+    }, 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
         ));
-      }, q2);
-    }, l2 = g[A] ?? k(C);
+      }, G2);
+    }, Q = f[F] ?? N(k);
     return /* @__PURE__ */ e.createElement(
       "div",
       {
-        key: A,
-        className: b([
-          z,
-          y[W],
-          h === A ? `${z}--fading` : null,
-          f === A ? `${z}--dismissing` : null
+        key: F,
+        className: v([
+          p,
+          b[Z],
+          m === F ? `${p}--fading` : null,
+          z === F ? `${p}--dismissing` : null
         ]),
-        id: A,
-        role: t2,
-        style: { zIndex: l2 }
+        id: F,
+        role: n2,
+        style: { zIndex: Q }
       },
-      /* @__PURE__ */ e.createElement("div", { className: `${z}__content` }, /* @__PURE__ */ e.createElement(
-        V,
+      /* @__PURE__ */ e.createElement("div", { className: `${p}__content` }, /* @__PURE__ */ e.createElement(
+        A,
         {
-          className: `${z}__icon ${z}__icon--${N.type}`,
-          iconName: W === "neutral" ? U : u4[W],
+          className: `${p}__icon ${p}__icon--${y.type}`,
+          iconName: Z === "neutral" ? R : y4[Z],
           iconSize: "m"
         }
-      ), /* @__PURE__ */ e.createElement("div", { className: `${z}__message` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, J, " "), F)),
-      K && /* @__PURE__ */ e.createElement(
+      ), /* @__PURE__ */ e.createElement("div", { className: `${p}__message` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, U, " "), q)),
+      Y && /* @__PURE__ */ e.createElement(
         "button",
         {
-          className: `${z}__dismiss-button`,
-          onClick: d2,
-          tabIndex: S(C),
+          className: `${p}__dismiss-button`,
+          onClick: r2,
+          tabIndex: P(k),
           type: "button"
         },
-        l
+        a
       )
     );
   };
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: b([
-        `${z}-group`,
-        _,
+      className: v([
+        `${p}-group`,
+        D,
         L,
-        a ?? ""
+        l ?? ""
       ]),
       ...n
     },
-    o > 1 ? /* @__PURE__ */ e.createElement("div", { className: `${z}__navigation` }, /* @__PURE__ */ e.createElement(
-      _2,
+    g > 1 ? /* @__PURE__ */ e.createElement("div", { className: `${p}__navigation` }, /* @__PURE__ */ e.createElement(
+      I2,
       {
-        ariaLabel: r,
-        className: `${z}__nav-button ${z}__nav-button--prev`,
+        ariaLabel: i,
+        className: `${p}__nav-button ${p}__nav-button--prev`,
         iconName: "angleLeft",
-        onClick: v,
+        onClick: w,
         size: "m"
       }
     ), /* @__PURE__ */ e.createElement(
-      _2,
+      I2,
       {
-        ariaLabel: s,
-        className: `${z}__nav-button ${z}__nav-button--next`,
+        ariaLabel: c,
+        className: `${p}__nav-button ${p}__nav-button--next`,
         iconName: "angleRight",
-        onClick: x,
+        onClick: _,
         size: "m"
       }
-    ), i.map((N, C) => T(N, C))) : T(i[0], 0)
+    ), r.map((y, k) => S(y, k))) : S(r[0], 0)
   );
-}, U2 = {
+}, W2 = {
   info: "circleInfo",
   warning: "triangleExclamation",
   success: "circleCheck",
   critical: "diamondExclamation"
-}, A4 = ({
+}, X4 = ({
   className: t,
-  message: a,
-  title: l,
-  type: s,
-  typeLabels: r = {
+  message: l,
+  title: a,
+  type: c,
+  typeLabels: i = {
     ...Q2,
     working: "Working"
   },
-  ...c
+  ...s
 }) => {
-  const n = "pds-inline-message", i = {
+  const n = "pds-inline-message", r = {
     error: `${n}--error`,
     success: `${n}--success`,
     warning: `${n}--warning`,
     info: `${n}--info`,
     critical: `${n}--critical`,
     working: `${n}--working`
-  }, m = s === "critical" ? "alert" : "status", h = `${r[s]}: `, p = typeof a == "string" ? /* @__PURE__ */ e.createElement("p", null, a) : a;
+  }, o = c === "critical" ? "alert" : "status", m = `${i[c]}: `, h = typeof l == "string" ? /* @__PURE__ */ e.createElement("p", null, l) : l;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: b([n, i[s], t ?? ""]),
-      role: m,
-      ...c
+      className: v([n, r[c], t ?? ""]),
+      role: o,
+      ...s
     },
-    /* @__PURE__ */ e.createElement("div", { className: `${n}__icon ${n}__icon-${s}` }, s === "working" ? /* @__PURE__ */ e.createElement(S2, { colorType: "monochromatic", size: "m" }) : /* @__PURE__ */ e.createElement(
-      V,
+    /* @__PURE__ */ e.createElement("div", { className: `${n}__icon ${n}__icon-${c}` }, c === "working" ? /* @__PURE__ */ e.createElement(k2, { colorType: "monochromatic", size: "m" }) : /* @__PURE__ */ e.createElement(
+      A,
       {
-        iconName: `${s}` in U2 ? U2[s] : U2.info,
+        iconName: `${c}` in W2 ? W2[c] : W2.info,
         iconSize: "m"
       }
     )),
-    /* @__PURE__ */ e.createElement("div", { className: `${n}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, h), /* @__PURE__ */ e.createElement("div", { className: `${n}__title` }, l), /* @__PURE__ */ e.createElement("div", { className: `${n}__message` }, p))
+    /* @__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))
   );
-}, G2 = {
+}, U2 = {
   info: "circleInfo",
   warning: "triangleExclamation",
   success: "circleCheck",
   critical: "diamondExclamation",
   discovery: "squareQuestion"
-}, R4 = ({
+}, Y4 = ({
   className: t,
-  ctaButton: a,
-  dismissLabel: l = "Dismiss",
-  id: s,
-  isDismissible: r,
-  message: c,
+  ctaButton: l,
+  dismissLabel: a = "Dismiss",
+  id: c,
+  isDismissible: i,
+  message: s,
   onDismiss: n,
-  title: i,
-  type: m = "info",
-  typeLabels: h = Q2,
-  ...p
+  title: r,
+  type: o = "info",
+  typeLabels: m = Q2,
+  ...h
 }) => {
-  const f = Q(null), d = "pds-section-message", g = {
+  const z = J(null), d = "pds-section-message", f = {
     error: `${d}--error`,
     success: `${d}--success`,
     warning: `${d}--warning`,
@@ -3950,575 +4183,605 @@ const t4 = {
     discovery: `${d}--discovery`,
     dismissing: `${d}--dismissing`,
     dismissed: `${d}--dismissed`
-  }, M = r ? `${d}--hasDismiss` : null, o = i ? `${d}--hasTitle` : null, z = m === "critical" ? "alert" : "status", L = `${h[m]}: `, y = typeof c == "string" ? /* @__PURE__ */ e.createElement("p", null, c) : c, w = () => {
-    f.current.addEventListener("animationend", _, {
+  }, 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, {
       once: !0
     });
-  }, _ = (S) => {
-    n(S, s);
-  }, k = () => {
-    w(), f.current.classList.toggle(g.dismissing), setTimeout(() => {
-      f.current.classList.toggle(g.dismissing), f.current.classList.toggle(g.dismissed);
+  }, 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);
     }, 400);
   };
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      ref: f,
-      className: b([
+      ref: z,
+      className: v([
         d,
-        g[m],
-        M,
-        o,
+        f[o],
+        C,
+        g,
         t ?? ""
       ]),
-      id: s,
-      role: z,
-      ...p
+      id: c,
+      role: p,
+      ...h
     },
-    /* @__PURE__ */ e.createElement("div", { className: `${d}__content` }, /* @__PURE__ */ e.createElement("div", { className: `${d}__icon ${d}__icon-${m}` }, /* @__PURE__ */ e.createElement(
-      V,
+    /* @__PURE__ */ e.createElement("div", { className: `${d}__content` }, /* @__PURE__ */ e.createElement("div", { className: `${d}__icon ${d}__icon-${o}` }, /* @__PURE__ */ e.createElement(
+      A,
       {
-        iconName: `${m}` in G2 ? G2[m] : G2.info,
+        iconName: `${o}` in U2 ? U2[o] : U2.info,
         iconSize: "m"
       }
-    )), /* @__PURE__ */ e.createElement("div", { className: `${d}__text` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, L), i && /* @__PURE__ */ e.createElement("div", { className: `${d}__title` }, i), /* @__PURE__ */ e.createElement("div", { className: `${d}__message` }, y))),
-    (a || r) && /* @__PURE__ */ e.createElement("div", { className: `${d}__actions` }, a && /* @__PURE__ */ e.createElement(
-      I2,
+    )), /* @__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(
+      B2,
       {
-        ...a,
+        ...l,
         className: `${d}__cta`,
         size: "s",
         variant: "secondary"
       }
-    ), r && /* @__PURE__ */ e.createElement(
-      u1,
+    ), i && /* @__PURE__ */ e.createElement(
+      v1,
       {
-        ariaLabel: l,
+        ariaLabel: a,
         className: `${d}__dismiss`,
-        onClick: k,
+        onClick: N,
         size: "l"
       }
     ))
   );
-}, z4 = {
+}, _4 = {
   info: "circleInfo",
   success: "circleCheck",
   warning: "triangleExclamation",
   critical: "diamondExclamation"
-}, f4 = {
+}, D4 = {
   info: "Information",
   success: "Success",
   warning: "Warning",
   critical: "Critical",
   working: "Working..."
-}, L4 = ({
+}, P4 = ({
   children: t,
-  className: a,
-  id: l,
-  type: s = "info",
-  typeLabels: r = f4
+  className: l,
+  id: a,
+  type: c = "info",
+  typeLabels: i = D4
 }) => {
-  const c = "pds-toast", n = {
-    critical: `${c}--critical`,
-    info: `${c}--info`,
-    success: `${c}--success`,
-    warning: `${c}--warning`,
-    working: `${c}--working`
-  }, i = `${r[s]} `;
+  const s = "pds-toast", n = {
+    critical: `${s}--critical`,
+    info: `${s}--info`,
+    success: `${s}--success`,
+    warning: `${s}--warning`,
+    working: `${s}--working`
+  }, r = `${i[c]} `;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: b([c, n[s], a]),
-      id: l
+      className: v([s, n[c], l]),
+      id: a
     },
-    /* @__PURE__ */ e.createElement("div", { className: `${c}__icon-container` }, s === "working" ? /* @__PURE__ */ e.createElement(S2, { colorType: "monochromatic-reverse", size: "l" }) : /* @__PURE__ */ e.createElement(
-      V,
+    /* @__PURE__ */ e.createElement("div", { className: `${s}__icon-container` }, c === "working" ? /* @__PURE__ */ e.createElement(k2, { colorType: "monochromatic-reverse", size: "l" }) : /* @__PURE__ */ e.createElement(
+      A,
       {
-        className: `${c}__icon ${c}__icon--${s}`,
-        iconName: z4[s],
+        className: `${s}__icon ${s}__icon--${c}`,
+        iconName: _4[c],
         iconSize: "m"
       }
     )),
-    /* @__PURE__ */ e.createElement("div", { className: `${c}__message` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, i), t)
+    /* @__PURE__ */ e.createElement("div", { className: `${s}__message` }, /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, r), t)
   );
-}, C4 = ({
+}, k4 = ({
   ariaLabel: t,
-  closeToast: a
+  closeToast: l
 }) => /* @__PURE__ */ e.createElement(
-  u1,
+  v1,
   {
     ariaLabel: t || "Close",
     className: "pds-toaster__close-button",
-    onClick: () => a(null),
+    onClick: () => l(null),
     size: "l"
   }
-), B4 = ({
+), Q4 = ({
   autoCloseDuration: t = 5e3,
-  className: a,
-  limit: l = 5,
-  position: s = "bottom-right"
+  className: l,
+  limit: a = 5,
+  position: c = "bottom-right"
 }) => {
-  const c = b(["pds-toaster", a]);
+  const s = v(["pds-toaster", l]);
   return /* @__PURE__ */ e.createElement(
-    N1,
+    A1,
     {
       newestOnTop: !0,
       autoClose: t,
-      className: c,
-      closeButton: C4,
+      className: s,
+      closeButton: k4,
       draggable: !1,
       icon: !1,
-      limit: l,
-      position: s,
+      limit: a,
+      position: c,
       role: "status",
-      transition: S1
+      transition: O1
     }
   );
 };
-var v4 = /* @__PURE__ */ ((t) => (t.Critical = "critical", t.Info = "info", t.Success = "success", t.Warning = "warning", t.Working = "working", t))(v4 || {});
-const O4 = () => {
-  const t = (l, s, r = {}) => {
-    const c = /* @__PURE__ */ e.createElement(L4, { type: l }, s);
+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 = {
-      ...r
+      ...i
     };
-    return l === "critical" && (n = {
+    return a === "critical" && (n = {
       ...n,
       autoClose: !1,
       role: "alert"
-    }), l === "warning" && (n = {
+    }), a === "warning" && (n = {
       ...n,
       autoClose: !1
-    }), l === "working" && (n = {
+    }), a === "working" && (n = {
       ...n,
       autoClose: !1,
       closeButton: !1,
       closeOnClick: !1
-    }), e1(c, n);
-  }, a = I1({
+    }), e1(s, n);
+  }, l = H1({
     collapse: !1,
     enter: "pds-toast--bounceInPlace",
     exit: "pds-toast--slideOut"
   });
-  return [t, e1, a];
-}, H4 = ({
+  return [t, e1, l];
+}, e0 = ({
   children: t,
-  className: a,
-  expandButtonAriaLabel: l,
-  isExpandable: s = !1,
-  ...r
+  className: l,
+  expandButtonAriaLabel: a,
+  isExpandable: c = !1,
+  ...i
 }) => {
-  const c = "pds-panel-row", [n, i] = O(!1), m = Q(null), h = Q(null), p = x2(t), f = p["items-left"], d = p["items-right"], g = p["items-below"], M = () => {
-    const o = h.current, z = m.current;
-    if (!o || !z) return;
+  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;
-    i(L), L ? (Object.assign(o.style, {
+    r(L), L ? (Object.assign(g.style, {
       display: "block",
       height: "auto",
       opacity: "1"
-    }), z.classList.add("is-expanded")) : (Object.assign(o.style, {
+    }), p.classList.add("is-expanded")) : (Object.assign(g.style, {
       height: "0",
       opacity: "0",
       display: "none"
-    }), z.classList.remove("is-expanded"));
+    }), p.classList.remove("is-expanded"));
   };
   return /* @__PURE__ */ e.createElement(
     "li",
     {
-      className: b([c, a ?? ""]),
-      ...r,
-      ref: m
+      className: v([s, l ?? ""]),
+      ...i,
+      ref: o
     },
     /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: b([
-          `${c}__main`,
-          s ? "is-expandable" : ""
+        className: v([
+          `${s}__main`,
+          c ? "is-expandable" : ""
         ])
       },
-      f && /* @__PURE__ */ e.createElement("div", { className: `${c}__items ${c}__items--left` }, f),
-      d && /* @__PURE__ */ e.createElement("div", { className: `${c}__items ${c}__items--right` }, d),
-      s && /* @__PURE__ */ e.createElement(
+      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(
         "button",
         {
           "aria-expanded": n,
-          "aria-label": l,
-          className: `${c}__expand-button`,
-          onClick: M
+          "aria-label": a,
+          className: `${s}__expand-button`,
+          onClick: C
         },
         /* @__PURE__ */ e.createElement(
-          V,
+          A,
           {
-            className: `${c}__expand-icon ${n ? "rotated" : ""}`,
+            className: `${s}__expand-icon ${n ? "rotated" : ""}`,
             iconName: "angleDown"
           }
         )
       )
     ),
-    s && g && /* @__PURE__ */ e.createElement(
+    c && f && /* @__PURE__ */ e.createElement(
       "div",
       {
-        ref: h,
-        className: `${c}__items ${c}__items--below`,
+        ref: m,
+        className: `${s}__items ${s}__items--below`,
         style: { display: "none", height: "0", opacity: "0" }
       },
-      /* @__PURE__ */ e.createElement("div", { className: `${c}__items-inside` }, g)
+      /* @__PURE__ */ e.createElement("div", { className: `${s}__items-inside` }, f)
     )
   );
-}, V4 = ({
+}, t0 = ({
   alt: t = "",
-  className: a,
-  height: l,
-  srcFallback: s,
-  srcWebp: r,
-  width: c,
+  className: l,
+  height: a,
+  srcFallback: c,
+  srcWebp: i,
+  width: s,
   ...n
 }) => {
-  const i = "pds-picture";
-  return /* @__PURE__ */ e.createElement("picture", { className: b([i, a ?? ""]) }, /* @__PURE__ */ e.createElement("source", { srcSet: r, type: "image/webp" }), /* @__PURE__ */ e.createElement(
+  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(
     "img",
     {
       alt: t,
-      className: `${i}__img`,
-      height: l,
-      src: s,
-      width: c,
+      className: `${r}__img`,
+      height: a,
+      src: c,
+      width: s,
       ...n
     }
   ));
-}, F4 = ({
+}, s0 = ({
   className: t,
-  platform: a,
-  videoId: l,
-  videoTitle: s,
-  ...r
+  destination: l = "main",
+  text: a = "Skip to main content",
+  ...c
+}) => /* @__PURE__ */ e.createElement(
+  "a",
+  {
+    className: v(["pds-skiplink", t]),
+    href: `#${l}`,
+    ...c
+  },
+  a
+), c0 = ({
+  className: t,
+  label: l = null,
+  size: a = "s",
+  type: c = "neutral",
+  ...i
+}) => {
+  const s = "pds-status-indicator", n = `${s}--${c}`, r = a !== "s" ? `${s}--${a}` : null;
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: v([
+        s,
+        n,
+        r,
+        t ?? ""
+      ]),
+      ...i
+    },
+    c === "working" ? /* @__PURE__ */ e.createElement(
+      k2,
+      {
+        className: `${s}__spinner`,
+        colorType: "monochromatic",
+        size: "m"
+      }
+    ) : /* @__PURE__ */ e.createElement("span", { "aria-hidden": "true", className: `${s}__icon`, role: "img" }),
+    l && /* @__PURE__ */ e.createElement("span", { className: "pds-status-indicator__label" }, l)
+  );
+}, a0 = ({
+  className: t,
+  platform: l,
+  videoId: a,
+  videoTitle: c,
+  ...i
 }) => {
-  const c = "pds-video-embed", n = /* @__PURE__ */ e.createElement(
+  const s = "pds-video-embed", n = /* @__PURE__ */ e.createElement(
     "iframe",
     {
       allow: "autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media",
-      src: `https://fast.wistia.net/embed/iframe/${l}`,
-      title: `Wistia video player${s ? `: ${s}` : ""}`
+      src: `https://fast.wistia.net/embed/iframe/${a}`,
+      title: `Wistia video player${c ? `: ${c}` : ""}`
     }
-  ), i = /* @__PURE__ */ e.createElement(
+  ), r = /* @__PURE__ */ e.createElement(
     "iframe",
     {
       allow: "autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media",
-      src: `https://player.vimeo.com/video/${l}`,
-      title: `Vimeo video player${s ? `: ${s}` : ""}`
+      src: `https://player.vimeo.com/video/${a}`,
+      title: `Vimeo video player${c ? `: ${c}` : ""}`
     }
-  ), m = /* @__PURE__ */ e.createElement(
+  ), o = /* @__PURE__ */ e.createElement(
     "iframe",
     {
       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/${l}`,
-      title: `YouTube video player${s ? `: ${s}` : ""}`
+      src: `https://www.youtube.com/embed/${a}`,
+      title: `YouTube video player${c ? `: ${c}` : ""}`
     }
   );
-  let h;
-  switch (a) {
+  let m;
+  switch (l) {
     case "vimeo":
-      h = i;
+      m = r;
       break;
     case "wistia":
-      h = n;
+      m = n;
       break;
     case "youtube":
     default:
-      h = m;
+      m = o;
       break;
   }
-  return /* @__PURE__ */ e.createElement("div", { className: b([c, t ?? ""]), ...r }, h);
-}, w4 = ({
+  return /* @__PURE__ */ e.createElement("div", { className: v([s, t ?? ""]), ...i }, m);
+}, l0 = ({
   className: t,
-  color: a = "transparent",
-  hasStatusIndicator: l = !1,
-  label: s,
-  statusIndicatorText: r = "Status indicator: ",
-  statusType: c,
-  ...n
+  option: l,
+  ...a
 }) => {
-  const i = "pds-status-badge", m = `${i}--${a}`, h = `${i}__status`, p = c ? `${h}--${c}` : null;
-  return /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      className: b([i, m, t ?? ""]),
-      ...n
-    },
-    l === !0 && /* @__PURE__ */ e.createElement("span", { className: b([h, p]) }, c && /* @__PURE__ */ e.createElement("span", { className: "visually-hidden" }, r, " ", c)),
-    /* @__PURE__ */ e.createElement("span", { className: `${i}__label` }, s)
-  );
-}, Z4 = ({
-  className: t,
-  option: a,
-  ...l
-}) => {
-  const s = "pds-site-option-display", r = a.type ? i4[a.type] : "bolt", c = Q(null), [n] = j1(c), i = n.width / 16 - 7.5;
-  let m, h;
-  a.status === "active" && (m = "Active", h = "success"), a.status === "frozen" && (m = "Frozen", h = "frozen"), a.status === "restricted" && (m = "Restricted", h = "critical");
-  const p = /* @__PURE__ */ e.createElement(
-    w4,
+  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;
+  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(
+    G1,
     {
       hasStatusIndicator: !0,
-      label: m,
-      statusType: h
+      label: o,
+      statusType: m
     }
   );
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      ref: c,
-      className: b([s, t ?? ""]),
-      title: a.name,
-      ...l
+      ref: s,
+      className: v([c, t ?? ""]),
+      title: l.name,
+      ...a
     },
-    /* @__PURE__ */ e.createElement("div", { className: `${s}__inner`, style: { pointerEvents: "none" } }, /* @__PURE__ */ e.createElement("div", { className: `${s}__icon` }, /* @__PURE__ */ e.createElement(V, { iconName: r })), /* @__PURE__ */ e.createElement(
+    /* @__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(
       "div",
       {
-        className: `${s}__label`,
-        style: { maxWidth: `${i}rem` }
+        className: `${c}__label`,
+        style: { maxWidth: `${r}rem` }
       },
-      a.name
+      l.name
     )),
-    /* @__PURE__ */ e.createElement("div", { className: `${s}__status`, style: { pointerEvents: "none" } }, p)
+    /* @__PURE__ */ e.createElement("div", { className: `${c}__status`, style: { pointerEvents: "none" } }, h)
   );
-}, q4 = ({
+}, i0 = ({
   children: t,
-  className: a,
-  width: l = "standard",
-  ...s
+  className: l,
+  width: a = "standard",
+  ...c
 }) => {
-  const r = "pds-container", c = l !== "standard" ? `${r}--${l}` : null;
+  const i = "pds-container", s = a !== "standard" ? `${i}--${a}` : null;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: b([r, c, a ?? ""]),
-      ...s
+      className: v([i, s, l ?? ""]),
+      ...c
     },
     t
   );
-}, U4 = ({
+}, n0 = ({
   children: t,
-  className: a,
-  sidebarMinWidth: l = 14.5,
-  sidebarWidth: s = "18%",
-  ...r
+  className: l,
+  sidebarMinWidth: a = 14.5,
+  sidebarWidth: c = "18%",
+  ...i
 }) => {
-  let c = !1;
-  const n = P2(b2);
-  n && (c = n.isMobile);
-  const i = "pds-docs-layout", m = c ? `${i}--isMobile` : null, h = {
-    width: s,
-    minWidth: `${l}rem`
-  }, p = x2(t), f = p.__unslotted || p.content, d = p.sidebar, g = /* @__PURE__ */ e.createElement(e.Fragment, null, d && /* @__PURE__ */ e.createElement("aside", { className: `${i}__sidebar` }, d), /* @__PURE__ */ e.createElement("div", { className: `${i}__content` }, f)), M = /* @__PURE__ */ e.createElement(e.Fragment, null, d && /* @__PURE__ */ e.createElement("aside", { className: `${i}__sidebar`, style: h }, /* @__PURE__ */ e.createElement("div", { className: `${i}__sidebar-inner` }, d)), /* @__PURE__ */ e.createElement("div", { className: `${i}__content` }, f));
+  let s = !1;
+  const n = D2(x2);
+  n && (s = n.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));
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: b([
-        i,
-        m,
+      className: v([
+        r,
+        o,
         "pds-container pds-container--x-wide",
-        a ?? ""
+        l ?? ""
       ]),
-      ...r
+      ...i
     },
-    c ? g : M
+    s ? f : C
   );
-}, G4 = ({
+}, r0 = ({
   alignContent: t = "flex-start",
-  alignItems: a = "stretch",
-  children: l,
-  className: s,
-  flexDirection: r = "row",
-  flexWrap: c = "nowrap",
+  alignItems: l = "stretch",
+  children: a,
+  className: c,
+  flexDirection: i = "row",
+  flexWrap: s = "nowrap",
   gap: n = "standard",
-  justifyContent: i = "flex-start",
-  mobileAlignContent: m,
-  mobileAlignItems: h,
-  mobileFlexDirection: p = "column",
-  mobileFlexWrap: f,
+  justifyContent: r = "flex-start",
+  mobileAlignContent: o,
+  mobileAlignItems: m,
+  mobileFlexDirection: h = "column",
+  mobileFlexWrap: z,
   mobileGap: d,
-  mobileJustifyContent: g,
-  ...M
+  mobileJustifyContent: f,
+  ...C
 }) => {
-  let z = p1() <= 640;
-  const L = P2(b2);
-  L && (z = L.isMobile);
-  const y = "pds-flex", w = `${y}-container`, _ = z ? `${w}--mobile` : null;
-  let k = null;
-  z ? k = `${y}-direction--${p}` : r !== "row" && (k = `${y}-direction--${r}`);
-  let S = null;
-  z ? f ? f !== "nowrap" && (S = `${y}-wrap--${f}`) : c !== "nowrap" && (S = `${y}-wrap--${c}`) : c !== "nowrap" && (S = `${y}-wrap--${c}`);
-  let x = null;
-  z ? g ? g !== "flex-start" && (x = `${y}-justify--${g}`) : i !== "flex-start" && (x = `${y}-justify--${i}`) : i !== "flex-start" && (x = `${y}-justify--${i}`);
-  let v = null;
-  z ? h ? h !== "stretch" && (v = `${y}-align-items--${h}`) : a !== "stretch" && (v = `${y}-align-items--${a}`) : a !== "stretch" && (v = `${y}-align-items--${a}`);
-  let T = null;
-  z ? m ? m !== "flex-start" && (T = `${y}-align-content--${m}`) : t !== "flex-start" && (T = `${y}-align-content--${t}`) : t !== "flex-start" && (T = `${y}-align-content--${t}`);
+  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;
-  return z ? d ? d !== "none" && (N = `${y}-gap--${d}`) : n !== "none" && (N = `${y}-gap--${n}`) : n !== "none" && (N = `${y}-gap--${n}`), /* @__PURE__ */ e.createElement(
+  p ? N = `${b}-direction--${h}` : i !== "row" && (N = `${b}-direction--${i}`);
+  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}`);
+  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(
     "div",
     {
-      className: b([
-        w,
+      className: v([
+        M,
+        D,
+        N,
+        P,
         _,
-        k,
+        w,
         S,
-        x,
-        v,
-        T,
-        N,
-        s ?? ""
+        y,
+        c ?? ""
       ]),
-      ...M
+      ...C
     },
-    l
+    a
   );
-}, K4 = ({
+}, o0 = ({
   children: t,
-  mobileMenuMaxWidth: a = 640
-}) => /* @__PURE__ */ e.createElement(r4, { mobileMenuMaxWidth: a }, /* @__PURE__ */ e.createElement(G1, null, t)), W4 = ({
+  mobileMenuMaxWidth: l = 640
+}) => /* @__PURE__ */ e.createElement(L4, { mobileMenuMaxWidth: l }, /* @__PURE__ */ e.createElement(c4, null, t)), m0 = ({
   children: t,
-  className: a,
-  gridGap: l = "standard",
-  verticalAlign: s = "start",
-  ...r
+  className: l,
+  gridGap: a = "standard",
+  verticalAlign: c = "start",
+  ...i
 }) => {
-  const c = "pds-three-item-layout", n = l === "standard" ? "pds-grid" : `pds-grid pds-grid--${l}`, i = `${c}--${s}`, m = x2(t), h = [
-    m["first-item"],
-    m["second-item"],
-    m["third-item"]
+  const s = "pds-three-item-layout", n = a === "standard" ? "pds-grid" : `pds-grid pds-grid--${a}`, r = `${s}--${c}`, o = j2(t), m = [
+    o["first-item"],
+    o["second-item"],
+    o["third-item"]
   ];
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: b([
-        c,
+      className: v([
+        s,
         n,
-        i,
-        a
+        r,
+        l
       ]),
-      ...r
+      ...i
     },
-    h.map((p, f) => /* @__PURE__ */ e.createElement(
+    m.map((h, z) => /* @__PURE__ */ e.createElement(
       "div",
       {
-        key: f,
+        key: z,
         className: "pds-grid-item pds-grid-item--sm-12 pds-grid-item--md-4 pds-grid-item--lg-4"
       },
-      p
+      h
     ))
   );
-}, X4 = ({
+}, d0 = ({
   children: t,
-  className: a,
-  gridGap: l = "standard",
-  layoutVariant: s = "equal",
-  verticalAlign: r = "start",
-  ...c
+  className: l,
+  gridGap: a = "standard",
+  layoutVariant: c = "equal",
+  verticalAlign: i = "start",
+  ...s
 }) => {
-  const n = "pds-two-item-layout", i = l === "standard" ? "pds-grid" : `pds-grid pds-grid--${l}`, m = `${n}--${r}`, h = ["pds-grid-item--md-6"], p = ["pds-grid-item--md-4", "pds-grid-item--lg-3"], f = ["pds-grid-item--md-8", "pds-grid-item--lg-9"], d = ["pds-grid-item", "pds-grid-item--sm-4"];
-  let g, M;
-  switch (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) {
     case "equal":
-      g = d.concat(h), M = d.concat(h);
+      f = d.concat(m), C = d.concat(m);
       break;
     case "one-third-start":
-      g = d.concat(p), M = d.concat(f);
+      f = d.concat(h), C = d.concat(z);
       break;
     case "one-third-end":
-      g = d.concat(f), M = d.concat(p);
+      f = d.concat(z), C = d.concat(h);
   }
-  const o = x2(t), z = o["first-item"], L = o["second-item"];
+  const g = j2(t), p = g["first-item"], L = g["second-item"];
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: b([
+      className: v([
         n,
-        i,
-        m,
-        a
+        r,
+        o,
+        l
       ]),
-      ...c
+      ...s
     },
-    /* @__PURE__ */ e.createElement("div", { className: g.join(" ").trim() }, z),
-    /* @__PURE__ */ e.createElement("div", { className: M.join(" ").trim() }, L)
+    /* @__PURE__ */ e.createElement("div", { className: f.join(" ").trim() }, p),
+    /* @__PURE__ */ e.createElement("div", { className: C.join(" ").trim() }, L)
   );
-}, Y4 = () => {
-  const t = typeof window < "u", a = (r) => r >= B1 ? "xl" : r >= R1 ? "lg" : r >= A1 ? "md" : "sm", [l, s] = O(
-    t ? a(window.innerWidth) : "lg"
+}, h0 = () => {
+  const t = typeof window < "u", l = (i) => i >= K1 ? "xl" : i >= U1 ? "lg" : i >= W1 ? "md" : "sm", [a, c] = H(
+    t ? l(window.innerWidth) : "lg"
   );
-  return c2(() => {
+  return l2(() => {
     if (!t) return;
-    const r = () => {
-      s(a(window.innerWidth));
+    const i = () => {
+      c(l(window.innerWidth));
     };
-    return r(), window.addEventListener("resize", r), () => {
-      window.removeEventListener("resize", r);
+    return i(), window.addEventListener("resize", i), () => {
+      window.removeEventListener("resize", i);
     };
-  }, []), l;
-}, Q4 = (t) => {
-  const a = typeof window < "u", l = (c) => a ? window.matchMedia(c).matches : !1, [s, r] = O(l(t));
-  return c2(() => {
-    if (!a) return;
-    const c = window.matchMedia(t), n = () => {
-      r(c.matches);
+  }, []), a;
+}, u0 = (t) => {
+  const l = typeof window < "u", a = (s) => l ? window.matchMedia(s).matches : !1, [c, i] = H(a(t));
+  return l2(() => {
+    if (!l) return;
+    const s = window.matchMedia(t), n = () => {
+      i(s.matches);
     };
-    return r(c.matches), c.addEventListener ? (c.addEventListener("change", n), () => c.removeEventListener("change", n)) : (c.addListener(n), () => c.removeListener(n));
-  }, [t]), s;
+    return i(s.matches), s.addEventListener ? (s.addEventListener("change", n), () => s.removeEventListener("change", n)) : (s.addListener(n), () => s.removeListener(n));
+  }, [t]), c;
 };
 export {
-  T4 as Banner,
-  I2 as Button,
-  l4 as ButtonLink,
-  j4 as ButtonNav,
-  _4 as ClipboardButton,
-  u1 as CloseButton,
-  q4 as Container,
-  U4 as DocsLayout,
-  G4 as FlexContainer,
-  K4 as GlobalWrapper,
-  V as Icon,
-  _2 as IconButton,
-  A4 as InlineMessage,
-  o4 as MenuButton,
-  H4 as PanelRow,
-  V4 as Picture,
-  b2 as ResponsiveContext,
-  r4 as ResponsiveContextProvider,
-  N4 as SSOButton,
-  R4 as SectionMessage,
-  x4 as SegmentedButton,
-  Z4 as SiteOptionDisplay,
-  k4 as SitePlanLevelLabel,
-  i4 as SiteTypeIcon,
-  P4 as SiteTypeLabel,
-  S2 as Spinner,
-  d4 as SplitButton,
+  A4 as Avatar,
+  O4 as Badge,
+  K4 as Banner,
+  B2 as Button,
+  g4 as ButtonLink,
+  U4 as ButtonNav,
+  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,
+  C4 as MenuButton,
+  e0 as PanelRow,
+  t0 as Picture,
+  x2 as ResponsiveContext,
+  L4 as ResponsiveContextProvider,
+  Z4 as SSOButton,
+  Y4 as SectionMessage,
+  F4 as SegmentedButton,
+  l0 as SiteOptionDisplay,
+  R4 as SitePlanLevelLabel,
+  f4 as SiteTypeIcon,
+  V4 as SiteTypeLabel,
+  s0 as Skiplink,
+  k2 as Spinner,
+  v4 as SplitButton,
+  G1 as StatusBadge,
+  c0 as StatusIndicator,
   Q2 as StatusTypeLabels,
-  I4 as TagsInput,
   d1 as Tally,
-  W4 as ThreeItemLayout,
-  L4 as Toast,
-  v4 as ToastType,
-  B4 as Toaster,
-  X4 as TwoItemLayout,
-  S4 as UtilityButton,
-  F4 as VideoEmbed,
-  $4 as iconList,
-  V2 as isHeadingItemType,
-  F2 as isLinkItemType,
-  n4 as isNodeItemType,
-  H2 as isSeparatorItemType,
-  Y4 as useBreakpoint,
-  a4 as useClipboard,
-  D4 as useKeyPress,
-  Q4 as useMediaQuery,
-  O4 as useToast,
-  p1 as useWindowWidth
+  W4 as TextInput,
+  G4 as Textarea,
+  m0 as ThreeItemLayout,
+  P4 as Toast,
+  x4 as ToastType,
+  Q4 as Toaster,
+  T2 as Tooltip,
+  d0 as TwoItemLayout,
+  q4 as UtilityButton,
+  a0 as VideoEmbed,
+  B4 as iconList,
+  F2 as isHeadingItemType,
+  Z2 as isLinkItemType,
+  z4 as isNodeItemType,
+  V2 as isSeparatorItemType,
+  h0 as useBreakpoint,
+  p4 as useClipboard,
+  l4 as useKeyPress,
+  u0 as useMediaQuery,
+  J4 as useToast,
+  w1 as useWindowWidth
 };
 //# sourceMappingURL=index.js.map