@scrippsproduct/networks-ui-library 1.1.8 → 1.1.10-alpha.0

package/dist/components/CtaBlock/CtaBlock.test.js

@@ -0,0 +1,226 @@
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { d as i, i as o, r as l, g as e, s as r } from "../../react.esm-DLSrfVwM.mjs";
+import { u as h } from "../../index-BUN4jQ3m.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { CtaBlock as a } from "./CtaBlock.js";
+i("CtaBlock", () => {
+  i("Basic Rendering", () => {
+    o("should render with minimal props", () => {
+      const { container: t } = l(/* @__PURE__ */ n(a, {}));
+      e(t.querySelector("cta-block")).toBeInTheDocument();
+    }), o("should render title when provided", () => {
+      l(/* @__PURE__ */ n(a, { title: "Test Title" })), e(r.getByRole("heading", { level: 1 })).toBeInTheDocument(), e(r.getByText("Test Title")).toBeInTheDocument();
+    }), o("should not render title when empty string", () => {
+      const { container: t } = l(/* @__PURE__ */ n(a, { title: "" }));
+      e(t.querySelector("h1")).not.toBeInTheDocument();
+    }), o("should render content as string", () => {
+      const t = "This is test content";
+      l(/* @__PURE__ */ n(a, { content: t })), e(r.getByText(t)).toBeInTheDocument();
+    }), o("should render content as JSX element", () => {
+      l(/* @__PURE__ */ n(a, { content: /* @__PURE__ */ n("div", { children: "JSX Content" }) })), e(r.getByText("JSX Content")).toBeInTheDocument();
+    }), o("should not render content when empty string", () => {
+      const { container: t } = l(/* @__PURE__ */ n(a, { content: "" })), c = t.querySelector(".cta-block__content");
+      e(c).not.toBeInTheDocument();
+    }), o("should render CTA button", () => {
+      l(/* @__PURE__ */ n(a, { cta: { label: "Click Me", href: "/test", type: "internal-link" } })), e(r.getByRole("link", { name: "Click Me" })).toBeInTheDocument();
+    });
+  }), i("Title Rendering", () => {
+    o("should parse HTML in title", () => {
+      l(/* @__PURE__ */ n(a, { title: "<strong>Bold</strong> Title" }));
+      const t = r.getByText("Bold");
+      e(t.tagName).toBe("STRONG");
+    }), o("should render title image when titleImageUrl is provided", () => {
+      l(/* @__PURE__ */ n(a, { title: "Test Title", titleImageUrl: "/path/to/image.png" }));
+      const t = r.getByRole("heading", { level: 1 });
+      e(t).toHaveClass("cta-block__title-img");
+    }), o("should render sr-only span for accessibility when using title image", () => {
+      l(/* @__PURE__ */ n(a, { title: "Accessible Title", titleImageUrl: "/image.png" }));
+      const t = r.getByText("Accessible Title");
+      e(t).toHaveClass("sr-only");
+    }), o("should not have image class when titleImageUrl is not provided", () => {
+      l(/* @__PURE__ */ n(a, { title: "Regular Title" }));
+      const t = r.getByRole("heading", { level: 1 });
+      e(t).not.toHaveClass("cta-block__title-img");
+    }), o("should apply CSS variable for title image", () => {
+      const { container: t } = l(/* @__PURE__ */ n(a, { titleImageUrl: "/test-image.jpg" })), c = t.querySelector("cta-block");
+      e(c).toHaveStyle({ "--title-image": "url(/test-image.jpg)" });
+    });
+  }), i("Content Rendering", () => {
+    o("should parse HTML in content string", () => {
+      l(/* @__PURE__ */ n(a, { content: "<em>Italic</em> text" }));
+      const t = r.getByText("Italic");
+      e(t.tagName).toBe("EM");
+    }), o("should render complex HTML content", () => {
+      l(/* @__PURE__ */ n(a, { content: "<p>Paragraph <strong>bold</strong></p>" })), e(r.getByText("bold")).toBeInTheDocument();
+    }), o("should apply content class", () => {
+      const { container: t } = l(/* @__PURE__ */ n(a, { content: "Test content" })), c = t.querySelector(".cta-block__content");
+      e(c).toBeInTheDocument();
+    });
+  }), i("CTA Types", () => {
+    o('should use default label "View More" for internal-link type', () => {
+      l(/* @__PURE__ */ n(a, { cta: { href: "/page", type: "internal-link" }, type: "internal-link" })), e(r.getByRole("link", { name: "View More" })).toBeInTheDocument();
+    }), o('should use default label "Learn More" for external-link type', () => {
+      l(/* @__PURE__ */ n(a, { cta: { href: "https://example.com", type: "external-link" }, type: "external-link" })), e(r.getByRole("link", { name: "Learn More" })).toBeInTheDocument();
+    }), o('should use default label "View Promo" for play-video type', () => {
+      l(/* @__PURE__ */ n(a, { cta: { href: "#", type: "play-video" }, type: "play-video" })), e(r.getByRole("link", { name: "View Promo" })).toBeInTheDocument();
+    }), o("should override default label with custom CTA label", () => {
+      l(/* @__PURE__ */ n(a, { cta: { label: "Custom Label", href: "/page", type: "internal-link" }, type: "internal-link" })), e(r.getByRole("link", { name: "Custom Label" })).toBeInTheDocument();
+    }), o('should set target="_blank" for external-link', () => {
+      l(/* @__PURE__ */ n(a, { cta: { href: "https://example.com", type: "external-link" }, type: "external-link" }));
+      const c = r.getByRole("link");
+      e(c).toHaveAttribute("target", "_blank");
+    }), o('should set rel="noreferrer" for external-link', () => {
+      l(/* @__PURE__ */ n(a, { cta: { href: "https://example.com", type: "external-link" }, type: "external-link" }));
+      const c = r.getByRole("link");
+      e(c).toHaveAttribute("rel", "noreferrer");
+    }), o('should set target="_self" for internal-link', () => {
+      l(/* @__PURE__ */ n(a, { cta: { href: "/page", type: "internal-link" }, type: "internal-link" }));
+      const c = r.getByRole("link");
+      e(c).toHaveAttribute("target", "_self");
+    }), o("should not set rel for internal-link", () => {
+      l(/* @__PURE__ */ n(a, { cta: { href: "/page", type: "internal-link" }, type: "internal-link" }));
+      const c = r.getByRole("link");
+      e(c).not.toHaveAttribute("rel");
+    });
+  }), i("Button Styles", () => {
+    o("should render GradientButton when ctaButtonStyle is gradient", () => {
+      const t = { label: "Gradient", href: "/test", type: "internal-link" }, { container: c } = l(
+        /* @__PURE__ */ n(
+          a,
+          {
+            btnGradientEndColor: "#0000ff",
+            btnGradientStartColor: "#ff0000",
+            cta: t,
+            ctaButtonStyle: "gradient"
+          }
+        )
+      ), s = c.querySelector(".cta-block__cta");
+      e(s).toBeInTheDocument();
+    }), o("should render regular Button when ctaButtonStyle is flat", () => {
+      l(/* @__PURE__ */ n(a, { btnFlatColors: {
+        bgColor: "#ffffff",
+        bgHoverColor: "#eeeeee",
+        color: "#000000",
+        hoverColor: "#333333",
+        borderColor: "#cccccc",
+        borderHoverColor: "#999999"
+      }, cta: { label: "Flat", href: "/test", type: "internal-link" }, ctaButtonStyle: "flat" })), e(r.getByRole("link", { name: "Flat" })).toBeInTheDocument();
+    }), o("should default to gradient button style", () => {
+      const t = { label: "Default", href: "/test", type: "internal-link" }, { container: c } = l(/* @__PURE__ */ n(a, { cta: t })), s = c.querySelector(".cta-block__cta");
+      e(s).toBeInTheDocument();
+    }), o("should apply custom gradient colors", () => {
+      l(
+        /* @__PURE__ */ n(
+          a,
+          {
+            btnGradientEndColor: "#654321",
+            btnGradientStartColor: "#123456",
+            cta: { label: "Custom Gradient", href: "/test", type: "internal-link" },
+            ctaButtonStyle: "gradient"
+          }
+        )
+      ), e(r.getByRole("link")).toBeInTheDocument();
+    });
+  }), i("Click Handlers", () => {
+    o("should call handleClick for play-video type", async () => {
+      const t = h.setup();
+      l(/* @__PURE__ */ n(a, { cta: { label: "Play Video", href: "#", type: "play-video" }, type: "play-video" }));
+      const s = r.getByRole("link", { name: "Play Video" });
+      await t.click(s), e(s).toBeInTheDocument();
+    }), o("should use default click handler for non-video types", () => {
+      l(/* @__PURE__ */ n(a, { cta: { label: "Link", href: "/test", type: "internal-link" }, type: "internal-link" })), e(r.getByRole("link")).toBeInTheDocument();
+    });
+  }), i("Default Props", () => {
+    o("should use default empty title", () => {
+      const { container: t } = l(/* @__PURE__ */ n(a, {}));
+      e(t.querySelector("h1")).not.toBeInTheDocument();
+    }), o("should use default empty titleImageUrl", () => {
+      const { container: t } = l(/* @__PURE__ */ n(a, { title: "Test" })), c = t.querySelector("h1");
+      e(c).not.toHaveClass("cta-block__title-img");
+    }), o("should use default empty content", () => {
+      const { container: t } = l(/* @__PURE__ */ n(a, {}));
+      e(t.querySelector(".cta-block__content")).not.toBeInTheDocument();
+    }), o("should use default internal-link type", () => {
+      l(/* @__PURE__ */ n(a, { cta: { href: "/test", type: "" } }));
+      const c = r.getByRole("link");
+      e(c).toHaveAttribute("target", "_self");
+    }), o("should use default CTA object", () => {
+      l(/* @__PURE__ */ n(a, {}));
+      const t = r.getByRole("button", { name: "View More" });
+      e(t).toBeInTheDocument();
+    }), o("should use default gradient button style", () => {
+      const { container: t } = l(/* @__PURE__ */ n(a, {})), c = t.querySelector(".cta-block__cta");
+      e(c).toBeInTheDocument();
+    }), o("should use default flat button colors", () => {
+      l(/* @__PURE__ */ n(a, { cta: { label: "Test", href: "/test", type: "internal-link" }, ctaButtonStyle: "flat" })), e(r.getByRole("link")).toBeInTheDocument();
+    });
+  }), i("Complex Scenarios", () => {
+    o("should render complete CtaBlock with all props", () => {
+      l(
+        /* @__PURE__ */ n(
+          a,
+          {
+            btnGradientEndColor: "#0000ff",
+            btnGradientStartColor: "#ff0000",
+            content: "<p>Rich <em>HTML</em> content</p>",
+            cta: {
+              label: "Complete CTA",
+              href: "https://example.com",
+              type: "external-link"
+            },
+            ctaButtonStyle: "gradient",
+            title: "<strong>Complete</strong> Title",
+            titleImageUrl: "/title.png",
+            type: "external-link"
+          }
+        )
+      ), e(r.getByRole("heading")).toBeInTheDocument(), e(r.getByText("HTML")).toBeInTheDocument(), e(r.getByRole("link", { name: "Complete CTA" })).toBeInTheDocument();
+    }), o("should render with title and no content", () => {
+      l(/* @__PURE__ */ n(a, { cta: { label: "Read More", href: "/article", type: "internal-link" }, title: "Article Title" })), e(r.getByText("Article Title")).toBeInTheDocument(), e(r.getByRole("link", { name: "Read More" })).toBeInTheDocument();
+    }), o("should render with content and no title", () => {
+      l(/* @__PURE__ */ n(a, { content: "Some description text", cta: { label: "Continue", href: "/next", type: "internal-link" } })), e(r.getByText("Some description text")).toBeInTheDocument(), e(r.getByRole("link", { name: "Continue" })).toBeInTheDocument();
+    }), o("should handle JSX content with complex structure", () => {
+      l(/* @__PURE__ */ n(a, { content: /* @__PURE__ */ u("div", { children: [
+        /* @__PURE__ */ n("p", { children: "First paragraph" }),
+        /* @__PURE__ */ u("ul", { children: [
+          /* @__PURE__ */ n("li", { children: "Item 1" }),
+          /* @__PURE__ */ n("li", { children: "Item 2" })
+        ] })
+      ] }), cta: { label: "Learn More", href: "/learn", type: "internal-link" } })), e(r.getByText("First paragraph")).toBeInTheDocument(), e(r.getByText("Item 1")).toBeInTheDocument(), e(r.getByText("Item 2")).toBeInTheDocument();
+    });
+  }), i("Wrapper Structure", () => {
+    o("should render cta-wrapper element", () => {
+      const { container: t } = l(/* @__PURE__ */ n(a, {})), c = t.querySelector("cta-wrapper");
+      e(c).toBeInTheDocument();
+    }), o("should have CTA button inside wrapper", () => {
+      const { container: t } = l(/* @__PURE__ */ n(a, {})), c = t.querySelector("cta-wrapper"), s = c == null ? void 0 : c.querySelector(".cta-block__cta");
+      e(s).toBeInTheDocument();
+    });
+  }), i("CSS Classes", () => {
+    o("should apply h2 class to title", () => {
+      l(/* @__PURE__ */ n(a, { title: "Test" }));
+      const t = r.getByRole("heading");
+      e(t).toHaveClass("h2");
+    }), o("should apply cta-block__cta class to button", () => {
+      const { container: t } = l(/* @__PURE__ */ n(a, {})), c = t.querySelector(".cta-block__cta");
+      e(c).toBeInTheDocument();
+    }), o("should have both module and global classes on CTA", () => {
+      const { container: t } = l(/* @__PURE__ */ n(a, {})), c = t.querySelector(".cta-block__cta");
+      e(c).toHaveClass("cta-block__cta");
+    });
+  }), i("Href Handling", () => {
+    o("should set href attribute on CTA link", () => {
+      l(/* @__PURE__ */ n(a, { cta: { label: "Test", href: "/test-page", type: "internal-link" } }));
+      const c = r.getByRole("link");
+      e(c).toHaveAttribute("href", "/test-page");
+    }), o("should handle external URLs", () => {
+      l(/* @__PURE__ */ n(a, { cta: { label: "External", href: "https://external.com", type: "external-link" } }));
+      const c = r.getByRole("link");
+      e(c).toHaveAttribute("href", "https://external.com");
+    }), o("should handle empty href", () => {
+      l(/* @__PURE__ */ n(a, { cta: { label: "Empty", href: "", type: "internal-link" } }));
+      const c = r.getByRole("button", { name: "Empty" });
+      e(c).toBeInTheDocument();
+    });
+  });
+});

