welcome-ui 0.32.2 → 1.0.0-beta.10

package/dist/QYJ6MIDR-YegHsExc.mjs

@@ -0,0 +1,97 @@
+"use client";
+import { u as g, b as j, P as C } from "./MTZPJQMC-C9lHSyrL.mjs";
+import { c as v, _ as f, h as m, j as x, a as c, f as P, b as h, i as w, m as l, z as N, F as V, G as z, e as R, E as O } from "./LVA2YJMS-Dm5ieEMw.mjs";
+import { useMemo as T, useState as W } from "react";
+import { u as M } from "./AXB53BZF-DCqNWRx3.mjs";
+var H = "div", _ = v(
+  function(t) {
+    var r = t, { store: e } = r, o = f(r, ["store"]);
+    const n = g();
+    return e = e || n, o = m(c({}, o), {
+      ref: x(e == null ? void 0 : e.setAnchorElement, o.ref)
+    }), o;
+  }
+);
+P(function(t) {
+  const r = _(t);
+  return h(H, r);
+});
+var E = "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z", L = "div", d = 30, a = d / 2, B = {
+  top: `rotate(180 ${a} ${a})`,
+  right: `rotate(-90 ${a} ${a})`,
+  bottom: `rotate(0 ${a} ${a})`,
+  left: `rotate(90 ${a} ${a})`
+};
+function F(u) {
+  const [t, r] = W(), e = u.useState("contentElement");
+  return V(() => {
+    if (!e) return;
+    const n = z(e).getComputedStyle(e);
+    r(n);
+  }, [e]), t;
+}
+var G = v(
+  function(t) {
+    var r = t, { store: e, size: o = d } = r, n = f(r, ["store", "size"]);
+    const p = j();
+    e = e || p, w(
+      e,
+      process.env.NODE_ENV !== "production" && "PopoverArrow must be wrapped in a Popover component."
+    );
+    const i = e.useState(
+      (k) => k.currentPlacement.split("-")[0]
+    ), s = F(e), y = (s == null ? void 0 : s.getPropertyValue("background-color")) || "none", A = (s == null ? void 0 : s.getPropertyValue(`border-${i}-color`)) || "none", S = (s == null ? void 0 : s.getPropertyValue(`border-${i}-width`)) || "0px", $ = Number.parseInt(S) * 2 * (d / o), b = B[i], D = T(
+      () => /* @__PURE__ */ l.jsx("svg", { display: "block", viewBox: "0 0 30 30", children: /* @__PURE__ */ l.jsxs("g", { transform: b, children: [
+        /* @__PURE__ */ l.jsx("path", { fill: "none", d: E }),
+        /* @__PURE__ */ l.jsx("path", { stroke: "none", d: E })
+      ] }) }),
+      [b]
+    );
+    return n = m(c({
+      children: D,
+      "aria-hidden": !0
+    }, n), {
+      ref: x(e.setArrowElement, n.ref),
+      style: c({
+        // server side rendering
+        position: "absolute",
+        fontSize: o,
+        width: "1em",
+        height: "1em",
+        pointerEvents: "none",
+        fill: y,
+        stroke: A,
+        strokeWidth: $
+      }, n.style)
+    }), N(n);
+  }
+), X = P(function(t) {
+  const r = G(t);
+  return h(L, r);
+}), I = "button", U = v(function(t) {
+  var r = t, { store: e } = r, o = f(r, ["store"]);
+  const n = g();
+  e = e || n, w(
+    e,
+    process.env.NODE_ENV !== "production" && "PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component."
+  );
+  const p = o.onClick, i = R((s) => {
+    e == null || e.setAnchorElement(s.currentTarget), p == null || p(s);
+  });
+  return o = O(
+    o,
+    (s) => /* @__PURE__ */ l.jsx(C, { value: e, children: s }),
+    [e]
+  ), o = m(c({}, o), {
+    onClick: i
+  }), o = _(c({ store: e }, o)), o = M(c({ store: e }, o)), o;
+}), Y = P(function(t) {
+  const r = U(t);
+  return h(I, r);
+});
+export {
+  X as P,
+  Y as a,
+  U as b,
+  G as u
+};

package/dist/Radio.js

