@telia-ace/knowledge-widget-components-search 1.0.14 → 1.0.17

package/dist/search.ffb2e6c2.js

@@ -0,0 +1,779 @@
+var Ae = Object.defineProperty, Ie = Object.defineProperties;
+var qe = Object.getOwnPropertyDescriptors;
+var Q = Object.getOwnPropertySymbols;
+var re = Object.prototype.hasOwnProperty, se = Object.prototype.propertyIsEnumerable;
+var ne = (e, t, o) => t in e ? Ae(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, B = (e, t) => {
+  for (var o in t || (t = {}))
+    re.call(t, o) && ne(e, o, t[o]);
+  if (Q)
+    for (var o of Q(t))
+      se.call(t, o) && ne(e, o, t[o]);
+  return e;
+}, D = (e, t) => Ie(e, qe(t));
+var U = (e, t) => {
+  var o = {};
+  for (var r in e)
+    re.call(e, r) && t.indexOf(r) < 0 && (o[r] = e[r]);
+  if (e != null && Q)
+    for (var r of Q(e))
+      t.indexOf(r) < 0 && se.call(e, r) && (o[r] = e[r]);
+  return o;
+};
+import { Component as ze } from "@telia-ace/knowledge-widget-types-grid";
+import { borderTabStyle as _, Text as de, Link as fe, SymbolBadge as H, useProperties as P, useDispatch as M, useRouteData as ge, useEventListener as J, useKeyPress as G, Tooltip as Fe, ItemTree as Be, contentBox as me, useScroll as Le, useContainer as he, Loader as De, useDebounce as Te, usePrevious as ae, useChildren as Ne, useWidgetEvent as Oe, useTransitionEnd as Ke, convertToStringAttributes as Pe, Input as We, Button as pe } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames as R, deepClone as je, categoryTrail as Qe } from "@telia-ace/widget-utilities";
+import f, { useRef as V, useState as N, useCallback as I, useEffect as O } from "react";
+import z, { css as K } from "styled-components";
+const Xe = (v) => {
+  var b = v, {
+    text: e,
+    className: t,
+    forceFocusStyle: o,
+    filterType: r,
+    handleClick: l,
+    deleteAriaLabel: c = ""
+  } = b, s = U(b, [
+    "text",
+    "className",
+    "forceFocusStyle",
+    "filterType",
+    "handleClick",
+    "deleteAriaLabel"
+  ]);
+  const k = V();
+  return /* @__PURE__ */ f.createElement(de, {
+    className: R(t, "humany-filter-badge"),
+    onKeyDown: (y) => {
+      y.key === "Enter" && l(y, r);
+    }
+  }, e, /* @__PURE__ */ f.createElement(fe, D(B({}, s), {
+    ref: k,
+    tabIndex: 0,
+    role: "button",
+    "aria-label": c.replace("{{item}}", e),
+    onClick: (y) => l(y, r)
+  }), /* @__PURE__ */ f.createElement(H, {
+    size: 13,
+    symbol: { type: "Svg", content: "close" }
+  })));
+}, Me = ({
+  inputHasFocus: e,
+  searchContainerRef: t,
+  showTag: o,
+  showGuideCategory: r,
+  position: l
+}) => {
+  const { activeFilterBadges: c = {}, deleteFilterBadgeAriaLabel: s = "" } = P(), v = M(), { name: b, params: k } = ge(), [y, u] = N(!1), $ = I((m) => {
+    const { key: a } = m;
+    ["ArrowLeft", "ArrowRight"].indexOf(a) === -1 && u(!1);
+  }, []);
+  J("keydown", $, window), J("click", $, window);
+  const { guideCategory: S, tag: x, tooltip: A } = c, d = (m) => {
+    const a = m.querySelectorAll(".humany-filter-badge");
+    return {
+      badges: a,
+      index: Array.from(a).findIndex((h) => document.activeElement === h)
+    };
+  }, n = (m, a) => {
+    m.preventDefault(), v("quick-filter:remove", { types: [a] });
+  }, i = (m, a) => {
+    if (!t)
+      return;
+    const { badges: h, index: p } = d(t);
+    if (h.length) {
+      let q = null;
+      m === "left" ? p === -1 ? q = h.item(h.length - 1) : p > 0 && (q = h.item(p - 1)) : m === "right" && (p === h.length - 1 ? a && a.focus() : h.item(p + 1) && (q = h.item(p + 1))), q && (q.focus(), u(!0));
+    }
+  };
+  G("ArrowLeft", I(() => {
+    if (!t)
+      return;
+    const { index: m } = d(t);
+    if (e || m > -1) {
+      const a = t.querySelector('[data-type="search"]'), h = a && a.selectionStart !== null && a.selectionStart <= 0, p = m > -1;
+      (h || p) && i("left", a);
+    }
+  }, [e, t])), G("ArrowRight", I(() => {
+    if (!t)
+      return;
+    const { index: m } = d(t);
+    if (m > -1) {
+      const a = t.querySelector('[data-type="search"]');
+      m > -1 && i("right", a);
+    }
+  }, [t])), G("Backspace", I((m) => {
+    if (!t)
+      return;
+    let a = [];
+    const { index: h } = d(t), p = t.querySelector('[data-type="search"]');
+    h > -1 ? h === 0 ? r ? a = ["guideCategory"] : o && (a = ["tag"]) : h === 1 && (a = ["tag"]) : p && p.selectionStart !== null && p.selectionStart <= 0 && (c != null && c.tag ? a = ["tag"] : c != null && c.guideCategory && (a = ["guideCategory"])), a.length > 0 && (m.preventDefault(), v("quick-filter:remove", { types: a }));
+  }, [t, c, o, r]));
+  const g = I((m) => m === "guideCategory" && S && r ? /* @__PURE__ */ f.createElement(ie, {
+    text: `@${S.title}`,
+    routeName: b,
+    filterType: "guideCategory",
+    handleClick: n,
+    forceFocusStyle: y,
+    deleteAriaLabel: s,
+    params: D(B({}, k), {
+      guideCategory: void 0
+    })
+  }) : m === "tag" && x && o ? /* @__PURE__ */ f.createElement(ie, {
+    className: "humany-filter-badge",
+    text: `#${x.title}`,
+    routeName: b,
+    filterType: "tag",
+    handleClick: n,
+    forceFocusStyle: y,
+    deleteAriaLabel: s,
+    params: D(B({}, k), {
+      tag: void 0
+    })
+  }) : null, [S, x, b, k, r, o, y]);
+  return !S && !x ? null : /* @__PURE__ */ f.createElement(Ue, {
+    className: "humany-filter-badges",
+    position: l
+  }, S && A ? /* @__PURE__ */ f.createElement(Fe, {
+    content: /* @__PURE__ */ f.createElement(f.Fragment, null, A),
+    sticky: !1
+  }, g("guideCategory")) : g("guideCategory"), x && g("tag"));
+}, Ue = z.div`
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    ${(e) => e.position === "inside" ? K`
+                  &:not(:first-child) {
+                      margin: 0 0 0 ${(t) => {
+  var o;
+  return (o = t.theme.sizes) == null ? void 0 : o.normal;
+}};
+                  }
+              ` : K`
+                  margin: ${(t) => {
+  var o;
+  return (o = t.theme.sizes) == null ? void 0 : o.small;
+}} 0 0 0;
+                  span:first-child {
+                      margin-left: 0;
+                  }
+              `}
+`, ie = z(Xe)`
+    display: flex;
+    align-items: center;
+    padding: ${(e) => {
+  var t, o;
+  return `${(t = e.theme.sizes) == null ? void 0 : t.small} calc(${(o = e.theme.sizes) == null ? void 0 : o.normal}/2) `;
+}};
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+    border-radius: ${(e) => e.theme.borderRadius};
+    font-weight: 300;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    font-style: italic;
+    color: #ffffff;
+    text-decoration: none;
+    white-space: nowrap;
+
+    margin: calc(${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}} / 2);
+
+    &:focus-within {
+        ${(e) => {
+  var t;
+  return (((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) || e.forceFocusStyle) && K`
+                ${_}
+                background-color: transparent;
+
+                svg {
+                    path {
+                        stroke: ${(o) => {
+    var r;
+    return (r = o.theme.colors) == null ? void 0 : r.primary;
+  }};
+                    }
+                }
+            `;
+}};
+        a {
+            outline: none;
+        }
+    }
+
+    svg {
+        width: 17px;
+        height: 11px;
+        margin: 1px 0 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}};
+        path {
+            stroke: #ffffff;
+            stroke-width: 2px;
+        }
+        order: 1;
+    }
+`, T = (e, t) => !t || !e ? !0 : e.toLowerCase().indexOf(t.toLowerCase()) > -1, Ge = (e = [], t, o) => {
+  if (!o)
+    return e;
+  const r = je(e);
+  if (t === "tag")
+    return r.filter((s) => T(s.title, o));
+  const l = He(r, o);
+  return ye(r, (s) => l.indexOf(s.id) > -1);
+}, ye = (e, t) => e.filter((o) => (o.items && o.items.length && (o.items = ye(o.items, t)), t(o))), He = (e, t) => {
+  const r = be(e).filter((c) => T(c.title, t)).map((c) => c.id);
+  let l = [];
+  return r.forEach((c) => {
+    const s = Qe(c, e);
+    l = l.concat(s);
+  }), l;
+}, be = (e) => {
+  let t = [];
+  return e.forEach((o) => {
+    t.push(o), Array.isArray(o.items) && (t = t.concat(be(o.items)));
+  }), t;
+}, Y = (e) => {
+  const t = Array.from((e == null ? void 0 : e.getElementsByTagName("A")) || []).filter((o) => o.getAttribute("disabled") === null);
+  return {
+    anchors: t,
+    focusedIndex: t.findIndex((o) => document.activeElement === o)
+  };
+}, Je = (e) => e ? e.querySelector('[data-type="search"], input[type="search"]') : null, Z = (e) => {
+  if (!e)
+    return;
+  const t = Je(e);
+  t && t.focus();
+}, Ye = ({
+  filterPhrase: e,
+  items: t,
+  filterType: o,
+  filterContainer: r,
+  searchContainer: l,
+  inputHasFocus: c
+}) => {
+  const [s, v] = N(t || []), [b, k] = N(null), y = M(), { activeFilterBadges: u, quickFilters: $ } = P(), S = typeof $ == "object" && !!$.autoSelect || typeof $ == "boolean" && !!$;
+  O(() => {
+    v(Ge(t, o, e));
+  }, [e, o, t]), O(() => {
+    var d;
+    if (r) {
+      const { anchors: n } = Y(r), i = (d = n[0]) == null ? void 0 : d.getAttribute("data-id");
+      i && k(i);
+    }
+  }, [s, r]);
+  const x = I((d, n) => {
+    const i = {
+      category: u != null && u.guideCategory ? u.guideCategory.id : void 0,
+      tag: u != null && u.tag ? u.tag.id : void 0
+    };
+    n === "guideCategory" ? i.category = d.id : n === "tag" && (i.tag = d.id), y("quick-filter:add", i);
+  }, [u, y]), A = (d) => d === "guideCategory" ? {
+    renderItem: (n, i) => /* @__PURE__ */ f.createElement(ue, {
+      autoSelect: S && c && n.id === b,
+      disabled: !T(n.title, e),
+      tabIndex: T(n.title, e) ? 0 : -1,
+      onKeyDown: (g) => {
+        g.key === "Enter" && x(n, d);
+      },
+      "data-level": i,
+      onClick: () => {
+        x(n, d);
+      },
+      "data-id": n.id
+    }, /* @__PURE__ */ f.createElement(ce, {
+      title: n.title,
+      phrase: e,
+      matches: T(n.title, e)
+    }))
+  } : {
+    renderLi: !0,
+    renderItem: (n) => /* @__PURE__ */ f.createElement(ue, {
+      autoSelect: S && c && n.id === b,
+      onKeyDown: (i) => {
+        i.key === "Enter" && x(n, d);
+      },
+      onClick: () => {
+        x(n, d);
+      },
+      "data-id": n.id
+    }, /* @__PURE__ */ f.createElement(ce, {
+      symbol: "#",
+      title: n.title,
+      phrase: e,
+      matches: T(n.title, e)
+    }))
+  };
+  return J("keydown", (d) => {
+    var q;
+    const { key: n } = d;
+    if (!r || !(n === "ArrowDown" || n === "ArrowUp" || n === "Enter"))
+      return;
+    const { anchors: i, focusedIndex: g } = Y(r);
+    if (n === "Enter") {
+      if (c && S) {
+        const w = (q = i[0]) == null ? void 0 : q.getAttribute("data-id");
+        w && x({ id: w }, o);
+      }
+      return;
+    }
+    const m = () => {
+      var w;
+      return (w = i[0]) == null ? void 0 : w.focus();
+    }, a = () => {
+      var w;
+      return (w = i[i.length - 1]) == null ? void 0 : w.focus();
+    }, h = () => {
+      var w;
+      return (w = i[g + 1]) == null ? void 0 : w.focus();
+    }, p = () => {
+      var w;
+      return (w = i[g - 1]) == null ? void 0 : w.focus();
+    };
+    c ? (d.preventDefault(), n === "ArrowDown" ? m() : a()) : g > -1 && (d.preventDefault(), n === "ArrowDown" ? i.length > g + 1 ? h() : Z(l) : g - 1 < 0 ? Z(l) : p());
+  }, window), /* @__PURE__ */ f.createElement(Be, B({
+    tree: s,
+    renderEmpty: !1,
+    ulProps: { role: "listbox" },
+    liProps: { role: "option" }
+  }, A(o)));
+}, ce = ({ title: e, phrase: t, matches: o, symbol: r = "" }) => {
+  const l = () => {
+    if (!o || !t)
+      return [e];
+    const b = e.toLowerCase().indexOf(t.toLowerCase()), k = e.substr(0, b), y = e.slice(b, b + t.length), u = e.substr(b + t.length);
+    return [k, y, u];
+  }, [c, s, v] = l();
+  return /* @__PURE__ */ f.createElement(de, null, r, c, s ? /* @__PURE__ */ f.createElement("strong", null, s) : null, v || null);
+}, Ze = K`
+    opacity: 0.5;
+    pointer-events: none;
+`, le = K`
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    color: #ffffff;
+    outline: none;
+
+    span:first-child {
+        border-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    }
+`, ue = z(fe)`
+    display: block;
+    text-decoration: none;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+
+    ${(e) => e.disabled && Ze}
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    background-color: transparent;
+
+    span {
+        display: block;
+        ${(e) => {
+  var t, o, r, l;
+  return e["data-level"] ? `padding: calc(${(t = e.theme.sizes) == null ? void 0 : t.normal} / 2) ${(o = e.theme.sizes) == null ? void 0 : o.normal};` : `padding: calc(${(r = e.theme.sizes) == null ? void 0 : r.normal} / 2) ${(l = e.theme.sizes) == null ? void 0 : l.medium};  `;
+}}
+        ${(e) => e["data-level"] && "border-left: 2px solid"}
+    }
+
+    span:first-child {
+        border-color: #e7e7e7;
+    }
+
+    ${(e) => {
+  var t;
+  return e["data-level"] && `padding: 0 calc(${(t = e.theme.sizes) == null ? void 0 : t.medium} * ${e["data-level"]});`;
+}}
+
+    ${(e) => e.autoSelect && le}
+
+  &:hover,
+  &:focus {
+        ${le}
+    }
+`, _e = ({ phrase: e = "", inputHasFocus: t, searchContainerRef: o }) => {
+  const {
+    quickFilter: r = {
+      open: !1,
+      loading: !1,
+      symbol: "",
+      type: "",
+      items: []
+    }
+  } = P(), [l, c] = Le(!0), s = he(), { events: v } = s.get("$widget"), b = V(), k = I((d) => (d && d.addEventListener("keydown", () => {
+    Y(d).focusedIndex > -1 && v.subscribeOnce("router:changed", () => {
+      Z(o);
+    });
+  }, !0), b.current = d, d), [o]), { items: y = [], symbol: u, type: $, open: S, loading: x } = r;
+  if (!S || !u)
+    return null;
+  const A = e.slice(e.indexOf(u) + 1);
+  return /* @__PURE__ */ f.createElement(Re, {
+    ref: k,
+    "data-loading": x,
+    className: R("humany-quick-filter-dropdown", [$ === "guideCategory", "humany-quick-filter-guide-categories"], [$ === "tag", "humany-quick-filter-tags"])
+  }, /* @__PURE__ */ f.createElement(Ve, {
+    className: "humany-quick-filter-dropdown-inner",
+    css: l,
+    ref: c
+  }, /* @__PURE__ */ f.createElement(Ye, {
+    filterType: $,
+    items: y,
+    filterPhrase: A,
+    filterContainer: c.current,
+    searchContainer: o,
+    inputHasFocus: t
+  })), /* @__PURE__ */ f.createElement(De, {
+    loading: x
+  }));
+}, Re = z.div`
+    ${me};
+    position: absolute;
+    top: calc(100% + ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}});
+    left: 0;
+    right: 0;
+    z-index: 1;
+    overflow: hidden;
+`, Ve = z.div`
+    max-height: 300px;
+    overflow: auto;
+    padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}} 0;
+    ${(e) => e.css}
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    li div {
+        ${(e) => {
+  var t;
+  return `margin: ${(t = e.theme.sizes) == null ? void 0 : t.normal} 0;`;
+}}
+    }
+`, X = (e, t) => !!(e && !t || !e && t || e && t && e.id !== t.id), et = (e, t = {}, o = !0) => {
+  const r = M(), {
+    quickFilters: l = !1,
+    quickFilter: c = { open: !1 },
+    activeFilterBadges: s,
+    filterBadges: v = !1,
+    incremental: b = 600
+  } = P(), k = Te(e, typeof b == "boolean" ? 600 : b), y = ae(k), u = ae(s), $ = V(null), S = I((n = "") => {
+    if (v) {
+      const i = X(s == null ? void 0 : s.guideCategory, u == null ? void 0 : u.guideCategory) || X(s == null ? void 0 : s.tag, u == null ? void 0 : u.tag);
+      return r("search", { value: n, filtersChanged: i, filters: s });
+    }
+    return r("search", { value: n });
+  }, [r, s]), x = I((n) => {
+    r("clear", { navigateToHome: n });
+  }, [r]), A = (n) => l ? n.replace(/([@#].*)/g, "") : n, d = I((n) => {
+    if (c.open && n.preventDefault) {
+      n.preventDefault();
+      return;
+    }
+    const i = document.activeElement, g = $.current && typeof $.current.contains == "function" ? $.current.contains(i) : !1, m = A(e);
+    typeof n == "boolean" && n || m.length && g || (s == null ? void 0 : s.guideCategory) || (s == null ? void 0 : s.tag) && g ? S(m) : x(g);
+  }, [$, e, c, x, s, S]);
+  return O(() => {
+    const n = X(s == null ? void 0 : s.guideCategory, u == null ? void 0 : u.guideCategory) || X(s == null ? void 0 : s.tag, u == null ? void 0 : u.tag), i = k && A(k), g = y && A(y);
+    (typeof g != "undefined" && g !== i && i !== t.phrase && o && !c.open || n && !(s != null && s.initial)) && d(n);
+  }, [k, c.open, s, d]), O(() => {
+    if (e && l) {
+      const n = typeof l == "boolean" && !!l || typeof l == "object" && !!l.guideCategory, i = typeof l == "boolean" && !!l || typeof l == "object" && !!l.tag;
+      n && e.indexOf("@") === e.length - 1 && r("quick-filter:open", { type: "guideCategory", symbol: "@" }), i && e.indexOf("#") === e.length - 1 && r("quick-filter:open", { type: "tag", symbol: "#" });
+    }
+    c.open && e.indexOf("@") === -1 && e.indexOf("#") === -1 && r("quick-filter:close");
+  }, [e]), [d, x, $];
+}, dt = (o) => {
+  var r = o, { className: e } = r, t = U(r, ["className"]);
+  const {
+    showSearchButton: l,
+    showClearButton: c,
+    role: s = "search",
+    autoFocus: v,
+    placeholder: b,
+    searchButtonLabel: k,
+    clearButtonLabel: y,
+    ariaLabel: u,
+    route: $ = "search",
+    incremental: S = !0,
+    showChildren: x = !1,
+    quickFilter: A,
+    quickFilters: d,
+    filterBadges: n
+  } = P(), { params: i } = ge(), [g, m] = N(!1), [a, h] = N(i.phrase || ""), [p, q] = N({
+    guideCategory: !1,
+    tag: !1
+  }), w = he(), ke = Ne(), W = M(), { position: xe = "inside" } = typeof n == "object" ? n : {};
+  O(() => {
+    const { guideCategory: E, tag: C } = i, F = typeof n == "object" ? !!n.guideCategory : !!n, ve = typeof n == "object" ? !!n.tag : !!n;
+    q({
+      guideCategory: F && !!E,
+      tag: ve && !!C
+    });
+  }, [n, i]), Oe("router:changed", () => {
+    if (A) {
+      const { open: E, symbol: C } = A;
+      if (E) {
+        if (C) {
+          const F = a.replace(a.slice(a.indexOf(C)), "");
+          h(F);
+        }
+        W("quick-filter:close");
+      }
+    }
+  }, [A, a, h, W]);
+  const [ee, j, L] = et(a, i, !!S);
+  O(() => {
+    h(i.phrase || "");
+  }, [i.phrase]);
+  const $e = I((E) => {
+    h(E);
+  }, [h]), Ee = I(() => {
+    W("quick-filter:close").then(() => j(!0));
+  }, [W, j]), we = I(() => {
+    var E, C;
+    v && !g && ((C = (E = L.current) == null ? void 0 : E.getElementsByTagName("input")[0]) == null || C.focus());
+  }, [v, g, L]), Ce = I(() => {
+    w.getAsync("router").then((E) => {
+      const C = E.getInitialRoute(), F = E.getRouteData();
+      (C == null ? void 0 : C.name) === F.name && (C == null ? void 0 : C.name) !== $ ? h("") : j(!0);
+    });
+  }, [w, h, j]), te = (E) => {
+    if (E !== xe)
+      return null;
+    if (!!p.guideCategory || !!p.tag)
+      return /* @__PURE__ */ f.createElement(Me, {
+        position: E,
+        inputHasFocus: g,
+        showGuideCategory: p.guideCategory,
+        showTag: p.tag,
+        searchContainerRef: L.current
+      });
+  };
+  Ke(we);
+  const oe = c && (p.guideCategory || p.tag || a), Se = d ? Pe({
+    role: "combobox",
+    "aria-autocomplete": "list",
+    autoComplete: "off",
+    "aria-haspopup": "listbox"
+  }) : {};
+  return /* @__PURE__ */ f.createElement(tt, D(B({}, t), {
+    ref: L,
+    role: s,
+    className: R(e, "humany-search"),
+    "data-has-phrase": !!a,
+    "data-has-focus": g,
+    "data-has-search-symbol": l ? "true" : "false"
+  }), /* @__PURE__ */ f.createElement(ot, {
+    action: ".",
+    onSubmit: (E) => {
+      var C, F;
+      E.preventDefault(), (F = (C = L.current) == null ? void 0 : C.getElementsByTagName("input")[0]) == null || F.blur();
+    },
+    "data-has-focus": g
+  }, l && /* @__PURE__ */ f.createElement(nt, {
+    "aria-label": k,
+    type: "submit",
+    title: k,
+    disabled: !a,
+    onClick: ee,
+    "data-has-phrase": !!a,
+    "data-has-focus": g
+  }, /* @__PURE__ */ f.createElement(H, {
+    size: 32,
+    symbol: { type: "Svg", content: "search" }
+  })), te("inside"), /* @__PURE__ */ f.createElement(We, D(B({
+    type: "search",
+    "aria-label": u
+  }, Se), {
+    placeholder: p.guideCategory || p.tag ? "" : b,
+    onFocusChange: m,
+    onEscape: Ee,
+    onEnter: ee,
+    onChange: $e,
+    value: a
+  })), oe && /* @__PURE__ */ f.createElement(rt, {
+    "aria-label": y,
+    type: "reset",
+    hasFocus: g,
+    title: y,
+    onClick: Ce
+  }, /* @__PURE__ */ f.createElement(H, {
+    size: 27,
+    symbol: { type: "Svg", content: "clear" }
+  })), x && !oe && ke.map((E) => /* @__PURE__ */ f.createElement(ze, {
+    key: E.id,
+    id: E.id,
+    branch: "default"
+  })), /* @__PURE__ */ f.createElement(_e, {
+    inputHasFocus: g,
+    phrase: a,
+    searchContainerRef: L.current
+  })), te("below"));
+}, tt = z.div`
+    ${me};
+    width: 100%;
+    padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.large;
+}};
+
+    input {
+        background-color: transparent;
+        border: none;
+        outline: none;
+        min-width: 25%;
+        flex: 1;
+        font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+        font-weight: 300;
+        font-style: italic;
+        padding: 1em 0;
+        color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+        -webkit-appearance: none;
+
+        ${(e) => {
+  var t;
+  return e["data-has-search-symbol"] === "true" && `text-indent: ${(t = e.theme.sizes) == null ? void 0 : t.normal};`;
+}}
+
+        ::placeholder {
+            color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+        }
+        /* removes the 'X' from IE */
+        &[type='search']::-ms-clear {
+            display: none;
+            width: 0;
+            height: 0;
+        }
+        &[type='search']::-ms-reveal {
+            display: none;
+            width: 0;
+            height: 0;
+        }
+
+        /* removes the 'X' from Chrome */
+        &[type='search']::-webkit-search-decoration,
+        &[type='search']::-webkit-search-cancel-button,
+        &[type='search']::-webkit-search-results-button,
+        &[type='search']::-webkit-search-results-decoration {
+            display: none;
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    button {
+        background: transparent;
+        border: none;
+        padding: 0;
+        font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.large;
+}};
+        transition: color 200ms ease-out;
+        color: ${(e) => {
+  var t;
+  return e["data-has-focus"] || e["data-has-phrase"] ? (t = e.theme.colors) == null ? void 0 : t.primary : "#000000";
+}};
+        cursor: pointer;
+        > svg {
+            height: 100%;
+        }
+    }
+`, ot = z.form`
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    border: ${(e) => e.theme.inputBorder};
+    border-radius: ${(e) => e.theme.borderRadius};
+    background-color: #ffffff;
+    position: relative;
+    padding: 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+
+    ${(e) => e["data-has-focus"] && K`
+            ${(t) => {
+  var o, r;
+  return (o = t.theme.accessibility) != null && o.isTabbing ? _ : `
+        border-color: ${(r = t.theme.colors) == null ? void 0 : r.primary};
+        outline: none;
+        input {
+          outline: none;
+        }
+      `;
+}}
+        `};
+`, nt = z(pe)`
+    padding: 0;
+    height: 2em;
+
+    svg {
+        circle,
+        line {
+            stroke: ${(e) => {
+  var t;
+  return e["data-has-focus"] ? (t = e.theme.colors) == null ? void 0 : t.primary : "#000000";
+}};
+        }
+    }
+`, rt = z(pe)`
+    &:focus svg {
+        ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && _;
+}}
+    }
+
+    svg {
+        vertical-align: top;
+
+        circle,
+        line,
+        path {
+            stroke: ${(e) => {
+  var t, o;
+  return e.hasFocus ? (t = e.theme.colors) == null ? void 0 : t.primary : (o = e.theme.colors) == null ? void 0 : o.text;
+}};
+        }
+    }
+`;
+export {
+  dt as default
+};
+//# sourceMappingURL=search.ffb2e6c2.js.map