@opexa/portal-components 0.0.308 → 0.0.309

package/dist/components/TransactionRecords/TransactionRecords.suspense.js

@@ -24,5 +24,5 @@ export function TransactionRecords__suspense(props) {
         newSearchParams.delete('id');
         router.push(`${pathname}?${newSearchParams.toString()}`);
     };
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-sm font-semibold leading-tight lg:text-lg", children: "Transactions" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "View your transaction records" }), _jsxs(Tabs.Root, { className: "mt-lg lg:mt-2xl", value: tab, onValueChange: (details) => setTab(TabSchema.parse(details.value)), lazyMount: true, unmountOnExit: true, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "transactions", children: "All Transactions" }), _jsx(Tabs.Trigger, { value: "deposits", children: "Deposits" }), _jsx(Tabs.Trigger, { value: "withdrawals", children: "Withdrawals" }), _jsx(Tabs.Indicator, {})] }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-[1.5px] border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsx(Tabs.Content, { value: "transactions", className: "mt-xl", children: _jsx(TransactionRecordsTable, {}) }), _jsx(Tabs.Content, { value: "deposits", className: "mt-xl", children: _jsx(Suspense, { fallback: null, children: _jsx(DepositRecordsTable, {}) }) }), _jsx(Tabs.Content, { value: "withdrawals", className: "mt-xl", children: _jsx(Suspense, { fallback: null, children: _jsx(WithdrawalRecordsTable, {}) }) })] })] }));
+    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "font-semibold text-sm leading-tight lg:text-lg", children: "Transactions" }), _jsx("p", { className: "mt-xs text-sm text-text-tertiary-600 leading-tight", children: "View your transaction records" }), _jsxs(Tabs.Root, { className: "mt-lg lg:mt-2xl", value: tab, onValueChange: (details) => setTab(TabSchema.parse(details.value)), lazyMount: true, unmountOnExit: true, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "transactions", children: "All Transactions" }), _jsx(Tabs.Trigger, { value: "deposits", children: "Deposits" }), _jsx(Tabs.Trigger, { value: "withdrawals", children: "Withdrawals" }), _jsx(Tabs.Indicator, {})] }), _jsx("div", { className: "mt-2xl hidden border-[1.5px] border-border-secondary border-t lg:block" }), _jsx("h3", { className: "mt-3xl font-semibold text-sm text-text-secondary-700", children: "Table" }), _jsx(Tabs.Content, { value: "transactions", className: "mt-xl", children: _jsx(TransactionRecordsTable, {}) }), _jsx(Tabs.Content, { value: "deposits", className: "mt-xl", children: _jsx(Suspense, { fallback: null, children: _jsx(DepositRecordsTable, {}) }) }), _jsx(Tabs.Content, { value: "withdrawals", className: "mt-xl", children: _jsx(Suspense, { fallback: null, children: _jsx(WithdrawalRecordsTable, {}) }) })] })] }));
 }

package/dist/components/TransactionRecords/TransactionRecordsTable.js

@@ -55,7 +55,7 @@ export function TransactionRecordsTable() {
                     transactionType: true,
                 } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest transaction records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Transaction Type" }), _jsx(Table.Heading, { children: "Transaction Time" }), _jsx(Table.Heading, { children: "Transaction Amount" }), _jsx(Table.Heading, { children: "Current Balance" }), _jsx(Table.Heading, { children: "Reference Number" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "scrollbar:h-2 overflow-hidden overflow-x-auto rounded-none scrollbar-thumb:rounded-full border-border-secondary border-b scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Transaction Type" }), _jsx(Table.Heading, { children: "Transaction Time" }), _jsx(Table.Heading, { children: "Transaction Amount" }), _jsx(Table.Heading, { children: "Current Balance" }), _jsx(Table.Heading, { children: "Reference Number" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
                                                     delimiter: capitalize.delimiters.UNDERSCORE,
                                                 }) }), _jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
                                                             in: tz(localeInfo.timezone),
@@ -67,5 +67,5 @@ export function TransactionRecordsTable() {
                                                 }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.currentBalance, {
                                                     currency: localeInfo.currency.code,
                                                     minDecimalPlaces: 2,
-                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: data.referenceNumber })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "text-text-secondary-700 text-sm font-medium", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: data.referenceNumber })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "font-medium text-sm text-text-secondary-700", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
 }

