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