lawgic-dev-kit 0.18.4 → 0.18.8

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

@@ -0,0 +1,8 @@
+interface PillProps {
+    label: string;
+    onClick?: () => void;
+    onRemove?: () => void;
+    readOnly?: boolean;
+}
+declare const Pill: ({ label, onClick, onRemove, readOnly, }: PillProps) => React.ReactElement;
+export default Pill;

package/dist/components/atoms/Pill/Pill.js

@@ -0,0 +1,31 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { FontAwesomeIcon as n } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { faX as l } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
+const p = ({
+  label: s,
+  onClick: o,
+  onRemove: t,
+  readOnly: r
+}) => /* @__PURE__ */ e.jsxs(
+  "div",
+  {
+    className: "flex justify-between items-center gap-10 bg-[#DEE6F7] rounded-[4px] p-8 text-14",
+    onClick: o,
+    children: [
+      /* @__PURE__ */ e.jsx("span", { className: "text-blue-500 font-semibold text-nowrap text-ellipsis overflow-hidden", children: s }),
+      !r && t && /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          onClick: (i) => {
+            t(), i.stopPropagation();
+          },
+          className: "flex items-center text-blue-300 hover:text-red-500",
+          children: /* @__PURE__ */ e.jsx(n, { icon: l })
+        }
+      )
+    ]
+  }
+);
+export {
+  p as default
+};

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

@@ -0,0 +1 @@
+export { default as Pill } from './Pill';

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

@@ -1,3 +1,3 @@
 import { default as TabProps } from './Tab.types';