package/dist/components/TransactionRecords/WithdrawalRecordsTable.js

@@ -85,7 +85,7 @@ export function WithdrawalRecordsTable() {
                     withdrawalStatus: true,
                 } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest withdrawal records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "Mobile Number" }), _jsx(Table.Heading, { children: "Withdrawal Amount" }), _jsx(Table.Heading, { children: "Net Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Bank Name" }), _jsx(Table.Heading, { children: "Withdrawal Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.withdrawalNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1 text-right", children: capitalize(data.type, {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "scrollbar:h-2 overflow-hidden overflow-x-auto rounded-none scrollbar-thumb:rounded-full border-border-secondary border-b scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "Mobile Number" }), _jsx(Table.Heading, { children: "Withdrawal Amount" }), _jsx(Table.Heading, { children: "Net Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Bank Name" }), _jsx(Table.Heading, { children: "Withdrawal Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.withdrawalNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1 text-right", children: capitalize(data.type, {
                                                     delimiter: capitalize.delimiters.UNDERSCORE,
                                                 }) }), _jsx(Table.Cell, { className: "!py-1", children: data.recipientMobileNumber }), _jsx(Table.Cell, { className: "!py-1 text-right", children: formatNumber(data.amount, {
                                                     currency: localeInfo.currency.code,
@@ -108,5 +108,5 @@ export function WithdrawalRecordsTable() {
                                                             ? 'warning'
                                                             : 'success', children: _jsx(Badge.Label, { children: capitalize(data.status, {
                                                             delimiter: capitalize.delimiters.UNDERSCORE,
-                                                        }) }) }) })] }, data.id))) })] }) }), _jsxs("div", { className: "gap-lg flex items-center justify-between px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "text-text-secondary-700 text-sm font-medium", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
+                                                        }) }) }) })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "font-medium text-sm text-text-secondary-700", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
 }

