@uva-glass/component-library 3.52.6 → 3.52.8

package/dist/components/ControlsButton/ControlsButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as l, Fragment as s } from "react/jsx-runtime";
-import { l as e } from "../../index-BJRrLdmi.js";
+import { f as e } from "../../index-Dbb5M7Zc.js";
 import { ControlsButton as t } from "./ControlsButton.js";
 import { Icons as a } from "../Icon/icons/index.js";
 import { Periods as i } from "../Periods/Periods.js";

package/dist/components/Drawer/Drawer.stories.js

@@ -1,6 +1,6 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { OverlayProvider as p } from "@react-aria/overlays";
-import { l as m } from "../../index-BJRrLdmi.js";
+import { f as m } from "../../index-Dbb5M7Zc.js";
 import { useState as c } from "react";
 import { Drawer as r } from "./Drawer.js";
 import { Button as o } from "../Buttons/Button.js";
@@ -34,15 +34,15 @@ const d = `
     codeString: d
   }
 }, i = (l) => {
-  const [e, n] = c(!1);
+  const [t, n] = c(!1);
   return /* @__PURE__ */ a(p, { children: [
-    /* @__PURE__ */ t(o, { onClick: () => n(!e), variant: "primary", children: "Open drawer" }),
-    e && /* @__PURE__ */ t(
+    /* @__PURE__ */ e(o, { onClick: () => n(!t), variant: "primary", children: "Open drawer" }),
+    t && /* @__PURE__ */ e(
       r,
       {
         ...l,
-        isOpen: e,
-        onClose: () => (m()(), n(!e)),
+        isOpen: t,
+        onClose: () => (m()(), n(!t)),
         children: "Example Drawer Content"
       }
     )
@@ -58,8 +58,8 @@ const f = i.bind({});
 f.args = {
   ...s,
   buttons: /* @__PURE__ */ a(u, { children: [
-    /* @__PURE__ */ t(o, { variant: "primary", children: "Primary Example Button" }),
-    /* @__PURE__ */ t(o, { variant: "secondary", children: "Secondary Example Button" })
+    /* @__PURE__ */ e(o, { variant: "primary", children: "Primary Example Button" }),
+    /* @__PURE__ */ e(o, { variant: "secondary", children: "Secondary Example Button" })
   ] })
 };
 export {

package/dist/components/FeedbackBar/FeedbackBar.test.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as s, s as e, f as r } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as s, s as e, f as r } from "../../react.esm-BjO203QT.js";
 import { FeedbackBar as c } from "./FeedbackBar.js";
 describe("FeedbackBar", () => {
   it("should render with children text", () => {

package/dist/components/FormInput/FormInput.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { l as i } from "../../index-BJRrLdmi.js";
+import { f as i } from "../../index-Dbb5M7Zc.js";
 import { FormInput as a } from "./FormInput.js";
 import { SelectListbox as o } from "../SelectListbox/SelectListbox.js";
 const m = `

package/dist/components/IconButton/IconButton.stories.js

@@ -1,5 +1,5 @@
-import { jsx as e } from "react/jsx-runtime";
-import { l as r } from "../../index-BJRrLdmi.js";
+import { jsx as n } from "react/jsx-runtime";
+import { f as r } from "../../index-Dbb5M7Zc.js";
 import { IconButton as t } from "./IconButton.js";
 import { Icon as i } from "../Icon/Icon.js";
 const l = `<IconButton variant={variant} aria-label={aria-label} onClick={onClickFunction}>
@@ -40,8 +40,8 @@ const l = `<IconButton variant={variant} aria-label={aria-label} onClick={onClic
     codeString: l
   }
 }, s = (o) => {
-  const n = o.variant ?? [], a = { ...o, variant: n.toString() };
-  return /* @__PURE__ */ e(t, { ...a });
+  const e = o.variant ?? [], a = { ...o, variant: e.toString() };
+  return /* @__PURE__ */ n(t, { ...a });
 }, c = s.bind({});
 c.args = {
   "aria-label": "Trash",
@@ -49,7 +49,7 @@ c.args = {
   noBorder: !1,
   wide: !1,
   disabled: !1,
-  children: /* @__PURE__ */ e(i, { name: "Trash" }),
+  children: /* @__PURE__ */ n(i, { name: "Trash" }),
   onClick: r()
 };
 export {

package/dist/components/InputField/InputField.stories.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useState as d, useRef as g } from "react";
-import { l as p } from "../../index-BJRrLdmi.js";
+import { f as p } from "../../index-Dbb5M7Zc.js";
 import { InputField as e } from "./InputField.js";
 import { Container as u } from "../../storyComponents/Container/Container.js";
 import "../Accordion/Accordion.js";
@@ -29,11 +29,11 @@ import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
 import "../../SortableProvider-BbwlEPIr.js";
 import "../WeekSelector/components/WeekSelectorOptionContainer.js";
-const C = `
+const f = `
 // Has all HTMLInputElement props available except "className" and "style" 
 <InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}
   value={value} type={type} clearTrigger={clearTrigger} />
