@khipu/design-system 0.2.0-alpha.83 → 0.2.0-alpha.85
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 +155 -6
- 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 +155 -6
- package/dist/beercss/khipu-beercss.scoped.min.css +1 -1
- package/dist/beercss/metadata.json +5 -5
- package/dist/index.d.mts +89 -2
- package/dist/index.d.ts +89 -2
- package/dist/index.js +224 -142
- package/dist/index.mjs +191 -111
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -55,6 +55,7 @@ __export(index_exports, {
|
|
|
55
55
|
KdsCountdown: () => KdsCountdown,
|
|
56
56
|
KdsDivider: () => KdsDivider,
|
|
57
57
|
KdsExpandPanel: () => KdsExpandPanel,
|
|
58
|
+
KdsFab: () => KdsFab,
|
|
58
59
|
KdsInvoiceMerchant: () => KdsInvoiceMerchant,
|
|
59
60
|
KdsInvoiceSticky: () => KdsInvoiceSticky,
|
|
60
61
|
KdsLinearProgress: () => KdsLinearProgress,
|
|
@@ -104,6 +105,7 @@ __export(index_exports, {
|
|
|
104
105
|
useCopyToClipboard: () => useCopyToClipboard,
|
|
105
106
|
useCountdown: () => useCountdown,
|
|
106
107
|
useExpandToggle: () => useExpandToggle,
|
|
108
|
+
useHideOnScroll: () => useHideOnScroll,
|
|
107
109
|
useStickyInvoiceCollapse: () => useStickyInvoiceCollapse,
|
|
108
110
|
useTabsKeyboard: () => useTabsKeyboard,
|
|
109
111
|
zIndex: () => zIndex
|
|
@@ -507,6 +509,8 @@ var fontWeights = {
|
|
|
507
509
|
bold: 700
|
|
508
510
|
};
|
|
509
511
|
var fontSizes = {
|
|
512
|
+
"2xs": "0.625rem",
|
|
513
|
+
// 10px — tiny captions (version footer, fine print)
|
|
510
514
|
xs: "0.75rem",
|
|
511
515
|
// 12px
|
|
512
516
|
sm: "0.875rem",
|
|
@@ -929,6 +933,8 @@ var responsiveTypography = {
|
|
|
929
933
|
}
|
|
930
934
|
};
|
|
931
935
|
var responsiveBaseFontSizes = {
|
|
936
|
+
"2xs": { mobile: "0.5625rem", tablet: "0.625rem", desktop: "0.625rem" },
|
|
937
|
+
// 9px → 10px
|
|
932
938
|
xs: { mobile: "0.6875rem", tablet: "0.75rem", desktop: "0.75rem" },
|
|
933
939
|
// 11px → 12px
|
|
934
940
|
sm: { mobile: "0.8125rem", tablet: "0.875rem", desktop: "0.875rem" },
|
|
@@ -1495,6 +1501,9 @@ var variantTag = {
|
|
|
1495
1501
|
"body-small": "p",
|
|
1496
1502
|
label: "span",
|
|
1497
1503
|
"label-small": "span",
|
|
1504
|
+
value: "span",
|
|
1505
|
+
code: "span",
|
|
1506
|
+
caption: "span",
|
|
1498
1507
|
muted: "p",
|
|
1499
1508
|
link: "span",
|
|
1500
1509
|
strong: "span"
|
|
@@ -2242,13 +2251,37 @@ var KdsSegmentedTabs = (0, import_react30.forwardRef)(
|
|
|
2242
2251
|
);
|
|
2243
2252
|
KdsSegmentedTabs.displayName = "KdsSegmentedTabs";
|
|
2244
2253
|
|
|
2245
|
-
// src/components/
|
|
2254
|
+
// src/components/core/KdsFab/KdsFab.tsx
|
|
2246
2255
|
var import_react31 = require("react");
|
|
2247
2256
|
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2248
|
-
var
|
|
2257
|
+
var KdsFab = (0, import_react31.forwardRef)(
|
|
2258
|
+
({ icon, position = "top-right", hidden = false, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2259
|
+
"button",
|
|
2260
|
+
{
|
|
2261
|
+
ref,
|
|
2262
|
+
type: "button",
|
|
2263
|
+
className: (0, import_clsx.clsx)(
|
|
2264
|
+
"kds-fab",
|
|
2265
|
+
position !== "none" && `kds-fab--${position}`,
|
|
2266
|
+
hidden && "kds-fab--hidden",
|
|
2267
|
+
className
|
|
2268
|
+
),
|
|
2269
|
+
"aria-hidden": hidden || void 0,
|
|
2270
|
+
tabIndex: hidden ? -1 : void 0,
|
|
2271
|
+
...props,
|
|
2272
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("i", { className: "material-symbols-outlined", children: icon })
|
|
2273
|
+
}
|
|
2274
|
+
)
|
|
2275
|
+
);
|
|
2276
|
+
KdsFab.displayName = "KdsFab";
|
|
2277
|
+
|
|
2278
|
+
// src/components/domain/KdsBankRow/KdsBankRow.tsx
|
|
2279
|
+
var import_react32 = require("react");
|
|
2280
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2281
|
+
var KdsBankRow = (0, import_react32.forwardRef)(
|
|
2249
2282
|
({ name, logoUrl, selected, hideLogo, className, ...props }, ref) => {
|
|
2250
2283
|
const nameStr = typeof name === "string" ? name : "";
|
|
2251
|
-
return /* @__PURE__ */ (0,
|
|
2284
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
2252
2285
|
"button",
|
|
2253
2286
|
{
|
|
2254
2287
|
ref,
|
|
@@ -2256,9 +2289,9 @@ var KdsBankRow = (0, import_react31.forwardRef)(
|
|
|
2256
2289
|
className: (0, import_clsx.clsx)("kds-bank-row", selected && "selected", className),
|
|
2257
2290
|
...props,
|
|
2258
2291
|
children: [
|
|
2259
|
-
!hideLogo && /* @__PURE__ */ (0,
|
|
2260
|
-
/* @__PURE__ */ (0,
|
|
2261
|
-
/* @__PURE__ */ (0,
|
|
2292
|
+
!hideLogo && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: logoUrl, alt: nameStr }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "initials", children: nameStr.charAt(0) }) }),
|
|
2293
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "kds-bank-row-name", children: name }),
|
|
2294
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("i", { className: "material-symbols-outlined", children: selected ? "check_circle" : "chevron_right" })
|
|
2262
2295
|
]
|
|
2263
2296
|
}
|
|
2264
2297
|
);
|
|
@@ -2267,32 +2300,32 @@ var KdsBankRow = (0, import_react31.forwardRef)(
|
|
|
2267
2300
|
KdsBankRow.displayName = "KdsBankRow";
|
|
2268
2301
|
|
|
2269
2302
|
// src/components/domain/KdsBankList/KdsBankList.tsx
|
|
2270
|
-
var
|
|
2271
|
-
var
|
|
2272
|
-
var KdsBankList = (0,
|
|
2273
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2303
|
+
var import_react33 = require("react");
|
|
2304
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2305
|
+
var KdsBankList = (0, import_react33.forwardRef)(
|
|
2306
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bank-list", className), role: "list", ...props, children })
|
|
2274
2307
|
);
|
|
2275
2308
|
KdsBankList.displayName = "KdsBankList";
|
|
2276
2309
|
|
|
2277
2310
|
// src/components/domain/KdsBankModal/KdsBankModal.tsx
|
|
2278
|
-
var
|
|
2311
|
+
var import_react34 = require("react");
|
|
2279
2312
|
var Dialog = __toESM(require("@radix-ui/react-dialog"));
|
|
2280
|
-
var
|
|
2281
|
-
var KdsBankModal = (0,
|
|
2313
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2314
|
+
var KdsBankModal = (0, import_react34.forwardRef)(
|
|
2282
2315
|
({ open, onClose, title = "Selecciona tu banco", searchPlaceholder = "Buscar banco...", onSearch, children, className, container }, ref) => {
|
|
2283
|
-
const [query, setQuery] = (0,
|
|
2316
|
+
const [query, setQuery] = (0, import_react34.useState)("");
|
|
2284
2317
|
const handleSearch = (value) => {
|
|
2285
2318
|
setQuery(value);
|
|
2286
2319
|
onSearch?.(value);
|
|
2287
2320
|
};
|
|
2288
|
-
return /* @__PURE__ */ (0,
|
|
2321
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog.Root, { open, onOpenChange: (o) => {
|
|
2289
2322
|
if (!o) onClose();
|
|
2290
|
-
}, children: /* @__PURE__ */ (0,
|
|
2291
|
-
/* @__PURE__ */ (0,
|
|
2292
|
-
/* @__PURE__ */ (0,
|
|
2293
|
-
/* @__PURE__ */ (0,
|
|
2323
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Dialog.Content, { ref, className: (0, import_clsx.clsx)("kds-bank-modal", className), children: [
|
|
2324
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "kds-bank-modal-header", children: [
|
|
2325
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { children: title }) }),
|
|
2326
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { className: "kds-bank-modal-close", "aria-label": "Cerrar", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("i", { className: "material-symbols-outlined", children: "close" }) }) })
|
|
2294
2327
|
] }),
|
|
2295
|
-
/* @__PURE__ */ (0,
|
|
2328
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "kds-bank-modal-search", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2296
2329
|
KdsSearchField,
|
|
2297
2330
|
{
|
|
2298
2331
|
placeholder: searchPlaceholder,
|
|
@@ -2300,33 +2333,33 @@ var KdsBankModal = (0, import_react33.forwardRef)(
|
|
|
2300
2333
|
onChange: (e) => handleSearch(e.target.value)
|
|
2301
2334
|
}
|
|
2302
2335
|
) }),
|
|
2303
|
-
/* @__PURE__ */ (0,
|
|
2336
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "kds-bank-modal-body", children })
|
|
2304
2337
|
] }) }) }) });
|
|
2305
2338
|
}
|
|
2306
2339
|
);
|
|
2307
2340
|
KdsBankModal.displayName = "KdsBankModal";
|
|
2308
2341
|
|
|
2309
2342
|
// src/components/domain/KdsQrRow/KdsQrRow.tsx
|
|
2310
|
-
var
|
|
2311
|
-
var
|
|
2312
|
-
var KdsQrRow = (0,
|
|
2313
|
-
({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2314
|
-
/* @__PURE__ */ (0,
|
|
2315
|
-
/* @__PURE__ */ (0,
|
|
2316
|
-
/* @__PURE__ */ (0,
|
|
2317
|
-
description && /* @__PURE__ */ (0,
|
|
2343
|
+
var import_react35 = require("react");
|
|
2344
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2345
|
+
var KdsQrRow = (0, import_react35.forwardRef)(
|
|
2346
|
+
({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("button", { ref, type: "button", className: (0, import_clsx.clsx)("kds-qr-row", className), ...props, children: [
|
|
2347
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
|
|
2348
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "kds-qr-text", children: [
|
|
2349
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-qr-title", children: name }),
|
|
2350
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-qr-subtitle", children: description })
|
|
2318
2351
|
] }),
|
|
2319
|
-
badge && /* @__PURE__ */ (0,
|
|
2320
|
-
/* @__PURE__ */ (0,
|
|
2352
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-qr-badge", children: badge }),
|
|
2353
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("i", { className: "material-symbols-outlined", children: "chevron_right" })
|
|
2321
2354
|
] })
|
|
2322
2355
|
);
|
|
2323
2356
|
KdsQrRow.displayName = "KdsQrRow";
|
|
2324
2357
|
|
|
2325
2358
|
// src/components/domain/KdsCardSelector/KdsCardSelector.tsx
|
|
2326
|
-
var
|
|
2327
|
-
var
|
|
2328
|
-
var KdsCardSelector = (0,
|
|
2329
|
-
({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2359
|
+
var import_react36 = require("react");
|
|
2360
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2361
|
+
var KdsCardSelector = (0, import_react36.forwardRef)(
|
|
2362
|
+
({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
2330
2363
|
"button",
|
|
2331
2364
|
{
|
|
2332
2365
|
ref,
|
|
@@ -2334,9 +2367,9 @@ var KdsCardSelector = (0, import_react35.forwardRef)(
|
|
|
2334
2367
|
className: (0, import_clsx.clsx)("kds-card-selector", selected && "selected", className),
|
|
2335
2368
|
...props,
|
|
2336
2369
|
children: [
|
|
2337
|
-
icon && /* @__PURE__ */ (0,
|
|
2338
|
-
/* @__PURE__ */ (0,
|
|
2339
|
-
description && /* @__PURE__ */ (0,
|
|
2370
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "kds-card-selector-icon", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
|
|
2371
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "kds-card-selector-title", children: title }),
|
|
2372
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "kds-card-selector-description", children: description })
|
|
2340
2373
|
]
|
|
2341
2374
|
}
|
|
2342
2375
|
)
|
|
@@ -2344,26 +2377,26 @@ var KdsCardSelector = (0, import_react35.forwardRef)(
|
|
|
2344
2377
|
KdsCardSelector.displayName = "KdsCardSelector";
|
|
2345
2378
|
|
|
2346
2379
|
// src/components/domain/KdsCardPlan/KdsCardPlan.tsx
|
|
2347
|
-
var
|
|
2348
|
-
var
|
|
2349
|
-
var KdsCardPlan = (0,
|
|
2350
|
-
({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2380
|
+
var import_react37 = require("react");
|
|
2381
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
2382
|
+
var KdsCardPlan = (0, import_react37.forwardRef)(
|
|
2383
|
+
({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
2351
2384
|
"div",
|
|
2352
2385
|
{
|
|
2353
2386
|
ref,
|
|
2354
2387
|
className: (0, import_clsx.clsx)("kds-card-plan", recommended && "recommended", className),
|
|
2355
2388
|
...props,
|
|
2356
2389
|
children: [
|
|
2357
|
-
/* @__PURE__ */ (0,
|
|
2358
|
-
/* @__PURE__ */ (0,
|
|
2359
|
-
/* @__PURE__ */ (0,
|
|
2360
|
-
period && /* @__PURE__ */ (0,
|
|
2390
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { children: title }) }),
|
|
2391
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "kds-card-plan-price", children: [
|
|
2392
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "kds-price", children: price }),
|
|
2393
|
+
period && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "kds-price-period", children: [
|
|
2361
2394
|
"/",
|
|
2362
2395
|
period
|
|
2363
2396
|
] })
|
|
2364
2397
|
] }),
|
|
2365
|
-
badgeText && /* @__PURE__ */ (0,
|
|
2366
|
-
features && features.length > 0 && /* @__PURE__ */ (0,
|
|
2398
|
+
badgeText && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "kds-card-plan-badge", children: badgeText }),
|
|
2399
|
+
features && features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "kds-card-plan-features", children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { children: f }, i)) }),
|
|
2367
2400
|
action
|
|
2368
2401
|
]
|
|
2369
2402
|
}
|
|
@@ -2372,10 +2405,10 @@ var KdsCardPlan = (0, import_react36.forwardRef)(
|
|
|
2372
2405
|
KdsCardPlan.displayName = "KdsCardPlan";
|
|
2373
2406
|
|
|
2374
2407
|
// src/components/domain/KdsInvoiceSticky/KdsInvoiceSticky.tsx
|
|
2375
|
-
var
|
|
2376
|
-
var
|
|
2377
|
-
var KdsInvoiceSticky = (0,
|
|
2378
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2408
|
+
var import_react38 = require("react");
|
|
2409
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2410
|
+
var KdsInvoiceSticky = (0, import_react38.forwardRef)(
|
|
2411
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2379
2412
|
"article",
|
|
2380
2413
|
{
|
|
2381
2414
|
ref,
|
|
@@ -2388,10 +2421,10 @@ var KdsInvoiceSticky = (0, import_react37.forwardRef)(
|
|
|
2388
2421
|
KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
|
|
2389
2422
|
|
|
2390
2423
|
// src/components/domain/KdsBottomSheet/KdsBottomSheet.tsx
|
|
2391
|
-
var
|
|
2424
|
+
var import_react39 = require("react");
|
|
2392
2425
|
var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
|
|
2393
|
-
var
|
|
2394
|
-
var KdsBottomSheet = (0,
|
|
2426
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2427
|
+
var KdsBottomSheet = (0, import_react39.forwardRef)(
|
|
2395
2428
|
({
|
|
2396
2429
|
open,
|
|
2397
2430
|
onClose,
|
|
@@ -2403,14 +2436,14 @@ var KdsBottomSheet = (0, import_react38.forwardRef)(
|
|
|
2403
2436
|
showCloseButton = false,
|
|
2404
2437
|
container,
|
|
2405
2438
|
className
|
|
2406
|
-
}, ref) => /* @__PURE__ */ (0,
|
|
2439
|
+
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2407
2440
|
Dialog2.Root,
|
|
2408
2441
|
{
|
|
2409
2442
|
open,
|
|
2410
2443
|
onOpenChange: (o) => {
|
|
2411
2444
|
if (!o) onClose();
|
|
2412
2445
|
},
|
|
2413
|
-
children: /* @__PURE__ */ (0,
|
|
2446
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog2.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog2.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
2414
2447
|
Dialog2.Content,
|
|
2415
2448
|
{
|
|
2416
2449
|
ref,
|
|
@@ -2420,20 +2453,20 @@ var KdsBottomSheet = (0, import_react38.forwardRef)(
|
|
|
2420
2453
|
if (target.closest(".kds-bottom-sheet")) e.preventDefault();
|
|
2421
2454
|
},
|
|
2422
2455
|
children: [
|
|
2423
|
-
showGrabber && /* @__PURE__ */ (0,
|
|
2424
|
-
showCloseButton && /* @__PURE__ */ (0,
|
|
2456
|
+
showGrabber && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "kds-bottom-sheet-grabber", "aria-hidden": "true" }),
|
|
2457
|
+
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2425
2458
|
"button",
|
|
2426
2459
|
{
|
|
2427
2460
|
type: "button",
|
|
2428
2461
|
className: "kds-bottom-sheet-close",
|
|
2429
2462
|
"aria-label": "Cerrar",
|
|
2430
|
-
children: /* @__PURE__ */ (0,
|
|
2463
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", { className: "material-symbols-outlined", children: "close" })
|
|
2431
2464
|
}
|
|
2432
2465
|
) }),
|
|
2433
|
-
title && /* @__PURE__ */ (0,
|
|
2434
|
-
description && /* @__PURE__ */ (0,
|
|
2435
|
-
/* @__PURE__ */ (0,
|
|
2436
|
-
actions && /* @__PURE__ */ (0,
|
|
2466
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog2.Title, { className: "kds-bottom-sheet-title", children: title }),
|
|
2467
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog2.Description, { className: "kds-bottom-sheet-description", children: description }),
|
|
2468
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "kds-bottom-sheet-body", children }),
|
|
2469
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "kds-bottom-sheet-actions", children: actions })
|
|
2437
2470
|
]
|
|
2438
2471
|
}
|
|
2439
2472
|
) }) })
|
|
@@ -2443,13 +2476,13 @@ var KdsBottomSheet = (0, import_react38.forwardRef)(
|
|
|
2443
2476
|
KdsBottomSheet.displayName = "KdsBottomSheet";
|
|
2444
2477
|
|
|
2445
2478
|
// src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
|
|
2446
|
-
var
|
|
2479
|
+
var import_react41 = require("react");
|
|
2447
2480
|
|
|
2448
2481
|
// src/components/domain/KdsSecureFooter/KhipuWordmark.tsx
|
|
2449
|
-
var
|
|
2450
|
-
var
|
|
2451
|
-
var KhipuWordmark = (0,
|
|
2452
|
-
({ className = "khipu-mark", ...props }, ref) => /* @__PURE__ */ (0,
|
|
2482
|
+
var import_react40 = require("react");
|
|
2483
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2484
|
+
var KhipuWordmark = (0, import_react40.forwardRef)(
|
|
2485
|
+
({ className = "khipu-mark", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
2453
2486
|
"svg",
|
|
2454
2487
|
{
|
|
2455
2488
|
ref,
|
|
@@ -2460,14 +2493,14 @@ var KhipuWordmark = (0, import_react39.forwardRef)(
|
|
|
2460
2493
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2461
2494
|
...props,
|
|
2462
2495
|
children: [
|
|
2463
|
-
/* @__PURE__ */ (0,
|
|
2464
|
-
/* @__PURE__ */ (0,
|
|
2465
|
-
/* @__PURE__ */ (0,
|
|
2466
|
-
/* @__PURE__ */ (0,
|
|
2467
|
-
/* @__PURE__ */ (0,
|
|
2468
|
-
/* @__PURE__ */ (0,
|
|
2469
|
-
/* @__PURE__ */ (0,
|
|
2470
|
-
/* @__PURE__ */ (0,
|
|
2496
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.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" }),
|
|
2497
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.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" }),
|
|
2498
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.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" }),
|
|
2499
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.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" }),
|
|
2500
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.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" }),
|
|
2501
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.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" }),
|
|
2502
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.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" }),
|
|
2503
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.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" })
|
|
2471
2504
|
]
|
|
2472
2505
|
}
|
|
2473
2506
|
)
|
|
@@ -2475,17 +2508,17 @@ var KhipuWordmark = (0, import_react39.forwardRef)(
|
|
|
2475
2508
|
KhipuWordmark.displayName = "KhipuWordmark";
|
|
2476
2509
|
|
|
2477
2510
|
// src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
|
|
2478
|
-
var
|
|
2479
|
-
var KdsSecureFooter = (0,
|
|
2480
|
-
({ variant = "default", showLogo = true, psp, children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2481
|
-
/* @__PURE__ */ (0,
|
|
2482
|
-
/* @__PURE__ */ (0,
|
|
2483
|
-
/* @__PURE__ */ (0,
|
|
2511
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2512
|
+
var KdsSecureFooter = (0, import_react41.forwardRef)(
|
|
2513
|
+
({ variant = "default", showLogo = true, psp, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("footer", { ref, className: (0, import_clsx.clsx)("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
|
|
2514
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("svg", { className: "kds-secure-footer-lock", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
|
|
2515
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("rect", { x: "4.5", y: "10.5", width: "15", height: "10", rx: "2.25" }),
|
|
2516
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M8 10.5V7a4 4 0 0 1 8 0v3.5" })
|
|
2484
2517
|
] }),
|
|
2485
|
-
children || /* @__PURE__ */ (0,
|
|
2486
|
-
showLogo && /* @__PURE__ */ (0,
|
|
2487
|
-
psp && /* @__PURE__ */ (0,
|
|
2488
|
-
/* @__PURE__ */ (0,
|
|
2518
|
+
children || /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "Pago seguro procesado por" }),
|
|
2519
|
+
showLogo && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KhipuWordmark, {}),
|
|
2520
|
+
psp && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
2521
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "kds-secure-footer-sep", "aria-hidden": "true" }),
|
|
2489
2522
|
psp
|
|
2490
2523
|
] })
|
|
2491
2524
|
] })
|
|
@@ -2493,44 +2526,44 @@ var KdsSecureFooter = (0, import_react40.forwardRef)(
|
|
|
2493
2526
|
KdsSecureFooter.displayName = "KdsSecureFooter";
|
|
2494
2527
|
|
|
2495
2528
|
// src/components/domain/KdsRecapList/KdsRecapList.tsx
|
|
2496
|
-
var
|
|
2497
|
-
var
|
|
2498
|
-
var KdsRecapList = (0,
|
|
2499
|
-
({ items, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2500
|
-
/* @__PURE__ */ (0,
|
|
2501
|
-
/* @__PURE__ */ (0,
|
|
2529
|
+
var import_react42 = require("react");
|
|
2530
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2531
|
+
var KdsRecapList = (0, import_react42.forwardRef)(
|
|
2532
|
+
({ items, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { ref, className: (0, import_clsx.clsx)("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("li", { children: [
|
|
2533
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "kds-key", children: item.label }),
|
|
2534
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: (0, import_clsx.clsx)("kds-value", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
|
|
2502
2535
|
] }, i)) })
|
|
2503
2536
|
);
|
|
2504
2537
|
KdsRecapList.displayName = "KdsRecapList";
|
|
2505
2538
|
|
|
2506
2539
|
// src/components/domain/KdsMontoRow/KdsMontoRow.tsx
|
|
2507
|
-
var
|
|
2508
|
-
var
|
|
2509
|
-
var KdsMontoRow = (0,
|
|
2510
|
-
({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2511
|
-
/* @__PURE__ */ (0,
|
|
2512
|
-
/* @__PURE__ */ (0,
|
|
2513
|
-
deadline && /* @__PURE__ */ (0,
|
|
2540
|
+
var import_react43 = require("react");
|
|
2541
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2542
|
+
var KdsMontoRow = (0, import_react43.forwardRef)(
|
|
2543
|
+
({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-monto-row", className), ...props, children: [
|
|
2544
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
|
|
2545
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "kds-monto-row-title", children: title }),
|
|
2546
|
+
deadline && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "kds-monto-row-deadline", children: deadline })
|
|
2514
2547
|
] }),
|
|
2515
|
-
/* @__PURE__ */ (0,
|
|
2548
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "kds-monto-row-value", children: value })
|
|
2516
2549
|
] })
|
|
2517
2550
|
);
|
|
2518
2551
|
KdsMontoRow.displayName = "KdsMontoRow";
|
|
2519
2552
|
|
|
2520
2553
|
// src/components/domain/KdsMerchantTile/KdsMerchantTile.tsx
|
|
2521
|
-
var
|
|
2522
|
-
var
|
|
2523
|
-
var KdsMerchantTile = (0,
|
|
2554
|
+
var import_react44 = require("react");
|
|
2555
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2556
|
+
var KdsMerchantTile = (0, import_react44.forwardRef)(
|
|
2524
2557
|
({ name, logoUrl, initials, compact, className, ...props }, ref) => {
|
|
2525
2558
|
const displayInitials = (initials ?? name.slice(0, 2)).toUpperCase();
|
|
2526
|
-
return /* @__PURE__ */ (0,
|
|
2559
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2527
2560
|
"div",
|
|
2528
2561
|
{
|
|
2529
2562
|
ref,
|
|
2530
2563
|
className: (0, import_clsx.clsx)("kds-merchant-tile", logoUrl && "logo", compact && "compact", className),
|
|
2531
2564
|
"aria-label": name,
|
|
2532
2565
|
...props,
|
|
2533
|
-
children: logoUrl ? /* @__PURE__ */ (0,
|
|
2566
|
+
children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("img", { src: logoUrl, alt: name }) : displayInitials
|
|
2534
2567
|
}
|
|
2535
2568
|
);
|
|
2536
2569
|
}
|
|
@@ -2538,13 +2571,13 @@ var KdsMerchantTile = (0, import_react43.forwardRef)(
|
|
|
2538
2571
|
KdsMerchantTile.displayName = "KdsMerchantTile";
|
|
2539
2572
|
|
|
2540
2573
|
// src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
|
|
2541
|
-
var
|
|
2542
|
-
var
|
|
2543
|
-
var KdsInvoiceMerchant = (0,
|
|
2574
|
+
var import_react45 = require("react");
|
|
2575
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2576
|
+
var KdsInvoiceMerchant = (0, import_react45.forwardRef)(
|
|
2544
2577
|
({ logoUrl, brandColor, className, style, ...props }, ref) => {
|
|
2545
|
-
const [failed, setFailed] = (0,
|
|
2578
|
+
const [failed, setFailed] = (0, import_react45.useState)(false);
|
|
2546
2579
|
const showLogo = !!logoUrl && !failed;
|
|
2547
|
-
return /* @__PURE__ */ (0,
|
|
2580
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
2548
2581
|
"div",
|
|
2549
2582
|
{
|
|
2550
2583
|
ref,
|
|
@@ -2552,7 +2585,7 @@ var KdsInvoiceMerchant = (0, import_react44.forwardRef)(
|
|
|
2552
2585
|
"aria-hidden": "true",
|
|
2553
2586
|
style: brandColor ? { background: brandColor, ...style } : style,
|
|
2554
2587
|
...props,
|
|
2555
|
-
children: showLogo ? /* @__PURE__ */ (0,
|
|
2588
|
+
children: showLogo ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("img", { src: logoUrl, alt: "", onError: () => setFailed(true) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { className: "material-symbols-outlined", children: "storefront" })
|
|
2556
2589
|
}
|
|
2557
2590
|
);
|
|
2558
2591
|
}
|
|
@@ -2560,9 +2593,9 @@ var KdsInvoiceMerchant = (0, import_react44.forwardRef)(
|
|
|
2560
2593
|
KdsInvoiceMerchant.displayName = "KdsInvoiceMerchant";
|
|
2561
2594
|
|
|
2562
2595
|
// src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
|
|
2563
|
-
var
|
|
2564
|
-
var
|
|
2565
|
-
var KdsPaymentTotal = (0,
|
|
2596
|
+
var import_react46 = require("react");
|
|
2597
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2598
|
+
var KdsPaymentTotal = (0, import_react46.forwardRef)(
|
|
2566
2599
|
({
|
|
2567
2600
|
variant = "default",
|
|
2568
2601
|
tone = "brand",
|
|
@@ -2580,7 +2613,7 @@ var KdsPaymentTotal = (0, import_react45.forwardRef)(
|
|
|
2580
2613
|
const { integer, fraction } = formatAmount(amount, decimals, locale);
|
|
2581
2614
|
const isEmail = variant === "email";
|
|
2582
2615
|
const isInfoTone = tone === "info";
|
|
2583
|
-
return /* @__PURE__ */ (0,
|
|
2616
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
2584
2617
|
"div",
|
|
2585
2618
|
{
|
|
2586
2619
|
ref,
|
|
@@ -2593,14 +2626,14 @@ var KdsPaymentTotal = (0, import_react45.forwardRef)(
|
|
|
2593
2626
|
),
|
|
2594
2627
|
...props,
|
|
2595
2628
|
children: [
|
|
2596
|
-
!isEmail && title != null && /* @__PURE__ */ (0,
|
|
2597
|
-
!isEmail && titleMobile != null && /* @__PURE__ */ (0,
|
|
2598
|
-
label != null && /* @__PURE__ */ (0,
|
|
2599
|
-
/* @__PURE__ */ (0,
|
|
2629
|
+
!isEmail && title != null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h5", { className: "kds-payment-total-title", children: title }),
|
|
2630
|
+
!isEmail && titleMobile != null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
|
|
2631
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h6", { className: "kds-payment-label", children: label }),
|
|
2632
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("h5", { className: "kds-payment-amount", children: [
|
|
2600
2633
|
currency,
|
|
2601
2634
|
" ",
|
|
2602
2635
|
integer,
|
|
2603
|
-
fraction !== null && /* @__PURE__ */ (0,
|
|
2636
|
+
fraction !== null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
|
|
2604
2637
|
] })
|
|
2605
2638
|
]
|
|
2606
2639
|
}
|
|
@@ -2636,10 +2669,10 @@ function formatAmount(amount, decimals, locale) {
|
|
|
2636
2669
|
}
|
|
2637
2670
|
|
|
2638
2671
|
// src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
|
|
2639
|
-
var
|
|
2640
|
-
var
|
|
2641
|
-
var KdsBillAttachment = (0,
|
|
2642
|
-
({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2672
|
+
var import_react47 = require("react");
|
|
2673
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2674
|
+
var KdsBillAttachment = (0, import_react47.forwardRef)(
|
|
2675
|
+
({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
2643
2676
|
"a",
|
|
2644
2677
|
{
|
|
2645
2678
|
ref,
|
|
@@ -2649,25 +2682,25 @@ var KdsBillAttachment = (0, import_react46.forwardRef)(
|
|
|
2649
2682
|
className: (0, import_clsx.clsx)("kds-bill-attachment", className),
|
|
2650
2683
|
...props,
|
|
2651
2684
|
children: [
|
|
2652
|
-
/* @__PURE__ */ (0,
|
|
2653
|
-
/* @__PURE__ */ (0,
|
|
2685
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("i", { className: "material-symbols-outlined", children: icon }),
|
|
2686
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: filename })
|
|
2654
2687
|
]
|
|
2655
2688
|
}
|
|
2656
2689
|
)
|
|
2657
2690
|
);
|
|
2658
2691
|
KdsBillAttachment.displayName = "KdsBillAttachment";
|
|
2659
|
-
var KdsBillAttachments = (0,
|
|
2660
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2692
|
+
var KdsBillAttachments = (0, import_react47.forwardRef)(
|
|
2693
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bill-attachments", className), ...props, children })
|
|
2661
2694
|
);
|
|
2662
2695
|
KdsBillAttachments.displayName = "KdsBillAttachments";
|
|
2663
2696
|
|
|
2664
2697
|
// src/components/core/hooks/useStickyInvoiceCollapse.ts
|
|
2665
|
-
var
|
|
2698
|
+
var import_react48 = require("react");
|
|
2666
2699
|
function useStickyInvoiceCollapse(options = {}) {
|
|
2667
2700
|
const { onCollapseStart, collapseEnd = 20, mobileBreakpoint = 768 } = options;
|
|
2668
|
-
const onCollapseStartRef = (0,
|
|
2701
|
+
const onCollapseStartRef = (0, import_react48.useRef)(onCollapseStart);
|
|
2669
2702
|
onCollapseStartRef.current = onCollapseStart;
|
|
2670
|
-
(0,
|
|
2703
|
+
(0, import_react48.useEffect)(() => {
|
|
2671
2704
|
let viewportOffset = 0;
|
|
2672
2705
|
let ticking = false;
|
|
2673
2706
|
let wasCollapsing = false;
|
|
@@ -2740,24 +2773,24 @@ function useStickyInvoiceCollapse(options = {}) {
|
|
|
2740
2773
|
}
|
|
2741
2774
|
|
|
2742
2775
|
// src/components/core/hooks/useExpandToggle.ts
|
|
2743
|
-
var
|
|
2776
|
+
var import_react49 = require("react");
|
|
2744
2777
|
function useExpandToggle(options = {}) {
|
|
2745
2778
|
const { defaultOpen = false, open: controlledOpen, onOpenChange, id } = options;
|
|
2746
|
-
const generatedId = (0,
|
|
2779
|
+
const generatedId = (0, import_react49.useId)();
|
|
2747
2780
|
const panelId = id ?? `kds-expand-${generatedId}`;
|
|
2748
2781
|
const isControlled = controlledOpen !== void 0;
|
|
2749
|
-
const [uncontrolledOpen, setUncontrolledOpen] = (0,
|
|
2782
|
+
const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react49.useState)(defaultOpen);
|
|
2750
2783
|
const open = isControlled ? controlledOpen : uncontrolledOpen;
|
|
2751
|
-
const panelRef = (0,
|
|
2752
|
-
const setPanelRef = (0,
|
|
2784
|
+
const panelRef = (0, import_react49.useRef)(null);
|
|
2785
|
+
const setPanelRef = (0, import_react49.useCallback)((node) => {
|
|
2753
2786
|
panelRef.current = node;
|
|
2754
2787
|
}, []);
|
|
2755
|
-
(0,
|
|
2788
|
+
(0, import_react49.useLayoutEffect)(() => {
|
|
2756
2789
|
const panel = panelRef.current;
|
|
2757
2790
|
if (!panel) return;
|
|
2758
2791
|
panel.style.maxHeight = open ? `${panel.scrollHeight}px` : "";
|
|
2759
2792
|
}, [open]);
|
|
2760
|
-
const setOpen = (0,
|
|
2793
|
+
const setOpen = (0, import_react49.useCallback)(
|
|
2761
2794
|
(next) => {
|
|
2762
2795
|
if (!isControlled) {
|
|
2763
2796
|
setUncontrolledOpen(next);
|
|
@@ -2766,8 +2799,8 @@ function useExpandToggle(options = {}) {
|
|
|
2766
2799
|
},
|
|
2767
2800
|
[isControlled, onOpenChange]
|
|
2768
2801
|
);
|
|
2769
|
-
const toggle = (0,
|
|
2770
|
-
const getToggleProps = (0,
|
|
2802
|
+
const toggle = (0, import_react49.useCallback)(() => setOpen(!open), [open, setOpen]);
|
|
2803
|
+
const getToggleProps = (0, import_react49.useCallback)(
|
|
2771
2804
|
() => ({
|
|
2772
2805
|
type: "button",
|
|
2773
2806
|
"aria-expanded": open,
|
|
@@ -2776,7 +2809,7 @@ function useExpandToggle(options = {}) {
|
|
|
2776
2809
|
}),
|
|
2777
2810
|
[open, panelId, toggle]
|
|
2778
2811
|
);
|
|
2779
|
-
const getPanelProps = (0,
|
|
2812
|
+
const getPanelProps = (0, import_react49.useCallback)(
|
|
2780
2813
|
(baseClassName = "kds-expand-panel") => ({
|
|
2781
2814
|
id: panelId,
|
|
2782
2815
|
className: open ? `${baseClassName} open` : baseClassName,
|
|
@@ -2787,6 +2820,53 @@ function useExpandToggle(options = {}) {
|
|
|
2787
2820
|
);
|
|
2788
2821
|
return { open, setOpen, toggle, getToggleProps, getPanelProps };
|
|
2789
2822
|
}
|
|
2823
|
+
|
|
2824
|
+
// src/components/core/hooks/useHideOnScroll.ts
|
|
2825
|
+
var import_react50 = require("react");
|
|
2826
|
+
function useHideOnScroll(options = {}) {
|
|
2827
|
+
const { threshold = 8, topOffset = 0 } = options;
|
|
2828
|
+
const [hidden, setHidden] = (0, import_react50.useState)(false);
|
|
2829
|
+
(0, import_react50.useEffect)(() => {
|
|
2830
|
+
let viewportOffset = 0;
|
|
2831
|
+
let lastY = 0;
|
|
2832
|
+
let ticking = false;
|
|
2833
|
+
const currentY = () => Math.max(window.scrollY || window.pageYOffset || 0, viewportOffset);
|
|
2834
|
+
const apply = () => {
|
|
2835
|
+
ticking = false;
|
|
2836
|
+
const y = currentY();
|
|
2837
|
+
if (y <= topOffset) {
|
|
2838
|
+
setHidden(false);
|
|
2839
|
+
lastY = y;
|
|
2840
|
+
return;
|
|
2841
|
+
}
|
|
2842
|
+
const delta = y - lastY;
|
|
2843
|
+
if (Math.abs(delta) < threshold) return;
|
|
2844
|
+
setHidden(delta > 0);
|
|
2845
|
+
lastY = y;
|
|
2846
|
+
};
|
|
2847
|
+
const onScroll = () => {
|
|
2848
|
+
if (ticking) return;
|
|
2849
|
+
ticking = true;
|
|
2850
|
+
window.requestAnimationFrame(apply);
|
|
2851
|
+
};
|
|
2852
|
+
const onMessage = (event) => {
|
|
2853
|
+
if (event.data && event.data.type === "VIEWPORT_OFFSET") {
|
|
2854
|
+
viewportOffset = Math.max(0, event.data.offsetTop || 0);
|
|
2855
|
+
onScroll();
|
|
2856
|
+
}
|
|
2857
|
+
};
|
|
2858
|
+
lastY = currentY();
|
|
2859
|
+
window.addEventListener("scroll", onScroll, { passive: true });
|
|
2860
|
+
window.addEventListener("resize", onScroll);
|
|
2861
|
+
window.addEventListener("message", onMessage);
|
|
2862
|
+
return () => {
|
|
2863
|
+
window.removeEventListener("scroll", onScroll);
|
|
2864
|
+
window.removeEventListener("resize", onScroll);
|
|
2865
|
+
window.removeEventListener("message", onMessage);
|
|
2866
|
+
};
|
|
2867
|
+
}, [threshold, topOffset]);
|
|
2868
|
+
return { hidden };
|
|
2869
|
+
}
|
|
2790
2870
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2791
2871
|
0 && (module.exports = {
|
|
2792
2872
|
KdsAccordion,
|
|
@@ -2814,6 +2894,7 @@ function useExpandToggle(options = {}) {
|
|
|
2814
2894
|
KdsCountdown,
|
|
2815
2895
|
KdsDivider,
|
|
2816
2896
|
KdsExpandPanel,
|
|
2897
|
+
KdsFab,
|
|
2817
2898
|
KdsInvoiceMerchant,
|
|
2818
2899
|
KdsInvoiceSticky,
|
|
2819
2900
|
KdsLinearProgress,
|
|
@@ -2863,6 +2944,7 @@ function useExpandToggle(options = {}) {
|
|
|
2863
2944
|
useCopyToClipboard,
|
|
2864
2945
|
useCountdown,
|
|
2865
2946
|
useExpandToggle,
|
|
2947
|
+
useHideOnScroll,
|
|
2866
2948
|
useStickyInvoiceCollapse,
|
|
2867
2949
|
useTabsKeyboard,
|
|
2868
2950
|
zIndex
|