lawgic-dev-kit 0.22.2 → 0.22.4

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

@@ -5,7 +5,7 @@ export type TextInputProps<T extends FieldValues = FieldValues> = {
     className?: string;
     disabled?: boolean;
     translateKey?: string;
-    size?: 'sm' | 'base';
+    size?: 'sm' | 'md';
     control: Control<T>;
     name: Path<T>;
     leftSide?: React.ReactNode;

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

@@ -17,7 +17,7 @@ interface UncontrolledSelectorProps {
     innerClassName?: string;
     dropdownStyle?: React.CSSProperties;
     showChevron?: boolean;
-    size?: 'sm' | 'base';
+    size?: 'sm' | 'md';
 }
 declare const UncontrolledSelector: React.FC<UncontrolledSelectorProps>;
 export default UncontrolledSelector;

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

@@ -17,9 +17,9 @@ const me = ({
   innerClassName: C = "",
   dropdownStyle: O = {},
   showChevron: z = !0,
-  size: R = "base"
+  size: R = "md"
 }) => {
-  const [l, m] = N(!1), [a, p] = N(""), h = $(null), T = $(null), x = r.find((e) => e.value === s), n = {
+  const [a, m] = N(!1), [l, p] = N(""), h = $(null), T = $(null), x = r.find((e) => e.value === s), n = {
     sm: {
       container: "px-16 py-8",
       text: "text-sm",
@@ -29,14 +29,14 @@ const me = ({
       icon: "w-12 h-12",
       option: "text-sm"
     },
-    base: {
+    md: {
       container: "p-16",
-      text: "text-body-m",
+      text: "text-14",
       label: "text-14",
       error: "text-sm",
       gap: "gap-8",
       icon: "w-16 h-16",
-      option: "text-body-m"
+      option: "text-14"
     }
   }[R], v = g(() => r.map((e) => ({
     ...e,
@@ -63,7 +63,7 @@ const me = ({
     };
     return new Q(v, e);
   }, [v]), { x: F, y: P, strategy: A, refs: c, context: f } = Y({
-    open: l,
+    open: a,
     onOpenChange: m,
     middleware: [
       Z(8),
@@ -87,15 +87,15 @@ const me = ({
   ]), { isMounted: D, styles: I } = K(f, {
     duration: { open: 200, close: 150 },
     initial: { opacity: 0, transform: "translateY(-4px)" }
-  }), k = g(() => a.trim() ? w.search(a).map((o) => ({
+  }), k = g(() => l.trim() ? w.search(l).map((o) => ({
     ...o.item,
     score: o.score,
     matches: o.matches
-  })) : r, [a, w, r]), U = (e) => {
+  })) : r, [l, w, r]), U = (e) => {
     b(e.value), m(!1), p("");
   }, _ = B({
     onClick: () => {
-      u || (m(!l), !l && h.current && j && setTimeout(() => {
+      u || (m(!a), !a && h.current && j && setTimeout(() => {
         var e;
         return (e = h.current) == null ? void 0 : e.focus();
       }, 100));
@@ -117,14 +117,14 @@ const me = ({
           ${n.container} cursor-pointer border transition-all duration-200 
           ${u ? "opacity-60 cursor-not-allowed" : "hover:border-blue-400"}
           ${i ? "border-red-500 hover:border-red-600" : ""} 
-          ${l ? "border-blue-400" : "border-blue-100"}`,
+          ${a ? "border-blue-400" : "border-blue-100"}`,
         ..._,
         children: [
           /* @__PURE__ */ t.jsx("div", { className: "flex items-center w-full overflow-hidden", children: /* @__PURE__ */ t.jsx("span", { className: `flex-grow font-600 truncate ${n.text} ${x ? "" : "text-gray-400"}`, children: x ? x.label : L }) }),
           z && /* @__PURE__ */ t.jsx(
             "svg",
             {
-              className: `${n.icon} transition-transform ${l ? "transform rotate-180" : ""}`,
+              className: `${n.icon} transition-transform ${a ? "transform rotate-180" : ""}`,
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -160,13 +160,13 @@ const me = ({
                 type: "text",
                 className: "w-full py-8 pl-40 pr-12 rounded-full focus:outline-none text-body-s",
                 placeholder: "Search options...",
-                value: a,
+                value: l,
                 onChange: (e) => p(e.target.value),
                 onClick: (e) => e.stopPropagation(),
                 autoFocus: !0
               }
             ),
-            a && /* @__PURE__ */ t.jsx(
+            l && /* @__PURE__ */ t.jsx(
               "button",
               {
                 className: "absolute inset-y-0 right-0 pr-12 flex items-center",
@@ -191,7 +191,7 @@ const me = ({
             /* @__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 "',
-              a,
+              l,
               '"'
             ] })
           ] }) })

package/dist/components/atoms/UncontrolledTextInput/UncontrolledTextInput.js

@@ -4,17 +4,17 @@ import "react";
 const w = ({
   label: u,
   onChange: p,
-  value: s,
+  value: n,
   name: t,
   error: l,
   placeholder: i,
   className: g = "",
   disabled: e = !1,
-  disabledInput: n = !1,
-  size: b = "base",
+  disabledInput: s = !1,
+  size: d = "md",
   leftSide: a,
   rightSide: c,
-  ...d
+  ...b
 }) => {
   const { t: x } = h(), r = {
     sm: {
@@ -24,14 +24,14 @@ const w = ({
       error: "text-sm",
       gap: "gap-8"
     },
-    base: {
+    md: {
       container: "p-16",
-      text: "text-body-m",
+      text: "text-14",
       label: "text-14",
       error: "text-14",
       gap: "gap-8"
     }
-  }[b];
+  }[d];
   return /* @__PURE__ */ o.jsxs(
     "label",
     {
@@ -52,12 +52,12 @@ const w = ({
             className: `
           flex items-center justify-between gap-8 bg-light 
           ${r.container} ${l && "!border-red-500"} rounded-full border 
-          ${s && !e ? "border-blue-200" : "border-blue-100"} 
+          ${n && !e ? "border-blue-200" : "border-blue-100"} 
           ${!e && "group-hover:border-blue-300"} 
           ${e && "cursor-not-allowed"}
 				
 				group-focus-within:border-blue-500 transition-colors duration-200 ease-in-out
-				${n && "hover:!cursor-pointer"}
+				${s && "hover:!cursor-pointer"}
 				group-disabled:bg-gray-500
 				`,
             children: [
@@ -65,16 +65,16 @@ const w = ({
               /* @__PURE__ */ o.jsx(
                 "input",
                 {
-                  ...d,
+                  ...b,
                   id: t,
                   name: t,
                   disabled: e,
                   placeholder: i,
-                  value: s,
+                  value: n,
                   onChange: (f) => {
                     p(f.target.value);
                   },
-                  className: `group bg-transparent w-full h-full font-600 placeholder:font-600 ${r.text} disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-none ${n && "pointer-events-none !select-none !caret-transparent"}`
+                  className: `group bg-transparent w-full h-full font-600 placeholder:font-600 ${r.text} disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-none ${s && "pointer-events-none !select-none !caret-transparent"}`
                 }
               ),
               c && c

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

@@ -8,7 +8,7 @@ export type UncontrolledTextInputProps = {
     error?: string | undefined;
     disabled?: boolean;
     disabledInput?: boolean;
-    size?: 'sm' | 'base';
+    size?: 'sm' | 'md';
     leftSide?: React.ReactNode;
     rightSide?: React.ReactNode;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;

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

@@ -6,6 +6,7 @@ export * from './BoxContainer/index';
 export * from './Button/index';
 export * from './CenterModal/index';
 export * from './Checkbox/index';
+export * from './Chip/index';
 export * from './CountryInput/index';
 export * from './CountryLabel/index';
 export * from './CountrySelectInput/index';

package/dist/components/molecules/DateInput/DateInput.d.ts

@@ -8,7 +8,7 @@ export type DateInputProps<T extends FieldValues = FieldValues> = {
     translateKey?: string;
     futureDates?: boolean;
     pastDates?: boolean;
-    size?: "sm" | "base";
+    size?: "sm" | "md";
 };
 declare const DateInput: <T extends FieldValues = FieldValues>({ control, name, showTimeSelector, label, translateKey, placeholder, futureDates, pastDates, size, }: DateInputProps<T>) => React.ReactElement;
 export default DateInput;

package/dist/components/molecules/MultiSelectDropdown/MultiSelectDropdown.d.ts

@@ -2,10 +2,11 @@ import { default as React } from 'react';
 export type Option = {
     label: string;
     value: string | number;
+    dividerBefore?: boolean;
     colors?: {
-        dot?: string;
-        background?: string;
-        text?: string;
+        bgColor?: string;
+        textColor?: string;
+        dotColor?: string;
     };
 };
 interface MultiSelectDropdownProps {
@@ -17,7 +18,7 @@ interface MultiSelectDropdownProps {
     allowSearch?: boolean;
     className?: string;
     disabled?: boolean;
-    size?: 'sm' | 'base';
+    size?: 'sm' | 'md';
 }
 declare const MultiSelectDropdown: React.FC<MultiSelectDropdownProps>;
 export default MultiSelectDropdown;

package/dist/components/molecules/MultiSelectDropdown/MultiSelectDropdown.js

@@ -1,31 +1,31 @@
-import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { useState as y, useRef as D, useCallback as P } from "react";
-import { useFloating as W, useClick as E, useDismiss as q, useInteractions as H, useTransitionStyles as Y } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import E, { useState as b, useRef as v, useCallback as _ } from "react";
+import { useFloating as q, useClick as H, useDismiss as Y, useInteractions as A, useTransitionStyles as G } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
 import "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
 import "../../../_virtual/lodash.js";
 import "../../../contexts/themeContext.js";
 import "react-hook-form";
 import "../InformationContainer/InformationContainer.js";
 import "react-dom";
-import A from "../../atoms/Checkbox/Checkbox.js";
+import J from "../../atoms/Checkbox/Checkbox.js";
 import "../../../constants/countries.js";
 import "../../atoms/ImageProfileInput/ImageProfileInput.validators.js";
 import "fuse.js";
-import { autoUpdate as G } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { offset as J, flip as K, shift as Q, size as U } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
-const ue = ({
+import { autoUpdate as K } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { offset as Q, flip as U, shift as X, size as Z, arrow as V } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+const fe = ({
   label: p,
   options: u,
   selectedValues: n,
-  onUpdate: d,
-  placeholder: b = "Seleccionar opciones",
-  allowSearch: j = !0,
-  className: v = "",
+  onUpdate: m,
+  placeholder: k = "Seleccionar opciones",
+  allowSearch: w = !0,
+  className: N = "",
   disabled: r = !1,
-  size: k = "base"
+  size: C = "md"
 }) => {
-  var f;
-  const [i, w] = y(!1), [m, N] = y(""), $ = D(null), o = {
+  var y;
+  const [l, h] = b(!1), [i, f] = b(""), $ = v(null), z = v(null), o = {
     sm: {
       container: "px-16 py-8",
       text: "text-sm",
@@ -36,155 +36,173 @@ const ue = ({
       searchText: "text-sm",
       searchIcon: "size-12"
     },
-    base: {
+    md: {
       container: "p-16",
-      text: "text-body-m",
+      text: "text-14",
       label: "text-14",
       icon: "w-16 h-16",
       checkboxSize: 20,
       gap: "gap-8",
-      searchText: "text-body-m",
+      searchText: "text-14",
       searchIcon: "size-16"
     }
-  }[k], { x: S, y: z, strategy: C, refs: c, context: x } = W({
-    open: i && !r,
-    onOpenChange: (e) => !r && w(e),
+  }[C], { x: S, y: L, strategy: M, refs: x, context: d } = q({
+    open: l && !r,
+    onOpenChange: (t) => !r && h(t),
     middleware: [
-      J(8),
-      K(),
-      Q({ padding: 8 }),
-      U({
-        apply({ availableHeight: e, elements: s }) {
+      Q(8),
+      U(),
+      X({ padding: 8 }),
+      Z({
+        apply({ availableHeight: t, elements: s }) {
           Object.assign(s.floating.style, {
-            maxHeight: `${Math.min(e - 10, 300)}px`
+            maxHeight: `${Math.min(t - 10, 500)}px`
           });
         },
         padding: 8
-      })
+      }),
+      V({ element: z })
     ],
     placement: "bottom-start",
-    whileElementsMounted: G
-  }), L = E(x, { enabled: !r }), I = q(x), { getReferenceProps: M, getFloatingProps: T } = H([L, I]), { isMounted: O, styles: R } = Y(x, {
+    whileElementsMounted: K
+  }), R = H(d, { enabled: !r }), B = Y(d), { getReferenceProps: I, getFloatingProps: T } = A([R, B]), { isMounted: F, styles: O } = G(d, {
     duration: { open: 200, close: 150 },
     initial: { opacity: 0, transform: "translateY(-4px)" }
-  }), F = P((e, s) => {
+  }), P = _((t, s) => {
     if (r) return;
-    let l;
-    s ? l = n.includes(e) ? n : [...n, e] : l = n.filter((a) => a !== e), d(l);
-  }, [n, d, r]), h = u.filter(
-    (e) => e.label.toLowerCase().includes(m.toLowerCase())
-  ), B = () => {
-    if (n.length === 0) return b;
-    const e = u.filter((s) => n.includes(s.value)).map((s) => s.label);
-    return e.length === 1 ? e[0] : `${e.length} seleccionados`;
-  };
-  return /* @__PURE__ */ t.jsxs("div", { className: `flex flex-col select-none ${o.gap} ${r ? "cursor-not-allowed" : ""} ${v}`, children: [
-    p && /* @__PURE__ */ t.jsx("h6", { className: `text-gray-600 font-600 ${o.label} ${r ? "text-gray-300" : ""}`, children: p }),
-    /* @__PURE__ */ t.jsxs(
+    let a;
+    s ? a = n.includes(t) ? n : [...n, t] : a = n.filter((c) => c !== t), m(a);
+  }, [n, m, r]), g = u.filter(
+    (t) => t.label.toLowerCase().includes(i.toLowerCase())
+  ), W = () => {
+    if (n.length === 0) return k;
+    const t = u.filter((s) => n.includes(s.value)).map((s) => s.label);
+    return t.length === 1 ? t[0] : `${t.length} seleccionados`;
+  }, D = I({
+    onClick: () => !r && h(!l)
+  });
+  return /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col select-none ${o.gap} ${r ? "cursor-not-allowed" : ""} ${N}`, children: [
+    p && /* @__PURE__ */ e.jsx("h6", { className: `text-gray-600 font-600 ${o.label} ${r ? "text-gray-300" : ""}`, children: p }),
+    /* @__PURE__ */ e.jsxs(
       "div",
       {
-        ref: c.setReference,
+        ref: x.setReference,
         className: `
                     flex items-center justify-between rounded-full border transition-all duration-200
                     ${o.container}
                     ${r ? "bg-gray-50 border-gray-200 cursor-not-allowed" : "bg-blue-50 cursor-pointer"}
-                    ${!r && (i ? "border-blue-500" : "border-blue-100 hover:border-blue-300")}
+                    ${!r && (l ? "border-blue-500" : "border-blue-100 hover:border-blue-300")}
                 `,
-        ...M(),
+        ...D,
         children: [
-          /* @__PURE__ */ t.jsx("span", { className: `flex-grow text-left truncate font-600 ${o.text} ${r ? "text-gray-300" : "text-gray-500"}`, children: B() }),
-          /* @__PURE__ */ t.jsx(
+          /* @__PURE__ */ e.jsx("span", { className: `flex-grow text-left truncate font-600 ${o.text} ${r ? "text-gray-300" : "text-gray-500"}`, children: W() }),
+          /* @__PURE__ */ e.jsx(
             "svg",
             {
-              className: `${o.icon} transition-transform ${i ? "rotate-180" : ""} ${r ? "text-gray-300" : "text-gray-500"}`,
+              className: `${o.icon} transition-transform ${l ? "rotate-180" : ""} ${r ? "text-gray-300" : "text-gray-500"}`,
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
-              children: /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" })
+              children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" })
             }
           )
         ]
       }
     ),
-    O && !r && /* @__PURE__ */ t.jsxs(
+    F && !r && /* @__PURE__ */ e.jsxs(
       "div",
       {
-        ref: c.setFloating,
+        ref: x.setFloating,
         style: {
-          position: C,
-          top: z ?? 0,
+          position: M,
+          top: L ?? 0,
           left: S ?? 0,
-          ...R,
-          width: (f = c.reference.current) == null ? void 0 : f.clientWidth,
+          ...O,
+          width: (y = x.reference.current) == null ? void 0 : y.clientWidth,
           zIndex: 50
         },
         className: "bg-white border border-blue-400 rounded-3xl shadow-lg overflow-hidden",
         ...T(),
         children: [
-          j && /* @__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: `${o.searchIcon} 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(
+          w && /* @__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: `${o.searchIcon} 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: $,
                 type: "text",
                 className: `w-full py-6 pl-36 pr-12 rounded-full focus:outline-none bg-gray-50 ${o.searchText}`,
                 placeholder: "Buscar...",
-                value: m,
-                onChange: (e) => N(e.target.value),
-                onClick: (e) => e.stopPropagation(),
+                value: i,
+                onChange: (t) => f(t.target.value),
+                onClick: (t) => t.stopPropagation(),
                 autoFocus: !0
               }
+            ),
+            i && /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                className: "absolute inset-y-0 right-0 pr-12 flex items-center",
+                onClick: (t) => {
+                  t.stopPropagation(), f("");
+                },
+                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__ */ t.jsx("div", { className: "max-h-[250px] overflow-y-auto", children: h.length > 0 ? /* @__PURE__ */ t.jsx("div", { className: "py-4", children: h.map((e) => {
-            var l, a, g;
-            const s = n.includes(e.value);
-            return /* @__PURE__ */ t.jsxs(
-              "div",
-              {
-                className: "flex items-center px-16 py-10 transition-all duration-200 hover:bg-blue-50 cursor-pointer gap-12",
-                onClick: () => F(e.value, !s),
-                children: [
-                  /* @__PURE__ */ t.jsx(
-                    A,
-                    {
-                      active: s,
-                      size: o.checkboxSize,
-                      variant: "square",
-                      className: "flex-shrink-0"
-                    }
-                  ),
-                  /* @__PURE__ */ t.jsxs(
-                    "div",
-                    {
-                      className: "flex items-center px-8 py-4 rounded-[8px] gap-5 overflow-hidden",
-                      style: {
-                        background: (l = e.colors) == null ? void 0 : l.background,
-                        color: (a = e.colors) == null ? void 0 : a.text
-                      },
-                      children: [
-                        ((g = e.colors) == null ? void 0 : g.dot) && /* @__PURE__ */ t.jsx(
-                          "span",
-                          {
-                            className: "size-6 rounded-full flex-shrink-0",
-                            style: { background: e.colors.dot }
-                          }
-                        ),
-                        /* @__PURE__ */ t.jsx("span", { className: `${o.text} font-semibold truncate`, children: e.label })
-                      ]
-                    }
-                  )
-                ]
-              },
-              e.value
-            );
-          }) }) : /* @__PURE__ */ t.jsx("div", { className: "px-16 py-16 text-center text-gray-500", children: /* @__PURE__ */ t.jsx("p", { className: "text-sm", children: "Sin resultados" }) }) })
+          /* @__PURE__ */ e.jsx("div", { className: "max-h-[450px] overflow-y-auto", children: g.length > 0 ? /* @__PURE__ */ e.jsx("div", { className: "py-4", children: g.map((t) => {
+            var a, c, j;
+            const s = n.includes(t.value);
+            return /* @__PURE__ */ e.jsxs(E.Fragment, { children: [
+              t.dividerBefore && /* @__PURE__ */ e.jsx("div", { className: "px-16 py-8", children: /* @__PURE__ */ e.jsx("hr", { className: "border-t border-gray-200" }) }),
+              /* @__PURE__ */ e.jsxs(
+                "div",
+                {
+                  className: "flex items-center px-16 py-10 transition-all duration-200 hover:bg-blue-50 cursor-pointer gap-12",
+                  onClick: () => P(t.value, !s),
+                  children: [
+                    /* @__PURE__ */ e.jsx(
+                      J,
+                      {
+                        active: s,
+                        size: o.checkboxSize,
+                        variant: "square",
+                        className: "flex-shrink-0"
+                      }
+                    ),
+                    /* @__PURE__ */ e.jsxs(
+                      "div",
+                      {
+                        className: `flex items-center rounded-[8px] py-4 px-8 gap-[6px] overflow-hidden ${((a = t.colors) == null ? void 0 : a.bgColor) || ""} ${((c = t.colors) == null ? void 0 : c.textColor) || ""}`,
+                        children: [
+                          ((j = t.colors) == null ? void 0 : j.dotColor) && /* @__PURE__ */ e.jsx(
+                            "span",
+                            {
+                              className: "size-6 rounded-full flex-shrink-0",
+                              style: { background: t.colors.dotColor }
+                            }
+                          ),
+                          /* @__PURE__ */ e.jsx("span", { className: `${o.text} font-semibold truncate`, children: t.label })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }, t.value);
+          }) }) : /* @__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: [
+              "No se encontraron resultados para “",
+              i,
+              "”"
+            ] })
+          ] }) })
         ]
       }
     )
   ] });
 };
 export {
-  ue as default
+  fe as default
 };

package/dist/components/molecules/SingleSelectDropdown/SingleSelectDropdown.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export type Option = {
+    label: string;
+    value: string | number;
+    dividerBefore?: boolean;
+    colors?: {
+        bgColor?: string;
+        textColor?: string;
+        dotColor?: string;
+    };
+};
+interface SingleSelectDropdownProps {
+    label?: string;
+    options: Option[];
+    selectedValue?: string | number | null;
+    onUpdate: (value: string | number | null) => void;
+    placeholder?: string;
+    allowSearch?: boolean;
+    className?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    showRadio?: boolean;
+}
+declare const SingleSelectDropdown: React.FC<SingleSelectDropdownProps>;
+export default SingleSelectDropdown;