@klu_dev/ui-klu-green 1.2.27 → 1.2.29

package/dist/index.css

@@ -136,8 +136,8 @@
     --uiklu-orange-300: 36 95% 66%;
     --uiklu-accent: 45 100% 50%;
     --uiklu-accent-foreground: 0 0% 0%;
-    --uiklu-muted: 210 40% 96%;
-    --uiklu-muted-foreground: 215 20% 40%;
+    --uiklu-muted: 240 5% 96%;
+    --uiklu-muted-foreground: 240 4% 46%;
     --uiklu-destructive: 0 72% 51%;
     --uiklu-destructive-foreground: 0 0% 100%;
     --uiklu-border: 214.3 31.8% 91.4%;
@@ -518,6 +518,14 @@ button,
 .uiklu-hidden{
     display: none;
 
+}
+.uiklu-aspect-square{
+    aspect-ratio: 1 / 1;
+
+}
+.uiklu-h-10{
+    height: 2.5rem;
+
 }
 .uiklu-h-12{
     height: 3rem;
@@ -546,10 +554,18 @@ button,
 .uiklu-h-6{
     height: 1.5rem;
 
+}
+.uiklu-h-7{
+    height: 1.75rem;
+
 }
 .uiklu-h-8{
     height: 2rem;
 
+}
+.uiklu-h-\[100\%\]{
+    height: 100%;
+
 }
 .uiklu-h-\[100px\]{
     height: 100px;
@@ -586,6 +602,10 @@ button,
 .uiklu-h-\[30px\]{
     height: 30px;
 
+}
+.uiklu-h-\[32px\]{
+    height: 32px;
+
 }
 .uiklu-h-\[34px\]{
     height: 34px;
@@ -626,6 +646,10 @@ button,
 .uiklu-h-\[60px\]{
     height: 60px;
 
+}
+.uiklu-h-\[62\%\]{
+    height: 62%;
+
 }
 .uiklu-h-\[6px\]{
     height: 6px;
@@ -686,10 +710,22 @@ button,
 .uiklu-min-h-\[500px\]{
     min-height: 500px;
 
+}
+.uiklu-min-h-\[600px\]{
+    min-height: 600px;
+
 }
 .uiklu-min-h-screen{
     min-height: 100vh;
 
+}
+.\!uiklu-w-\[218px\]{
+    width: 218px !important;
+
+}
+.uiklu-w-10{
+    width: 2.5rem;
+
 }
 .uiklu-w-12{
     width: 3rem;
@@ -714,6 +750,10 @@ button,
 .uiklu-w-6{
     width: 1.5rem;
 
+}
+.uiklu-w-7{
+    width: 1.75rem;
+
 }
 .uiklu-w-8{
     width: 2rem;
@@ -722,6 +762,14 @@ button,
 .uiklu-w-9{
     width: 2.25rem;
 
+}
+.uiklu-w-\[100\%\]{
+    width: 100%;
+
+}
+.uiklu-w-\[100px\]{
+    width: 100px;
+
 }
 .uiklu-w-\[140px\]{
     width: 140px;
@@ -786,6 +834,10 @@ button,
 .uiklu-w-\[317px\]{
     width: 317px;
 
+}
+.uiklu-w-\[32px\]{
+    width: 32px;
+
 }
 .uiklu-w-\[350px\]{
     width: 350px;
@@ -834,6 +886,10 @@ button,
 .uiklu-w-\[600px\]{
     width: 600px;
 
+}
+.uiklu-w-\[62\%\]{
+    width: 62%;
+
 }
 .uiklu-w-\[70px\]{
     width: 70px;
@@ -846,6 +902,10 @@ button,
 .uiklu-w-\[80px\]{
     width: 80px;
 
+}
+.uiklu-w-\[calc\(100\%-32px\)\]{
+    width: calc(100% - 32px);
+
 }
 .uiklu-w-\[var\(--radix-select-trigger-width\)\]{
     width: var(--radix-select-trigger-width);
@@ -919,6 +979,10 @@ button,
 .uiklu-min-w-\[var\(--radix-select-trigger-width\)\]{
     min-width: var(--radix-select-trigger-width);
 
+}
+.\!uiklu-max-w-\[586px\]{
+    max-width: 586px !important;
+
 }
 .uiklu-max-w-\[141px\]{
     max-width: 141px;
@@ -991,6 +1055,10 @@ button,
 .uiklu-max-w-md{
     max-width: 28rem;
 
+}
+.uiklu-max-w-xs{
+    max-width: 20rem;
+
 }
 .uiklu-flex-1{
     flex: 1 1 0%;
@@ -1007,6 +1075,10 @@ button,
 .uiklu-flex-grow{
     flex-grow: 1;
 
+}
+.uiklu-border-collapse{
+    border-collapse: collapse;
+
 }
 .uiklu--translate-x-1\/2{
     --tw-translate-x: -50%;
@@ -1294,6 +1366,10 @@ button,
 .uiklu-rounded-2xl{
     border-radius: 1rem;
 
+}
+.uiklu-rounded-\[100px\]{
+    border-radius: 100px;
+
 }
 .uiklu-rounded-\[10px\]{
     border-radius: 10px;
@@ -1386,6 +1462,10 @@ button,
 .uiklu-border-t{
     border-top-width: 1px;
 
+}
+.uiklu-border-t-\[1px\]{
+    border-top-width: 1px;
+
 }
 .uiklu-border-solid{
     border-style: solid;
@@ -1525,6 +1605,16 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(6 55 45 / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-\[\#0C3D34\]{
+    --tw-bg-opacity: 1;
+    background-color: rgb(12 61 52 / var(--tw-bg-opacity, 1));
+
+}
+.uiklu-bg-\[\#3D8B7E\]{
+    --tw-bg-opacity: 1;
+    background-color: rgb(61 139 126 / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-\[\#E5F3F3\]{
     --tw-bg-opacity: 1;
@@ -1535,11 +1625,21 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(234 144 51 / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-\[\#F4F6F6\]{
+    --tw-bg-opacity: 1;
+    background-color: rgb(244 246 246 / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-\[\#FFF7ED\]{
     --tw-bg-opacity: 1;
     background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-\[\#f5f5f5\]{
+    --tw-bg-opacity: 1;
+    background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-background{
     --tw-bg-opacity: 1;
@@ -1567,6 +1667,10 @@ button,
 .uiklu-bg-black\/40{
     background-color: rgb(0 0 0 / 0.4);
 
+}
+.uiklu-bg-black\/50{
+    background-color: rgb(0 0 0 / 0.5);
+
 }
 .uiklu-bg-destructive{
     --tw-bg-opacity: 1;
@@ -1612,6 +1716,11 @@ button,
     --tw-bg-opacity: 1;
     background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
 
+}
+.uiklu-bg-muted{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-muted) / var(--tw-bg-opacity, 1));
+
 }
 .uiklu-bg-orange500{
     --tw-bg-opacity: 1;
@@ -1749,6 +1858,15 @@ button,
 .uiklu-bg-origin-border{
     background-origin: border-box;
 
+}
+.uiklu-fill-mutedForeground{
+    fill: hsl(var(--uiklu-muted-foreground) / 1);
+
+}
+.uiklu-object-contain{
+    -o-object-fit: contain;
+       object-fit: contain;
+
 }
 .uiklu-object-cover{
     -o-object-fit: cover;
@@ -1810,6 +1928,10 @@ button,
 .uiklu-p-\[16px\]{
     padding: 16px;
 
+}
+.uiklu-p-\[24px\]{
+    padding: 24px;
+
 }
 .uiklu-p-\[2px\]{
     padding: 2px;
@@ -1918,6 +2040,11 @@ button,
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
 
+}
+.uiklu-py-3\.5{
+    padding-top: 0.875rem;
+    padding-bottom: 0.875rem;
+
 }
 .uiklu-py-\[10px\]{
     padding-top: 10px;
@@ -1996,6 +2123,10 @@ button,
 .uiklu-pt-\[10px\]{
     padding-top: 10px;
 
+}
+.uiklu-pt-\[16px\]{
+    padding-top: 16px;
+
 }
 .uiklu-pt-\[20px\]{
     padding-top: 20px;
@@ -2024,6 +2155,10 @@ button,
 .uiklu-font-sans{
     font-family: 'Google Sans Flex', sans-serif;
 
+}
+.\!uiklu-text-\[16px\]{
+    font-size: 16px !important;
+
 }
 .uiklu-text-2xl{
     font-size: 16px;
@@ -2156,6 +2291,10 @@ button,
 .uiklu-uppercase{
     text-transform: uppercase;
 
+}
+.\!uiklu-leading-tight{
+    line-height: 1.25 !important;
+
 }
 .uiklu-leading-none{
     line-height: 1;
@@ -2176,6 +2315,10 @@ button,
 .uiklu-leading-tight{
     line-height: 1.25;
 
+}
+.\!uiklu-tracking-normal{
+    letter-spacing: 0em !important;
+
 }
 .uiklu-tracking-tight{
     letter-spacing: -0.025em;
@@ -2197,6 +2340,11 @@ button,
     --tw-text-opacity: 1 !important;
     color: hsl(var(--uiklu-destructive) / var(--tw-text-opacity, 1)) !important;
 
+}
+.uiklu-text-\[\#1A3A34\]{
+    --tw-text-opacity: 1;
+    color: rgb(26 58 52 / var(--tw-text-opacity, 1));
+
 }
 .uiklu-text-\[\#9A3412\]{
     --tw-text-opacity: 1;
@@ -2715,6 +2863,12 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
+.hover\:uiklu-bg-muted:hover{
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--uiklu-muted) / var(--tw-bg-opacity, 1));
+
+}
+
 .hover\:uiklu-bg-orange500\/90:hover{
     background-color: hsl(var(--uiklu-orange-500) / 0.9);
 
@@ -2992,6 +3146,14 @@ input.uiklu-flex:not(:placeholder-shown) {
     .md\:uiklu-min-h-\[262px\]{
         min-height: 262px;
 
+    }
+    .md\:uiklu-min-h-\[310px\]{
+        min-height: 310px;
+
+    }
+    .md\:\!uiklu-w-\[586px\]{
+        width: 586px !important;
+
     }
     .md\:uiklu-max-w-\[400px\]{
         max-width: 400px;

package/dist/index.d.ts

@@ -149,6 +149,7 @@ declare const Icons: {
     TICKET: react_jsx_runtime.JSX.Element;
     CASH: react_jsx_runtime.JSX.Element;
     CHEVRON_RIGHT: react_jsx_runtime.JSX.Element;
+    CHEVRON_LEFT: react_jsx_runtime.JSX.Element;
     CHEVRON_DOWN: react_jsx_runtime.JSX.Element;
     SHIELD_CHECK: react_jsx_runtime.JSX.Element;
     CLOSE: react_jsx_runtime.JSX.Element;
@@ -162,6 +163,7 @@ declare const Icons: {
     ARROW_DOWN: react_jsx_runtime.JSX.Element;
     KLU: react_jsx_runtime.JSX.Element;
     KLUWHITE: react_jsx_runtime.JSX.Element;
+    KLUDARK: react_jsx_runtime.JSX.Element;
     DESIGNEDFREEDOM: react_jsx_runtime.JSX.Element;
     GRAPHIC_TOP: react_jsx_runtime.JSX.Element;
     HOME: react_jsx_runtime.JSX.Element;
@@ -173,6 +175,7 @@ declare const Icons: {
     BOXES: react_jsx_runtime.JSX.Element;
     MENU: react_jsx_runtime.JSX.Element;
     CIRCLE_MOVEMENTS: react_jsx_runtime.JSX.Element;
+    REFRESH: react_jsx_runtime.JSX.Element;
     TELEPHONY: react_jsx_runtime.JSX.Element;
     MOBILITY: react_jsx_runtime.JSX.Element;
     HOMESERVICE: react_jsx_runtime.JSX.Element;
@@ -393,4 +396,25 @@ interface PlasticCardProps {
 }
 declare const PlasticCard: ({ isBlocked, last4, }: PlasticCardProps) => react_jsx_runtime.JSX.Element;
 
-export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, CorporateCard, DetailCard, type DetailCardItem, type DetailCardProps, GridCard, IconBadge, type IconBadgeProps, Icons, Input, InputCode, type LadaOption, LoadingScreen, MobileMenuDrawer, Modal, PhoneField, type PhoneFieldProps, PlasticCard, PromoBanner, SearchSelect, SearchSelectField, type SearchSelectFieldProps, Select, SelectContent, SelectField, type SelectFieldProps, SelectGroup, SelectItem, SelectValue, SidebarTabs, StatusCard, type StatusCardProps, type StatusCardSummaryItem, Switch, TextField, type TextFieldProps, ToastAction, Toaster, Typography, useToast };
+interface SecureModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    icon?: ReactNode;
+    message?: string;
+    mainActionButtonText?: string;
+    onMainAction: () => void;
+}
+declare const SecureModal: ({ open, onOpenChange, title, icon, message, mainActionButtonText, onMainAction, }: SecureModalProps) => react_jsx_runtime.JSX.Element;
+
+type BankAvatarSize = 'sm' | 'md' | 'lg' | 'responsive';
+interface BankAvatarProps {
+    bankName: string;
+    /**
+     * @default 'responsive'
+     */
+    size?: BankAvatarSize;
+}
+declare const BankAvatar: React.FC<BankAvatarProps>;
+
+export { BackButton, BalanceInfo, BankAvatar, type BankAvatarProps, Button, Checkbox, type CheckboxProps, CorporateCard, DetailCard, type DetailCardItem, type DetailCardProps, GridCard, IconBadge, type IconBadgeProps, Icons, Input, InputCode, type LadaOption, LoadingScreen, MobileMenuDrawer, Modal, PhoneField, type PhoneFieldProps, PlasticCard, PromoBanner, SearchSelect, SearchSelectField, type SearchSelectFieldProps, SecureModal, Select, SelectContent, SelectField, type SelectFieldProps, SelectGroup, SelectItem, SelectValue, SidebarTabs, StatusCard, type StatusCardProps, type StatusCardSummaryItem, Switch, TextField, type TextFieldProps, ToastAction, Toaster, Typography, useToast };

package/dist/index.js

@@ -82,6 +82,24 @@ var ChevronRightIcon = ({ className }) => /* @__PURE__ */ jsx(
     )
   }
 );
+var ChevronLeftIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    className,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M15.5307 18.9698C15.6004 19.0395 15.6557 19.1222 15.6934 19.2132C15.7311 19.3043 15.7505 19.4019 15.7505 19.5004C15.7505 19.599 15.7311 19.6965 15.6934 19.7876C15.6557 19.8786 15.6004 19.9614 15.5307 20.031C15.461 20.1007 15.3783 20.156 15.2873 20.1937C15.1962 20.2314 15.0986 20.2508 15.0001 20.2508C14.9016 20.2508 14.804 20.2314 14.7129 20.1937C14.6219 20.156 14.5392 20.1007 14.4695 20.031L6.96948 12.531C6.89974 12.4614 6.84443 12.3787 6.80668 12.2876C6.76894 12.1966 6.74951 12.099 6.74951 12.0004C6.74951 11.9019 6.76894 11.8043 6.80668 11.7132C6.84443 11.6222 6.89974 11.5394 6.96948 11.4698L14.4695 3.96979C14.6102 3.82906 14.8011 3.75 15.0001 3.75C15.1991 3.75 15.39 3.82906 15.5307 3.96979C15.6715 4.11052 15.7505 4.30139 15.7505 4.50042C15.7505 4.69944 15.6715 4.89031 15.5307 5.03104L8.56041 12.0004L15.5307 18.9698Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
 var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -148,6 +166,18 @@ var KluWhite = ({ className }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://w
   /* @__PURE__ */ jsx("path", { d: "M10.1804 11.6049L6.01451 5.60153C7.70118 4.00699 9.19091 2.1234 10.1804 0H7.86794C6.52274 2.35369 4.51843 4.46915 2.2346 5.95093V0H0V13.2375H2.23619V8.35544C2.96358 7.94886 3.66398 7.49623 4.32943 7.00231L8.53816 13.2391H11.3127L10.1788 11.6065L10.1804 11.6049Z", fill: "white" }),
   /* @__PURE__ */ jsx("path", { d: "M27.5089 13.2204C28.3325 13.2204 29.0002 12.5527 29.0002 11.7291C29.0002 10.9055 28.3325 10.2378 27.5089 10.2378C26.6853 10.2378 26.0176 10.9055 26.0176 11.7291C26.0176 12.5527 26.6853 13.2204 27.5089 13.2204Z", fill: "#FDA400" })
 ] });
+var KluDark = ({ className }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M15.4494 6.22902C15.4494 7.1874 14.7352 7.88838 13.8261 7.88838C12.9937 7.88838 12.2029 7.31335 12.2029 6.31335V2.43164H10.8064V6.46012C10.8064 7.47327 11.3716 8.35498 12.2029 8.80733C12.5797 9.01215 13.0003 9.12935 13.4713 9.12935C14.1405 9.12935 14.962 8.79309 15.4494 8.25969V9.12935H16.8459V2.43164H15.4494V6.22792V6.22902Z", fill: "#0B3C36" }),
+  /* @__PURE__ */ jsx("path", { d: "M8.21997 9.12925H9.61648V0H8.21997V9.12925Z", fill: "#0B3C36" }),
+  /* @__PURE__ */ jsx("path", { d: "M7.02089 8.00329L4.14791 3.86309C5.31112 2.76342 6.33851 1.4644 7.02089 0H5.42613C4.4984 1.62322 3.11613 3.08215 1.54109 4.10406V0H0V9.12925H1.54219V5.76233C2.04383 5.48193 2.52686 5.16978 2.98579 4.82914L5.88834 9.13035H7.80184L7.01979 8.00439L7.02089 8.00329Z", fill: "#0B3C36" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M18.9716 9.1175C19.5396 9.1175 20.0001 8.65704 20.0001 8.08903C20.0001 7.52101 19.5396 7.06055 18.9716 7.06055C18.4036 7.06055 17.9431 7.52101 17.9431 8.08903C17.9431 8.65704 18.4036 9.1175 18.9716 9.1175Z",
+      fill: "#FDA400"
+    }
+  )
+] });
 var MasterCard = ({ className }) => /* @__PURE__ */ jsxs(
   "svg",
   {
@@ -306,6 +336,43 @@ var MovementsIconCircle = ({ className }) => /* @__PURE__ */ jsxs(
     ]
   }
 );
+var Refresh = ({ className }) => /* @__PURE__ */ jsxs(
+  "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__ */ jsx(
+        "rect",
+        {
+          width: "24",
+          height: "24",
+          rx: "24",
+          fill: "var(--Paleta-Verde-Bosque-Oscuro-Key-Verde-Bosque-Oscuro-300, #49A6A4)"
+        }
+      ),
+      /* @__PURE__ */ jsx("g", { transform: "translate(4.2, 4.2) scale(0.975)", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5.5 6.49986H2.5C2.36739 6.49986 2.24021 6.44719 2.14645 6.35342C2.05268 6.25965 2 6.13247 2 5.99986V2.99986C2 2.86726 2.05268 2.74008 2.14645 2.64631C2.24021 2.55254 2.36739 2.49986 2.5 2.49986C2.63261 2.49986 2.75979 2.55254 2.85355 2.64631C2.94732 2.74008 3 2.86726 3 2.99986V4.79299L3.91438 3.87861C5.02951 2.75787 6.544 2.12573 8.125 2.12111H8.15812C9.72568 2.11708 11.2317 2.73076 12.35 3.82924C12.4413 3.92265 12.4924 4.04809 12.4924 4.17872C12.4925 4.30934 12.4413 4.43479 12.35 4.52821C12.2587 4.62163 12.1345 4.67562 12.0039 4.67861C11.8733 4.68161 11.7467 4.63338 11.6512 4.54424C10.7191 3.62929 9.46427 3.11805 8.15812 3.12111H8.13C6.81261 3.12517 5.55067 3.65184 4.62125 4.58549L3.70688 5.49986H5.5C5.63261 5.49986 5.75979 5.55254 5.85355 5.64631C5.94732 5.74008 6 5.86726 6 5.99986C6 6.13247 5.94732 6.25965 5.85355 6.35342C5.75979 6.44719 5.63261 6.49986 5.5 6.49986ZM13.5 9.49986H10.5C10.3674 9.49986 10.2402 9.55254 10.1464 9.64631C10.0527 9.74008 10 9.86726 10 9.99986C10 10.1325 10.0527 10.2597 10.1464 10.3534C10.2402 10.4472 10.3674 10.4999 10.5 10.4999H12.2931L11.3787 11.4142C10.4495 12.3477 9.1878 12.8744 7.87063 12.8786H7.8425C6.53636 12.8817 5.28151 12.3704 4.34937 11.4555C4.3028 11.4078 4.24718 11.37 4.18578 11.3441C4.12437 11.3183 4.05842 11.305 3.99179 11.305C3.92517 11.305 3.85922 11.3183 3.79781 11.3442C3.73641 11.37 3.68079 11.4079 3.63423 11.4555C3.58766 11.5032 3.55109 11.5597 3.52665 11.6216C3.50222 11.6836 3.49042 11.7499 3.49195 11.8165C3.49348 11.8831 3.5083 11.9487 3.53555 12.0095C3.5628 12.0703 3.60192 12.125 3.65062 12.1705C4.76892 13.269 6.27495 13.8827 7.8425 13.8786H7.875C9.45579 13.8738 10.97 13.2417 12.085 12.1211L13 11.2067V12.9999C13 13.1325 13.0527 13.2597 13.1464 13.3534C13.2402 13.4472 13.3674 13.4999 13.5 13.4999C13.6326 13.4999 13.7598 13.4472 13.8536 13.3534C13.9473 13.2597 14 13.1325 14 12.9999V9.99986C14 9.86726 13.9473 9.74008 13.8536 9.64631C13.7598 9.55254 13.6326 9.49986 13.5 9.49986Z",
+          fill: "white"
+        }
+      ) })
+    ]
+  }
+);
 var Telephony = ({ className }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -1037,6 +1104,7 @@ var Icons = {
   TICKET: /* @__PURE__ */ jsx(TicketIcon, {}),
   CASH: /* @__PURE__ */ jsx(CashIcon, {}),
   CHEVRON_RIGHT: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+  CHEVRON_LEFT: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
   CHEVRON_DOWN: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
   SHIELD_CHECK: /* @__PURE__ */ jsx(ShieldCheckIcon, {}),
   CLOSE: /* @__PURE__ */ jsx(CloseIcon, {}),
@@ -1050,6 +1118,7 @@ var Icons = {
   ARROW_DOWN: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
   KLU: /* @__PURE__ */ jsx(KluIcon, {}),
   KLUWHITE: /* @__PURE__ */ jsx(KluWhite, {}),
+  KLUDARK: /* @__PURE__ */ jsx(KluDark, {}),
   DESIGNEDFREEDOM: /* @__PURE__ */ jsx(DesignedFreedom, {}),
   GRAPHIC_TOP: /* @__PURE__ */ jsx(GraphicTop, {}),
   HOME: /* @__PURE__ */ jsx(HomeIcon, {}),
@@ -1061,6 +1130,7 @@ var Icons = {
   BOXES: /* @__PURE__ */ jsx(BoxesIcon, {}),
   MENU: /* @__PURE__ */ jsx(IconMenu, {}),
   CIRCLE_MOVEMENTS: /* @__PURE__ */ jsx(MovementsIconCircle, {}),
+  REFRESH: /* @__PURE__ */ jsx(Refresh, {}),
   TELEPHONY: /* @__PURE__ */ jsx(Telephony, {}),
   MOBILITY: /* @__PURE__ */ jsx(Mobility, {}),
   HOMESERVICE: /* @__PURE__ */ jsx(Home, {}),
@@ -1455,7 +1525,7 @@ var SelectItem = React4.forwardRef(({ className, children, ...props }, ref) => /
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-// src/components/ui/typography/typography.tsx
+// src/components/ui/stories/Foundations/typography/typography.tsx
 import * as React5 from "react";
 import { cva as cva3 } from "class-variance-authority";
 import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -3934,9 +4004,116 @@ var StatusCard = ({
     ] })
   ] });
 };
+
+// src/assets/images/sesion.png
+var sesion_default = "./sesion-Y4GRW2FA.png";
+
+// src/components/ui/secureModal/secureModal.tsx
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+var SecureModal = ({
+  open,
+  onOpenChange,
+  title = "Sesi\xF3n expirada",
+  icon = Icons.REFRESH,
+  message = "Tu sesi\xF3n ha expirado por inactividad. Inicia sesi\xF3n nuevamente para continuar.",
+  mainActionButtonText = "Iniciar sesi\xF3n",
+  onMainAction
+}) => {
+  return /* @__PURE__ */ jsxs28(Dialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx33(DialogOverlay, { className: "uiklu-bg-black/50 uiklu-backdrop-blur-sm uiklu-fixed uiklu-inset-0 uiklu-z-50" }),
+    /* @__PURE__ */ jsxs28(DialogContent, { className: "uiklu-fixed uiklu-top-[50%] uiklu-left-[50%] uiklu-translate-x-[-50%] \n        uiklu-translate-y-[-50%] uiklu-z-50 uiklu-bg-white uiklu-rounded-[16px] uiklu-p-[24px] uiklu-shadow-lg \n        uiklu-outline-none uiklu-box-border uiklu-font-sans \n        uiklu-w-[calc(100%-32px)] !uiklu-max-w-[586px] md:!uiklu-w-[586px] \n        uiklu-h-auto md:uiklu-min-h-[310px] \n        uiklu-flex uiklu-flex-col uiklu-justify-between uiklu-gap-[20px]", children: [
+      /* @__PURE__ */ jsxs28("div", { className: "uiklu-w-full", children: [
+        /* @__PURE__ */ jsx33("div", { className: "uiklu-flex uiklu-items-center uiklu-justify-between uiklu-mb-[10px]", children: /* @__PURE__ */ jsxs28("div", { className: "uiklu-flex uiklu-items-center uiklu-gap-[10px]", children: [
+          icon && /* @__PURE__ */ jsx33("div", { className: "uiklu-shrink-0 uiklu-w-7 uiklu-h-7 uiklu-flex uiklu-items-center \n                uiklu-justify-center", children: icon }),
+          /* @__PURE__ */ jsx33(DialogTitle, { className: "uiklu-text-primary900 !uiklu-text-[16px] uiklu-font-bold\n              !uiklu-leading-tight !uiklu-tracking-normal ", children: title })
+        ] }) }),
+        /* @__PURE__ */ jsx33("div", { className: "uiklu-border-t-[1px] uiklu-border-gray300 uiklu-pt-[16px]", children: /* @__PURE__ */ jsx33("p", { className: "uiklu-text-gray700 uiklu-text-[14px] uiklu-leading-relaxed uiklu-m-0", children: message }) })
+      ] }),
+      /* @__PURE__ */ jsx33("div", { className: "uiklu-w-full uiklu-flex uiklu-justify-center uiklu-items-center", children: /* @__PURE__ */ jsx33(
+        "img",
+        {
+          src: sesion_default,
+          alt: "Sesi\xF3n Expirada",
+          className: "uiklu-w-[100px] uiklu-h-[100px] uiklu-object-contain"
+        }
+      ) }),
+      /* @__PURE__ */ jsx33("div", { className: "uiklu-w-full uiklu-flex uiklu-justify-center", children: /* @__PURE__ */ jsx33(
+        Button,
+        {
+          onClick: onMainAction,
+          variant: "primary",
+          className: "uiklu-bg-[#0C3D34] uiklu-text-white uiklu-text-[16px] uiklu-font-medium \n              uiklu-rounded-[100px] !uiklu-w-[218px] uiklu-py-3.5 uiklu-hover:opacity-90",
+          children: mainActionButtonText
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// src/components/ui/bankAvatar/bankAvatar.tsx
+import * as React20 from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var sizeMap2 = {
+  sm: {
+    container: "uiklu-w-[24px] uiklu-h-[24px]",
+    logoClass: "uiklu-w-[14px] uiklu-h-[14px]"
+  },
+  md: {
+    container: "uiklu-w-[32px] uiklu-h-[32px]",
+    logoClass: "uiklu-w-[20px] uiklu-h-[20px]"
+  },
+  lg: {
+    container: "uiklu-w-[40px] uiklu-h-[40px]",
+    logoClass: "uiklu-w-[26px] uiklu-h-[26px]"
+  },
+  responsive: {
+    container: "uiklu-w-full uiklu-h-full uiklu-aspect-square",
+    logoClass: "uiklu-w-[62%] uiklu-h-[62%]"
+  }
+};
+var BankAvatar = ({
+  bankName,
+  size = "responsive"
+}) => {
+  const currentSize = sizeMap2[size];
+  const cleanName = bankName.trim().toUpperCase();
+  const isKlu = cleanName === "KLU";
+  const getInitials = (name) => {
+    if (!name) return "";
+    return name.replace(/\s+/g, "").substring(0, 2).toUpperCase();
+  };
+  return /* @__PURE__ */ jsx34("div", { className: `uiklu-flex uiklu-items-center uiklu-justify-center uiklu-rounded-full 
+        uiklu-bg-appearance-muted uiklu-bg-muted uiklu-leading-none 
+        uiklu-select-none uiklu-overflow-hidden ${currentSize.container}`, children: isKlu ? React20.cloneElement(Icons.KLUDARK, {
+    className: `uiklu-block uiklu-object-contain ${Icons.KLU.props.className || ""} ${currentSize.logoClass}`.trim()
+  }) : /* @__PURE__ */ jsx34(
+    "svg",
+    {
+      viewBox: "0 0 100 100",
+      className: "uiklu-w-[100%] uiklu-h-[100%] uiklu-block",
+      children: /* @__PURE__ */ jsx34(
+        "text",
+        {
+          x: "50%",
+          y: "52%",
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          fontSize: "45",
+          fontWeight: "400",
+          fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+          className: "uiklu-fill-mutedForeground",
+          fill: "currentColor",
+          style: { color: "var(--muted-foreground, #71717A)" },
+          children: getInitials(bankName)
+        }
+      )
+    }
+  ) });
+};
 export {
   BackButton,
   BalanceInfo,
+  BankAvatar,
   Button,
   Checkbox,
   CorporateCard,
@@ -3954,6 +4131,7 @@ export {
   PromoBanner,
   SearchSelect,
   SearchSelectField,
+  SecureModal,
   Select,
   SelectContent2 as SelectContent,
   SelectField,