@@ -0,0 +1,60 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),x=require("./Hint.js"),u=require("./System.js"),e=require("@xstyled/styled-components"),y=require("./Box.js"),$=require("./index-DHCyCfRv.js"),k=require("./field-styles-D_gf6ypV.js"),E=require("./NLEBE274-DvH3XTTw.js"),q=e(E.Radio).withConfig({shouldForwardProp:u.shouldForwardProp})(({order:t="-1",size:o,variant:i})=>e.css`
+    ${k.defaultFieldStyles({size:o,variant:i})};
+    ${e.th("radios.default")}
+    position: relative;
+    padding: 0;
+    order: ${t};
+    cursor: pointer;
+    border-radius: 50%;
+    transition: medium;
+    ${e.system};
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 8;
+      height: 8;
+      border-radius: 8;
+      top: 3;
+      left: 3;
+      background-color: transparent;
+      transition: medium;
+    }
+
+    &[aria-checked='true'] {
+      &:not([disabled]) {
+        ${e.th("radios.checked")};
+      }
+
+      &[disabled] {
+        &::after {
+          background-color: ${e.th("radios.checkedCenteredColor.disabled")};
+        }
+      }
+
+      &::after {
+        background-color: ${e.th("radios.checkedCenteredColor.default")};
+      }
+    }
+  `),w=e($.Label)`
+  max-width: 100%;
+  /** we need to reset margin-bottom from Label component */
+  margin-bottom: 0 !important;
+  ${e.system};
+`,R=e.div`
+  flex-shrink: 0;
+  position: relative;
+  align-items: center;
+  display: flex;
+`,L=e(y.Box)`
+  display: flex;
+  align-items: flex-start;
+  gap: sm;
+
+  input {
+    margin-top: xs;
+  }
+`,C=e.div`
+  display: flex;
+  flex-direction: column;
+`,m=u.forwardRef(({dataTestId:t,disabled:o,disabledIcon:i,flexDirection:f,hint:a,label:l,maxWidth:p,onChange:s,onClick:d,variant:c,...b},h)=>{const g=n=>{n.stopPropagation(),d&&d(n),s&&s(n)};return r.createElement(w,{alignItems:"flex-start",checkableField:!0,disabled:o,disabledIcon:i,flexDirection:"column",maxWidth:p,onClick:g,variant:c,withDisabledIcon:!1},r.createElement(L,{flexDirection:f},r.createElement(R,null,r.createElement(q,{"data-testid":t,disabled:o,label:l,ref:h,variant:c,...b})),r.createElement(C,null,r.createElement("div",{"data-testid":t?`${t}-label`:void 0},l),a&&r.createElement(x.Hint,{"data-testid":t?`${t}-hint`:void 0,mt:"0"},a))))});m.displayName="Radio";exports.Radio=m;

package/dist/Radio.mjs

@@ -0,0 +1,118 @@
+"use client";
+import t from "react";
+import { Hint as $ } from "./Hint.mjs";
+import { shouldForwardProp as x, forwardRef as k } from "./System.mjs";
+import o, { css as w, th as i, system as f } from "@xstyled/styled-components";
+import { Box as y } from "./Box.mjs";
+import { L as E } from "./index-D3Tnfi3U.mjs";
+import { d as R } from "./field-styles-CeV7pnOp.mjs";
+import { R as C } from "./NLEBE274-FThuwZH_.mjs";
+const L = o(C).withConfig({ shouldForwardProp: x })(
+  ({ order: e = "-1", size: r, variant: a }) => w`
+    ${R({ size: r, variant: a })};
+    ${i("radios.default")}
+    position: relative;
+    padding: 0;
+    order: ${e};
+    cursor: pointer;
+    border-radius: 50%;
+    transition: medium;
+    ${f};
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 8;
+      height: 8;
+      border-radius: 8;
+      top: 3;
+      left: 3;
+      background-color: transparent;
+      transition: medium;
+    }
+
+    &[aria-checked='true'] {
+      &:not([disabled]) {
+        ${i("radios.checked")};
+      }
+
+      &[disabled] {
+        &::after {
+          background-color: ${i("radios.checkedCenteredColor.disabled")};
+        }
+      }
+
+      &::after {
+        background-color: ${i("radios.checkedCenteredColor.default")};
+      }
+    }
+  `
+), _ = o(E)`
+  max-width: 100%;
+  /** we need to reset margin-bottom from Label component */
+  margin-bottom: 0 !important;
+  ${f};
+`, F = o.div`
+  flex-shrink: 0;
+  position: relative;
+  align-items: center;
+  display: flex;
+`, v = o(y)`
+  display: flex;
+  align-items: flex-start;
+  gap: sm;
+
+  input {
+    margin-top: xs;
+  }
+`, D = o.div`
+  display: flex;
+  flex-direction: column;
+`, H = k(
+  ({
+    dataTestId: e,
+    disabled: r,
+    disabledIcon: a,
+    flexDirection: p,
+    hint: l,
+    label: d,
+    maxWidth: u,
+    onChange: s,
+    onClick: m,
+    variant: c,
+    ...b
+  }, h) => {
+    const g = (n) => {
+      n.stopPropagation(), m && m(n), s && s(n);
+    };
+    return /* @__PURE__ */ t.createElement(
+      _,
+      {
+        alignItems: "flex-start",
+        checkableField: !0,
+        disabled: r,
+        disabledIcon: a,
+        flexDirection: "column",
+        maxWidth: u,
+        onClick: g,
+        variant: c,
+        withDisabledIcon: !1
+      },
+      /* @__PURE__ */ t.createElement(v, { flexDirection: p }, /* @__PURE__ */ t.createElement(F, null, /* @__PURE__ */ t.createElement(
+        L,
+        {
+          "data-testid": e,
+          disabled: r,
+          label: d,
+          ref: h,
+          variant: c,
+          ...b
+        }
+      )), /* @__PURE__ */ t.createElement(D, null, /* @__PURE__ */ t.createElement("div", { "data-testid": e ? `${e}-label` : void 0 }, d), l && /* @__PURE__ */ t.createElement($, { "data-testid": e ? `${e}-hint` : void 0, mt: "0" }, l)))
+    );
+  }
+);
+H.displayName = "Radio";
+export {
+  H as Radio
+};