package/dist/components/shared/Empty.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Empty(props) {
-    return (_jsxs("div", { role: "alert", "aria-live": "polite", style: props.style, className: props.className, children: [_jsxs("div", { className: "relative mx-auto w-[9.5rem] pt-4", children: [_jsx("div", { className: "bg-utility-gray-200 absolute left-1/2 top-0 size-[6.5rem] -translate-x-1/2 rounded-full" }), _jsx(CloudIcon, { className: "relative h-auto w-full shrink-0" }), _jsx("div", { className: "bg-utility-gray-200/40 absolute bottom-2 left-1/2 flex size-12 -translate-x-1/2 items-center justify-center rounded-full backdrop-blur-sm", children: _jsx(props.icon, { className: "size-6 text-white" }) }), _jsx("div", { className: "bg-utility-gray-100 absolute left-4 top-3.5 size-2.5 rounded-full" }), _jsx("div", { className: "bg-utility-gray-100 absolute bottom-0.5 left-3 size-3.5 rounded-full" }), _jsx("div", { className: "bg-utility-gray-100 absolute right-3.5 top-1 size-2 rounded-full" }), _jsx("div", { className: "bg-utility-gray-100 absolute right-0 top-6.5 size-3.5 rounded-full" })] }), _jsx("h2", { className: "mt-xl text-center font-semibold", children: props.title }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm", children: props.message })] }));
+    return (_jsxs("div", { role: "alert", "aria-live": "polite", style: props.style, className: props.className, children: [_jsxs("div", { className: "relative mx-auto w-[9.5rem] pt-4", children: [_jsx("div", { className: "-translate-x-1/2 absolute top-0 left-1/2 size-[6.5rem] rounded-full bg-utility-gray-200" }), _jsx(CloudIcon, { className: "relative h-auto w-full shrink-0" }), _jsx("div", { className: "-translate-x-1/2 absolute bottom-2 left-1/2 flex size-12 items-center justify-center rounded-full bg-utility-gray-200/40 backdrop-blur-sm", children: _jsx(props.icon, { className: "size-6 text-white" }) }), _jsx("div", { className: "absolute top-3.5 left-4 size-2.5 rounded-full bg-utility-gray-100" }), _jsx("div", { className: "absolute bottom-0.5 left-3 size-3.5 rounded-full bg-utility-gray-100" }), _jsx("div", { className: "absolute top-1 right-3.5 size-2 rounded-full bg-utility-gray-100" }), _jsx("div", { className: "absolute top-6.5 right-0 size-3.5 rounded-full bg-utility-gray-100" })] }), _jsx("h2", { className: "mt-xl text-center font-semibold", children: props.title }), _jsx("p", { className: "mx-auto mt-xs max-w-[25rem] text-center text-sm text-text-tertiary-600", children: props.message })] }));
 }
 function CloudIcon(props) {
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 152 104", fill: "none", ...props, children: [_jsxs("g", { filter: "url(#filter0_dd_2719_19242)", children: [_jsx("path", { d: "M77.6 0C66.8273 0 57.2978 5.32329 51.4987 13.4829C49.605 13.0363 47.6301 12.8 45.6 12.8C31.4615 12.8 20 24.2615 20 38.4C20 52.5385 31.4615 64 45.6 64L109.6 64C121.971 64 132 53.9712 132 41.6C132 29.2288 121.971 19.2 109.6 19.2C108.721 19.2 107.854 19.2506 107.002 19.349C102.098 7.9677 90.7797 0 77.6 0Z", fill: "#F9FAFB" }), _jsx("ellipse", { cx: "45.6", cy: "38.4008", rx: "25.6", ry: "25.6", fill: "url(#paint0_linear_2719_19242)" }), _jsx("circle", { cx: "77.6", cy: "32", r: "32", fill: "url(#paint1_linear_2719_19242)" }), _jsx("ellipse", { cx: "109.6", cy: "41.5992", rx: "22.4", ry: "22.4", fill: "url(#paint2_linear_2719_19242)" })] }), _jsxs("defs", { children: [_jsxs("filter", { id: "filter0_dd_2719_19242", x: "0", y: "0", width: "152", height: "104", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feMorphology", { radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_2719_19242" }), _jsx("feOffset", { dy: "8" }), _jsx("feGaussianBlur", { stdDeviation: "4" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_2719_19242" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feMorphology", { radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_2719_19242" }), _jsx("feOffset", { dy: "20" }), _jsx("feGaussianBlur", { stdDeviation: "12" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), _jsx("feBlend", { mode: "normal", in2: "effect1_dropShadow_2719_19242", result: "effect2_dropShadow_2719_19242" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_2719_19242", result: "shape" })] }), _jsxs("linearGradient", { id: "paint0_linear_2719_19242", x1: "25.9429", y1: "21.4865", x2: "71.2", y2: "64.0007", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#D0D5DD" }), _jsx("stop", { offset: "0.350715", stopColor: "white", stopOpacity: "0" })] }), _jsxs("linearGradient", { id: "paint1_linear_2719_19242", x1: "53.0286", y1: "10.8571", x2: "109.6", y2: "64", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#D0D5DD" }), _jsx("stop", { offset: "0.350715", stopColor: "white", stopOpacity: "0" })] }), _jsxs("linearGradient", { id: "paint2_linear_2719_19242", x1: "92.4", y1: "26.7992", x2: "132", y2: "63.9992", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#D0D5DD" }), _jsx("stop", { offset: "0.350715", stopColor: "white", stopOpacity: "0" })] })] })] }));

package/dist/components/shared/IdFrontImageField/IdFrontImageField.client.js

@@ -25,7 +25,7 @@ export function IdFrontImageField__client(props) {
         'defaultValue',
     ])(props);
     const context = useIdFrontImageField(useIdFrontImageFieldProps);
-    return (_jsxs(IdFrontImageFieldProvider, { value: context, children: [_jsxs("div", { ref: localProps.ref, id: localProps.id, style: localProps.style, className: twMerge('border-border-primary bg-bg-primary group relative aspect-[352/180] w-full shrink-0 rounded-xl border p-xl', localProps.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: (e) => {
+    return (_jsxs(IdFrontImageFieldProvider, { value: context, children: [_jsxs("div", { ref: localProps.ref, id: localProps.id, style: localProps.style, className: twMerge('group relative aspect-[352/180] w-full shrink-0 rounded-xl border border-border-primary bg-bg-primary p-xl', localProps.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: (e) => {
                     e.preventDefault();
                     const file = e.dataTransfer.files?.[0];
                     if (!file)
@@ -45,21 +45,21 @@ export function IdFrontImageField__client(props) {
                         }, disabled: context.field?.disabled ||
                             context.query.isLoading ||
                             context.mutation.isPending ||
-                            localProps.disabled, readOnly: context.field?.readOnly || localProps.readOnly, required: context.field?.required || localProps.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: context.query.isLoading ? (_jsx(Spinner02Icon, { className: "text-text-placeholder-subtle size-4" })) : (_jsx(UploadCloud02Icon, { className: "text-text-placeholder-subtle size-4" })) }), _jsxs("h2", { className: "text-text-tertiary-600 mt-lg", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
+                            localProps.disabled, readOnly: context.field?.readOnly || localProps.readOnly, required: context.field?.required || localProps.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "mx-auto flex size-8 items-center justify-center rounded-sm border border-border-primary shadow-xs", children: context.query.isLoading ? (_jsx(Spinner02Icon, { className: "size-4 text-text-placeholder-subtle" })) : (_jsx(UploadCloud02Icon, { className: "size-4 text-text-placeholder-subtle" })) }), _jsxs("h2", { className: "mt-lg text-text-tertiary-600", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
                                                     context.inputRef.current?.click();
                                                 }, disabled: context.field?.disabled ||
                                                     context.field?.readOnly ||
                                                     context.query.isLoading ||
                                                     context.mutation.isPending ||
                                                     localProps.disabled ||
-                                                    localProps.readOnly, className: "text-button-secondary-fg font-semibold disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: () => {
+                                                    localProps.readOnly, className: "font-semibold text-button-secondary-fg disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: () => {
                                     context.disclosure.setOpen(true);
                                 }, disabled: context.field?.disabled ||
                                     context.field?.readOnly ||
                                     context.query.isLoading ||
                                     context.mutation.isPending ||
                                     localProps.disabled ||
-                                    localProps.readOnly, children: "Take a photo" })] })), context.query.data?.url && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: context.query.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "h-auto w-full rounded-md" }), _jsx("button", { type: "button", className: "backdrop-blur-xs absolute right-2 top-2 rounded-full bg-white/10 p-1", onClick: () => {
+                                    localProps.readOnly, children: "Take a photo" })] })), context.query.data?.url && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: context.query.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "h-auto w-full rounded-md" }), _jsx("button", { type: "button", className: "absolute top-2 right-2 rounded-full bg-white/10 p-1 backdrop-blur-xs", onClick: () => {
                                     context.setValue('');
                                 }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Camera, {})] }));
 }
@@ -72,9 +72,9 @@ function Camera() {
     const context = useIdFrontImageFieldContext();
     return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
             context.disclosure.setOpen(details.open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: context.camera.close, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", ' ', _jsx("br", { className: "hidden lg:block" }), "Avoid glare or reflections, and ensure all corners are within\u00A0the\u00A0frame."] }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsx(Video, {}), context.camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: context.camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
+        }, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: context.camera.close, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg bg-bg-primary-alt px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "mt-md text-center text-text-tertiary-600 text-xs lg:text-base", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", ' ', _jsx("br", { className: "hidden lg:block" }), "Avoid glare or reflections, and ensure all corners are within\u00A0the\u00A0frame."] }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsx(Video, {}), context.camera.error && (_jsxs("div", { className: "flex aspect-[4/3] flex-col items-center justify-center rounded-md border border-border-disabled bg-black px-4 lg:aspect-video", children: [_jsx(CameraOffIcon, { className: "size-10 text-center text-text-placeholder-subtle lg:size-12" }), _jsx("h2", { className: "mt-3 font-semibold text-sm lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "mt-0.5 text-center text-text-tertiary-600 text-xs lg:mt-1 lg:text-sm", children: context.camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
                                                     context.camera.reopen();
-                                                }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), context.camera.data && (_jsx("div", { className: "border-border-disabled aspect-[4/3] w-full overflow-hidden rounded-md border bg-black lg:aspect-video", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "mx-auto mt-2 block h-[calc(100%-1rem)] w-auto" }) }))] }), !context.camera.data && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto w-full px-xl py-lg lg:w-[10rem]", onClick: () => {
+                                                }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "flex aspect-[4/3] flex-col items-center justify-center rounded-md border border-border-disabled bg-black px-4 lg:aspect-video", children: _jsx(Spinner02Icon, { className: "size-8 text-text-placeholder" }) })), context.camera.data && (_jsx("div", { className: "aspect-[4/3] w-full overflow-hidden rounded-md border border-border-disabled bg-black lg:aspect-video", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "mx-auto mt-2 block h-[calc(100%-1rem)] w-auto" }) }))] }), !context.camera.data && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "mx-auto w-full px-xl py-lg disabled:bg-bg-disabled disabled:text-text-disabled lg:w-[10rem]", onClick: () => {
                                         context.camera.snap();
                                     }, disabled: context.camera.snapping ||
                                         context.camera.loading ||