-declare const Tab: ({ label, icon, isSelected, onClick, variant, direction, }: TabProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tab: ({ label, icon, isSelected, onClick, variant, direction, labelClassName, }: TabProps) => import("react/jsx-runtime").JSX.Element;
 export default Tab;

package/dist/components/atoms/Tab/Tab.js

@@ -1,30 +1,35 @@
-import { j as t } from "../../../_virtual/jsx-runtime.js";
+import { j as r } from "../../../_virtual/jsx-runtime.js";
 import { FontAwesomeIcon as n } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
-import { resolveTabClasses as m } from "./Tab.styles.js";
-const i = ({
-  label: o,
-  icon: r,
-  isSelected: s,
+import { resolveTabClasses as x } from "./Tab.styles.js";
+import { clsx as f } from "../../../node_modules/clsx/dist/clsx.js";
+const w = ({
+  label: s,
+  icon: t,
+  isSelected: o,
   onClick: a,
   variant: e = "default",
-  direction: l = "row"
-}) => /* @__PURE__ */ t.jsxs(
+  direction: l = "row",
+  labelClassName: m = ""
+}) => /* @__PURE__ */ r.jsxs(
   "button",
   {
-    className: `${m(e, s)} w-full cursor-pointer transition-all duration-200 ${l === "row" && "flex-row!"}`,
+    className: `${x(
+      e,
+      o
+    )} w-full cursor-pointer transition-all duration-200 ${l === "row" && "flex-row!"}`,
     onClick: a,
     children: [
-      r && /* @__PURE__ */ t.jsx(
+      t && /* @__PURE__ */ r.jsx(
         n,
         {
-          icon: r,
-          className: `${s ? "text-blue-500" : "text-gray-500"} w-20 h-20`
+          icon: t,
+          className: `${o ? "text-blue-500" : "text-gray-500"} w-20 h-20`
         }
       ),
-      /* @__PURE__ */ t.jsx("span", { className: "text-lg font-500", children: o })
+      /* @__PURE__ */ r.jsx("span", { className: f("text-lg font-500", m), children: s })
     ]
   }
 );
 export {
-  i as default
+  w as default
 };

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

@@ -4,7 +4,8 @@ export default interface TabProps {
     label: string;
     icon?: IconProp;
     isSelected?: boolean;
-    direction?: 'row' | 'col';
+    direction?: "row" | "col";
     onClick?: () => void;
-    variant?: 'default' | 'underline';
+    variant?: "default" | "underline";
+    labelClassName?: string;
 }

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

@@ -37,3 +37,4 @@ export * from './ThresholdCircleProgress/index';
 export * from './ThresholdProgressBar/index';
 export * from './CircleProgress/index';
 export * from './Switch/index';
+export * from './Pill/index';

package/dist/components/molecules/AutocompleteInput/AutocompleteInput.js

@@ -1,40 +1,40 @@
 import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { FontAwesomeIcon as K } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
-import { useTheme as Y } from "../../../hooks/useTheme.js";
-import { useState as C, useEffect as q, useRef as G } from "react";
-import { faChevronUp as J } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
-import { useFloating as Q, useClick as X, useDismiss as Z, useInteractions as _, useTransitionStyles as V } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
-import { autoUpdate as ee } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { offset as te, flip as re, shift as oe, size as ne } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
-const xe = ({
-  name: f,
-  error: i,
-  value: d,
-  onChange: b,
-  onOptionClick: y,
-  onKeyDown: v,
-  onSelect: j,
-  options: w,
-  placeholder: M,
-  label: P,
-  disabled: r = !1,
-  className: E = "",
+import { FontAwesomeIcon as q } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { useTheme as G } from "../../../hooks/useTheme.js";
+import { useState as J, useRef as Q } from "react";
+import { faChevronUp as S } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
+import { useFloating as V, useClick as X, useDismiss as Z, useInteractions as _, useTransitionStyles as C } from "../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
+import ee from "../../atoms/Button/Button.js";
+import { autoUpdate as te } from "../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { offset as re, flip as se, shift as oe, size as ne } from "../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+const ge = ({
+  name: p,
+  error: c,
+  value: r,
+  onChange: n,
+  onOptionClick: u,
+  onKeyDown: y,
+  onSelect: m,
+  onButtonClick: v,
+  options: j,
+  placeholder: k,
+  label: M,
+  disabled: s = !1,
+  className: P = "",
+  buttonContent: E = "Enviar",
   showOptionsOnClick: I = !0,
-  showChevron: s = !1,
-  setValueOnOptionSelect: O = !0,
-  leftSide: $,
+  showChevron: l = !1,
+  showButton: T = !1,
+  setValueOnOptionSelect: L = !0,
+  leftSide: w,
   rightSide: N
 }) => {
-  const { t: p } = Y(), [n, m] = C(d || ""), [l, a] = C(!1);
-  q(() => {
-    m(d || "");
-  }, [d]);
-  const x = G(null), { x: T, y: L, strategy: R, refs: c, context: h } = Q({
-    open: l,
-    onOpenChange: a,
+  const { t: x } = G(), [a, i] = J(!1), h = Q(null), { x: R, y: z, strategy: A, refs: d, context: g } = V({
+    open: a,
+    onOpenChange: i,
     middleware: [
-      te(8),
-      re(),
+      re(8),
+      se(),
       oe({ padding: 8 }),
       ne({
         apply({ availableHeight: e, elements: o }) {
@@ -46,129 +46,138 @@ const xe = ({
       })
     ],
     placement: "bottom-start",
-    whileElementsMounted: ee
-  }), A = X(h, {
-    enabled: s
-    // Solo habilitar click si showChevron está activo
-  }), F = Z(h), { getReferenceProps: z, getFloatingProps: D } = _([
-    A,
-    F
-  ]), { isMounted: S, styles: U } = V(h, {
+    whileElementsMounted: te
+  }), F = X(g, {
+    enabled: l
+  }), D = Z(g), { getReferenceProps: O, getFloatingProps: B } = _([
+    F,
+    D
+  ]), { isMounted: U, styles: W } = C(g, {
     duration: { open: 200, close: 150 },
     initial: { opacity: 0, transform: "translateY(-4px)" }
-  }), u = (() => {
-    const e = Array.isArray(w) ? w : [];
-    if (!n.trim()) return e;
-    const o = n.toLowerCase();
-    return e.filter((g) => g.label.toLowerCase().includes(o));
-  })(), k = (e) => {
-    O && m(e.label), a(!1), y && y(e), j && j(e.value);
-  }, W = (e) => {
-    m(e), b && b(e);
-  }, B = (e) => {
-    e.stopPropagation(), s && !r && (a(!l), !l && x.current && setTimeout(() => {
+  }), f = (() => {
+    const e = Array.isArray(j) ? j : [];
+    if (!r || !r.trim()) return e;
+    const o = r.toLowerCase();
+    return e.filter((b) => b.label.toLowerCase().includes(o));
+  })(), $ = (e) => {
+    L && (n == null || n(e.label)), i(!1), u == null || u(e), m == null || m(e.value);
+  }, H = (e) => {
+    n == null || n(e);
+  }, K = (e) => {
+    e.stopPropagation(), l && !s && (i(!a), !a && h.current && setTimeout(() => {
       var o;
-      return (o = x.current) == null ? void 0 : o.focus();
+      return (o = h.current) == null ? void 0 : o.focus();
     }, 100));
-  }, H = {
-    ...s ? z() : {},
+  }, Y = {
+    ...l ? O() : {},
     onKeyDown: void 0,
-    // Remover el handler de teclado que interfiere
     onClick: void 0
-    // Remover el click handler general
   };
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: `flex flex-col gap-8 select-none ${r && "cursor-not-allowed"} ${E}`,
+      className: `flex flex-col gap-8 select-none ${s && "cursor-not-allowed"} ${P}`,
       children: [
         /* @__PURE__ */ t.jsx(
           "h6",
           {
-            className: `text-gray-600 font-600 group ${i && "!text-red-500"} text-label ${r && "text-gray-300"}`,
-            children: P
+            className: `text-gray-600 font-600 group ${c && "!text-red-500"} text-label ${s && "text-gray-300"}`,
+            children: M
           }
         ),
-        /* @__PURE__ */ t.jsxs(
-          "div",
-          {
-            ref: c.setReference,
-            className: `
+        /* @__PURE__ */ t.jsxs("div", { className: "flex gap-24", children: [
+          /* @__PURE__ */ t.jsxs(
+            "div",
+            {
+              ref: d.setReference,
+              className: `
           flex items-center justify-between gap-8 p-16
         
-        ${i && "!border-red-500"} 
+        ${c && "!border-red-500"} 
 
         bg-light
         
         w-full h-full rounded-full border 
         
-        ${n && !r ? "border-blue-200" : "border-blue-100"} 
-        ${!r && "hover:border-blue-300"} 
-        ${r && "cursor-not-allowed"}
+        ${r && !s ? "border-blue-200" : "border-blue-100"} 
+        ${!s && "hover:border-blue-300"} 
+        ${s && "cursor-not-allowed"}
         
         focus-within:border-blue-500 transition-colors duration-200 ease-in-out
-        ${r && "hover:!cursor-pointer"}
+        ${s && "hover:!cursor-pointer"}
         group-disabled:bg-gray-500
         `,
-            ...H,
-            children: [
-              $ && $,
-              /* @__PURE__ */ t.jsx(
-                "input",
-                {
-                  ref: x,
-                  id: f,
-                  name: f,
-                  disabled: r,
-                  placeholder: M,
-                  value: n,
-                  onClick: () => {
-                    I && !l && !r && a(!0);
-                  },
-                  onChange: (e) => W(e.target.value),
-                  onKeyDown: (e) => {
-                    v && v(e), e.key === "Enter" && (e.preventDefault(), u.length > 0 && k(u[0])), e.key === "Escape" && a(!1);
-                  },
-                  className: `group bg-transparent w-full h-full font-600 placeholder:font-600 text-body-m disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-none ${r && "pointer-events-none !select-none !caret-transparent"}`
-                }
-              ),
-              N && !s ? N : s && /* @__PURE__ */ t.jsx(
-                K,
-                {
-                  icon: J,
-                  className: `text-xl text-gray-500 cursor-pointer ${l && "rotate-180"} transition-transform duration-150 ease-in-out`,
-                  onClick: B
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ t.jsx("h4", { className: "font-500 text-label text-red-500 leading-none", children: i && p(i || "", { x: p(f) }) }),
-        S && /* @__PURE__ */ t.jsx(
+              ...Y,
+              children: [
+                w && w,
+                /* @__PURE__ */ t.jsx(
+                  "input",
+                  {
+                    ref: h,
+                    id: p,
+                    name: p,
+                    disabled: s,
+                    placeholder: k,
+                    value: r,
+                    onClick: () => {
+                      I && !a && !s && i(!0);
+                    },
+                    onChange: (e) => H(e.target.value),
+                    onKeyDown: (e) => {
+                      y && y(e), e.key === "Enter" && (e.preventDefault(), f.length > 0 && $(f[0])), e.key === "Escape" && i(!1);
+                    },
+                    className: `group bg-transparent w-full h-full font-600 placeholder:font-600 text-body-m 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"}`
+                  }
+                ),
+                N && !l ? N : l && /* @__PURE__ */ t.jsx(
+                  q,
+                  {
+                    icon: S,
+                    className: `text-xl text-gray-500 cursor-pointer ${a && "rotate-180"} transition-transform duration-150 ease-in-out`,
+                    onClick: K
+                  }
+                )
+              ]
+            }
+          ),
+          T && /* @__PURE__ */ t.jsx(
+            ee,
+            {
+              variant: "filled",
+              size: "lg",
+              onClick: v,
+              className: "h-[55px]!",
+              children: E
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t.jsx("h4", { className: "font-500 text-label text-red-500 leading-none", children: c && x(c || "", { x: x(p) }) }),
+        U && /* @__PURE__ */ t.jsx(
           "div",
           {
-            ref: c.setFloating,
+            ref: d.setFloating,
             style: {
-              position: R,
-              top: L ?? 0,
-              left: T ?? 0,
-              ...U,
-              width: c.reference.current instanceof Element ? c.reference.current.clientWidth : void 0,
+              position: A,
+              top: z ?? 0,
+              left: R ?? 0,
+              ...W,
+              width: d.reference.current instanceof Element ? d.reference.current.clientWidth : void 0,
               zIndex: 50
             },
             className: "bg-white border border-blue-400 rounded-3xl shadow-lg overflow-hidden",
-            ...D(),
-            children: /* @__PURE__ */ t.jsx("div", { className: "max-h-[250px] overflow-y-auto", children: u.length > 0 ? /* @__PURE__ */ t.jsx("ul", { className: "py-4", children: u.map((e, o) => /* @__PURE__ */ t.jsx(
+            ...B(),
+            children: /* @__PURE__ */ t.jsx("div", { className: "max-h-[250px] overflow-y-auto", children: f.length > 0 ? /* @__PURE__ */ t.jsx("ul", { className: "py-4", children: f.map((e, o) => /* @__PURE__ */ t.jsx(
               "li",
               {
-                className: `flex items-center px-16 py-10 transition-all duration-200 hover:bg-blue-50 cursor-pointer ${n === e.label ? "bg-blue-100/30 text-blue-500 font-medium" : ""}`,
-                onClick: (g) => {
-                  g.stopPropagation(), k(e);
+                className: `flex items-center px-16 py-10 transition-all duration-200 hover:bg-blue-50 cursor-pointer ${r === e.label ? "bg-blue-100/30 text-blue-500 font-medium" : ""}`,
+                onClick: (b) => {
+                  b.stopPropagation(), $(e);
                 },
-                children: /* @__PURE__ */ t.jsx("span", { children: p(e.label) })
+                children: /* @__PURE__ */ t.jsx("span", { children: x(e.label) })
               },
               `${e.label}-${o}`
-            )) }) : n.length > 0 ? /* @__PURE__ */ t.jsxs("div", { className: "px-16 py-16 text-center text-gray-500", children: [
+            )) }) : r && (r == null ? void 0 : r.length) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: "px-16 py-16 text-center text-gray-500", children: [
               /* @__PURE__ */ t.jsx(
                 "svg",
                 {
@@ -189,7 +198,7 @@ const xe = ({
               ),
               /* @__PURE__ */ t.jsxs("p", { className: "mt-8 text-body-s", children: [
                 'No se encontraron resultados para "',
-                n,
+                r,
                 '"'
               ] })
             ] }) : null })
@@ -200,5 +209,5 @@ const xe = ({
   );
 };
 export {
-  xe as default
+  ge as default
 };

package/dist/components/molecules/AutocompleteInput/AutocompleteInput.types.d.ts

@@ -9,6 +9,8 @@ export interface AutocompleteInputProps {
         label: string;
         value: unknown;
     }) => void;
+    onButtonClick?: () => void;
+    buttonContent?: React.ReactNode;
     options: {
         label: string;
         value: unknown;
@@ -19,6 +21,7 @@ export interface AutocompleteInputProps {
     className?: string;
     showOptionsOnClick?: boolean;
     showChevron?: boolean;
+    showButton?: boolean;
     setValueOnOptionSelect?: boolean;
     leftSide?: React.ReactNode;
     rightSide?: React.ReactNode;

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

@@ -0,0 +1,6 @@
+interface PillsContainerProps {
+    values: string[];
+    onPillRemove: (index: number) => void;
+}
+declare const PillsContainer: ({ values, onPillRemove, }: PillsContainerProps) => React.ReactElement;
+export default PillsContainer;

package/dist/components/molecules/PillsContainer/PillsContainer.js

@@ -0,0 +1,60 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import a from "../../atoms/Pill/Pill.js";
+import { faChevronUp as x, faChevronDown as p } from "../../../node_modules/@fortawesome/pro-light-svg-icons/index.js";
+import { FontAwesomeIcon as l } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { useState as d } from "react";
+import { AnimatePresence as f } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
+import { motion as h } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
+const C = ({
+  values: o,
+  onPillRemove: r
+}) => {
+  const [i, c] = d(!1), m = o.slice(0, 3), s = o.slice(3);
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-start gap-20", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
+      m.map((t, n) => /* @__PURE__ */ e.jsx(
+        a,
+        {
+          label: t,
+          onRemove: () => r(n)
+        },
+        t
+      )),
+      /* @__PURE__ */ e.jsx(f, { children: i && s.map((t, n) => /* @__PURE__ */ e.jsx(
+        h.div,
+        {
+          initial: { opacity: 0, scale: 0.8 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.8 },
+          transition: { duration: 0.2 },
+          children: /* @__PURE__ */ e.jsx(a, { label: t, onRemove: () => r(n) })
+        },
+        t
+      )) })
+    ] }),
+    s.length > 0 && /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => c(!i),
+        className: "flex items-center gap-8 w-fit text-blue-500 font-semibold text-14 transition hover:text-blue-700 text-nowrap shrink-0",
+        children: i ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx("p", { children: "Ocultar" }),
+          " ",
+          /* @__PURE__ */ e.jsx(l, { icon: x })
+        ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsxs("p", { children: [
+            "Ver ",
+            s.length,
+            " más"
+          ] }),
+          " ",
+          /* @__PURE__ */ e.jsx(l, { icon: p })
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  C as default
+};

package/dist/components/molecules/PillsContainer/index.d.ts

@@ -0,0 +1 @@
+export { default as PillsContainer } from './PillsContainer';

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

@@ -3,7 +3,7 @@ import { Tab } from '../../atoms';
 interface Tab {
     id: string | number;
     label: string;
-    icon: IconProp;
+    icon?: IconProp;
     href?: string;
 }
 interface TabsProps {
@@ -15,6 +15,7 @@ interface TabsProps {
     direction?: "row" | "col";
     className?: string;
     showLabel?: boolean;
+    labelClassName?: string;
 }
-declare const Tabs: ({ variant, color, tabs, activeTab, onTabChange, className, direction, showLabel, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tabs: ({ variant, color, tabs, activeTab, onTabChange, className, direction, showLabel, labelClassName, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/components/molecules/Tabs/Tabs.js

@@ -1,16 +1,16 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
-import { useRef as f, useState as E, useEffect as u } from "react";
+import { useRef as f, useState as S, useEffect as u } from "react";
 import "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
 import "../../../_virtual/lodash.js";
-import { useTheme as S } from "../../../hooks/useTheme.js";
+import { useTheme as L } from "../../../hooks/useTheme.js";
 import "react-hook-form";
 import "../InformationContainer/InformationContainer.js";
 import "../../../constants/countries.js";
 import "../../atoms/ImageProfileInput/ImageProfileInput.validators.js";
-import L from "../../atoms/Tab/Tab.js";
+import y from "../../atoms/Tab/Tab.js";
 import "fuse.js";
 import { motion as a } from "../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
-const F = ({
+const G = ({
   variant: p = "underline",
   color: h = "blue",
   tabs: i,
@@ -18,15 +18,17 @@ const F = ({
   onTabChange: w,
   className: x = "",
   direction: R = "row",
-  showLabel: g = !0
+  showLabel: g = !0,
+  labelClassName: j = ""
+  // 🔹 default vacío
 }) => {
-  const o = f([]), [c, j] = E({ left: 0, width: 0 }), s = f(null), { defaultColorScheme: v } = S(), C = h || v, d = () => {
+  const o = f([]), [c, v] = S({ left: 0, width: 0 }), s = f(null), { defaultColorScheme: C } = L(), E = h || C, d = () => {
     const e = i.findIndex((t) => t.id === n);
     if (e >= 0 && o.current[e]) {
       const t = o.current[e];
       if (t && s.current) {
         const l = s.current.getBoundingClientRect(), m = t.getBoundingClientRect();
-        j({
+        v({
           left: m.left - l.left,
           width: m.width
         });
@@ -56,10 +58,11 @@ const F = ({
             },
             className: "w-full",
             children: /* @__PURE__ */ r.jsx(
-              L,
+              y,
               {
                 href: e.href,
                 label: g ? e.label : "",
+                labelClassName: j,
                 icon: e.icon,
                 direction: R,
                 isSelected: n === e.id,
@@ -73,7 +76,7 @@ const F = ({
         /* @__PURE__ */ r.jsx(
           a.div,
           {
-            className: `absolute bottom-0 h-2 bg-${C}-500`,
+            className: `absolute bottom-0 h-2 bg-${E}-500`,
             initial: !1,
             animate: {
               left: c.left,
@@ -91,5 +94,5 @@ const F = ({
   );
 };
 export {
-  F as default
+  G as default
 };

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

@@ -14,3 +14,4 @@ export * from './Stepper';
 export * from './Tabs';
 export * from './UncontrolledDateInput';
 export * from './AutocompleteInput';
+export * from './PillsContainer';