package/dist/RadioGroup.js

@@ -0,0 +1,8 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),$=require("./FieldGroup.js"),x=require("./Radio.js"),S=require("./System.js"),t=require("@xstyled/styled-components"),d=require("./radio-group-BpImAAmy.js"),w=t.divBox(({flexDirection:r})=>t.css`
+    display: flex;
+    flex-direction: ${r};
+    flex-wrap: wrap;
+    gap: md;
+
+    ${t.system};
+  `),c=S.forwardRef(({dataTestId:r,flexDirection:o,id:n,label:v,maxWidth:R,name:i,onChange:a,options:f=[],renderOption:m=x.Radio,required:p,value:y,...s},G)=>{const u=d.useRadioStore({defaultValue:y}),b=u.useState("value"),q=e=>{s.disabled||(u.setValue(e),a==null||a(e))};return l.createElement($.FieldGroup,{as:d.RadioGroup,dataTestId:r,label:v,mb:0,ref:G,required:p,store:u},l.createElement(w,{flexDirection:o},f.map(e=>l.createElement(m,{checked:e.value===b,dataTestId:r?`${r}-${e.value}`:void 0,hint:e.hint,id:`${n||i}.${e.value}`,key:e.value,label:e.label,maxWidth:R,name:i,onChange:()=>q(e.value),value:e.value,...s}))))});c.displayName="RadioGroup";exports.RadioGroup=c;

package/dist/RadioGroup.mjs

@@ -0,0 +1,68 @@
+"use client";
+import t from "react";
+import { FieldGroup as x } from "./FieldGroup.mjs";
+import { Radio as y } from "./Radio.mjs";
+import { forwardRef as b } from "./System.mjs";
+import G, { css as _, system as w } from "@xstyled/styled-components";
+import { u as E, R as V } from "./radio-group-29lMl-2M.mjs";
+const h = G.divBox(
+  ({ flexDirection: a }) => _`
+    display: flex;
+    flex-direction: ${a};
+    flex-wrap: wrap;
+    gap: md;
+
+    ${w};
+  `
+), k = b(
+  ({
+    dataTestId: a,
+    flexDirection: i,
+    id: s,
+    label: m,
+    maxWidth: o,
+    name: u,
+    onChange: r,
+    options: f = [],
+    renderOption: c = y,
+    required: p,
+    value: v,
+    ...d
+  }, R) => {
+    const l = E({ defaultValue: v }), $ = l.useState("value"), n = (e) => {
+      d.disabled || (l.setValue(e), r == null || r(e));
+    };
+    return /* @__PURE__ */ t.createElement(
+      x,
+      {
+        as: V,
+        dataTestId: a,
+        label: m,
+        mb: 0,
+        ref: R,
+        required: p,
+        store: l
+      },
+      /* @__PURE__ */ t.createElement(h, { flexDirection: i }, f.map((e) => /* @__PURE__ */ t.createElement(
+        c,
+        {
+          checked: e.value === $,
+          dataTestId: a ? `${a}-${e.value}` : void 0,
+          hint: e.hint,
+          id: `${s || u}.${e.value}`,
+          key: e.value,
+          label: e.label,
+          maxWidth: o,
+          name: u,
+          onChange: () => n(e.value),
+          value: e.value,
+          ...d
+        }
+      )))
+    );
+  }
+);
+k.displayName = "RadioGroup";
+export {
+  k as RadioGroup
+};

