@develemit/commerce-admin 0.0.0-stage → 0.4.0

package/dist/styles.css

@@ -0,0 +1,418 @@
+.sfa-root {
+  color: var(--sf-color-fg, #1a1a1a);
+  background: var(--sf-color-bg, #ffffff);
+  font-family: var(--sf-font-body, system-ui, sans-serif);
+}
+.sfa-panel {
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sf-color-surface, #f6f6f6);
+  padding: calc(var(--sf-space-unit, 0.25rem) * 4);
+}
+.sfa-btn {
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0 calc(var(--sf-space-unit, 0.25rem) * 4);
+  font: inherit;
+  font-size: 1rem;
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sf-color-bg, #ffffff);
+  color: inherit;
+  cursor: pointer;
+}
+.sfa-btn--primary {
+  background: var(--sf-color-accent, #1a1a1a);
+  color: var(--sf-color-accent-fg, #ffffff);
+}
+.sfa-btn--danger {
+  background: var(--sf-color-danger, #b00020);
+  color: #ffffff;
+}
+.sfa-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.sfa-nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+  margin: 0;
+  padding: calc(var(--sf-space-unit, 0.25rem) * 2);
+  list-style: none;
+}
+.sfa-nav__link {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 calc(var(--sf-space-unit, 0.25rem) * 3);
+}
+/* Bare inline links measure ~22px; hosts cannot restyle kit internals. */
+.sfa-link--tap {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-layout__content {
+  flex: 1;
+  padding: calc(var(--sf-space-unit, 0.25rem) * 4);
+}
+.sfa-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: var(--sf-color-surface, #f6f6f6);
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  font-size: 0.875rem;
+}
+.sfa-badge--needs-attention {
+  border-color: var(--sf-color-danger, #b00020);
+}
+.sfa-badge--refund-pending {
+  border-color: var(--sf-color-warning, #b26a00);
+  color: var(--sf-color-warning, #b26a00);
+}
+.sfa-badge--refund-succeeded {
+  border-color: var(--sf-color-success, #1b7a3d);
+  color: var(--sf-color-success, #1b7a3d);
+}
+.sfa-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.sfa-table th,
+.sfa-table td {
+  padding: calc(var(--sf-space-unit, 0.25rem) * 2);
+  text-align: left;
+  border-bottom: 1px solid var(--sf-color-border, #e0e0e0);
+}
+@media (max-width: 640px) {
+  .sfa-table--stacked thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+  }
+  .sfa-table--stacked,
+  .sfa-table--stacked tbody,
+  .sfa-table--stacked tr,
+  .sfa-table--stacked td {
+    display: block;
+  }
+  .sfa-table--stacked tr {
+    margin-bottom: calc(var(--sf-space-unit, 0.25rem) * 3);
+    border: 1px solid var(--sf-color-border, #e0e0e0);
+    border-radius: var(--sf-radius, 4px);
+  }
+  .sfa-table--stacked td::before {
+    content: attr(data-label);
+    display: block;
+    font-size: 0.75rem;
+    opacity: 0.7;
+  }
+}
+.sfa-notice {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  padding: calc(var(--sf-space-unit, 0.25rem) * 3);
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  border-radius: var(--sf-radius, 4px);
+}
+.sfa-notice--error {
+  border-color: var(--sf-color-danger, #b00020);
+}
+.sfa-notice--toast {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
+  background: var(--sf-color-bg, #ffffff);
+  z-index: 60;
+}
+.sfa-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 50;
+}
+.sfa-dialog {
+  width: min(92vw, 28rem);
+  padding: calc(var(--sf-space-unit, 0.25rem) * 5);
+  background: var(--sf-color-bg, #ffffff);
+  border-radius: var(--sf-radius, 4px);
+}
+.sfa-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+  margin-top: calc(var(--sf-space-unit, 0.25rem) * 4);
+}
+.sfa-root input,
+.sfa-root select,
+.sfa-root textarea {
+  font-size: 1rem;
+  min-height: 44px;
+}
+.sfa-filter-group {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 3px;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+.sfa-filter-group::-webkit-scrollbar {
+  display: none;
+}
+.sfa-filter-group .sfa-filter {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.sfa-products__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+}
+.sfa-products__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  margin: calc(var(--sf-space-unit, 0.25rem) * 4) 0;
+}
+.sfa-filter[aria-pressed='true'] {
+  background: var(--sf-color-accent, #1a1a1a);
+  color: var(--sf-color-accent-fg, #ffffff);
+}
+.sfa-thumb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sf-color-surface, #f6f6f6);
+  font-size: 0.625rem;
+  text-align: center;
+}
+.sfa-row-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-row-actions a.sfa-btn {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+}
+.sfa-form {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 4);
+  max-width: 40rem;
+}
+.sfa-field {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 1);
+}
+.sfa-field__label {
+  font-weight: 600;
+}
+.sfa-field__help {
+  margin: 0;
+  font-size: 0.875rem;
+  opacity: 0.75;
+}
+.sfa-field__error {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--sf-color-danger, #b00020);
+}
+.sfa-field [aria-invalid='true'] {
+  border-color: var(--sf-color-danger, #b00020);
+}
+.sfa-check {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  min-height: 44px;
+}
+.sfa-check input {
+  width: 24px;
+  height: 24px;
+  min-height: 24px;
+}
+.sfa-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+.sfa-image-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-image-picker__btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+.sfa-image-picker__btn:focus-within {
+  outline: 2px solid var(--sf-color-accent, #1a1a1a);
+  outline-offset: 2px;
+}
+.sfa-image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.sfa-image-tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+  min-width: 120px;
+  padding: calc(var(--sf-space-unit, 0.25rem) * 2);
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  border-radius: var(--sf-radius, 4px);
+}
+.sfa-image-tile[aria-busy='true'] {
+  opacity: 0.7;
+}
+.sfa-image-tile__img {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+}
+.sfa-image-tile__cover {
+  position: absolute;
+  top: calc(var(--sf-space-unit, 0.25rem) * 3);
+  left: calc(var(--sf-space-unit, 0.25rem) * 3);
+  padding: 0 calc(var(--sf-space-unit, 0.25rem) * 2);
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sf-color-accent, #1a1a1a);
+  color: var(--sf-color-accent-fg, #ffffff);
+  font-size: 0.75rem;
+}
+.sfa-image-tile__actions {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-image-tile__alt {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-spinner {
+  font-size: 0.875rem;
+}
+.sfa-spinner::before {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-right: 0.5em;
+  vertical-align: -0.125em;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: sfa-spin 0.8s linear infinite;
+}
+@keyframes sfa-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sfa-spinner::before {
+    animation: none;
+  }
+}
+.sfa-orders__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  margin: calc(var(--sf-space-unit, 0.25rem) * 4) 0;
+}
+.sfa-orders__more {
+  margin-top: calc(var(--sf-space-unit, 0.25rem) * 4);
+}
+.sfa-order__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+}
+.sfa-order__section {
+  margin-top: calc(var(--sf-space-unit, 0.25rem) * 6);
+}
+.sfa-order__totals {
+  display: grid;
+  grid-template-columns: auto auto;
+  justify-content: end;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 1)
+    calc(var(--sf-space-unit, 0.25rem) * 4);
+  margin-top: calc(var(--sf-space-unit, 0.25rem) * 3);
+}
+.sfa-order__address {
+  font-style: normal;
+}
+.sfa-order__refund--pending {
+  font-style: italic;
+}
+.sfa-order__actions,
+.sfa-order__action {
+  display: grid;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  justify-items: start;
+}
+.sfa-rates {
+  list-style: none;
+  margin: calc(var(--sf-space-unit, 0.25rem) * 4) 0;
+  padding: 0;
+  display: grid;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 4);
+}
+.sfa-rate {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  align-items: end;
+  padding: calc(var(--sf-space-unit, 0.25rem) * 4);
+  border: 1px solid var(--sf-color-border, #d4d4d4);
+  border-radius: var(--sf-radius, 4px);
+}
+.sfa-rate__active {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-rate__actions,
+.sfa-shipping__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}

package/dist/views/discounts/admin-discount-editor.d.ts

@@ -0,0 +1,6 @@
+import { Discount } from '@develemit/commerce-contracts';
+export interface AdminDiscountEditorProps {
+    discountId?: string;
+    onSaved?: (discount: Discount) => void;
+}
+export declare function AdminDiscountEditor({ discountId, onSaved, }: AdminDiscountEditorProps): import('react').JSX.Element;

package/dist/views/discounts/admin-discount-list.d.ts

@@ -0,0 +1 @@
+export declare function AdminDiscountList(): import('react').JSX.Element;

package/dist/views/discounts/discount-fields.d.ts

@@ -0,0 +1,10 @@
+import { DiscountFieldErrors, DiscountForm } from '../../lib/discount-form';
+import { DiscountLabels } from '../../lib/discount-labels';
+export interface DiscountFieldsProps {
+    form: DiscountForm;
+    errors: DiscountFieldErrors;
+    labels: DiscountLabels;
+    usedCount: number;
+    onChange: <K extends keyof DiscountForm>(field: K, value: DiscountForm[K]) => void;
+}
+export declare function DiscountFields({ form, errors, labels, usedCount, onChange, }: DiscountFieldsProps): import('react').JSX.Element;

package/dist/views/discounts/discount-value.d.ts

@@ -0,0 +1,4 @@
+import { Discount } from '@develemit/commerce-contracts';
+export declare function DiscountValue({ discount }: {
+    discount: Discount;
+}): import('react').JSX.Element;

package/dist/views/orders/admin-order-detail.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { AdminOrderDetail as OrderDetail } from '@develemit/commerce-contracts';
+export interface AdminOrderDetailProps {
+    orderId: string;
+    actions?: (ctx: {
+        order: OrderDetail;
+        reload: () => void;
+    }) => ReactNode;
+}
+export declare function AdminOrderDetail({ orderId, actions }: AdminOrderDetailProps): import('react').JSX.Element;

package/dist/views/orders/admin-order-list.d.ts

@@ -0,0 +1 @@
+export declare function AdminOrderList(): import('react').JSX.Element;

package/dist/views/orders/order-actions.d.ts

@@ -0,0 +1,7 @@
+import { AdminOrderDetail } from '@develemit/commerce-contracts';
+interface OrderActionsProps {
+    order: AdminOrderDetail;
+    reload: () => void;
+}
+export declare function OrderActions({ order, reload }: OrderActionsProps): import('react').JSX.Element;
+export {};

package/dist/views/orders/order-fulfillment.d.ts

@@ -0,0 +1,4 @@
+import { AdminOrderDetail } from '@develemit/commerce-contracts';
+export declare function OrderFulfillment({ order }: {
+    order: AdminOrderDetail;
+}): import('react').JSX.Element;

package/dist/views/orders/order-items.d.ts

@@ -0,0 +1,4 @@
+import { AdminOrderDetail } from '@develemit/commerce-contracts';
+export declare function OrderItems({ order }: {
+    order: AdminOrderDetail;
+}): import('react').JSX.Element;

package/dist/views/orders/order-refunds.d.ts

@@ -0,0 +1,4 @@
+import { AdminOrderDetail } from '@develemit/commerce-contracts';
+export declare function OrderRefunds({ order }: {
+    order: AdminOrderDetail;
+}): import('react').JSX.Element;

package/dist/views/orders/refund-dialog.d.ts

@@ -0,0 +1,8 @@
+import { AdminOrderDetail } from '@develemit/commerce-contracts';
+interface RefundDialogProps {
+    order: AdminOrderDetail;
+    onClose: () => void;
+    onDone: (message: string) => void;
+}
+export declare function RefundDialog({ order, onClose, onDone }: RefundDialogProps): import('react').JSX.Element;
+export {};

package/dist/views/orders/resolve-button.d.ts

@@ -0,0 +1,7 @@
+import { AdminOrderDetail } from '@develemit/commerce-contracts';
+interface ResolveButtonProps {
+    order: AdminOrderDetail;
+    onDone: (message: string) => void;
+}
+export declare function ResolveButton({ order, onDone }: ResolveButtonProps): import('react').JSX.Element;
+export {};

package/dist/views/orders/ship-form.d.ts

@@ -0,0 +1,7 @@
+import { AdminOrderDetail } from '@develemit/commerce-contracts';
+interface ShipFormProps {
+    order: AdminOrderDetail;
+    onDone: (message: string) => void;
+}
+export declare function ShipForm({ order, onDone }: ShipFormProps): import('react').JSX.Element;
+export {};

package/dist/views/products/admin-product-editor.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { AdminProduct } from '@develemit/commerce-contracts';
+export interface AdminProductEditorProps {
+    productId?: string;
+    onSaved?: (product: AdminProduct) => void;
+    imagesSlot?: ReactNode;
+    categories?: string[];
+}
+export declare function AdminProductEditor({ productId, onSaved, imagesSlot, categories, }: AdminProductEditorProps): import('react').JSX.Element;

package/dist/views/products/admin-product-images.d.ts

@@ -0,0 +1,6 @@
+import { AdminProductImage } from './image-tile';
+export interface AdminProductImagesProps {
+    productId: string;
+    images: AdminProductImage[];
+}
+export declare function AdminProductImages({ productId, images: initial, }: AdminProductImagesProps): import('react').JSX.Element;

package/dist/views/products/admin-product-list.d.ts

@@ -0,0 +1 @@
+export declare function AdminProductList(): import('react').JSX.Element;

package/dist/views/products/image-alt-editor.d.ts

@@ -0,0 +1,9 @@
+import { ImageLabels } from '../../lib/image-labels';
+export interface ImageAltEditorProps {
+    imageId: string;
+    alt: string;
+    name: string;
+    labels: ImageLabels;
+    onSave: (alt: string) => Promise<void>;
+}
+export declare function ImageAltEditor({ imageId, alt, name, labels, onSave, }: ImageAltEditorProps): import('react').JSX.Element;

package/dist/views/products/image-tile.d.ts

@@ -0,0 +1,15 @@
+import { AdminProduct } from '@develemit/commerce-contracts';
+import { ImageLabels } from '../../lib/image-labels';
+export type AdminProductImage = AdminProduct['images'][number];
+export type MoveDirection = 'earlier' | 'later';
+export interface ImageTileProps {
+    image: AdminProductImage;
+    index: number;
+    total: number;
+    busy: boolean;
+    labels: ImageLabels;
+    onMove: (direction: MoveDirection) => void;
+    onRemove: () => void;
+    onSaveAlt: (alt: string) => Promise<void>;
+}
+export declare function ImageTile({ image, index, total, busy, labels, onMove, onRemove, onSaveAlt, }: ImageTileProps): import('react').JSX.Element;

package/dist/views/products/product-fields.d.ts

@@ -0,0 +1,12 @@
+import { FieldErrors, ProductForm } from '../../lib/product-form';
+import { ProductLabels } from '../../lib/product-labels';
+export interface FieldGroupProps {
+    form: ProductForm;
+    errors: FieldErrors;
+    labels: ProductLabels;
+    statusLabels: Record<string, string>;
+    categories?: string[];
+    onChange: <K extends keyof ProductForm>(field: K, value: ProductForm[K]) => void;
+}
+export declare function DetailsFields({ form, errors, labels, categories, onChange, }: FieldGroupProps): import('react').JSX.Element;
+export declare function SalesFields({ form, errors, labels, statusLabels, onChange, }: FieldGroupProps): import('react').JSX.Element;

package/dist/views/products/test-helpers.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { AdminProduct } from '@develemit/commerce-contracts';
+import { AdminClient } from '../../client';
+import { AdminProviderProps } from '../../lib/provider';
+export declare function product(overrides?: Partial<AdminProduct>): AdminProduct;
+export declare function withAdmin(client: Partial<AdminClient>, children: ReactNode, props?: Partial<AdminProviderProps>): import('react').JSX.Element;

package/dist/views/products/upload-picker.d.ts

@@ -0,0 +1,7 @@
+import { ImageLabels } from '../../lib/image-labels';
+interface UploadPickerProps {
+    labels: ImageLabels;
+    onFiles: (files: File[]) => void;
+}
+export declare function UploadPicker({ labels, onFiles }: UploadPickerProps): import('react').JSX.Element;
+export {};

package/dist/views/shipping/admin-shipping-rates.d.ts

@@ -0,0 +1,4 @@
+export interface AdminShippingRatesProps {
+    onDirtyChange?: (dirty: boolean) => void;
+}
+export declare function AdminShippingRates({ onDirtyChange }: AdminShippingRatesProps): import('react').JSX.Element;

package/dist/views/shipping/shipping-rate-row.d.ts

@@ -0,0 +1,15 @@
+import { RateDraft, RateErrors } from '../../lib/shipping-rates';
+import { ShippingLabels } from '../../lib/shipping-labels';
+export type RateMove = 'earlier' | 'later';
+export interface ShippingRateRowProps {
+    draft: RateDraft;
+    index: number;
+    total: number;
+    errors: RateErrors;
+    disabled: boolean;
+    labels: ShippingLabels;
+    onChange: (patch: Partial<RateDraft>) => void;
+    onMove: (direction: RateMove) => void;
+    onRemove: () => void;
+}
+export declare function ShippingRateRow({ draft, index, total, errors, disabled, labels, onChange, onMove, onRemove, }: ShippingRateRowProps): import('react').JSX.Element;

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@develemit/commerce-admin",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.4.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client/index.d.ts",
+      "import": "./dist/client/index.js",
+      "default": "./dist/client/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "nx": {
+    "name": "commerce-admin",
+    "tags": [
+      "scope:admin",
+      "type:lib"
+    ]
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@develemit/commerce-contracts": "0.4.0"
+  },
+  "devDependencies": {
+    "@testing-library/user-event": "^14.6.8"
+  }
 }