package/dist/components/CustomDataList/CustomDataList.js

@@ -2,10 +2,10 @@ import { jsxs as p, jsx as l } from "react/jsx-runtime";
 import z, { forwardRef as ne, useState as y, useRef as T, useCallback as ue, useEffect as de } from "react";
 import { classes as w } from "../../utils/helpers.js";
 import { CreateChoiceList as _e } from "../CreateChoiceList/CreateChoiceList.js";
-import { s as g, C as he, A as fe } from "../../Form.module-Cd8qH2rj.mjs";
-import { X as me } from "../../x-C-QzJ-qD.mjs";
-import { P as L } from "../../index-DC2JJV3a.mjs";
-import { T as pe } from "../../triangle-PcCcGXjr.mjs";
+import { s as g, C as he, A as fe } from "../../Form.module-CarfWK5T.mjs";
+import { X as me } from "../../x-Ck9Vk5Fo.mjs";
+import { P as L } from "../../index-D3kkcgee.mjs";
+import { T as pe } from "../../triangle-C4z906Wf.mjs";
 import '../../assets/CustomDataList.css';function M() {
   return M = Object.assign || function(i) {
     for (var a = 1; a < arguments.length; a++) {

package/dist/components/CustomSelect/CustomSelect.js

@@ -1,81 +1,81 @@
 import { jsxs as w, jsx as r } from "react/jsx-runtime";
-import X, { forwardRef as ne, useState as C, useRef as I } from "react";
-import { publish as G } from "../../utils/events.js";
+import G, { forwardRef as ie, useState as C, useRef as I } from "react";
+import { publish as J } from "../../utils/events.js";
 import { classes as m } from "../../utils/helpers.js";
-import { s as a, C as ie } from "../../ChoicesItem-CT9fXB0I.mjs";
-import { s as v, C as oe, A as ae } from "../../Form.module-Cd8qH2rj.mjs";
-import { X as ue } from "../../x-C-QzJ-qD.mjs";
-import { T as de } from "../../triangle-PcCcGXjr.mjs";
-import { P as x } from "../../index-DC2JJV3a.mjs";
+import { s as u, C as oe } from "../../ChoicesItem-CT9fXB0I.mjs";
+import { s as v, C as ae, A as ue } from "../../Form.module-CarfWK5T.mjs";
+import { X as de } from "../../x-Ck9Vk5Fo.mjs";
+import { T as fe } from "../../triangle-C4z906Wf.mjs";
+import { P as x } from "../../index-D3kkcgee.mjs";
 function R() {
   return R = Object.assign || function(t) {
-    for (var u = 1; u < arguments.length; u++) {
-      var l = arguments[u];
-      for (var n in l)
-        Object.prototype.hasOwnProperty.call(l, n) && (t[n] = l[n]);
+    for (var l = 1; l < arguments.length; l++) {
+      var n = arguments[l];
+      for (var i in n)
+        Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i]);
     }
     return t;
   }, R.apply(this, arguments);
 }
-function fe(t, u) {
+function he(t, l) {
   if (t == null) return {};
-  var l = he(t, u), n, c;
+  var n = me(t, l), i, c;
   if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(t);
-    for (c = 0; c < i.length; c++)
-      n = i[c], !(u.indexOf(n) >= 0) && Object.prototype.propertyIsEnumerable.call(t, n) && (l[n] = t[n]);
+    var o = Object.getOwnPropertySymbols(t);
+    for (c = 0; c < o.length; c++)
+      i = o[c], !(l.indexOf(i) >= 0) && Object.prototype.propertyIsEnumerable.call(t, i) && (n[i] = t[i]);
   }
-  return l;
+  return n;
 }
-function he(t, u) {
+function me(t, l) {
   if (t == null) return {};
-  var l = {}, n = Object.keys(t), c, i;
-  for (i = 0; i < n.length; i++)
-    c = n[i], !(u.indexOf(c) >= 0) && (l[c] = t[c]);
-  return l;
+  var n = {}, i = Object.keys(t), c, o;
+  for (o = 0; o < i.length; o++)
+    c = i[o], !(l.indexOf(c) >= 0) && (n[c] = t[c]);
+  return n;
 }
-var L = ne(function(t, u) {
-  var l = t.color, n = l === void 0 ? "currentColor" : l, c = t.size, i = c === void 0 ? 24 : c, T = fe(t, ["color", "size"]);
-  return /* @__PURE__ */ X.createElement("svg", R({
-    ref: u,
+var V = ie(function(t, l) {
+  var n = t.color, i = n === void 0 ? "currentColor" : n, c = t.size, o = c === void 0 ? 24 : c, T = he(t, ["color", "size"]);
+  return /* @__PURE__ */ G.createElement("svg", R({
+    ref: l,
     xmlns: "http://www.w3.org/2000/svg",
-    width: i,
-    height: i,
+    width: o,
+    height: o,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: n,
+    stroke: i,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, T), /* @__PURE__ */ X.createElement("polyline", {
+  }, T), /* @__PURE__ */ G.createElement("polyline", {
     points: "6 9 12 15 18 9"
   }));
 });
-L.propTypes = {
+V.propTypes = {
   color: x.string,
   size: x.oneOfType([x.string, x.number])
 };
-L.displayName = "ChevronDown";
-function ke({
+V.displayName = "ChevronDown";
+function Se({
   name: t,
-  options: u,
-  label: l = "",
-  width: n = 100,
+  options: l,
+  label: n = "",
+  width: i = 100,
   multiple: c = !1,
-  placeholder: i = "",
-  ValidIcon: T = oe,
-  InvalidIcon: J = ae,
-  expandIconType: V = "default",
+  placeholder: o = "",
+  ValidIcon: T = ae,
+  InvalidIcon: Q = ue,
+  expandIconType: L = "default",
   // default, chevron
   showValidation: E = !0,
-  ...Q
+  ...Y
 }) {
-  var U, B, F;
-  const [Y, Z] = C(`${v["form-field__input"]}`), p = I(null), $ = I(null), [q, K] = C(""), [D, ee] = C("clean"), [N, M] = C([]), [h, O] = C(u.map((e, d) => ({
+  var U, B, F, X;
+  const [Z, ee] = C(`${v["form-field__input"]}`), p = I(null), $ = I(null), [q, K] = C(""), [D, te] = C("clean"), [N, M] = C([]), [h, O] = C(l.map((e, d) => ({
     ...e,
     id: e != null && e.id ? e == null ? void 0 : e.id : `${t}-${d + 1}`,
     status: "active"
-  }))), [A, te] = C(null), [g, W] = C("hidden"), o = I(-1), se = `input-width--${n}`, z = (e, d, f = "selected") => {
+  }))), [A, se] = C(null), [g, W] = C("hidden"), a = I(-1), ce = `input-width--${i}`, z = (e, d, f = "selected") => {
     if (!c && f === "selected" || f === "highlighted") {
       for (const s of e)
         if (s.status === f) {
@@ -85,17 +85,17 @@ function ke({
     }
     for (const s of e)
       if (s.id === d && (c && s.status !== "selected" && f === "selected" && M([...N, s]), s.status !== "selected" && (s.status = f), f === "selected")) {
-        te(s);
+        se(s);
         break;
       }
     return e;
-  }, ce = () => {
+  }, re = () => {
     setTimeout(() => {
       p.current && p.current.checkValidity() ? K("") : p.current && K(p.current.validationMessage);
     }, 100);
   }, k = (e) => {
-    e == null || e.stopPropagation(), ee("touched"), Z(`${v["form-field__input"]} ${v["input--touched"]}`), g === "hidden" ? W("visible") : (W("hidden"), ce());
-  }, re = (e) => {
+    e == null || e.stopPropagation(), te("touched"), ee(`${v["form-field__input"]} ${v["input--touched"]}`), g === "hidden" ? W("visible") : (W("hidden"), re());
+  }, le = (e) => {
     const f = N.filter((y) => y.id !== e);
     M([...f]);
     let s = h;
@@ -112,13 +112,13 @@ function ke({
     O([...b]);
     const S = document.querySelector(`select[name="${t}"] > option[value="${e}"]`);
     S && (S.selected = !1);
-  }, le = (e) => {
+  }, ne = (e) => {
     const d = structuredClone(h), f = z(d, e);
-    O([...f]), k(null), o.current = -1;
+    O([...f]), k(null), a.current = -1;
     const s = h.find((b) => b.id === e);
     if (!s) return;
     const _ = document.querySelector(`select[name="${t}"] > option[value="${s.value}"]`);
-    _ && (_.selected = !0), G("scripps:customselect:selected", { value: s.value });
+    _ && (_.selected = !0), J("scripps:customselect:selected", { value: s.value });
   }, H = (e) => {
     if (e.key === "Tab" || (e.key === "ArrowDown" || e.key === "ArrowUp") && g !== "visible") return !0;
     e.stopPropagation(), e.preventDefault();
@@ -127,31 +127,31 @@ function ke({
       O([...b]);
     };
     if (d === "ArrowDown" && g === "visible")
-      o.current < h.length - 1 ? (s(o.current + 1), o.current++) : (s(0), o.current = 0);
+      a.current < h.length - 1 ? (s(a.current + 1), a.current++) : (s(0), a.current = 0);
     else if (d === "ArrowUp" && g === "visible")
-      o.current > 0 ? (s(o.current - 1), o.current--) : (s(h.length - 1), o.current = h.length - 1);
+      a.current > 0 ? (s(a.current - 1), a.current--) : (s(h.length - 1), a.current = h.length - 1);
     else if (d === "Enter")
-      if (g === "visible" && o.current !== -1) {
-        const _ = h[o.current].id, b = z(f, _);
-        O([...b]), k(null), o.current = -1;
+      if (g === "visible" && a.current !== -1) {
+        const _ = h[a.current].id, b = z(f, _);
+        O([...b]), k(null), a.current = -1;
         const S = h.find((j) => j.id === _);
         if (!S) return;
         const y = document.querySelector(`select[name="${t}"] > option[value="${S.value}"]`);
-        y && (y.selected = !0), G("scripps:customselect:selected", { value: S.value });
+        y && (y.selected = !0), J("scripps:customselect:selected", { value: S.value });
       } else
         k(null);
     else if (d === "Escape" && g === "visible")
-      k(null), o.current = -1;
+      k(null), a.current = -1;
     else
       return !1;
-    30 * o.current > 160 && $.current ? $.current.scrollTo(0, 30 * o.current) : $.current && $.current.scrollTo(0, 0);
+    30 * a.current > 160 && $.current ? $.current.scrollTo(0, 30 * a.current) : $.current && $.current.scrollTo(0, 0);
   };
   return /* @__PURE__ */ w(
     "label",
     {
       className: m([
         v["form-field"],
-        v[se]
+        v[ce]
       ]),
       htmlFor: t,
       children: [
@@ -162,32 +162,32 @@ function ke({
               v["form-field__icon"],
               (U = p.current) != null && U.validity.valid ? "" : v["form-field__icon--invalid"]
             ].join(" "),
-            style: l === "" ? { top: "0.4em" } : {},
+            style: n === "" ? { top: "0.4em" } : {},
             children: [
               ((B = p.current) == null ? void 0 : B.checkValidity()) && D === "touched" && /* @__PURE__ */ r(T, {}),
-              !((F = p.current) != null && F.checkValidity()) && D === "touched" && /* @__PURE__ */ r(J, {})
+              !((F = p.current) != null && F.checkValidity()) && D === "touched" && /* @__PURE__ */ r(Q, {})
             ]
           }
         ),
-        l !== "" && /* @__PURE__ */ r("span", { className: v["form-field__label"], children: l }),
+        n !== "" && /* @__PURE__ */ r("span", { className: v["form-field__label"], children: n }),
         /* @__PURE__ */ w(
           "select",
           {
             className: m([
-              a["custom-select__select"],
-              D === "touched" && E ? a["custom-select__select--touched"] : ""
+              u["custom-select__select"],
+              D === "touched" && E ? u["custom-select__select--touched"] : ""
             ]),
+            defaultValue: c ? l.filter((e) => e.selected).map((e) => e.value).filter((e) => e !== void 0) : ((X = l.find((e) => e.selected)) == null ? void 0 : X.value) || "",
             multiple: c,
             name: t,
             ref: p,
             tabIndex: -1,
-            ...Q,
+            ...Y,
             children: [
               /* @__PURE__ */ r("option", { value: "" }),
-              u.length && u.map((e) => /* @__PURE__ */ r(
+              l.length && l.map((e) => /* @__PURE__ */ r(
                 "option",
                 {
-                  selected: e.selected,
                   value: e.value,
                   children: e.label
                 },
@@ -199,49 +199,49 @@ function ke({
         /* @__PURE__ */ w(
           "div",
           {
-            className: m([Y, a["custom-select"], "custom-select"]),
+            className: m([Z, u["custom-select"], "custom-select"]),
             tabIndex: 0,
             onKeyDown: H,
             children: [
               c && /* @__PURE__ */ w(
                 "ul",
                 {
-                  className: m([a["custom-select__selections"], "custom-select__selections"]),
+                  className: m([u["custom-select__selections"], "custom-select__selections"]),
                   onClick: k,
                   children: [
                     N.length !== 0 && N.map((e) => /* @__PURE__ */ w(
                       "li",
                       {
-                        className: m([a["custom-select__selected"], "custom-select__selected"]),
+                        className: m([u["custom-select__selected"], "custom-select__selected"]),
                         children: [
                           e.label,
                           /* @__PURE__ */ r(
                             "button",
                             {
-                              className: a["custom-select__remove"],
+                              className: u["custom-select__remove"],
                               title: "remove",
                               type: "button",
                               onClick: (d) => {
-                                d.stopPropagation(), re(e.id);
+                                d.stopPropagation(), le(e.id);
                               },
-                              children: /* @__PURE__ */ r(ue, { height: 16, width: 16 })
+                              children: /* @__PURE__ */ r(de, { height: 16, width: 16 })
                             }
                           )
                         ]
                       }
                     )),
-                    N.length === 0 && i !== "" && /* @__PURE__ */ r("li", { className: m([a["custom-select__placeholder"], "custom-select__placeholder"]), children: i })
+                    N.length === 0 && o !== "" && /* @__PURE__ */ r("li", { className: m([u["custom-select__placeholder"], "custom-select__placeholder"]), children: o })
                   ]
                 }
               ),
               !c && /* @__PURE__ */ w(
                 "div",
                 {
-                  className: `${a["custom-select__selection"]}`,
+                  className: `${u["custom-select__selection"]}`,
                   onClick: k,
                   children: [
                     A && A.label,
-                    !A && i !== "" && /* @__PURE__ */ r("span", { className: m([a["custom-select__placeholder"], "custom-select__placeholder"]), children: i })
+                    !A && o !== "" && /* @__PURE__ */ r("span", { className: m([u["custom-select__placeholder"], "custom-select__placeholder"]), children: o })
                   ]
                 }
               ),
@@ -249,20 +249,20 @@ function ke({
                 "div",
                 {
                   className: m([
-                    a["custom-select__choices-wrapper"],
+                    u["custom-select__choices-wrapper"],
                     "custom-select__choices-wrapper",
-                    g === "visible" ? "" : a["custom-select__choices-wrapper--hidden"]
+                    g === "visible" ? "" : u["custom-select__choices-wrapper--hidden"]
                   ]),
                   children: /* @__PURE__ */ r(
                     "div",
                     {
-                      className: m([a["custom-select__choices"], "custom-select__choices"]),
+                      className: m([u["custom-select__choices"], "custom-select__choices"]),
                       ref: $,
                       onKeyDown: H,
                       children: /* @__PURE__ */ r("ul", { children: h.length !== 0 && h.map((e) => /* @__PURE__ */ r(
-                        ie,
+                        oe,
                         {
-                          handleOnClick: le,
+                          handleOnClick: ne,
                           item: e
                         },
                         `choice-${e.id}`
@@ -271,8 +271,8 @@ function ke({
                   )
                 }
               ),
-              V === "default" && /* @__PURE__ */ r("i", { className: a["custom-select__icon"], children: /* @__PURE__ */ r(de, {}) }),
-              V === "chevron" && /* @__PURE__ */ r("i", { className: m([a["custom-select__icon"], a["custom-select__icon--chevron"], "custom-select__icon--chevron"]), children: /* @__PURE__ */ r(L, {}) })
+              L === "default" && /* @__PURE__ */ r("i", { className: u["custom-select__icon"], children: /* @__PURE__ */ r(fe, {}) }),
+              L === "chevron" && /* @__PURE__ */ r("i", { className: m([u["custom-select__icon"], u["custom-select__icon--chevron"], "custom-select__icon--chevron"]), children: /* @__PURE__ */ r(V, {}) })
             ]
           }
         ),
@@ -282,6 +282,6 @@ function ke({
   );
 }
 export {
-  ke as CustomSelect,
-  ke as default
+  Se as CustomSelect,
+  Se as default
 };