@bynder/compact-view 5.2.0 → 5.2.2

package/Prefixer.js

@@ -0,0 +1,187 @@
+import { MS as t, WEBKIT as c, MOZ as a } from "./Enum.js";
+import { hash as g, replace as r, charat as i, strlen as d, indexof as p, match as o, substr as z } from "./Utility.js";
+function M(s, e, n) {
+  switch (g(s, e)) {
+    // color-adjust
+    case 5103:
+      return c + "print-" + s + s;
+    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+    case 5737:
+    case 4201:
+    case 3177:
+    case 3433:
+    case 1641:
+    case 4457:
+    case 2921:
+    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+    case 5572:
+    case 6356:
+    case 5844:
+    case 3191:
+    case 6645:
+    case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+    case 4215:
+    case 6389:
+    case 5109:
+    case 5365:
+    case 5621:
+    case 3829:
+      return c + s + s;
+    // tab-size
+    case 4789:
+      return a + s + s;
+    // appearance, user-select, transform, hyphens, text-size-adjust
+    case 5349:
+    case 4246:
+    case 4810:
+    case 6968:
+    case 2756:
+      return c + s + a + s + t + s + s;
+    // writing-mode
+    case 5936:
+      switch (i(s, e + 11)) {
+        // vertical-l(r)
+        case 114:
+          return c + s + t + r(s, /[svh]\w+-[tblr]{2}/, "tb") + s;
+        // vertical-r(l)
+        case 108:
+          return c + s + t + r(s, /[svh]\w+-[tblr]{2}/, "tb-rl") + s;
+        // horizontal(-)tb
+        case 45:
+          return c + s + t + r(s, /[svh]\w+-[tblr]{2}/, "lr") + s;
+      }
+    // flex, flex-direction, scroll-snap-type, writing-mode
+    case 6828:
+    case 4268:
+    case 2903:
+      return c + s + t + s + s;
+    // order
+    case 6165:
+      return c + s + t + "flex-" + s + s;
+    // align-items
+    case 5187:
+      return c + s + r(s, /(\w+).+(:[^]+)/, c + "box-$1$2" + t + "flex-$1$2") + s;
+    // align-self
+    case 5443:
+      return c + s + t + "flex-item-" + r(s, /flex-|-self/g, "") + (o(s, /flex-|baseline/) ? "" : t + "grid-row-" + r(s, /flex-|-self/g, "")) + s;
+    // align-content
+    case 4675:
+      return c + s + t + "flex-line-pack" + r(s, /align-content|flex-|-self/g, "") + s;
+    // flex-shrink
+    case 5548:
+      return c + s + t + r(s, "shrink", "negative") + s;
+    // flex-basis
+    case 5292:
+      return c + s + t + r(s, "basis", "preferred-size") + s;
+    // flex-grow
+    case 6060:
+      return c + "box-" + r(s, "-grow", "") + c + s + t + r(s, "grow", "positive") + s;
+    // transition
+    case 4554:
+      return c + r(s, /([^-])(transform)/g, "$1" + c + "$2") + s;
+    // cursor
+    case 6187:
+      return r(r(r(s, /(zoom-|grab)/, c + "$1"), /(image-set)/, c + "$1"), s, "") + s;
+    // background, background-image
+    case 5495:
+    case 3959:
+      return r(s, /(image-set\([^]*)/, c + "$1$`$1");
+    // justify-content
+    case 4968:
+      return r(r(s, /(.+:)(flex-)?(.*)/, c + "box-pack:$3" + t + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + c + s + s;
+    // justify-self
+    case 4200:
+      if (!o(s, /flex-|baseline/)) return t + "grid-column-align" + z(s, e) + s;
+      break;
+    // grid-template-(columns|rows)
+    case 2592:
+    case 3360:
+      return t + r(s, "template-", "") + s;
+    // grid-(row|column)-start
+    case 4384:
+    case 3616:
+      return n && n.some(function(f, $) {
+        return e = $, o(f.props, /grid-\w+-end/);
+      }) ? ~p(s + (n = n[e].value), "span", 0) ? s : t + r(s, "-start", "") + s + t + "grid-row-span:" + (~p(n, "span", 0) ? o(n, /\d+/) : +o(n, /\d+/) - +o(s, /\d+/)) + ";" : t + r(s, "-start", "") + s;
+    // grid-(row|column)-end
+    case 4896:
+    case 4128:
+      return n && n.some(function(f) {
+        return o(f.props, /grid-\w+-start/);
+      }) ? s : t + r(r(s, "-end", "-span"), "span ", "") + s;
+    // (margin|padding)-inline-(start|end)
+    case 4095:
+    case 3583:
+    case 4068:
+    case 2532:
+      return r(s, /(.+)-inline(.+)/, c + "$1$2") + s;
+    // (min|max)?(width|height|inline-size|block-size)
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      if (d(s) - 1 - e > 6)
+        switch (i(s, e + 1)) {
+          // (m)ax-content, (m)in-content
+          case 109:
+            if (i(s, e + 4) !== 45)
+              break;
+          // (f)ill-available, (f)it-content
+          case 102:
+            return r(s, /(.+:)(.+)-([^]+)/, "$1" + c + "$2-$3$1" + a + (i(s, e + 3) == 108 ? "$3" : "$2-$3")) + s;
+          // (s)tretch
+          case 115:
+            return ~p(s, "stretch", 0) ? M(r(s, "stretch", "fill-available"), e, n) + s : s;
+        }
+      break;
+    // grid-(column|row)
+    case 5152:
+    case 5920:
+      return r(s, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function(f, $, b, w, k, x, m) {
+        return t + $ + ":" + b + m + (w ? t + $ + "-span:" + (k ? x : +x - +b) + m : "") + s;
+      });
+    // position: sticky
+    case 4949:
+      if (i(s, e + 6) === 121)
+        return r(s, ":", ":" + c) + s;
+      break;
+    // display: (flex|inline-flex|grid|inline-grid)
+    case 6444:
+      switch (i(s, i(s, 14) === 45 ? 18 : 11)) {
+        // (inline-)?fle(x)
+        case 120:
+          return r(s, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, "$1" + c + (i(s, 14) === 45 ? "inline-" : "") + "box$3$1" + c + "$2$3$1" + t + "$2box$3") + s;
+        // (inline-)?gri(d)
+        case 100:
+          return r(s, ":", ":" + t) + s;
+      }
+      break;
+    // scroll-margin, scroll-margin-(top|right|bottom|left)
+    case 5719:
+    case 2647:
+    case 2135:
+    case 3927:
+    case 2391:
+      return r(s, "scroll-", "scroll-snap-") + s;
+  }
+  return s;
+}
+export {
+  M as prefix
+};

package/Radio.js

@@ -0,0 +1,78 @@
+import { jsxs as p, jsx as d } from "react/jsx-runtime";
+import { useContext as y } from "react";
+import i, { css as n } from "./styled-components.browser.esm.js";
+import { useFocusRing as C } from "./useFocusRing.js";
+import { usePress as $ } from "./usePress.js";
+import { RadioCtx as I } from "./context6.js";
+import { textStyles as D } from "./textStyles.js";
+import { token as e } from "./token.js";
+import { makeInternalTokens as w } from "./makeInternalTokens.js";
+function B({
+  inputProps: o,
+  value: c,
+  isDisabled: m = !1,
+  children: f,
+  subtext: l,
+  ...h
+}) {
+  const a = y(I), s = c === a?.selectedValue, r = a?.isDisabled || m, {
+    isFocusVisible: g,
+    focusProps: u
+  } = C(), {
+    pressProps: x
+  } = $({});
+  return /* @__PURE__ */ p(R, { $isDisabled: r, $isChecked: s, ...h, children: [
+    /* @__PURE__ */ d(P, { type: "radio", name: a?.name, onChange: (k) => {
+      a?.onChange(k.target.value);
+    }, value: c, checked: s, disabled: r, ...u, ...o }),
+    /* @__PURE__ */ d(T, { "aria-hidden": "true", children: /* @__PURE__ */ d(b, { $isFocusVisible: g, $isDisabled: r, $isChecked: s, children: s && /* @__PURE__ */ d(N, {}) }) }),
+    /* @__PURE__ */ p(F, { $isDisabled: r, ...x, children: [
+      f,
+      l && /* @__PURE__ */ d(M, { $isDisabled: r, children: l })
+    ] })
+  ] });
+}
+const {
+  internalTokens: t,
+  declareTokens: v
+} = w({
+  lightTheme: {
+    "radio-border-unchecked": e.gray300,
+    "radio-border-unchecked-hover": e.gray500,
+    "radio-fill-disabled": e.gray100,
+    "radio-checkmark-color-disabled": e.gray500
+  },
+  darkTheme: {
+    "radio-border-unchecked": e.gray300a,
+    "radio-border-unchecked-hover": e.gray500a,
+    "radio-fill-disabled": e.gray100a,
+    "radio-checkmark-color-disabled": e.gray500a
+  }
+}), T = i.div.withConfig({
+  displayName: "IndicatorPosition",
+  componentId: "sc-g6pmdd-0"
+})(["display:flex;flex:none;align-items:center;&::before{content:'​';}"]), b = i.div.withConfig({
+  displayName: "Indicator",
+  componentId: "sc-g6pmdd-1"
+})(["position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:16px;height:16px;border:2px solid ", ";border-radius:", ";background-color:transparent;&::before{content:'';position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border:", " solid transparent;border-color:", ";border-radius:", ";}", " ", ""], t["radio-border-unchecked"], e.radiusCircle, e.focusRingWidth, (o) => o.$isFocusVisible && e.focusRingColorPrimary, e.radiusCircle, (o) => o.$isChecked && n(["border-color:transparent;background-color:", ";color:#fff;"], e.blue500), (o) => o.$isDisabled && n(["border-color:transparent;background-color:", ";color:", ";"], t["radio-fill-disabled"], t["radio-checkmark-color-disabled"])), N = i.div.withConfig({
+  displayName: "IndicatorMark",
+  componentId: "sc-g6pmdd-2"
+})(["width:6px;height:6px;border-radius:", ";background:currentcolor;"], e.radiusCircle), P = i.input.withConfig({
+  displayName: "Input",
+  componentId: "sc-g6pmdd-3"
+})(["position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:0 -1px -1px 0;padding:0;border:0;white-space:nowrap;clip-path:inset(50%);"]), R = i.label.withConfig({
+  displayName: "Container",
+  componentId: "sc-g6pmdd-4"
+})(["", " ", " display:flex;align-items:flex-start;margin:0;padding:", " 0;cursor:", ";user-select:none;&:hover ", "{", "}"], v, D.uiTextM, e.spacing1, (o) => !o.$isDisabled && "pointer", b, (o) => {
+  if (!o.$isDisabled)
+    return o.$isChecked ? n(["background-color:", ";"], e.blue600) : n(["border-color:", ";"], t["radio-border-unchecked-hover"]);
+}), F = i.div.withConfig({
+  displayName: "Label",
+  componentId: "sc-g6pmdd-5"
+})(["display:block;margin-left:8px;color:", ";"], (o) => o.$isDisabled ? e.colorTextDisabled : e.colorText), M = i.span.withConfig({
+  displayName: "SubtextHolder",
+  componentId: "sc-g6pmdd-6"
+})(["display:block;color:", ";font-size:", ";"], (o) => o.$isDisabled ? e.colorTextDisabled : e.colorTextMuted, e.fontSize75);
+export {
+  B as Radio
+};

package/RadioGroup.js

@@ -0,0 +1,25 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+import { ControlGroup as n } from "./ControlGroup.js";
+import { RadioCtx as a } from "./context6.js";
+import { Radio as d } from "./Radio.js";
+import { useId as c } from "./useId.js";
+function x({
+  selectedValue: o,
+  onChange: r,
+  isDisabled: t = !1,
+  children: p,
+  ...u
+}) {
+  const m = c("radio-group"), e = f(() => ({
+    name: m,
+    selectedValue: o,
+    onChange: r,
+    isDisabled: t
+  }), [m, o, r, t]);
+  return /* @__PURE__ */ i(a.Provider, { value: e, children: /* @__PURE__ */ i(n, { role: "radiogroup", ...u, children: p }) });
+}
+x.Radio = d;
+export {
+  x as RadioGroup
+};

package/RangeInput.js

@@ -0,0 +1,41 @@
+import { jsxs as c, Fragment as d, jsx as m } from "react/jsx-runtime";
+import { useState as O } from "react";
+import { useTranslate as R } from "./useTranslate.js";
+import { Thumb as T } from "./Thumb.js";
+import { SliderInput as y } from "./styles.js";
+function F({
+  min: n,
+  max: t,
+  value: e,
+  onChange: l,
+  inputPosition: i,
+  isFromCenter: M = !1,
+  isInactive: a,
+  isTooltipHidden: u,
+  isDisabled: o,
+  step: $,
+  "aria-label": s
+}) {
+  const {
+    translate: f
+  } = R(), [g, p] = O(!1), r = Array.isArray(e);
+  return /* @__PURE__ */ c(d, { children: [
+    /* @__PURE__ */ m(y, { min: n, max: t, value: r ? e[0] : e, $values: e, type: "range", onChange: l, name: "min-input", step: $, onMouseDown: () => {
+      p(!0);
+    }, onMouseUp: () => {
+      p(!1);
+    }, $isFromCenter: M, $isRange: r, $isDisabled: o, role: "slider", disabled: o, "aria-label": r ? `${s}, ${f("slider.minimum")}` : s }),
+    /* @__PURE__ */ m(T, { isTooltipOpen: g && !u, min: n, max: t, value: r ? e[0] : e, inputPosition: i, isInactive: a, isDisabled: o }),
+    r && /* @__PURE__ */ c(d, { children: [
+      /* @__PURE__ */ m(y, { min: n, max: t, value: e[1], type: "range", onChange: l, name: "max-input", step: $, $values: e, onMouseDown: () => {
+        p(!0);
+      }, onMouseUp: () => {
+        p(!1);
+      }, $isRange: r, $isDisabled: o, disabled: o, "aria-label": r ? `${s}, ${f("slider.maximum")}` : s }),
+      /* @__PURE__ */ m(T, { isTooltipOpen: g && !u, min: n, max: t, value: e[1], inputPosition: i, isInactive: a, isDisabled: o })
+    ] })
+  ] });
+}
+export {
+  F as RangeInput
+};

package/RefreshingSpinner.js

@@ -1,7 +1,7 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { styled as i } from "styled-components";
+import i from "./styled-components.browser.esm.js";
 import { Spinner as n } from "./Spinner.js";
-function l() {
+function p() {
   return /* @__PURE__ */ e(t, { role: "alert", "aria-live": "polite", children: [
     " ",
     /* @__PURE__ */ r(n, { isRefreshingSpinner: !0 }),
@@ -17,6 +17,5 @@ const t = i.div`
 	background-color: #fff;
 `;
 export {
-  l as RefreshingSpinner
+  p as RefreshingSpinner
 };
-//# sourceMappingURL=RefreshingSpinner.js.map

package/ReportModal.js

@@ -1,28 +1,30 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
 import c from "react";
-import i from "styled-components";
-import { token as e, ModalConfirmation as d, Button as l } from "@bynder/design-system";
+import i from "./styled-components.browser.esm.js";
+import { Button as l } from "./Button.js";
+import { ModalConfirmation as d } from "./ModalConfirmation.js";
+import { token as e } from "./token.js";
 import { __ as r } from "./index2.js";
-function $(n) {
+function C(t) {
   return /* @__PURE__ */ a(
     d,
     {
       title: r("Send error report"),
-      isOpen: n.isOpen,
-      onClose: n.onCancel,
-      actionPrimary: /* @__PURE__ */ t(l, { variant: "primary", title: r("Send report"), onClick: n.onDone, children: r("Send report") }),
-      actionSecondary: /* @__PURE__ */ t(l, { variant: "secondary", title: r("Cancel"), onClick: n.onCancel, children: r("Cancel") }),
-      container: n.container,
+      isOpen: t.isOpen,
+      onClose: t.onCancel,
+      actionPrimary: /* @__PURE__ */ n(l, { variant: "primary", title: r("Send report"), onClick: t.onDone, children: r("Send report") }),
+      actionSecondary: /* @__PURE__ */ n(l, { variant: "secondary", title: r("Cancel"), onClick: t.onCancel, children: r("Cancel") }),
+      container: t.container,
       children: [
-        /* @__PURE__ */ t(s, { children: r(
+        /* @__PURE__ */ n(s, { children: r(
           "We have created a report that you can send us to help us prevent this from happening in the future."
         ) }),
-        /* @__PURE__ */ t(h, { "data-testid": "error-stack", children: n.error.stack?.split(`
+        /* @__PURE__ */ n(h, { "data-testid": "error-stack", children: t.error.stack?.split(`
 `).map((o) => /* @__PURE__ */ a(c.Fragment, { children: [
           o,
-          /* @__PURE__ */ t("br", {})
+          /* @__PURE__ */ n("br", {})
         ] }, o)) }),
-        /* @__PURE__ */ t(m, { children: r("We will treat this report as confidential and anonymous.") })
+        /* @__PURE__ */ n(m, { children: r("We will treat this report as confidential and anonymous.") })
       ]
     }
   );
@@ -46,6 +48,5 @@ const s = i.div`
 	font-size: ${e.fontSize75};
 `;
 export {
-  $ as ReportModal
+  C as ReportModal
 };
-//# sourceMappingURL=ReportModal.js.map

package/RequestHandler.js

@@ -0,0 +1,119 @@
+import { getCallFrame as q } from "./getCallFrame.js";
+import { isIterable as R } from "./isIterable.js";
+var v = Object.defineProperty, f = (n, e, t) => e in n ? v(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, o = (n, e, t) => f(n, typeof e != "symbol" ? e + "" : e, t);
+const h = class a {
+  constructor(e) {
+    o(this, "info"), o(this, "isUsed"), o(this, "resolver"), o(this, "resolverIterator"), o(this, "resolverIteratorResult"), o(this, "options"), this.resolver = e.resolver, this.options = e.options;
+    const t = q(new Error());
+    this.info = {
+      ...e.info,
+      callFrame: t
+    }, this.isUsed = !1;
+  }
+  /**
+   * Parse the intercepted request to extract additional information from it.
+   * Parsed result is then exposed to other methods of this request handler.
+   */
+  async parse(e) {
+    return {};
+  }
+  /**
+   * Test if this handler matches the given request.
+   *
+   * This method is not used internally but is exposed
+   * as a convenience method for consumers writing custom
+   * handlers.
+   */
+  async test(e) {
+    const t = await this.parse({
+      request: e.request,
+      resolutionContext: e.resolutionContext
+    });
+    return this.predicate({
+      request: e.request,
+      parsedResult: t,
+      resolutionContext: e.resolutionContext
+    });
+  }
+  extendResolverArgs(e) {
+    return {};
+  }
+  // Clone the request instance before it's passed to the handler phases
+  // and the response resolver so we can always read it for logging.
+  // We only clone it once per request to avoid unnecessary overhead.
+  cloneRequestOrGetFromCache(e) {
+    const t = a.cache.get(e);
+    if (typeof t < "u")
+      return t;
+    const s = e.clone();
+    return a.cache.set(e, s), s;
+  }
+  /**
+   * Execute this request handler and produce a mocked response
+   * using the given resolver function.
+   */
+  async run(e) {
+    var t, s;
+    if (this.isUsed && ((t = this.options) != null && t.once))
+      return null;
+    const l = this.cloneRequestOrGetFromCache(e.request), i = await this.parse({
+      request: e.request,
+      resolutionContext: e.resolutionContext
+    });
+    if (!this.predicate({
+      request: e.request,
+      parsedResult: i,
+      resolutionContext: e.resolutionContext
+    }) || this.isUsed && ((s = this.options) != null && s.once))
+      return null;
+    this.isUsed = !0;
+    const r = this.wrapResolver(this.resolver), d = this.extendResolverArgs({
+      request: e.request,
+      parsedResult: i
+    }), p = await r({
+      ...d,
+      requestId: e.requestId,
+      request: e.request
+    }).catch((c) => {
+      if (c instanceof Response)
+        return c;
+      throw c;
+    });
+    return this.createExecutionResult({
+      // Pass the cloned request to the result so that logging
+      // and other consumers could read its body once more.
+      request: l,
+      requestId: e.requestId,
+      response: p,
+      parsedResult: i
+    });
+  }
+  wrapResolver(e) {
+    return async (t) => {
+      var s;
+      if (!this.resolverIterator) {
+        const r = await e(t);
+        if (!R(r))
+          return r;
+        this.resolverIterator = Symbol.iterator in r ? r[Symbol.iterator]() : r[Symbol.asyncIterator]();
+      }
+      this.isUsed = !1;
+      const { done: l, value: i } = await this.resolverIterator.next(), u = await i;
+      return u && (this.resolverIteratorResult = u.clone()), l ? (this.isUsed = !0, (s = this.resolverIteratorResult) == null ? void 0 : s.clone()) : u;
+    };
+  }
+  createExecutionResult(e) {
+    return {
+      handler: this,
+      request: e.request,
+      requestId: e.requestId,
+      response: e.response,
+      parsedResult: e.parsedResult
+    };
+  }
+};
+o(h, "cache", /* @__PURE__ */ new WeakMap());
+let w = h;
+export {
+  w as RequestHandler
+};

package/RightArrow.js

@@ -1,10 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import o from "styled-components";
-import { IconArrowRight as r } from "@bynder/icons";
-import { Button as e } from "@bynder/design-system";
+import o from "./styled-components.browser.esm.js";
+import { IconArrowRight as r } from "./index4.js";
+import { Button as a } from "./Button.js";
 function d(i) {
   return /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(
-    e,
+    a,
     {
       icon: /* @__PURE__ */ t(r, {}),
       "aria-label": "Next",
@@ -28,4 +28,3 @@ const f = o.div`
 export {
   d as RightArrow
 };
-//# sourceMappingURL=RightArrow.js.map

package/RootElementContext.js

@@ -9,4 +9,3 @@ export {
   s as RootElementProvider,
   m as useRootElement
 };
-//# sourceMappingURL=RootElementContext.js.map

package/Row.js

@@ -0,0 +1,16 @@
+import { jsx as i } from "react/jsx-runtime";
+import r from "./styled-components.browser.esm.js";
+import { token as e } from "./token.js";
+function d({
+  children: o,
+  ...t
+}) {
+  return /* @__PURE__ */ i(m, { ...t, children: o });
+}
+const m = r.div.withConfig({
+  displayName: "RowStyled",
+  componentId: "sc-e7h6ag-0"
+})(["display:grid;grid-template-columns:repeat(auto-fit,minmax(10px,1fr));gap:", ";"], e.spacing4);
+export {
+  d as Row
+};

package/SearchInput.js

@@ -1,9 +1,9 @@
-import { jsxs as F, jsx as o } from "react/jsx-runtime";
-import { useState as n, useEffect as p } from "react";
-import g from "styled-components";
-import { useDebouncedCallback as m } from "use-debounce";
-import { IconImage as H, IconSearch as R } from "@bynder/icons";
-import { Input as $ } from "@bynder/design-system";
+import { jsxs as B, jsx as o } from "react/jsx-runtime";
+import { useState as a, useEffect as p } from "react";
+import g from "./styled-components.browser.esm.js";
+import { useDebouncedCallback as m } from "./index.module2.js";
+import { IconSearch as F, IconImage as H } from "./index4.js";
+import { Input as $ } from "./Input.js";
 import { Spinner as j } from "./Spinner.js";
 import { __ as f } from "./index2.js";
 import { useRouterSelectors as A } from "./useRouterStore.js";
@@ -13,47 +13,52 @@ import { useSearchStateByPage as T } from "./useSearchStore.js";
 import { useSimilaritySearchStore as U } from "./useSimilaritySearchStore.js";
 import { useSimilarityAssets as V } from "./getSimilarityAssets.js";
 function re() {
-  const t = A.use.page(), w = E(), { value: i, isLoading: a, setSearch: I } = T(t.page), { isEnabled: v, isNLSSelected: c, setIsNLSSelected: b, setNLSSearchText: x, setIsSelected: C } = U(), { search: L, resetData: N } = V(), s = m(L, 500), [l, h] = n(i), [y, u] = n(!1), [D, S] = n(!1);
+  const t = A.use.page(), w = E(), { value: i, isLoading: c, setSearch: I } = T(t.page), { isEnabled: v, isNLSSelected: s, setIsNLSSelected: L, setNLSSearchText: b, setIsSelected: x } = U(), { search: C, resetData: N } = V(), n = m(C, 500), [l, h] = a(i), [D, u] = a(!1), [R, S] = a(!1);
   p(() => {
     h(i);
   }, [t, i]);
   const r = m((e) => {
-    C(!1), I(e);
+    x(!1), I(e);
   }, 500);
   p(() => () => {
-    r.flush(), s.flush();
-  }, [t, r, s]);
-  const M = (e) => (h(e), c ? (x(e), e.length === 0 && N(), s(void 0, e)) : r(e)), k = () => {
+    r.flush(), n.flush();
+  }, [t, r, n]);
+  const y = (e) => (h(e), s ? (b(e), e.length === 0 && N(), n(void 0, e)) : r(e)), M = () => {
     S(!0);
-  }, B = () => {
+  }, k = () => {
     setTimeout(() => {
       S(!1);
     }, 0);
   }, d = t.page === "collections" ? f("Search for collections") : f("Search for assets");
-  return /* @__PURE__ */ F(_, { $hideSwitch: w, children: [
+  return /* @__PURE__ */ B(_, { $hideSwitch: w, children: [
     /* @__PURE__ */ o(
       $,
       {
         value: l,
         placeholder: d,
         "aria-label": d,
-        onChange: (e) => M(e),
+        onChange: (e) => y(e),
         "data-testid": "search-input",
-        icon: /* @__PURE__ */ o(R, {}),
-        iconRight: a ? /* @__PURE__ */ o("div", { role: "alert", "aria-live": "polite", children: /* @__PURE__ */ o(j, { isRelative: !0 }) }) : /* @__PURE__ */ o(H, {}),
-        hasClearButton: !a && (!!i || !!l),
+        icon: /* @__PURE__ */ o(F, {}),
+        iconRight: (() => {
+          if (c)
+            return /* @__PURE__ */ o("div", { role: "alert", "aria-live": "polite", children: /* @__PURE__ */ o(j, { isRelative: !0 }) });
+          if (s)
+            return /* @__PURE__ */ o(H, {});
+        })(),
+        hasClearButton: !c && (!!i || !!l),
         onFocus: () => u(!0),
         onBlur: () => {
-          D || u(!1);
+          R || u(!1);
         }
       }
     ),
-    v && y && t.page === "assets" && /* @__PURE__ */ o(
+    v && D && t.page === "assets" && /* @__PURE__ */ o(
       z,
       {
-        onMouseDown: k,
-        onMouseUp: B,
-        children: /* @__PURE__ */ o(O, { isNLSSearchOn: c, setIsNLSSearchOn: b })
+        onMouseDown: M,
+        onMouseUp: k,
+        children: /* @__PURE__ */ o(O, { isNLSSearchOn: s, setIsNLSSearchOn: L })
       }
     )
   ] });
@@ -73,4 +78,3 @@ const _ = g.div`
 export {
   re as SearchInput
 };
-//# sourceMappingURL=SearchInput.js.map