package/dist/RadioTab.js

@@ -0,0 +1,61 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),m=require("./Button.js"),a=require("./System.js"),t=require("@xstyled/styled-components"),p=require("./field-styles-D_gf6ypV.js"),b=require("./overflow-ellipsis-C2ESrF8C.js"),f=require("./NLEBE274-DvH3XTTw.js"),h=t(f.Radio).withConfig({shouldForwardProp:a.shouldForwardProp})`
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+`,y=t.css`
+  margin-top: -${t.th.borderWidth("sm")};
+
+  &:first-of-type {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &:last-of-type {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+`,g=t.css`
+  margin-left: -${t.th.borderWidth("sm")};
+
+  &:first-of-type {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:last-of-type {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+`;t.label(({checked:r,flexDirection:e,size:o,variant:i})=>t.css`
+    ${t.th("radioTabs.default")};
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    min-height: ${t.th(`defaultFields.sizes.${o}.height`)};
+    max-width: 100%;
+    margin: 0;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+    transition: medium;
+
+    ${p.defaultFieldStyles({size:o,variant:i})};
+    ${r&&t.css`
+      ${t.th("radioTabs.checked")};
+      z-index: 2;
+    `};
+    ${e==="column"&&y};
+    ${e==="row"&&g};
+    ${t.system};
+    padding-top: 0;
+    padding-bottom: 0;
+  `);t.div`
+  flex-shrink: 0;
+  position: relative;
+`;t.div`
+  ${b.overflowEllipsis};
+  max-width: 100%;
+`;const d=a.forwardRef(({checked:r,dataTestId:e,disabled:o,id:i,label:l,onChange:n,value:u},c)=>s.createElement(m.Button,{as:"label",borderColor:!r&&"neutral-30",className:"label",dataTestId:e,disabled:o,ref:c,variant:r?"primary":"ghost"},s.createElement(h,{checked:r,"data-testid":e?`${e}-input`:void 0,disabled:o,id:i,onChange:n,value:u}),l));d.displayName="RadioTab";exports.RadioTab=d;

package/dist/RadioTab.mjs

@@ -0,0 +1,104 @@
+"use client";
+import d from "react";
+import { Button as p } from "./Button.mjs";
+import { shouldForwardProp as u, forwardRef as b } from "./System.mjs";
+import a, { css as e, th as i, system as h } from "@xstyled/styled-components";
+import { d as c } from "./field-styles-CeV7pnOp.mjs";
+import { o as g } from "./overflow-ellipsis-DGV5Kgt-.mjs";
+import { R as y } from "./NLEBE274-FThuwZH_.mjs";
+const $ = a(y).withConfig({ shouldForwardProp: u })`
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+`, w = e`
+  margin-top: -${i.borderWidth("sm")};
+
+  &:first-of-type {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &:last-of-type {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+`, x = e`
+  margin-left: -${i.borderWidth("sm")};
+
+  &:first-of-type {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:last-of-type {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+`;
+a.label(
+  ({ checked: o, flexDirection: t, size: r, variant: s }) => e`
+    ${i("radioTabs.default")};
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    min-height: ${i(`defaultFields.sizes.${r}.height`)};
+    max-width: 100%;
+    margin: 0;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+    transition: medium;
+
+    ${c({ size: r, variant: s })};
+    ${o && e`
+      ${i("radioTabs.checked")};
+      z-index: 2;
+    `};
+    ${t === "column" && w};
+    ${t === "row" && x};
+    ${h};
+    padding-top: 0;
+    padding-bottom: 0;
+  `
+);
+a.div`
+  flex-shrink: 0;
+  position: relative;
+`;
+a.div`
+  ${g};
+  max-width: 100%;
+`;
+const R = b(
+  ({ checked: o, dataTestId: t, disabled: r, id: s, label: l, onChange: m, value: n }, f) => /* @__PURE__ */ d.createElement(
+    p,
+    {
+      as: "label",
+      borderColor: !o && "neutral-30",
+      className: "label",
+      dataTestId: t,
+      disabled: r,
+      ref: f,
+      variant: o ? "primary" : "ghost"
+    },
+    /* @__PURE__ */ d.createElement(
+      $,
+      {
+        checked: o,
+        "data-testid": t ? `${t}-input` : void 0,
+        disabled: r,
+        id: s,
+        onChange: m,
+        value: n
+      }
+    ),
+    l
+  )
+);
+R.displayName = "RadioTab";
+export {
+  R as RadioTab
+};

