@klu_dev/ui-klu-green 1.2.8 → 1.2.9

package/README.md

@@ -25,6 +25,8 @@ npm install @klu_dev/ui-klu-green
 - MobileMenuDrawer
 - SearchSelect
 - InputCode
+- GridCard
+- CheckBox
 
 ## Antes de comenzar a agregar componentes
 
@@ -820,4 +822,78 @@ export default function BankSelector() {
 | `placeholder` | `string` | `"Buscar..."` | Texto de soporte visible cuando el campo se encuentra vacío. |
 | `size` | `'sm' \| 'md' \| 'lg' \| 'full'` | `'lg'` | Determina la escala del ancho mínimo, alto de caja e interlineado tipográfico interno. |
 | `error` | `boolean` | `false` | Alterna el color de la caja a la paleta destructiva y formatea el color del placeholder. |
-| `disabled` | `boolean` | `false` | Inactiva por completo la interacción del gatillo y cancela el despliegue del Popover. |
+| `disabled` | `boolean` | `false` | Inactiva por completo la interacción del gatillo y cancela el despliegue del Popover. |
+
+## Uso de GridCard
+Tarjeta modular interactiva e individual ideal para layouts de cuadrícula.
+
+```tsx
+import { GridCard, Icons } from "@klu_dev/ui-klu-green"
+import { useState } from "react"
+
+export default function CategorySelector() {
+  const mockCategories = [
+    { id: 'tel', label: 'Telefonía', icon: Icons.TELEPHONY },
+    { id: 'mov', label: 'Movilidad', icon: Icons.MOBILITY },
+    { id: 'hog', label: 'Hogar', icon: Icons.HOMESERVICE },
+  ]
+
+  const [activeId, setActiveId] = useState<string>('tel')
+
+  return (
+    <div className="uiklu-flex uiklu-flex-wrap uiklu-gap-4 uiklu-p-6">
+      {mockCategories.map((category) => (
+        <GridCard
+          key={category.id}
+          label={category.label}
+          icon={category.icon}
+          isActive={activeId === category.id}
+          onClick={() => setActiveId(category.id)}
+        />
+      ))}
+    </div>
+  )
+}
+```
+
+### Props de GridCard
+| Prop | Tipo | Por defecto | Descripción |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | - | Texto informativo inferior que titula el bloque de la tarjeta. |
+| `icon` | `ReactNode` | - | Grafismo o ícono vectorial extraído del catálogo corporativo `Icons`. |
+| `isActive` | `boolean` | `false` | Modifica dinámicamente el estilo del marco y el relleno para denotar selección activa. |
+| `onClick` | `() => void` | - | Callback gatillado al presionar la tarjeta completa. |
+
+
+
+## Uso de CheckBox
+Componente de casilla de verificación estilizado con soporte de estados e icono interno centralizado. Puede ser utilizado de manera controlada o no controlada.
+
+```tsx
+import { Checkbox } from "@klu_dev/ui-klu-green"
+import { useState } from "react"
+
+export default function CheckboxExample() {
+  const [isLogged, setIsLogged] = useState(false)
+
+  return (
+    <div className="uiklu-p-6">
+      <Checkbox 
+        label="Guardar como servicio recurrente" 
+        checked={isLogged}
+        onChange={(checked) => setIsLogged(checked)}
+      />
+    </div>
+  )
+}
+```
+
+### Props de CheckBox
+| Prop | Tipo | Por defecto | Descripción |
+| :--- | :--- | :--- | :--- |
+| `id` | `string` | - | Identificador único del input (si no se provee, genera uno interno de forma automática). |
+| `label` | `string` | `"Guardar como servicio recurrente"` | Texto descriptivo renderizado al lado derecho del recuadro. |
+| `defaultChecked` | `boolean` | `false` | Estado inicial por defecto en modo no controlado. |
+| `checked` | `boolean` | - | Estado binario síncrono en modo controlado. |
+| `onChange` | `(checked: boolean) => void` | - | Callback gatillado automáticamente al alterar la interacción del recuadro. |
+

package/dist/index.css

@@ -116,9 +116,12 @@
     --uiklu-primary-700: 176 84% 22%;
     --uiklu-primary-600: 177 87% 25%;
     --uiklu-primary-500: 178 87% 27%;
+    --uiklu-primary-400: 178 60% 36%;
     --uiklu-primary-300: 179 39% 47%;
     --uiklu-primary-100: 180 34% 77%;
     --uiklu-primary-light: 180 100% 99%;
+    --uiklu-primaryactive: 184 98% 96%;
+    --uiklu-primary-borderactive: 183 64% 90%;
     --uiklu-primary-50: 184 36% 91%;
     --uiklu-primary-foreground: 0 0% 100%;
     --uiklu-secondary: 160 60% 40%;
@@ -148,6 +151,7 @@
     --uiklu-gray-400: 220 2% 72%;
     --uiklu-gray-300: 210 3% 87%;
     --uiklu-gray-200: 220 8% 93%;
+    --uiklu-gray-50: 240 20% 98%;
 
 
     --uiklu-successbg: 184 36% 91%;
@@ -345,6 +349,10 @@ button,
 .uiklu-ml-5{
     margin-left: 1.25rem;
 
+}
+.uiklu-ml-\[1px\]{
+    margin-left: 1px;
+
 }
 .uiklu-ml-\[3px\]{
     margin-left: 3px;
@@ -457,6 +465,10 @@ button,
 .uiklu-h-\[20px\]{
     height: 20px;
 
+}
+.uiklu-h-\[24px\]{
+    height: 24px;
+
 }
 .uiklu-h-\[34px\]{
     height: 34px;
@@ -489,6 +501,10 @@ button,
 .uiklu-h-\[6px\]{
     height: 6px;
 
+}
+.uiklu-h-\[70px\]{
+    height: 70px;
+
 }
 .uiklu-h-auto{
     height: auto;
@@ -621,6 +637,10 @@ button,
 .uiklu-w-\[600px\]{
     width: 600px;
 
+}
+.uiklu-w-\[70px\]{
+    width: 70px;
+
 }
 .uiklu-w-\[75px\]{
     width: 75px;
@@ -746,6 +766,10 @@ button,
 .uiklu-max-w-lg{
     max-width: 32rem;
 
+}
+.uiklu-max-w-md{
+    max-width: 28rem;
+
 }
 .uiklu-flex-1{
     flex: 1 1 0%;
@@ -1026,6 +1050,10 @@ button,
 .uiklu-rounded-\[48px\]{
     border-radius: 48px;
 
+}
+.uiklu-rounded-\[4px\]{
+    border-radius: 4px;
+
 }
 .uiklu-rounded-\[50px\]{
     border-radius: 50px;
@@ -1134,6 +1162,11 @@ button,
     --tw-border-opacity: 1;
     border-color: hsl(var(--uiklu-gray-200) / var(--tw-border-opacity, 1));
 
+}
+.uiklu-border-gray300{
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--uiklu-gray-300) / var(--tw-border-opacity, 1));
+
 }
 .uiklu-border-inputlight{
     --tw-border-opacity: 1;
@@ -1159,6 +1192,11 @@ button,
     --tw-border-opacity: 1;
     border-color: hsl(var(--uiklu-primary-900) / var(--tw-border-opacity, 1));
 
+}
+.uiklu-border-primaryborderactive{
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--uiklu-primary-borderactive) / var(--tw-border-opacity, 1));
+
 }
 .uiklu-border-transparent{
     border-color: transparent;
@@ -1245,6 +1283,11 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-gray50{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-gray-50) / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-gray900{
     --tw-bg-opacity: 1;
@@ -1294,6 +1337,11 @@ button,
     --tw-bg-opacity: 1;
     background-color: hsl(var(--uiklu-primary-900) / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-primaryactive{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-primaryactive) / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-primarylight{
     --tw-bg-opacity: 1;
@@ -1436,6 +1484,14 @@ button,
 .uiklu-p-8{
     padding: 2rem;
 
+}
+.uiklu-p-\[10px\]{
+    padding: 10px;
+
+}
+.uiklu-p-\[10px_8px_10px_8px\]{
+    padding: 10px 8px 10px 8px;
+
 }
 .uiklu-p-\[14px\]{
     padding: 14px;
@@ -1657,6 +1713,10 @@ button,
 .uiklu-text-\[8px\]{
     font-size: 8px;
 
+}
+.uiklu-text-\[9\.5px\]{
+    font-size: 9.5px;
+
 }
 .uiklu-text-lg{
     font-size: 12px;
@@ -1872,6 +1932,11 @@ button,
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-primary-300) / var(--tw-text-opacity, 1));
 
+}
+.uiklu-text-primary400{
+    --tw-text-opacity: 1;
+    color: hsl(var(--uiklu-primary-400) / var(--tw-text-opacity, 1));
+
 }
 .uiklu-text-primary600{
     --tw-text-opacity: 1;
@@ -2093,6 +2158,18 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.checked\:uiklu-border-primary:checked{
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--uiklu-primary) / var(--tw-border-opacity, 1));
+
+}
+
+.checked\:uiklu-bg-primary:checked{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-primary) / var(--tw-bg-opacity, 1));
+
+}
+
 .focus-within\:uiklu-border-\[1px\]:focus-within{
     border-width: 1px;
 
@@ -2122,6 +2199,11 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.hover\:uiklu-bg-gray200\/40:hover{
+    background-color: hsl(var(--uiklu-gray-200) / 0.4);
+
+}
+
 .hover\:uiklu-bg-orange500\/90:hover{
     background-color: hsl(var(--uiklu-orange-500) / 0.9);
 
@@ -2243,6 +2325,24 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.focus-visible\:uiklu-ring-2:focus-visible{
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+
+}
+
+.focus-visible\:uiklu-ring-primary300:focus-visible{
+    --tw-ring-opacity: 1;
+    --tw-ring-color: hsl(var(--uiklu-primary-300) / var(--tw-ring-opacity, 1));
+
+}
+
+.focus-visible\:uiklu-ring-offset-2:focus-visible{
+    --tw-ring-offset-width: 2px;
+
+}
+
 .active\:uiklu-opacity-70:active{
     opacity: 0.7;
 
@@ -2282,6 +2382,11 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.uiklu-peer:checked ~ .peer-checked\:uiklu-opacity-100{
+    opacity: 1;
+
+}
+
 .data-\[placeholder\]\:uiklu-text-gray500[data-placeholder]{
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-gray-500) / var(--tw-text-opacity, 1));
@@ -2352,4 +2457,14 @@ input.uiklu-flex:not(:placeholder-shown) {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--uiklu-primary-300) / var(--tw-bg-opacity, 1));
 
+}
+
+.\[\&\>svg\]\:uiklu-h-3>svg{
+    height: 0.75rem;
+
+}
+
+.\[\&\>svg\]\:uiklu-w-3>svg{
+    width: 0.75rem;
+
 }

package/dist/index.d.ts

@@ -166,6 +166,12 @@ declare const Icons: {
     BOXES: react_jsx_runtime.JSX.Element;
     MENU: react_jsx_runtime.JSX.Element;
     CIRCLE_MOVEMENTS: react_jsx_runtime.JSX.Element;
+    TELEPHONY: react_jsx_runtime.JSX.Element;
+    MOBILITY: react_jsx_runtime.JSX.Element;
+    HOMESERVICE: react_jsx_runtime.JSX.Element;
+    SIGN: react_jsx_runtime.JSX.Element;
+    GAMES: react_jsx_runtime.JSX.Element;
+    CHECKED: react_jsx_runtime.JSX.Element;
 };
 
 declare const searchSelectTriggerVariants: (props?: ({
@@ -194,4 +200,22 @@ interface AuthCodeProps {
 }
 declare const InputCode: React__default.FC<AuthCodeProps>;
 
-export { BackButton, BalanceInfo, Button, Icons, Input, InputCode, LoadingScreen, MobileMenuDrawer, Modal, PromoBanner, SearchSelect, Select, SidebarTabs, ToastAction, Toaster, Typography, useToast };
+interface GridCardProps {
+    label: string;
+    icon: React__default.ReactNode;
+    isActive?: boolean;
+    onClick?: () => void;
+}
+declare const GridCard: React__default.FC<GridCardProps>;
+
+interface CheckboxProps {
+    id?: string;
+    label?: string;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    [key: string]: any;
+}
+declare const Checkbox: React__default.FC<CheckboxProps>;
+
+export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, GridCard, Icons, Input, InputCode, LoadingScreen, MobileMenuDrawer, Modal, PromoBanner, SearchSelect, Select, SidebarTabs, ToastAction, Toaster, Typography, useToast };

package/dist/index.js

@@ -731,6 +731,132 @@ var MovementsIconCircle = ({ className }) => /* @__PURE__ */ jsxs7(
     ]
   }
 );
+var Telephony = ({ className }) => /* @__PURE__ */ jsx7(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    className,
+    style: {
+      display: "flex",
+      width: "24px",
+      height: "24px",
+      justifyContent: "center",
+      alignItems: "center",
+      aspectRatio: "1/1"
+    },
+    children: /* @__PURE__ */ jsx7("path", { d: "M16.5 1.5H7.5C6.90326 1.5 6.33097 1.73705 5.90901 \n    2.15901C5.48705 2.58097 5.25 3.15326 5.25 3.75V20.25C5.25 \n    20.8467 5.48705 21.419 5.90901 21.841C6.33097 22.2629 6.90326 \n    22.5 7.5 22.5H16.5C17.0967 22.5 17.669 22.2629 18.091 \n    21.841C18.5129 21.419 18.75 20.8467 18.75 20.25V3.75C18.75 \n    3.15326 18.5129 2.58097 18.091 2.15901C17.669 1.73705 17.0967 \n    1.5 16.5 1.5ZM6.75 6H17.25V18H6.75V6ZM7.5 3H16.5C16.6989 3 \n    16.8897 3.07902 17.0303 3.21967C17.171 3.36032 17.25 3.55109 \n    17.25 3.75V4.5H6.75V3.75C6.75 3.55109 6.82902 3.36032 6.96967 \n    3.21967C7.11032 3.07902 7.30109 3 7.5 3ZM16.5 21H7.5C7.30109 \n    21 7.11032 20.921 6.96967 20.7803C6.82902 20.6397 6.75 20.4489 \n    6.75 20.25V19.5H17.25V20.25C17.25 20.4489 17.171 20.6397 \n    17.0303 20.7803C16.8897 20.921 16.6989 21 16.5 21Z", fill: "currentColor" })
+  }
+);
+var Mobility = ({ className }) => /* @__PURE__ */ jsx7(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "23",
+    height: "18",
+    viewBox: "0 0 23 18",
+    fill: "none",
+    className,
+    style: {
+      display: "flex",
+      width: "24px",
+      height: "24px",
+      justifyContent: "center",
+      alignItems: "center",
+      aspectRatio: "1/1"
+    },
+    children: /* @__PURE__ */ jsx7("path", { d: "M21.75 6.75H20.7375L18.1331 0.890625C18.0153 0.625525 17.8231 \n    0.400293 17.5798 0.242217C17.3365 0.0841403 17.0526 3.47268e-06 16.7625 \n    0H5.7375C5.44738 3.47268e-06 5.16349 0.0841403 4.92022 0.242217C4.67695 \n    0.400293 4.48474 0.625525 4.36688 0.890625L1.7625 6.75H0.75C0.551088 \n    6.75 0.360322 6.82902 0.21967 6.96967C0.0790176 7.11032 0 7.30109 0 \n    7.5C0 7.69891 0.0790176 7.88968 0.21967 8.03033C0.360322 8.17098 \n    0.551088 8.25 0.75 8.25H1.5V15.75C1.5 16.1478 1.65804 16.5294 1.93934 \n    16.8107C2.22064 17.092 2.60218 17.25 3 17.25H5.25C5.64782 17.25 6.02936 \n    17.092 6.31066 16.8107C6.59196 16.5294 6.75 16.1478 6.75 \n    15.75V14.25H15.75V15.75C15.75 16.1478 15.908 16.5294 16.1893 \n    16.8107C16.4706 17.092 16.8522 17.25 17.25 17.25H19.5C19.8978 17.25 \n    20.2794 17.092 20.5607 16.8107C20.842 16.5294 21 16.1478 21 \n    15.75V8.25H21.75C21.9489 8.25 22.1397 8.17098 22.2803 8.03033C22.421 \n    7.88968 22.5 7.69891 22.5 7.5C22.5 7.30109 22.421 7.11032 22.2803 \n    6.96967C22.1397 6.82902 21.9489 6.75 21.75 6.75ZM5.7375 1.5H16.7625L19.0959 \n    6.75H3.40406L5.7375 1.5ZM5.25 15.75H3V14.25H5.25V15.75ZM17.25 \n    15.75V14.25H19.5V15.75H17.25ZM19.5 12.75H3V8.25H19.5V12.75ZM4.5 10.5C4.5 \n    10.3011 4.57902 10.1103 4.71967 9.96967C4.86032 9.82902 5.05109 9.75 5.25 \n    9.75H6.75C6.94891 9.75 7.13968 9.82902 7.28033 9.96967C7.42098 10.1103\n    7.5 10.3011 7.5 10.5C7.5 10.6989 7.42098 10.8897 7.28033 11.0303C7.13968 \n    11.171 6.94891 11.25 6.75 11.25H5.25C5.05109 11.25 4.86032 11.171 4.71967 \n    11.0303C4.57902 10.8897 4.5 10.6989 4.5 10.5ZM15 10.5C15 10.3011 15.079 \n    10.1103 15.2197 9.96967C15.3603 9.82902 15.5511 9.75 15.75 9.75H17.25C17.4489 \n    9.75 17.6397 9.82902 17.7803 9.96967C17.921 10.1103 18 10.3011 18 10.5C18 \n    10.6989 17.921 10.8897 17.7803 11.0303C17.6397 11.171 17.4489 11.25 17.25 \n    11.25H15.75C15.5511 11.25 15.3603 11.171 15.2197 11.0303C15.079 10.8897 15 \n    10.6989 15 10.5Z", fill: "currentColor" })
+  }
+);
+var Home = ({ className }) => /* @__PURE__ */ jsx7(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "23",
+    height: "19",
+    viewBox: "0 0 23 19",
+    fill: "none",
+    className,
+    style: {
+      display: "flex",
+      width: "24px",
+      height: "24px",
+      justifyContent: "center",
+      alignItems: "center",
+      aspectRatio: "1/1"
+    },
+    children: /* @__PURE__ */ jsx7("path", { d: "M21.75 17.2502H20.25V10.5002L20.4694 10.7196C20.6104 10.8603 20.8015 \n   10.9393 21.0007 10.9391C21.1999 10.939 21.3908 10.8597 21.5316 10.7187C21.6723 \n   10.5777 21.7513 10.3866 21.7511 10.1874C21.7509 9.98819 21.6716 9.79722 21.5306 \n   9.65649L12.3103 0.438992C12.029 0.1579 11.6477 0 11.25 0C10.8523 0 10.471 0.1579 \n   10.1897 0.438992L0.969375 9.65649C0.828769 9.79722 0.749827 9.98805 0.749914 \n   10.187C0.750002 10.3859 0.829113 10.5767 0.969844 10.7173C1.11057 10.8579 1.3014 \n   10.9368 1.50033 10.9367C1.69927 10.9366 1.89002 10.8575 2.03062 10.7168L2.25 \n   10.5002V17.2502H0.75C0.551088 17.2502 0.360322 17.3293 0.21967 17.4699C0.0790176 \n   17.6106 0 17.8013 0 18.0002C0 18.1992 0.0790176 18.3899 0.21967 18.5306C0.360322 \n   18.6712 0.551088 18.7502 0.75 18.7502H21.75C21.9489 18.7502 22.1397 18.6712 \n   22.2803 18.5306C22.421 18.3899 22.5 18.1992 22.5 18.0002C22.5 17.8013 22.421 \n   17.6106 22.2803 17.4699C22.1397 17.3293 21.9489 17.2502 21.75 17.2502ZM3.75 \n   9.00024L11.25 1.50024L18.75 9.00024V17.2502H14.25V12.0002C14.25 11.8013 14.171 \n   11.6106 14.0303 11.4699C13.8897 11.3293 13.6989 11.2502 13.5 11.2502H9C8.80109 \n   11.2502 8.61032 11.3293 8.46967 11.4699C8.32902 11.6106 8.25 11.8013 8.25 \n   12.0002V17.2502H3.75V9.00024ZM12.75 17.2502H9.75V12.7502H12.75V17.2502Z", fill: "currentColor" })
+  }
+);
+var SIGN = ({ className }) => /* @__PURE__ */ jsx7(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    className,
+    style: {
+      display: "flex",
+      width: "24px",
+      height: "24px",
+      justifyContent: "center",
+      alignItems: "center",
+      aspectRatio: "1/1"
+    },
+    children: /* @__PURE__ */ jsx7("path", { d: "M12 8.25001C11.2583 8.25001 10.5333 8.46994 9.9166 8.882C9.29992 \n    9.29406 8.81927 9.87972 8.53544 10.5649C8.25161 11.2502 8.17735 12.0042 \n    8.32204 12.7316C8.46674 13.459 8.82389 14.1272 9.34834 14.6517C9.87278\n    15.1761 10.541 15.5333 11.2684 15.678C11.9958 15.8227 12.7498 15.7484 \n    13.4351 15.4646C14.1203 15.1807 14.7059 14.7001 15.118 14.0834C15.5301 \n    13.4667 15.75 12.7417 15.75 12C15.75 11.0054 15.3549 10.0516 14.6516 \n    9.34836C13.9484 8.6451 12.9945 8.25001 12 8.25001ZM12 14.25C11.555 14.25 \n    11.12 14.1181 10.75 13.8708C10.3799 13.6236 10.0916 13.2722 9.92126 \n    12.861C9.75096 12.4499 9.7064 11.9975 9.79322 11.5611C9.88004 11.1246 \n    10.0943 10.7237 10.409 10.409C10.7237 10.0944 11.1246 9.88006 11.561 \n    9.79324C11.9975 9.70643 12.4499 9.75098 12.861 9.92128C13.2722 10.0916 \n    13.6236 10.38 13.8708 10.75C14.118 11.12 14.25 11.555 14.25 12C14.25 \n    12.5967 14.0129 13.169 13.591 13.591C13.169 14.013 12.5967 14.25 12 \n    14.25ZM18.9103 14.9194C18.5881 15.6812 18.1421 16.3844 17.5903 \n    17.0006C17.4567 17.1452 17.2716 17.2314 17.075 17.2408C16.8784 17.2501 \n    16.686 17.1817 16.5393 17.0504C16.3926 16.9191 16.3034 16.7354 16.291 \n    16.539C16.2786 16.3425 16.3439 16.1491 16.4728 16.0003C17.4576 14.9008 \n    18.0021 13.4766 18.0021 12.0005C18.0021 10.5244 17.4576 9.10019 16.4728 \n    8.00064C16.4053 7.92757 16.353 7.84179 16.3189 7.74831C16.2848 7.65482 \n    16.2697 7.5555 16.2744 7.45611C16.2791 7.35673 16.3036 7.25928 16.3463 \n    7.16943C16.3891 7.07958 16.4492 6.99913 16.5234 6.93278C16.5975 6.86642 \n    16.6841 6.81547 16.7781 6.78291C16.8721 6.75034 16.9717 6.73681 17.071 \n    6.74309C17.1703 6.74938 17.2673 6.77536 17.3565 6.81952C17.4456 6.86368 \n    17.5251 6.92514 17.5903 7.00032C18.5373 8.06002 19.1641 9.36674 19.3978 \n    10.7686C19.6314 12.1704 19.4624 13.6098 18.9103 14.9194ZM6.46874 \n    9.6647C6.02622 10.7122 5.8905 11.864 6.0774 12.9857C6.26429 14.1074 \n    6.7661 15.1529 7.52436 16.0003C7.6533 16.1491 7.7186 16.3425 7.70616 \n    16.539C7.69372 16.7354 7.60455 16.9191 7.45788 17.0504C7.31121 17.1817 \n    7.1188 17.2501 6.92218 17.2408C6.72555 17.2314 6.54047 17.1452 6.40686 \n    17.0006C5.17554 15.6262 4.49465 13.8458 4.49465 12.0005C4.49465 10.1552 \n    5.17554 8.37474 6.40686 7.00032C6.53951 6.85176 6.72575 6.76198 6.92459 \n    6.75073C7.12344 6.73947 7.31861 6.80767 7.46718 6.94032C7.61574 7.07297 \n    7.70552 7.25921 7.71677 7.45805C7.72803 7.6569 7.65983 7.85207 7.52718 \n    8.00064C7.08468 8.4929 6.727 9.05524 6.46874 9.6647ZM23.25 12C23.2545 \n    14.9454 22.0998 17.7742 20.0353 19.875C19.967 19.948 19.8848 20.0067 \n    19.7935 20.0475C19.7022 20.0882 19.6037 20.1104 19.5037 20.1125C19.4038 \n    20.1147 19.3044 20.0968 19.2114 20.06C19.1185 20.0232 19.0338 19.9682 \n    18.9624 19.8982C18.891 19.8281 18.8344 19.7446 18.7957 19.6523C18.7571 \n    19.5601 18.7373 19.4611 18.7376 19.3611C18.7378 19.2611 18.758 19.1622 \n    18.797 19.0701C18.836 18.9781 18.893 18.8947 18.9647 18.825C20.7522 \n    17.0038 21.7537 14.5538 21.7537 12.0019C21.7537 9.44998 20.7522 6.99998 \n    18.9647 5.17876C18.8249 5.03679 18.7473 4.84512 18.7489 4.64592C18.7505 \n    4.44672 18.8311 4.25631 18.9731 4.11657C19.1151 3.97684 19.3068 3.89922 \n    19.506 3.90081C19.7052 3.90239 19.8956 3.98304 20.0353 4.12501C22.0998 \n    6.22579 23.2545 9.05464 23.25 12ZM5.0353 18.8231C5.10437 18.8934 5.15891\n    18.9766 5.19582 19.068C5.23273 19.1594 5.25128 19.2572 5.25041 19.3557C5.24954 \n    19.4542 5.22926 19.5517 5.19075 19.6424C5.15223 19.7331 5.09622 19.8153 \n    5.02593 19.8844C4.95563 19.9535 4.87241 20.008 4.78104 20.0449C4.68966 \n    20.0818 4.59191 20.1004 4.49336 20.0995C4.39481 20.0986 4.2974 20.0783 \n    4.20669 20.0398C4.11598 20.0013 4.03374 19.9453 3.96468 19.875C1.90047 \n    17.7736 0.743896 14.9457 0.743896 12C0.743896 9.05434 1.90047 6.22644 \n    3.96468 4.12501C4.03298 4.05199 4.11519 3.99336 4.20648 3.95257C4.29777 \n    3.91178 4.39629 3.88966 4.49625 3.8875C4.59621 3.88535 4.6956 3.9032 \n    4.78856 3.94001C4.88153 3.97683 4.96619 4.03186 5.03757 4.10187C5.10896 \n    4.17188 5.16563 4.25545 5.20424 4.34768C5.24285 4.43991 5.26264 4.53893 \n    5.26242 4.63892C5.26221 4.7389 5.24201 4.83784 5.20301 4.9299C5.164 \n    5.02197 5.10698 5.1053 5.0353 5.17501C3.24774 6.99623 2.24628 9.44623 \n    2.24628 11.9981C2.24628 14.55 3.24774 17 5.0353 18.8213V18.8231Z", fill: "currentColor" })
+  }
+);
+var GAMES = ({ className }) => /* @__PURE__ */ jsx7(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "23",
+    height: "17",
+    viewBox: "0 0 23 17",
+    fill: "none",
+    className,
+    style: {
+      display: "flex",
+      width: "24px",
+      height: "24px",
+      justifyContent: "center",
+      alignItems: "center",
+      aspectRatio: "1/1"
+    },
+    children: /* @__PURE__ */ jsx7("path", { d: "M16.5 10.5H14.25C14.0511 10.5 13.8603 10.421 13.7196 10.2803C13.579 \n    10.1397 13.5 9.94891 13.5 9.75C13.5 9.55109 13.579 9.36032 13.7196 \n    9.21967C13.8603 9.07902 14.0511 9 14.25 9H16.5C16.6989 9 16.8897 \n    9.07902 17.0303 9.21967C17.171 9.36032 17.25 9.55109 17.25 9.75C17.25 9.94891 \n    17.171 10.1397 17.0303 10.2803C16.8897 10.421 16.6989 10.5 16.5 10.5ZM9.74997 \n    9H8.99997V8.25C8.99997 8.05109 8.92095 7.86032 8.7803 7.71967C8.63965 7.57902 \n    8.44888 7.5 8.24997 7.5C8.05106 7.5 7.86029 7.57902 7.71964 7.71967C7.57899 \n    7.86032 7.49997 8.05109 7.49997 8.25V9H6.74997C6.55106 9 6.36029 9.07902 \n    6.21964 9.21967C6.07899 9.36032 5.99997 9.55109 5.99997 9.75C5.99997 9.94891 \n    6.07899 10.1397 6.21964 10.2803C6.36029 10.421 6.55106 10.5 6.74997 \n    10.5H7.49997V11.25C7.49997 11.4489 7.57899 11.6397 7.71964 11.7803C7.86029 \n    11.921 8.05106 12 8.24997 12C8.44888 12 8.63965 11.921 8.7803 11.7803C8.92095 \n    11.6397 8.99997 11.4489 8.99997 11.25V10.5H9.74997C9.94888 10.5 10.1397 10.421 \n    10.2803 10.2803C10.421 10.1397 10.5 9.94891 10.5 9.75C10.5 9.55109 10.421 \n    9.36032 10.2803 9.21967C10.1397 9.07902 9.94888 9 9.74997 9ZM22.6387 \n    18.8109C22.3561 19.2146 21.9884 19.5514 21.5617 19.7978C21.1349 20.0442 \n    20.6594 20.1941 20.1685 20.2371C19.6776 20.2801 19.1833 20.2151 18.7202 \n    20.0466C18.2572 19.8781 17.8366 19.6103 17.4881 19.2619C17.4768 19.2506 \n    17.4656 19.2394 17.4553 19.2272L13.7325 15H10.2637L6.54466 19.2272L6.51185 \n    19.2619C5.87829 19.8941 5.01999 20.2494 4.12497 20.25C3.63226 20.2498 3.14556 \n    20.1418 2.69906 19.9334C2.25257 19.7251 1.85711 19.4215 1.54046 19.044C1.22381 \n    18.6665 0.993658 18.2242 0.866165 17.7483C0.738672 17.2724 0.716932 16.7743 \n    0.802473 16.2891C0.802021 16.2847 0.802021 16.2803 0.802473 16.2759L2.33716 \n    8.3925C2.56556 7.09225 3.2449 5.91409 4.25581 5.06504C5.26671 4.21599 6.5445 \n    3.75037 7.86466 3.75H16.125C17.4411 3.7521 18.715 4.21506 19.7254 \n    5.05849C20.7358 5.90193 21.419 7.07258 21.6562 8.36719C21.6562 8.37281 \n    21.6562 8.37844 21.6562 8.38406L23.1909 16.275C23.1914 16.2794 23.1914 \n    16.2838 23.1909 16.2881C23.2703 16.7243 23.2624 17.1718 23.1676 17.6049C23.0729 \n    18.0379 22.8931 18.4479 22.6387 18.8109ZM16.125 13.5C17.219 13.5 18.2682 13.0654 \n    19.0418 12.2918C19.8154 11.5182 20.25 10.469 20.25 9.375C20.25 8.28098 19.8154 \n    7.23177 19.0418 6.45818C18.2682 5.6846 17.219 5.25 16.125 5.25H7.86466C6.89618 \n    5.25087 5.95902 5.59325 5.21807 6.21691C4.47712 6.84057 3.97984 7.70556 3.81372 \n    8.65969V8.67188L2.2781 16.5553C2.21022 16.9461 2.26805 17.3484 2.44326 \n    17.7043C2.61848 18.0602 2.90206 18.3514 3.25321 18.5359C3.60436 18.7204 \n    4.00498 18.7889 4.39747 18.7313C4.78996 18.6738 5.15408 18.4932 5.43747 \n    18.2156L9.36747 13.7541C9.43784 13.6742 9.52439 13.6103 9.62138 \n    13.5665C9.71836 13.5227 9.82355 13.5 9.92997 13.5H16.125ZM21.7218 \n    16.5553L20.9025 12.3366C20.3985 13.1503 19.6953 13.822 18.8593 \n    14.2881C18.0232 14.7542 17.0821 14.9992 16.125 15H15.7312L18.5625 \n    18.2166C18.7759 18.4242 19.0356 18.5783 19.3201 18.6661C19.6047 18.7539 \n    19.906 18.773 20.1993 18.7219C20.6881 18.6356 21.1226 18.3591 21.4078 \n    17.953C21.6931 17.5469 21.8056 17.0443 21.7209 16.5553H21.7218Z", fill: "currentColor" })
+  }
+);
+var CHECKED = ({ className }) => /* @__PURE__ */ jsx7(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    className,
+    style: {
+      display: "flex",
+      width: "12px",
+      height: "12px",
+      justifyContent: "center",
+      alignItems: "center",
+      aspectRatio: "1/1"
+    },
+    children: /* @__PURE__ */ jsx7(
+      "path",
+      {
+        d: "M9.837 4.56417L5.41028 8.84392C5.30685 8.94386 5.1666 9 \n      5.02036 9C4.87413 9 4.73387 8.94386 4.63044 8.84392L2.16126 \n      6.44406C2.058 6.34407 2 6.20855 2 6.06725C2 5.92595 2.058 5.79042 \n      2.16126 5.69043L2.85078 5.02381C2.95417 4.92427 3.09412 4.86839 \n      3.24002 4.86839C3.38592 4.86839 3.52587 4.92427 3.62925 \n      5.02381L5.03415 6.34106L8.37005 3.15558C8.47344 3.05595 8.61347 3 \n      8.75946 3C8.90544 3 9.04547 3.05595 9.14886 3.15558L9.83666 \n      3.80687C9.88838 3.85643 9.92945 3.9154 9.95748 3.98037C9.98552 \n      4.04535 9.99997 4.11505 10 4.18545C10 4.25585 9.98564 4.32556 \n      9.95767 4.39056C9.92969 4.45556 9.88868 4.51457 9.837 4.56417Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
 var Icons = {
   CARD: /* @__PURE__ */ jsx7(CardIcon, {}),
   TICKET: /* @__PURE__ */ jsx7(TicketIcon, {}),
@@ -756,7 +882,13 @@ var Icons = {
   SERVICES: /* @__PURE__ */ jsx7(ServicesPayIcon, {}),
   BOXES: /* @__PURE__ */ jsx7(BoxesIcon, {}),
   MENU: /* @__PURE__ */ jsx7(IconMenu, {}),
-  CIRCLE_MOVEMENTS: /* @__PURE__ */ jsx7(MovementsIconCircle, {})
+  CIRCLE_MOVEMENTS: /* @__PURE__ */ jsx7(MovementsIconCircle, {}),
+  TELEPHONY: /* @__PURE__ */ jsx7(Telephony, {}),
+  MOBILITY: /* @__PURE__ */ jsx7(Mobility, {}),
+  HOMESERVICE: /* @__PURE__ */ jsx7(Home, {}),
+  SIGN: /* @__PURE__ */ jsx7(SIGN, {}),
+  GAMES: /* @__PURE__ */ jsx7(GAMES, {}),
+  CHECKED: /* @__PURE__ */ jsx7(CHECKED, {})
 };
 
 // src/components/ui/modal/modal.tsx
@@ -1734,10 +1866,95 @@ var InputCode = ({
     )) })
   ] });
 };