@@ -103,5 +103,5 @@ function Video() {
     const y = (rootRect.height - guideRect.height) / 2;
     return (_jsxs("div", { ref: rootRef, className: twMerge('relative h-auto w-full overflow-hidden', !context.camera.data && !context.camera.error && !context.camera.loading
             ? 'block'
-            : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx("div", { className: "pointer-events-none absolute left-0 right-0 top-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute left-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { ref: context.guideRef, className: "border-utility-warning-700 pointer-events-none absolute left-1/2 top-1/2 z-10 aspect-[85.6/53.98] w-[calc(100%-1rem)] max-w-[24.688rem] -translate-x-1/2 -translate-y-1/2 border-4 border-dashed transition-all duration-200" })] }));
+            : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx("div", { className: "pointer-events-none absolute top-0 right-0 left-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 bottom-0 left-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute left-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { ref: context.guideRef, className: "-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute top-1/2 left-1/2 z-10 aspect-[85.6/53.98] w-[calc(100%-1rem)] max-w-[24.688rem] border-4 border-utility-warning-700 border-dashed transition-all duration-200" })] }));
 }

package/dist/components/shared/IdFrontImageField/IdFrontImageField.js

@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic';
 import { Spinner02Icon } from '../../../icons/Spinner02Icon.js';
 const Component = dynamic(() => import('./IdFrontImageField.client.js').then((mod) => mod.IdFrontImageField__client), {
     ssr: false,
-    loading: () => (_jsx("div", { className: "border-border-primary bg-bg-primary flex aspect-[352/180] w-full shrink-0 items-center justify-center rounded-xl border", children: _jsx(Spinner02Icon, { className: "text-text-quinary size-8" }) })),
+    loading: () => (_jsx("div", { className: "flex aspect-[352/180] w-full shrink-0 items-center justify-center rounded-xl border border-border-primary bg-bg-primary", children: _jsx(Spinner02Icon, { className: "size-8 text-text-quinary" }) })),
 });
 export function IdFrontImageField(props) {
     return _jsx(Component, { ...props });

package/dist/components/shared/SelfieImageField/SelfieImageField.client.js

@@ -45,21 +45,21 @@ export function SelfieImageField__client(props) {
                         }, disabled: context.field?.disabled ||
                             context.query.isLoading ||
                             context.mutation.isPending ||
-                            localProps.disabled, readOnly: context.field?.readOnly || localProps.readOnly, required: context.field?.required || localProps.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: context.query.isLoading ? (_jsx(Spinner02Icon, { className: "text-text-placeholder-subtle size-4" })) : (_jsx(UploadCloud02Icon, { className: "text-text-placeholder-subtle size-4" })) }), _jsxs("h2", { className: "text-text-tertiary-600 mt-lg", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
+                            localProps.disabled, readOnly: context.field?.readOnly || localProps.readOnly, required: context.field?.required || localProps.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "mx-auto flex size-8 items-center justify-center rounded-sm border border-border-primary shadow-xs", children: context.query.isLoading ? (_jsx(Spinner02Icon, { className: "size-4 text-text-placeholder-subtle" })) : (_jsx(UploadCloud02Icon, { className: "size-4 text-text-placeholder-subtle" })) }), _jsxs("h2", { className: "mt-lg text-text-tertiary-600", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
                                                     context.inputRef.current?.click();
                                                 }, disabled: context.field?.disabled ||
                                                     context.field?.readOnly ||
                                                     context.query.isLoading ||
                                                     context.mutation.isPending ||
                                                     localProps.disabled ||
-                                                    localProps.readOnly, className: "text-button-secondary-fg font-semibold disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: () => {
+                                                    localProps.readOnly, className: "font-semibold text-button-secondary-fg disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: () => {
                                     context.disclosure.setOpen(true);
                                 }, disabled: context.field?.disabled ||
                                     context.field?.readOnly ||
                                     context.query.isLoading ||
                                     context.mutation.isPending ||
                                     localProps.disabled ||
-                                    localProps.readOnly, children: "Take a photo" })] })), context.query.data?.url && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: context.query.data.url, alt: "", width: 600, height: 600, unoptimized: true, className: "h-auto w-full rounded-md" }), _jsx("button", { type: "button", className: "backdrop-blur-xs absolute right-2 top-2 rounded-full bg-white/10 p-1", onClick: () => {
+                                    localProps.readOnly, children: "Take a photo" })] })), context.query.data?.url && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: context.query.data.url, alt: "", width: 600, height: 600, unoptimized: true, className: "h-auto w-full rounded-md" }), _jsx("button", { type: "button", className: "absolute top-2 right-2 rounded-full bg-white/10 p-1 backdrop-blur-xs", onClick: () => {
                                     context.setValue('');
                                 }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Camera, {})] }));
 }