package/dist/SYRFVSLH-Babm193P.js

@@ -0,0 +1 @@
+"use client";"use strict";const d=require("./X5NMLKT6-BzhcQu_I.js"),m=require("./VGCJ63VH-Cuf7P3qW.js"),e=require("./LVA2YJMS-B2HZjIhJ.js"),p=require("react");var x="button",D=e.createHook(function(t){var i=t,{store:o}=i,s=e.__objRest(i,["store"]);const l=m.useDialogScopedContext();o=o||l;const n=s.onClick,a=e.useEvent(r=>{n==null||n(r),!r.defaultPrevented&&(o==null||o.hide())}),c=p.useMemo(()=>e.jsxRuntimeExports.jsxs("svg",{"aria-label":"Dismiss popup",display:"block",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,viewBox:"0 0 16 16",height:"1em",width:"1em",children:[e.jsxRuntimeExports.jsx("line",{x1:"4",y1:"4",x2:"12",y2:"12"}),e.jsxRuntimeExports.jsx("line",{x1:"4",y1:"12",x2:"12",y2:"4"})]}),[]);return s=e.__spreadProps(e.__spreadValues({"data-dialog-dismiss":"",children:c},s),{onClick:a}),s=d.useButton(s),s}),g=e.forwardRef2(function(t){const i=D(t);return e.createElement(x,i)});exports.DialogDismiss=g;

package/dist/SYRFVSLH-DXZgEwus.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { u as c } from "./X5NMLKT6-DGZEtYXj.mjs";
+import { b as d } from "./VGCJ63VH-BqPfqkK_.mjs";
+import { c as p, _ as f, e as x, m as r, h as D, a as g, f as h, b as k } from "./LVA2YJMS-Dm5ieEMw.mjs";
+import { useMemo as _ } from "react";
+var b = "button", v = p(
+  function(i) {
+    var e = i, { store: o } = e, s = f(e, ["store"]);
+    const l = d();
+    o = o || l;
+    const t = s.onClick, u = x((n) => {
+      t == null || t(n), !n.defaultPrevented && (o == null || o.hide());
+    }), m = _(
+      () => /* @__PURE__ */ r.jsxs(
+        "svg",
+        {
+          "aria-label": "Dismiss popup",
+          display: "block",
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          viewBox: "0 0 16 16",
+          height: "1em",
+          width: "1em",
+          children: [
+            /* @__PURE__ */ r.jsx("line", { x1: "4", y1: "4", x2: "12", y2: "12" }),
+            /* @__PURE__ */ r.jsx("line", { x1: "4", y1: "12", x2: "12", y2: "4" })
+          ]
+        }
+      ),
+      []
+    );
+    return s = D(g({
+      "data-dialog-dismiss": "",
+      children: m
+    }, s), {
+      onClick: u
+    }), s = c(s), s;
+  }
+), w = h(function(i) {
+  const e = v(i);
+  return k(b, e);
+});
+export {
+  w as D
+};

package/dist/Search.js

