lawgic-dev-kit 0.21.0 → 0.21.6

package/dist/components/atoms/SelectInput/SelectInput.d.ts

@@ -1,4 +1,4 @@
 import { FieldValues } from 'react-hook-form';
 import { SelectInputProps } from './SelectInput.types';
-declare const SelectInput: <T extends FieldValues>({ options, name, control, label, placeholder, className, input, }: SelectInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SelectInput: <T extends FieldValues>({ options, name, control, label, placeholder, className, input, dropdownStyle, innerClassName, showChevron, }: SelectInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SelectInput;

package/dist/components/atoms/SelectInput/SelectInput.js

@@ -1,115 +1,124 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { useFloating as D, useClick as H, useDismiss as U, useInteractions as Y, useTransitionStyles as _ } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
-import { useState as k, useRef as N, useEffect as q } from "react";
-import { Controller as G } from "react-hook-form";
-import { useTheme as J } from "../../../hooks/useTheme.js";
-import { autoUpdate as K } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { offset as Q, flip as V, shift as X, size as Z, arrow as ee } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
-const ce = ({
+import { useFloating as Y, useClick as _, useDismiss as q, useInteractions as G, useTransitionStyles as J } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
+import { useState as N, useRef as S, useEffect as K } from "react";
+import { Controller as Q } from "react-hook-form";
+import { useTheme as V } from "../../../hooks/useTheme.js";
+import { autoUpdate as X } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { offset as Z, flip as ee, shift as te, size as se, arrow as re } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+const pe = ({
   options: c,
   name: l,
   control: p,
-  label: m = "Select an option",
-  placeholder: x = "Type to search...",
+  label: x = "Select an option",
+  placeholder: m = "Type to search...",
   className: r = "",
-  input: h = !0
+  input: h = !0,
+  dropdownStyle: f = {},
+  innerClassName: g = "",
+  showChevron: b = !0
 }) => /* @__PURE__ */ e.jsx(
-  G,
+  Q,
   {
     name: l,
     control: p,
-    render: ({ field: { onChange: f, value: o }, fieldState: { error: s } }) => /* @__PURE__ */ e.jsx(
-      te,
+    render: ({ field: { onChange: y, value: n }, fieldState: { error: s } }) => /* @__PURE__ */ e.jsx(
+      ne,
       {
         options: c,
-        value: o,
-        onChange: f,
-        label: m,
-        placeholder: x,
+        value: n,
+        onChange: y,
+        label: x,
+        placeholder: m,
         error: s == null ? void 0 : s.message,
         className: r,
-        input: h
+        input: h,
+        dropdownStyle: f,
+        innerClassName: g,
+        showChevron: b
       }
     )
   }
-), te = ({
+), ne = ({
   options: c,
   value: l,
   onChange: p,
-  label: m = "Select an option",
-  placeholder: x = "Type to search...",
+  label: x = "Select an option",
+  placeholder: m = "Type to search...",
   error: r,
-  className: h = "",
-  input: f = !0
+  input: h = !0,
+  className: f = "",
+  dropdownStyle: g = {},
+  innerClassName: b = "",
+  showChevron: y = !0
 }) => {
-  const { t: o } = J(), [s, g] = k(!1), [a, y] = k(""), [i, v] = k(
+  const { t: n } = V(), [s, j] = N(!1), [a, k] = N(""), [i, C] = N(
     l || null
-  ), b = N(null), C = N(null), { x: L, y: S, strategy: M, refs: d, context: j } = D({
+  ), v = S(null), M = S(null), { x: T, y: $, strategy: O, refs: d, context: w } = Y({
     open: s,
-    onOpenChange: g,
+    onOpenChange: j,
     middleware: [
-      Q(8),
-      V(),
-      X({ padding: 8 }),
-      Z({
-        apply({ availableHeight: t, elements: n }) {
-          Object.assign(n.floating.style, {
+      Z(8),
+      ee(),
+      te({ padding: 8 }),
+      se({
+        apply({ availableHeight: t, elements: o }) {
+          Object.assign(o.floating.style, {
             maxHeight: `${Math.min(t - 10, 300)}px`
           });
         },
         padding: 8
       }),
-      ee({ element: C })
+      re({ element: M })
     ],
     placement: "bottom-start",
-    whileElementsMounted: K
-  }), T = H(j), $ = U(j), { getReferenceProps: O, getFloatingProps: P } = Y([
-    T,
-    $
-  ]), { isMounted: R, styles: z } = _(j, {
+    whileElementsMounted: X
+  }), P = _(w), R = q(w), { getReferenceProps: z, getFloatingProps: F } = G([
+    P,
+    R
+  ]), { isMounted: I, styles: W } = J(w, {
     duration: { open: 200, close: 150 },
     initial: { opacity: 0, transform: "translateY(-4px)" }
-  }), w = (() => {
+  }), L = (() => {
     const t = Array.isArray(c) ? c : [];
     if (!a.trim()) return t;
-    const n = a.toLowerCase();
+    const o = a.toLowerCase();
     return t.filter((u) => {
-      const E = u.label.toLowerCase(), A = u.key.toLowerCase();
-      return E.includes(n) || A.includes(n);
+      const H = u.label.toLowerCase(), U = u.key.toLowerCase();
+      return H.includes(o) || U.includes(o);
     });
-  })(), F = (t) => {
-    v(t), g(!1), y(""), p(t);
-  }, I = () => {
-    g(!s), !s && b.current && setTimeout(() => {
+  })(), B = (t) => {
+    C(t), j(!1), k(""), p(t);
+  }, E = () => {
+    j(!s), !s && v.current && setTimeout(() => {
       var t;
-      return (t = b.current) == null ? void 0 : t.focus();
+      return (t = v.current) == null ? void 0 : t.focus();
     }, 100);
   };
-  q(() => {
-    v(l);
+  K(() => {
+    C(l);
   }, [l]);
-  const W = O({
-    onClick: I
-  }), B = o(x);
-  return /* @__PURE__ */ e.jsxs("div", { className: `w-full relative flex flex-col gap-8 ${h}`, children: [
+  const A = z({
+    onClick: E
+  }), D = n(m);
+  return /* @__PURE__ */ e.jsxs("div", { className: `w-full relative flex flex-col gap-8 ${f}`, children: [
     /* @__PURE__ */ e.jsx(
       "h6",
       {
         className: `text-gray-600 font-600 group ${r ? "!text-red-500" : ""} text-label`,
-        children: m
+        children: x
       }
     ),
     /* @__PURE__ */ e.jsxs(
       "div",
       {
         ref: d.setReference,
-        className: `flex items-center justify-between bg-light rounded-full p-16 cursor-pointer
+        className: `${b} flex items-center justify-between bg-light rounded-full p-16 cursor-pointer
           border transition-all duration-200 hover:border-blue-400
           ${r ? "border-red-500 hover:border-red-600" : ""} ${s ? "border-blue-400" : "border-blue-100"}`,
-        ...W,
+        ...A,
         children: [
-          i ? /* @__PURE__ */ e.jsx("div", { className: "flex items-center w-full", children: /* @__PURE__ */ e.jsx("span", { className: "flex-grow font-600 text-body-m", children: o(i.label) }) }) : /* @__PURE__ */ e.jsx("span", { className: "text-gray-400 font-600 text-body-m", children: B }),
-          /* @__PURE__ */ e.jsx(
+          i ? /* @__PURE__ */ e.jsx("div", { className: "flex items-center w-full", children: /* @__PURE__ */ e.jsx("span", { className: "flex-grow font-600 text-body-m", children: n(i.label) }) }) : /* @__PURE__ */ e.jsx("span", { className: "text-gray-400 font-600 text-body-m", children: D }),
+          y && /* @__PURE__ */ e.jsx(
             "svg",
             {
               className: `w-16 h-16 transition-transform ${s ? "transform rotate-180" : ""}`,
@@ -131,32 +140,33 @@ const ce = ({
       }
     ),
     r && /* @__PURE__ */ e.jsx("p", { className: "mt-1 text-sm text-red-600", children: r }),
-    R && /* @__PURE__ */ e.jsxs(
+    I && /* @__PURE__ */ e.jsxs(
       "div",
       {
         ref: d.setFloating,
         style: {
-          position: M,
-          top: S ?? 0,
-          left: L ?? 0,
-          ...z,
+          position: O,
+          top: $ ?? 0,
+          left: T ?? 0,
+          ...W,
           width: d.reference.current instanceof Element ? d.reference.current.clientWidth : void 0,
-          zIndex: 50
+          zIndex: 50,
+          ...g
         },
         className: "bg-white border border-blue-400 rounded-3xl shadow-lg overflow-hidden",
-        ...P(),
+        ...F(),
         children: [
-          f && /* @__PURE__ */ e.jsx("div", { className: "sticky top-0 bg-white p-8 border-b border-gray-100 z-20", children: /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+          h && /* @__PURE__ */ e.jsx("div", { className: "sticky top-0 bg-white p-8 border-b border-gray-100 z-20", children: /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ e.jsx("div", { className: "absolute inset-y-0 left-0 pl-12 flex items-center pointer-events-none", children: /* @__PURE__ */ e.jsx("svg", { className: "h-16 w-16 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
             /* @__PURE__ */ e.jsx(
               "input",
               {
-                ref: b,
+                ref: v,
                 type: "text",
                 className: "w-full py-8 pl-40 pr-12 rounded-full focus:outline-none text-body-s",
-                placeholder: o("search_options"),
+                placeholder: n("search_options"),
                 value: a,
-                onChange: (t) => y(t.target.value),
+                onChange: (t) => k(t.target.value),
                 onClick: (t) => t.stopPropagation(),
                 autoFocus: !0
               }
@@ -166,22 +176,22 @@ const ce = ({
               {
                 className: "absolute inset-y-0 right-0 pr-12 flex items-center",
                 onClick: (t) => {
-                  t.stopPropagation(), y("");
+                  t.stopPropagation(), k("");
                 },
                 children: /* @__PURE__ */ e.jsx("svg", { className: "h-16 w-16 text-gray-400 hover:text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }) }),
-          /* @__PURE__ */ e.jsx("div", { className: "max-h-[250px] overflow-y-auto", children: w.length > 0 ? /* @__PURE__ */ e.jsx("ul", { className: "py-4", children: w.map((t, n) => /* @__PURE__ */ e.jsx(
+          /* @__PURE__ */ e.jsx("div", { className: "max-h-[250px] overflow-y-auto", children: L.length > 0 ? /* @__PURE__ */ e.jsx("ul", { className: "py-4", children: L.map((t, o) => /* @__PURE__ */ e.jsx(
             "li",
             {
               className: `flex items-center px-16 py-10 transition-all duration-200 hover:bg-blue-50 cursor-pointer ${(i == null ? void 0 : i.key) === t.key ? "bg-blue-100/30 text-blue-500 font-medium" : ""}`,
               onClick: (u) => {
-                u.stopPropagation(), F(t);
+                u.stopPropagation(), B(t);
               },
-              children: /* @__PURE__ */ e.jsx("span", { children: o(t.label) })
+              children: /* @__PURE__ */ e.jsx("span", { children: typeof t.label == "string" ? n(t.label) : t.expandedLabel || t.label })
             },
-            `${t.key}-${n}`
+            `${t.key}-${o}`
           )) }) : /* @__PURE__ */ e.jsxs("div", { className: "px-16 py-16 text-center text-gray-500", children: [
             /* @__PURE__ */ e.jsx("svg", { className: "mx-auto h-24 w-24 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
             /* @__PURE__ */ e.jsxs("p", { className: "mt-8 text-body-s", children: [
@@ -196,5 +206,5 @@ const ce = ({
   ] });
 };
 export {
-  ce as default
+  pe as default
 };

package/dist/components/atoms/SelectInput/SelectInput.types.d.ts

@@ -2,6 +2,7 @@ import { Control, FieldValues, Path } from 'react-hook-form';
 export interface Option {
     key: string;
     label: string;
+    expandedLabel?: string | React.ReactNode;
 }
 export interface SelectInputProps<T extends FieldValues> {
     options: Option[];
@@ -9,8 +10,11 @@ export interface SelectInputProps<T extends FieldValues> {
     control: Control<T>;
     label?: string;
     placeholder?: string;
-    className?: string;
     input?: boolean;
+    className?: string;
+    innerClassName?: string;
+    dropdownStyle?: React.CSSProperties;
+    showChevron?: boolean;
 }
 export interface SelectInputFieldProps {
     options: Option[];
@@ -19,6 +23,9 @@ export interface SelectInputFieldProps {
     label?: string;
     placeholder?: string;
     error?: string;
-    className?: string;
     input?: boolean;
+    className?: string;
+    innerClassName?: string;
+    dropdownStyle?: React.CSSProperties;
+    showChevron?: boolean;
 }

package/dist/components/atoms/UncontrolledSelector/UncontrolledSelector.d.ts

@@ -1,7 +1,8 @@
 import { default as React } from 'react';
 interface Option {
-    label: string | React.ReactNode;
     value: number | string;
+    label: string | React.ReactNode;
+    expandedLabel?: string | React.ReactNode;
 }
 interface UncontrolledSelectorProps {
     value: number | string;
@@ -11,8 +12,11 @@ interface UncontrolledSelectorProps {
     label?: string;
     error?: string;
     disabled?: boolean;
-    className?: string;
     allowSearch?: boolean;
+    className?: string;
+    innerClassName?: string;
+    dropdownStyle?: React.CSSProperties;
+    showChevron?: boolean;
 }
 declare const UncontrolledSelector: React.FC<UncontrolledSelectorProps>;
 export default UncontrolledSelector;

package/dist/components/atoms/UncontrolledSelector/UncontrolledSelector.js

@@ -1,26 +1,29 @@
 import { j as t } from "../../../_virtual/jsx-runtime.js";
-import M, { useState as k, useRef as N, useMemo as f } from "react";
-import { useFloating as D, useClick as I, useDismiss as U, useInteractions as _, useTransitionStyles as H } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
-import Y from "fuse.js";
-import { autoUpdate as q } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { offset as G, flip as J, shift as K, size as Q, arrow as X } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
-const le = ({
+import M, { useState as k, useRef as N, useMemo as p } from "react";
+import { useFloating as _, useClick as H, useDismiss as Y, useInteractions as q, useTransitionStyles as G } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
+import J from "fuse.js";
+import { autoUpdate as K } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { offset as Q, flip as X, shift as Z, size as ee, arrow as te } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+const ce = ({
   options: r,
   onChange: x,
   value: s,
   disabled: d,
-  error: a,
-  label: g = "Select an option",
-  placeholder: L = "Select an option...",
-  className: S = "",
-  allowSearch: b = !1
+  error: o,
+  label: g = "",
+  placeholder: L = "",
+  allowSearch: b = !1,
+  className: C = "",
+  innerClassName: $ = "",
+  dropdownStyle: S = {},
+  showChevron: O = !0
 }) => {
-  const [l, u] = k(!1), [o, m] = k(""), p = N(null), C = N(null), y = r.find((e) => e.value === s), j = f(() => r.map((e) => ({
+  const [a, u] = k(!1), [l, m] = k(""), h = N(null), R = N(null), y = r.find((e) => e.value === s), j = p(() => r.map((e) => ({
     ...e,
     // Extract text from React nodes if needed
     searchableLabel: typeof e.label == "string" ? e.label : M.isValidElement(e.label) ? c(e.label) : String(e.label),
     searchableValue: String(e.value)
-  })), [r]), v = f(() => {
+  })), [r]), v = p(() => {
     const e = {
       keys: [
         { name: "searchableLabel", weight: 2 },
@@ -38,15 +41,15 @@ const le = ({
       shouldSort: !0,
       findAllMatches: !0
     };
-    return new Y(j, e);
-  }, [j]), { x: $, y: O, strategy: R, refs: i, context: h } = D({
-    open: l,
+    return new J(j, e);
+  }, [j]), { x: T, y: F, strategy: P, refs: i, context: f } = _({
+    open: a,
     onOpenChange: u,
     middleware: [
-      G(8),
-      J(),
-      K({ padding: 8 }),
-      Q({
+      Q(8),
+      X(),
+      Z({ padding: 8 }),
+      ee({
         apply({ availableHeight: e, elements: n }) {
           Object.assign(n.floating.style, {
             maxHeight: `${Math.min(e - 10, 300)}px`
@@ -54,35 +57,35 @@ const le = ({
         },
         padding: 8
       }),
-      X({ element: C })
+      te({ element: R })
     ],
     placement: "bottom-start",
-    whileElementsMounted: q
-  }), T = I(h), F = U(h), { getReferenceProps: P, getFloatingProps: z } = _([
-    T,
-    F
-  ]), { isMounted: A, styles: E } = H(h, {
+    whileElementsMounted: K
+  }), z = H(f), A = Y(f), { getReferenceProps: E, getFloatingProps: W } = q([
+    z,
+    A
+  ]), { isMounted: B, styles: V } = G(f, {
     duration: { open: 200, close: 150 },
     initial: { opacity: 0, transform: "translateY(-4px)" }
-  }), w = f(() => o.trim() ? v.search(o).map((n) => ({
+  }), w = p(() => l.trim() ? v.search(l).map((n) => ({
     ...n.item,
     score: n.score,
     matches: n.matches
-  })) : r, [o, v, r]), W = (e) => {
+  })) : r, [l, v, r]), D = (e) => {
     x(e.value), u(!1), m("");
-  }, B = P({
+  }, I = E({
     onClick: () => {
-      d || (u(!l), !l && p.current && b && setTimeout(() => {
+      d || (u(!a), !a && h.current && b && setTimeout(() => {
         var e;
-        return (e = p.current) == null ? void 0 : e.focus();
+        return (e = h.current) == null ? void 0 : e.focus();
       }, 100));
     }
   });
-  return /* @__PURE__ */ t.jsxs("div", { className: `w-full relative flex flex-col gap-8 ${S}`, children: [
+  return /* @__PURE__ */ t.jsxs("div", { className: `w-full relative flex flex-col gap-8 ${C}`, children: [
     g && /* @__PURE__ */ t.jsx(
       "h6",
       {
-        className: `text-gray-600 font-600 group ${a ? "!text-red-500" : ""} text-label ${d ? "text-gray-300" : ""}`,
+        className: `text-gray-600 font-600 group ${o ? "!text-red-500" : ""} text-label ${d ? "text-gray-300" : ""}`,
         children: g
       }
     ),
@@ -90,16 +93,16 @@ const le = ({
       "div",
       {
         ref: i.setReference,
-        className: `flex items-center justify-between bg-light rounded-full p-16 cursor-pointer
+        className: `${$} flex items-center justify-between bg-light rounded-full p-16 cursor-pointer
           border transition-all duration-200 ${d ? "opacity-60 cursor-not-allowed" : "hover:border-blue-400"}
-          ${a ? "border-red-500 hover:border-red-600" : ""} ${l ? "border-blue-400" : "border-blue-100"}`,
-        ...B,
+          ${o ? "border-red-500 hover:border-red-600" : ""} ${a ? "border-blue-400" : "border-blue-100"}`,
+        ...I,
         children: [
           y ? /* @__PURE__ */ t.jsx("div", { className: "flex items-center w-full", children: /* @__PURE__ */ t.jsx("span", { className: "flex-grow font-600 text-body-m", children: y.label }) }) : /* @__PURE__ */ t.jsx("span", { className: "text-gray-400 font-600 text-body-m", children: L }),
-          /* @__PURE__ */ t.jsx(
+          O && /* @__PURE__ */ t.jsx(
             "svg",
             {
-              className: `w-16 h-16 transition-transform ${l ? "transform rotate-180" : ""}`,
+              className: `w-16 h-16 transition-transform ${a ? "transform rotate-180" : ""}`,
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -117,38 +120,39 @@ const le = ({
         ]
       }
     ),
-    a && /* @__PURE__ */ t.jsx("p", { className: "mt-1 text-sm text-red-600", children: a }),
-    A && /* @__PURE__ */ t.jsxs(
+    o && /* @__PURE__ */ t.jsx("p", { className: "mt-1 text-sm text-red-600", children: o }),
+    B && /* @__PURE__ */ t.jsxs(
       "div",
       {
         ref: i.setFloating,
         style: {
-          position: R,
-          top: O ?? 0,
-          left: $ ?? 0,
-          ...E,
+          position: P,
+          top: F ?? 0,
+          left: T ?? 0,
+          ...V,
           width: i.reference.current instanceof Element ? i.reference.current.clientWidth : void 0,
-          zIndex: 50
+          zIndex: 50,
+          ...S
         },
         className: "bg-white border border-blue-400 rounded-3xl shadow-lg overflow-hidden",
-        ...z(),
+        ...W(),
         children: [
           b && /* @__PURE__ */ t.jsx("div", { className: "sticky top-0 bg-white p-8 border-b border-gray-100 z-20", children: /* @__PURE__ */ t.jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ t.jsx("div", { className: "absolute inset-y-0 left-0 pl-12 flex items-center pointer-events-none", children: /* @__PURE__ */ t.jsx("svg", { className: "h-16 w-16 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }),
             /* @__PURE__ */ t.jsx(
               "input",
               {
-                ref: p,
+                ref: h,
                 type: "text",
                 className: "w-full py-8 pl-40 pr-12 rounded-full focus:outline-none text-body-s",
                 placeholder: "Search options...",
-                value: o,
+                value: l,
                 onChange: (e) => m(e.target.value),
                 onClick: (e) => e.stopPropagation(),
                 autoFocus: !0
               }
             ),
-            o && /* @__PURE__ */ t.jsx(
+            l && /* @__PURE__ */ t.jsx(
               "button",
               {
                 className: "absolute inset-y-0 right-0 pr-12 flex items-center",
@@ -163,17 +167,17 @@ const le = ({
             "li",
             {
               className: `flex items-center px-16 py-10 transition-all duration-200 hover:bg-blue-50 cursor-pointer ${s === e.value ? "bg-blue-100/30 text-blue-500 font-medium" : ""}`,
-              onClick: (V) => {
-                V.stopPropagation(), W(e);
+              onClick: (U) => {
+                U.stopPropagation(), D(e);
               },
-              children: /* @__PURE__ */ t.jsx("span", { children: e.label })
+              children: /* @__PURE__ */ t.jsx("span", { children: (e == null ? void 0 : e.expandedLabel) || e.label })
             },
             `${e.value}-${n}`
           )) }) : /* @__PURE__ */ t.jsxs("div", { className: "px-16 py-16 text-center text-gray-500", children: [
             /* @__PURE__ */ t.jsx("svg", { className: "mx-auto h-24 w-24 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
             /* @__PURE__ */ t.jsxs("p", { className: "mt-8 text-body-s", children: [
               'No matches found for "',
-              o,
+              l,
               '"'
             ] })
           ] }) })
@@ -192,5 +196,5 @@ const le = ({
   return Array.isArray(r) ? r.map(c).join(" ") : "";
 };
 export {
-  le as default
+  ce as default
 };