@@ -72,9 +72,9 @@ function Camera() {
     const context = useSelfieImageFieldContext();
     return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
             context.disclosure.setOpen(details.open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: context.camera.close, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: "Make sure your face and ID are clearly visible, with no glare\u00A0or\u00A0blur." }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsx(Video, {}), context.camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: context.camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
+        }, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: context.camera.close, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg bg-bg-primary-alt px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "mt-md text-center text-text-tertiary-600 text-xs lg:text-base", children: "Make sure your face and ID are clearly visible, with no glare\u00A0or\u00A0blur." }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsx(Video, {}), context.camera.error && (_jsxs("div", { className: "flex aspect-[4/3] flex-col items-center justify-center rounded-md border border-border-disabled bg-black px-4 lg:aspect-video", children: [_jsx(CameraOffIcon, { className: "size-10 text-center text-text-placeholder-subtle lg:size-12" }), _jsx("h2", { className: "mt-3 font-semibold text-sm lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "mt-0.5 text-center text-text-tertiary-600 text-xs lg:mt-1 lg:text-sm", children: context.camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
                                                     context.camera.reopen();
-                                                }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), context.camera.data && (_jsx("div", { className: "border-border-disabled aspect-[4/3] w-full overflow-hidden rounded-md border bg-black lg:aspect-video", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 600, unoptimized: true, className: "mx-auto mt-2 block h-[calc(100%-1rem)] w-auto" }) }))] }), !context.camera.data && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto w-full px-xl py-lg lg:w-[10rem]", onClick: () => {
+                                                }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "flex aspect-[4/3] flex-col items-center justify-center rounded-md border border-border-disabled bg-black px-4 lg:aspect-video", children: _jsx(Spinner02Icon, { className: "size-8 text-text-placeholder" }) })), context.camera.data && (_jsx("div", { className: "aspect-[4/3] w-full overflow-hidden rounded-md border border-border-disabled bg-black lg:aspect-video", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 600, unoptimized: true, className: "mx-auto mt-2 block h-[calc(100%-1rem)] w-auto" }) }))] }), !context.camera.data && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "mx-auto w-full px-xl py-lg disabled:bg-bg-disabled disabled:text-text-disabled lg:w-[10rem]", onClick: () => {
                                         context.camera.snap();
                                     }, disabled: context.camera.loading ||
                                         context.camera.snapping ||