@@ -0,0 +1,70 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),O=require("downshift"),de=require("./Field.js"),ue=require("./ClearButton.js"),F=require("./System.js"),he=require("./create-event-YSlay9Ef.js"),j=require("./field-styles-D_gf6ypV.js"),pe=require("./throttle-BB1Y3bfD.js"),e=require("@xstyled/styled-components"),fe=require("./Icon.js"),B=require("./overflow-ellipsis-C2ESrF8C.js"),H=e("div").withConfig({shouldForwardProp:F.shouldForwardProp})`
+  position: relative;
+  ${e.system};
+`,me=e.div`
+  position: relative;
+`,ge=e("input").withConfig({shouldForwardProp:F.shouldForwardProp})(({iconPlacement:i,size:o,transparent:s,variant:m})=>e.css`
+    position: relative;
+    ${j.defaultFieldStyles({iconPlacement:i,size:o,variant:m,transparent:s,isClearable:!0})};
+    ${B.overflowEllipsis};
+    ${e.system};
+
+    br {
+      display: none;
+    }
+  `),ye=e.ul`
+  ${e.th("defaultFields.select.default")};
+  ${e.th("cards.default")};
+  position: absolute;
+  color: neutral-90;
+  z-index: 2;
+  right: 0;
+  left: 0;
+  margin: 0;
+  margin-top: md;
+  padding: 0;
+  transition: medium;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+`,W=e.li(({isExisting:i,isHighlighted:o,isSelected:s})=>e.css`
+    color: beige-70;
+    ${o&&e.th("defaultFields.select.highlighted")};
+    ${s&&e.th("defaultFields.select.selected")};
+    ${i&&e.th("defaultFields.select.existing")};
+    ${s&&o&&e.th("defaultFields.select.selectedAndHighlighted")};
+    ${B.overflowEllipsis};
+    padding: sm;
+    list-style: none;
+    text-decoration: none;
+    font-size: sm;
+    transition: background ${e.th.transition("medium")};
+  `),Ee=e.div`
+  position: absolute;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+`,we=e.button(({isOpen:i,size:o})=>e.css`
+    position: relative;
+    height: 100%;
+    width: ${e.th(`defaultFields.sizes.${o}.height`)};
+    padding: 0;
+    outline: none !important; /* important for firefox */
+    appearance: none;
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    ${fe.StyledIcon} {
+      transform: ${i?"rotate3d(0, 0, 1, 180deg)":"rotate3d(0)"};
+      transition: medium;
+    }
+
+    &:not(:last-child) {
+      width: auto;
+    }
+  `),_="",Se=O.default||O,V=F.forwardRef(({autoComplete:i="off",autoFocus:o,dataTestId:s,disabled:m,groupsEnabled:A,icon:u,id:G,itemToString:r,minChars:g=3,name:b,onBlur:L,onChange:I,onClick:Y,onFocus:$,placeholder:Z="Search…",renderGroupHeader:J,renderItem:v,search:C,size:y="md",throttle:k=500,value:h=_,variant:K,...E},Q)=>{const U=h?r(h):_,[q,c]=t.useState([]),R=t.useCallback(async n=>{if(g===0||(n==null?void 0:n.length)>=g){const d=await C(n);c(d||[])}else c([])},[g,C]),P=t.useMemo(()=>pe.throttle(R,k,!1),[R,k]),w=n=>{const d=he.createEvent({name:b,value:n});I&&I(n,d)},x=n=>{n?w(n):(w(),c([]))},X=()=>{h||x(),c([])},ee=n=>r(n)||"";return t.createElement(Se,{initialInputValue:U,itemToString:ee,onInputValueChange:P,onOuterClick:X,onSelect:x,selectedItem:h,...E},({clearSelection:n,getInputProps:d,getItemProps:D,getMenuProps:te,getRootProps:ne,highlightedIndex:M,inputValue:oe,isOpen:z,selectedItem:p,toggleMenu:ie})=>{const se=()=>{c([]),w(),n()},re=z&&q.length>0,le=t.createElement(we,{as:"div",size:y},t.createElement(ue.ClearButton,{onClick:se})),ae=d({autoComplete:i,autoFocus:o,"data-testid":s,disabled:m,iconPlacement:!!u&&"left",id:G,name:b,onBlur:L,onClick:Y,onFocus:l=>{$&&$(l),P(""),ie()},placeholder:Z,ref:Q,size:y,tabIndex:0,variant:z?"focused":K,...E}),T=j.FIELD_ICON_SIZE[y];return t.createElement(H,{...ne(E)},t.createElement(me,null,t.createElement(ge,{...ae}),u&&t.createElement(de.IconWrapper,{iconPlacement:"left",size:T},t.cloneElement(u,{...u.props,size:T})),t.createElement(Ee,null,oe&&le)),re&&t.createElement(ye,{...te()},q.reduce((l,a,f)=>(A?l.itemsToRender.push(t.createElement(t.Fragment,{key:f},J(a),a.options&&a.options.map((S,ce)=>{const N=l.itemIndex++;return t.createElement(W,{key:ce,...D({index:N,isSelected:p&&r(p)===r(S),item:S}),isHighlighted:M===N},v(S))}))):l.itemsToRender.push(t.createElement(W,{key:f,...D({index:f,isSelected:p&&r(p)===r(a),item:a}),isHighlighted:M===f},v(a))),l),{itemsToRender:[],itemIndex:0}).itemsToRender))})});V.displayName="Search";const Fe=H;exports.Search=V;exports.StyledSearch=Fe;