@khipu/design-system 0.3.5-alpha.27 → 0.3.5-alpha.29
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 +63 -1
- package/dist/beercss/khipu-beercss.min.css +1 -1
- package/dist/beercss/khipu-beercss.scoped.css +63 -1
- package/dist/beercss/khipu-beercss.scoped.min.css +1 -1
- package/dist/beercss/metadata.json +5 -5
- package/dist/index.d.mts +38 -2
- package/dist/index.d.ts +38 -2
- package/dist/index.js +282 -243
- package/dist/index.mjs +217 -179
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -55,6 +55,7 @@ __export(index_exports, {
|
|
|
55
55
|
KdsCopyableTable: () => KdsCopyableTable,
|
|
56
56
|
KdsCountdown: () => KdsCountdown,
|
|
57
57
|
KdsDivider: () => KdsDivider,
|
|
58
|
+
KdsDocumentFrame: () => KdsDocumentFrame,
|
|
58
59
|
KdsEmptyState: () => KdsEmptyState,
|
|
59
60
|
KdsExpandPanel: () => KdsExpandPanel,
|
|
60
61
|
KdsFab: () => KdsFab,
|
|
@@ -199,7 +200,7 @@ function formatTime(iso) {
|
|
|
199
200
|
}
|
|
200
201
|
|
|
201
202
|
// src/version.ts
|
|
202
|
-
var KDS_VERSION = "0.3.5-alpha.
|
|
203
|
+
var KDS_VERSION = "0.3.5-alpha.29";
|
|
203
204
|
|
|
204
205
|
// src/theme/KdsThemeProvider.tsx
|
|
205
206
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -1932,42 +1933,78 @@ var KdsDivider = (0, import_react21.forwardRef)(
|
|
|
1932
1933
|
);
|
|
1933
1934
|
KdsDivider.displayName = "KdsDivider";
|
|
1934
1935
|
|
|
1935
|
-
// src/components/core/
|
|
1936
|
+
// src/components/core/KdsDocumentFrame/KdsDocumentFrame.tsx
|
|
1936
1937
|
var import_react22 = require("react");
|
|
1937
1938
|
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1938
|
-
var
|
|
1939
|
-
({
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1939
|
+
var KdsDocumentFrame = (0, import_react22.forwardRef)(
|
|
1940
|
+
({ src, title, scale = 1, className, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1941
|
+
"div",
|
|
1942
|
+
{
|
|
1943
|
+
ref,
|
|
1944
|
+
className: (0, import_clsx.clsx)("kds-document-frame", className),
|
|
1945
|
+
style: { "--kds-document-frame-scale": scale, ...style },
|
|
1946
|
+
...props,
|
|
1947
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("iframe", { src, title })
|
|
1948
|
+
}
|
|
1949
|
+
)
|
|
1943
1950
|
);
|
|
1944
|
-
|
|
1951
|
+
KdsDocumentFrame.displayName = "KdsDocumentFrame";
|
|
1945
1952
|
|
|
1946
|
-
// src/components/core/
|
|
1953
|
+
// src/components/core/KdsSectionNote/KdsSectionNote.tsx
|
|
1947
1954
|
var import_react23 = require("react");
|
|
1948
1955
|
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1949
|
-
var
|
|
1950
|
-
({
|
|
1951
|
-
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("
|
|
1952
|
-
/* @__PURE__ */ (0, import_jsx_runtime22.
|
|
1953
|
-
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "kds-status-block-title", children: title }),
|
|
1954
|
-
description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "kds-status-block-description", children: description })
|
|
1955
|
-
] })
|
|
1956
|
+
var KdsSectionNote = (0, import_react23.forwardRef)(
|
|
1957
|
+
({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { ref, className: (0, import_clsx.clsx)("kds-section-note", className), ...props, children: [
|
|
1958
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("i", { className: "material-symbols-outlined", children: icon }),
|
|
1959
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children })
|
|
1956
1960
|
] })
|
|
1957
1961
|
);
|
|
1958
|
-
|
|
1962
|
+
KdsSectionNote.displayName = "KdsSectionNote";
|
|
1959
1963
|
|
|
1960
|
-
// src/components/core/
|
|
1964
|
+
// src/components/core/KdsStatusBlock/KdsStatusBlock.tsx
|
|
1961
1965
|
var import_react24 = require("react");
|
|
1962
1966
|
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1963
|
-
var
|
|
1964
|
-
({
|
|
1967
|
+
var KdsStatusBlock = (0, import_react24.forwardRef)(
|
|
1968
|
+
({ status, icon, title, description, inline, className, ...props }, ref) => {
|
|
1969
|
+
const descriptionBelowRow = Boolean(inline && description);
|
|
1970
|
+
const descriptionNode = description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "kds-status-block-description", children: description }) : null;
|
|
1971
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1972
|
+
"div",
|
|
1973
|
+
{
|
|
1974
|
+
ref,
|
|
1975
|
+
className: (0, import_clsx.clsx)(
|
|
1976
|
+
"kds-status-block",
|
|
1977
|
+
inline && "inline",
|
|
1978
|
+
descriptionBelowRow && "kds-status-block--described",
|
|
1979
|
+
className
|
|
1980
|
+
),
|
|
1981
|
+
"data-status": status,
|
|
1982
|
+
...props,
|
|
1983
|
+
children: [
|
|
1984
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
|
|
1985
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
|
|
1986
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: "kds-status-block-title", children: title }),
|
|
1987
|
+
!descriptionBelowRow && descriptionNode
|
|
1988
|
+
] }),
|
|
1989
|
+
descriptionBelowRow && descriptionNode
|
|
1990
|
+
]
|
|
1991
|
+
}
|
|
1992
|
+
);
|
|
1993
|
+
}
|
|
1994
|
+
);
|
|
1995
|
+
KdsStatusBlock.displayName = "KdsStatusBlock";
|
|
1996
|
+
|
|
1997
|
+
// src/components/core/KdsStepper/KdsStepper.tsx
|
|
1998
|
+
var import_react25 = require("react");
|
|
1999
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2000
|
+
var KdsStepper = (0, import_react25.forwardRef)(
|
|
2001
|
+
({ steps, current, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-stepper", className), ...props, children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1965
2002
|
"div",
|
|
1966
2003
|
{
|
|
1967
2004
|
className: (0, import_clsx.clsx)("kds-step", i < current && "completed", i === current && "current"),
|
|
1968
2005
|
children: [
|
|
1969
|
-
/* @__PURE__ */ (0,
|
|
1970
|
-
/* @__PURE__ */ (0,
|
|
2006
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "kds-step-indicator" }),
|
|
2007
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "kds-step-label", children: label })
|
|
1971
2008
|
]
|
|
1972
2009
|
},
|
|
1973
2010
|
`${i}-${label}`
|
|
@@ -1976,12 +2013,12 @@ var KdsStepper = (0, import_react24.forwardRef)(
|
|
|
1976
2013
|
KdsStepper.displayName = "KdsStepper";
|
|
1977
2014
|
|
|
1978
2015
|
// src/components/core/KdsCopyRow/KdsCopyRow.tsx
|
|
1979
|
-
var
|
|
1980
|
-
var
|
|
1981
|
-
var KdsCopyRow = (0,
|
|
2016
|
+
var import_react26 = require("react");
|
|
2017
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2018
|
+
var KdsCopyRow = (0, import_react26.forwardRef)(
|
|
1982
2019
|
({ label, value, copiedText = "Copiado", className, ...props }, ref) => {
|
|
1983
2020
|
const { copied, copy } = useCopyToClipboard();
|
|
1984
|
-
return /* @__PURE__ */ (0,
|
|
2021
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1985
2022
|
"button",
|
|
1986
2023
|
{
|
|
1987
2024
|
ref,
|
|
@@ -1992,13 +2029,13 @@ var KdsCopyRow = (0, import_react25.forwardRef)(
|
|
|
1992
2029
|
"aria-label": `Copiar ${label}: ${value}`,
|
|
1993
2030
|
...props,
|
|
1994
2031
|
children: [
|
|
1995
|
-
/* @__PURE__ */ (0,
|
|
1996
|
-
/* @__PURE__ */ (0,
|
|
1997
|
-
/* @__PURE__ */ (0,
|
|
1998
|
-
/* @__PURE__ */ (0,
|
|
2032
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: "content_copy" }),
|
|
2033
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
|
|
2034
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "kds-copy-row-label", children: label }),
|
|
2035
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "kds-copy-row-value", children: value })
|
|
1999
2036
|
] }),
|
|
2000
|
-
/* @__PURE__ */ (0,
|
|
2001
|
-
/* @__PURE__ */ (0,
|
|
2037
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "kds-copy-toast", "aria-hidden": "true", children: [
|
|
2038
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { className: "material-symbols-outlined", children: "check_circle" }),
|
|
2002
2039
|
" ",
|
|
2003
2040
|
copiedText
|
|
2004
2041
|
] })
|
|
@@ -2010,8 +2047,8 @@ var KdsCopyRow = (0, import_react25.forwardRef)(
|
|
|
2010
2047
|
KdsCopyRow.displayName = "KdsCopyRow";
|
|
2011
2048
|
|
|
2012
2049
|
// src/components/core/KdsCopyableTable/KdsCopyableTable.tsx
|
|
2013
|
-
var
|
|
2014
|
-
var
|
|
2050
|
+
var import_react27 = require("react");
|
|
2051
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2015
2052
|
async function copyToClipboard(text) {
|
|
2016
2053
|
try {
|
|
2017
2054
|
if (navigator.clipboard?.writeText) {
|
|
@@ -2043,18 +2080,18 @@ function GridVariant({
|
|
|
2043
2080
|
forwardedRef,
|
|
2044
2081
|
rest
|
|
2045
2082
|
}) {
|
|
2046
|
-
return /* @__PURE__ */ (0,
|
|
2083
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2047
2084
|
"div",
|
|
2048
2085
|
{
|
|
2049
2086
|
ref: forwardedRef,
|
|
2050
2087
|
className: (0, import_clsx.clsx)("kds-copyable-table", "kds-copyable-table--grid", className),
|
|
2051
2088
|
...rest,
|
|
2052
|
-
children: gridRows.map((cells, rowIndex) => /* @__PURE__ */ (0,
|
|
2089
|
+
children: gridRows.map((cells, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2053
2090
|
"div",
|
|
2054
2091
|
{
|
|
2055
2092
|
className: "kds-copyable-table-row kds-copyable-table-row--grid",
|
|
2056
2093
|
"data-testid": "kds-grid-row",
|
|
2057
|
-
children: cells.map((text, cellIndex) => /* @__PURE__ */ (0,
|
|
2094
|
+
children: cells.map((text, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2058
2095
|
"span",
|
|
2059
2096
|
{
|
|
2060
2097
|
className: (0, import_clsx.clsx)("kds-grid-cell", disabled && "kds-grid-cell--disabled"),
|
|
@@ -2077,12 +2114,12 @@ function CopyableVariant({
|
|
|
2077
2114
|
forwardedRef,
|
|
2078
2115
|
rest
|
|
2079
2116
|
}) {
|
|
2080
|
-
const copiedTimers = (0,
|
|
2081
|
-
const settlingTimers = (0,
|
|
2082
|
-
const [copiedRows, setCopiedRows] = (0,
|
|
2083
|
-
const [settlingRows, setSettlingRows] = (0,
|
|
2084
|
-
const [allCopied, setAllCopied] = (0,
|
|
2085
|
-
const markCopied = (0,
|
|
2117
|
+
const copiedTimers = (0, import_react27.useRef)(/* @__PURE__ */ new Map());
|
|
2118
|
+
const settlingTimers = (0, import_react27.useRef)(/* @__PURE__ */ new Map());
|
|
2119
|
+
const [copiedRows, setCopiedRows] = (0, import_react27.useState)(/* @__PURE__ */ new Set());
|
|
2120
|
+
const [settlingRows, setSettlingRows] = (0, import_react27.useState)(/* @__PURE__ */ new Set());
|
|
2121
|
+
const [allCopied, setAllCopied] = (0, import_react27.useState)(false);
|
|
2122
|
+
const markCopied = (0, import_react27.useCallback)((indexes, duration = 1500) => {
|
|
2086
2123
|
setCopiedRows((prev) => {
|
|
2087
2124
|
const next = new Set(prev);
|
|
2088
2125
|
indexes.forEach((i) => next.add(i));
|
|
@@ -2141,8 +2178,8 @@ function CopyableVariant({
|
|
|
2141
2178
|
setTimeout(() => setAllCopied(false), 2e3);
|
|
2142
2179
|
}
|
|
2143
2180
|
};
|
|
2144
|
-
return /* @__PURE__ */ (0,
|
|
2145
|
-
/* @__PURE__ */ (0,
|
|
2181
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
2182
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref: forwardedRef, className: (0, import_clsx.clsx)("kds-copyable-table", className), ...rest, children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2146
2183
|
"div",
|
|
2147
2184
|
{
|
|
2148
2185
|
className: (0, import_clsx.clsx)(
|
|
@@ -2161,13 +2198,13 @@ function CopyableVariant({
|
|
|
2161
2198
|
},
|
|
2162
2199
|
"aria-label": `Copiar ${row.label}: ${row.value}`,
|
|
2163
2200
|
children: [
|
|
2164
|
-
/* @__PURE__ */ (0,
|
|
2165
|
-
/* @__PURE__ */ (0,
|
|
2201
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "kds-key", children: row.label }),
|
|
2202
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "kds-value", children: row.value })
|
|
2166
2203
|
]
|
|
2167
2204
|
},
|
|
2168
2205
|
`${row.label}-${i}`
|
|
2169
2206
|
)) }),
|
|
2170
|
-
showCopyAll && /* @__PURE__ */ (0,
|
|
2207
|
+
showCopyAll && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2171
2208
|
"button",
|
|
2172
2209
|
{
|
|
2173
2210
|
type: "button",
|
|
@@ -2181,14 +2218,14 @@ function CopyableVariant({
|
|
|
2181
2218
|
onClick: handleCopyAll,
|
|
2182
2219
|
"aria-label": allCopied ? copiedAllLabel : copyAllLabel,
|
|
2183
2220
|
children: [
|
|
2184
|
-
/* @__PURE__ */ (0,
|
|
2185
|
-
/* @__PURE__ */ (0,
|
|
2221
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "kds-icon", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("i", { className: "material-symbols-outlined", children: allCopied ? "check" : "content_copy" }) }),
|
|
2222
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: allCopied ? copiedAllLabel : copyAllLabel })
|
|
2186
2223
|
]
|
|
2187
2224
|
}
|
|
2188
2225
|
)
|
|
2189
2226
|
] });
|
|
2190
2227
|
}
|
|
2191
|
-
var KdsCopyableTable = (0,
|
|
2228
|
+
var KdsCopyableTable = (0, import_react27.forwardRef)(
|
|
2192
2229
|
({
|
|
2193
2230
|
rows = [],
|
|
2194
2231
|
variant = "copyable",
|
|
@@ -2201,7 +2238,7 @@ var KdsCopyableTable = (0, import_react26.forwardRef)(
|
|
|
2201
2238
|
...props
|
|
2202
2239
|
}, ref) => {
|
|
2203
2240
|
if (variant === "grid") {
|
|
2204
|
-
return /* @__PURE__ */ (0,
|
|
2241
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2205
2242
|
GridVariant,
|
|
2206
2243
|
{
|
|
2207
2244
|
gridRows,
|
|
@@ -2212,7 +2249,7 @@ var KdsCopyableTable = (0, import_react26.forwardRef)(
|
|
|
2212
2249
|
}
|
|
2213
2250
|
);
|
|
2214
2251
|
}
|
|
2215
|
-
return /* @__PURE__ */ (0,
|
|
2252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2216
2253
|
CopyableVariant,
|
|
2217
2254
|
{
|
|
2218
2255
|
rows,
|
|
@@ -2229,35 +2266,35 @@ var KdsCopyableTable = (0, import_react26.forwardRef)(
|
|
|
2229
2266
|
KdsCopyableTable.displayName = "KdsCopyableTable";
|
|
2230
2267
|
|
|
2231
2268
|
// src/components/core/KdsExpandPanel/KdsExpandPanel.tsx
|
|
2232
|
-
var
|
|
2233
|
-
var
|
|
2234
|
-
var KdsExpandPanel = (0,
|
|
2269
|
+
var import_react28 = require("react");
|
|
2270
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2271
|
+
var KdsExpandPanel = (0, import_react28.forwardRef)(
|
|
2235
2272
|
({ label, defaultExpanded = false, children, className, ...props }, ref) => {
|
|
2236
|
-
const [expanded, setExpanded] = (0,
|
|
2237
|
-
return /* @__PURE__ */ (0,
|
|
2238
|
-
/* @__PURE__ */ (0,
|
|
2273
|
+
const [expanded, setExpanded] = (0, import_react28.useState)(defaultExpanded);
|
|
2274
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref, className, ...props, children: [
|
|
2275
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2239
2276
|
"button",
|
|
2240
2277
|
{
|
|
2241
2278
|
className: "kds-expand-toggle",
|
|
2242
2279
|
onClick: () => setExpanded((v) => !v),
|
|
2243
2280
|
"aria-expanded": expanded,
|
|
2244
2281
|
children: [
|
|
2245
|
-
/* @__PURE__ */ (0,
|
|
2246
|
-
/* @__PURE__ */ (0,
|
|
2282
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: label }),
|
|
2283
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("i", { className: "material-symbols-outlined", children: expanded ? "expand_less" : "expand_more" })
|
|
2247
2284
|
]
|
|
2248
2285
|
}
|
|
2249
2286
|
),
|
|
2250
|
-
/* @__PURE__ */ (0,
|
|
2287
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: (0, import_clsx.clsx)("kds-expand-panel", expanded && "open"), hidden: !expanded, children })
|
|
2251
2288
|
] });
|
|
2252
2289
|
}
|
|
2253
2290
|
);
|
|
2254
2291
|
KdsExpandPanel.displayName = "KdsExpandPanel";
|
|
2255
2292
|
|
|
2256
2293
|
// src/components/core/KdsCountdown/KdsCountdown.tsx
|
|
2257
|
-
var
|
|
2294
|
+
var import_react30 = require("react");
|
|
2258
2295
|
|
|
2259
2296
|
// src/components/core/hooks/useCountdown.ts
|
|
2260
|
-
var
|
|
2297
|
+
var import_react29 = require("react");
|
|
2261
2298
|
function calcRemaining(deadline) {
|
|
2262
2299
|
const diff = Math.max(0, new Date(deadline).getTime() - Date.now());
|
|
2263
2300
|
const totalSeconds = Math.floor(diff / 1e3);
|
|
@@ -2270,8 +2307,8 @@ function calcRemaining(deadline) {
|
|
|
2270
2307
|
};
|
|
2271
2308
|
}
|
|
2272
2309
|
function useCountdown(deadline) {
|
|
2273
|
-
const [state, setState] = (0,
|
|
2274
|
-
(0,
|
|
2310
|
+
const [state, setState] = (0, import_react29.useState)(() => calcRemaining(deadline));
|
|
2311
|
+
(0, import_react29.useEffect)(() => {
|
|
2275
2312
|
const tick = () => setState(calcRemaining(deadline));
|
|
2276
2313
|
const id = setInterval(tick, 1e3);
|
|
2277
2314
|
return () => clearInterval(id);
|
|
@@ -2280,13 +2317,13 @@ function useCountdown(deadline) {
|
|
|
2280
2317
|
}
|
|
2281
2318
|
|
|
2282
2319
|
// src/components/core/KdsCountdown/KdsCountdown.tsx
|
|
2283
|
-
var
|
|
2284
|
-
var KdsCountdown = (0,
|
|
2320
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2321
|
+
var KdsCountdown = (0, import_react30.forwardRef)(
|
|
2285
2322
|
({ deadline, label, onExpire, className, ...props }, ref) => {
|
|
2286
2323
|
const { hours, minutes, seconds, expired, urgent } = useCountdown(deadline);
|
|
2287
|
-
const onExpireRef = (0,
|
|
2324
|
+
const onExpireRef = (0, import_react30.useRef)(onExpire);
|
|
2288
2325
|
onExpireRef.current = onExpire;
|
|
2289
|
-
(0,
|
|
2326
|
+
(0, import_react30.useEffect)(() => {
|
|
2290
2327
|
if (expired) {
|
|
2291
2328
|
onExpireRef.current?.();
|
|
2292
2329
|
}
|
|
@@ -2295,9 +2332,9 @@ var KdsCountdown = (0, import_react29.forwardRef)(
|
|
|
2295
2332
|
return null;
|
|
2296
2333
|
}
|
|
2297
2334
|
const pad = (n) => String(n).padStart(2, "0");
|
|
2298
|
-
return /* @__PURE__ */ (0,
|
|
2299
|
-
label && /* @__PURE__ */ (0,
|
|
2300
|
-
/* @__PURE__ */ (0,
|
|
2335
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-countdown", urgent && "urgent", className), ...props, children: [
|
|
2336
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "kds-countdown-label", children: label }),
|
|
2337
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "kds-countdown-value", children: [
|
|
2301
2338
|
pad(hours),
|
|
2302
2339
|
":",
|
|
2303
2340
|
pad(minutes),
|
|
@@ -2310,18 +2347,18 @@ var KdsCountdown = (0, import_react29.forwardRef)(
|
|
|
2310
2347
|
KdsCountdown.displayName = "KdsCountdown";
|
|
2311
2348
|
|
|
2312
2349
|
// src/components/core/KdsSegmentedTabs/KdsSegmentedTabs.tsx
|
|
2313
|
-
var
|
|
2314
|
-
var
|
|
2315
|
-
var KdsSegmentedTabs = (0,
|
|
2316
|
-
(props, ref) => /* @__PURE__ */ (0,
|
|
2350
|
+
var import_react31 = require("react");
|
|
2351
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2352
|
+
var KdsSegmentedTabs = (0, import_react31.forwardRef)(
|
|
2353
|
+
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(KdsTabs, { ref, ...props })
|
|
2317
2354
|
);
|
|
2318
2355
|
KdsSegmentedTabs.displayName = "KdsSegmentedTabs";
|
|
2319
2356
|
|
|
2320
2357
|
// src/components/core/KdsFab/KdsFab.tsx
|
|
2321
|
-
var
|
|
2322
|
-
var
|
|
2323
|
-
var KdsFab = (0,
|
|
2324
|
-
({ icon, position = "top-right", hidden = false, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2358
|
+
var import_react32 = require("react");
|
|
2359
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2360
|
+
var KdsFab = (0, import_react32.forwardRef)(
|
|
2361
|
+
({ icon, position = "top-right", hidden = false, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2325
2362
|
"button",
|
|
2326
2363
|
{
|
|
2327
2364
|
ref,
|
|
@@ -2335,17 +2372,17 @@ var KdsFab = (0, import_react31.forwardRef)(
|
|
|
2335
2372
|
"aria-hidden": hidden || void 0,
|
|
2336
2373
|
tabIndex: hidden ? -1 : void 0,
|
|
2337
2374
|
...props,
|
|
2338
|
-
children: /* @__PURE__ */ (0,
|
|
2375
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("i", { className: "material-symbols-outlined", children: icon })
|
|
2339
2376
|
}
|
|
2340
2377
|
)
|
|
2341
2378
|
);
|
|
2342
2379
|
KdsFab.displayName = "KdsFab";
|
|
2343
2380
|
|
|
2344
2381
|
// src/components/core/KdsEmptyState/KdsEmptyState.tsx
|
|
2345
|
-
var
|
|
2346
|
-
var
|
|
2347
|
-
var KdsEmptyState = (0,
|
|
2348
|
-
({ icon = "hide_source", title, description, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2382
|
+
var import_react33 = require("react");
|
|
2383
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2384
|
+
var KdsEmptyState = (0, import_react33.forwardRef)(
|
|
2385
|
+
({ icon = "hide_source", title, description, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
2349
2386
|
"div",
|
|
2350
2387
|
{
|
|
2351
2388
|
ref,
|
|
@@ -2353,10 +2390,10 @@ var KdsEmptyState = (0, import_react32.forwardRef)(
|
|
|
2353
2390
|
className: (0, import_clsx.clsx)("kds-empty-state", className),
|
|
2354
2391
|
...props,
|
|
2355
2392
|
children: [
|
|
2356
|
-
/* @__PURE__ */ (0,
|
|
2357
|
-
/* @__PURE__ */ (0,
|
|
2358
|
-
/* @__PURE__ */ (0,
|
|
2359
|
-
description && /* @__PURE__ */ (0,
|
|
2393
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: icon }),
|
|
2394
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "kds-empty-state-text", children: [
|
|
2395
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(KdsTypography, { variant: "body", color: "primary", children: title }),
|
|
2396
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(KdsTypography, { variant: "body", color: "secondary", children: description })
|
|
2360
2397
|
] })
|
|
2361
2398
|
]
|
|
2362
2399
|
}
|
|
@@ -2365,12 +2402,12 @@ var KdsEmptyState = (0, import_react32.forwardRef)(
|
|
|
2365
2402
|
KdsEmptyState.displayName = "KdsEmptyState";
|
|
2366
2403
|
|
|
2367
2404
|
// src/components/domain/KdsBankRow/KdsBankRow.tsx
|
|
2368
|
-
var
|
|
2369
|
-
var
|
|
2370
|
-
var KdsBankRow = (0,
|
|
2405
|
+
var import_react34 = require("react");
|
|
2406
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2407
|
+
var KdsBankRow = (0, import_react34.forwardRef)(
|
|
2371
2408
|
({ name, logoUrl, selected, hideLogo, className, ...props }, ref) => {
|
|
2372
2409
|
const nameStr = typeof name === "string" ? name : "";
|
|
2373
|
-
return /* @__PURE__ */ (0,
|
|
2410
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
2374
2411
|
"button",
|
|
2375
2412
|
{
|
|
2376
2413
|
ref,
|
|
@@ -2378,9 +2415,9 @@ var KdsBankRow = (0, import_react33.forwardRef)(
|
|
|
2378
2415
|
className: (0, import_clsx.clsx)("kds-bank-row", selected && "selected", className),
|
|
2379
2416
|
...props,
|
|
2380
2417
|
children: [
|
|
2381
|
-
!hideLogo && /* @__PURE__ */ (0,
|
|
2382
|
-
/* @__PURE__ */ (0,
|
|
2383
|
-
/* @__PURE__ */ (0,
|
|
2418
|
+
!hideLogo && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: logoUrl, alt: nameStr }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "initials", children: nameStr.charAt(0) }) }),
|
|
2419
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-bank-row-name", children: name }),
|
|
2420
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("i", { className: "material-symbols-outlined", children: selected ? "check_circle" : "chevron_right" })
|
|
2384
2421
|
]
|
|
2385
2422
|
}
|
|
2386
2423
|
);
|
|
@@ -2389,32 +2426,32 @@ var KdsBankRow = (0, import_react33.forwardRef)(
|
|
|
2389
2426
|
KdsBankRow.displayName = "KdsBankRow";
|
|
2390
2427
|
|
|
2391
2428
|
// src/components/domain/KdsBankList/KdsBankList.tsx
|
|
2392
|
-
var
|
|
2393
|
-
var
|
|
2394
|
-
var KdsBankList = (0,
|
|
2395
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2429
|
+
var import_react35 = require("react");
|
|
2430
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2431
|
+
var KdsBankList = (0, import_react35.forwardRef)(
|
|
2432
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bank-list", className), role: "list", ...props, children })
|
|
2396
2433
|
);
|
|
2397
2434
|
KdsBankList.displayName = "KdsBankList";
|
|
2398
2435
|
|
|
2399
2436
|
// src/components/domain/KdsBankModal/KdsBankModal.tsx
|
|
2400
|
-
var
|
|
2437
|
+
var import_react36 = require("react");
|
|
2401
2438
|
var Dialog = __toESM(require("@radix-ui/react-dialog"));
|
|
2402
|
-
var
|
|
2403
|
-
var KdsBankModal = (0,
|
|
2439
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2440
|
+
var KdsBankModal = (0, import_react36.forwardRef)(
|
|
2404
2441
|
({ open, onClose, title = "Selecciona tu banco", searchPlaceholder = "Buscar banco...", onSearch, children, className, container }, ref) => {
|
|
2405
|
-
const [query, setQuery] = (0,
|
|
2442
|
+
const [query, setQuery] = (0, import_react36.useState)("");
|
|
2406
2443
|
const handleSearch = (value) => {
|
|
2407
2444
|
setQuery(value);
|
|
2408
2445
|
onSearch?.(value);
|
|
2409
2446
|
};
|
|
2410
|
-
return /* @__PURE__ */ (0,
|
|
2447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Dialog.Root, { open, onOpenChange: (o) => {
|
|
2411
2448
|
if (!o) onClose();
|
|
2412
|
-
}, children: /* @__PURE__ */ (0,
|
|
2413
|
-
/* @__PURE__ */ (0,
|
|
2414
|
-
/* @__PURE__ */ (0,
|
|
2415
|
-
/* @__PURE__ */ (0,
|
|
2449
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Dialog.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Dialog.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Dialog.Content, { ref, className: (0, import_clsx.clsx)("kds-bank-modal", className), children: [
|
|
2450
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "kds-bank-modal-header", children: [
|
|
2451
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Dialog.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { children: title }) }),
|
|
2452
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "kds-bank-modal-close", "aria-label": "Cerrar", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("i", { className: "material-symbols-outlined", children: "close" }) }) })
|
|
2416
2453
|
] }),
|
|
2417
|
-
/* @__PURE__ */ (0,
|
|
2454
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "kds-bank-modal-search", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2418
2455
|
KdsSearchField,
|
|
2419
2456
|
{
|
|
2420
2457
|
placeholder: searchPlaceholder,
|
|
@@ -2422,33 +2459,33 @@ var KdsBankModal = (0, import_react35.forwardRef)(
|
|
|
2422
2459
|
onChange: (e) => handleSearch(e.target.value)
|
|
2423
2460
|
}
|
|
2424
2461
|
) }),
|
|
2425
|
-
/* @__PURE__ */ (0,
|
|
2462
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "kds-bank-modal-body", children })
|
|
2426
2463
|
] }) }) }) });
|
|
2427
2464
|
}
|
|
2428
2465
|
);
|
|
2429
2466
|
KdsBankModal.displayName = "KdsBankModal";
|
|
2430
2467
|
|
|
2431
2468
|
// src/components/domain/KdsQrRow/KdsQrRow.tsx
|
|
2432
|
-
var
|
|
2433
|
-
var
|
|
2434
|
-
var KdsQrRow = (0,
|
|
2435
|
-
({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2436
|
-
/* @__PURE__ */ (0,
|
|
2437
|
-
/* @__PURE__ */ (0,
|
|
2438
|
-
/* @__PURE__ */ (0,
|
|
2439
|
-
description && /* @__PURE__ */ (0,
|
|
2469
|
+
var import_react37 = require("react");
|
|
2470
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
2471
|
+
var KdsQrRow = (0, import_react37.forwardRef)(
|
|
2472
|
+
({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("button", { ref, type: "button", className: (0, import_clsx.clsx)("kds-qr-row", className), ...props, children: [
|
|
2473
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
|
|
2474
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "kds-qr-text", children: [
|
|
2475
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "kds-qr-title", children: name }),
|
|
2476
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "kds-qr-subtitle", children: description })
|
|
2440
2477
|
] }),
|
|
2441
|
-
badge && /* @__PURE__ */ (0,
|
|
2442
|
-
/* @__PURE__ */ (0,
|
|
2478
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "kds-qr-badge", children: badge }),
|
|
2479
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("i", { className: "material-symbols-outlined", children: "chevron_right" })
|
|
2443
2480
|
] })
|
|
2444
2481
|
);
|
|
2445
2482
|
KdsQrRow.displayName = "KdsQrRow";
|
|
2446
2483
|
|
|
2447
2484
|
// src/components/domain/KdsCardSelector/KdsCardSelector.tsx
|
|
2448
|
-
var
|
|
2449
|
-
var
|
|
2450
|
-
var KdsCardSelector = (0,
|
|
2451
|
-
({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2485
|
+
var import_react38 = require("react");
|
|
2486
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2487
|
+
var KdsCardSelector = (0, import_react38.forwardRef)(
|
|
2488
|
+
({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
2452
2489
|
"button",
|
|
2453
2490
|
{
|
|
2454
2491
|
ref,
|
|
@@ -2456,9 +2493,9 @@ var KdsCardSelector = (0, import_react37.forwardRef)(
|
|
|
2456
2493
|
className: (0, import_clsx.clsx)("kds-card-selector", selected && "selected", className),
|
|
2457
2494
|
...props,
|
|
2458
2495
|
children: [
|
|
2459
|
-
icon && /* @__PURE__ */ (0,
|
|
2460
|
-
/* @__PURE__ */ (0,
|
|
2461
|
-
description && /* @__PURE__ */ (0,
|
|
2496
|
+
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 }) }),
|
|
2497
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "kds-card-selector-title", children: title }),
|
|
2498
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "kds-card-selector-description", children: description })
|
|
2462
2499
|
]
|
|
2463
2500
|
}
|
|
2464
2501
|
)
|
|
@@ -2466,26 +2503,26 @@ var KdsCardSelector = (0, import_react37.forwardRef)(
|
|
|
2466
2503
|
KdsCardSelector.displayName = "KdsCardSelector";
|
|
2467
2504
|
|
|
2468
2505
|
// src/components/domain/KdsCardPlan/KdsCardPlan.tsx
|
|
2469
|
-
var
|
|
2470
|
-
var
|
|
2471
|
-
var KdsCardPlan = (0,
|
|
2472
|
-
({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2506
|
+
var import_react39 = require("react");
|
|
2507
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2508
|
+
var KdsCardPlan = (0, import_react39.forwardRef)(
|
|
2509
|
+
({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
2473
2510
|
"div",
|
|
2474
2511
|
{
|
|
2475
2512
|
ref,
|
|
2476
2513
|
className: (0, import_clsx.clsx)("kds-card-plan", recommended && "recommended", className),
|
|
2477
2514
|
...props,
|
|
2478
2515
|
children: [
|
|
2479
|
-
/* @__PURE__ */ (0,
|
|
2480
|
-
/* @__PURE__ */ (0,
|
|
2481
|
-
/* @__PURE__ */ (0,
|
|
2482
|
-
period && /* @__PURE__ */ (0,
|
|
2516
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { children: title }) }),
|
|
2517
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "kds-card-plan-price", children: [
|
|
2518
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "kds-price", children: price }),
|
|
2519
|
+
period && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "kds-price-period", children: [
|
|
2483
2520
|
"/",
|
|
2484
2521
|
period
|
|
2485
2522
|
] })
|
|
2486
2523
|
] }),
|
|
2487
|
-
badgeText && /* @__PURE__ */ (0,
|
|
2488
|
-
features && features.length > 0 && /* @__PURE__ */ (0,
|
|
2524
|
+
badgeText && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "kds-card-plan-badge", children: badgeText }),
|
|
2525
|
+
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)) }),
|
|
2489
2526
|
action
|
|
2490
2527
|
]
|
|
2491
2528
|
}
|
|
@@ -2494,10 +2531,10 @@ var KdsCardPlan = (0, import_react38.forwardRef)(
|
|
|
2494
2531
|
KdsCardPlan.displayName = "KdsCardPlan";
|
|
2495
2532
|
|
|
2496
2533
|
// src/components/domain/KdsInvoiceSticky/KdsInvoiceSticky.tsx
|
|
2497
|
-
var
|
|
2498
|
-
var
|
|
2499
|
-
var KdsInvoiceSticky = (0,
|
|
2500
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2534
|
+
var import_react40 = require("react");
|
|
2535
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2536
|
+
var KdsInvoiceSticky = (0, import_react40.forwardRef)(
|
|
2537
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2501
2538
|
"article",
|
|
2502
2539
|
{
|
|
2503
2540
|
ref,
|
|
@@ -2510,10 +2547,10 @@ var KdsInvoiceSticky = (0, import_react39.forwardRef)(
|
|
|
2510
2547
|
KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
|
|
2511
2548
|
|
|
2512
2549
|
// src/components/domain/KdsBottomSheet/KdsBottomSheet.tsx
|
|
2513
|
-
var
|
|
2550
|
+
var import_react41 = require("react");
|
|
2514
2551
|
var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
|
|
2515
|
-
var
|
|
2516
|
-
var KdsBottomSheet = (0,
|
|
2552
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2553
|
+
var KdsBottomSheet = (0, import_react41.forwardRef)(
|
|
2517
2554
|
({
|
|
2518
2555
|
open,
|
|
2519
2556
|
onClose,
|
|
@@ -2525,39 +2562,40 @@ var KdsBottomSheet = (0, import_react40.forwardRef)(
|
|
|
2525
2562
|
showCloseButton = false,
|
|
2526
2563
|
container,
|
|
2527
2564
|
className,
|
|
2565
|
+
size = "auto",
|
|
2528
2566
|
...props
|
|
2529
|
-
}, ref) => /* @__PURE__ */ (0,
|
|
2567
|
+
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2530
2568
|
Dialog2.Root,
|
|
2531
2569
|
{
|
|
2532
2570
|
open,
|
|
2533
2571
|
onOpenChange: (o) => {
|
|
2534
2572
|
if (!o) onClose();
|
|
2535
2573
|
},
|
|
2536
|
-
children: /* @__PURE__ */ (0,
|
|
2574
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Dialog2.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "kds-theme-root", style: { display: "contents" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Dialog2.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
2537
2575
|
Dialog2.Content,
|
|
2538
2576
|
{
|
|
2539
2577
|
ref,
|
|
2540
|
-
className: (0, import_clsx.clsx)("kds-bottom-sheet", className),
|
|
2578
|
+
className: (0, import_clsx.clsx)("kds-bottom-sheet", size === "full" && "kds-bottom-sheet-full", className),
|
|
2541
2579
|
onPointerDownOutside: (e) => {
|
|
2542
2580
|
const target = e.target;
|
|
2543
2581
|
if (target.closest(".kds-bottom-sheet")) e.preventDefault();
|
|
2544
2582
|
},
|
|
2545
2583
|
...props,
|
|
2546
2584
|
children: [
|
|
2547
|
-
showGrabber && /* @__PURE__ */ (0,
|
|
2548
|
-
showCloseButton && /* @__PURE__ */ (0,
|
|
2585
|
+
showGrabber && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "kds-bottom-sheet-grabber", "aria-hidden": "true" }),
|
|
2586
|
+
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2549
2587
|
"button",
|
|
2550
2588
|
{
|
|
2551
2589
|
type: "button",
|
|
2552
2590
|
className: "kds-bottom-sheet-close",
|
|
2553
2591
|
"aria-label": "Cerrar",
|
|
2554
|
-
children: /* @__PURE__ */ (0,
|
|
2592
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { className: "material-symbols-outlined", children: "close" })
|
|
2555
2593
|
}
|
|
2556
2594
|
) }),
|
|
2557
|
-
title && /* @__PURE__ */ (0,
|
|
2558
|
-
description && /* @__PURE__ */ (0,
|
|
2559
|
-
/* @__PURE__ */ (0,
|
|
2560
|
-
actions && /* @__PURE__ */ (0,
|
|
2595
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Dialog2.Title, { className: "kds-bottom-sheet-title", children: title }),
|
|
2596
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Dialog2.Description, { className: "kds-bottom-sheet-description", children: description }),
|
|
2597
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "kds-bottom-sheet-body", children }),
|
|
2598
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "kds-bottom-sheet-actions", children: actions })
|
|
2561
2599
|
]
|
|
2562
2600
|
}
|
|
2563
2601
|
) }) }) })
|
|
@@ -2567,13 +2605,13 @@ var KdsBottomSheet = (0, import_react40.forwardRef)(
|
|
|
2567
2605
|
KdsBottomSheet.displayName = "KdsBottomSheet";
|
|
2568
2606
|
|
|
2569
2607
|
// src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
|
|
2570
|
-
var
|
|
2608
|
+
var import_react43 = require("react");
|
|
2571
2609
|
|
|
2572
2610
|
// src/components/domain/KdsSecureFooter/KhipuWordmark.tsx
|
|
2573
|
-
var
|
|
2574
|
-
var
|
|
2575
|
-
var KhipuWordmark = (0,
|
|
2576
|
-
({ className = "khipu-mark", ...props }, ref) => /* @__PURE__ */ (0,
|
|
2611
|
+
var import_react42 = require("react");
|
|
2612
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2613
|
+
var KhipuWordmark = (0, import_react42.forwardRef)(
|
|
2614
|
+
({ className = "khipu-mark", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
2577
2615
|
"svg",
|
|
2578
2616
|
{
|
|
2579
2617
|
ref,
|
|
@@ -2584,14 +2622,14 @@ var KhipuWordmark = (0, import_react41.forwardRef)(
|
|
|
2584
2622
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2585
2623
|
...props,
|
|
2586
2624
|
children: [
|
|
2587
|
-
/* @__PURE__ */ (0,
|
|
2588
|
-
/* @__PURE__ */ (0,
|
|
2589
|
-
/* @__PURE__ */ (0,
|
|
2590
|
-
/* @__PURE__ */ (0,
|
|
2591
|
-
/* @__PURE__ */ (0,
|
|
2592
|
-
/* @__PURE__ */ (0,
|
|
2593
|
-
/* @__PURE__ */ (0,
|
|
2594
|
-
/* @__PURE__ */ (0,
|
|
2625
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.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" }),
|
|
2626
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.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" }),
|
|
2627
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.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" }),
|
|
2628
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.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" }),
|
|
2629
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.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" }),
|
|
2630
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.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" }),
|
|
2631
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.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" }),
|
|
2632
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.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" })
|
|
2595
2633
|
]
|
|
2596
2634
|
}
|
|
2597
2635
|
)
|
|
@@ -2599,17 +2637,17 @@ var KhipuWordmark = (0, import_react41.forwardRef)(
|
|
|
2599
2637
|
KhipuWordmark.displayName = "KhipuWordmark";
|
|
2600
2638
|
|
|
2601
2639
|
// src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
|
|
2602
|
-
var
|
|
2603
|
-
var KdsSecureFooter = (0,
|
|
2604
|
-
({ variant = "default", showLogo = true, psp, children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2605
|
-
/* @__PURE__ */ (0,
|
|
2606
|
-
/* @__PURE__ */ (0,
|
|
2607
|
-
/* @__PURE__ */ (0,
|
|
2640
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2641
|
+
var KdsSecureFooter = (0, import_react43.forwardRef)(
|
|
2642
|
+
({ variant = "default", showLogo = true, psp, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("footer", { ref, className: (0, import_clsx.clsx)("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
|
|
2643
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { className: "kds-secure-footer-lock", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
|
|
2644
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { x: "4.5", y: "10.5", width: "15", height: "10", rx: "2.25" }),
|
|
2645
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M8 10.5V7a4 4 0 0 1 8 0v3.5" })
|
|
2608
2646
|
] }),
|
|
2609
|
-
children || /* @__PURE__ */ (0,
|
|
2610
|
-
showLogo && /* @__PURE__ */ (0,
|
|
2611
|
-
psp && /* @__PURE__ */ (0,
|
|
2612
|
-
/* @__PURE__ */ (0,
|
|
2647
|
+
children || /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "Pago seguro procesado por" }),
|
|
2648
|
+
showLogo && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KhipuWordmark, {}),
|
|
2649
|
+
psp && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
|
|
2650
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "kds-secure-footer-sep", "aria-hidden": "true" }),
|
|
2613
2651
|
psp
|
|
2614
2652
|
] })
|
|
2615
2653
|
] })
|
|
@@ -2617,44 +2655,44 @@ var KdsSecureFooter = (0, import_react42.forwardRef)(
|
|
|
2617
2655
|
KdsSecureFooter.displayName = "KdsSecureFooter";
|
|
2618
2656
|
|
|
2619
2657
|
// src/components/domain/KdsRecapList/KdsRecapList.tsx
|
|
2620
|
-
var
|
|
2621
|
-
var
|
|
2622
|
-
var KdsRecapList = (0,
|
|
2623
|
-
({ items, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2624
|
-
/* @__PURE__ */ (0,
|
|
2625
|
-
/* @__PURE__ */ (0,
|
|
2658
|
+
var import_react44 = require("react");
|
|
2659
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2660
|
+
var KdsRecapList = (0, import_react44.forwardRef)(
|
|
2661
|
+
({ items, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { ref, className: (0, import_clsx.clsx)("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { children: [
|
|
2662
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "kds-key", children: item.label }),
|
|
2663
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_clsx.clsx)("kds-value", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
|
|
2626
2664
|
] }, i)) })
|
|
2627
2665
|
);
|
|
2628
2666
|
KdsRecapList.displayName = "KdsRecapList";
|
|
2629
2667
|
|
|
2630
2668
|
// src/components/domain/KdsMontoRow/KdsMontoRow.tsx
|
|
2631
|
-
var
|
|
2632
|
-
var
|
|
2633
|
-
var KdsMontoRow = (0,
|
|
2634
|
-
({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2635
|
-
/* @__PURE__ */ (0,
|
|
2636
|
-
/* @__PURE__ */ (0,
|
|
2637
|
-
deadline && /* @__PURE__ */ (0,
|
|
2669
|
+
var import_react45 = require("react");
|
|
2670
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2671
|
+
var KdsMontoRow = (0, import_react45.forwardRef)(
|
|
2672
|
+
({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-monto-row", className), ...props, children: [
|
|
2673
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
|
|
2674
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "kds-monto-row-title", children: title }),
|
|
2675
|
+
deadline && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "kds-monto-row-deadline", children: deadline })
|
|
2638
2676
|
] }),
|
|
2639
|
-
/* @__PURE__ */ (0,
|
|
2677
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "kds-monto-row-value", children: value })
|
|
2640
2678
|
] })
|
|
2641
2679
|
);
|
|
2642
2680
|
KdsMontoRow.displayName = "KdsMontoRow";
|
|
2643
2681
|
|
|
2644
2682
|
// src/components/domain/KdsMerchantTile/KdsMerchantTile.tsx
|
|
2645
|
-
var
|
|
2646
|
-
var
|
|
2647
|
-
var KdsMerchantTile = (0,
|
|
2683
|
+
var import_react46 = require("react");
|
|
2684
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2685
|
+
var KdsMerchantTile = (0, import_react46.forwardRef)(
|
|
2648
2686
|
({ name, logoUrl, initials, compact, className, ...props }, ref) => {
|
|
2649
2687
|
const displayInitials = (initials ?? name.slice(0, 2)).toUpperCase();
|
|
2650
|
-
return /* @__PURE__ */ (0,
|
|
2688
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
2651
2689
|
"div",
|
|
2652
2690
|
{
|
|
2653
2691
|
ref,
|
|
2654
2692
|
className: (0, import_clsx.clsx)("kds-merchant-tile", logoUrl && "logo", compact && "compact", className),
|
|
2655
2693
|
"aria-label": name,
|
|
2656
2694
|
...props,
|
|
2657
|
-
children: logoUrl ? /* @__PURE__ */ (0,
|
|
2695
|
+
children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("img", { src: logoUrl, alt: name }) : displayInitials
|
|
2658
2696
|
}
|
|
2659
2697
|
);
|
|
2660
2698
|
}
|
|
@@ -2662,10 +2700,10 @@ var KdsMerchantTile = (0, import_react45.forwardRef)(
|
|
|
2662
2700
|
KdsMerchantTile.displayName = "KdsMerchantTile";
|
|
2663
2701
|
|
|
2664
2702
|
// src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
|
|
2665
|
-
var
|
|
2703
|
+
var import_react48 = require("react");
|
|
2666
2704
|
|
|
2667
2705
|
// src/components/domain/KdsInvoiceMerchant/useLogoBackdrop.ts
|
|
2668
|
-
var
|
|
2706
|
+
var import_react47 = require("react");
|
|
2669
2707
|
|
|
2670
2708
|
// src/components/domain/KdsInvoiceMerchant/logoLuminance.ts
|
|
2671
2709
|
var LIGHT_LOGO_LUMINANCE_THRESHOLD = 0.72;
|
|
@@ -2714,8 +2752,8 @@ function pickLogoBackdrop(luminance) {
|
|
|
2714
2752
|
|
|
2715
2753
|
// src/components/domain/KdsInvoiceMerchant/useLogoBackdrop.ts
|
|
2716
2754
|
function useLogoBackdrop(logoUrl) {
|
|
2717
|
-
const [backdrop, setBackdrop] = (0,
|
|
2718
|
-
(0,
|
|
2755
|
+
const [backdrop, setBackdrop] = (0, import_react47.useState)("light");
|
|
2756
|
+
(0, import_react47.useEffect)(() => {
|
|
2719
2757
|
let cancelled = false;
|
|
2720
2758
|
setBackdrop("light");
|
|
2721
2759
|
if (!logoUrl) {
|
|
@@ -2734,13 +2772,13 @@ function useLogoBackdrop(logoUrl) {
|
|
|
2734
2772
|
}
|
|
2735
2773
|
|
|
2736
2774
|
// src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
|
|
2737
|
-
var
|
|
2738
|
-
var KdsInvoiceMerchant = (0,
|
|
2775
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2776
|
+
var KdsInvoiceMerchant = (0, import_react48.forwardRef)(
|
|
2739
2777
|
({ logoUrl, brandColor, className, style, ...props }, ref) => {
|
|
2740
|
-
const [failed, setFailed] = (0,
|
|
2778
|
+
const [failed, setFailed] = (0, import_react48.useState)(false);
|
|
2741
2779
|
const showLogo = !!logoUrl && !failed;
|
|
2742
2780
|
const backdrop = useLogoBackdrop(showLogo ? logoUrl : void 0);
|
|
2743
|
-
return /* @__PURE__ */ (0,
|
|
2781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2744
2782
|
"div",
|
|
2745
2783
|
{
|
|
2746
2784
|
ref,
|
|
@@ -2753,7 +2791,7 @@ var KdsInvoiceMerchant = (0, import_react47.forwardRef)(
|
|
|
2753
2791
|
"aria-hidden": "true",
|
|
2754
2792
|
style: !showLogo && brandColor ? { background: brandColor, ...style } : style,
|
|
2755
2793
|
...props,
|
|
2756
|
-
children: showLogo ? /* @__PURE__ */ (0,
|
|
2794
|
+
children: showLogo ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("img", { src: logoUrl, alt: "", onError: () => setFailed(true) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("i", { className: "material-symbols-outlined", children: "storefront" })
|
|
2757
2795
|
}
|
|
2758
2796
|
);
|
|
2759
2797
|
}
|
|
@@ -2761,9 +2799,9 @@ var KdsInvoiceMerchant = (0, import_react47.forwardRef)(
|
|
|
2761
2799
|
KdsInvoiceMerchant.displayName = "KdsInvoiceMerchant";
|
|
2762
2800
|
|
|
2763
2801
|
// src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
|
|
2764
|
-
var
|
|
2765
|
-
var
|
|
2766
|
-
var KdsPaymentTotal = (0,
|
|
2802
|
+
var import_react49 = require("react");
|
|
2803
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2804
|
+
var KdsPaymentTotal = (0, import_react49.forwardRef)(
|
|
2767
2805
|
({
|
|
2768
2806
|
variant = "default",
|
|
2769
2807
|
tone = "brand",
|
|
@@ -2781,7 +2819,7 @@ var KdsPaymentTotal = (0, import_react48.forwardRef)(
|
|
|
2781
2819
|
const { integer, fraction } = formatAmount(amount, decimals, locale);
|
|
2782
2820
|
const isEmail = variant === "email";
|
|
2783
2821
|
const isInfoTone = tone === "info";
|
|
2784
|
-
return /* @__PURE__ */ (0,
|
|
2822
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
2785
2823
|
"div",
|
|
2786
2824
|
{
|
|
2787
2825
|
ref,
|
|
@@ -2794,14 +2832,14 @@ var KdsPaymentTotal = (0, import_react48.forwardRef)(
|
|
|
2794
2832
|
),
|
|
2795
2833
|
...props,
|
|
2796
2834
|
children: [
|
|
2797
|
-
!isEmail && title != null && /* @__PURE__ */ (0,
|
|
2798
|
-
!isEmail && titleMobile != null && /* @__PURE__ */ (0,
|
|
2799
|
-
label != null && /* @__PURE__ */ (0,
|
|
2800
|
-
/* @__PURE__ */ (0,
|
|
2835
|
+
!isEmail && title != null && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h5", { className: "kds-payment-total-title", children: title }),
|
|
2836
|
+
!isEmail && titleMobile != null && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
|
|
2837
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h6", { className: "kds-payment-label", children: label }),
|
|
2838
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("h5", { className: "kds-payment-amount", children: [
|
|
2801
2839
|
currency,
|
|
2802
2840
|
" ",
|
|
2803
2841
|
integer,
|
|
2804
|
-
fraction !== null && /* @__PURE__ */ (0,
|
|
2842
|
+
fraction !== null && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
|
|
2805
2843
|
] })
|
|
2806
2844
|
]
|
|
2807
2845
|
}
|
|
@@ -2837,10 +2875,10 @@ function formatAmount(amount, decimals, locale) {
|
|
|
2837
2875
|
}
|
|
2838
2876
|
|
|
2839
2877
|
// src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
|
|
2840
|
-
var
|
|
2841
|
-
var
|
|
2842
|
-
var KdsBillAttachment = (0,
|
|
2843
|
-
({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2878
|
+
var import_react50 = require("react");
|
|
2879
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2880
|
+
var KdsBillAttachment = (0, import_react50.forwardRef)(
|
|
2881
|
+
({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
2844
2882
|
"a",
|
|
2845
2883
|
{
|
|
2846
2884
|
ref,
|
|
@@ -2850,15 +2888,15 @@ var KdsBillAttachment = (0, import_react49.forwardRef)(
|
|
|
2850
2888
|
className: (0, import_clsx.clsx)("kds-bill-attachment", className),
|
|
2851
2889
|
...props,
|
|
2852
2890
|
children: [
|
|
2853
|
-
/* @__PURE__ */ (0,
|
|
2854
|
-
/* @__PURE__ */ (0,
|
|
2891
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("i", { className: "material-symbols-outlined", children: icon }),
|
|
2892
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: filename })
|
|
2855
2893
|
]
|
|
2856
2894
|
}
|
|
2857
2895
|
)
|
|
2858
2896
|
);
|
|
2859
2897
|
KdsBillAttachment.displayName = "KdsBillAttachment";
|
|
2860
|
-
var KdsBillAttachments = (0,
|
|
2861
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2898
|
+
var KdsBillAttachments = (0, import_react50.forwardRef)(
|
|
2899
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bill-attachments", className), ...props, children })
|
|
2862
2900
|
);
|
|
2863
2901
|
KdsBillAttachments.displayName = "KdsBillAttachments";
|
|
2864
2902
|
|
|
@@ -2957,12 +2995,12 @@ var guideToFirstInvalidFieldOnBlur = (form) => {
|
|
|
2957
2995
|
};
|
|
2958
2996
|
|
|
2959
2997
|
// src/components/core/hooks/useStickyInvoiceCollapse.ts
|
|
2960
|
-
var
|
|
2998
|
+
var import_react51 = require("react");
|
|
2961
2999
|
function useStickyInvoiceCollapse(options = {}) {
|
|
2962
3000
|
const { onCollapseStart, collapseEnd = 20, mobileBreakpoint = 768 } = options;
|
|
2963
|
-
const onCollapseStartRef = (0,
|
|
3001
|
+
const onCollapseStartRef = (0, import_react51.useRef)(onCollapseStart);
|
|
2964
3002
|
onCollapseStartRef.current = onCollapseStart;
|
|
2965
|
-
(0,
|
|
3003
|
+
(0, import_react51.useEffect)(() => {
|
|
2966
3004
|
let viewportOffset = 0;
|
|
2967
3005
|
let ticking = false;
|
|
2968
3006
|
let wasCollapsing = false;
|
|
@@ -3035,24 +3073,24 @@ function useStickyInvoiceCollapse(options = {}) {
|
|
|
3035
3073
|
}
|
|
3036
3074
|
|
|
3037
3075
|
// src/components/core/hooks/useExpandToggle.ts
|
|
3038
|
-
var
|
|
3076
|
+
var import_react52 = require("react");
|
|
3039
3077
|
function useExpandToggle(options = {}) {
|
|
3040
3078
|
const { defaultOpen = false, open: controlledOpen, onOpenChange, id } = options;
|
|
3041
|
-
const generatedId = (0,
|
|
3079
|
+
const generatedId = (0, import_react52.useId)();
|
|
3042
3080
|
const panelId = id ?? `kds-expand-${generatedId}`;
|
|
3043
3081
|
const isControlled = controlledOpen !== void 0;
|
|
3044
|
-
const [uncontrolledOpen, setUncontrolledOpen] = (0,
|
|
3082
|
+
const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react52.useState)(defaultOpen);
|
|
3045
3083
|
const open = isControlled ? controlledOpen : uncontrolledOpen;
|
|
3046
|
-
const panelRef = (0,
|
|
3047
|
-
const setPanelRef = (0,
|
|
3084
|
+
const panelRef = (0, import_react52.useRef)(null);
|
|
3085
|
+
const setPanelRef = (0, import_react52.useCallback)((node) => {
|
|
3048
3086
|
panelRef.current = node;
|
|
3049
3087
|
}, []);
|
|
3050
|
-
(0,
|
|
3088
|
+
(0, import_react52.useLayoutEffect)(() => {
|
|
3051
3089
|
const panel = panelRef.current;
|
|
3052
3090
|
if (!panel) return;
|
|
3053
3091
|
panel.style.maxHeight = open ? `${panel.scrollHeight}px` : "";
|
|
3054
3092
|
}, [open]);
|
|
3055
|
-
const setOpen = (0,
|
|
3093
|
+
const setOpen = (0, import_react52.useCallback)(
|
|
3056
3094
|
(next) => {
|
|
3057
3095
|
if (!isControlled) {
|
|
3058
3096
|
setUncontrolledOpen(next);
|
|
@@ -3061,8 +3099,8 @@ function useExpandToggle(options = {}) {
|
|
|
3061
3099
|
},
|
|
3062
3100
|
[isControlled, onOpenChange]
|
|
3063
3101
|
);
|
|
3064
|
-
const toggle = (0,
|
|
3065
|
-
const getToggleProps = (0,
|
|
3102
|
+
const toggle = (0, import_react52.useCallback)(() => setOpen(!open), [open, setOpen]);
|
|
3103
|
+
const getToggleProps = (0, import_react52.useCallback)(
|
|
3066
3104
|
() => ({
|
|
3067
3105
|
type: "button",
|
|
3068
3106
|
"aria-expanded": open,
|
|
@@ -3071,7 +3109,7 @@ function useExpandToggle(options = {}) {
|
|
|
3071
3109
|
}),
|
|
3072
3110
|
[open, panelId, toggle]
|
|
3073
3111
|
);
|
|
3074
|
-
const getPanelProps = (0,
|
|
3112
|
+
const getPanelProps = (0, import_react52.useCallback)(
|
|
3075
3113
|
(baseClassName = "kds-expand-panel") => ({
|
|
3076
3114
|
id: panelId,
|
|
3077
3115
|
className: open ? `${baseClassName} open` : baseClassName,
|
|
@@ -3084,11 +3122,11 @@ function useExpandToggle(options = {}) {
|
|
|
3084
3122
|
}
|
|
3085
3123
|
|
|
3086
3124
|
// src/components/core/hooks/useHideOnScroll.ts
|
|
3087
|
-
var
|
|
3125
|
+
var import_react53 = require("react");
|
|
3088
3126
|
function useHideOnScroll(options = {}) {
|
|
3089
3127
|
const { threshold = 8, topOffset = 0 } = options;
|
|
3090
|
-
const [hidden, setHidden] = (0,
|
|
3091
|
-
(0,
|
|
3128
|
+
const [hidden, setHidden] = (0, import_react53.useState)(false);
|
|
3129
|
+
(0, import_react53.useEffect)(() => {
|
|
3092
3130
|
let viewportOffset = 0;
|
|
3093
3131
|
let lastY = 0;
|
|
3094
3132
|
let ticking = false;
|
|
@@ -3131,12 +3169,12 @@ function useHideOnScroll(options = {}) {
|
|
|
3131
3169
|
}
|
|
3132
3170
|
|
|
3133
3171
|
// src/components/core/hooks/useMediaQuery.ts
|
|
3134
|
-
var
|
|
3172
|
+
var import_react54 = require("react");
|
|
3135
3173
|
function useMediaQuery(query) {
|
|
3136
|
-
const [matches, setMatches] = (0,
|
|
3174
|
+
const [matches, setMatches] = (0, import_react54.useState)(
|
|
3137
3175
|
() => typeof window !== "undefined" ? window.matchMedia(query).matches : false
|
|
3138
3176
|
);
|
|
3139
|
-
(0,
|
|
3177
|
+
(0, import_react54.useEffect)(() => {
|
|
3140
3178
|
if (typeof window === "undefined") return;
|
|
3141
3179
|
const mql = window.matchMedia(query);
|
|
3142
3180
|
setMatches(mql.matches);
|
|
@@ -3173,6 +3211,7 @@ function useMediaQuery(query) {
|
|
|
3173
3211
|
KdsCopyableTable,
|
|
3174
3212
|
KdsCountdown,
|
|
3175
3213
|
KdsDivider,
|
|
3214
|
+
KdsDocumentFrame,
|
|
3176
3215
|
KdsEmptyState,
|
|
3177
3216
|
KdsExpandPanel,
|
|
3178
3217
|
KdsFab,
|