@khipu/design-system 0.3.5-alpha.29 → 0.3.5-alpha.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -70,7 +70,7 @@ function formatTime(iso) {
70
70
  }
71
71
 
72
72
  // src/version.ts
73
- var KDS_VERSION = "0.3.5-alpha.29";
73
+ var KDS_VERSION = "0.3.5-alpha.30";
74
74
 
75
75
  // src/theme/KdsThemeProvider.tsx
76
76
  import { jsx } from "react/jsx-runtime";
@@ -2416,11 +2416,34 @@ var KdsInvoiceSticky = forwardRef36(
2416
2416
  );
2417
2417
  KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
2418
2418
 
2419
- // src/components/domain/KdsBottomSheet/KdsBottomSheet.tsx
2419
+ // src/components/domain/KdsInvoiceHeaderSkeleton/KdsInvoiceHeaderSkeleton.tsx
2420
2420
  import { forwardRef as forwardRef37 } from "react";
2421
- import * as Dialog2 from "@radix-ui/react-dialog";
2422
2421
  import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
2423
- var KdsBottomSheet = forwardRef37(
2422
+ var Line = () => /* @__PURE__ */ jsx39("span", { className: "kds-skeleton kds-skeleton--text" });
2423
+ var KdsInvoiceHeaderSkeleton = forwardRef37(
2424
+ ({ className, ...props }, ref) => /* @__PURE__ */ jsxs28(KdsInvoiceSticky, { ref, className: clsx("kds-invoice-skeleton", className), "aria-hidden": "true", ...props, children: [
2425
+ /* @__PURE__ */ jsxs28("header", { className: "kds-invoice-header", children: [
2426
+ /* @__PURE__ */ jsxs28("div", { children: [
2427
+ /* @__PURE__ */ jsx39("p", { className: "kds-invoice-amount", children: /* @__PURE__ */ jsx39(Line, {}) }),
2428
+ /* @__PURE__ */ jsx39("p", { className: "kds-invoice-code", children: /* @__PURE__ */ jsx39(Line, {}) })
2429
+ ] }),
2430
+ /* @__PURE__ */ jsx39("div", { className: "kds-invoice-merchant kds-skeleton" })
2431
+ ] }),
2432
+ /* @__PURE__ */ jsx39("div", { className: "kds-invoice-collapsible", children: /* @__PURE__ */ jsx39("div", { className: "kds-invoice-summary", children: /* @__PURE__ */ jsxs28("dl", { className: "kds-kv", children: [
2433
+ /* @__PURE__ */ jsx39("dt", { children: /* @__PURE__ */ jsx39(Line, {}) }),
2434
+ /* @__PURE__ */ jsx39("dd", { children: /* @__PURE__ */ jsx39(Line, {}) }),
2435
+ /* @__PURE__ */ jsx39("dt", { children: /* @__PURE__ */ jsx39(Line, {}) }),
2436
+ /* @__PURE__ */ jsx39("dd", { children: /* @__PURE__ */ jsx39(Line, {}) })
2437
+ ] }) }) })
2438
+ ] })
2439
+ );
2440
+ KdsInvoiceHeaderSkeleton.displayName = "KdsInvoiceHeaderSkeleton";
2441
+
2442
+ // src/components/domain/KdsBottomSheet/KdsBottomSheet.tsx
2443
+ import { forwardRef as forwardRef38 } from "react";
2444
+ import * as Dialog2 from "@radix-ui/react-dialog";
2445
+ import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
2446
+ var KdsBottomSheet = forwardRef38(
2424
2447
  ({
2425
2448
  open,
2426
2449
  onClose,
@@ -2434,14 +2457,14 @@ var KdsBottomSheet = forwardRef37(
2434
2457
  className,
2435
2458
  size = "auto",
2436
2459
  ...props
2437
- }, ref) => /* @__PURE__ */ jsx39(
2460
+ }, ref) => /* @__PURE__ */ jsx40(
2438
2461
  Dialog2.Root,
2439
2462
  {
2440
2463
  open,
2441
2464
  onOpenChange: (o) => {
2442
2465
  if (!o) onClose();
2443
2466
  },
2444
- children: /* @__PURE__ */ jsx39(Dialog2.Portal, { container, children: /* @__PURE__ */ jsx39("div", { className: "kds-theme-root", style: { display: "contents" }, children: /* @__PURE__ */ jsx39(Dialog2.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ jsxs28(
2467
+ children: /* @__PURE__ */ jsx40(Dialog2.Portal, { container, children: /* @__PURE__ */ jsx40("div", { className: "kds-theme-root", style: { display: "contents" }, children: /* @__PURE__ */ jsx40(Dialog2.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ jsxs29(
2445
2468
  Dialog2.Content,
2446
2469
  {
2447
2470
  ref,
@@ -2452,20 +2475,20 @@ var KdsBottomSheet = forwardRef37(
2452
2475
  },
2453
2476
  ...props,
2454
2477
  children: [
2455
- showGrabber && /* @__PURE__ */ jsx39("div", { className: "kds-bottom-sheet-grabber", "aria-hidden": "true" }),
2456
- showCloseButton && /* @__PURE__ */ jsx39(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx39(
2478
+ showGrabber && /* @__PURE__ */ jsx40("div", { className: "kds-bottom-sheet-grabber", "aria-hidden": "true" }),
2479
+ showCloseButton && /* @__PURE__ */ jsx40(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx40(
2457
2480
  "button",
2458
2481
  {
2459
2482
  type: "button",
2460
2483
  className: "kds-bottom-sheet-close",
2461
2484
  "aria-label": "Cerrar",
2462
- children: /* @__PURE__ */ jsx39("i", { className: "material-symbols-outlined", children: "close" })
2485
+ children: /* @__PURE__ */ jsx40("i", { className: "material-symbols-outlined", children: "close" })
2463
2486
  }
2464
2487
  ) }),
2465
- title && /* @__PURE__ */ jsx39(Dialog2.Title, { className: "kds-bottom-sheet-title", children: title }),
2466
- description && /* @__PURE__ */ jsx39(Dialog2.Description, { className: "kds-bottom-sheet-description", children: description }),
2467
- /* @__PURE__ */ jsx39("div", { className: "kds-bottom-sheet-body", children }),
2468
- actions && /* @__PURE__ */ jsx39("div", { className: "kds-bottom-sheet-actions", children: actions })
2488
+ title && /* @__PURE__ */ jsx40(Dialog2.Title, { className: "kds-bottom-sheet-title", children: title }),
2489
+ description && /* @__PURE__ */ jsx40(Dialog2.Description, { className: "kds-bottom-sheet-description", children: description }),
2490
+ /* @__PURE__ */ jsx40("div", { className: "kds-bottom-sheet-body", children }),
2491
+ actions && /* @__PURE__ */ jsx40("div", { className: "kds-bottom-sheet-actions", children: actions })
2469
2492
  ]
2470
2493
  }
2471
2494
  ) }) }) })
@@ -2475,13 +2498,13 @@ var KdsBottomSheet = forwardRef37(
2475
2498
  KdsBottomSheet.displayName = "KdsBottomSheet";
2476
2499
 
2477
2500
  // src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
2478
- import { forwardRef as forwardRef39 } from "react";
2501
+ import { forwardRef as forwardRef40 } from "react";
2479
2502
 
2480
2503
  // src/components/domain/KdsSecureFooter/KhipuWordmark.tsx
2481
- import { forwardRef as forwardRef38 } from "react";
2482
- import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
2483
- var KhipuWordmark = forwardRef38(
2484
- ({ className = "khipu-mark", ...props }, ref) => /* @__PURE__ */ jsxs29(
2504
+ import { forwardRef as forwardRef39 } from "react";
2505
+ import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
2506
+ var KhipuWordmark = forwardRef39(
2507
+ ({ className = "khipu-mark", ...props }, ref) => /* @__PURE__ */ jsxs30(
2485
2508
  "svg",
2486
2509
  {
2487
2510
  ref,
@@ -2492,14 +2515,14 @@ var KhipuWordmark = forwardRef38(
2492
2515
  xmlns: "http://www.w3.org/2000/svg",
2493
2516
  ...props,
2494
2517
  children: [
2495
- /* @__PURE__ */ jsx40("path", { d: "M16.6417 11.8339C16.7273 11.9196 16.8272 11.9624 16.9472 11.9624H18.9628C19.0798 11.9624 19.1826 11.9196 19.2682 11.8339C19.3539 11.7483 19.3967 11.6483 19.3967 11.5284V7.12891C19.3967 6.50081 19.3111 5.95551 19.1398 5.49586C18.9685 5.03621 18.7315 4.65937 18.4289 4.3596C18.1234 4.05983 17.758 3.83999 17.3326 3.69439C16.9043 3.55164 16.4361 3.47741 15.9251 3.47741C15.4226 3.47741 14.9801 3.58019 14.5975 3.7886C14.2121 3.99702 13.9295 4.214 13.7496 4.43668V1.03071C13.7496 0.913654 13.7068 0.810874 13.6211 0.728079C13.5355 0.642434 13.4355 0.599609 13.3185 0.599609H11.2943C11.1773 0.599609 11.0745 0.642434 10.9888 0.728079C10.9032 0.813729 10.8604 0.913654 10.8604 1.03071V11.5284C10.8604 11.6455 10.9032 11.7483 10.9888 11.8339C11.0745 11.9196 11.1744 11.9624 11.2943 11.9624H13.3099C13.427 11.9624 13.5298 11.9196 13.6126 11.8339C13.6982 11.7483 13.741 11.6483 13.741 11.5284V7.48006C13.741 7.02041 13.8495 6.65216 14.0693 6.37521C14.2892 6.09826 14.6375 5.95836 15.1171 5.95836C15.5968 5.95836 15.9479 6.09826 16.1735 6.37521C16.3961 6.65216 16.5103 7.02041 16.5103 7.48006V11.5284C16.5132 11.6483 16.556 11.7483 16.6417 11.8339Z", fill: "#8347AD" }),
2496
- /* @__PURE__ */ jsx40("path", { d: "M23.6189 3.64014H21.6005C21.4834 3.64014 21.3806 3.68296 21.295 3.76861C21.2093 3.85426 21.1665 3.95418 21.1665 4.07124V11.5284C21.1665 11.6454 21.2093 11.7482 21.295 11.8339C21.3806 11.9195 21.4806 11.9623 21.6005 11.9623H23.6161C23.7331 11.9623 23.8359 11.9195 23.9187 11.8339C24.0044 11.7482 24.0472 11.6483 24.0472 11.5284V4.07124C24.0472 3.95418 24.0044 3.85141 23.9187 3.76861C23.8359 3.68296 23.736 3.64014 23.6189 3.64014Z", fill: "#8347AD" }),
2497
- /* @__PURE__ */ jsx40("path", { d: "M34.1881 10.0723C34.3851 9.61264 34.4936 9.07019 34.5164 8.43924C34.5278 8.27934 34.5335 8.06239 34.5335 7.79114C34.5335 7.51994 34.5278 7.30294 34.5164 7.14309C34.4936 6.51499 34.3851 5.96969 34.1881 5.51004C33.9911 5.05039 33.7313 4.67068 33.4115 4.36519C33.0918 4.05971 32.7178 3.83702 32.2924 3.69427C31.8642 3.55152 31.4131 3.47729 30.9334 3.47729C30.5823 3.47729 30.2854 3.50584 30.0455 3.5658C29.8057 3.62575 29.603 3.69998 29.4374 3.78848C29.2718 3.87984 29.1348 3.98263 29.0206 4.09968C28.9093 4.21674 28.8036 4.32808 28.7094 4.43657V4.06828C28.7094 3.95122 28.6666 3.84844 28.5809 3.7628C28.4953 3.67715 28.3954 3.63432 28.2783 3.63432H26.3426C26.2256 3.63432 26.1228 3.67715 26.0372 3.7628C25.9515 3.84844 25.9087 3.94837 25.9087 4.06828V14.566C25.9087 14.683 25.9515 14.7858 26.0372 14.8715C26.1228 14.9571 26.2227 14.9999 26.3426 14.9999H28.3583C28.4753 14.9999 28.5781 14.9571 28.6637 14.8715C28.7494 14.7858 28.7922 14.6859 28.7922 14.566V11.1629C28.8664 11.2599 28.9635 11.3627 29.0806 11.474C29.1976 11.5854 29.3432 11.691 29.5117 11.7852C29.683 11.8823 29.8857 11.9622 30.1198 12.0251C30.3539 12.0879 30.6251 12.1221 30.9363 12.1221C31.4159 12.1221 31.8699 12.0479 32.2953 11.8994C32.7206 11.751 33.0946 11.5226 33.4144 11.22C33.7313 10.9145 33.9911 10.5319 34.1881 10.0723ZM31.65 8.24794C31.6186 8.62194 31.4959 8.94739 31.2817 9.22434C31.0676 9.50129 30.7107 9.64119 30.2083 9.64119C29.9742 9.64119 29.7715 9.60404 29.6002 9.52984C29.4289 9.45559 29.289 9.35569 29.1748 9.23289C29.0634 9.11014 28.9749 8.97309 28.9121 8.82464C28.8493 8.67619 28.8065 8.52204 28.7836 8.35929C28.7608 8.19939 28.7522 8.01384 28.7522 7.79974C28.7522 7.58559 28.7637 7.40004 28.7836 7.24014C28.8036 7.08029 28.8465 6.92609 28.9121 6.77479C28.9749 6.62634 29.0634 6.48929 29.1748 6.36654C29.2861 6.24374 29.4289 6.14384 29.6002 6.06959C29.7715 5.99539 29.9742 5.95824 30.2083 5.95824C30.7107 5.95824 31.0676 6.09814 31.2817 6.37509C31.4959 6.65204 31.6186 6.97749 31.65 7.35149C31.6843 7.65124 31.6843 7.95104 31.65 8.24794Z", fill: "#8347AD" }),
2498
- /* @__PURE__ */ jsx40("path", { d: "M41.7481 11.8339C41.8337 11.9195 41.9337 11.9623 42.0536 11.9623H43.9093C44.0264 11.9623 44.1291 11.9195 44.2119 11.8339C44.2976 11.7482 44.3404 11.6483 44.3404 11.5284V4.07124C44.3404 3.95418 44.2976 3.85141 44.2119 3.76861C44.1263 3.68296 44.0264 3.64014 43.9093 3.64014H41.8937C41.7766 3.64014 41.6739 3.68296 41.5882 3.76861C41.5026 3.85426 41.4597 3.95418 41.4597 4.07124V8.1196C41.4597 8.57925 41.3598 8.94755 41.1628 9.22445C40.9658 9.5014 40.6318 9.6413 40.1636 9.6413C39.6954 9.6413 39.3585 9.5014 39.1558 9.22445C38.9531 8.94755 38.8503 8.57925 38.8503 8.1196V4.07124C38.8503 3.95418 38.8075 3.85141 38.7218 3.76861C38.6362 3.68296 38.5363 3.64014 38.4163 3.64014H36.4007C36.2837 3.64014 36.1809 3.68296 36.0953 3.76861C36.0096 3.85426 35.9668 3.95418 35.9668 4.07124V8.47075C35.9668 9.7298 36.2723 10.6519 36.8861 11.24C37.4999 11.8282 38.325 12.1194 39.3585 12.1194C39.6897 12.1194 39.9752 12.0908 40.215 12.0309C40.4548 11.9709 40.6661 11.8967 40.8459 11.8082C41.0286 11.7168 41.18 11.6169 41.3027 11.5027C41.4255 11.3914 41.5283 11.2772 41.6139 11.1601V11.5284C41.6196 11.6483 41.6624 11.7482 41.7481 11.8339Z", fill: "#8347AD" }),
2499
- /* @__PURE__ */ jsx40("path", { d: "M22.5569 2.78074C21.7889 2.78074 21.1665 2.1555 21.1665 1.39037C21.1665 0.622385 21.7918 0 22.5569 0C23.3249 0 23.9473 0.62524 23.9473 1.39037C23.9501 2.1555 23.3249 2.78074 22.5569 2.78074Z", fill: "#3CB4E5" }),
2500
- /* @__PURE__ */ jsx40("path", { d: "M3.1374 7.43996V4.78198L2.34372 5.77836C2.22095 5.93256 2.21524 6.14951 2.32944 6.31226L3.1374 7.43996Z", fill: "#743CEB" }),
2501
- /* @__PURE__ */ jsx40("path", { d: "M2.96345 0.722369C2.88351 0.642434 2.78074 0.599609 2.66368 0.599609H0.40826C0.299771 0.599609 0.205557 0.639579 0.122763 0.722369C0.0428246 0.802309 0 0.905089 0 1.02214V11.557C0 11.6655 0.0399696 11.7597 0.122763 11.8425C0.202703 11.9224 0.299771 11.9652 0.40826 11.9652H2.66368C2.78359 11.9652 2.88351 11.9253 2.96345 11.8425C3.04339 11.7625 3.08622 11.6655 3.08622 11.557V8.41081L2.83783 8.08246L2.83212 8.07676L2.82642 8.06821L1.81576 6.65216C1.55024 6.28101 1.56166 5.76996 1.84716 5.41306L2.84069 4.16261L3.08622 3.84285V1.01929C3.08622 0.902234 3.04625 0.802309 2.96345 0.722369Z", fill: "#8347AD" }),
2502
- /* @__PURE__ */ jsx40("path", { d: "M9.60962 11.9625C9.70667 11.9625 9.78947 11.9282 9.85227 11.8568C9.91797 11.7855 9.94937 11.7084 9.94937 11.6227C9.94937 11.5371 9.92652 11.4714 9.88367 11.4286L5.89242 6.0384L9.59247 1.13642C9.63532 1.08217 9.65812 1.01651 9.65812 0.942284C9.65812 0.856634 9.62387 0.776694 9.55252 0.708174C9.50967 0.665349 9.45832 0.633944 9.40407 0.616814C9.37267 0.608249 9.33552 0.602539 9.30127 0.602539H6.73752C6.56337 0.602539 6.42632 0.636799 6.32352 0.708174C6.22077 0.779549 6.14082 0.850924 6.08942 0.928009L3.32868 4.54525L2.32944 5.80145C2.27234 5.8728 2.24094 5.95845 2.24094 6.04695C2.23808 6.13545 2.26378 6.2211 2.31802 6.2982L2.83477 7.0205L3.32868 7.70855L6.29787 11.6199C6.32927 11.6627 6.39492 11.7312 6.49197 11.8226C6.55192 11.8797 6.63472 11.9197 6.73752 11.9425C6.80032 11.9568 6.86882 11.9625 6.94592 11.9625H9.60962Z", fill: "#3CB4E5" })
2518
+ /* @__PURE__ */ jsx41("path", { d: "M16.6417 11.8339C16.7273 11.9196 16.8272 11.9624 16.9472 11.9624H18.9628C19.0798 11.9624 19.1826 11.9196 19.2682 11.8339C19.3539 11.7483 19.3967 11.6483 19.3967 11.5284V7.12891C19.3967 6.50081 19.3111 5.95551 19.1398 5.49586C18.9685 5.03621 18.7315 4.65937 18.4289 4.3596C18.1234 4.05983 17.758 3.83999 17.3326 3.69439C16.9043 3.55164 16.4361 3.47741 15.9251 3.47741C15.4226 3.47741 14.9801 3.58019 14.5975 3.7886C14.2121 3.99702 13.9295 4.214 13.7496 4.43668V1.03071C13.7496 0.913654 13.7068 0.810874 13.6211 0.728079C13.5355 0.642434 13.4355 0.599609 13.3185 0.599609H11.2943C11.1773 0.599609 11.0745 0.642434 10.9888 0.728079C10.9032 0.813729 10.8604 0.913654 10.8604 1.03071V11.5284C10.8604 11.6455 10.9032 11.7483 10.9888 11.8339C11.0745 11.9196 11.1744 11.9624 11.2943 11.9624H13.3099C13.427 11.9624 13.5298 11.9196 13.6126 11.8339C13.6982 11.7483 13.741 11.6483 13.741 11.5284V7.48006C13.741 7.02041 13.8495 6.65216 14.0693 6.37521C14.2892 6.09826 14.6375 5.95836 15.1171 5.95836C15.5968 5.95836 15.9479 6.09826 16.1735 6.37521C16.3961 6.65216 16.5103 7.02041 16.5103 7.48006V11.5284C16.5132 11.6483 16.556 11.7483 16.6417 11.8339Z", fill: "#8347AD" }),
2519
+ /* @__PURE__ */ jsx41("path", { d: "M23.6189 3.64014H21.6005C21.4834 3.64014 21.3806 3.68296 21.295 3.76861C21.2093 3.85426 21.1665 3.95418 21.1665 4.07124V11.5284C21.1665 11.6454 21.2093 11.7482 21.295 11.8339C21.3806 11.9195 21.4806 11.9623 21.6005 11.9623H23.6161C23.7331 11.9623 23.8359 11.9195 23.9187 11.8339C24.0044 11.7482 24.0472 11.6483 24.0472 11.5284V4.07124C24.0472 3.95418 24.0044 3.85141 23.9187 3.76861C23.8359 3.68296 23.736 3.64014 23.6189 3.64014Z", fill: "#8347AD" }),
2520
+ /* @__PURE__ */ jsx41("path", { d: "M34.1881 10.0723C34.3851 9.61264 34.4936 9.07019 34.5164 8.43924C34.5278 8.27934 34.5335 8.06239 34.5335 7.79114C34.5335 7.51994 34.5278 7.30294 34.5164 7.14309C34.4936 6.51499 34.3851 5.96969 34.1881 5.51004C33.9911 5.05039 33.7313 4.67068 33.4115 4.36519C33.0918 4.05971 32.7178 3.83702 32.2924 3.69427C31.8642 3.55152 31.4131 3.47729 30.9334 3.47729C30.5823 3.47729 30.2854 3.50584 30.0455 3.5658C29.8057 3.62575 29.603 3.69998 29.4374 3.78848C29.2718 3.87984 29.1348 3.98263 29.0206 4.09968C28.9093 4.21674 28.8036 4.32808 28.7094 4.43657V4.06828C28.7094 3.95122 28.6666 3.84844 28.5809 3.7628C28.4953 3.67715 28.3954 3.63432 28.2783 3.63432H26.3426C26.2256 3.63432 26.1228 3.67715 26.0372 3.7628C25.9515 3.84844 25.9087 3.94837 25.9087 4.06828V14.566C25.9087 14.683 25.9515 14.7858 26.0372 14.8715C26.1228 14.9571 26.2227 14.9999 26.3426 14.9999H28.3583C28.4753 14.9999 28.5781 14.9571 28.6637 14.8715C28.7494 14.7858 28.7922 14.6859 28.7922 14.566V11.1629C28.8664 11.2599 28.9635 11.3627 29.0806 11.474C29.1976 11.5854 29.3432 11.691 29.5117 11.7852C29.683 11.8823 29.8857 11.9622 30.1198 12.0251C30.3539 12.0879 30.6251 12.1221 30.9363 12.1221C31.4159 12.1221 31.8699 12.0479 32.2953 11.8994C32.7206 11.751 33.0946 11.5226 33.4144 11.22C33.7313 10.9145 33.9911 10.5319 34.1881 10.0723ZM31.65 8.24794C31.6186 8.62194 31.4959 8.94739 31.2817 9.22434C31.0676 9.50129 30.7107 9.64119 30.2083 9.64119C29.9742 9.64119 29.7715 9.60404 29.6002 9.52984C29.4289 9.45559 29.289 9.35569 29.1748 9.23289C29.0634 9.11014 28.9749 8.97309 28.9121 8.82464C28.8493 8.67619 28.8065 8.52204 28.7836 8.35929C28.7608 8.19939 28.7522 8.01384 28.7522 7.79974C28.7522 7.58559 28.7637 7.40004 28.7836 7.24014C28.8036 7.08029 28.8465 6.92609 28.9121 6.77479C28.9749 6.62634 29.0634 6.48929 29.1748 6.36654C29.2861 6.24374 29.4289 6.14384 29.6002 6.06959C29.7715 5.99539 29.9742 5.95824 30.2083 5.95824C30.7107 5.95824 31.0676 6.09814 31.2817 6.37509C31.4959 6.65204 31.6186 6.97749 31.65 7.35149C31.6843 7.65124 31.6843 7.95104 31.65 8.24794Z", fill: "#8347AD" }),
2521
+ /* @__PURE__ */ jsx41("path", { d: "M41.7481 11.8339C41.8337 11.9195 41.9337 11.9623 42.0536 11.9623H43.9093C44.0264 11.9623 44.1291 11.9195 44.2119 11.8339C44.2976 11.7482 44.3404 11.6483 44.3404 11.5284V4.07124C44.3404 3.95418 44.2976 3.85141 44.2119 3.76861C44.1263 3.68296 44.0264 3.64014 43.9093 3.64014H41.8937C41.7766 3.64014 41.6739 3.68296 41.5882 3.76861C41.5026 3.85426 41.4597 3.95418 41.4597 4.07124V8.1196C41.4597 8.57925 41.3598 8.94755 41.1628 9.22445C40.9658 9.5014 40.6318 9.6413 40.1636 9.6413C39.6954 9.6413 39.3585 9.5014 39.1558 9.22445C38.9531 8.94755 38.8503 8.57925 38.8503 8.1196V4.07124C38.8503 3.95418 38.8075 3.85141 38.7218 3.76861C38.6362 3.68296 38.5363 3.64014 38.4163 3.64014H36.4007C36.2837 3.64014 36.1809 3.68296 36.0953 3.76861C36.0096 3.85426 35.9668 3.95418 35.9668 4.07124V8.47075C35.9668 9.7298 36.2723 10.6519 36.8861 11.24C37.4999 11.8282 38.325 12.1194 39.3585 12.1194C39.6897 12.1194 39.9752 12.0908 40.215 12.0309C40.4548 11.9709 40.6661 11.8967 40.8459 11.8082C41.0286 11.7168 41.18 11.6169 41.3027 11.5027C41.4255 11.3914 41.5283 11.2772 41.6139 11.1601V11.5284C41.6196 11.6483 41.6624 11.7482 41.7481 11.8339Z", fill: "#8347AD" }),
2522
+ /* @__PURE__ */ jsx41("path", { d: "M22.5569 2.78074C21.7889 2.78074 21.1665 2.1555 21.1665 1.39037C21.1665 0.622385 21.7918 0 22.5569 0C23.3249 0 23.9473 0.62524 23.9473 1.39037C23.9501 2.1555 23.3249 2.78074 22.5569 2.78074Z", fill: "#3CB4E5" }),
2523
+ /* @__PURE__ */ jsx41("path", { d: "M3.1374 7.43996V4.78198L2.34372 5.77836C2.22095 5.93256 2.21524 6.14951 2.32944 6.31226L3.1374 7.43996Z", fill: "#743CEB" }),
2524
+ /* @__PURE__ */ jsx41("path", { d: "M2.96345 0.722369C2.88351 0.642434 2.78074 0.599609 2.66368 0.599609H0.40826C0.299771 0.599609 0.205557 0.639579 0.122763 0.722369C0.0428246 0.802309 0 0.905089 0 1.02214V11.557C0 11.6655 0.0399696 11.7597 0.122763 11.8425C0.202703 11.9224 0.299771 11.9652 0.40826 11.9652H2.66368C2.78359 11.9652 2.88351 11.9253 2.96345 11.8425C3.04339 11.7625 3.08622 11.6655 3.08622 11.557V8.41081L2.83783 8.08246L2.83212 8.07676L2.82642 8.06821L1.81576 6.65216C1.55024 6.28101 1.56166 5.76996 1.84716 5.41306L2.84069 4.16261L3.08622 3.84285V1.01929C3.08622 0.902234 3.04625 0.802309 2.96345 0.722369Z", fill: "#8347AD" }),
2525
+ /* @__PURE__ */ jsx41("path", { d: "M9.60962 11.9625C9.70667 11.9625 9.78947 11.9282 9.85227 11.8568C9.91797 11.7855 9.94937 11.7084 9.94937 11.6227C9.94937 11.5371 9.92652 11.4714 9.88367 11.4286L5.89242 6.0384L9.59247 1.13642C9.63532 1.08217 9.65812 1.01651 9.65812 0.942284C9.65812 0.856634 9.62387 0.776694 9.55252 0.708174C9.50967 0.665349 9.45832 0.633944 9.40407 0.616814C9.37267 0.608249 9.33552 0.602539 9.30127 0.602539H6.73752C6.56337 0.602539 6.42632 0.636799 6.32352 0.708174C6.22077 0.779549 6.14082 0.850924 6.08942 0.928009L3.32868 4.54525L2.32944 5.80145C2.27234 5.8728 2.24094 5.95845 2.24094 6.04695C2.23808 6.13545 2.26378 6.2211 2.31802 6.2982L2.83477 7.0205L3.32868 7.70855L6.29787 11.6199C6.32927 11.6627 6.39492 11.7312 6.49197 11.8226C6.55192 11.8797 6.63472 11.9197 6.73752 11.9425C6.80032 11.9568 6.86882 11.9625 6.94592 11.9625H9.60962Z", fill: "#3CB4E5" })
2503
2526
  ]
2504
2527
  }
2505
2528
  )
@@ -2507,17 +2530,17 @@ var KhipuWordmark = forwardRef38(
2507
2530
  KhipuWordmark.displayName = "KhipuWordmark";
2508
2531
 
2509
2532
  // src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
2510
- import { Fragment as Fragment3, jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
2511
- var KdsSecureFooter = forwardRef39(
2512
- ({ variant = "default", showLogo = true, psp, children, className, ...props }, ref) => /* @__PURE__ */ jsxs30("footer", { ref, className: clsx("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
2513
- /* @__PURE__ */ jsxs30("svg", { className: "kds-secure-footer-lock", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
2514
- /* @__PURE__ */ jsx41("rect", { x: "4.5", y: "10.5", width: "15", height: "10", rx: "2.25" }),
2515
- /* @__PURE__ */ jsx41("path", { d: "M8 10.5V7a4 4 0 0 1 8 0v3.5" })
2533
+ import { Fragment as Fragment3, jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
2534
+ var KdsSecureFooter = forwardRef40(
2535
+ ({ variant = "default", showLogo = true, psp, children, className, ...props }, ref) => /* @__PURE__ */ jsxs31("footer", { ref, className: clsx("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
2536
+ /* @__PURE__ */ jsxs31("svg", { className: "kds-secure-footer-lock", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
2537
+ /* @__PURE__ */ jsx42("rect", { x: "4.5", y: "10.5", width: "15", height: "10", rx: "2.25" }),
2538
+ /* @__PURE__ */ jsx42("path", { d: "M8 10.5V7a4 4 0 0 1 8 0v3.5" })
2516
2539
  ] }),
2517
- children || /* @__PURE__ */ jsx41("span", { children: "Pago seguro procesado por" }),
2518
- showLogo && /* @__PURE__ */ jsx41(KhipuWordmark, {}),
2519
- psp && /* @__PURE__ */ jsxs30(Fragment3, { children: [
2520
- /* @__PURE__ */ jsx41("span", { className: "kds-secure-footer-sep", "aria-hidden": "true" }),
2540
+ children || /* @__PURE__ */ jsx42("span", { children: "Pago seguro procesado por" }),
2541
+ showLogo && /* @__PURE__ */ jsx42(KhipuWordmark, {}),
2542
+ psp && /* @__PURE__ */ jsxs31(Fragment3, { children: [
2543
+ /* @__PURE__ */ jsx42("span", { className: "kds-secure-footer-sep", "aria-hidden": "true" }),
2521
2544
  psp
2522
2545
  ] })
2523
2546
  ] })
@@ -2525,44 +2548,44 @@ var KdsSecureFooter = forwardRef39(
2525
2548
  KdsSecureFooter.displayName = "KdsSecureFooter";
2526
2549
 
2527
2550
  // src/components/domain/KdsRecapList/KdsRecapList.tsx
2528
- import { forwardRef as forwardRef40 } from "react";
2529
- import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
2530
- var KdsRecapList = forwardRef40(
2531
- ({ items, className, ...props }, ref) => /* @__PURE__ */ jsx42("ul", { ref, className: clsx("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ jsxs31("li", { children: [
2532
- /* @__PURE__ */ jsx42("span", { className: "kds-key", children: item.label }),
2533
- /* @__PURE__ */ jsx42("span", { className: clsx("kds-value", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
2551
+ import { forwardRef as forwardRef41 } from "react";
2552
+ import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
2553
+ var KdsRecapList = forwardRef41(
2554
+ ({ items, className, ...props }, ref) => /* @__PURE__ */ jsx43("ul", { ref, className: clsx("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ jsxs32("li", { children: [
2555
+ /* @__PURE__ */ jsx43("span", { className: "kds-key", children: item.label }),
2556
+ /* @__PURE__ */ jsx43("span", { className: clsx("kds-value", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
2534
2557
  ] }, i)) })
2535
2558
  );
2536
2559
  KdsRecapList.displayName = "KdsRecapList";
2537
2560
 
2538
2561
  // src/components/domain/KdsMontoRow/KdsMontoRow.tsx
2539
- import { forwardRef as forwardRef41 } from "react";
2540
- import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
2541
- var KdsMontoRow = forwardRef41(
2542
- ({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ jsxs32("div", { ref, className: clsx("kds-monto-row", className), ...props, children: [
2543
- /* @__PURE__ */ jsxs32("div", { children: [
2544
- /* @__PURE__ */ jsx43("div", { className: "kds-monto-row-title", children: title }),
2545
- deadline && /* @__PURE__ */ jsx43("div", { className: "kds-monto-row-deadline", children: deadline })
2562
+ import { forwardRef as forwardRef42 } from "react";
2563
+ import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
2564
+ var KdsMontoRow = forwardRef42(
2565
+ ({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ jsxs33("div", { ref, className: clsx("kds-monto-row", className), ...props, children: [
2566
+ /* @__PURE__ */ jsxs33("div", { children: [
2567
+ /* @__PURE__ */ jsx44("div", { className: "kds-monto-row-title", children: title }),
2568
+ deadline && /* @__PURE__ */ jsx44("div", { className: "kds-monto-row-deadline", children: deadline })
2546
2569
  ] }),
2547
- /* @__PURE__ */ jsx43("div", { className: "kds-monto-row-value", children: value })
2570
+ /* @__PURE__ */ jsx44("div", { className: "kds-monto-row-value", children: value })
2548
2571
  ] })
2549
2572
  );
2550
2573
  KdsMontoRow.displayName = "KdsMontoRow";
2551
2574
 
2552
2575
  // src/components/domain/KdsMerchantTile/KdsMerchantTile.tsx
2553
- import { forwardRef as forwardRef42 } from "react";
2554
- import { jsx as jsx44 } from "react/jsx-runtime";
2555
- var KdsMerchantTile = forwardRef42(
2576
+ import { forwardRef as forwardRef43 } from "react";
2577
+ import { jsx as jsx45 } from "react/jsx-runtime";
2578
+ var KdsMerchantTile = forwardRef43(
2556
2579
  ({ name, logoUrl, initials, compact, className, ...props }, ref) => {
2557
2580
  const displayInitials = (initials ?? name.slice(0, 2)).toUpperCase();
2558
- return /* @__PURE__ */ jsx44(
2581
+ return /* @__PURE__ */ jsx45(
2559
2582
  "div",
2560
2583
  {
2561
2584
  ref,
2562
2585
  className: clsx("kds-merchant-tile", logoUrl && "logo", compact && "compact", className),
2563
2586
  "aria-label": name,
2564
2587
  ...props,
2565
- children: logoUrl ? /* @__PURE__ */ jsx44("img", { src: logoUrl, alt: name }) : displayInitials
2588
+ children: logoUrl ? /* @__PURE__ */ jsx45("img", { src: logoUrl, alt: name }) : displayInitials
2566
2589
  }
2567
2590
  );
2568
2591
  }
@@ -2570,7 +2593,7 @@ var KdsMerchantTile = forwardRef42(
2570
2593
  KdsMerchantTile.displayName = "KdsMerchantTile";
2571
2594
 
2572
2595
  // src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
2573
- import { forwardRef as forwardRef43, useState as useState9 } from "react";
2596
+ import { forwardRef as forwardRef44, useState as useState9 } from "react";
2574
2597
 
2575
2598
  // src/components/domain/KdsInvoiceMerchant/useLogoBackdrop.ts
2576
2599
  import { useEffect as useEffect4, useState as useState8 } from "react";
@@ -2642,13 +2665,13 @@ function useLogoBackdrop(logoUrl) {
2642
2665
  }
2643
2666
 
2644
2667
  // src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
2645
- import { jsx as jsx45 } from "react/jsx-runtime";
2646
- var KdsInvoiceMerchant = forwardRef43(
2668
+ import { jsx as jsx46 } from "react/jsx-runtime";
2669
+ var KdsInvoiceMerchant = forwardRef44(
2647
2670
  ({ logoUrl, brandColor, className, style, ...props }, ref) => {
2648
2671
  const [failed, setFailed] = useState9(false);
2649
2672
  const showLogo = !!logoUrl && !failed;
2650
2673
  const backdrop = useLogoBackdrop(showLogo ? logoUrl : void 0);
2651
- return /* @__PURE__ */ jsx45(
2674
+ return /* @__PURE__ */ jsx46(
2652
2675
  "div",
2653
2676
  {
2654
2677
  ref,
@@ -2661,7 +2684,7 @@ var KdsInvoiceMerchant = forwardRef43(
2661
2684
  "aria-hidden": "true",
2662
2685
  style: !showLogo && brandColor ? { background: brandColor, ...style } : style,
2663
2686
  ...props,
2664
- children: showLogo ? /* @__PURE__ */ jsx45("img", { src: logoUrl, alt: "", onError: () => setFailed(true) }) : /* @__PURE__ */ jsx45("i", { className: "material-symbols-outlined", children: "storefront" })
2687
+ children: showLogo ? /* @__PURE__ */ jsx46("img", { src: logoUrl, alt: "", onError: () => setFailed(true) }) : /* @__PURE__ */ jsx46("i", { className: "material-symbols-outlined", children: "storefront" })
2665
2688
  }
2666
2689
  );
2667
2690
  }
@@ -2669,9 +2692,9 @@ var KdsInvoiceMerchant = forwardRef43(
2669
2692
  KdsInvoiceMerchant.displayName = "KdsInvoiceMerchant";
2670
2693
 
2671
2694
  // src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
2672
- import { forwardRef as forwardRef44 } from "react";
2673
- import { jsx as jsx46, jsxs as jsxs33 } from "react/jsx-runtime";
2674
- var KdsPaymentTotal = forwardRef44(
2695
+ import { forwardRef as forwardRef45 } from "react";
2696
+ import { jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
2697
+ var KdsPaymentTotal = forwardRef45(
2675
2698
  ({
2676
2699
  variant = "default",
2677
2700
  tone = "brand",
@@ -2689,7 +2712,7 @@ var KdsPaymentTotal = forwardRef44(
2689
2712
  const { integer, fraction } = formatAmount(amount, decimals, locale);
2690
2713
  const isEmail = variant === "email";
2691
2714
  const isInfoTone = tone === "info";
2692
- return /* @__PURE__ */ jsxs33(
2715
+ return /* @__PURE__ */ jsxs34(
2693
2716
  "div",
2694
2717
  {
2695
2718
  ref,
@@ -2702,14 +2725,14 @@ var KdsPaymentTotal = forwardRef44(
2702
2725
  ),
2703
2726
  ...props,
2704
2727
  children: [
2705
- !isEmail && title != null && /* @__PURE__ */ jsx46("h5", { className: "kds-payment-total-title", children: title }),
2706
- !isEmail && titleMobile != null && /* @__PURE__ */ jsx46("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
2707
- label != null && /* @__PURE__ */ jsx46("h6", { className: "kds-payment-label", children: label }),
2708
- /* @__PURE__ */ jsxs33("h5", { className: "kds-payment-amount", children: [
2728
+ !isEmail && title != null && /* @__PURE__ */ jsx47("h5", { className: "kds-payment-total-title", children: title }),
2729
+ !isEmail && titleMobile != null && /* @__PURE__ */ jsx47("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
2730
+ label != null && /* @__PURE__ */ jsx47("h6", { className: "kds-payment-label", children: label }),
2731
+ /* @__PURE__ */ jsxs34("h5", { className: "kds-payment-amount", children: [
2709
2732
  currency,
2710
2733
  " ",
2711
2734
  integer,
2712
- fraction !== null && /* @__PURE__ */ jsx46("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
2735
+ fraction !== null && /* @__PURE__ */ jsx47("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
2713
2736
  ] })
2714
2737
  ]
2715
2738
  }
@@ -2745,10 +2768,10 @@ function formatAmount(amount, decimals, locale) {
2745
2768
  }
2746
2769
 
2747
2770
  // src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
2748
- import { forwardRef as forwardRef45 } from "react";
2749
- import { jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
2750
- var KdsBillAttachment = forwardRef45(
2751
- ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ jsxs34(
2771
+ import { forwardRef as forwardRef46 } from "react";
2772
+ import { jsx as jsx48, jsxs as jsxs35 } from "react/jsx-runtime";
2773
+ var KdsBillAttachment = forwardRef46(
2774
+ ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ jsxs35(
2752
2775
  "a",
2753
2776
  {
2754
2777
  ref,
@@ -2758,15 +2781,15 @@ var KdsBillAttachment = forwardRef45(
2758
2781
  className: clsx("kds-bill-attachment", className),
2759
2782
  ...props,
2760
2783
  children: [
2761
- /* @__PURE__ */ jsx47("i", { className: "material-symbols-outlined", children: icon }),
2762
- /* @__PURE__ */ jsx47("span", { children: filename })
2784
+ /* @__PURE__ */ jsx48("i", { className: "material-symbols-outlined", children: icon }),
2785
+ /* @__PURE__ */ jsx48("span", { children: filename })
2763
2786
  ]
2764
2787
  }
2765
2788
  )
2766
2789
  );
2767
2790
  KdsBillAttachment.displayName = "KdsBillAttachment";
2768
- var KdsBillAttachments = forwardRef45(
2769
- ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx47("div", { ref, className: clsx("kds-bill-attachments", className), ...props, children })
2791
+ var KdsBillAttachments = forwardRef46(
2792
+ ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx48("div", { ref, className: clsx("kds-bill-attachments", className), ...props, children })
2770
2793
  );
2771
2794
  KdsBillAttachments.displayName = "KdsBillAttachments";
2772
2795
 
@@ -3084,6 +3107,7 @@ export {
3084
3107
  KdsEmptyState,
3085
3108
  KdsExpandPanel,
3086
3109
  KdsFab,
3110
+ KdsInvoiceHeaderSkeleton,
3087
3111
  KdsInvoiceMerchant,
3088
3112
  KdsInvoiceSticky,
3089
3113
  KdsLinearProgress,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khipu/design-system",
3
- "version": "0.3.5-alpha.29",
3
+ "version": "0.3.5-alpha.30",
4
4
  "description": "Khipu Design System - UI components and design tokens for the Khipu payment platform",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",