-`, f = (t) => {
+`, C = (t) => {
   const r = t.variant ?? [];
   return { ...t, variant: r.toString() };
 }, Z = {
@@ -67,7 +67,7 @@ const C = `
   },
   parameters: {
     inspectComponent: e,
-    codeString: C
+    codeString: f
   }
 }, i = (t) => {
   const [r, n] = d(""), l = g(null), m = (c) => {
@@ -78,7 +78,7 @@ const C = `
   return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(
     e,
     {
-      ...f(t),
+      ...C(t),
       value: r,
       onChange: m,
       onClear: s,
@@ -89,12 +89,12 @@ const C = `
   type: "text",
   variant: void 0,
   id: "4f9ca77d"
-}, b = i.bind({});
-b.args = {
+}, v = i.bind({});
+v.args = {
   ...a
 };
-const v = i.bind({});
-v.args = {
+const b = i.bind({});
+b.args = {
   ...a,
   clearTrigger: "Clear"
 };
@@ -104,9 +104,9 @@ y.args = {
   clearTrigger: /* @__PURE__ */ o(h, { name: "Cross" })
 };
 export {
-  b as InputFieldExample,
+  v as InputFieldExample,
   y as WithIconClearTrigger,
-  v as WithStringClearTrigger,
+  b as WithStringClearTrigger,
   Z as default
 };
 //# sourceMappingURL=InputField.stories.js.map

package/dist/components/Label/Label.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as t, s as l } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as t, s as l } from "../../react.esm-BjO203QT.js";
 import { Label as r } from "./Label.js";
 describe("Label", () => {
   it("should render", () => {

package/dist/components/MetaDataBar/MetaDataBar.test.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { r as n, s as e } from "../../react.esm-DdELhthz.js";
+import { r as n, s as e } from "../../react.esm-BjO203QT.js";
 import { MetaDataBar as c } from "./MetaDataBar.js";
 jest.mock("components/Icon", () => ({
   Icon: ({ name: a }) => /* @__PURE__ */ t("span", { "data-testid": "icon", children: a })

package/dist/components/ModalDialog/ModalDialog.stories.js

@@ -1,12 +1,12 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { ModalProvider as n } from "@react-aria/overlays";
-import { l as i } from "../../index-BJRrLdmi.js";
+import { ModalProvider as r } from "@react-aria/overlays";
+import { f as i } from "../../index-Dbb5M7Zc.js";
 import { ModalDialog as t } from "./ModalDialog.js";
-import { Button as l } from "../Buttons/Button.js";
+import { Button as s } from "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";
 import "@react-aria/button";
 import { ButtonGroup as m } from "../ButtonGroup/ButtonGroup.js";
-import { FormField as r } from "../FormField/FormField.js";
+import { FormField as l } from "../FormField/FormField.js";
 import { InputField as d } from "../InputField/InputField.js";
 import { Label as c } from "../Label/Label.js";
 const p = `
@@ -50,10 +50,10 @@ const p = `
     inspectComponent: t,
     codeString: p
   }
-}, u = (o) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(t, { ...o, children: /* @__PURE__ */ a(r, { outerSpace: !0, children: [
+}, u = (o) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(t, { ...o, children: /* @__PURE__ */ a(l, { outerSpace: !0, children: [
   /* @__PURE__ */ e(c, { htmlFor: "text-field", children: "Example Text Field" }),
   /* @__PURE__ */ e(d, { id: "text-field" })
-] }) }) }), s = {
+] }) }) }), n = {
   padded: !1,
   size: "regular",
   noButtonBorder: !1,
@@ -65,26 +65,26 @@ const p = `
   onSubmit: i(),
   onClose: i(),
   buttons: /* @__PURE__ */ a(m, { reversed: !0, children: [
-    /* @__PURE__ */ e(l, { variant: "primary", onClick: i(), children: "OK" }),
-    /* @__PURE__ */ e(l, { variant: "secondary", onClick: i(), children: "Cancel" })
+    /* @__PURE__ */ e(s, { variant: "primary", onClick: i(), children: "OK" }),
+    /* @__PURE__ */ e(s, { variant: "secondary", onClick: i(), children: "Cancel" })
   ] }),
   isOpen: !0
 }, b = u.bind({});
 b.args = {
-  ...s
+  ...n
 };
 const g = u.bind({});
 g.args = {
-  ...s,
+  ...n,
   isLoading: !0,
   spinnerAriaValueText: "Loading"
 };
-const f = (o) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(t, { ...o, children: /* @__PURE__ */ a(r, { outerSpace: !0, children: [
+const f = (o) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(t, { ...o, children: /* @__PURE__ */ a(l, { outerSpace: !0, children: [
   /* @__PURE__ */ e("div", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla. Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod. Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae ultrices erat." }),
   /* @__PURE__ */ e("div", { children: "Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non, vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut sapien tempor, a ornare ipsum faucibus." })
 ] }) }) }), h = f.bind({});
 h.args = {
-  ...s,
+  ...n,
   noButtonBorder: !0
 };
 export {

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as S, jsx as r } from "react/jsx-runtime";
-import { l as d } from "../../index-BJRrLdmi.js";
+import { f as d } from "../../index-Dbb5M7Zc.js";
 import { useState as p } from "react";
 import { M as e } from "../../TablePlugin-CqCjNBW_.js";
 import { Container as M } from "../../storyComponents/Container/Container.js";

package/dist/components/MultiSelectBox/MultiSelectBox.stories.js

@@ -1,10 +1,10 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { l as u } from "../../index-BJRrLdmi.js";
+import { f as u } from "../../index-Dbb5M7Zc.js";
 import { useState as r } from "react";
-import { MultiSelectBox as t } from "./MultiSelectBox.js";
-const b = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", S = {
+import { MultiSelectBox as l } from "./MultiSelectBox.js";
+const d = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", S = {
   title: "Organisms/MultiSelectBox",
-  component: t,
+  component: l,
   argTypes: {
     onChange: {
       action: "Selected values",
@@ -14,10 +14,10 @@ const b = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuff
     }
   },
   parameters: {
-    inspectComponent: t,
-    codeString: b
+    inspectComponent: l,
+    codeString: d
   }
-}, d = [
+}, f = [
   { label: "A.B. Docent", value: "1" },
   { label: "B.C. Docent met lange achternaam", value: "2" },
   {
@@ -35,12 +35,12 @@ const b = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuff
   { label: "H.I. Docent", value: "9" },
   { label: "K.L. Docent ", value: "10" }
 ], n = (e) => {
-  const [c, s] = r(e.defaultSelectedItems || []), i = (l) => {
-    e.onChange && e.onChange(l), s(l);
+  const [c, s] = r(e.defaultSelectedItems || []), i = (t) => {
+    e.onChange && e.onChange(t), s(t);
   };
   return /* @__PURE__ */ m("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: [
-    /* @__PURE__ */ a("span", { children: c.map((l) => l.label).join(", ") }),
-    /* @__PURE__ */ a(t, { ...e, onChange: i })
+    /* @__PURE__ */ a("span", { children: c.map((t) => t.label).join(", ") }),
+    /* @__PURE__ */ a(l, { ...e, onChange: i })
   ] });
 }, o = {
   fullWidth: !1,
@@ -48,10 +48,10 @@ const b = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuff
   maxOptionHeight: "20rem",
   optionPositionRight: !1,
   disabled: !1,
-  selectData: d,
+  selectData: f,
   onChange: u()
-}, f = n.bind({});
-f.args = {
+}, b = n.bind({});
+b.args = {
   ...o
 };
 const g = n.bind({});
@@ -64,7 +64,7 @@ g.args = {
   ]
 };
 export {
-  f as MultiSelectBoxExample,
+  b as MultiSelectBoxExample,
   g as WithDefaultSelectedItems,
   S as default
 };

package/dist/components/MultiSelectBox/MultiSelectBox.test.js

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as d, Fragment as r } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as n, s as t, f as a } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as n, s as t, f as a } from "../../react.esm-BjO203QT.js";
 import { MultiSelectBox as l } from "./MultiSelectBox.js";
 const i = jest.fn(), c = [
   { label: "Option 1", value: "1" },

package/dist/components/Notification/Notification.stories.js

@@ -1,8 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
-import { l as a } from "../../index-BJRrLdmi.js";
+import { f as a } from "../../index-Dbb5M7Zc.js";
 import { Notification as t } from "./Notification.js";
-const l = `<Notification title={title} subtitle={subtitle} action={action} 
-  level={level} variant={variant} onClose={() => {}} />`, m = {
+const r = `<Notification title={title} subtitle={subtitle} action={action} 
+  level={level} variant={variant} onClose={() => {}} />`, p = {
   title: "Molecules/Notification",
   component: t,
   argTypes: {
@@ -17,14 +17,14 @@ const l = `<Notification title={title} subtitle={subtitle} action={action}
   },
   parameters: {
     inspectComponent: t,
-    codeString: l
+    codeString: r
   }
 }, e = (n) => /* @__PURE__ */ i(t, { ...n }), o = {
   level: "information",
   title: "Titel van de melding",
   onClose: a()
-}, r = e.bind({});
-r.args = {
+}, l = e.bind({});
+l.args = {
   ...o,
   variant: "default",
   subtitle: "Subtekst ter verduidelijking van de melding.",
@@ -37,7 +37,7 @@ s.args = {
 };
 export {
   s as AsBar,
-  r as NotificationExample,
-  m as default
+  l as NotificationExample,
+  p as default
 };
 //# sourceMappingURL=Notification.stories.js.map

package/dist/components/Notification/Notification.test.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as i, s as t } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as i, s as t } from "../../react.esm-BjO203QT.js";
 import { Notification as n } from "./Notification.js";
 describe("Notification", () => {
   it("renders title and subtitle", () => {

package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { l as t } from "../../index-BJRrLdmi.js";
+import { f as a } from "../../index-Dbb5M7Zc.js";
 import { OverlayCloseButton as o } from "./OverlayCloseButton.js";
-import { Container as a } from "../../storyComponents/Container/Container.js";
+import { Container as l } from "../../storyComponents/Container/Container.js";
 const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", c = {
   title: "Atoms/OverlayCloseButton",
   component: o,
@@ -17,11 +17,11 @@ const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction}
     inspectComponent: o,
     codeString: r
   }
-}, n = (l) => /* @__PURE__ */ e(a, { size: "small", padded: !1, children: /* @__PURE__ */ e(o, { ...l }) }), s = n.bind({});
+}, n = (t) => /* @__PURE__ */ e(l, { size: "small", padded: !1, children: /* @__PURE__ */ e(o, { ...t }) }), s = n.bind({});
 s.args = {
   paddedModal: !1,
   "aria-label": "Close",
-  onClick: t()
+  onClick: a()
 };
 export {
   s as OverlayCloseButtonExample,

package/dist/components/PeriodSelector/PeriodSelector.stories.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { l as t } from "../../index-BJRrLdmi.js";
+import { f as t } from "../../index-Dbb5M7Zc.js";
 import { PeriodSelector as e } from "./PeriodSelector.js";
 const i = "<PeriodSelector maxPeriods={} defaultValues={} label={} labelPosition={} required={} onChange={} />", m = {
   title: "Organisms/PeriodSelector",
@@ -8,8 +8,8 @@ const i = "<PeriodSelector maxPeriods={} defaultValues={} label={} labelPosition
     inspectComponent: e,
     codeString: i
   }
-}, l = (o) => /* @__PURE__ */ r(e, { ...o }), a = l.bind({});
-a.args = {
+}, a = (o) => /* @__PURE__ */ r(e, { ...o }), l = a.bind({});
+l.args = {
   maxPeriods: 7,
   // eslint-disable-next-line @typescript-eslint/no-magic-numbers
   defaultValues: [1, 5, 6],
@@ -19,7 +19,7 @@ a.args = {
   onChange: t()
 };
 export {
-  a as PeriodSelectorExample,
+  l as PeriodSelectorExample,
   m as default
 };
 //# sourceMappingURL=PeriodSelector.stories.js.map

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { l as a } from "../../index-BJRrLdmi.js";
+import { f as a } from "../../index-Dbb5M7Zc.js";
 import { RadioGroup as o } from "./RadioGroup.js";
 const l = `
   <RadioGroup label={label} options={options} 

package/dist/components/RadioGroup/Radiogroup.test.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
-import "../../index-DYPpFe2R.js";
-import { r as l, s as t, f as s } from "../../react.esm-DdELhthz.js";
+import "../../index-ApPj4mI1.js";
+import { r as l, s as t, f as s } from "../../react.esm-BjO203QT.js";
 import { RadioGroup as a } from "./RadioGroup.js";
 const i = [
   { id: "1", titleLabel: "Option 1", value: "option1" },

package/dist/components/RadioTabSelector/RadioTabSelector.stories.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { l as t } from "../../index-BJRrLdmi.js";
+import { f as t } from "../../index-Dbb5M7Zc.js";
 import { RadioTabSelector as e } from "./RadioTabSelector.js";
 const i = "<RadioTabSelector radioButtons={} defaultValue={} label={} labelPosition={} required={} notValidatedText={} onSetValue={} />", b = {
   title: "Molecules/RadioTabSelector",

package/dist/components/SearchField/SearchField.js

@@ -1,35 +1,35 @@
 import { jsxs as x, jsx as s } from "react/jsx-runtime";
-import { useRef as y, useState as k, useEffect as F, Children as m, isValidElement as N, cloneElement as O } from "react";
-import { c as S } from "../../clsx-OuTLNxxd.js";
-import { ResultOption as D } from "./components/ResultsOption.js";
-import { s as t } from "../../SearchField.module-CMUEgX7d.js";
-import { ResultOptionBox as E } from "./components/ResultOptionBox.js";
-import { Icon as w } from "../Icon/Icon.js";
-import { useOnClickOutside as j } from "../hooks/useOnClickOutside.js";
-const A = ({
-  id: d,
-  placeholder: u,
-  isLoading: b = !1,
-  isCompact: l,
-  onChange: c,
+import { useRef as y, useState as k, useEffect as h, Children as d, isValidElement as F, cloneElement as N } from "react";
+import { c as O } from "../../clsx-OuTLNxxd.js";
+import { ResultOption as S } from "./components/ResultsOption.js";
+import { s as l } from "../../SearchField.module-CMUEgX7d.js";
+import { ResultOptionBox as D } from "./components/ResultOptionBox.js";
+import { Icon as g } from "../Icon/Icon.js";
+import { useOnClickOutside as B } from "../hooks/useOnClickOutside.js";
+const j = ({
+  id: _,
+  placeholder: m,
+  isLoading: v = !1,
+  isCompact: n,
+  onChange: u,
   children: a,
-  resultCountRow: h
+  resultCountRow: c
 }) => {
-  const n = y(null), [_, f] = k(!1), p = y(null), R = () => {
-    n.current && (n.current.value = "", n.current.focus());
-  }, v = (e) => {
-    const o = e.target, r = o.value;
-    o.setSelectionRange(r.length, r.length), r && c(r);
-  }, g = (e) => {
+  const t = y(null), [f, p] = k(!1), b = y(null), w = () => {
+    t.current && (t.current.value = "", t.current.focus());
+  }, E = (e) => {
+    const r = e.target, o = r.value;
+    r.setSelectionRange(o.length, o.length), o && u(o);
+  }, R = (e) => {
     switch (e.key) {
       case "Escape":
-        e.preventDefault(), c(""), n.current && (n.current.value = ""), l && (f(!1), n.current?.blur());
+        e.preventDefault(), u(""), t.current && (t.current.value = ""), n && (p(!1), t.current?.blur());
         break;
       case "ArrowDown": {
         e.preventDefault();
-        const r = p.current?.querySelector('li[role="option"]:not([tabindex="-1"])');
-        if (r) {
-          let i = r;
+        const o = b.current?.querySelector('li[role="option"]:not([tabindex="-1"])');
+        if (o) {
+          let i = o;
           for (; i && i.getAttribute("tabindex") === "-1"; )
             i = i.nextElementSibling;
           i?.focus();
@@ -38,59 +38,69 @@ const A = ({
       }
     }
   };
-  return F(() => {
-    m.count(a) || f(!1);
-  }, [a]), j(p, c.bind(null, "")), /* @__PURE__ */ x("div", { className: t["search-field__input-wrapper"], children: [
-    l && /* @__PURE__ */ s(
+  return h(() => {
+    !d.count(a) && t.current?.value.length === 0 && n && c === null && p(!1);
+  }, [a, n, c]), h(() => {
+    if (t.current === null) return;
+    const e = () => {
+      n && !d.count(a) && p(!1);
+    }, r = t.current;
+    return r.addEventListener("blur", e), () => {
+      r.removeEventListener("blur", e);
+    };
+  }, [n, a]), h(() => {
+    n && f && t.current && t.current.focus();
+  }, [n, f]), B(b, u.bind(null, "")), /* @__PURE__ */ x("div", { className: l["search-field__input-wrapper"], children: [
+    n && /* @__PURE__ */ s(
       "button",
       {
         type: "button",
-        className: t["search-field__compact-button"],
-        onClick: () => f(!0),
-        "aria-label": u,
-        children: /* @__PURE__ */ s(w, { name: "Magnify", className: t["search-field__compact-icon"], "aria-hidden": "true" })
+        className: l["search-field__compact-button"],
+        onClick: () => p(!0),
+        "aria-label": m,
+        children: /* @__PURE__ */ s(g, { name: "Magnify", className: l["search-field__compact-icon"], "aria-hidden": "true" })
       }
     ),
     /* @__PURE__ */ x(
       "div",
       {
-        className: S(t["search-field__input-container"], {
-          [t["search-field__input-container--hidden"]]: l && !_,
-          [t["search-field__input-container--visible"]]: l && _
+        className: O(l["search-field__input-container"], {
+          [l["search-field__input-container--hidden"]]: n && !f,
+          [l["search-field__input-container--visible"]]: n && f
         }),
         children: [
-          /* @__PURE__ */ s(w, { name: "Magnify", className: t["search-field__icon"], "aria-hidden": "true" }),
+          /* @__PURE__ */ s(g, { name: "Magnify", className: l["search-field__icon"], "aria-hidden": "true" }),
           /* @__PURE__ */ s(
             "input",
             {
               type: "text",
-              className: t["search-field__input-field"],
-              placeholder: u,
-              id: d,
-              onChange: (e) => c(e.target.value),
-              onFocus: v,
-              onKeyDown: g,
+              className: l["search-field__input-field"],
+              placeholder: m,
+              id: _,
+              onChange: (e) => u(e.target.value),
+              onFocus: E,
+              onKeyDown: R,
               role: "combobox",
-              "aria-expanded": !!m.count(a) || b,
-              "aria-controls": `${d}-results`,
+              "aria-expanded": !!d.count(a) || v,
+              "aria-controls": `${_}-results`,
               "aria-autocomplete": "list",
               "aria-haspopup": "listbox",
-              "aria-label": u,
+              "aria-label": m,
               autoComplete: "off",
-              ref: n
+              ref: t
             }
           )
         ]
       }
     ),
-    (a || b) && /* @__PURE__ */ s(E, { resultCountRow: h || null, ref: p, children: m.map(a, (e, o) => N(e) ? O(e, {
-      key: o,
-      onReset: R
+    (a || v) && /* @__PURE__ */ s(D, { resultCountRow: c || null, ref: b, children: d.map(a, (e, r) => F(e) ? N(e, {
+      key: r,
+      onReset: w
     }) : e) })
   ] });
 };
-A.ResultOption = D;
+j.ResultOption = S;
 export {
-  A as SearchField
+  j as SearchField
 };
 //# sourceMappingURL=SearchField.js.map