@npm_leadtech/legal-contracts-ui 0.55.0 → 0.55.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -56,6 +56,7 @@ export interface MobileMenuSection {
56
56
  items?: {
57
57
  id: string;
58
58
  link: ReactNode;
59
+ tag?: string;
59
60
  }[];
60
61
  seeAll?: ReactNode | null;
61
62
  content?: ReactNode | null;
@@ -67,6 +68,9 @@ export type NavMenuItemProps = {
67
68
  dropdownItems: (NavMenuItemProps | NavMenuLink)[];
68
69
  hasDropdown: true;
69
70
  isNested?: boolean;
71
+ onItemClick?: () => void;
72
+ isOpen?: boolean;
73
+ onToggle?: (open: boolean) => void;
70
74
  };
71
75
 
72
76
  export type NavMenuLink = {
@@ -76,6 +80,9 @@ export type NavMenuLink = {
76
80
  hasDropdown: false;
77
81
  isNested?: boolean;
78
82
  bold?: boolean;
83
+ onItemClick?: () => void;
84
+ isOpen?: boolean;
85
+ onToggle?: (open: boolean) => void;
79
86
  };
80
87
 
81
88
  export interface NavMenuProps {
@@ -91,7 +98,6 @@ export interface SearchBarProps {
91
98
  searchValue?: string;
92
99
  onInputChange?: (e: React_2.ChangeEvent<HTMLInputElement>) => void;
93
100
  onClear?: () => void;
94
- noResultsText?: string;
95
101
  allDocumentsItem?: SearchItem;
96
102
  }
97
103
 
@@ -30,6 +30,7 @@ export declare interface MobileMenuSection {
30
30
  items?: {
31
31
  id: string;
32
32
  link: ReactNode;
33
+ tag?: string;
33
34
  }[];
34
35
  seeAll?: ReactNode | null;
35
36
  content?: ReactNode | null;
@@ -43,7 +44,6 @@ export interface SearchBarProps {
43
44
  searchValue?: string;
44
45
  onInputChange?: (e: React_2.ChangeEvent<HTMLInputElement>) => void;
45
46
  onClear?: () => void;
46
- noResultsText?: string;
47
47
  allDocumentsItem?: SearchItem;
48
48
  }
49
49
 
@@ -1,28 +1,28 @@
1
1
  import { jsxs as l, jsx as r } from "react/jsx-runtime";
2
2
  import "react";
3
- import { SearchBar as x } from "./SearchBar.js";
3
+ import { SearchBar as u } from "./SearchBar.js";
4
4
  import { PhoneTalkIcon as f } from "./PhoneTalkIcon.js";
5
5
  import { CloseIcon as h } from "./CloseIcon.js";
6
6
  const j = ({
7
- isOpen: m,
8
- onClose: n,
9
- logo: c,
10
- userActions: d,
11
- searchBarProps: p,
12
- sections: o = [],
7
+ isOpen: n,
8
+ onClose: m,
9
+ logo: d,
10
+ userActions: c,
11
+ searchBarProps: o,
12
+ sections: p = [],
13
13
  contactInfo: t,
14
- closeText: u
15
- }) => m ? /* @__PURE__ */ l("div", { className: "fixed inset-0 z-50 flex flex-col overflow-y-auto bg-white text-neutral-800 lg:hidden", children: [
14
+ closeText: x
15
+ }) => n ? /* @__PURE__ */ l("div", { className: "fixed inset-0 z-50 flex flex-col overflow-y-auto bg-white text-neutral-800 lg:hidden", children: [
16
16
  /* @__PURE__ */ l("div", { className: "flex items-center justify-between px-6 py-4", children: [
17
- c,
17
+ d,
18
18
  /* @__PURE__ */ l(
19
19
  "button",
20
20
  {
21
21
  className: "text-small text-primary-500 flex cursor-pointer items-center justify-center gap-1 rounded border border-neutral-400 px-2 py-1",
22
- onClick: n,
22
+ onClick: m,
23
23
  "aria-label": "Close menu",
24
24
  children: [
25
- u,
25
+ x,
26
26
  /* @__PURE__ */ r(h, { fill: "var(--primary-500)" })
27
27
  ]
28
28
  }
@@ -30,27 +30,31 @@ const j = ({
30
30
  ] }),
31
31
  /* @__PURE__ */ l("div", { className: "flex flex-1 flex-col pb-6", children: [
32
32
  /* @__PURE__ */ l("div", { className: "flex flex-col gap-6 px-6", children: [
33
- /* @__PURE__ */ r("div", { className: "flex items-center gap-4", children: d }),
34
- /* @__PURE__ */ r(x, { ...p })
33
+ /* @__PURE__ */ r("div", { className: "flex items-center gap-4", children: c }),
34
+ /* @__PURE__ */ r(u, { ...o })
35
35
  ] }),
36
- /* @__PURE__ */ r("nav", { className: "flex flex-col gap-0", children: o.map((e, i) => {
37
- const a = e.icon != null;
38
- return e.content != null ? /* @__PURE__ */ r("div", { className: "flex items-center px-6 pb-8", children: e.content }, e.id ?? `custom-${i.toString()}`) : /* @__PURE__ */ l(
36
+ /* @__PURE__ */ r("nav", { className: "flex flex-col gap-0", children: p.map((e, s) => {
37
+ const i = e.icon != null;
38
+ return e.content != null ? /* @__PURE__ */ r("div", { className: "flex items-center px-6 pb-8", children: e.content }, e.id ?? `custom-${s.toString()}`) : /* @__PURE__ */ l(
39
39
  "div",
40
40
  {
41
- className: e.title !== "" && !a ? "border-t border-b border-neutral-200 pt-4" : "",
41
+ className: e.title !== "" && !i ? "border-t border-b border-neutral-200 pt-4" : "",
42
42
  children: [
43
- e.title && /* @__PURE__ */ l("div", { className: `flex items-center gap-2 px-6 ${a ? "bg-neutral-50 py-4" : ""}`, children: [
43
+ e.title && /* @__PURE__ */ l("div", { className: `flex items-center gap-2 px-6 ${i ? "bg-neutral-50 py-4" : ""}`, children: [
44
44
  e.icon != null && /* @__PURE__ */ r("span", { className: "text-primary-700", children: e.icon }),
45
45
  /* @__PURE__ */ r("h4", { className: "text-medium font-semibold", children: e.title })
46
46
  ] }),
47
- e.items != null && /* @__PURE__ */ l("ul", { className: `flex flex-col gap-4 ${a ? "p-6" : "px-6 py-4"}`, children: [
48
- e.items.map((s) => /* @__PURE__ */ r("li", { className: "text-medium", children: s.link }, s.id)),
47
+ e.items != null && /* @__PURE__ */ l("ul", { className: `flex flex-col gap-4 ${i ? "p-6" : "px-6 py-4"}`, children: [
48
+ e.items.map((a) => /* @__PURE__ */ l("li", { className: "text-medium flex items-center gap-1", children: [
49
+ a.link,
50
+ " ",
51
+ a.tag && /* @__PURE__ */ r("span", { className: "bg-secondary-200 text-extra-small flex h-4.5 w-5.25 items-center justify-center rounded align-middle font-bold", children: a.tag })
52
+ ] }, a.id)),
49
53
  e.seeAll != null && /* @__PURE__ */ r("li", { className: "font-semibold", children: e.seeAll })
50
54
  ] })
51
55
  ]
52
56
  },
53
- e.id ?? e.title ?? i.toString()
57
+ e.id ?? e.title ?? s.toString()
54
58
  );
55
59
  }) }),
56
60
  t && /* @__PURE__ */ l("div", { className: "mt-auto flex flex-col items-center justify-center border-t border-neutral-100 p-6", children: [
@@ -9,6 +9,9 @@ export type NavMenuItemProps = {
9
9
  dropdownItems: (NavMenuItemProps | NavMenuLink)[];
10
10
  hasDropdown: true;
11
11
  isNested?: boolean;
12
+ onItemClick?: () => void;
13
+ isOpen?: boolean;
14
+ onToggle?: (open: boolean) => void;
12
15
  };
13
16
 
14
17
  export type NavMenuLink = {
@@ -18,6 +21,9 @@ export type NavMenuLink = {
18
21
  hasDropdown: false;
19
22
  isNested?: boolean;
20
23
  bold?: boolean;
24
+ onItemClick?: () => void;
25
+ isOpen?: boolean;
26
+ onToggle?: (open: boolean) => void;
21
27
  };
22
28
 
23
29
  export declare interface NavMenuProps {
@@ -1,7 +1,21 @@
1
- import { jsx as e } from "react/jsx-runtime";
2
- import "react";
3
- import { NavMenuItem as a } from "./NavMenuItem.js";
4
- const o = ({ navItems: m, className: t = "" }) => /* @__PURE__ */ e("nav", { className: t, children: /* @__PURE__ */ e("ul", { className: "text-medium flex flex-wrap items-center gap-4 xl:gap-8", children: m.map((r) => /* @__PURE__ */ e(a, { ...r }, r.id)) }) });
1
+ "use client";
2
+ import { jsx as r } from "react/jsx-runtime";
3
+ import { useState as m } from "react";
4
+ import { NavMenuItem as n } from "./NavMenuItem.js";
5
+ const c = ({ navItems: l, className: o = "" }) => {
6
+ const [t, i] = m(null);
7
+ return /* @__PURE__ */ r("nav", { className: o, children: /* @__PURE__ */ r("ul", { className: "text-medium flex flex-wrap items-center gap-4 xl:gap-8", children: l.map((e) => /* @__PURE__ */ r(
8
+ n,
9
+ {
10
+ ...e,
11
+ isOpen: t === e.id,
12
+ onToggle: (p) => {
13
+ i(p ? e.id : null);
14
+ }
15
+ },
16
+ e.id
17
+ )) }) });
18
+ };
5
19
  export {
6
- o as NavMenu
20
+ c as NavMenu
7
21
  };
@@ -9,6 +9,9 @@ export declare type NavMenuItemProps = {
9
9
  dropdownItems: (NavMenuItemProps | NavMenuLink)[];
10
10
  hasDropdown: true;
11
11
  isNested?: boolean;
12
+ onItemClick?: () => void;
13
+ isOpen?: boolean;
14
+ onToggle?: (open: boolean) => void;
12
15
  };
13
16
 
14
17
  export declare type NavMenuLink = {
@@ -18,5 +21,8 @@ export declare type NavMenuLink = {
18
21
  hasDropdown: false;
19
22
  isNested?: boolean;
20
23
  bold?: boolean;
24
+ onItemClick?: () => void;
25
+ isOpen?: boolean;
26
+ onToggle?: (open: boolean) => void;
21
27
  };
22
28
 
@@ -1,61 +1,104 @@
1
- import { jsxs as r, jsx as e } from "react/jsx-runtime";
2
- import "react";
3
- import { ChevronDownIcon as g } from "./ChevronDownIcon.js";
4
- import { ChevronRightIcon as f } from "./ChevronRightIcon.js";
5
- const h = (o) => {
6
- const { hasDropdown: a, isNested: i } = o, n = {
1
+ "use client";
2
+ import { jsxs as d, jsx as t } from "react/jsx-runtime";
3
+ import { useState as p, useCallback as E, useRef as T, useEffect as $ } from "react";
4
+ import { ChevronDownIcon as j } from "./ChevronDownIcon.js";
5
+ import { ChevronRightIcon as P } from "./ChevronRightIcon.js";
6
+ const R = (l) => {
7
+ const { hasDropdown: g, isNested: w, isOpen: v, onToggle: i } = l, [x, C] = p(!1), [I, u] = p(null), s = v ?? x, n = E(
8
+ (e) => {
9
+ e || u(null), i ? i(e) : C(e);
10
+ },
11
+ [i]
12
+ ), r = T(null);
13
+ $(() => {
14
+ if (!s) return;
15
+ const e = (c) => {
16
+ r.current && !r.current.contains(c.target) && n(!1);
17
+ };
18
+ return document.addEventListener("mousedown", e), () => {
19
+ document.removeEventListener("mousedown", e);
20
+ };
21
+ }, [s, n]);
22
+ const m = {
7
23
  topLevel: {
8
- liClass: "group relative py-2",
24
+ liClass: "relative py-2",
9
25
  triggerClass: "hover:text-neutral-600",
10
26
  dropdownPosition: "top-full left-0",
11
- dropdownTrigger: "group-hover:pointer-events-auto group-hover:opacity-100",
12
- Icon: g,
13
- iconClass: "transition-transform duration-200 group-hover:rotate-180"
27
+ Icon: j
14
28
  },
15
29
  nested: {
16
- liClass: "group/nested relative",
30
+ liClass: "relative",
17
31
  triggerClass: "p-1 hover:bg-primary-100 w-full rounded min-w-48.5",
18
32
  dropdownPosition: "top-0 left-full -mt-4 pl-6",
19
- dropdownTrigger: "group-hover/nested:pointer-events-auto group-hover/nested:opacity-100",
20
- Icon: f,
21
- iconClass: ""
33
+ Icon: P
22
34
  }
23
- }, t = i ? n.nested : n.topLevel, d = t.Icon;
24
- if (a) {
25
- const { dropdownItems: u, label: m } = o;
26
- return /* @__PURE__ */ r("li", { className: t.liClass, children: [
27
- /* @__PURE__ */ r(
28
- "button",
29
- {
30
- className: `text-small flex w-full cursor-pointer items-center justify-between gap-1 font-medium text-nowrap text-neutral-800 transition-colors ${t.triggerClass} `,
31
- "aria-haspopup": "menu",
32
- children: [
33
- /* @__PURE__ */ e("span", { className: "text-medium", children: m }),
34
- /* @__PURE__ */ e(d, { className: t.iconClass, fill: "#000", width: 20, height: 20 })
35
- ]
36
- }
37
- ),
38
- /* @__PURE__ */ e(
39
- "div",
40
- {
41
- className: `pointer-events-none absolute z-50 min-w-48 opacity-0 transition-opacity duration-200 ${t.dropdownPosition} ${t.dropdownTrigger} `,
42
- children: /* @__PURE__ */ e("div", { className: "rounded-md border border-neutral-200 bg-white p-4 shadow-lg", children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-2", children: u.map((l) => /* @__PURE__ */ e(h, { ...l, isNested: !0 }, l.id)) }) })
43
- }
44
- )
45
- ] });
35
+ }, o = w ? m.nested : m.topLevel, b = o.Icon, f = () => {
36
+ n(!1), l.onItemClick && l.onItemClick();
37
+ }, N = (e) => {
38
+ e.stopPropagation(), n(!s);
39
+ }, k = () => {
40
+ globalThis.window.matchMedia("(hover: hover)").matches && n(!0);
41
+ }, O = () => {
42
+ globalThis.window.matchMedia("(hover: hover)").matches && n(!1);
43
+ };
44
+ if (g) {
45
+ const { dropdownItems: e, label: c } = l;
46
+ return /* @__PURE__ */ d(
47
+ "li",
48
+ {
49
+ ref: r,
50
+ className: o.liClass,
51
+ onMouseEnter: k,
52
+ onMouseLeave: O,
53
+ children: [
54
+ /* @__PURE__ */ d(
55
+ "button",
56
+ {
57
+ className: `text-small flex w-full cursor-pointer items-center justify-between gap-1 font-medium text-nowrap text-neutral-800 transition-colors ${o.triggerClass}`,
58
+ "aria-haspopup": "menu",
59
+ "aria-expanded": s,
60
+ onClick: N,
61
+ children: [
62
+ /* @__PURE__ */ t("span", { className: "text-medium", children: c }),
63
+ /* @__PURE__ */ t(b, { fill: "#000", width: 20, height: 20 })
64
+ ]
65
+ }
66
+ ),
67
+ /* @__PURE__ */ t(
68
+ "div",
69
+ {
70
+ className: `absolute z-50 min-w-48 transition-all duration-200 ${o.dropdownPosition} ${s ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
71
+ children: /* @__PURE__ */ t("div", { className: "rounded-md border border-neutral-200 bg-white p-4 shadow-lg", children: /* @__PURE__ */ t("ul", { className: "flex flex-col gap-2", children: e.map((a) => /* @__PURE__ */ t(
72
+ R,
73
+ {
74
+ ...a,
75
+ isNested: !0,
76
+ onItemClick: f,
77
+ isOpen: I === a.id,
78
+ onToggle: (M) => {
79
+ u(M ? a.id : null);
80
+ }
81
+ },
82
+ a.id
83
+ )) }) })
84
+ }
85
+ )
86
+ ]
87
+ }
88
+ );
46
89
  }
47
- const { link: c, tag: s, bold: p } = o;
48
- return /* @__PURE__ */ e("li", { className: t.liClass, children: /* @__PURE__ */ r(
90
+ const { link: y, tag: h, bold: L } = l;
91
+ return /* @__PURE__ */ t("li", { className: o.liClass, onClick: f, children: /* @__PURE__ */ d(
49
92
  "span",
50
93
  {
51
- className: `text-small relative flex w-full items-center justify-between gap-1 font-medium text-nowrap text-neutral-800 transition-colors ${t.triggerClass} `,
94
+ className: `text-small relative flex w-full items-center gap-1 font-medium text-nowrap text-neutral-800 transition-colors ${o.triggerClass} `,
52
95
  children: [
53
- /* @__PURE__ */ e("span", { className: `text-medium flex-1 ${p ? "font-bold" : ""} [&_a]:after:absolute [&_a]:after:inset-0`, children: c }),
54
- s && /* @__PURE__ */ e("span", { className: "bg-secondary-200 text-extra-small rounded px-1 font-bold", children: s })
96
+ /* @__PURE__ */ t("span", { className: `text-medium flex-1 ${L ? "font-bold" : ""} [&_a]:after:absolute [&_a]:after:inset-0`, children: y }),
97
+ h && /* @__PURE__ */ t("span", { className: "bg-secondary-200 text-extra-small flex h-4.5 w-5.25 items-center justify-center rounded align-middle font-bold", children: h })
55
98
  ]
56
99
  }
57
100
  ) });
58
101
  };
59
102
  export {
60
- h as NavMenuItem
103
+ R as NavMenuItem
61
104
  };
@@ -71,7 +71,6 @@ export interface SearchBarProps {
71
71
  searchValue?: string;
72
72
  onInputChange?: (e: React_2.ChangeEvent<HTMLInputElement>) => void;
73
73
  onClear?: () => void;
74
- noResultsText?: string;
75
74
  allDocumentsItem?: SearchItem;
76
75
  }
77
76
 
@@ -10,7 +10,6 @@ export declare interface SearchBarProps {
10
10
  searchValue?: string;
11
11
  onInputChange?: (e: React_2.ChangeEvent<HTMLInputElement>) => void;
12
12
  onClear?: () => void;
13
- noResultsText?: string;
14
13
  allDocumentsItem?: SearchItem;
15
14
  }
16
15
 
@@ -1,21 +1,20 @@
1
- import { jsxs as r, Fragment as p, jsx as e } from "react/jsx-runtime";
1
+ import { jsxs as r, Fragment as b, jsx as e } from "react/jsx-runtime";
2
2
  import "react";
3
3
  import { SearchIcon as u } from "./SearchIcon.js";
4
- import { CloseIcon as x } from "./CloseIcon.js";
4
+ import { CloseIcon as p } from "./CloseIcon.js";
5
5
  import { HighlightedText as f } from "./HighlightedText.js";
6
- const w = ({
7
- items: i,
8
- placeholder: o,
9
- isOpen: s = !1,
6
+ const y = ({
7
+ items: o,
8
+ placeholder: n,
9
+ isOpen: h = !1,
10
10
  onToggle: d,
11
- searchValue: t = "",
12
- onInputChange: h,
11
+ searchValue: i = "",
12
+ onInputChange: s,
13
13
  onClear: c,
14
- noResultsText: b,
15
14
  allDocumentsItem: l
16
15
  }) => {
17
- const n = t.length > 0;
18
- return /* @__PURE__ */ r(p, { children: [
16
+ const t = i.length > 0;
17
+ return /* @__PURE__ */ r(b, { children: [
19
18
  /* @__PURE__ */ r("div", { className: "relative hidden lg:block", children: [
20
19
  /* @__PURE__ */ e(
21
20
  "button",
@@ -23,53 +22,55 @@ const w = ({
23
22
  "aria-label": "Search",
24
23
  className: "hover:bg-primary-100 cursor-pointer rounded-full p-2 transition-colors",
25
24
  onClick: d,
26
- "aria-expanded": s,
25
+ "aria-expanded": h,
27
26
  children: /* @__PURE__ */ e(u, {})
28
27
  }
29
28
  ),
30
- s && /* @__PURE__ */ r(p, { children: [
29
+ h && /* @__PURE__ */ r(b, { children: [
31
30
  /* @__PURE__ */ e("div", { className: "fixed inset-0 z-40", onClick: d, "aria-hidden": "true" }),
32
- /* @__PURE__ */ r("div", { className: "absolute top-full left-0 z-50 mt-2 max-h-[50dvh] w-80 animate-[slideDown_0.2s_ease-out] overflow-y-auto rounded-lg border border-neutral-200 bg-white shadow-lg", children: [
33
- /* @__PURE__ */ e("div", { className: "border-b border-neutral-200 p-3", children: /* @__PURE__ */ r("div", { className: "flex items-center gap-2 rounded-md px-3 py-2", children: [
31
+ /* @__PURE__ */ r("div", { className: "absolute top-full left-0 z-50 mt-4 max-h-[50dvh] w-80 animate-[slideDown_0.2s_ease-out] overflow-y-auto rounded-lg border border-neutral-200 bg-white px-4 shadow-lg", children: [
32
+ /* @__PURE__ */ e("div", { className: `py-2 ${t ? "border-b border-neutral-200" : ""}`, children: /* @__PURE__ */ r("div", { className: "flex items-center gap-2 rounded-md py-2", children: [
34
33
  /* @__PURE__ */ e(
35
34
  "input",
36
35
  {
36
+ name: "search",
37
37
  type: "text",
38
- value: t,
39
- onChange: h,
40
- placeholder: o,
38
+ value: i,
39
+ onChange: s,
40
+ placeholder: n,
41
41
  className: "flex-1 text-base text-neutral-800 outline-none placeholder:text-neutral-400",
42
42
  autoFocus: !0
43
43
  }
44
44
  ),
45
- n && /* @__PURE__ */ e(
45
+ t && /* @__PURE__ */ e(
46
46
  "button",
47
47
  {
48
48
  onClick: c,
49
- className: "cursor-pointer rounded-full p-0.5 transition-colors hover:bg-neutral-200",
49
+ className: "cursor-pointer rounded-full p-0.5 transition-colors hover:bg-neutral-100",
50
50
  "aria-label": "Clear search",
51
- children: /* @__PURE__ */ e(x, { width: 14, height: 14 })
51
+ children: /* @__PURE__ */ e(p, { fill: "var(--neutral-400)", width: 20, height: 20 })
52
52
  }
53
53
  )
54
54
  ] }) }),
55
- /* @__PURE__ */ r("div", { className: "overflow-y-auto", children: [
56
- i.length > 0 && n ? /* @__PURE__ */ e("ul", { className: "py-2", children: i.map((a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
55
+ /* @__PURE__ */ e("div", { className: "overflow-y-auto", children: /* @__PURE__ */ r("ul", { className: t ? "py-4" : "", children: [
56
+ o.length > 0 && t && o.map((a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
57
57
  "a",
58
58
  {
59
59
  href: a.href,
60
- className: "hover:bg-primary-50 block px-4 py-2.5 text-base text-neutral-800 transition-colors",
61
- children: /* @__PURE__ */ e(f, { text: a.label, highlight: t })
60
+ title: a.label,
61
+ className: "hover:bg-primary-50 text-medium block rounded px-1 py-2.5 text-neutral-800 transition-colors",
62
+ children: /* @__PURE__ */ e(f, { text: a.label, highlight: i })
62
63
  }
63
- ) }, a.href)) }) : /* @__PURE__ */ e("div", { className: "text-small px-4 py-6 text-center text-neutral-400", children: b }),
64
- l && /* @__PURE__ */ e("ul", { className: "py-2", children: /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
64
+ ) }, a.href)),
65
+ l && t && /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
65
66
  "a",
66
67
  {
67
68
  href: l.href,
68
- className: "hover:bg-primary-50 block px-4 py-3 text-base font-semibold text-neutral-800 transition-colors",
69
+ className: "hover:bg-primary-50 text-medium block rounded px-1 py-2.5 font-semibold text-neutral-800 transition-colors",
69
70
  children: l.label
70
71
  }
71
- ) }, l.href) })
72
- ] })
72
+ ) }, l.href)
73
+ ] }) })
73
74
  ] })
74
75
  ] })
75
76
  ] }),
@@ -79,43 +80,44 @@ const w = ({
79
80
  "input",
80
81
  {
81
82
  type: "text",
82
- value: t,
83
- onChange: h,
84
- placeholder: o,
83
+ name: "search",
84
+ value: i,
85
+ onChange: s,
86
+ placeholder: n,
85
87
  className: "flex-1 bg-transparent text-base text-neutral-800 outline-none placeholder:text-neutral-400"
86
88
  }
87
89
  ),
88
- n ? /* @__PURE__ */ e(
90
+ t ? /* @__PURE__ */ e(
89
91
  "button",
90
92
  {
91
93
  onClick: c,
92
94
  className: "cursor-pointer rounded-full p-1 transition-colors hover:bg-neutral-200",
93
95
  "aria-label": "Clear search",
94
- children: /* @__PURE__ */ e(x, { width: 16, height: 16 })
96
+ children: /* @__PURE__ */ e(p, { fill: "var(--neutral-400)", width: 20, height: 20 })
95
97
  }
96
98
  ) : /* @__PURE__ */ e(u, { fill: "var(--neutral-500)", width: 20, height: 20 })
97
99
  ] }),
98
- n && /* @__PURE__ */ r("div", { className: "absolute mt-2 w-11/12 overflow-y-auto rounded-md border border-neutral-200 bg-white shadow-sm", children: [
99
- i.length > 0 ? /* @__PURE__ */ e("ul", { className: "py-2", children: i.map((a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
100
+ t && /* @__PURE__ */ e("div", { className: "absolute left-0 mt-2 w-full overflow-x-hidden overflow-y-auto bg-white", children: /* @__PURE__ */ r("ul", { className: "py-4 pl-4", children: [
101
+ o.length > 0 && o.map((a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
100
102
  "a",
101
103
  {
102
104
  href: a.href,
103
- className: "hover:bg-primary-50 block px-4 py-3 text-base text-neutral-800 transition-colors",
104
- children: /* @__PURE__ */ e(f, { text: a.label, highlight: t })
105
+ className: "hover:bg-primary-50 block px-2 py-2.5 text-base text-neutral-800 transition-colors",
106
+ children: /* @__PURE__ */ e(f, { text: a.label, highlight: i })
105
107
  }
106
- ) }, a.href)) }) : /* @__PURE__ */ e("div", { className: "px-4 py-6 text-center text-base text-neutral-400", children: b }),
107
- l && /* @__PURE__ */ e("ul", { className: "py-2", children: /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
108
+ ) }, a.href)),
109
+ l && /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
108
110
  "a",
109
111
  {
110
112
  href: l.href,
111
- className: "hover:bg-primary-50 block px-4 py-3 text-base font-semibold text-neutral-800 transition-colors",
113
+ className: "hover:bg-primary-50 block px-2 py-2.5 text-base font-semibold text-neutral-800 transition-colors",
112
114
  children: l.label
113
115
  }
114
- ) }, l.href) })
115
- ] })
116
+ ) }, l.href)
117
+ ] }) })
116
118
  ] })
117
119
  ] });
118
120
  };
119
121
  export {
120
- w as SearchBar
122
+ y as SearchBar
121
123
  };