@searchcraft/react-sdk 0.1.3 → 0.1.4

package/dist/index.js

@@ -1,15 +1,15 @@
-import { jsx as t, jsxs as h, Fragment as x } from "react/jsx-runtime";
-import K, { useContext as J, useState as T, useMemo as H, useEffect as z } from "react";
-var V = Object.defineProperty, X = (n, e, o) => e in n ? V(n, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : n[e] = o, E = (n, e, o) => X(n, typeof e != "symbol" ? e + "" : e, o);
-class et {
+import { jsx as t, jsxs as u, Fragment as j } from "react/jsx-runtime";
+import { createContext as Y, useContext as V, useState as y, useMemo as U, useEffect as tt, useCallback as at } from "react";
+var st = Object.defineProperty, ct = (n, e, i) => e in n ? st(n, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[e] = i, N = (n, e, i) => ct(n, typeof e != "symbol" ? e + "" : e, i);
+class yn {
   constructor(e) {
-    if (E(this, "config"), E(this, "search", async (o) => {
+    if (N(this, "config"), N(this, "search", async (i) => {
       try {
-        const i = this.config.index.join(","), c = `${this.config.endpointURL}/search`, r = {
-          query: o.query,
-          mode: o.mode,
-          app: i
-        }, a = {
+        const a = this.config.index.join(","), c = `${this.config.endpointURL}/search`, r = {
+          query: i.query,
+          mode: i.mode,
+          app: a
+        }, s = {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
@@ -17,9 +17,9 @@ class et {
           },
           body: JSON.stringify(r)
         };
-        return await (await fetch(c, a)).json();
-      } catch (i) {
-        return i;
+        return await (await fetch(c, s)).json();
+      } catch (a) {
+        return a;
       }
     }), !e.endpointURL || !e.index)
       throw new Error("Endpoint URL and Index value(s) must be provided");
@@ -27,12 +27,12 @@ class et {
   }
 }
 var _ = /* @__PURE__ */ ((n) => (n[n.DEBUG = 0] = "DEBUG", n[n.INFO = 1] = "INFO", n[n.WARN = 2] = "WARN", n[n.ERROR = 3] = "ERROR", n))(_ || {});
-class Y {
+class ht {
   constructor(e) {
-    E(this, "logLevel"), E(this, "logFormatter"), this.logLevel = e.logLevel || 1, this.logFormatter = e.logFormatter || this.defaultFormatter;
+    N(this, "logLevel"), N(this, "logFormatter"), this.logLevel = e.logLevel || 1, this.logFormatter = e.logFormatter || this.defaultFormatter;
   }
-  defaultFormatter(e, o) {
-    return `[${_[e]}] ${(/* @__PURE__ */ new Date()).toISOString()}: ${o}`;
+  defaultFormatter(e, i) {
+    return `[${_[e]}] ${(/* @__PURE__ */ new Date()).toISOString()}: ${i}`;
   }
   debug(e) {
     this.logLevel <= 0 && console.log(this.logFormatter(0, e));
@@ -47,7 +47,7 @@ class Y {
     this.logLevel <= 3 && console.error(this.logFormatter(3, e));
   }
 }
-const nn = {
+const lt = {
   error: null,
   index: [""],
   isRequesting: !1,
@@ -55,71 +55,82 @@ const nn = {
   query: "",
   setQuery: (n) => n,
   search: async () => null
-}, G = K.createContext(nn), tn = ({
+}, nt = Y(lt), et = Y(
+  void 0
+), ut = ({
   children: n,
   searchcraft: e,
-  debug: o = !1
+  debug: i = !1
 }) => {
-  const [i, c] = T(""), [r, a] = T(!1), [l, s] = T(null), u = H(() => o ? new Y({ logLevel: _.DEBUG }) : null, [o]), p = (f, R) => {
-    if (u)
-      switch (f) {
+  const [a, c] = y(""), [r, s] = y(!1), [l, o] = y(null), [p, m] = y("light"), h = U(() => i ? new ht({ logLevel: _.DEBUG }) : null, [i]), d = (v, I) => {
+    if (h)
+      switch (v) {
         case _.DEBUG:
-          u.debug(R);
+          h.debug(I);
           break;
         case _.INFO:
-          u.info(R);
+          h.info(I);
           break;
         case _.WARN:
-          u.warn(R);
+          h.warn(I);
           break;
         case _.ERROR:
-          u.error(R);
+          h.error(I);
           break;
       }
-  }, L = async () => {
-    p(_.INFO, `Starting search with query: "${i}"`), a(!0);
+  }, R = async () => {
+    d(_.INFO, `Starting search with query: "${a}"`), s(!0);
     try {
-      const f = await e.search({ query: i, mode: "fuzzy" });
-      s(f), p(_.DEBUG, `Search results: ${JSON.stringify(f)}`);
-    } catch (f) {
-      p(
+      const v = await e.search({ query: a, mode: "fuzzy" });
+      o(v), d(_.DEBUG, `Search results: ${JSON.stringify(v)}`);
+    } catch (v) {
+      d(
         _.ERROR,
-        `Search failed with error: ${f.message}`
+        `Search failed with error: ${v.message}`
       );
     } finally {
-      a(!1);
+      s(!1);
     }
   };
-  z(() => (p(_.INFO, "SearchcraftProvider mounted."), () => {
-    p(_.INFO, "SearchcraftProvider unmounted.");
-  }), [u]);
-  const g = {
+  tt(() => (d(_.INFO, "SearchcraftProvider mounted."), () => {
+    d(_.INFO, "SearchcraftProvider unmounted.");
+  }), [h]);
+  const F = {
     error: null,
     index: e.config.index,
     isRequesting: r,
     mode: "fuzzy",
-    query: i,
-    search: L,
+    query: a,
+    search: R,
     searchResults: l,
     setQuery: c
-  };
-  return /* @__PURE__ */ t(G.Provider, { value: g, children: n });
-}, I = () => {
-  const n = J(G);
+  }, k = at(() => {
+    m((v) => v === "light" ? "dark" : "light");
+  }, []), ot = U(
+    () => ({
+      theme: p,
+      toggleTheme: k
+    }),
+    [p, k]
+  );
+  return /* @__PURE__ */ t(nt.Provider, { value: F, children: /* @__PURE__ */ t(et.Provider, { value: ot, children: n }) });
+}, S = () => {
+  const n = V(nt);
   if (!n)
     throw new Error(
       "Searchcraft compound components must be used within Searchcraft.Provider"
     );
   return n;
-}, en = "_formLTR_dvuqa_5", rn = "_formRTL_dvuqa_9", on = "_searchContainer_dvuqa_13", v = {
-  formLTR: en,
-  formRTL: rn,
-  searchContainer: on
+}, b = () => {
+  const n = V(et);
+  if (!n)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return n;
 };
-function an(n) {
+function pt(n) {
   return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n;
 }
-var Q = { exports: {} };
+var rt = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -128,46 +139,54 @@ var Q = { exports: {} };
 (function(n) {
   (function() {
     var e = {}.hasOwnProperty;
-    function o() {
-      for (var r = "", a = 0; a < arguments.length; a++) {
-        var l = arguments[a];
-        l && (r = c(r, i(l)));
+    function i() {
+      for (var r = "", s = 0; s < arguments.length; s++) {
+        var l = arguments[s];
+        l && (r = c(r, a(l)));
       }
       return r;
     }
-    function i(r) {
+    function a(r) {
       if (typeof r == "string" || typeof r == "number")
         return r;
       if (typeof r != "object")
         return "";
       if (Array.isArray(r))
-        return o.apply(null, r);
+        return i.apply(null, r);
       if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
         return r.toString();
-      var a = "";
+      var s = "";
       for (var l in r)
-        e.call(r, l) && r[l] && (a = c(a, l));
-      return a;
+        e.call(r, l) && r[l] && (s = c(s, l));
+      return s;
     }
-    function c(r, a) {
-      return a ? r ? r + " " + a : r + a : r;
+    function c(r, s) {
+      return s ? r ? r + " " + s : r + s : r;
     }
-    n.exports ? (o.default = o, n.exports = o) : window.classNames = o;
+    n.exports ? (i.default = i, n.exports = i) : window.classNames = i;
   })();
-})(Q);
-var sn = Q.exports;
-const d = /* @__PURE__ */ an(sn), cn = "_inputContainerLTR_s1rq8_5", ln = "_inputContainerRTL_s1rq8_9", un = "_inputLTR_s1rq8_14", hn = "_inputRTL_s1rq8_35", pn = "_inputErrorLTR_s1rq8_57", dn = "_inputErrorRTL_s1rq8_82", b = {
-  inputContainerLTR: cn,
-  inputContainerRTL: ln,
-  inputLTR: un,
-  inputRTL: hn,
-  inputErrorLTR: pn,
-  inputErrorRTL: dn
-}, fn = "_inputClearButtonLTR_t63ei_5", _n = "_inputClearButtonRTL_t63ei_19", P = {
-  inputClearButtonLTR: fn,
-  inputClearButtonRTL: _n
-}, O = () => /* @__PURE__ */ h("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", children: [
-  /* @__PURE__ */ t("title", { children: "Searchcraft Clear Input Icon" }),
+})(rt);
+var gt = rt.exports;
+const L = /* @__PURE__ */ pt(gt), Lt = "_formLTR_dvuqa_5", dt = "_formRTL_dvuqa_9", _t = "_searchContainer_dvuqa_13", D = {
+  formLTR: Lt,
+  formRTL: dt,
+  searchContainer: _t
+}, ft = "_inputContainerLTR_1nio0_5", mt = "_inputContainerRTL_1nio0_9", Ct = "_inputLightLTR_1nio0_14", Rt = "_inputDarkLTR_1nio0_38", kt = "_inputErrorLightLTR_1nio0_62", vt = "_inputErrorDarkLTR_1nio0_90", Tt = "_inputLightRTL_1nio0_118", bt = "_inputDarkRTL_1nio0_143", yt = "_inputErrorLightRTL_1nio0_168", Dt = "_inputErrorDarkRTL_1nio0_197", C = {
+  inputContainerLTR: ft,
+  inputContainerRTL: mt,
+  inputLightLTR: Ct,
+  inputDarkLTR: Rt,
+  inputErrorLightLTR: kt,
+  inputErrorDarkLTR: vt,
+  inputLightRTL: Tt,
+  inputDarkRTL: bt,
+  inputErrorLightRTL: yt,
+  inputErrorDarkRTL: Dt
+}, St = "_inputClearButtonLTR_t63ei_5", It = "_inputClearButtonRTL_t63ei_19", z = {
+  inputClearButtonLTR: St,
+  inputClearButtonRTL: It
+}, Z = () => /* @__PURE__ */ u("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", children: [
+  /* @__PURE__ */ t("title", { children: "Searchcraft Clear Input Icon Light" }),
   /* @__PURE__ */ t(
     "path",
     {
@@ -178,8 +197,30 @@ const d = /* @__PURE__ */ an(sn), cn = "_inputContainerLTR_s1rq8_5", ln = "_inpu
       strokeLinejoin: "round"
     }
   )
-] }), U = () => /* @__PURE__ */ h("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", children: [
-  /* @__PURE__ */ t("title", { children: "Searchcraft Arrow Right Icon" }),
+] }), G = () => /* @__PURE__ */ u(
+  "svg",
+  {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ t("title", { children: "Searchcraft Clear Input Icon Dark" }),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z",
+          stroke: "white",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+), Q = () => /* @__PURE__ */ u("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", children: [
+  /* @__PURE__ */ t("title", { children: "Searchcraft Arrow Right Icon Light" }),
   /* @__PURE__ */ t(
     "path",
     {
@@ -190,72 +231,103 @@ const d = /* @__PURE__ */ an(sn), cn = "_inputContainerLTR_s1rq8_5", ln = "_inpu
       strokeLinejoin: "round"
     }
   )
-] }), mn = "_spinnerContainer_1noam_1", Cn = "_spinnerDark_1noam_7", Ln = "_spinning_1noam_1", gn = "_spinnerLight_1noam_16", w = {
-  spinnerContainer: mn,
-  spinnerDark: Cn,
-  spinning: Ln,
-  spinnerLight: gn
-}, W = () => /* @__PURE__ */ t("div", { className: w.spinnerContainer, children: /* @__PURE__ */ t("div", { className: w.spinnerLight }) }), B = () => /* @__PURE__ */ t("div", { className: w.spinnerContainer, children: /* @__PURE__ */ t("div", { className: w.spinnerDark }) }), M = ({
+] }), K = () => /* @__PURE__ */ u(
+  "svg",
+  {
+    width: "8",
+    height: "12",
+    viewBox: "0 0 8 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ t("title", { children: "Searchcraft Arrow Right Icon Dark" }),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M1.5 11L6.5 6L1.5 1",
+          stroke: "#BFBFBF",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+), wt = "_spinnerContainer_1noam_1", Et = "_spinnerDark_1noam_7", Nt = "_spinning_1noam_1", xt = "_spinnerLight_1noam_16", x = {
+  spinnerContainer: wt,
+  spinnerDark: Et,
+  spinning: Nt,
+  spinnerLight: xt
+}, J = () => /* @__PURE__ */ t("div", { className: x.spinnerContainer, children: /* @__PURE__ */ t("div", { className: x.spinnerLight }) }), B = () => /* @__PURE__ */ t("div", { className: x.spinnerContainer, children: /* @__PURE__ */ t("div", { className: x.spinnerDark }) }), $ = ({
   onClearInput: n,
   rightToLeftOrientation: e = !1
 }) => {
-  const { isRequesting: o } = I();
+  const { isRequesting: i } = S(), { theme: a } = b(), c = a === "light";
   return e ? /* @__PURE__ */ t(
     "button",
     {
-      className: d(
-        P.inputClearButtonRTL,
+      className: L(
+        z.inputClearButtonRTL,
         ".sc-clear-input-button-rtl"
       ),
       onClick: n,
       type: "button",
-      children: o ? /* @__PURE__ */ t(W, {}) : /* @__PURE__ */ t(O, {})
+      children: i ? c ? /* @__PURE__ */ t(J, {}) : /* @__PURE__ */ t(B, {}) : c ? /* @__PURE__ */ t(Z, {}) : /* @__PURE__ */ t(G, {})
     }
   ) : /* @__PURE__ */ t(
     "button",
     {
-      className: d(
-        P.inputClearButtonLTR,
+      className: L(
+        z.inputClearButtonLTR,
         ".sc-clear-input-button-ltr"
       ),
       onClick: n,
       type: "button",
-      children: o ? /* @__PURE__ */ t(W, {}) : /* @__PURE__ */ t(O, {})
+      children: i ? c ? /* @__PURE__ */ t(J, {}) : /* @__PURE__ */ t(B, {}) : c ? /* @__PURE__ */ t(Z, {}) : /* @__PURE__ */ t(G, {})
     }
   );
-}, Rn = "_inputCaptionLTR_xoy9r_5", bn = "_inputCaptionErrorLTR_xoy9r_14", vn = "_inputCaptionRTL_xoy9r_24", Sn = "_inputCaptionErrorRTL_xoy9r_34", N = {
-  inputCaptionLTR: Rn,
-  inputCaptionErrorLTR: bn,
-  inputCaptionRTL: vn,
-  inputCaptionErrorRTL: Sn
-}, F = ({
+}, Bt = "_inputCaptionLightLTR_f6rxj_5", Mt = "_inputCaptionDarkLTR_f6rxj_14", Ft = "_inputCaptionErrorLightLTR_f6rxj_23", jt = "_inputCaptionErrorDarkLTR_f6rxj_32", $t = "_inputCaptionLightRTL_f6rxj_41", qt = "_inputCaptionDarkRTL_f6rxj_51", At = "_inputCaptionErrorLightRTL_f6rxj_61", Pt = "_inputCaptionErrorDarkRTL_f6rxj_71", T = {
+  inputCaptionLightLTR: Bt,
+  inputCaptionDarkLTR: Mt,
+  inputCaptionErrorLightLTR: Ft,
+  inputCaptionErrorDarkLTR: jt,
+  inputCaptionLightRTL: $t,
+  inputCaptionDarkRTL: qt,
+  inputCaptionErrorLightRTL: At,
+  inputCaptionErrorDarkRTL: Pt
+}, q = ({
   error: n = !1,
   inputCaptionClassName: e,
-  inputCaptionValue: o = "Enter Search",
-  rightToLeftOrientation: i = !1
-}) => i ? /* @__PURE__ */ t(
-  "p",
-  {
-    className: d(
-      n ? N.inputCaptionErrorRTL : N.inputCaptionRTL,
-      e
-    ),
-    children: o
-  }
-) : /* @__PURE__ */ t(
-  "p",
-  {
-    className: d(
-      n ? N.inputCaptionErrorLTR : N.inputCaptionLTR,
-      e
-    ),
-    children: o
-  }
-), yn = "_inputIconLTR_cusap_5", Tn = "_inputIconRTL_cusap_13", k = {
-  inputIconLTR: yn,
-  inputIconRTL: Tn
-}, In = () => /* @__PURE__ */ h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-  /* @__PURE__ */ t("title", { children: "Searchcraft Search Icon" }),
+  inputCaptionValue: i = "Enter Search",
+  rightToLeftOrientation: a = !1
+}) => {
+  const { theme: c } = b(), r = c === "light";
+  return a ? /* @__PURE__ */ t(
+    "p",
+    {
+      className: L(
+        n ? r ? T.inputCaptionErrorLightRTL : T.inputCaptionErrorDarkRTL : r ? T.inputCaptionLightRTL : T.inputCaptionDarkRTL,
+        e,
+        ".searchcraft-input-caption"
+      ),
+      children: i
+    }
+  ) : /* @__PURE__ */ t(
+    "p",
+    {
+      className: L(
+        n ? r ? T.inputCaptionErrorLightLTR : T.inputCaptionErrorDarkLTR : r ? T.inputCaptionLightLTR : T.inputCaptionDarkLTR,
+        e,
+        ".searchcraft-input-caption"
+      ),
+      children: i
+    }
+  );
+}, Wt = "_inputIconLTR_cusap_5", Ot = "_inputIconRTL_cusap_13", w = {
+  inputIconLTR: Wt,
+  inputIconRTL: Ot
+}, Ut = () => /* @__PURE__ */ u("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+  /* @__PURE__ */ t("title", { children: "Searchcraft Search Icon Light" }),
   /* @__PURE__ */ t(
     "path",
     {
@@ -266,8 +338,30 @@ const d = /* @__PURE__ */ an(sn), cn = "_inputContainerLTR_s1rq8_5", ln = "_inpu
       strokeLinejoin: "round"
     }
   )
-] }), Nn = () => /* @__PURE__ */ h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-  /* @__PURE__ */ t("title", { children: "Searchcraft Error Search Icon" }),
+] }), zt = () => /* @__PURE__ */ u(
+  "svg",
+  {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ t("title", { children: "Searchcraft Search Icon Dark" }),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M16.5 16.5L12.875 12.875M14.8333 8.16667C14.8333 11.8486 11.8486 14.8333 8.16667 14.8333C4.48477 14.8333 1.5 11.8486 1.5 8.16667C1.5 4.48477 4.48477 1.5 8.16667 1.5C11.8486 1.5 14.8333 4.48477 14.8333 8.16667Z",
+          stroke: "#E6E6E6",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+), Zt = () => /* @__PURE__ */ u("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+  /* @__PURE__ */ t("title", { children: "Searchcraft Error Search Icon Light" }),
   /* @__PURE__ */ t(
     "path",
     {
@@ -278,178 +372,207 @@ const d = /* @__PURE__ */ an(sn), cn = "_inputContainerLTR_s1rq8_5", ln = "_inpu
       strokeLinejoin: "round"
     }
   )
-] }), q = ({
-  error: n = !1,
-  rightToLeftOrientation: e = !1
-}) => n ? /* @__PURE__ */ t(
-  "div",
-  {
-    className: e ? k.inputIconRTL : k.inputIconLTR,
-    children: /* @__PURE__ */ t(Nn, {})
-  }
-) : /* @__PURE__ */ t(
-  "div",
+] }), Gt = () => /* @__PURE__ */ u(
+  "svg",
   {
-    className: e ? k.inputIconRTL : k.inputIconLTR,
-    children: /* @__PURE__ */ t(In, {})
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ t("title", { children: "Searchcraft Error Search Icon Dark" }),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M16.5 16.5L12.875 12.875M14.8333 8.16667C14.8333 11.8486 11.8486 14.8333 8.16667 14.8333C4.48477 14.8333 1.5 11.8486 1.5 8.16667C1.5 4.48477 4.48477 1.5 8.16667 1.5C11.8486 1.5 14.8333 4.48477 14.8333 8.16667Z",
+          stroke: "#BFBFBF",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
   }
-), j = ({
+), A = ({
+  error: n = !1,
+  rightToLeftOrientation: e = !1
+}) => {
+  const { theme: i } = b(), a = i === "light";
+  return n ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: e ? w.inputIconRTL : w.inputIconLTR,
+      children: a ? /* @__PURE__ */ t(Zt, {}) : /* @__PURE__ */ t(Gt, {})
+    }
+  ) : /* @__PURE__ */ t(
+    "div",
+    {
+      className: e ? w.inputIconRTL : w.inputIconLTR,
+      children: a ? /* @__PURE__ */ t(Ut, {}) : /* @__PURE__ */ t(zt, {})
+    }
+  );
+}, P = ({
   error: n = !1,
   formClassName: e = "",
-  inputCaptionClassName: o = "",
-  inputClassName: i = "",
+  inputCaptionClassName: i = "",
+  inputClassName: a = "",
   inputCaptionValue: c = "",
   onClearInput: r,
-  onSearchInputChange: a,
+  onSearchInputChange: s,
   placeholderValue: l = "Enter Search",
-  rightToLeftOrientation: s = !1,
-  query: u = ""
+  rightToLeftOrientation: o = !1,
+  query: p = ""
 }) => {
-  const p = s ? b.inputContainerRTL : b.inputContainerLTR;
+  const { theme: m } = b(), h = m === "light", d = o ? C.inputContainerRTL : C.inputContainerLTR;
   return /* @__PURE__ */ t(
     "div",
     {
-      className: d(
-        p,
+      className: L(
+        d,
         e,
         "searchcraft-input-form"
       ),
-      children: s ? /* @__PURE__ */ h(x, { children: [
+      children: o ? /* @__PURE__ */ u(j, { children: [
         /* @__PURE__ */ t(
           "input",
           {
-            className: d(
-              n ? b.inputErrorRTL : b.inputRTL,
-              i,
+            className: L(
+              n ? h ? C.inputErrorLightRTL : C.inputErrorDarkRTL : h ? C.inputLightRTL : C.inputDarkRTL,
+              a,
               "searchcraft-input"
             ),
             id: "searchcraft-input-id",
-            onChange: a,
+            onChange: s,
             placeholder: l,
             type: "text",
-            value: u
+            value: p
           }
         ),
         c && /* @__PURE__ */ t(
-          F,
+          q,
           {
-            inputCaptionClassName: o,
+            inputCaptionClassName: i,
             inputCaptionValue: c,
-            rightToLeftOrientation: s
+            rightToLeftOrientation: o
           }
         ),
-        u.length > 0 && /* @__PURE__ */ t(
-          M,
+        p.length > 0 && /* @__PURE__ */ t(
+          $,
           {
             onClearInput: r,
-            rightToLeftOrientation: s
+            rightToLeftOrientation: o
           }
         ),
         /* @__PURE__ */ t(
-          q,
+          A,
           {
             error: n,
-            rightToLeftOrientation: s
+            rightToLeftOrientation: o
           }
         )
-      ] }) : /* @__PURE__ */ h(x, { children: [
+      ] }) : /* @__PURE__ */ u(j, { children: [
         /* @__PURE__ */ t(
           "input",
           {
-            className: d(
-              n ? b.inputErrorLTR : b.inputLTR,
-              i,
+            className: L(
+              n ? h ? C.inputErrorLightLTR : C.inputErrorDarkLTR : h ? C.inputLightLTR : C.inputDarkLTR,
+              a,
               "searchcraft-input"
             ),
             id: "searchcraft-input-id",
-            onChange: a,
+            onChange: s,
             placeholder: l,
             type: "text",
-            value: u
+            value: p
           }
         ),
         c && /* @__PURE__ */ t(
-          F,
+          q,
           {
-            inputCaptionClassName: o,
+            inputCaptionClassName: i,
             inputCaptionValue: c,
-            rightToLeftOrientation: s
+            rightToLeftOrientation: o
           }
         ),
-        u.length > 0 && /* @__PURE__ */ t(
-          M,
+        p.length > 0 && /* @__PURE__ */ t(
+          $,
           {
             onClearInput: r,
-            rightToLeftOrientation: s
+            rightToLeftOrientation: o
           }
         ),
-        /* @__PURE__ */ t(q, { error: n })
+        /* @__PURE__ */ t(A, { error: n })
       ] })
     }
   );
-}, kn = "_label_1euwf_5", En = {
-  label: kn
-}, D = ({
+}, Qt = "_labelLight_14iga_5", Kt = "_labelDark_14iga_14", H = {
+  labelLight: Qt,
+  labelDark: Kt
+}, W = ({
   className: n,
   label: e = "Enter Search"
-}) => /* @__PURE__ */ t(
-  "label",
-  {
-    className: d(En.label, n),
-    htmlFor: "searchcraft-input-id",
-    children: e
-  }
-), wn = ({
+}) => {
+  const { theme: i } = b(), a = i === "light" ? H.labelLight : H.labelDark;
+  return /* @__PURE__ */ t(
+    "label",
+    {
+      className: L(a, n),
+      htmlFor: "searchcraft-input-id",
+      children: e
+    }
+  );
+}, Jt = ({
   autoSearchFormClass: n = "",
   handleSubmit: e,
-  inputCaptionValue: o = "",
-  labelForInput: i = "Search",
+  inputCaptionValue: i = "",
+  labelForInput: a = "Search",
   onClearInput: c = () => {
   },
   placeholderValue: r = "Search here",
-  rightToLeftOrientation: a = !1,
+  rightToLeftOrientation: s = !1,
   searchContainerClass: l = ""
 }) => {
-  const { query: s, setQuery: u } = I(), [p, L] = T(!1), g = a ? v.formRTL : v.formLTR, f = (S) => {
-    S.preventDefault(), u(S.currentTarget.value), s !== S.currentTarget.value && L(!0);
-  }, R = () => {
-    u(""), c();
+  const { query: o, setQuery: p } = S(), [m, h] = y(!1), d = s ? D.formRTL : D.formLTR, R = (k) => {
+    k.preventDefault(), p(k.currentTarget.value), o !== k.currentTarget.value && h(!0);
+  }, F = () => {
+    p(""), c();
   };
-  return z(() => {
-    if (p)
-      e(s), L(!1);
+  return tt(() => {
+    if (m)
+      e(o), h(!1);
     else
       return;
-  }, [p, e, s]), /* @__PURE__ */ h(
+  }, [m, e, o]), /* @__PURE__ */ u(
     "form",
     {
-      className: d(
-        g,
+      className: L(
+        d,
         n,
         "searchcraft-auto-search-form"
       ),
-      onSubmit: (S) => {
-        S.preventDefault();
+      onSubmit: (k) => {
+        k.preventDefault();
       },
       children: [
-        /* @__PURE__ */ t(D, { label: i }),
+        /* @__PURE__ */ t(W, { label: a }),
         /* @__PURE__ */ t(
           "div",
           {
-            className: d(
-              v.searchContainer,
+            className: L(
+              D.searchContainer,
               l,
               "searchcraft-input-container"
             ),
             children: /* @__PURE__ */ t(
-              j,
+              P,
               {
-                inputCaptionValue: o,
-                onClearInput: R,
-                onSearchInputChange: f,
+                inputCaptionValue: i,
+                onClearInput: F,
+                onSearchInputChange: R,
                 placeholderValue: r,
-                query: s,
-                rightToLeftOrientation: a
+                query: o,
+                rightToLeftOrientation: s
               }
             )
           }
@@ -457,188 +580,192 @@ const d = /* @__PURE__ */ an(sn), cn = "_inputContainerLTR_s1rq8_5", ln = "_inpu
       ]
     }
   );
-}, Bn = "_button_8jqm2_5", xn = "_spinnerMarginRight_8jqm2_26", Mn = "_spinnerMarginLeft_8jqm2_32", Fn = "_buttonLabel_8jqm2_38", qn = "_rightandback_8jqm2_1", y = {
-  button: Bn,
-  spinnerMarginRight: xn,
-  spinnerMarginLeft: Mn,
-  buttonLabel: Fn,
-  rightandback: qn
-}, $ = ({
+}, Ht = "_buttonLight_97gf2_5", Xt = "_buttonDark_97gf2_28", Yt = "_spinnerMarginRight_97gf2_51", Vt = "_spinnerMarginLeft_97gf2_57", tn = "_buttonLabel_97gf2_63", E = {
+  buttonLight: Ht,
+  buttonDark: Xt,
+  spinnerMarginRight: Yt,
+  spinnerMarginLeft: Vt,
+  buttonLabel: tn,
+  "right-and-back": "_right-and-back_97gf2_1"
+}, M = ({
   className: n,
   iconElement: e,
-  iconOnly: o = !1,
-  iconPosition: i = "left",
+  iconOnly: i = !1,
+  iconPosition: a = "left",
   label: c = "Search",
   onClick: r
 }) => {
-  const { isRequesting: a } = I();
-  return /* @__PURE__ */ h(x, { children: [
-    o && /* @__PURE__ */ t(
+  const { isRequesting: s } = S(), { theme: l } = b(), o = l === "light" ? E.buttonLight : E.buttonDark;
+  return /* @__PURE__ */ u(j, { children: [
+    i && /* @__PURE__ */ t(
       "button",
       {
-        className: d(
-          y.button,
-          n,
-          ".searchcraft-button"
-        ),
+        className: L(o, n, ".searchcraft-button"),
         onClick: r,
         type: "submit",
-        children: a ? /* @__PURE__ */ t(B, {}) : e
+        children: s ? /* @__PURE__ */ t(B, {}) : e
       }
     ),
-    !o && /* @__PURE__ */ h(
+    !i && /* @__PURE__ */ u(
       "button",
       {
-        className: d(
-          y.button,
-          n,
-          ".searchcraft-button"
-        ),
+        className: L(o, n, ".searchcraft-button"),
         onClick: r,
         type: "submit",
         children: [
-          i === "left" && a ? /* @__PURE__ */ t("div", { className: y.spinnerMarginRight, children: /* @__PURE__ */ t(B, {}) }) : e,
+          a === "left" && s ? /* @__PURE__ */ t("div", { className: E.spinnerMarginRight, children: /* @__PURE__ */ t(B, {}) }) : e,
           /* @__PURE__ */ t(
             "span",
             {
-              className: d(
-                a && y.buttonLabel,
+              className: L(
+                s && E.buttonLabel,
                 n,
                 ".searchcraft-button-label"
               ),
               children: c
             }
-          ),
-          i === "right" && a ? /* @__PURE__ */ t("div", { className: y.spinnerMarginLeft, children: /* @__PURE__ */ t(B, {}) }) : e
+          )
         ]
       }
     )
   ] });
-}, $n = "_errorMessage_12dc9_5", jn = {
-  errorMessage: $n
-}, A = ({ className: n, errorMessage: e }) => /* @__PURE__ */ t("p", { className: d(jn.errorMessage, n), children: e || "Search term is required." }), Dn = ({
+}, nn = "_errorMessageLight_1endn_5", en = "_errorMessageDark_1endn_14", X = {
+  errorMessageLight: nn,
+  errorMessageDark: en
+}, O = ({ className: n, errorMessage: e }) => {
+  const { theme: i } = b(), a = i === "light" ? X.errorMessageLight : X.errorMessageDark;
+  return /* @__PURE__ */ t("p", { className: L(a, n), children: e || "Search term is required." });
+}, rn = ({
   errorMessage: n,
   handleSubmit: e,
-  labelForInput: o = "Search",
-  onClearInput: i = () => {
+  labelForInput: i = "Search",
+  onClearInput: a = () => {
   },
   placeholderValue: c = "Enter Search Term",
   rightToLeftOrientation: r = !1
 }) => {
-  const { query: a, setQuery: l } = I(), [s, u] = T(!1), p = (f) => {
-    f.preventDefault(), a.trim() === "" ? u(!0) : (u(!1), e(a));
-  }, L = (f) => l(f.target.value), g = () => {
-    l(""), i();
+  const { query: s, setQuery: l } = S(), [o, p] = y(!1), m = (R) => {
+    R.preventDefault(), s.trim() === "" ? p(!0) : (p(!1), e(s));
+  }, h = (R) => l(R.target.value), d = () => {
+    l(""), a();
   };
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ u(
     "form",
     {
-      className: r ? v.formRTL : v.formLTR,
-      onSubmit: p,
+      className: r ? D.formRTL : D.formLTR,
+      onSubmit: m,
       children: [
-        /* @__PURE__ */ t(D, { label: o }),
-        /* @__PURE__ */ h("div", { className: v.searchContainer, children: [
-          r && /* @__PURE__ */ t($, {}),
+        /* @__PURE__ */ t(W, { label: i }),
+        /* @__PURE__ */ u("div", { className: D.searchContainer, children: [
+          r && /* @__PURE__ */ t(M, {}),
           /* @__PURE__ */ t(
-            j,
+            P,
             {
-              error: s,
-              onClearInput: g,
-              onSearchInputChange: L,
+              error: o,
+              onClearInput: d,
+              onSearchInputChange: h,
               placeholderValue: c,
-              query: a,
+              query: s,
               rightToLeftOrientation: r
             }
           ),
-          !r && /* @__PURE__ */ t($, {})
+          !r && /* @__PURE__ */ t(M, {})
         ] }),
-        s && /* @__PURE__ */ t(A, { errorMessage: n })
+        o && /* @__PURE__ */ t(O, { errorMessage: n })
       ]
     }
   );
-}, An = () => /* @__PURE__ */ h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-  /* @__PURE__ */ t("title", { children: "Searchcraft Button Icon" }),
-  /* @__PURE__ */ t(
-    "path",
-    {
-      d: "M2.725 5.79959L10 10.0079L17.275 5.79959M10 18.3996V9.99959M17.5 13.3329V6.66626C17.4997 6.37399 17.4225 6.08693 17.2763 5.8339C17.13 5.58086 16.9198 5.37073 16.6667 5.22459L10.8333 1.89126C10.58 1.74498 10.2926 1.66797 10 1.66797C9.70744 1.66797 9.42003 1.74498 9.16667 1.89126L3.33333 5.22459C3.08022 5.37073 2.86998 5.58086 2.72372 5.8339C2.57745 6.08693 2.5003 6.37399 2.5 6.66626V13.3329C2.5003 13.6252 2.57745 13.9123 2.72372 14.1653C2.86998 14.4183 3.08022 14.6285 3.33333 14.7746L9.16667 18.1079C9.42003 18.2542 9.70744 18.3312 10 18.3312C10.2926 18.3312 10.58 18.2542 10.8333 18.1079L16.6667 14.7746C16.9198 14.6285 17.13 14.4183 17.2763 14.1653C17.4225 13.9123 17.4997 13.6252 17.5 13.3329Z",
-      stroke: "white",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )
-] }), Pn = "_resultContainer_10d68_5", On = "_interactiveResultContainer_10d68_17", Un = "_interactiveIconLarge_10d68_33", Wn = "_interactiveIconSmall_10d68_45", zn = "_imageContainer_10d68_57", Gn = "_contentContainer_10d68_68", Qn = "_image_10d68_57", Zn = "_heading_10d68_86", Kn = "_subheading_10d68_97", Jn = "_bodyContent_10d68_107", Hn = "_button_10d68_117", C = {
-  resultContainer: Pn,
-  interactiveResultContainer: On,
-  interactiveIconLarge: Un,
-  interactiveIconSmall: Wn,
-  imageContainer: zn,
-  contentContainer: Gn,
-  image: Qn,
-  heading: Zn,
-  subheading: Kn,
-  bodyContent: Jn,
-  button: Hn
-}, Z = ({
+}, on = "_interactiveResultContainerLight_vyyhe_5", an = "_interactiveResultContainerDark_vyyhe_21", sn = "_resultContainer_vyyhe_37", cn = "_interactiveIconLarge_vyyhe_49", hn = "_interactiveIconSmall_vyyhe_61", ln = "_imageContainer_vyyhe_73", un = "_contentContainer_vyyhe_84", pn = "_imageLight_vyyhe_94", gn = "_imageDark_vyyhe_102", Ln = "_headingLight_vyyhe_110", dn = "_headingDark_vyyhe_121", _n = "_subheadingLight_vyyhe_132", fn = "_subheadingDark_vyyhe_142", mn = "_bodyContentLight_vyyhe_152", Cn = "_bodyContentDark_vyyhe_162", g = {
+  interactiveResultContainerLight: on,
+  interactiveResultContainerDark: an,
+  resultContainer: sn,
+  interactiveIconLarge: cn,
+  interactiveIconSmall: hn,
+  imageContainer: ln,
+  contentContainer: un,
+  imageLight: pn,
+  imageDark: gn,
+  headingLight: Ln,
+  headingDark: dn,
+  subheadingLight: _n,
+  subheadingDark: fn,
+  bodyContentLight: mn,
+  bodyContentDark: Cn
+}, it = ({
   buttonCallbackFn: n = () => {
   },
   buttonLabel: e = "",
-  callbackFn: o = () => {
+  callbackFn: i = () => {
   },
-  keyDownCallbackFn: i = () => {
+  keyDownCallbackFn: a = () => {
   },
   imageAltText: c = "",
   interactiveResult: r = !1,
-  imageSrc: a = "",
+  imageSrc: s = "",
   resultBodyContent: l = "",
-  resultHeading: s = "",
-  resultSubheading: u = ""
+  resultHeading: o = "",
+  resultSubheading: p = ""
 }) => {
-  const p = (g) => {
-    g.stopPropagation(), n();
-  }, L = () => {
+  const { theme: m } = b(), h = m === "light", d = () => {
+    n();
+  }, R = () => {
     if (r)
-      o();
+      i();
     else
       return;
   };
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: r ? C.interactiveResultContainer : C.resultContainer,
+      className: r ? h ? g.interactiveResultContainerLight : g.interactiveResultContainerDark : g.resultContainer,
       id: "searchcraft-item",
-      onClick: L,
-      onKeyDown: i,
+      onClick: R,
+      onKeyDown: a,
       children: [
-        r && /* @__PURE__ */ t("div", { className: C.interactiveIconLarge, children: /* @__PURE__ */ t(U, {}) }),
-        /* @__PURE__ */ t("div", { className: C.imageContainer, children: /* @__PURE__ */ t("img", { alt: c, className: C.image, src: a }) }),
-        /* @__PURE__ */ h("div", { className: C.contentContainer, children: [
-          /* @__PURE__ */ h("h2", { className: C.heading, children: [
-            s,
+        r && /* @__PURE__ */ t("div", { className: g.interactiveIconLarge, children: h ? /* @__PURE__ */ t(Q, {}) : /* @__PURE__ */ t(K, {}) }),
+        /* @__PURE__ */ t("div", { className: g.imageContainer, children: /* @__PURE__ */ t(
+          "img",
+          {
+            alt: c,
+            className: h ? g.imageLight : g.imageDark,
+            src: s
+          }
+        ) }),
+        /* @__PURE__ */ u("div", { className: g.contentContainer, children: [
+          /* @__PURE__ */ u("h2", { className: h ? g.headingLight : g.headingDark, children: [
+            o,
             " ",
-            r && /* @__PURE__ */ t("div", { className: C.interactiveIconSmall, children: /* @__PURE__ */ t(U, {}) })
+            r && /* @__PURE__ */ t("div", { className: g.interactiveIconSmall, children: h ? /* @__PURE__ */ t(Q, {}) : /* @__PURE__ */ t(K, {}) })
           ] }),
-          /* @__PURE__ */ t("h3", { className: C.subheading, children: u }),
-          /* @__PURE__ */ t("p", { className: C.bodyContent, children: l }),
-          /* @__PURE__ */ h("button", { className: C.button, onClick: p, type: "button", children: [
-            /* @__PURE__ */ t(An, {}),
-            /* @__PURE__ */ t("span", { children: e })
-          ] })
+          /* @__PURE__ */ t(
+            "h3",
+            {
+              className: h ? g.subheadingLight : g.subheadingDark,
+              children: p
+            }
+          ),
+          /* @__PURE__ */ t(
+            "p",
+            {
+              className: h ? g.bodyContentLight : g.bodyContentDark,
+              children: l
+            }
+          ),
+          /* @__PURE__ */ t(M, { label: e, onClick: d })
         ] })
       ]
     }
   );
-}, Vn = "_resultsContainer_684vx_5", Xn = {
-  resultsContainer: Vn
-}, Yn = () => {
-  var o, i, c, r;
-  const { searchResults: n, query: e } = I();
-  return /* @__PURE__ */ h("div", { className: Xn.resultsContainer, children: [
-    (i = (o = n == null ? void 0 : n.data) == null ? void 0 : o.hits) == null ? void 0 : i.map((a, l) => {
-      const { doc: s } = a;
+}, Rn = "_resultsContainer_684vx_5", kn = {
+  resultsContainer: Rn
+}, vn = () => {
+  var i, a, c, r;
+  const { searchResults: n, query: e } = S();
+  return /* @__PURE__ */ u("div", { className: kn.resultsContainer, children: [
+    (a = (i = n == null ? void 0 : n.data) == null ? void 0 : i.hits) == null ? void 0 : a.map((s, l) => {
+      const { doc: o } = s;
       return /* @__PURE__ */ t(
-        Z,
+        it,
         {
           buttonLabel: "View More",
           buttonCallbackFn: () => {
@@ -648,45 +775,46 @@ const d = /* @__PURE__ */ an(sn), cn = "_inputContainerLTR_s1rq8_5", ln = "_inpu
             console.log("interactive element");
           },
           interactiveResult: !0,
-          imageSrc: s == null ? void 0 : s.poster,
-          resultBodyContent: s == null ? void 0 : s.overview,
-          resultHeading: s == null ? void 0 : s.title,
-          resultSubheading: s == null ? void 0 : s.release_date
+          imageSrc: o == null ? void 0 : o.poster,
+          resultBodyContent: o == null ? void 0 : o.overview,
+          resultHeading: o == null ? void 0 : o.title,
+          resultSubheading: o == null ? void 0 : o.release_date
         },
-        `${s == null ? void 0 : s.id}-${l}`
+        `${o == null ? void 0 : o.id}-${l}`
       );
     }),
     e.length > 0 && ((r = (c = n == null ? void 0 : n.data) == null ? void 0 : c.hits) == null ? void 0 : r.length) === 0 && /* @__PURE__ */ t(
-      A,
+      O,
       {
         errorMessage: `No search results found for ${e} query`
       }
     )
   ] });
-}, m = () => null;
-m.AutoSearchForm = wn;
-m.BaseSearchForm = Dn;
-m.BaseSearchResult = Z;
-m.BaseSearchResults = Yn;
-m.Button = $;
-m.ClearInputButton = M;
-m.ErrorMessage = A;
-m.Input = j;
-m.InputCaption = F;
-m.InputIcon = q;
-m.InputLabel = D;
-m.Provider = tn;
+}, f = () => null;
+f.AutoSearchForm = Jt;
+f.BaseSearchForm = rn;
+f.BaseSearchResult = it;
+f.BaseSearchResults = vn;
+f.Button = M;
+f.ClearInputButton = $;
+f.ErrorMessage = O;
+f.Input = P;
+f.InputCaption = q;
+f.InputIcon = A;
+f.InputLabel = W;
+f.Provider = ut;
 export {
-  wn as AutoSearchForm,
-  Dn as BaseSearchForm,
-  Z as BaseSearchResult,
-  Yn as BaseSearchResults,
-  $ as Button,
-  A as ErrorMessage,
-  j as Input,
-  D as InputLabel,
-  et as SearchcraftCore,
-  m as default,
-  I as useSearchcraft
+  Jt as AutoSearchForm,
+  rn as BaseSearchForm,
+  it as BaseSearchResult,
+  vn as BaseSearchResults,
+  M as Button,
+  O as ErrorMessage,
+  P as Input,
+  W as InputLabel,
+  yn as SearchcraftCore,
+  f as default,
+  S as useSearchcraft,
+  b as useTheme
 };
 //# sourceMappingURL=index.js.map