@@ -114,7 +114,7 @@ function Video() {
     const y = (rootRect.height - guideRect.height) / 2;
     return (_jsxs("div", { ref: rootRef, className: twMerge('relative h-auto w-full overflow-hidden', !context.camera.data && !context.camera.error && !context.camera.loading
             ? 'block'
-            : 'hidden'), children: [_jsx("div", { className: "pointer-events-none absolute left-0 right-0 top-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute left-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("video", { ...context.camera.videoProps }), _jsx("div", { ref: context.guideRef, className: twMerge('border-utility-warning-700 absolute left-1/2 top-1/2 z-20 aspect-square -translate-x-1/2 -translate-y-1/2 border-4 border-dashed', context.faceFound && 'border-utility-success-700', guideWidth <= 0 ? 'hidden' : 'block'), style: {
+            : 'hidden'), children: [_jsx("div", { className: "pointer-events-none absolute top-0 right-0 left-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 bottom-0 left-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute left-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("video", { ...context.camera.videoProps }), _jsx("div", { ref: context.guideRef, className: twMerge('-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 z-20 aspect-square border-4 border-utility-warning-700 border-dashed', context.faceFound && 'border-utility-success-700', guideWidth <= 0 ? 'hidden' : 'block'), style: {
                     width: `calc(${pxToRem(guideWidth)}rem - 2rem)`,
                 } })] }));
 }

package/dist/components/shared/SelfieImageField/SelfieImageField.js

@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic';
 import { Spinner02Icon } from '../../../icons/Spinner02Icon.js';
 const Component = dynamic(() => import('./SelfieImageField.client.js').then((mod) => mod.SelfieImageField__client), {
     ssr: false,
-    loading: () => (_jsx("div", { className: "border-border-primary bg-bg-primary flex aspect-[352/180] w-full shrink-0 items-center justify-center rounded-xl border", children: _jsx(Spinner02Icon, { className: "text-text-quinary size-8" }) })),
+    loading: () => (_jsx("div", { className: "flex aspect-[352/180] w-full shrink-0 items-center justify-center rounded-xl border border-border-primary bg-bg-primary", children: _jsx(Spinner02Icon, { className: "size-8 text-text-quinary" }) })),
 });
 export function SelfieImageField(props) {
     return _jsx(Component, { ...props });

package/dist/components/shared/SelfieImageField/useSelfieImageField.js

@@ -136,7 +136,6 @@ export function useSelfieImageField(props) {
 }
 let __image_face_detector__;
 let __video_face_detector__;
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 let __vision__;
 async function getImageFaceDetector() {
     if (!__image_face_detector__) {

package/dist/constants/EnvVar.d.ts

@@ -1,5 +1,5 @@
 export declare const SITE_ID: string;
 export declare const PLATFORM_ID: string;
 export declare const PLATFORM_CODE: string;
-export declare const ENVIRONMENT: "development" | "production";
+export declare const ENVIRONMENT: "production" | "development";
 export declare const INTERNALS__REPORT_WEB_VITALS: boolean;

package/dist/handlers/postTransformIdFrontImage.d.ts

@@ -0,0 +1,3 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+export declare function postTransformIdFrontImage(request: NextRequest): Promise<NextResponse<unknown>>;

package/dist/handlers/postTransformIdFrontImage.js

@@ -0,0 +1,82 @@
+import { NextResponse } from 'next/server';
+import sharp from 'sharp';
+import { z } from 'zod';
+import { validateFile } from '../utils/validateFile.js';
+const TransformIdFrontImageDefinition = z.object({
+    image: z.instanceof(File).superRefine((file, context) => {
+        const error = validateFile(file);
+        if (error) {
+            context.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: error.message,
+            });
+        }
+    }),
+    cropTop: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+    cropLeft: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+    cropWidth: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+    cropHeight: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+});
+export async function postTransformIdFrontImage(request) {
+    const form = await request.formData();
+    const parsed = TransformIdFrontImageDefinition.safeParse({
+        image: form.get('image'),
+        cropTop: form.get('cropTop'),
+        cropLeft: form.get('cropLeft'),
+        cropWidth: form.get('cropWidth'),
+        cropHeight: form.get('cropHeight'),
+    });
+    if (!parsed.success) {
+        return NextResponse.json({
+            ok: false,
+            message: parsed.error.issues[0].message,
+            __error: parsed.error,
+        }, { status: 400 });
+    }
+    const file = parsed.data.image;
+    const arrayBuffer = await file.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    const cropped = await sharp(buffer)
+        .extract({
+        top: parsed.data.cropTop,
+        left: parsed.data.cropLeft,
+        width: parsed.data.cropWidth,
+        height: parsed.data.cropHeight,
+    })
+        .resize({
+        fit: 'contain',
+        width: 1200,
+        height: 757,
+        kernel: sharp.kernel.lanczos3,
+        withoutEnlargement: true,
+    })
+        .modulate({
+        brightness: 1.03,
+        saturation: 1.05,
+    })
+        .median(1)
+        .blur(0.3)
+        .sharpen({
+        sigma: 1,
+        m1: 0.5,
+        m2: 1.0,
+        x1: 2,
+        y2: 10,
+        y3: 20,
+    })
+        .webp({
+        effort: 6,
+        quality: 100,
+        alphaQuality: 100,
+        lossless: false,
+        nearLossless: false,
+        smartSubsample: true,
+    })
+        .toBuffer();
+    return new NextResponse(cropped, {
+        headers: {
+            'Content-Type': 'image/webp',
+            'Content-Disposition': `inline; filename="id-front-${Date.now()}.webp"`,
+        },
+    });
+}

package/dist/handlers/postTransformSelfieImage.d.ts

@@ -0,0 +1,3 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+export declare function postTransformSelfieImage(request: NextRequest): Promise<NextResponse<unknown>>;

package/dist/handlers/postTransformSelfieImage.js

@@ -0,0 +1,82 @@
+import { NextResponse } from 'next/server';
+import sharp from 'sharp';
+import { z } from 'zod';
+import { validateFile } from '../utils/validateFile.js';
+const TransformSelfieImageDefinition = z.object({
+    image: z.instanceof(File).superRefine((file, context) => {
+        const error = validateFile(file);
+        if (error) {
+            context.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: error.message,
+            });
+        }
+    }),
+    cropTop: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+    cropLeft: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+    cropWidth: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+    cropHeight: z.number().or(z.string().transform((v) => Math.round(Number(v)))),
+});
+export async function postTransformSelfieImage(request) {
+    const form = await request.formData();
+    const parsed = TransformSelfieImageDefinition.safeParse({
+        image: form.get('image'),
+        cropTop: form.get('cropTop'),
+        cropLeft: form.get('cropLeft'),
+        cropWidth: form.get('cropWidth'),
+        cropHeight: form.get('cropHeight'),
+    });
+    if (!parsed.success) {
+        return NextResponse.json({
+            ok: false,
+            message: parsed.error.issues[0].message,
+            __error: parsed.error,
+        }, { status: 400 });
+    }
+    const file = parsed.data.image;
+    const arrayBuffer = await file.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    const cropped = await sharp(buffer)
+        .extract({
+        top: parsed.data.cropTop,
+        left: parsed.data.cropLeft,
+        width: parsed.data.cropWidth,
+        height: parsed.data.cropHeight,
+    })
+        .resize({
+        fit: 'contain',
+        width: 1200,
+        height: 1200,
+        kernel: sharp.kernel.lanczos3,
+        withoutEnlargement: true,
+    })
+        .modulate({
+        brightness: 1.03,
+        saturation: 1.05,
+    })
+        .median(1)
+        .blur(0.3)
+        .sharpen({
+        sigma: 1,
+        m1: 0.5,
+        m2: 1.0,
+        x1: 2,
+        y2: 10,
+        y3: 20,
+    })
+        .webp({
+        effort: 6,
+        quality: 100,
+        alphaQuality: 100,
+        lossless: false,
+        nearLossless: false,
+        smartSubsample: true,
+    })
+        .toBuffer();
+    return new NextResponse(cropped, {
+        headers: {
+            'Content-Type': 'image/webp',
+            'Content-Disposition': `inline; filename="selfie-${Date.now()}.webp"`,
+        },
+    });
+}

package/dist/middleware.d.ts

@@ -1,3 +1,3 @@
-import { NextFetchEvent, NextResponse, type NextMiddleware, type NextRequest } from 'next/server';
+import { type NextFetchEvent, NextResponse, type NextMiddleware, type NextRequest } from 'next/server';
 export declare const middleware: (req: NextRequest) => Promise<NextResponse>;
 export declare function extendMiddleware<T>(fn: (req: NextRequest, evt: NextFetchEvent, res: NextResponse) => NextResponse<T> | Promise<NextResponse<T>>): NextMiddleware;

package/dist/middleware.js

@@ -1,5 +1,5 @@
 import { addMinutes } from 'date-fns';
-import { NextFetchEvent, NextResponse, } from 'next/server';
+import { NextResponse, } from 'next/server';
 import { ACCESS_TOKEN_COOKIE_NAME, REFRESH_TOKEN_COOKIE_NAME, } from './constants/index.js';
 import { refreshSession } from './services/auth.js';
 export const middleware = async (req) => {

package/dist/services/graphqlRequest.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ENVIRONMENT, PLATFORM_CODE, PLATFORM_ID, SITE_ID } from '../constants/index.js';
 export async function graphqlRequest(url, query, variables, options) {
     const headers = new Headers();