@khipu/design-system 0.3.5-alpha.35 → 0.3.5-alpha.36
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/beercss/khipu-beercss.css +950 -18
- package/dist/beercss/khipu-beercss.js +63 -0
- package/dist/beercss/khipu-beercss.min.css +1 -1
- package/dist/beercss/khipu-beercss.min.js +1 -1
- package/dist/beercss/khipu-beercss.scoped.css +949 -16
- package/dist/beercss/khipu-beercss.scoped.min.css +1 -1
- package/dist/beercss/metadata.json +5 -5
- package/dist/index.d.mts +367 -9
- package/dist/index.d.ts +367 -9
- package/dist/index.js +1113 -405
- package/dist/index.mjs +1078 -379
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -47,9 +47,13 @@ __export(index_exports, {
|
|
|
47
47
|
KdsCardFooter: () => KdsCardFooter,
|
|
48
48
|
KdsCardHeader: () => KdsCardHeader,
|
|
49
49
|
KdsCardPlan: () => KdsCardPlan,
|
|
50
|
+
KdsCardPlanGroup: () => KdsCardPlanGroup,
|
|
50
51
|
KdsCardSelector: () => KdsCardSelector,
|
|
52
|
+
KdsCardSelectorGroup: () => KdsCardSelectorGroup,
|
|
51
53
|
KdsCheckbox: () => KdsCheckbox,
|
|
52
54
|
KdsChip: () => KdsChip,
|
|
55
|
+
KdsConsentCard: () => KdsConsentCard,
|
|
56
|
+
KdsContract: () => KdsContract,
|
|
53
57
|
KdsCopyButton: () => KdsCopyButton,
|
|
54
58
|
KdsCopyRow: () => KdsCopyRow,
|
|
55
59
|
KdsCopyableTable: () => KdsCopyableTable,
|
|
@@ -59,13 +63,17 @@ __export(index_exports, {
|
|
|
59
63
|
KdsEmptyState: () => KdsEmptyState,
|
|
60
64
|
KdsExpandPanel: () => KdsExpandPanel,
|
|
61
65
|
KdsFab: () => KdsFab,
|
|
66
|
+
KdsFeedbackCard: () => KdsFeedbackCard,
|
|
67
|
+
KdsFooter: () => KdsFooter,
|
|
62
68
|
KdsInvoiceHeaderSkeleton: () => KdsInvoiceHeaderSkeleton,
|
|
63
69
|
KdsInvoiceMerchant: () => KdsInvoiceMerchant,
|
|
64
70
|
KdsInvoiceSticky: () => KdsInvoiceSticky,
|
|
65
71
|
KdsLinearProgress: () => KdsLinearProgress,
|
|
66
72
|
KdsMerchantTile: () => KdsMerchantTile,
|
|
67
73
|
KdsMontoRow: () => KdsMontoRow,
|
|
74
|
+
KdsNavbar: () => KdsNavbar,
|
|
68
75
|
KdsPaymentTotal: () => KdsPaymentTotal,
|
|
76
|
+
KdsProgressChecklist: () => KdsProgressChecklist,
|
|
69
77
|
KdsQrRow: () => KdsQrRow,
|
|
70
78
|
KdsRadioGroup: () => KdsRadioGroup,
|
|
71
79
|
KdsRecapList: () => KdsRecapList,
|
|
@@ -75,6 +83,7 @@ __export(index_exports, {
|
|
|
75
83
|
KdsSecureLoader: () => KdsSecureLoader,
|
|
76
84
|
KdsSegmentedTabs: () => KdsSegmentedTabs,
|
|
77
85
|
KdsSelect: () => KdsSelect,
|
|
86
|
+
KdsSidebar: () => KdsSidebar,
|
|
78
87
|
KdsSnackbar: () => KdsSnackbar,
|
|
79
88
|
KdsSpinner: () => KdsSpinner,
|
|
80
89
|
KdsStatusBlock: () => KdsStatusBlock,
|
|
@@ -201,7 +210,7 @@ function formatTime(iso) {
|
|
|
201
210
|
}
|
|
202
211
|
|
|
203
212
|
// src/version.ts
|
|
204
|
-
var KDS_VERSION = "0.3.5-alpha.
|
|
213
|
+
var KDS_VERSION = "0.3.5-alpha.36";
|
|
205
214
|
|
|
206
215
|
// src/theme/KdsThemeProvider.tsx
|
|
207
216
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -1308,7 +1317,7 @@ var KdsTextField = (0, import_react2.forwardRef)(
|
|
|
1308
1317
|
label,
|
|
1309
1318
|
required && requiredMark && " *"
|
|
1310
1319
|
] }),
|
|
1311
|
-
readOnly && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "material-symbols-outlined", children: "lock" }),
|
|
1320
|
+
readOnly && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: "lock" }),
|
|
1312
1321
|
isRevealable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1313
1322
|
"a",
|
|
1314
1323
|
{
|
|
@@ -1456,14 +1465,70 @@ var KdsSecureLoader = (0, import_react7.forwardRef)(
|
|
|
1456
1465
|
);
|
|
1457
1466
|
KdsSecureLoader.displayName = "KdsSecureLoader";
|
|
1458
1467
|
|
|
1468
|
+
// src/components/core/KdsProgressChecklist/KdsProgressChecklist.tsx
|
|
1469
|
+
var import_react8 = require("react");
|
|
1470
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1471
|
+
var DEFAULT_STATUS_LABELS = {
|
|
1472
|
+
pending: "pendiente",
|
|
1473
|
+
active: "en curso",
|
|
1474
|
+
done: "listo",
|
|
1475
|
+
error: "con error"
|
|
1476
|
+
};
|
|
1477
|
+
function Mark({ status }) {
|
|
1478
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "kds-progress-checklist-mark", "aria-hidden": "true", children: [
|
|
1479
|
+
status === "done" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "material-symbols-outlined", children: "check" }),
|
|
1480
|
+
status === "error" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "material-symbols-outlined", children: "error" }),
|
|
1481
|
+
status === "active" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "kds-dots-loader", children: [
|
|
1482
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {}),
|
|
1483
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {}),
|
|
1484
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {})
|
|
1485
|
+
] }),
|
|
1486
|
+
status === "pending" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "kds-progress-checklist-dot" })
|
|
1487
|
+
] });
|
|
1488
|
+
}
|
|
1489
|
+
var KdsProgressChecklist = (0, import_react8.forwardRef)(
|
|
1490
|
+
({ items, statusLabels, className, ...props }, ref) => {
|
|
1491
|
+
const labels = { ...DEFAULT_STATUS_LABELS, ...statusLabels };
|
|
1492
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1493
|
+
"ul",
|
|
1494
|
+
{
|
|
1495
|
+
ref,
|
|
1496
|
+
className: (0, import_clsx.clsx)("kds-progress-checklist", className),
|
|
1497
|
+
"aria-live": "polite",
|
|
1498
|
+
...props,
|
|
1499
|
+
children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1500
|
+
"li",
|
|
1501
|
+
{
|
|
1502
|
+
className: (0, import_clsx.clsx)(
|
|
1503
|
+
"kds-progress-checklist-item",
|
|
1504
|
+
`kds-progress-checklist-item--${item.status}`
|
|
1505
|
+
),
|
|
1506
|
+
"aria-current": item.status === "active" ? "step" : void 0,
|
|
1507
|
+
children: [
|
|
1508
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Mark, { status: item.status }),
|
|
1509
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "kds-progress-checklist-label", children: item.label }),
|
|
1510
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "kds-progress-checklist-status", children: [
|
|
1511
|
+
": ",
|
|
1512
|
+
labels[item.status]
|
|
1513
|
+
] })
|
|
1514
|
+
]
|
|
1515
|
+
},
|
|
1516
|
+
item.id ?? item.label
|
|
1517
|
+
))
|
|
1518
|
+
}
|
|
1519
|
+
);
|
|
1520
|
+
}
|
|
1521
|
+
);
|
|
1522
|
+
KdsProgressChecklist.displayName = "KdsProgressChecklist";
|
|
1523
|
+
|
|
1459
1524
|
// src/components/core/KdsCopyButton/KdsCopyButton.tsx
|
|
1460
|
-
var
|
|
1525
|
+
var import_react10 = require("react");
|
|
1461
1526
|
|
|
1462
1527
|
// src/components/core/hooks/useCopyToClipboard.ts
|
|
1463
|
-
var
|
|
1528
|
+
var import_react9 = require("react");
|
|
1464
1529
|
function useCopyToClipboard(resetMs = 1200) {
|
|
1465
|
-
const [copied, setCopied] = (0,
|
|
1466
|
-
const copy = (0,
|
|
1530
|
+
const [copied, setCopied] = (0, import_react9.useState)(false);
|
|
1531
|
+
const copy = (0, import_react9.useCallback)(
|
|
1467
1532
|
async (text) => {
|
|
1468
1533
|
try {
|
|
1469
1534
|
await navigator.clipboard.writeText(text);
|
|
@@ -1478,11 +1543,11 @@ function useCopyToClipboard(resetMs = 1200) {
|
|
|
1478
1543
|
}
|
|
1479
1544
|
|
|
1480
1545
|
// src/components/core/KdsCopyButton/KdsCopyButton.tsx
|
|
1481
|
-
var
|
|
1482
|
-
var KdsCopyButton = (0,
|
|
1546
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1547
|
+
var KdsCopyButton = (0, import_react10.forwardRef)(
|
|
1483
1548
|
({ value, copiedText = "Copiado", className, ...props }, ref) => {
|
|
1484
1549
|
const { copied, copy } = useCopyToClipboard();
|
|
1485
|
-
return /* @__PURE__ */ (0,
|
|
1550
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1486
1551
|
"button",
|
|
1487
1552
|
{
|
|
1488
1553
|
ref,
|
|
@@ -1492,11 +1557,11 @@ var KdsCopyButton = (0, import_react9.forwardRef)(
|
|
|
1492
1557
|
"aria-label": `Copiar: ${value}`,
|
|
1493
1558
|
...props,
|
|
1494
1559
|
children: [
|
|
1495
|
-
/* @__PURE__ */ (0,
|
|
1496
|
-
/* @__PURE__ */ (0,
|
|
1497
|
-
/* @__PURE__ */ (0,
|
|
1560
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "kds-copy-button-label", children: [
|
|
1561
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "kds-copy-button-value", "aria-hidden": copied || void 0, children: value }),
|
|
1562
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "kds-copy-button-copied", "aria-hidden": !copied || void 0, children: copiedText })
|
|
1498
1563
|
] }),
|
|
1499
|
-
/* @__PURE__ */ (0,
|
|
1564
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: copied ? "check" : "content_copy" })
|
|
1500
1565
|
]
|
|
1501
1566
|
}
|
|
1502
1567
|
);
|
|
@@ -1505,26 +1570,26 @@ var KdsCopyButton = (0, import_react9.forwardRef)(
|
|
|
1505
1570
|
KdsCopyButton.displayName = "KdsCopyButton";
|
|
1506
1571
|
|
|
1507
1572
|
// src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
|
|
1508
|
-
var
|
|
1509
|
-
var
|
|
1510
|
-
var KdsLinearProgress = (0,
|
|
1511
|
-
({ value, max = 100, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1573
|
+
var import_react11 = require("react");
|
|
1574
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1575
|
+
var KdsLinearProgress = (0, import_react11.forwardRef)(
|
|
1576
|
+
({ value, max = 100, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("progress", { ref, className: (0, import_clsx.clsx)("kds-progress", className), value, max, ...props })
|
|
1512
1577
|
);
|
|
1513
1578
|
KdsLinearProgress.displayName = "KdsLinearProgress";
|
|
1514
1579
|
|
|
1515
1580
|
// src/components/core/KdsAlert/KdsAlert.tsx
|
|
1516
|
-
var
|
|
1517
|
-
var
|
|
1581
|
+
var import_react12 = require("react");
|
|
1582
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1518
1583
|
var DEFAULT_ICONS = {
|
|
1519
1584
|
success: "check_circle",
|
|
1520
1585
|
info: "info",
|
|
1521
1586
|
warning: "warning",
|
|
1522
1587
|
error: "error"
|
|
1523
1588
|
};
|
|
1524
|
-
var KdsAlert = (0,
|
|
1589
|
+
var KdsAlert = (0, import_react12.forwardRef)(
|
|
1525
1590
|
({ severity, title, icon, inline, onClose, children, className, ...props }, ref) => {
|
|
1526
1591
|
const resolvedIcon = icon === false ? null : typeof icon === "string" ? icon : DEFAULT_ICONS[severity];
|
|
1527
|
-
return /* @__PURE__ */ (0,
|
|
1592
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1528
1593
|
"div",
|
|
1529
1594
|
{
|
|
1530
1595
|
ref,
|
|
@@ -1532,19 +1597,19 @@ var KdsAlert = (0, import_react11.forwardRef)(
|
|
|
1532
1597
|
className: (0, import_clsx.clsx)("kds-alert", `kds-${severity}`, inline && "kds-alert-inline", className),
|
|
1533
1598
|
...props,
|
|
1534
1599
|
children: [
|
|
1535
|
-
resolvedIcon && /* @__PURE__ */ (0,
|
|
1536
|
-
/* @__PURE__ */ (0,
|
|
1537
|
-
title && /* @__PURE__ */ (0,
|
|
1538
|
-
/* @__PURE__ */ (0,
|
|
1600
|
+
resolvedIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "kds-alert-icon", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("i", { className: "material-symbols-outlined", children: resolvedIcon }) }),
|
|
1601
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "kds-alert-content", children: [
|
|
1602
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "kds-alert-title", children: title }),
|
|
1603
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "kds-alert-description", children })
|
|
1539
1604
|
] }),
|
|
1540
|
-
onClose && /* @__PURE__ */ (0,
|
|
1605
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1541
1606
|
"button",
|
|
1542
1607
|
{
|
|
1543
1608
|
type: "button",
|
|
1544
1609
|
className: "kds-alert-close",
|
|
1545
1610
|
onClick: onClose,
|
|
1546
1611
|
"aria-label": "Cerrar",
|
|
1547
|
-
children: /* @__PURE__ */ (0,
|
|
1612
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("i", { className: "material-symbols-outlined", children: "close" })
|
|
1548
1613
|
}
|
|
1549
1614
|
)
|
|
1550
1615
|
]
|
|
@@ -1555,8 +1620,8 @@ var KdsAlert = (0, import_react11.forwardRef)(
|
|
|
1555
1620
|
KdsAlert.displayName = "KdsAlert";
|
|
1556
1621
|
|
|
1557
1622
|
// src/components/core/KdsTypography/KdsTypography.tsx
|
|
1558
|
-
var
|
|
1559
|
-
var
|
|
1623
|
+
var import_react13 = require("react");
|
|
1624
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1560
1625
|
var variantTag = {
|
|
1561
1626
|
display1: "h1",
|
|
1562
1627
|
display2: "h2",
|
|
@@ -1576,10 +1641,10 @@ var variantTag = {
|
|
|
1576
1641
|
link: "span",
|
|
1577
1642
|
strong: "span"
|
|
1578
1643
|
};
|
|
1579
|
-
var KdsTypography = (0,
|
|
1644
|
+
var KdsTypography = (0, import_react13.forwardRef)(
|
|
1580
1645
|
({ variant = "body", color, as, children, className, ...props }, ref) => {
|
|
1581
1646
|
const Tag = as || variantTag[variant];
|
|
1582
|
-
return /* @__PURE__ */ (0,
|
|
1647
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1583
1648
|
Tag,
|
|
1584
1649
|
{
|
|
1585
1650
|
ref,
|
|
@@ -1597,12 +1662,12 @@ var KdsTypography = (0, import_react12.forwardRef)(
|
|
|
1597
1662
|
KdsTypography.displayName = "KdsTypography";
|
|
1598
1663
|
|
|
1599
1664
|
// src/components/core/KdsTabs/KdsTabs.tsx
|
|
1600
|
-
var
|
|
1665
|
+
var import_react15 = __toESM(require("react"));
|
|
1601
1666
|
|
|
1602
1667
|
// src/components/core/hooks/useTabsKeyboard.ts
|
|
1603
|
-
var
|
|
1668
|
+
var import_react14 = require("react");
|
|
1604
1669
|
function useTabsKeyboard(tabCount, activeIndex, onChange) {
|
|
1605
|
-
const onKeyDown = (0,
|
|
1670
|
+
const onKeyDown = (0, import_react14.useCallback)(
|
|
1606
1671
|
(e) => {
|
|
1607
1672
|
let next = activeIndex;
|
|
1608
1673
|
if (e.key === "ArrowRight") next = (activeIndex + 1) % tabCount;
|
|
@@ -1622,12 +1687,12 @@ function useTabsKeyboard(tabCount, activeIndex, onChange) {
|
|
|
1622
1687
|
}
|
|
1623
1688
|
|
|
1624
1689
|
// src/components/core/KdsTabs/KdsTabs.tsx
|
|
1625
|
-
var
|
|
1626
|
-
var KdsTabs = (0,
|
|
1690
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1691
|
+
var KdsTabs = (0, import_react15.forwardRef)(
|
|
1627
1692
|
({ activeIndex, onChange, children, className, style, ...props }, ref) => {
|
|
1628
|
-
const tabCount =
|
|
1693
|
+
const tabCount = import_react15.Children.count(children);
|
|
1629
1694
|
const { onKeyDown } = useTabsKeyboard(tabCount, activeIndex, onChange);
|
|
1630
|
-
const mergedStyle = (0,
|
|
1695
|
+
const mergedStyle = (0, import_react15.useMemo)(
|
|
1631
1696
|
() => ({
|
|
1632
1697
|
...style,
|
|
1633
1698
|
"--_tab-count": tabCount,
|
|
@@ -1635,7 +1700,7 @@ var KdsTabs = (0, import_react14.forwardRef)(
|
|
|
1635
1700
|
}),
|
|
1636
1701
|
[tabCount, activeIndex, style]
|
|
1637
1702
|
);
|
|
1638
|
-
return /* @__PURE__ */ (0,
|
|
1703
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1639
1704
|
"div",
|
|
1640
1705
|
{
|
|
1641
1706
|
ref,
|
|
@@ -1644,9 +1709,9 @@ var KdsTabs = (0, import_react14.forwardRef)(
|
|
|
1644
1709
|
style: mergedStyle,
|
|
1645
1710
|
onKeyDown,
|
|
1646
1711
|
...props,
|
|
1647
|
-
children:
|
|
1648
|
-
if (!
|
|
1649
|
-
return
|
|
1712
|
+
children: import_react15.Children.map(children, (child, i) => {
|
|
1713
|
+
if (!import_react15.default.isValidElement(child)) return child;
|
|
1714
|
+
return import_react15.default.cloneElement(child, {
|
|
1650
1715
|
_active: i === activeIndex,
|
|
1651
1716
|
_onClick: () => onChange(i)
|
|
1652
1717
|
});
|
|
@@ -1656,8 +1721,8 @@ var KdsTabs = (0, import_react14.forwardRef)(
|
|
|
1656
1721
|
}
|
|
1657
1722
|
);
|
|
1658
1723
|
KdsTabs.displayName = "KdsTabs";
|
|
1659
|
-
var KdsTab = (0,
|
|
1660
|
-
({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1724
|
+
var KdsTab = (0, import_react15.forwardRef)(
|
|
1725
|
+
({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1661
1726
|
"button",
|
|
1662
1727
|
{
|
|
1663
1728
|
ref,
|
|
@@ -1673,8 +1738,8 @@ var KdsTab = (0, import_react14.forwardRef)(
|
|
|
1673
1738
|
)
|
|
1674
1739
|
);
|
|
1675
1740
|
KdsTab.displayName = "KdsTab";
|
|
1676
|
-
var KdsTabPanel = (0,
|
|
1677
|
-
({ active, children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1741
|
+
var KdsTabPanel = (0, import_react15.forwardRef)(
|
|
1742
|
+
({ active, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1678
1743
|
"div",
|
|
1679
1744
|
{
|
|
1680
1745
|
ref,
|
|
@@ -1689,19 +1754,19 @@ var KdsTabPanel = (0, import_react14.forwardRef)(
|
|
|
1689
1754
|
KdsTabPanel.displayName = "KdsTabPanel";
|
|
1690
1755
|
|
|
1691
1756
|
// src/components/core/KdsRadioGroup/KdsRadioGroup.tsx
|
|
1692
|
-
var
|
|
1693
|
-
var
|
|
1694
|
-
var KdsRadioGroup = (0,
|
|
1695
|
-
({ label, name, options, value, onChange, size, variant, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1757
|
+
var import_react16 = require("react");
|
|
1758
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1759
|
+
var KdsRadioGroup = (0, import_react16.forwardRef)(
|
|
1760
|
+
({ label, name, options, value, onChange, size, variant, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1696
1761
|
"fieldset",
|
|
1697
1762
|
{
|
|
1698
1763
|
ref,
|
|
1699
1764
|
className: (0, import_clsx.clsx)("kds-radio-group", variant === "card" && "kds-radio-group--card", className),
|
|
1700
1765
|
...props,
|
|
1701
1766
|
children: [
|
|
1702
|
-
label && /* @__PURE__ */ (0,
|
|
1703
|
-
options.map((opt) => /* @__PURE__ */ (0,
|
|
1704
|
-
/* @__PURE__ */ (0,
|
|
1767
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("legend", { children: label }),
|
|
1768
|
+
options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: (0, import_clsx.clsx)("radio", size), children: [
|
|
1769
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1705
1770
|
"input",
|
|
1706
1771
|
{
|
|
1707
1772
|
type: "radio",
|
|
@@ -1712,7 +1777,7 @@ var KdsRadioGroup = (0, import_react15.forwardRef)(
|
|
|
1712
1777
|
onChange: () => onChange?.(opt.value)
|
|
1713
1778
|
}
|
|
1714
1779
|
),
|
|
1715
|
-
/* @__PURE__ */ (0,
|
|
1780
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: opt.label })
|
|
1716
1781
|
] }, opt.value))
|
|
1717
1782
|
]
|
|
1718
1783
|
}
|
|
@@ -1721,9 +1786,9 @@ var KdsRadioGroup = (0, import_react15.forwardRef)(
|
|
|
1721
1786
|
KdsRadioGroup.displayName = "KdsRadioGroup";
|
|
1722
1787
|
|
|
1723
1788
|
// src/components/core/KdsSelect/KdsSelect.tsx
|
|
1724
|
-
var
|
|
1725
|
-
var
|
|
1726
|
-
var KdsSelect = (0,
|
|
1789
|
+
var import_react17 = require("react");
|
|
1790
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1791
|
+
var KdsSelect = (0, import_react17.forwardRef)(
|
|
1727
1792
|
({
|
|
1728
1793
|
label,
|
|
1729
1794
|
options,
|
|
@@ -1734,12 +1799,49 @@ var KdsSelect = (0, import_react16.forwardRef)(
|
|
|
1734
1799
|
fullWidth = true,
|
|
1735
1800
|
disabled,
|
|
1736
1801
|
required,
|
|
1802
|
+
readOnly,
|
|
1737
1803
|
className,
|
|
1738
1804
|
id,
|
|
1739
1805
|
...props
|
|
1740
1806
|
}, ref) => {
|
|
1741
1807
|
const fieldId = id || `kds-select-${label.toLowerCase().replace(/\s+/g, "-")}`;
|
|
1742
|
-
|
|
1808
|
+
if (readOnly && !disabled) {
|
|
1809
|
+
const selectedValue = String(props.value ?? props.defaultValue ?? "");
|
|
1810
|
+
const selectedLabel = options.find((opt) => opt.value === selectedValue)?.label ?? "";
|
|
1811
|
+
const passthrough = Object.fromEntries(
|
|
1812
|
+
Object.entries(props).filter(
|
|
1813
|
+
([key]) => key.startsWith("aria-") || key.startsWith("data-") || key === "title"
|
|
1814
|
+
)
|
|
1815
|
+
);
|
|
1816
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1817
|
+
"div",
|
|
1818
|
+
{
|
|
1819
|
+
className: (0, import_clsx.clsx)(
|
|
1820
|
+
"field",
|
|
1821
|
+
"label",
|
|
1822
|
+
"border",
|
|
1823
|
+
"suffix",
|
|
1824
|
+
"locked",
|
|
1825
|
+
prefixIcon && "prefix",
|
|
1826
|
+
error && "invalid",
|
|
1827
|
+
fullWidth && "kds-w-full",
|
|
1828
|
+
className
|
|
1829
|
+
),
|
|
1830
|
+
children: [
|
|
1831
|
+
prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "material-symbols-outlined", children: prefixIcon }),
|
|
1832
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { ...passthrough, id: fieldId, type: "text", value: selectedLabel, placeholder: " ", readOnly: true }),
|
|
1833
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { htmlFor: fieldId, children: [
|
|
1834
|
+
label,
|
|
1835
|
+
required && " *"
|
|
1836
|
+
] }),
|
|
1837
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: "lock" }),
|
|
1838
|
+
props.name && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "hidden", name: props.name, value: selectedValue, form: props.form }),
|
|
1839
|
+
helperText && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "helper", children: helperText })
|
|
1840
|
+
]
|
|
1841
|
+
}
|
|
1842
|
+
);
|
|
1843
|
+
}
|
|
1844
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1743
1845
|
"div",
|
|
1744
1846
|
{
|
|
1745
1847
|
className: (0, import_clsx.clsx)(
|
|
@@ -1752,8 +1854,8 @@ var KdsSelect = (0, import_react16.forwardRef)(
|
|
|
1752
1854
|
className
|
|
1753
1855
|
),
|
|
1754
1856
|
children: [
|
|
1755
|
-
prefixIcon && /* @__PURE__ */ (0,
|
|
1756
|
-
/* @__PURE__ */ (0,
|
|
1857
|
+
prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "material-symbols-outlined", children: prefixIcon }),
|
|
1858
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1757
1859
|
"select",
|
|
1758
1860
|
{
|
|
1759
1861
|
ref,
|
|
@@ -1762,16 +1864,16 @@ var KdsSelect = (0, import_react16.forwardRef)(
|
|
|
1762
1864
|
required,
|
|
1763
1865
|
...props,
|
|
1764
1866
|
children: [
|
|
1765
|
-
placeholder !== void 0 && /* @__PURE__ */ (0,
|
|
1766
|
-
options.map((opt) => /* @__PURE__ */ (0,
|
|
1867
|
+
placeholder !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "", children: placeholder }),
|
|
1868
|
+
options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
|
|
1767
1869
|
]
|
|
1768
1870
|
}
|
|
1769
1871
|
),
|
|
1770
|
-
/* @__PURE__ */ (0,
|
|
1872
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { htmlFor: fieldId, children: [
|
|
1771
1873
|
label,
|
|
1772
1874
|
required && " *"
|
|
1773
1875
|
] }),
|
|
1774
|
-
helperText && /* @__PURE__ */ (0,
|
|
1876
|
+
helperText && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "helper", children: helperText })
|
|
1775
1877
|
]
|
|
1776
1878
|
}
|
|
1777
1879
|
);
|
|
@@ -1780,13 +1882,13 @@ var KdsSelect = (0, import_react16.forwardRef)(
|
|
|
1780
1882
|
KdsSelect.displayName = "KdsSelect";
|
|
1781
1883
|
|
|
1782
1884
|
// src/components/core/KdsChip/KdsChip.tsx
|
|
1783
|
-
var
|
|
1784
|
-
var
|
|
1785
|
-
var KdsChip = (0,
|
|
1786
|
-
({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1787
|
-
icon && /* @__PURE__ */ (0,
|
|
1788
|
-
/* @__PURE__ */ (0,
|
|
1789
|
-
onDelete && /* @__PURE__ */ (0,
|
|
1885
|
+
var import_react18 = require("react");
|
|
1886
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1887
|
+
var KdsChip = (0, import_react18.forwardRef)(
|
|
1888
|
+
({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { ref, className: (0, import_clsx.clsx)("kds-badge", color, className), ...props, children: [
|
|
1889
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("i", { className: "material-symbols-outlined", children: icon }),
|
|
1890
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children }),
|
|
1891
|
+
onDelete && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1790
1892
|
"button",
|
|
1791
1893
|
{
|
|
1792
1894
|
type: "button",
|
|
@@ -1796,7 +1898,7 @@ var KdsChip = (0, import_react17.forwardRef)(
|
|
|
1796
1898
|
onDelete();
|
|
1797
1899
|
},
|
|
1798
1900
|
"aria-label": "Eliminar",
|
|
1799
|
-
children: /* @__PURE__ */ (0,
|
|
1901
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("i", { className: "material-symbols-outlined", children: "close" })
|
|
1800
1902
|
}
|
|
1801
1903
|
)
|
|
1802
1904
|
] })
|
|
@@ -1804,15 +1906,15 @@ var KdsChip = (0, import_react17.forwardRef)(
|
|
|
1804
1906
|
KdsChip.displayName = "KdsChip";
|
|
1805
1907
|
|
|
1806
1908
|
// src/components/core/KdsSnackbar/KdsSnackbar.tsx
|
|
1807
|
-
var
|
|
1909
|
+
var import_react20 = require("react");
|
|
1808
1910
|
|
|
1809
1911
|
// src/components/core/hooks/useAutoHide.ts
|
|
1810
|
-
var
|
|
1912
|
+
var import_react19 = require("react");
|
|
1811
1913
|
function useAutoHide(durationMs, onHide) {
|
|
1812
|
-
const [visible, setVisible] = (0,
|
|
1813
|
-
const onHideRef = (0,
|
|
1914
|
+
const [visible, setVisible] = (0, import_react19.useState)(true);
|
|
1915
|
+
const onHideRef = (0, import_react19.useRef)(onHide);
|
|
1814
1916
|
onHideRef.current = onHide;
|
|
1815
|
-
(0,
|
|
1917
|
+
(0, import_react19.useEffect)(() => {
|
|
1816
1918
|
if (durationMs <= 0) return;
|
|
1817
1919
|
const timer = setTimeout(() => {
|
|
1818
1920
|
setVisible(false);
|
|
@@ -1824,13 +1926,13 @@ function useAutoHide(durationMs, onHide) {
|
|
|
1824
1926
|
}
|
|
1825
1927
|
|
|
1826
1928
|
// src/components/core/KdsSnackbar/KdsSnackbar.tsx
|
|
1827
|
-
var
|
|
1929
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1828
1930
|
var DEFAULT_ICONS2 = {
|
|
1829
1931
|
info: "info",
|
|
1830
1932
|
success: "check_circle",
|
|
1831
1933
|
error: "error"
|
|
1832
1934
|
};
|
|
1833
|
-
var KdsSnackbar = (0,
|
|
1935
|
+
var KdsSnackbar = (0, import_react20.forwardRef)(
|
|
1834
1936
|
({
|
|
1835
1937
|
message,
|
|
1836
1938
|
type = "info",
|
|
@@ -1847,7 +1949,7 @@ var KdsSnackbar = (0, import_react19.forwardRef)(
|
|
|
1847
1949
|
if (!open || !visible) return null;
|
|
1848
1950
|
const resolvedIcon = icon === false ? null : icon ?? DEFAULT_ICONS2[type];
|
|
1849
1951
|
const mergedStyle = autoDismiss ? { ...style, ["--kds-snackbar-duration"]: `${duration}ms` } : style ?? {};
|
|
1850
|
-
return /* @__PURE__ */ (0,
|
|
1952
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1851
1953
|
"div",
|
|
1852
1954
|
{
|
|
1853
1955
|
ref,
|
|
@@ -1857,16 +1959,16 @@ var KdsSnackbar = (0, import_react19.forwardRef)(
|
|
|
1857
1959
|
style: mergedStyle,
|
|
1858
1960
|
...props,
|
|
1859
1961
|
children: [
|
|
1860
|
-
resolvedIcon && /* @__PURE__ */ (0,
|
|
1861
|
-
/* @__PURE__ */ (0,
|
|
1862
|
-
onClose && /* @__PURE__ */ (0,
|
|
1962
|
+
resolvedIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("i", { className: "material-symbols-outlined", children: resolvedIcon }),
|
|
1963
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "max", children: message }),
|
|
1964
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1863
1965
|
"button",
|
|
1864
1966
|
{
|
|
1865
1967
|
type: "button",
|
|
1866
1968
|
className: "kds-snackbar-close",
|
|
1867
1969
|
onClick: onClose,
|
|
1868
1970
|
"aria-label": "Cerrar",
|
|
1869
|
-
children: /* @__PURE__ */ (0,
|
|
1971
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("i", { className: "material-symbols-outlined", children: "close" })
|
|
1870
1972
|
}
|
|
1871
1973
|
)
|
|
1872
1974
|
]
|
|
@@ -1878,7 +1980,7 @@ KdsSnackbar.displayName = "KdsSnackbar";
|
|
|
1878
1980
|
|
|
1879
1981
|
// src/components/core/KdsTooltip/KdsTooltip.tsx
|
|
1880
1982
|
var Tooltip = __toESM(require("@radix-ui/react-tooltip"));
|
|
1881
|
-
var
|
|
1983
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1882
1984
|
function KdsTooltip({
|
|
1883
1985
|
content,
|
|
1884
1986
|
children,
|
|
@@ -1889,9 +1991,9 @@ function KdsTooltip({
|
|
|
1889
1991
|
onOpenChange,
|
|
1890
1992
|
delayDuration = 300
|
|
1891
1993
|
}) {
|
|
1892
|
-
return /* @__PURE__ */ (0,
|
|
1893
|
-
/* @__PURE__ */ (0,
|
|
1894
|
-
/* @__PURE__ */ (0,
|
|
1994
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip.Provider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
|
|
1995
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip.Trigger, { asChild: true, children }),
|
|
1996
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "kds-theme-root", style: { display: "contents" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1895
1997
|
Tooltip.Content,
|
|
1896
1998
|
{
|
|
1897
1999
|
className: (0, import_clsx.clsx)("kds-tooltip", className),
|
|
@@ -1900,7 +2002,7 @@ function KdsTooltip({
|
|
|
1900
2002
|
collisionPadding: 8,
|
|
1901
2003
|
children: [
|
|
1902
2004
|
content,
|
|
1903
|
-
/* @__PURE__ */ (0,
|
|
2005
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip.Arrow, { className: "kds-tooltip-arrow", width: 10, height: 5 })
|
|
1904
2006
|
]
|
|
1905
2007
|
}
|
|
1906
2008
|
) }) })
|
|
@@ -1908,68 +2010,68 @@ function KdsTooltip({
|
|
|
1908
2010
|
}
|
|
1909
2011
|
|
|
1910
2012
|
// src/components/core/KdsAccordion/KdsAccordion.tsx
|
|
1911
|
-
var
|
|
1912
|
-
var
|
|
1913
|
-
var KdsAccordion = (0,
|
|
1914
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2013
|
+
var import_react21 = require("react");
|
|
2014
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
2015
|
+
var KdsAccordion = (0, import_react21.forwardRef)(
|
|
2016
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("details", { ref, className: (0, import_clsx.clsx)("kds-accordion", className), ...props, children })
|
|
1915
2017
|
);
|
|
1916
2018
|
KdsAccordion.displayName = "KdsAccordion";
|
|
1917
|
-
var KdsAccordionSummary = (0,
|
|
1918
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2019
|
+
var KdsAccordionSummary = (0, import_react21.forwardRef)(
|
|
2020
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("summary", { ref, className: (0, import_clsx.clsx)("kds-accordion-summary", className), ...props, children: [
|
|
1919
2021
|
children,
|
|
1920
|
-
/* @__PURE__ */ (0,
|
|
2022
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("i", { className: "material-symbols-outlined", children: "expand_more" })
|
|
1921
2023
|
] })
|
|
1922
2024
|
);
|
|
1923
2025
|
KdsAccordionSummary.displayName = "KdsAccordionSummary";
|
|
1924
|
-
var KdsAccordionDetails = (0,
|
|
1925
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2026
|
+
var KdsAccordionDetails = (0, import_react21.forwardRef)(
|
|
2027
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-accordion-details", className), ...props, children })
|
|
1926
2028
|
);
|
|
1927
2029
|
KdsAccordionDetails.displayName = "KdsAccordionDetails";
|
|
1928
2030
|
|
|
1929
2031
|
// src/components/core/KdsDivider/KdsDivider.tsx
|
|
1930
|
-
var
|
|
1931
|
-
var
|
|
1932
|
-
var KdsDivider = (0,
|
|
1933
|
-
({ dashed, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2032
|
+
var import_react22 = require("react");
|
|
2033
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
2034
|
+
var KdsDivider = (0, import_react22.forwardRef)(
|
|
2035
|
+
({ dashed, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("hr", { ref, className: (0, import_clsx.clsx)(dashed ? "kds-hr-dashed" : "kds-hr", className), ...props })
|
|
1934
2036
|
);
|
|
1935
2037
|
KdsDivider.displayName = "KdsDivider";
|
|
1936
2038
|
|
|
1937
2039
|
// src/components/core/KdsDocumentFrame/KdsDocumentFrame.tsx
|
|
1938
|
-
var
|
|
1939
|
-
var
|
|
1940
|
-
var KdsDocumentFrame = (0,
|
|
1941
|
-
({ src, title, scale = 1, className, style, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2040
|
+
var import_react23 = require("react");
|
|
2041
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2042
|
+
var KdsDocumentFrame = (0, import_react23.forwardRef)(
|
|
2043
|
+
({ src, title, scale = 1, className, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1942
2044
|
"div",
|
|
1943
2045
|
{
|
|
1944
2046
|
ref,
|
|
1945
2047
|
className: (0, import_clsx.clsx)("kds-document-frame", className),
|
|
1946
2048
|
style: { "--kds-document-frame-scale": scale, ...style },
|
|
1947
2049
|
...props,
|
|
1948
|
-
children: /* @__PURE__ */ (0,
|
|
2050
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("iframe", { src, title })
|
|
1949
2051
|
}
|
|
1950
2052
|
)
|
|
1951
2053
|
);
|
|
1952
2054
|
KdsDocumentFrame.displayName = "KdsDocumentFrame";
|
|
1953
2055
|
|
|
1954
2056
|
// src/components/core/KdsSectionNote/KdsSectionNote.tsx
|
|
1955
|
-
var
|
|
1956
|
-
var
|
|
1957
|
-
var KdsSectionNote = (0,
|
|
1958
|
-
({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1959
|
-
/* @__PURE__ */ (0,
|
|
1960
|
-
/* @__PURE__ */ (0,
|
|
2057
|
+
var import_react24 = require("react");
|
|
2058
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2059
|
+
var KdsSectionNote = (0, import_react24.forwardRef)(
|
|
2060
|
+
({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { ref, className: (0, import_clsx.clsx)("kds-section-note", className), ...props, children: [
|
|
2061
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("i", { className: "material-symbols-outlined", children: icon }),
|
|
2062
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children })
|
|
1961
2063
|
] })
|
|
1962
2064
|
);
|
|
1963
2065
|
KdsSectionNote.displayName = "KdsSectionNote";
|
|
1964
2066
|
|
|
1965
2067
|
// src/components/core/KdsStatusBlock/KdsStatusBlock.tsx
|
|
1966
|
-
var
|
|
1967
|
-
var
|
|
1968
|
-
var KdsStatusBlock = (0,
|
|
2068
|
+
var import_react25 = require("react");
|
|
2069
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2070
|
+
var KdsStatusBlock = (0, import_react25.forwardRef)(
|
|
1969
2071
|
({ status, icon, title, description, inline, className, ...props }, ref) => {
|
|
1970
2072
|
const descriptionBelowRow = Boolean(inline && description);
|
|
1971
|
-
const descriptionNode = description ? /* @__PURE__ */ (0,
|
|
1972
|
-
return /* @__PURE__ */ (0,
|
|
2073
|
+
const descriptionNode = description ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "kds-status-block-description", children: description }) : null;
|
|
2074
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1973
2075
|
"div",
|
|
1974
2076
|
{
|
|
1975
2077
|
ref,
|
|
@@ -1982,9 +2084,9 @@ var KdsStatusBlock = (0, import_react24.forwardRef)(
|
|
|
1982
2084
|
"data-status": status,
|
|
1983
2085
|
...props,
|
|
1984
2086
|
children: [
|
|
1985
|
-
/* @__PURE__ */ (0,
|
|
1986
|
-
/* @__PURE__ */ (0,
|
|
1987
|
-
/* @__PURE__ */ (0,
|
|
2087
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
|
|
2088
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
|
|
2089
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { className: "kds-status-block-title", children: title }),
|
|
1988
2090
|
!descriptionBelowRow && descriptionNode
|
|
1989
2091
|
] }),
|
|
1990
2092
|
descriptionBelowRow && descriptionNode
|
|
@@ -1996,30 +2098,45 @@ var KdsStatusBlock = (0, import_react24.forwardRef)(
|
|
|
1996
2098
|
KdsStatusBlock.displayName = "KdsStatusBlock";
|
|
1997
2099
|
|
|
1998
2100
|
// src/components/core/KdsStepper/KdsStepper.tsx
|
|
1999
|
-
var
|
|
2000
|
-
var
|
|
2001
|
-
var KdsStepper = (0,
|
|
2002
|
-
({ steps, current,
|
|
2101
|
+
var import_react26 = require("react");
|
|
2102
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2103
|
+
var KdsStepper = (0, import_react26.forwardRef)(
|
|
2104
|
+
({ steps, current, numbered, color = "info", currentLabelOnly, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2003
2105
|
"div",
|
|
2004
2106
|
{
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
|
|
2107
|
+
ref,
|
|
2108
|
+
className: (0, import_clsx.clsx)(
|
|
2109
|
+
"kds-stepper",
|
|
2110
|
+
numbered && "kds-stepper--numbered",
|
|
2111
|
+
color === "primary" && "kds-stepper--primary",
|
|
2112
|
+
currentLabelOnly && "kds-stepper--current-label",
|
|
2113
|
+
className
|
|
2114
|
+
),
|
|
2115
|
+
...props,
|
|
2116
|
+
children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
2117
|
+
"div",
|
|
2118
|
+
{
|
|
2119
|
+
className: (0, import_clsx.clsx)("kds-step", i < current && "completed", i === current && "current"),
|
|
2120
|
+
"aria-current": i === current ? "step" : void 0,
|
|
2121
|
+
children: [
|
|
2122
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "kds-step-indicator", children: numbered ? i + 1 : null }),
|
|
2123
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "kds-step-label", children: label })
|
|
2124
|
+
]
|
|
2125
|
+
},
|
|
2126
|
+
`${i}-${label}`
|
|
2127
|
+
))
|
|
2128
|
+
}
|
|
2129
|
+
)
|
|
2013
2130
|
);
|
|
2014
2131
|
KdsStepper.displayName = "KdsStepper";
|
|
2015
2132
|
|
|
2016
2133
|
// src/components/core/KdsCopyRow/KdsCopyRow.tsx
|
|
2017
|
-
var
|
|
2018
|
-
var
|
|
2019
|
-
var KdsCopyRow = (0,
|
|
2134
|
+
var import_react27 = require("react");
|
|
2135
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2136
|
+
var KdsCopyRow = (0, import_react27.forwardRef)(
|
|
2020
2137
|
({ label, value, copiedText = "Copiado", className, ...props }, ref) => {
|
|
2021
2138
|
const { copied, copy } = useCopyToClipboard();
|
|
2022
|
-
return /* @__PURE__ */ (0,
|
|
2139
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2023
2140
|
"button",
|
|
2024
2141
|
{
|
|
2025
2142
|
ref,
|
|
@@ -2030,13 +2147,13 @@ var KdsCopyRow = (0, import_react26.forwardRef)(
|
|
|
2030
2147
|
"aria-label": `Copiar ${label}: ${value}`,
|
|
2031
2148
|
...props,
|
|
2032
2149
|
children: [
|
|
2033
|
-
/* @__PURE__ */ (0,
|
|
2034
|
-
/* @__PURE__ */ (0,
|
|
2035
|
-
/* @__PURE__ */ (0,
|
|
2036
|
-
/* @__PURE__ */ (0,
|
|
2150
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: "content_copy" }),
|
|
2151
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
|
|
2152
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "kds-copy-row-label", children: label }),
|
|
2153
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "kds-copy-row-value", children: value })
|
|
2037
2154
|
] }),
|
|
2038
|
-
/* @__PURE__ */ (0,
|
|
2039
|
-
/* @__PURE__ */ (0,
|
|
2155
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "kds-copy-toast", "aria-hidden": "true", children: [
|
|
2156
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("i", { className: "material-symbols-outlined", children: "check_circle" }),
|
|
2040
2157
|
" ",
|
|
2041
2158
|
copiedText
|
|
2042
2159
|
] })
|
|
@@ -2048,8 +2165,8 @@ var KdsCopyRow = (0, import_react26.forwardRef)(
|
|
|
2048
2165
|
KdsCopyRow.displayName = "KdsCopyRow";
|
|
2049
2166
|
|
|
2050
2167
|
// src/components/core/KdsCopyableTable/KdsCopyableTable.tsx
|
|
2051
|
-
var
|
|
2052
|
-
var
|
|
2168
|
+
var import_react28 = require("react");
|
|
2169
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2053
2170
|
async function copyToClipboard(text) {
|
|
2054
2171
|
try {
|
|
2055
2172
|
if (navigator.clipboard?.writeText) {
|
|
@@ -2081,18 +2198,18 @@ function GridVariant({
|
|
|
2081
2198
|
forwardedRef,
|
|
2082
2199
|
rest
|
|
2083
2200
|
}) {
|
|
2084
|
-
return /* @__PURE__ */ (0,
|
|
2201
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2085
2202
|
"div",
|
|
2086
2203
|
{
|
|
2087
2204
|
ref: forwardedRef,
|
|
2088
2205
|
className: (0, import_clsx.clsx)("kds-copyable-table", "kds-copyable-table--grid", className),
|
|
2089
2206
|
...rest,
|
|
2090
|
-
children: gridRows.map((cells, rowIndex) => /* @__PURE__ */ (0,
|
|
2207
|
+
children: gridRows.map((cells, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2091
2208
|
"div",
|
|
2092
2209
|
{
|
|
2093
2210
|
className: "kds-copyable-table-row kds-copyable-table-row--grid",
|
|
2094
2211
|
"data-testid": "kds-grid-row",
|
|
2095
|
-
children: cells.map((text, cellIndex) => /* @__PURE__ */ (0,
|
|
2212
|
+
children: cells.map((text, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2096
2213
|
"span",
|
|
2097
2214
|
{
|
|
2098
2215
|
className: (0, import_clsx.clsx)("kds-grid-cell", disabled && "kds-grid-cell--disabled"),
|
|
@@ -2115,12 +2232,12 @@ function CopyableVariant({
|
|
|
2115
2232
|
forwardedRef,
|
|
2116
2233
|
rest
|
|
2117
2234
|
}) {
|
|
2118
|
-
const copiedTimers = (0,
|
|
2119
|
-
const settlingTimers = (0,
|
|
2120
|
-
const [copiedRows, setCopiedRows] = (0,
|
|
2121
|
-
const [settlingRows, setSettlingRows] = (0,
|
|
2122
|
-
const [allCopied, setAllCopied] = (0,
|
|
2123
|
-
const markCopied = (0,
|
|
2235
|
+
const copiedTimers = (0, import_react28.useRef)(/* @__PURE__ */ new Map());
|
|
2236
|
+
const settlingTimers = (0, import_react28.useRef)(/* @__PURE__ */ new Map());
|
|
2237
|
+
const [copiedRows, setCopiedRows] = (0, import_react28.useState)(/* @__PURE__ */ new Set());
|
|
2238
|
+
const [settlingRows, setSettlingRows] = (0, import_react28.useState)(/* @__PURE__ */ new Set());
|
|
2239
|
+
const [allCopied, setAllCopied] = (0, import_react28.useState)(false);
|
|
2240
|
+
const markCopied = (0, import_react28.useCallback)((indexes, duration = 1500) => {
|
|
2124
2241
|
setCopiedRows((prev) => {
|
|
2125
2242
|
const next = new Set(prev);
|
|
2126
2243
|
indexes.forEach((i) => next.add(i));
|
|
@@ -2179,8 +2296,8 @@ function CopyableVariant({
|
|
|
2179
2296
|
setTimeout(() => setAllCopied(false), 2e3);
|
|
2180
2297
|
}
|
|
2181
2298
|
};
|
|
2182
|
-
return /* @__PURE__ */ (0,
|
|
2183
|
-
/* @__PURE__ */ (0,
|
|
2299
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
|
|
2300
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref: forwardedRef, className: (0, import_clsx.clsx)("kds-copyable-table", className), ...rest, children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2184
2301
|
"div",
|
|
2185
2302
|
{
|
|
2186
2303
|
className: (0, import_clsx.clsx)(
|
|
@@ -2199,13 +2316,13 @@ function CopyableVariant({
|
|
|
2199
2316
|
},
|
|
2200
2317
|
"aria-label": `Copiar ${row.label}: ${row.value}`,
|
|
2201
2318
|
children: [
|
|
2202
|
-
/* @__PURE__ */ (0,
|
|
2203
|
-
/* @__PURE__ */ (0,
|
|
2319
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "kds-key", children: row.label }),
|
|
2320
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "kds-value", children: row.value })
|
|
2204
2321
|
]
|
|
2205
2322
|
},
|
|
2206
2323
|
`${row.label}-${i}`
|
|
2207
2324
|
)) }),
|
|
2208
|
-
showCopyAll && /* @__PURE__ */ (0,
|
|
2325
|
+
showCopyAll && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2209
2326
|
"button",
|
|
2210
2327
|
{
|
|
2211
2328
|
type: "button",
|
|
@@ -2219,14 +2336,14 @@ function CopyableVariant({
|
|
|
2219
2336
|
onClick: handleCopyAll,
|
|
2220
2337
|
"aria-label": allCopied ? copiedAllLabel : copyAllLabel,
|
|
2221
2338
|
children: [
|
|
2222
|
-
/* @__PURE__ */ (0,
|
|
2223
|
-
/* @__PURE__ */ (0,
|
|
2339
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "kds-icon", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("i", { className: "material-symbols-outlined", children: allCopied ? "check" : "content_copy" }) }),
|
|
2340
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: allCopied ? copiedAllLabel : copyAllLabel })
|
|
2224
2341
|
]
|
|
2225
2342
|
}
|
|
2226
2343
|
)
|
|
2227
2344
|
] });
|
|
2228
2345
|
}
|
|
2229
|
-
var KdsCopyableTable = (0,
|
|
2346
|
+
var KdsCopyableTable = (0, import_react28.forwardRef)(
|
|
2230
2347
|
({
|
|
2231
2348
|
rows = [],
|
|
2232
2349
|
variant = "copyable",
|
|
@@ -2239,7 +2356,7 @@ var KdsCopyableTable = (0, import_react27.forwardRef)(
|
|
|
2239
2356
|
...props
|
|
2240
2357
|
}, ref) => {
|
|
2241
2358
|
if (variant === "grid") {
|
|
2242
|
-
return /* @__PURE__ */ (0,
|
|
2359
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2243
2360
|
GridVariant,
|
|
2244
2361
|
{
|
|
2245
2362
|
gridRows,
|
|
@@ -2250,7 +2367,7 @@ var KdsCopyableTable = (0, import_react27.forwardRef)(
|
|
|
2250
2367
|
}
|
|
2251
2368
|
);
|
|
2252
2369
|
}
|
|
2253
|
-
return /* @__PURE__ */ (0,
|
|
2370
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2254
2371
|
CopyableVariant,
|
|
2255
2372
|
{
|
|
2256
2373
|
rows,
|
|
@@ -2267,35 +2384,35 @@ var KdsCopyableTable = (0, import_react27.forwardRef)(
|
|
|
2267
2384
|
KdsCopyableTable.displayName = "KdsCopyableTable";
|
|
2268
2385
|
|
|
2269
2386
|
// src/components/core/KdsExpandPanel/KdsExpandPanel.tsx
|
|
2270
|
-
var
|
|
2271
|
-
var
|
|
2272
|
-
var KdsExpandPanel = (0,
|
|
2387
|
+
var import_react29 = require("react");
|
|
2388
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2389
|
+
var KdsExpandPanel = (0, import_react29.forwardRef)(
|
|
2273
2390
|
({ label, defaultExpanded = false, children, className, ...props }, ref) => {
|
|
2274
|
-
const [expanded, setExpanded] = (0,
|
|
2275
|
-
return /* @__PURE__ */ (0,
|
|
2276
|
-
/* @__PURE__ */ (0,
|
|
2391
|
+
const [expanded, setExpanded] = (0, import_react29.useState)(defaultExpanded);
|
|
2392
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref, className, ...props, children: [
|
|
2393
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
2277
2394
|
"button",
|
|
2278
2395
|
{
|
|
2279
2396
|
className: "kds-expand-toggle",
|
|
2280
2397
|
onClick: () => setExpanded((v) => !v),
|
|
2281
2398
|
"aria-expanded": expanded,
|
|
2282
2399
|
children: [
|
|
2283
|
-
/* @__PURE__ */ (0,
|
|
2284
|
-
/* @__PURE__ */ (0,
|
|
2400
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: label }),
|
|
2401
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("i", { className: "material-symbols-outlined", children: expanded ? "expand_less" : "expand_more" })
|
|
2285
2402
|
]
|
|
2286
2403
|
}
|
|
2287
2404
|
),
|
|
2288
|
-
/* @__PURE__ */ (0,
|
|
2405
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_clsx.clsx)("kds-expand-panel", expanded && "open"), children })
|
|
2289
2406
|
] });
|
|
2290
2407
|
}
|
|
2291
2408
|
);
|
|
2292
2409
|
KdsExpandPanel.displayName = "KdsExpandPanel";
|
|
2293
2410
|
|
|
2294
2411
|
// src/components/core/KdsCountdown/KdsCountdown.tsx
|
|
2295
|
-
var
|
|
2412
|
+
var import_react31 = require("react");
|
|
2296
2413
|
|
|
2297
2414
|
// src/components/core/hooks/useCountdown.ts
|
|
2298
|
-
var
|
|
2415
|
+
var import_react30 = require("react");
|
|
2299
2416
|
function calcRemaining(deadline) {
|
|
2300
2417
|
const diff = Math.max(0, new Date(deadline).getTime() - Date.now());
|
|
2301
2418
|
const totalSeconds = Math.floor(diff / 1e3);
|
|
@@ -2308,8 +2425,8 @@ function calcRemaining(deadline) {
|
|
|
2308
2425
|
};
|
|
2309
2426
|
}
|
|
2310
2427
|
function useCountdown(deadline) {
|
|
2311
|
-
const [state, setState] = (0,
|
|
2312
|
-
(0,
|
|
2428
|
+
const [state, setState] = (0, import_react30.useState)(() => calcRemaining(deadline));
|
|
2429
|
+
(0, import_react30.useEffect)(() => {
|
|
2313
2430
|
const tick = () => setState(calcRemaining(deadline));
|
|
2314
2431
|
const id = setInterval(tick, 1e3);
|
|
2315
2432
|
return () => clearInterval(id);
|
|
@@ -2318,13 +2435,13 @@ function useCountdown(deadline) {
|
|
|
2318
2435
|
}
|
|
2319
2436
|
|
|
2320
2437
|
// src/components/core/KdsCountdown/KdsCountdown.tsx
|
|
2321
|
-
var
|
|
2322
|
-
var KdsCountdown = (0,
|
|
2438
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2439
|
+
var KdsCountdown = (0, import_react31.forwardRef)(
|
|
2323
2440
|
({ deadline, label, onExpire, className, ...props }, ref) => {
|
|
2324
2441
|
const { hours, minutes, seconds, expired, urgent } = useCountdown(deadline);
|
|
2325
|
-
const onExpireRef = (0,
|
|
2442
|
+
const onExpireRef = (0, import_react31.useRef)(onExpire);
|
|
2326
2443
|
onExpireRef.current = onExpire;
|
|
2327
|
-
(0,
|
|
2444
|
+
(0, import_react31.useEffect)(() => {
|
|
2328
2445
|
if (expired) {
|
|
2329
2446
|
onExpireRef.current?.();
|
|
2330
2447
|
}
|
|
@@ -2333,9 +2450,9 @@ var KdsCountdown = (0, import_react30.forwardRef)(
|
|
|
2333
2450
|
return null;
|
|
2334
2451
|
}
|
|
2335
2452
|
const pad = (n) => String(n).padStart(2, "0");
|
|
2336
|
-
return /* @__PURE__ */ (0,
|
|
2337
|
-
label && /* @__PURE__ */ (0,
|
|
2338
|
-
/* @__PURE__ */ (0,
|
|
2453
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-countdown", urgent && "urgent", className), ...props, children: [
|
|
2454
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "kds-countdown-label", children: label }),
|
|
2455
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "kds-countdown-value", children: [
|
|
2339
2456
|
pad(hours),
|
|
2340
2457
|
":",
|
|
2341
2458
|
pad(minutes),
|
|
@@ -2348,18 +2465,18 @@ var KdsCountdown = (0, import_react30.forwardRef)(
|
|
|
2348
2465
|
KdsCountdown.displayName = "KdsCountdown";
|
|
2349
2466
|
|
|
2350
2467
|
// src/components/core/KdsSegmentedTabs/KdsSegmentedTabs.tsx
|
|
2351
|
-
var
|
|
2352
|
-
var
|
|
2353
|
-
var KdsSegmentedTabs = (0,
|
|
2354
|
-
(props, ref) => /* @__PURE__ */ (0,
|
|
2468
|
+
var import_react32 = require("react");
|
|
2469
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2470
|
+
var KdsSegmentedTabs = (0, import_react32.forwardRef)(
|
|
2471
|
+
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(KdsTabs, { ref, ...props })
|
|
2355
2472
|
);
|
|
2356
2473
|
KdsSegmentedTabs.displayName = "KdsSegmentedTabs";
|
|
2357
2474
|
|
|
2358
2475
|
// src/components/core/KdsFab/KdsFab.tsx
|
|
2359
|
-
var
|
|
2360
|
-
var
|
|
2361
|
-
var KdsFab = (0,
|
|
2362
|
-
({ icon, position = "top-right", hidden = false, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2476
|
+
var import_react33 = require("react");
|
|
2477
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2478
|
+
var KdsFab = (0, import_react33.forwardRef)(
|
|
2479
|
+
({ icon, position = "top-right", hidden = false, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2363
2480
|
"button",
|
|
2364
2481
|
{
|
|
2365
2482
|
ref,
|
|
@@ -2373,17 +2490,17 @@ var KdsFab = (0, import_react32.forwardRef)(
|
|
|
2373
2490
|
"aria-hidden": hidden || void 0,
|
|
2374
2491
|
tabIndex: hidden ? -1 : void 0,
|
|
2375
2492
|
...props,
|
|
2376
|
-
children: /* @__PURE__ */ (0,
|
|
2493
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", { className: "material-symbols-outlined", children: icon })
|
|
2377
2494
|
}
|
|
2378
2495
|
)
|
|
2379
2496
|
);
|
|
2380
2497
|
KdsFab.displayName = "KdsFab";
|
|
2381
2498
|
|
|
2382
2499
|
// src/components/core/KdsEmptyState/KdsEmptyState.tsx
|
|
2383
|
-
var
|
|
2384
|
-
var
|
|
2385
|
-
var KdsEmptyState = (0,
|
|
2386
|
-
({ icon = "hide_source", title, description, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2500
|
+
var import_react34 = require("react");
|
|
2501
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2502
|
+
var KdsEmptyState = (0, import_react34.forwardRef)(
|
|
2503
|
+
({ icon = "hide_source", title, description, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
2387
2504
|
"div",
|
|
2388
2505
|
{
|
|
2389
2506
|
ref,
|
|
@@ -2391,10 +2508,10 @@ var KdsEmptyState = (0, import_react33.forwardRef)(
|
|
|
2391
2508
|
className: (0, import_clsx.clsx)("kds-empty-state", className),
|
|
2392
2509
|
...props,
|
|
2393
2510
|
children: [
|
|
2394
|
-
/* @__PURE__ */ (0,
|
|
2395
|
-
/* @__PURE__ */ (0,
|
|
2396
|
-
/* @__PURE__ */ (0,
|
|
2397
|
-
description && /* @__PURE__ */ (0,
|
|
2511
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: icon }),
|
|
2512
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "kds-empty-state-text", children: [
|
|
2513
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(KdsTypography, { variant: "body", color: "primary", children: title }),
|
|
2514
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(KdsTypography, { variant: "body", color: "secondary", children: description })
|
|
2398
2515
|
] })
|
|
2399
2516
|
]
|
|
2400
2517
|
}
|
|
@@ -2403,12 +2520,12 @@ var KdsEmptyState = (0, import_react33.forwardRef)(
|
|
|
2403
2520
|
KdsEmptyState.displayName = "KdsEmptyState";
|
|
2404
2521
|
|
|
2405
2522
|
// src/components/domain/KdsBankRow/KdsBankRow.tsx
|
|
2406
|
-
var
|
|
2407
|
-
var
|
|
2408
|
-
var KdsBankRow = (0,
|
|
2523
|
+
var import_react35 = require("react");
|
|
2524
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2525
|
+
var KdsBankRow = (0, import_react35.forwardRef)(
|
|
2409
2526
|
({ name, logoUrl, selected, hideLogo, className, ...props }, ref) => {
|
|
2410
2527
|
const nameStr = typeof name === "string" ? name : "";
|
|
2411
|
-
return /* @__PURE__ */ (0,
|
|
2528
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
2412
2529
|
"button",
|
|
2413
2530
|
{
|
|
2414
2531
|
ref,
|
|
@@ -2416,9 +2533,9 @@ var KdsBankRow = (0, import_react34.forwardRef)(
|
|
|
2416
2533
|
className: (0, import_clsx.clsx)("kds-bank-row", selected && "selected", className),
|
|
2417
2534
|
...props,
|
|
2418
2535
|
children: [
|
|
2419
|
-
!hideLogo && /* @__PURE__ */ (0,
|
|
2420
|
-
/* @__PURE__ */ (0,
|
|
2421
|
-
/* @__PURE__ */ (0,
|
|
2536
|
+
!hideLogo && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { src: logoUrl, alt: nameStr }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "initials", children: nameStr.charAt(0) }) }),
|
|
2537
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-bank-row-name", children: name }),
|
|
2538
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("i", { className: "material-symbols-outlined", children: selected ? "check_circle" : "chevron_right" })
|
|
2422
2539
|
]
|
|
2423
2540
|
}
|
|
2424
2541
|
);
|
|
@@ -2427,32 +2544,32 @@ var KdsBankRow = (0, import_react34.forwardRef)(
|
|
|
2427
2544
|
KdsBankRow.displayName = "KdsBankRow";
|
|
2428
2545
|
|
|
2429
2546
|
// src/components/domain/KdsBankList/KdsBankList.tsx
|
|
2430
|
-
var
|
|
2431
|
-
var
|
|
2432
|
-
var KdsBankList = (0,
|
|
2433
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2547
|
+
var import_react36 = require("react");
|
|
2548
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2549
|
+
var KdsBankList = (0, import_react36.forwardRef)(
|
|
2550
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bank-list", className), role: "list", ...props, children })
|
|
2434
2551
|
);
|
|
2435
2552
|
KdsBankList.displayName = "KdsBankList";
|
|
2436
2553
|
|
|
2437
2554
|
// src/components/domain/KdsBankModal/KdsBankModal.tsx
|
|
2438
|
-
var
|
|
2555
|
+
var import_react37 = require("react");
|
|
2439
2556
|
var Dialog = __toESM(require("@radix-ui/react-dialog"));
|
|
2440
|
-
var
|
|
2441
|
-
var KdsBankModal = (0,
|
|
2557
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
2558
|
+
var KdsBankModal = (0, import_react37.forwardRef)(
|
|
2442
2559
|
({ open, onClose, title = "Selecciona tu banco", searchPlaceholder = "Buscar banco...", onSearch, children, className, container }, ref) => {
|
|
2443
|
-
const [query, setQuery] = (0,
|
|
2560
|
+
const [query, setQuery] = (0, import_react37.useState)("");
|
|
2444
2561
|
const handleSearch = (value) => {
|
|
2445
2562
|
setQuery(value);
|
|
2446
2563
|
onSearch?.(value);
|
|
2447
2564
|
};
|
|
2448
|
-
return /* @__PURE__ */ (0,
|
|
2565
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog.Root, { open, onOpenChange: (o) => {
|
|
2449
2566
|
if (!o) onClose();
|
|
2450
|
-
}, children: /* @__PURE__ */ (0,
|
|
2451
|
-
/* @__PURE__ */ (0,
|
|
2452
|
-
/* @__PURE__ */ (0,
|
|
2453
|
-
/* @__PURE__ */ (0,
|
|
2567
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Dialog.Content, { ref, className: (0, import_clsx.clsx)("kds-bank-modal", className), children: [
|
|
2568
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "kds-bank-modal-header", children: [
|
|
2569
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { children: title }) }),
|
|
2570
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { className: "kds-bank-modal-close", "aria-label": "Cerrar", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("i", { className: "material-symbols-outlined", children: "close" }) }) })
|
|
2454
2571
|
] }),
|
|
2455
|
-
/* @__PURE__ */ (0,
|
|
2572
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "kds-bank-modal-search", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
2456
2573
|
KdsSearchField,
|
|
2457
2574
|
{
|
|
2458
2575
|
placeholder: searchPlaceholder,
|
|
@@ -2460,82 +2577,639 @@ var KdsBankModal = (0, import_react36.forwardRef)(
|
|
|
2460
2577
|
onChange: (e) => handleSearch(e.target.value)
|
|
2461
2578
|
}
|
|
2462
2579
|
) }),
|
|
2463
|
-
/* @__PURE__ */ (0,
|
|
2580
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "kds-bank-modal-body", children })
|
|
2464
2581
|
] }) }) }) });
|
|
2465
2582
|
}
|
|
2466
2583
|
);
|
|
2467
2584
|
KdsBankModal.displayName = "KdsBankModal";
|
|
2468
2585
|
|
|
2586
|
+
// src/components/domain/KdsContract/KdsContract.tsx
|
|
2587
|
+
var import_react38 = require("react");
|
|
2588
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2589
|
+
var END_TOLERANCE_PX = 8;
|
|
2590
|
+
var KdsContract = (0, import_react38.forwardRef)(
|
|
2591
|
+
({
|
|
2592
|
+
children,
|
|
2593
|
+
contentLabel = "Contrato",
|
|
2594
|
+
acceptLabel = "Declaro que le\xED y acepto el contrato",
|
|
2595
|
+
hint = "Despl\xE1zate hasta el final del contrato para poder aceptarlo.",
|
|
2596
|
+
name,
|
|
2597
|
+
accepted,
|
|
2598
|
+
onAcceptedChange,
|
|
2599
|
+
onReadComplete,
|
|
2600
|
+
className,
|
|
2601
|
+
...props
|
|
2602
|
+
}, ref) => {
|
|
2603
|
+
const hintId = (0, import_react38.useId)();
|
|
2604
|
+
const contentRef = (0, import_react38.useRef)(null);
|
|
2605
|
+
const [read, setRead] = (0, import_react38.useState)(false);
|
|
2606
|
+
const onReadCompleteRef = (0, import_react38.useRef)(onReadComplete);
|
|
2607
|
+
onReadCompleteRef.current = onReadComplete;
|
|
2608
|
+
const check = (0, import_react38.useCallback)(() => {
|
|
2609
|
+
const el = contentRef.current;
|
|
2610
|
+
if (!el || el.clientHeight === 0) return;
|
|
2611
|
+
if (el.scrollTop + el.clientHeight >= el.scrollHeight - END_TOLERANCE_PX) {
|
|
2612
|
+
setRead(true);
|
|
2613
|
+
}
|
|
2614
|
+
}, []);
|
|
2615
|
+
(0, import_react38.useEffect)(() => {
|
|
2616
|
+
check();
|
|
2617
|
+
const el = contentRef.current;
|
|
2618
|
+
if (!el || typeof ResizeObserver === "undefined") return void 0;
|
|
2619
|
+
const observer = new ResizeObserver(check);
|
|
2620
|
+
observer.observe(el);
|
|
2621
|
+
return () => observer.disconnect();
|
|
2622
|
+
}, [check]);
|
|
2623
|
+
(0, import_react38.useEffect)(() => {
|
|
2624
|
+
if (read) onReadCompleteRef.current?.();
|
|
2625
|
+
}, [read]);
|
|
2626
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-contract", read && "kds-contract--read", className), ...props, children: [
|
|
2627
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2628
|
+
"div",
|
|
2629
|
+
{
|
|
2630
|
+
ref: contentRef,
|
|
2631
|
+
className: "kds-contract-content",
|
|
2632
|
+
role: "region",
|
|
2633
|
+
"aria-label": contentLabel,
|
|
2634
|
+
tabIndex: 0,
|
|
2635
|
+
onScroll: read ? void 0 : check,
|
|
2636
|
+
children
|
|
2637
|
+
}
|
|
2638
|
+
),
|
|
2639
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "checkbox kds-contract-accept", children: [
|
|
2640
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2641
|
+
"input",
|
|
2642
|
+
{
|
|
2643
|
+
type: "checkbox",
|
|
2644
|
+
name,
|
|
2645
|
+
checked: accepted,
|
|
2646
|
+
disabled: !read,
|
|
2647
|
+
"aria-describedby": read ? void 0 : hintId,
|
|
2648
|
+
onChange: (e) => onAcceptedChange?.(e.target.checked)
|
|
2649
|
+
}
|
|
2650
|
+
),
|
|
2651
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: acceptLabel })
|
|
2652
|
+
] }),
|
|
2653
|
+
!read && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "kds-contract-hint", id: hintId, children: hint })
|
|
2654
|
+
] });
|
|
2655
|
+
}
|
|
2656
|
+
);
|
|
2657
|
+
KdsContract.displayName = "KdsContract";
|
|
2658
|
+
|
|
2659
|
+
// src/components/domain/KdsFeedbackCard/KdsFeedbackCard.tsx
|
|
2660
|
+
var import_react39 = require("react");
|
|
2661
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2662
|
+
var KdsFeedbackCard = (0, import_react39.forwardRef)(
|
|
2663
|
+
({
|
|
2664
|
+
title,
|
|
2665
|
+
description,
|
|
2666
|
+
icon = "auto_awesome",
|
|
2667
|
+
children,
|
|
2668
|
+
canSubmit,
|
|
2669
|
+
onSubmit,
|
|
2670
|
+
submitLabel = "Enviar",
|
|
2671
|
+
submitted = false,
|
|
2672
|
+
thanksTitle = "\xA1Gracias por contarnos!",
|
|
2673
|
+
thanksDescription = "Tu respuesta nos ayuda a llegar a m\xE1s negocios como el tuyo.",
|
|
2674
|
+
className,
|
|
2675
|
+
...props
|
|
2676
|
+
}, ref) => {
|
|
2677
|
+
const titleId = (0, import_react39.useId)();
|
|
2678
|
+
const titleRef = (0, import_react39.useRef)(null);
|
|
2679
|
+
const wasSubmitted = (0, import_react39.useRef)(submitted);
|
|
2680
|
+
(0, import_react39.useEffect)(() => {
|
|
2681
|
+
if (submitted && !wasSubmitted.current) titleRef.current?.focus();
|
|
2682
|
+
wasSubmitted.current = submitted;
|
|
2683
|
+
}, [submitted]);
|
|
2684
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
2685
|
+
"section",
|
|
2686
|
+
{
|
|
2687
|
+
ref,
|
|
2688
|
+
className: (0, import_clsx.clsx)("kds-feedback-card", submitted && "kds-feedback-card--submitted", className),
|
|
2689
|
+
"aria-labelledby": titleId,
|
|
2690
|
+
"aria-live": "polite",
|
|
2691
|
+
...props,
|
|
2692
|
+
children: [
|
|
2693
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "kds-feedback-card-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", { className: "material-symbols-outlined", children: submitted ? "check" : icon }) }),
|
|
2694
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "kds-feedback-card-body", children: [
|
|
2695
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "kds-feedback-card-text", children: [
|
|
2696
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2697
|
+
"div",
|
|
2698
|
+
{
|
|
2699
|
+
ref: titleRef,
|
|
2700
|
+
className: "kds-feedback-card-title",
|
|
2701
|
+
id: titleId,
|
|
2702
|
+
tabIndex: submitted ? -1 : void 0,
|
|
2703
|
+
children: submitted ? thanksTitle : title
|
|
2704
|
+
}
|
|
2705
|
+
),
|
|
2706
|
+
(submitted ? thanksDescription : description) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "kds-feedback-card-description", children: submitted ? thanksDescription : description })
|
|
2707
|
+
] }),
|
|
2708
|
+
!submitted && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
2709
|
+
children,
|
|
2710
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KdsButton, { variant: "outlined", disabled: !canSubmit, onClick: onSubmit, children: submitLabel })
|
|
2711
|
+
] })
|
|
2712
|
+
] })
|
|
2713
|
+
]
|
|
2714
|
+
}
|
|
2715
|
+
);
|
|
2716
|
+
}
|
|
2717
|
+
);
|
|
2718
|
+
KdsFeedbackCard.displayName = "KdsFeedbackCard";
|
|
2719
|
+
|
|
2720
|
+
// src/components/domain/KdsConsentCard/KdsConsentCard.tsx
|
|
2721
|
+
var import_react40 = require("react");
|
|
2722
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2723
|
+
var KdsConsentCard = (0, import_react40.forwardRef)(
|
|
2724
|
+
({
|
|
2725
|
+
requester,
|
|
2726
|
+
resource,
|
|
2727
|
+
heading,
|
|
2728
|
+
subtitle,
|
|
2729
|
+
logo,
|
|
2730
|
+
sections,
|
|
2731
|
+
onAccept,
|
|
2732
|
+
onReject,
|
|
2733
|
+
loading = false,
|
|
2734
|
+
acceptLabel = "Autorizar",
|
|
2735
|
+
rejectLabel = "Rechazar",
|
|
2736
|
+
loadingLabel = "Autorizando",
|
|
2737
|
+
className,
|
|
2738
|
+
...props
|
|
2739
|
+
}, ref) => {
|
|
2740
|
+
const titleId = (0, import_react40.useId)();
|
|
2741
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
2742
|
+
"section",
|
|
2743
|
+
{
|
|
2744
|
+
ref,
|
|
2745
|
+
className: (0, import_clsx.clsx)("kds-card-elevated", "kds-consent-card", className),
|
|
2746
|
+
"aria-labelledby": titleId,
|
|
2747
|
+
...props,
|
|
2748
|
+
children: [
|
|
2749
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "kds-consent-card-header", children: [
|
|
2750
|
+
logo && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "kds-consent-card-logo", children: logo }),
|
|
2751
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "kds-consent-card-title", role: "heading", "aria-level": 2, id: titleId, children: heading ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
|
|
2752
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("strong", { children: requester }),
|
|
2753
|
+
" solicita acceso a ",
|
|
2754
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("strong", { children: resource })
|
|
2755
|
+
] }) }),
|
|
2756
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "kds-consent-card-subtitle", children: subtitle })
|
|
2757
|
+
] }),
|
|
2758
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "kds-consent-card-body", children: [
|
|
2759
|
+
sections.map((section, i) => {
|
|
2760
|
+
const sectionId = `${titleId}-s${i}`;
|
|
2761
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
2762
|
+
"div",
|
|
2763
|
+
{
|
|
2764
|
+
className: "kds-consent-card-section",
|
|
2765
|
+
role: "group",
|
|
2766
|
+
"aria-labelledby": sectionId,
|
|
2767
|
+
children: [
|
|
2768
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2769
|
+
"div",
|
|
2770
|
+
{
|
|
2771
|
+
className: "kds-consent-card-section-title",
|
|
2772
|
+
role: "heading",
|
|
2773
|
+
"aria-level": 3,
|
|
2774
|
+
id: sectionId,
|
|
2775
|
+
children: section.title
|
|
2776
|
+
}
|
|
2777
|
+
),
|
|
2778
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: "kds-consent-card-items", children: section.items.map((item, j) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { className: "kds-consent-card-item", children: [
|
|
2779
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: item.icon }),
|
|
2780
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: item.text })
|
|
2781
|
+
] }, j)) })
|
|
2782
|
+
]
|
|
2783
|
+
},
|
|
2784
|
+
section.title
|
|
2785
|
+
);
|
|
2786
|
+
}),
|
|
2787
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "kds-consent-card-actions", children: [
|
|
2788
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KdsButton, { variant: "primary", fullWidth: true, loading, onClick: onAccept, children: loading ? loadingLabel : acceptLabel }),
|
|
2789
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KdsButton, { variant: "outlined", fullWidth: true, disabled: loading, onClick: onReject, children: rejectLabel })
|
|
2790
|
+
] })
|
|
2791
|
+
] })
|
|
2792
|
+
]
|
|
2793
|
+
}
|
|
2794
|
+
);
|
|
2795
|
+
}
|
|
2796
|
+
);
|
|
2797
|
+
KdsConsentCard.displayName = "KdsConsentCard";
|
|
2798
|
+
|
|
2799
|
+
// src/components/domain/KdsSidebar/KdsSidebar.tsx
|
|
2800
|
+
var import_react41 = require("react");
|
|
2801
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2802
|
+
var KdsSidebar = (0, import_react41.forwardRef)(
|
|
2803
|
+
({
|
|
2804
|
+
header,
|
|
2805
|
+
items,
|
|
2806
|
+
navLabel = "Men\xFA de la cuenta",
|
|
2807
|
+
open = false,
|
|
2808
|
+
onClose,
|
|
2809
|
+
mobileTitle = "Men\xFA",
|
|
2810
|
+
closeLabel = "Cerrar men\xFA",
|
|
2811
|
+
className,
|
|
2812
|
+
...props
|
|
2813
|
+
}, ref) => {
|
|
2814
|
+
const [menuOpen, setMenuOpen] = (0, import_react41.useState)(false);
|
|
2815
|
+
const asideRef = (0, import_react41.useRef)(null);
|
|
2816
|
+
const headerRef = (0, import_react41.useRef)(null);
|
|
2817
|
+
const toggleRef = (0, import_react41.useRef)(null);
|
|
2818
|
+
const closeRef = (0, import_react41.useRef)(null);
|
|
2819
|
+
const menuId = (0, import_react41.useId)();
|
|
2820
|
+
const onCloseRef = (0, import_react41.useRef)(onClose);
|
|
2821
|
+
onCloseRef.current = onClose;
|
|
2822
|
+
const setAsideRef = (el) => {
|
|
2823
|
+
asideRef.current = el;
|
|
2824
|
+
if (typeof ref === "function") ref(el);
|
|
2825
|
+
else if (ref) ref.current = el;
|
|
2826
|
+
};
|
|
2827
|
+
(0, import_react41.useEffect)(() => {
|
|
2828
|
+
if (!open) return void 0;
|
|
2829
|
+
const opener = document.activeElement;
|
|
2830
|
+
closeRef.current?.focus();
|
|
2831
|
+
const onKey = (e) => {
|
|
2832
|
+
if (e.key === "Escape") onCloseRef.current?.();
|
|
2833
|
+
};
|
|
2834
|
+
document.addEventListener("keydown", onKey);
|
|
2835
|
+
return () => {
|
|
2836
|
+
document.removeEventListener("keydown", onKey);
|
|
2837
|
+
if (opener && opener !== document.body && opener.isConnected) opener.focus();
|
|
2838
|
+
};
|
|
2839
|
+
}, [open]);
|
|
2840
|
+
(0, import_react41.useEffect)(() => {
|
|
2841
|
+
const el = asideRef.current;
|
|
2842
|
+
if (!el || typeof window.matchMedia !== "function") return void 0;
|
|
2843
|
+
const mobile = window.matchMedia("(max-width: 768px)");
|
|
2844
|
+
const sync = () => el.toggleAttribute("inert", mobile.matches && !open);
|
|
2845
|
+
sync();
|
|
2846
|
+
mobile.addEventListener("change", sync);
|
|
2847
|
+
return () => mobile.removeEventListener("change", sync);
|
|
2848
|
+
}, [open]);
|
|
2849
|
+
(0, import_react41.useEffect)(() => {
|
|
2850
|
+
if (!menuOpen) return void 0;
|
|
2851
|
+
const onDocClick = (e) => {
|
|
2852
|
+
if (!headerRef.current?.contains(e.target)) setMenuOpen(false);
|
|
2853
|
+
};
|
|
2854
|
+
document.addEventListener("click", onDocClick);
|
|
2855
|
+
return () => document.removeEventListener("click", onDocClick);
|
|
2856
|
+
}, [menuOpen]);
|
|
2857
|
+
const hasMenu = header.menu !== void 0;
|
|
2858
|
+
const onHeaderKeyDown = (e) => {
|
|
2859
|
+
if (e.key === "Escape" && menuOpen) {
|
|
2860
|
+
e.stopPropagation();
|
|
2861
|
+
setMenuOpen(false);
|
|
2862
|
+
toggleRef.current?.focus();
|
|
2863
|
+
}
|
|
2864
|
+
};
|
|
2865
|
+
const headerContent = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
2866
|
+
header.icon ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { className: "material-symbols-outlined kds-sidebar-icon", "aria-hidden": "true", children: header.icon }) : header.avatar && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "kds-sidebar-avatar", "aria-hidden": "true", children: header.avatar }),
|
|
2867
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "kds-sidebar-header-text", children: [
|
|
2868
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "kds-sidebar-title", children: header.title }),
|
|
2869
|
+
header.subtitle && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "kds-sidebar-subtitle", children: header.subtitle })
|
|
2870
|
+
] })
|
|
2871
|
+
] });
|
|
2872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
2873
|
+
"aside",
|
|
2874
|
+
{
|
|
2875
|
+
ref: setAsideRef,
|
|
2876
|
+
className: (0, import_clsx.clsx)("kds-sidebar", open && "kds-sidebar-open", className),
|
|
2877
|
+
...props,
|
|
2878
|
+
children: [
|
|
2879
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "kds-sidebar-mobile-header", children: [
|
|
2880
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: mobileTitle }),
|
|
2881
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2882
|
+
"button",
|
|
2883
|
+
{
|
|
2884
|
+
ref: closeRef,
|
|
2885
|
+
type: "button",
|
|
2886
|
+
className: "kds-sidebar-close-btn",
|
|
2887
|
+
"aria-label": closeLabel,
|
|
2888
|
+
onClick: () => onClose?.(),
|
|
2889
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: "close" })
|
|
2890
|
+
}
|
|
2891
|
+
)
|
|
2892
|
+
] }),
|
|
2893
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref: headerRef, className: "kds-sidebar-header", onKeyDown: onHeaderKeyDown, children: hasMenu ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
2894
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
2895
|
+
"button",
|
|
2896
|
+
{
|
|
2897
|
+
ref: toggleRef,
|
|
2898
|
+
type: "button",
|
|
2899
|
+
className: "kds-sidebar-header-toggle",
|
|
2900
|
+
"aria-haspopup": "true",
|
|
2901
|
+
"aria-expanded": menuOpen,
|
|
2902
|
+
"aria-controls": menuId,
|
|
2903
|
+
onClick: () => setMenuOpen((v) => !v),
|
|
2904
|
+
children: [
|
|
2905
|
+
headerContent,
|
|
2906
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { className: "material-symbols-outlined kds-sidebar-dropdown-icon", "aria-hidden": "true", children: "expand_more" })
|
|
2907
|
+
]
|
|
2908
|
+
}
|
|
2909
|
+
),
|
|
2910
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2911
|
+
"div",
|
|
2912
|
+
{
|
|
2913
|
+
id: menuId,
|
|
2914
|
+
className: (0, import_clsx.clsx)(
|
|
2915
|
+
"kds-sidebar-header-dropdown surface elevate border small-round",
|
|
2916
|
+
menuOpen && "kds-dropdown-open"
|
|
2917
|
+
),
|
|
2918
|
+
children: header.menu
|
|
2919
|
+
}
|
|
2920
|
+
)
|
|
2921
|
+
] }) : headerContent }),
|
|
2922
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("nav", { className: "kds-sidebar-nav", "aria-label": navLabel, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
2923
|
+
"a",
|
|
2924
|
+
{
|
|
2925
|
+
href: item.href,
|
|
2926
|
+
className: (0, import_clsx.clsx)("kds-sidebar-nav-item", item.active && "active"),
|
|
2927
|
+
"aria-current": item.active ? "page" : void 0,
|
|
2928
|
+
...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
|
|
2929
|
+
children: [
|
|
2930
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: item.icon }),
|
|
2931
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: item.label })
|
|
2932
|
+
]
|
|
2933
|
+
},
|
|
2934
|
+
`${i}-${item.href}`
|
|
2935
|
+
)) })
|
|
2936
|
+
]
|
|
2937
|
+
}
|
|
2938
|
+
);
|
|
2939
|
+
}
|
|
2940
|
+
);
|
|
2941
|
+
KdsSidebar.displayName = "KdsSidebar";
|
|
2942
|
+
|
|
2943
|
+
// src/components/domain/KdsNavbar/KdsNavbar.tsx
|
|
2944
|
+
var import_react42 = require("react");
|
|
2945
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2946
|
+
var KdsNavbar = (0, import_react42.forwardRef)(
|
|
2947
|
+
({
|
|
2948
|
+
brand,
|
|
2949
|
+
brandHref = "/",
|
|
2950
|
+
variant = "primary",
|
|
2951
|
+
onMenuClick,
|
|
2952
|
+
menuOpen,
|
|
2953
|
+
menuControls,
|
|
2954
|
+
menuLabel = "Men\xFA",
|
|
2955
|
+
children,
|
|
2956
|
+
className,
|
|
2957
|
+
...props
|
|
2958
|
+
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
2959
|
+
"nav",
|
|
2960
|
+
{
|
|
2961
|
+
ref,
|
|
2962
|
+
className: (0, import_clsx.clsx)(
|
|
2963
|
+
variant === "primary" ? "primary no-margin" : "no-margin surface secondary-nav-border",
|
|
2964
|
+
className
|
|
2965
|
+
),
|
|
2966
|
+
...props,
|
|
2967
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "kds-container-center", children: [
|
|
2968
|
+
onMenuClick && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
2969
|
+
"button",
|
|
2970
|
+
{
|
|
2971
|
+
type: "button",
|
|
2972
|
+
className: "kds-hamburger-btn",
|
|
2973
|
+
"aria-label": menuLabel,
|
|
2974
|
+
"aria-expanded": menuOpen,
|
|
2975
|
+
"aria-controls": menuControls,
|
|
2976
|
+
onClick: onMenuClick,
|
|
2977
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: "menu" })
|
|
2978
|
+
}
|
|
2979
|
+
),
|
|
2980
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("a", { href: brandHref, className: "kds-navbar-brand", children: brand }),
|
|
2981
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "max" }),
|
|
2982
|
+
children
|
|
2983
|
+
] })
|
|
2984
|
+
}
|
|
2985
|
+
)
|
|
2986
|
+
);
|
|
2987
|
+
KdsNavbar.displayName = "KdsNavbar";
|
|
2988
|
+
|
|
2989
|
+
// src/components/domain/KdsFooter/KdsFooter.tsx
|
|
2990
|
+
var import_react43 = require("react");
|
|
2991
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2992
|
+
var KdsFooter = (0, import_react43.forwardRef)(
|
|
2993
|
+
({ columns, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("footer", { ref, className: (0, import_clsx.clsx)("primary", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "kds-container-center", children: [
|
|
2994
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "kds-grid", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "kds-col-sm-12 kds-col-md-6 kds-col-lg-2", children: [
|
|
2995
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h6", { className: "kds-text-center", children: column.title }),
|
|
2996
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("nav", { className: "kds-footer-nav", "aria-label": column.title, children: column.links.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2997
|
+
"a",
|
|
2998
|
+
{
|
|
2999
|
+
href: link.href,
|
|
3000
|
+
...link.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
|
|
3001
|
+
children: link.label
|
|
3002
|
+
},
|
|
3003
|
+
`${i}-${link.href}`
|
|
3004
|
+
)) })
|
|
3005
|
+
] }, column.title)) }),
|
|
3006
|
+
children
|
|
3007
|
+
] }) })
|
|
3008
|
+
);
|
|
3009
|
+
KdsFooter.displayName = "KdsFooter";
|
|
3010
|
+
|
|
2469
3011
|
// src/components/domain/KdsQrRow/KdsQrRow.tsx
|
|
2470
|
-
var
|
|
2471
|
-
var
|
|
2472
|
-
var KdsQrRow = (0,
|
|
2473
|
-
({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2474
|
-
/* @__PURE__ */ (0,
|
|
2475
|
-
/* @__PURE__ */ (0,
|
|
2476
|
-
/* @__PURE__ */ (0,
|
|
2477
|
-
description && /* @__PURE__ */ (0,
|
|
3012
|
+
var import_react44 = require("react");
|
|
3013
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3014
|
+
var KdsQrRow = (0, import_react44.forwardRef)(
|
|
3015
|
+
({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("button", { ref, type: "button", className: (0, import_clsx.clsx)("kds-qr-row", className), ...props, children: [
|
|
3016
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
|
|
3017
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "kds-qr-text", children: [
|
|
3018
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "kds-qr-title", children: name }),
|
|
3019
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "kds-qr-subtitle", children: description })
|
|
2478
3020
|
] }),
|
|
2479
|
-
badge && /* @__PURE__ */ (0,
|
|
2480
|
-
/* @__PURE__ */ (0,
|
|
3021
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "kds-qr-badge", children: badge }),
|
|
3022
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "material-symbols-outlined", children: "chevron_right" })
|
|
2481
3023
|
] })
|
|
2482
3024
|
);
|
|
2483
3025
|
KdsQrRow.displayName = "KdsQrRow";
|
|
2484
3026
|
|
|
2485
3027
|
// src/components/domain/KdsCardSelector/KdsCardSelector.tsx
|
|
2486
|
-
var
|
|
2487
|
-
var
|
|
2488
|
-
var KdsCardSelector = (0,
|
|
2489
|
-
({
|
|
2490
|
-
|
|
3028
|
+
var import_react45 = require("react");
|
|
3029
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
3030
|
+
var KdsCardSelector = (0, import_react45.forwardRef)(
|
|
3031
|
+
({
|
|
3032
|
+
icon,
|
|
3033
|
+
title,
|
|
3034
|
+
description,
|
|
3035
|
+
selected,
|
|
3036
|
+
radio,
|
|
3037
|
+
name,
|
|
3038
|
+
value,
|
|
3039
|
+
checked,
|
|
3040
|
+
onCheckedChange,
|
|
3041
|
+
children,
|
|
3042
|
+
className,
|
|
3043
|
+
disabled,
|
|
3044
|
+
type,
|
|
3045
|
+
...props
|
|
3046
|
+
}, ref) => {
|
|
3047
|
+
const radioId = (0, import_react45.useId)();
|
|
3048
|
+
const descriptionId = `${radioId}-description`;
|
|
3049
|
+
const iconNode = icon && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "kds-card-selector-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "material-symbols-outlined", children: icon }) });
|
|
3050
|
+
if (radio && name !== void 0 && value !== void 0) {
|
|
3051
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
3052
|
+
"div",
|
|
3053
|
+
{
|
|
3054
|
+
ref,
|
|
3055
|
+
className: (0, import_clsx.clsx)("kds-card-selector", "kds-card-selector--radio", className),
|
|
3056
|
+
...props,
|
|
3057
|
+
children: [
|
|
3058
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3059
|
+
"input",
|
|
3060
|
+
{
|
|
3061
|
+
type: "radio",
|
|
3062
|
+
className: "kds-card-selector-radio",
|
|
3063
|
+
id: radioId,
|
|
3064
|
+
name,
|
|
3065
|
+
value,
|
|
3066
|
+
checked,
|
|
3067
|
+
disabled,
|
|
3068
|
+
onChange: () => onCheckedChange?.(value),
|
|
3069
|
+
"aria-describedby": description ? descriptionId : void 0
|
|
3070
|
+
}
|
|
3071
|
+
),
|
|
3072
|
+
iconNode,
|
|
3073
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("label", { htmlFor: radioId, className: "kds-card-selector-title", children: title }),
|
|
3074
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "kds-card-selector-description", id: descriptionId, children: description }),
|
|
3075
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "kds-card-selector-details", children })
|
|
3076
|
+
]
|
|
3077
|
+
}
|
|
3078
|
+
);
|
|
3079
|
+
}
|
|
3080
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
3081
|
+
"button",
|
|
3082
|
+
{
|
|
3083
|
+
ref,
|
|
3084
|
+
type: type ?? "button",
|
|
3085
|
+
className: (0, import_clsx.clsx)("kds-card-selector", selected && "selected", className),
|
|
3086
|
+
disabled,
|
|
3087
|
+
name,
|
|
3088
|
+
value,
|
|
3089
|
+
...props,
|
|
3090
|
+
children: [
|
|
3091
|
+
iconNode,
|
|
3092
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "kds-card-selector-title", children: title }),
|
|
3093
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "kds-card-selector-description", children: description }),
|
|
3094
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "kds-card-selector-details", children })
|
|
3095
|
+
]
|
|
3096
|
+
}
|
|
3097
|
+
);
|
|
3098
|
+
}
|
|
3099
|
+
);
|
|
3100
|
+
KdsCardSelector.displayName = "KdsCardSelector";
|
|
3101
|
+
var KdsCardSelectorGroup = (0, import_react45.forwardRef)(
|
|
3102
|
+
({ label, className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3103
|
+
"div",
|
|
2491
3104
|
{
|
|
2492
3105
|
ref,
|
|
2493
|
-
|
|
2494
|
-
|
|
3106
|
+
role: "radiogroup",
|
|
3107
|
+
"aria-label": label,
|
|
3108
|
+
className: (0, import_clsx.clsx)("kds-card-selector-group", className),
|
|
2495
3109
|
...props,
|
|
2496
|
-
children
|
|
2497
|
-
icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "kds-card-selector-icon", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
|
|
2498
|
-
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "kds-card-selector-title", children: title }),
|
|
2499
|
-
description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "kds-card-selector-description", children: description })
|
|
2500
|
-
]
|
|
3110
|
+
children
|
|
2501
3111
|
}
|
|
2502
3112
|
)
|
|
2503
3113
|
);
|
|
2504
|
-
|
|
3114
|
+
KdsCardSelectorGroup.displayName = "KdsCardSelectorGroup";
|
|
2505
3115
|
|
|
2506
3116
|
// src/components/domain/KdsCardPlan/KdsCardPlan.tsx
|
|
2507
|
-
var
|
|
2508
|
-
var
|
|
2509
|
-
var KdsCardPlan = (0,
|
|
2510
|
-
({
|
|
3117
|
+
var import_react46 = require("react");
|
|
3118
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
3119
|
+
var KdsCardPlan = (0, import_react46.forwardRef)(
|
|
3120
|
+
({
|
|
3121
|
+
title,
|
|
3122
|
+
price,
|
|
3123
|
+
period,
|
|
3124
|
+
features,
|
|
3125
|
+
recommended,
|
|
3126
|
+
badgeText,
|
|
3127
|
+
action,
|
|
3128
|
+
description,
|
|
3129
|
+
checkFeatures,
|
|
3130
|
+
name,
|
|
3131
|
+
value,
|
|
3132
|
+
selected,
|
|
3133
|
+
onSelectedChange,
|
|
3134
|
+
className,
|
|
3135
|
+
...props
|
|
3136
|
+
}, ref) => {
|
|
3137
|
+
const radioId = (0, import_react46.useId)();
|
|
3138
|
+
const priceId = `${radioId}-price`;
|
|
3139
|
+
const badgeId = `${radioId}-badge`;
|
|
3140
|
+
const selectable = name !== void 0 && value !== void 0;
|
|
3141
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
3142
|
+
"div",
|
|
3143
|
+
{
|
|
3144
|
+
ref,
|
|
3145
|
+
className: (0, import_clsx.clsx)(
|
|
3146
|
+
"kds-card-plan",
|
|
3147
|
+
recommended && "recommended",
|
|
3148
|
+
selectable && "kds-card-plan--selectable",
|
|
3149
|
+
className
|
|
3150
|
+
),
|
|
3151
|
+
...props,
|
|
3152
|
+
children: [
|
|
3153
|
+
selectable && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
3154
|
+
"input",
|
|
3155
|
+
{
|
|
3156
|
+
type: "radio",
|
|
3157
|
+
className: "kds-card-plan-radio",
|
|
3158
|
+
id: radioId,
|
|
3159
|
+
name,
|
|
3160
|
+
value,
|
|
3161
|
+
checked: selected,
|
|
3162
|
+
onChange: () => onSelectedChange?.(value),
|
|
3163
|
+
"aria-describedby": badgeText ? `${priceId} ${badgeId}` : priceId
|
|
3164
|
+
}
|
|
3165
|
+
),
|
|
3166
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h3", { children: selectable ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { htmlFor: radioId, children: title }) : title }) }),
|
|
3167
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "kds-card-plan-price", id: selectable ? priceId : void 0, children: [
|
|
3168
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "kds-price", children: price }),
|
|
3169
|
+
period && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "kds-price-period", children: [
|
|
3170
|
+
"/",
|
|
3171
|
+
period
|
|
3172
|
+
] })
|
|
3173
|
+
] }),
|
|
3174
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "kds-card-plan-description", children: description }),
|
|
3175
|
+
badgeText && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "kds-card-plan-badge", id: selectable ? badgeId : void 0, children: badgeText }),
|
|
3176
|
+
features && features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
3177
|
+
"ul",
|
|
3178
|
+
{
|
|
3179
|
+
className: (0, import_clsx.clsx)("kds-card-plan-features", checkFeatures && "kds-card-plan-features--check"),
|
|
3180
|
+
children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("li", { children: [
|
|
3181
|
+
checkFeatures && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: "check" }),
|
|
3182
|
+
f
|
|
3183
|
+
] }, i))
|
|
3184
|
+
}
|
|
3185
|
+
),
|
|
3186
|
+
action
|
|
3187
|
+
]
|
|
3188
|
+
}
|
|
3189
|
+
);
|
|
3190
|
+
}
|
|
3191
|
+
);
|
|
3192
|
+
KdsCardPlan.displayName = "KdsCardPlan";
|
|
3193
|
+
var KdsCardPlanGroup = (0, import_react46.forwardRef)(
|
|
3194
|
+
({ label, className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
2511
3195
|
"div",
|
|
2512
3196
|
{
|
|
2513
3197
|
ref,
|
|
2514
|
-
|
|
3198
|
+
role: "radiogroup",
|
|
3199
|
+
"aria-label": label,
|
|
3200
|
+
className: (0, import_clsx.clsx)("kds-card-plan-group", className),
|
|
2515
3201
|
...props,
|
|
2516
|
-
children
|
|
2517
|
-
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { children: title }) }),
|
|
2518
|
-
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "kds-card-plan-price", children: [
|
|
2519
|
-
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "kds-price", children: price }),
|
|
2520
|
-
period && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "kds-price-period", children: [
|
|
2521
|
-
"/",
|
|
2522
|
-
period
|
|
2523
|
-
] })
|
|
2524
|
-
] }),
|
|
2525
|
-
badgeText && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "kds-card-plan-badge", children: badgeText }),
|
|
2526
|
-
features && features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { className: "kds-card-plan-features", children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: f }, i)) }),
|
|
2527
|
-
action
|
|
2528
|
-
]
|
|
3202
|
+
children
|
|
2529
3203
|
}
|
|
2530
3204
|
)
|
|
2531
3205
|
);
|
|
2532
|
-
|
|
3206
|
+
KdsCardPlanGroup.displayName = "KdsCardPlanGroup";
|
|
2533
3207
|
|
|
2534
3208
|
// src/components/domain/KdsInvoiceSticky/KdsInvoiceSticky.tsx
|
|
2535
|
-
var
|
|
2536
|
-
var
|
|
2537
|
-
var KdsInvoiceSticky = (0,
|
|
2538
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
3209
|
+
var import_react47 = require("react");
|
|
3210
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
3211
|
+
var KdsInvoiceSticky = (0, import_react47.forwardRef)(
|
|
3212
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2539
3213
|
"article",
|
|
2540
3214
|
{
|
|
2541
3215
|
ref,
|
|
@@ -2548,39 +3222,39 @@ var KdsInvoiceSticky = (0, import_react40.forwardRef)(
|
|
|
2548
3222
|
KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
|
|
2549
3223
|
|
|
2550
3224
|
// src/components/domain/KdsInvoiceHeaderSkeleton/KdsInvoiceHeaderSkeleton.tsx
|
|
2551
|
-
var
|
|
2552
|
-
var
|
|
2553
|
-
var Text = ({ children }) => /* @__PURE__ */ (0,
|
|
2554
|
-
var KdsInvoiceHeaderSkeleton = (0,
|
|
2555
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2556
|
-
/* @__PURE__ */ (0,
|
|
2557
|
-
/* @__PURE__ */ (0,
|
|
2558
|
-
/* @__PURE__ */ (0,
|
|
2559
|
-
/* @__PURE__ */ (0,
|
|
2560
|
-
/* @__PURE__ */ (0,
|
|
2561
|
-
/* @__PURE__ */ (0,
|
|
3225
|
+
var import_react48 = require("react");
|
|
3226
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
3227
|
+
var Text = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "kds-skeleton kds-skeleton--text", children });
|
|
3228
|
+
var KdsInvoiceHeaderSkeleton = (0, import_react48.forwardRef)(
|
|
3229
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(KdsInvoiceSticky, { ref, className: (0, import_clsx.clsx)("kds-invoice-skeleton", className), "aria-hidden": "true", ...props, children: [
|
|
3230
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("header", { className: "kds-invoice-header", children: [
|
|
3231
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { children: [
|
|
3232
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "kds-invoice-amount", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: "$00.000" }) }),
|
|
3233
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("p", { className: "kds-invoice-code", children: [
|
|
3234
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: "C\xF3digo" }) }),
|
|
3235
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "kds-invoice-code-value kds-invoice-code-value--lowercase", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: "xxxx-xxxx-xxxx" }) })
|
|
2562
3236
|
] })
|
|
2563
3237
|
] }),
|
|
2564
|
-
/* @__PURE__ */ (0,
|
|
3238
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "kds-invoice-merchant kds-skeleton" })
|
|
2565
3239
|
] }),
|
|
2566
|
-
/* @__PURE__ */ (0,
|
|
2567
|
-
/* @__PURE__ */ (0,
|
|
2568
|
-
/* @__PURE__ */ (0,
|
|
2569
|
-
/* @__PURE__ */ (0,
|
|
2570
|
-
/* @__PURE__ */ (0,
|
|
2571
|
-
/* @__PURE__ */ (0,
|
|
3240
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "kds-invoice-collapsible", children: [
|
|
3241
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "kds-invoice-summary", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("dl", { className: "kds-kv", children: [
|
|
3242
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("dt", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: "Pago a" }) }),
|
|
3243
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: "Comercio de ejemplo SpA" }) }),
|
|
3244
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("dt", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: "Asunto" }) }),
|
|
3245
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: "Orden de compra" }) })
|
|
2572
3246
|
] }) }),
|
|
2573
|
-
/* @__PURE__ */ (0,
|
|
3247
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "kds-expand-toggle", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: "Detalle del cobro" }) }) })
|
|
2574
3248
|
] })
|
|
2575
3249
|
] })
|
|
2576
3250
|
);
|
|
2577
3251
|
KdsInvoiceHeaderSkeleton.displayName = "KdsInvoiceHeaderSkeleton";
|
|
2578
3252
|
|
|
2579
3253
|
// src/components/domain/KdsBottomSheet/KdsBottomSheet.tsx
|
|
2580
|
-
var
|
|
3254
|
+
var import_react49 = require("react");
|
|
2581
3255
|
var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
|
|
2582
|
-
var
|
|
2583
|
-
var KdsBottomSheet = (0,
|
|
3256
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
3257
|
+
var KdsBottomSheet = (0, import_react49.forwardRef)(
|
|
2584
3258
|
({
|
|
2585
3259
|
open,
|
|
2586
3260
|
onClose,
|
|
@@ -2593,55 +3267,80 @@ var KdsBottomSheet = (0, import_react42.forwardRef)(
|
|
|
2593
3267
|
container,
|
|
2594
3268
|
className,
|
|
2595
3269
|
size = "auto",
|
|
3270
|
+
dismissible = true,
|
|
3271
|
+
variant = "sheet",
|
|
3272
|
+
align = "start",
|
|
3273
|
+
icon,
|
|
3274
|
+
hint,
|
|
2596
3275
|
...props
|
|
2597
|
-
}, ref) => /* @__PURE__ */ (0,
|
|
3276
|
+
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
2598
3277
|
Dialog2.Root,
|
|
2599
3278
|
{
|
|
2600
3279
|
open,
|
|
2601
3280
|
onOpenChange: (o) => {
|
|
2602
3281
|
if (!o) onClose();
|
|
2603
3282
|
},
|
|
2604
|
-
children: /* @__PURE__ */ (0,
|
|
2605
|
-
Dialog2.
|
|
3283
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Dialog2.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "kds-theme-root", style: { display: "contents" }, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
3284
|
+
Dialog2.Overlay,
|
|
2606
3285
|
{
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
"
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
3286
|
+
className: (0, import_clsx.clsx)("kds-bottom-sheet-scrim", "open", variant === "dialog" && "kds-bottom-sheet-scrim--dialog"),
|
|
3287
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
3288
|
+
Dialog2.Content,
|
|
3289
|
+
{
|
|
3290
|
+
ref,
|
|
3291
|
+
className: (0, import_clsx.clsx)(
|
|
3292
|
+
"kds-bottom-sheet",
|
|
3293
|
+
size === "full" && "kds-bottom-sheet-full",
|
|
3294
|
+
variant === "dialog" && "kds-bottom-sheet--dialog",
|
|
3295
|
+
variant === "dialog" && align === "center" && "kds-bottom-sheet--center",
|
|
3296
|
+
className
|
|
3297
|
+
),
|
|
3298
|
+
onPointerDownOutside: (e) => {
|
|
3299
|
+
const target = e.target;
|
|
3300
|
+
if (!dismissible || target.closest(".kds-bottom-sheet")) e.preventDefault();
|
|
3301
|
+
},
|
|
3302
|
+
onEscapeKeyDown: (e) => {
|
|
3303
|
+
if (!dismissible) e.preventDefault();
|
|
3304
|
+
},
|
|
3305
|
+
onInteractOutside: (e) => {
|
|
3306
|
+
if (!dismissible) e.preventDefault();
|
|
3307
|
+
},
|
|
3308
|
+
...props,
|
|
3309
|
+
children: [
|
|
3310
|
+
showGrabber && dismissible && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "kds-bottom-sheet-grabber", "aria-hidden": "true" }),
|
|
3311
|
+
showCloseButton && dismissible && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
3312
|
+
"button",
|
|
3313
|
+
{
|
|
3314
|
+
type: "button",
|
|
3315
|
+
className: "kds-bottom-sheet-close",
|
|
3316
|
+
"aria-label": "Cerrar",
|
|
3317
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("i", { className: "material-symbols-outlined", children: "close" })
|
|
3318
|
+
}
|
|
3319
|
+
) }),
|
|
3320
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "kds-bottom-sheet-icon", children: icon }),
|
|
3321
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Dialog2.Title, { className: "kds-bottom-sheet-title", children: title }),
|
|
3322
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Dialog2.Description, { className: "kds-bottom-sheet-description", children: description }),
|
|
3323
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "kds-bottom-sheet-body", children }),
|
|
3324
|
+
hint && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "kds-bottom-sheet-hint", children: hint }),
|
|
3325
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "kds-bottom-sheet-actions", children: actions })
|
|
3326
|
+
]
|
|
3327
|
+
}
|
|
3328
|
+
)
|
|
2630
3329
|
}
|
|
2631
|
-
) }) })
|
|
3330
|
+
) }) })
|
|
2632
3331
|
}
|
|
2633
3332
|
)
|
|
2634
3333
|
);
|
|
2635
3334
|
KdsBottomSheet.displayName = "KdsBottomSheet";
|
|
2636
3335
|
|
|
2637
3336
|
// src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
|
|
2638
|
-
var
|
|
3337
|
+
var import_react51 = require("react");
|
|
2639
3338
|
|
|
2640
3339
|
// src/components/domain/KdsSecureFooter/KhipuWordmark.tsx
|
|
2641
|
-
var
|
|
2642
|
-
var
|
|
2643
|
-
var KhipuWordmark = (0,
|
|
2644
|
-
({ className = "khipu-mark", ...props }, ref) => /* @__PURE__ */ (0,
|
|
3340
|
+
var import_react50 = require("react");
|
|
3341
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
3342
|
+
var KhipuWordmark = (0, import_react50.forwardRef)(
|
|
3343
|
+
({ className = "khipu-mark", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
|
|
2645
3344
|
"svg",
|
|
2646
3345
|
{
|
|
2647
3346
|
ref,
|
|
@@ -2652,14 +3351,14 @@ var KhipuWordmark = (0, import_react43.forwardRef)(
|
|
|
2652
3351
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2653
3352
|
...props,
|
|
2654
3353
|
children: [
|
|
2655
|
-
/* @__PURE__ */ (0,
|
|
2656
|
-
/* @__PURE__ */ (0,
|
|
2657
|
-
/* @__PURE__ */ (0,
|
|
2658
|
-
/* @__PURE__ */ (0,
|
|
2659
|
-
/* @__PURE__ */ (0,
|
|
2660
|
-
/* @__PURE__ */ (0,
|
|
2661
|
-
/* @__PURE__ */ (0,
|
|
2662
|
-
/* @__PURE__ */ (0,
|
|
3354
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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" }),
|
|
3355
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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" }),
|
|
3356
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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" }),
|
|
3357
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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" }),
|
|
3358
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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" }),
|
|
3359
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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" }),
|
|
3360
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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" }),
|
|
3361
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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" })
|
|
2663
3362
|
]
|
|
2664
3363
|
}
|
|
2665
3364
|
)
|
|
@@ -2667,17 +3366,17 @@ var KhipuWordmark = (0, import_react43.forwardRef)(
|
|
|
2667
3366
|
KhipuWordmark.displayName = "KhipuWordmark";
|
|
2668
3367
|
|
|
2669
3368
|
// src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
|
|
2670
|
-
var
|
|
2671
|
-
var KdsSecureFooter = (0,
|
|
2672
|
-
({ variant = "default", showLogo = true, psp, children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2673
|
-
/* @__PURE__ */ (0,
|
|
2674
|
-
/* @__PURE__ */ (0,
|
|
2675
|
-
/* @__PURE__ */ (0,
|
|
3369
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
3370
|
+
var KdsSecureFooter = (0, import_react51.forwardRef)(
|
|
3371
|
+
({ variant = "default", showLogo = true, psp, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("footer", { ref, className: (0, import_clsx.clsx)("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
|
|
3372
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("svg", { className: "kds-secure-footer-lock", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
|
|
3373
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("rect", { x: "4.5", y: "10.5", width: "15", height: "10", rx: "2.25" }),
|
|
3374
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M8 10.5V7a4 4 0 0 1 8 0v3.5" })
|
|
2676
3375
|
] }),
|
|
2677
|
-
children || /* @__PURE__ */ (0,
|
|
2678
|
-
showLogo && /* @__PURE__ */ (0,
|
|
2679
|
-
psp && /* @__PURE__ */ (0,
|
|
2680
|
-
/* @__PURE__ */ (0,
|
|
3376
|
+
children || /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: "Pago seguro procesado por" }),
|
|
3377
|
+
showLogo && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(KhipuWordmark, {}),
|
|
3378
|
+
psp && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
|
|
3379
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "kds-secure-footer-sep", "aria-hidden": "true" }),
|
|
2681
3380
|
psp
|
|
2682
3381
|
] })
|
|
2683
3382
|
] })
|
|
@@ -2685,44 +3384,44 @@ var KdsSecureFooter = (0, import_react44.forwardRef)(
|
|
|
2685
3384
|
KdsSecureFooter.displayName = "KdsSecureFooter";
|
|
2686
3385
|
|
|
2687
3386
|
// src/components/domain/KdsRecapList/KdsRecapList.tsx
|
|
2688
|
-
var
|
|
2689
|
-
var
|
|
2690
|
-
var KdsRecapList = (0,
|
|
2691
|
-
({ items, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2692
|
-
/* @__PURE__ */ (0,
|
|
2693
|
-
/* @__PURE__ */ (0,
|
|
3387
|
+
var import_react52 = require("react");
|
|
3388
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
3389
|
+
var KdsRecapList = (0, import_react52.forwardRef)(
|
|
3390
|
+
({ items, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { ref, className: (0, import_clsx.clsx)("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("li", { children: [
|
|
3391
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "kds-key", children: item.label }),
|
|
3392
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: (0, import_clsx.clsx)("kds-value", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
|
|
2694
3393
|
] }, i)) })
|
|
2695
3394
|
);
|
|
2696
3395
|
KdsRecapList.displayName = "KdsRecapList";
|
|
2697
3396
|
|
|
2698
3397
|
// src/components/domain/KdsMontoRow/KdsMontoRow.tsx
|
|
2699
|
-
var
|
|
2700
|
-
var
|
|
2701
|
-
var KdsMontoRow = (0,
|
|
2702
|
-
({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2703
|
-
/* @__PURE__ */ (0,
|
|
2704
|
-
/* @__PURE__ */ (0,
|
|
2705
|
-
deadline && /* @__PURE__ */ (0,
|
|
3398
|
+
var import_react53 = require("react");
|
|
3399
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
3400
|
+
var KdsMontoRow = (0, import_react53.forwardRef)(
|
|
3401
|
+
({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-monto-row", className), ...props, children: [
|
|
3402
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
|
|
3403
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "kds-monto-row-title", children: title }),
|
|
3404
|
+
deadline && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "kds-monto-row-deadline", children: deadline })
|
|
2706
3405
|
] }),
|
|
2707
|
-
/* @__PURE__ */ (0,
|
|
3406
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "kds-monto-row-value", children: value })
|
|
2708
3407
|
] })
|
|
2709
3408
|
);
|
|
2710
3409
|
KdsMontoRow.displayName = "KdsMontoRow";
|
|
2711
3410
|
|
|
2712
3411
|
// src/components/domain/KdsMerchantTile/KdsMerchantTile.tsx
|
|
2713
|
-
var
|
|
2714
|
-
var
|
|
2715
|
-
var KdsMerchantTile = (0,
|
|
3412
|
+
var import_react54 = require("react");
|
|
3413
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
3414
|
+
var KdsMerchantTile = (0, import_react54.forwardRef)(
|
|
2716
3415
|
({ name, logoUrl, initials, compact, className, ...props }, ref) => {
|
|
2717
3416
|
const displayInitials = (initials ?? name.slice(0, 2)).toUpperCase();
|
|
2718
|
-
return /* @__PURE__ */ (0,
|
|
3417
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
2719
3418
|
"div",
|
|
2720
3419
|
{
|
|
2721
3420
|
ref,
|
|
2722
3421
|
className: (0, import_clsx.clsx)("kds-merchant-tile", logoUrl && "logo", compact && "compact", className),
|
|
2723
3422
|
"aria-label": name,
|
|
2724
3423
|
...props,
|
|
2725
|
-
children: logoUrl ? /* @__PURE__ */ (0,
|
|
3424
|
+
children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("img", { src: logoUrl, alt: name }) : displayInitials
|
|
2726
3425
|
}
|
|
2727
3426
|
);
|
|
2728
3427
|
}
|
|
@@ -2730,10 +3429,10 @@ var KdsMerchantTile = (0, import_react47.forwardRef)(
|
|
|
2730
3429
|
KdsMerchantTile.displayName = "KdsMerchantTile";
|
|
2731
3430
|
|
|
2732
3431
|
// src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
|
|
2733
|
-
var
|
|
3432
|
+
var import_react56 = require("react");
|
|
2734
3433
|
|
|
2735
3434
|
// src/components/domain/KdsInvoiceMerchant/useLogoBackdrop.ts
|
|
2736
|
-
var
|
|
3435
|
+
var import_react55 = require("react");
|
|
2737
3436
|
|
|
2738
3437
|
// src/components/domain/KdsInvoiceMerchant/logoLuminance.ts
|
|
2739
3438
|
var LIGHT_LOGO_LUMINANCE_THRESHOLD = 0.72;
|
|
@@ -2782,8 +3481,8 @@ function pickLogoBackdrop(luminance) {
|
|
|
2782
3481
|
|
|
2783
3482
|
// src/components/domain/KdsInvoiceMerchant/useLogoBackdrop.ts
|
|
2784
3483
|
function useLogoBackdrop(logoUrl) {
|
|
2785
|
-
const [backdrop, setBackdrop] = (0,
|
|
2786
|
-
(0,
|
|
3484
|
+
const [backdrop, setBackdrop] = (0, import_react55.useState)("light");
|
|
3485
|
+
(0, import_react55.useEffect)(() => {
|
|
2787
3486
|
let cancelled = false;
|
|
2788
3487
|
setBackdrop("light");
|
|
2789
3488
|
if (!logoUrl) {
|
|
@@ -2802,13 +3501,13 @@ function useLogoBackdrop(logoUrl) {
|
|
|
2802
3501
|
}
|
|
2803
3502
|
|
|
2804
3503
|
// src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
|
|
2805
|
-
var
|
|
2806
|
-
var KdsInvoiceMerchant = (0,
|
|
3504
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
3505
|
+
var KdsInvoiceMerchant = (0, import_react56.forwardRef)(
|
|
2807
3506
|
({ logoUrl, brandColor, className, style, ...props }, ref) => {
|
|
2808
|
-
const [failed, setFailed] = (0,
|
|
3507
|
+
const [failed, setFailed] = (0, import_react56.useState)(false);
|
|
2809
3508
|
const showLogo = !!logoUrl && !failed;
|
|
2810
3509
|
const backdrop = useLogoBackdrop(showLogo ? logoUrl : void 0);
|
|
2811
|
-
return /* @__PURE__ */ (0,
|
|
3510
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
2812
3511
|
"div",
|
|
2813
3512
|
{
|
|
2814
3513
|
ref,
|
|
@@ -2821,7 +3520,7 @@ var KdsInvoiceMerchant = (0, import_react49.forwardRef)(
|
|
|
2821
3520
|
"aria-hidden": "true",
|
|
2822
3521
|
style: !showLogo && brandColor ? { background: brandColor, ...style } : style,
|
|
2823
3522
|
...props,
|
|
2824
|
-
children: showLogo ? /* @__PURE__ */ (0,
|
|
3523
|
+
children: showLogo ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("img", { src: logoUrl, alt: "", onError: () => setFailed(true) }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("i", { className: "material-symbols-outlined", children: "storefront" })
|
|
2825
3524
|
}
|
|
2826
3525
|
);
|
|
2827
3526
|
}
|
|
@@ -2829,9 +3528,9 @@ var KdsInvoiceMerchant = (0, import_react49.forwardRef)(
|
|
|
2829
3528
|
KdsInvoiceMerchant.displayName = "KdsInvoiceMerchant";
|
|
2830
3529
|
|
|
2831
3530
|
// src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
|
|
2832
|
-
var
|
|
2833
|
-
var
|
|
2834
|
-
var KdsPaymentTotal = (0,
|
|
3531
|
+
var import_react57 = require("react");
|
|
3532
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
3533
|
+
var KdsPaymentTotal = (0, import_react57.forwardRef)(
|
|
2835
3534
|
({
|
|
2836
3535
|
variant = "default",
|
|
2837
3536
|
tone = "brand",
|
|
@@ -2849,7 +3548,7 @@ var KdsPaymentTotal = (0, import_react50.forwardRef)(
|
|
|
2849
3548
|
const { integer, fraction } = formatAmount(amount, decimals, locale);
|
|
2850
3549
|
const isEmail = variant === "email";
|
|
2851
3550
|
const isInfoTone = tone === "info";
|
|
2852
|
-
return /* @__PURE__ */ (0,
|
|
3551
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
2853
3552
|
"div",
|
|
2854
3553
|
{
|
|
2855
3554
|
ref,
|
|
@@ -2862,14 +3561,14 @@ var KdsPaymentTotal = (0, import_react50.forwardRef)(
|
|
|
2862
3561
|
),
|
|
2863
3562
|
...props,
|
|
2864
3563
|
children: [
|
|
2865
|
-
!isEmail && title != null && /* @__PURE__ */ (0,
|
|
2866
|
-
!isEmail && titleMobile != null && /* @__PURE__ */ (0,
|
|
2867
|
-
label != null && /* @__PURE__ */ (0,
|
|
2868
|
-
/* @__PURE__ */ (0,
|
|
3564
|
+
!isEmail && title != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h5", { className: "kds-payment-total-title", children: title }),
|
|
3565
|
+
!isEmail && titleMobile != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
|
|
3566
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h6", { className: "kds-payment-label", children: label }),
|
|
3567
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("h5", { className: "kds-payment-amount", children: [
|
|
2869
3568
|
currency,
|
|
2870
3569
|
" ",
|
|
2871
3570
|
integer,
|
|
2872
|
-
fraction !== null && /* @__PURE__ */ (0,
|
|
3571
|
+
fraction !== null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
|
|
2873
3572
|
] })
|
|
2874
3573
|
]
|
|
2875
3574
|
}
|
|
@@ -2905,10 +3604,10 @@ function formatAmount(amount, decimals, locale) {
|
|
|
2905
3604
|
}
|
|
2906
3605
|
|
|
2907
3606
|
// src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
|
|
2908
|
-
var
|
|
2909
|
-
var
|
|
2910
|
-
var KdsBillAttachment = (0,
|
|
2911
|
-
({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
3607
|
+
var import_react58 = require("react");
|
|
3608
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
3609
|
+
var KdsBillAttachment = (0, import_react58.forwardRef)(
|
|
3610
|
+
({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
2912
3611
|
"a",
|
|
2913
3612
|
{
|
|
2914
3613
|
ref,
|
|
@@ -2918,15 +3617,15 @@ var KdsBillAttachment = (0, import_react51.forwardRef)(
|
|
|
2918
3617
|
className: (0, import_clsx.clsx)("kds-bill-attachment", className),
|
|
2919
3618
|
...props,
|
|
2920
3619
|
children: [
|
|
2921
|
-
/* @__PURE__ */ (0,
|
|
2922
|
-
/* @__PURE__ */ (0,
|
|
3620
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("i", { className: "material-symbols-outlined", children: icon }),
|
|
3621
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: filename })
|
|
2923
3622
|
]
|
|
2924
3623
|
}
|
|
2925
3624
|
)
|
|
2926
3625
|
);
|
|
2927
3626
|
KdsBillAttachment.displayName = "KdsBillAttachment";
|
|
2928
|
-
var KdsBillAttachments = (0,
|
|
2929
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
3627
|
+
var KdsBillAttachments = (0, import_react58.forwardRef)(
|
|
3628
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bill-attachments", className), ...props, children })
|
|
2930
3629
|
);
|
|
2931
3630
|
KdsBillAttachments.displayName = "KdsBillAttachments";
|
|
2932
3631
|
|
|
@@ -3025,12 +3724,12 @@ var guideToFirstInvalidFieldOnBlur = (form) => {
|
|
|
3025
3724
|
};
|
|
3026
3725
|
|
|
3027
3726
|
// src/components/core/hooks/useStickyInvoiceCollapse.ts
|
|
3028
|
-
var
|
|
3727
|
+
var import_react59 = require("react");
|
|
3029
3728
|
function useStickyInvoiceCollapse(options = {}) {
|
|
3030
3729
|
const { onCollapseStart, collapseEnd = 20, mobileBreakpoint = 768 } = options;
|
|
3031
|
-
const onCollapseStartRef = (0,
|
|
3730
|
+
const onCollapseStartRef = (0, import_react59.useRef)(onCollapseStart);
|
|
3032
3731
|
onCollapseStartRef.current = onCollapseStart;
|
|
3033
|
-
(0,
|
|
3732
|
+
(0, import_react59.useEffect)(() => {
|
|
3034
3733
|
let viewportOffset = 0;
|
|
3035
3734
|
let ticking = false;
|
|
3036
3735
|
let wasCollapsing = false;
|
|
@@ -3103,24 +3802,24 @@ function useStickyInvoiceCollapse(options = {}) {
|
|
|
3103
3802
|
}
|
|
3104
3803
|
|
|
3105
3804
|
// src/components/core/hooks/useExpandToggle.ts
|
|
3106
|
-
var
|
|
3805
|
+
var import_react60 = require("react");
|
|
3107
3806
|
function useExpandToggle(options = {}) {
|
|
3108
3807
|
const { defaultOpen = false, open: controlledOpen, onOpenChange, id } = options;
|
|
3109
|
-
const generatedId = (0,
|
|
3808
|
+
const generatedId = (0, import_react60.useId)();
|
|
3110
3809
|
const panelId = id ?? `kds-expand-${generatedId}`;
|
|
3111
3810
|
const isControlled = controlledOpen !== void 0;
|
|
3112
|
-
const [uncontrolledOpen, setUncontrolledOpen] = (0,
|
|
3811
|
+
const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react60.useState)(defaultOpen);
|
|
3113
3812
|
const open = isControlled ? controlledOpen : uncontrolledOpen;
|
|
3114
|
-
const panelRef = (0,
|
|
3115
|
-
const setPanelRef = (0,
|
|
3813
|
+
const panelRef = (0, import_react60.useRef)(null);
|
|
3814
|
+
const setPanelRef = (0, import_react60.useCallback)((node) => {
|
|
3116
3815
|
panelRef.current = node;
|
|
3117
3816
|
}, []);
|
|
3118
|
-
(0,
|
|
3817
|
+
(0, import_react60.useLayoutEffect)(() => {
|
|
3119
3818
|
const panel = panelRef.current;
|
|
3120
3819
|
if (!panel) return;
|
|
3121
3820
|
panel.style.maxHeight = open ? `${panel.scrollHeight}px` : "";
|
|
3122
3821
|
}, [open]);
|
|
3123
|
-
const setOpen = (0,
|
|
3822
|
+
const setOpen = (0, import_react60.useCallback)(
|
|
3124
3823
|
(next) => {
|
|
3125
3824
|
if (!isControlled) {
|
|
3126
3825
|
setUncontrolledOpen(next);
|
|
@@ -3129,8 +3828,8 @@ function useExpandToggle(options = {}) {
|
|
|
3129
3828
|
},
|
|
3130
3829
|
[isControlled, onOpenChange]
|
|
3131
3830
|
);
|
|
3132
|
-
const toggle = (0,
|
|
3133
|
-
const getToggleProps = (0,
|
|
3831
|
+
const toggle = (0, import_react60.useCallback)(() => setOpen(!open), [open, setOpen]);
|
|
3832
|
+
const getToggleProps = (0, import_react60.useCallback)(
|
|
3134
3833
|
() => ({
|
|
3135
3834
|
type: "button",
|
|
3136
3835
|
"aria-expanded": open,
|
|
@@ -3139,7 +3838,7 @@ function useExpandToggle(options = {}) {
|
|
|
3139
3838
|
}),
|
|
3140
3839
|
[open, panelId, toggle]
|
|
3141
3840
|
);
|
|
3142
|
-
const getPanelProps = (0,
|
|
3841
|
+
const getPanelProps = (0, import_react60.useCallback)(
|
|
3143
3842
|
(baseClassName = "kds-expand-panel") => ({
|
|
3144
3843
|
id: panelId,
|
|
3145
3844
|
className: open ? `${baseClassName} open` : baseClassName,
|
|
@@ -3151,11 +3850,11 @@ function useExpandToggle(options = {}) {
|
|
|
3151
3850
|
}
|
|
3152
3851
|
|
|
3153
3852
|
// src/components/core/hooks/useHideOnScroll.ts
|
|
3154
|
-
var
|
|
3853
|
+
var import_react61 = require("react");
|
|
3155
3854
|
function useHideOnScroll(options = {}) {
|
|
3156
3855
|
const { threshold = 8, topOffset = 0 } = options;
|
|
3157
|
-
const [hidden, setHidden] = (0,
|
|
3158
|
-
(0,
|
|
3856
|
+
const [hidden, setHidden] = (0, import_react61.useState)(false);
|
|
3857
|
+
(0, import_react61.useEffect)(() => {
|
|
3159
3858
|
let viewportOffset = 0;
|
|
3160
3859
|
let lastY = 0;
|
|
3161
3860
|
let ticking = false;
|
|
@@ -3198,12 +3897,12 @@ function useHideOnScroll(options = {}) {
|
|
|
3198
3897
|
}
|
|
3199
3898
|
|
|
3200
3899
|
// src/components/core/hooks/useMediaQuery.ts
|
|
3201
|
-
var
|
|
3900
|
+
var import_react62 = require("react");
|
|
3202
3901
|
function useMediaQuery(query) {
|
|
3203
|
-
const [matches, setMatches] = (0,
|
|
3902
|
+
const [matches, setMatches] = (0, import_react62.useState)(
|
|
3204
3903
|
() => typeof window !== "undefined" ? window.matchMedia(query).matches : false
|
|
3205
3904
|
);
|
|
3206
|
-
(0,
|
|
3905
|
+
(0, import_react62.useEffect)(() => {
|
|
3207
3906
|
if (typeof window === "undefined") return;
|
|
3208
3907
|
const mql = window.matchMedia(query);
|
|
3209
3908
|
setMatches(mql.matches);
|
|
@@ -3232,9 +3931,13 @@ function useMediaQuery(query) {
|
|
|
3232
3931
|
KdsCardFooter,
|
|
3233
3932
|
KdsCardHeader,
|
|
3234
3933
|
KdsCardPlan,
|
|
3934
|
+
KdsCardPlanGroup,
|
|
3235
3935
|
KdsCardSelector,
|
|
3936
|
+
KdsCardSelectorGroup,
|
|
3236
3937
|
KdsCheckbox,
|
|
3237
3938
|
KdsChip,
|
|
3939
|
+
KdsConsentCard,
|
|
3940
|
+
KdsContract,
|
|
3238
3941
|
KdsCopyButton,
|
|
3239
3942
|
KdsCopyRow,
|
|
3240
3943
|
KdsCopyableTable,
|
|
@@ -3244,13 +3947,17 @@ function useMediaQuery(query) {
|
|
|
3244
3947
|
KdsEmptyState,
|
|
3245
3948
|
KdsExpandPanel,
|
|
3246
3949
|
KdsFab,
|
|
3950
|
+
KdsFeedbackCard,
|
|
3951
|
+
KdsFooter,
|
|
3247
3952
|
KdsInvoiceHeaderSkeleton,
|
|
3248
3953
|
KdsInvoiceMerchant,
|
|
3249
3954
|
KdsInvoiceSticky,
|
|
3250
3955
|
KdsLinearProgress,
|
|
3251
3956
|
KdsMerchantTile,
|
|
3252
3957
|
KdsMontoRow,
|
|
3958
|
+
KdsNavbar,
|
|
3253
3959
|
KdsPaymentTotal,
|
|
3960
|
+
KdsProgressChecklist,
|
|
3254
3961
|
KdsQrRow,
|
|
3255
3962
|
KdsRadioGroup,
|
|
3256
3963
|
KdsRecapList,
|
|
@@ -3260,6 +3967,7 @@ function useMediaQuery(query) {
|
|
|
3260
3967
|
KdsSecureLoader,
|
|
3261
3968
|
KdsSegmentedTabs,
|
|
3262
3969
|
KdsSelect,
|
|
3970
|
+
KdsSidebar,
|
|
3263
3971
|
KdsSnackbar,
|
|
3264
3972
|
KdsSpinner,
|
|
3265
3973
|
KdsStatusBlock,
|