+
+// src/components/ui/gridCard/gridCard.tsx
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+var GridCard = ({
+  label,
+  icon,
+  isActive = false,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsxs18(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: `
+        uiklu-flex uiklu-flex-col uiklu-items-center uiklu-justify-center
+        uiklu-w-[70px] uiklu-h-[70px] uiklu-p-[10px_8px_10px_8px] uiklu-rounded-xl
+        uiklu-border uiklu-border-solid uiklu-transition-all uiklu-duration-200 uiklu-cursor-pointer
+        uiklu-font-sans
+        ${isActive ? "uiklu-bg-primaryactive uiklu-border-primaryborderactive " : "uiklu-bg-gray50 uiklu-border-gray200 hover:uiklu-bg-gray200/40"}
+      `,
+      children: [
+        /* @__PURE__ */ jsx21("div", { className: `
+        uiklu-flex uiklu-items-center uiklu-justify-center uiklu-mb-[10px] uiklu-h-[24px] uiklu-w-full
+        ${isActive ? "uiklu-text-primary400" : "uiklu-text-gray500"}
+      `, children: icon }),
+        /* @__PURE__ */ jsx21("span", { className: `uiklu-text-[9.5px] uiklu-text-center uiklu-w-full uiklu-font-medium
+        ${isActive ? "uiklu-text-primary600" : "uiklu-text-gray700"}
+      `, children: label })
+      ]
+    }
+  );
+};
+
+// src/components/ui/checkBox/checkBox.tsx
+import { useId, useState as useState7 } from "react";
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+var Checkbox = ({
+  id,
+  label = "Guardar como servicio recurrente",
+  defaultChecked,
+  checked: controlledChecked,
+  onChange,
+  ...props
+}) => {
+  const uniqueId = id || useId();
+  const isControlled = controlledChecked !== void 0;
+  const [internalChecked, setInternalChecked] = useState7(defaultChecked || false);
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+  const handleCheckboxChange = (e) => {
+    const nextChecked = e.target.checked;
+    if (!isControlled) {
+      setInternalChecked(nextChecked);
+    }
+    if (onChange) {
+      onChange(nextChecked);
+    }
+  };
+  return /* @__PURE__ */ jsxs19("div", { className: "uiklu-flex uiklu-items-center uiklu-gap-3 uiklu-p-[10px] \n    uiklu-bg-primarylight uiklu-border uiklu-border-primary50 \n    uiklu-rounded-[4px] uiklu-max-w-md uiklu-font-sans uiklu-shadow-sm", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "uiklu-relative uiklu-flex uiklu-items-center", children: [
+      /* @__PURE__ */ jsx22(
+        "input",
+        {
+          ...props,
+          type: "checkbox",
+          id: uniqueId,
+          checked: isChecked,
+          onChange: handleCheckboxChange,
+          className: "uiklu-peer uiklu-appearance-none uiklu-w-5 uiklu-h-5 uiklu-border-2 \n            uiklu-border-gray300 uiklu-rounded uiklu-bg-basewhite \n            checked:uiklu-bg-primary checked:uiklu-border-primary \n            focus-visible:uiklu-ring-2 focus-visible:uiklu-ring-primary300 \n            focus-visible:uiklu-ring-offset-2 uiklu-outline-none \n            uiklu-transition-all uiklu-cursor-pointer"
+        }
+      ),
+      /* @__PURE__ */ jsx22("div", { className: "uiklu-absolute uiklu-inset-0 uiklu-flex uiklu-items-center \n          uiklu-justify-center uiklu-pointer-events-none \n          uiklu-opacity-0 peer-checked:uiklu-opacity-100 uiklu-transition-opacity \n          uiklu-text-white uiklu-ml-[1px]\n          [&>svg]:uiklu-w-3 [&>svg]:uiklu-h-3", children: Icons.CHECKED })
+    ] }),
+    /* @__PURE__ */ jsx22(
+      "label",
+      {
+        htmlFor: uniqueId,
+        className: "uiklu-text-[10px] uiklu-text-gray700 uiklu-font-medium uiklu-cursor-pointer uiklu-select-none",
+        children: label
+      }
+    )
+  ] });
+};
 export {
   BackButton,
   BalanceInfo,
   Button,
+  Checkbox,
+  GridCard,
   Icons,
   Input,
   InputCode,