@datatechsolutions/ui 2.7.139 → 2.7.140

package/dist/{chunk-JYX3ILSA.js → chunk-WXI7OCNY.js}

@@ -656,7 +656,7 @@ function LoadingSpinner({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
-      className: clsx__default.default("h-4 w-4 animate-spin", className),
+      className: clsx__default.default("h-4 w-4 animate-spin motion-reduce:animate-none", className),
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
       viewBox: "0 0 24 24",
@@ -1609,11 +1609,11 @@ var Select = React11.forwardRef(
               cursor-pointer
             `,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "" : "text-slate-400", children: selectedOption?.label || placeholder }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "" : "text-slate-500", children: selectedOption?.label || placeholder }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 solid.ChevronDownIcon,
                 {
-                  className: `h-5 w-5 text-slate-400 transition-transform duration-200
+                  className: `h-5 w-5 text-slate-500 transition-transform duration-200
                 ${isOpen ? "rotate-180" : ""}`
                 }
               )
@@ -1650,7 +1650,7 @@ var Select = React11.forwardRef(
             }
           ) })
         ] }),
-        error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-ios-red", children: error })
+        error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-ios-red", role: "alert", "aria-live": "polite", children: error })
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
@@ -1682,11 +1682,11 @@ var Select = React11.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(
           solid.ChevronDownIcon,
           {
-            className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400 pointer-events-none"
+            className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-500 pointer-events-none"
           }
         )
       ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-ios-red", children: error })
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-ios-red", role: "alert", "aria-live": "polite", children: error })
     ] });
   }
 );
@@ -1734,13 +1734,13 @@ function DropdownSelect({
           ${error ? "border-ios-red ring-4 ring-ios-red/10" : ""}
         `,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "" : "text-slate-400", children: selectedOption?.label || placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "" : "text-slate-500", children: selectedOption?.label || placeholder }),
           /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.div,
             {
               animate: { rotate: isOpen ? 180 : 0 },
               transition: { duration: 0.2 },
-              children: /* @__PURE__ */ jsxRuntime.jsx(solid.ChevronDownIcon, { className: "h-5 w-5 text-slate-400" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(solid.ChevronDownIcon, { className: "h-5 w-5 text-slate-500" })
             }
           )
         ]
@@ -1784,7 +1784,7 @@ function DropdownSelect({
         }
       )
     ] }) }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-ios-red", children: error })
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-ios-red", role: "alert", "aria-live": "polite", children: error })
   ] });
 }
 var sizes = {
@@ -4349,7 +4349,7 @@ function TableSkeletonRow({
         "div",
         {
           className: clsx__default.default(
-            "h-4 rounded bg-slate-200 dark:bg-slate-700 animate-pulse",
+            "h-4 rounded bg-slate-200 dark:bg-slate-700 animate-pulse motion-reduce:animate-none",
             i === 0 ? "w-32" : i === columns - 1 ? "w-16" : "w-24"
           )
         }
@@ -5030,7 +5030,7 @@ function DynamicIslandNotification({
           icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-8 w-8 rounded-full ${styles2.iconBg} flex items-center justify-center shrink-0`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-5 text-white", children: icon }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold truncate", children: title }),
-            message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 truncate", children: message })
+            message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 truncate", children: message })
           ] })
         ] })
       ),
@@ -5041,7 +5041,7 @@ function DynamicIslandNotification({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
             appName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-[11px] uppercase tracking-wide font-medium ${styles2.accentColor}`, children: appName }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[15px] font-semibold leading-tight", children: title }),
-            message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] text-gray-400 mt-0.5 truncate", children: message })
+            message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] text-gray-500 mt-0.5 truncate", children: message })
           ] })
         ] })
       )
@@ -5158,7 +5158,7 @@ function NotificationBellButton() {
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BellIcon, { className: "h-5 w-5" }),
         totalCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute top-1 right-1 flex h-2 w-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping motion-reduce:animate-none absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-indigo-500" })
         ] }) : null
       ]
@@ -5265,7 +5265,7 @@ function NotificationDrawer({
                     {
                       type: "button",
                       onClick: () => onRemove(item.id),
-                      className: "absolute right-2.5 top-2.5 rounded-lg p-1 text-gray-300 opacity-0 transition-all group-hover:opacity-100 hover:text-gray-500 active:scale-95 dark:text-gray-600 dark:hover:text-gray-400",
+                      className: "absolute right-2.5 top-2.5 rounded-lg p-1 text-gray-300 opacity-0 transition-all group-hover:opacity-100 group-focus-within:opacity-100 hover:text-gray-500 active:scale-95 dark:text-gray-600 dark:hover:text-gray-400",
                       "aria-label": t("dismiss"),
                       children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.XMarkIcon, { className: "h-3.5 w-3.5" })
                     }
@@ -5470,7 +5470,7 @@ var StatusBadge = React11.forwardRef(function StatusBadge2({ status, label, size
         "data-testid": `status-badge-${status}`,
         className: `inline-flex items-center gap-1.5 rounded-full border font-semibold backdrop-blur-sm ${SIZE_STYLES[size]} ${toneStyle.container} ${className}`,
         children: [
-          IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `h-3 w-3 ${configuredStatus.animateIcon ? "animate-spin" : ""}` }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-2 w-2 rounded-full ${toneStyle.dot}` }),
+          IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `h-3 w-3 ${configuredStatus.animateIcon ? "animate-spin motion-reduce:animate-none" : ""}` }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-2 w-2 rounded-full ${toneStyle.dot}` }),
           resolvedLabel2
         ]
       }
@@ -6744,12 +6744,13 @@ function wrapperClass(error) {
     error ? "focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-red-400/30" : "focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500 dark:focus-within:ring-offset-gray-900"
   ].join(" ");
 }
-function FieldMeta({ hint, error }) {
+function FieldMeta({ hint, error, errorId, hintId }) {
   if (!hint && !error) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
     {
-      className: `mt-1.5 text-xs ${error ? "text-red-500" : "text-gray-500 dark:text-gray-400"}`,
+      id: error ? errorId : hintId,
+      className: `mt-1.5 text-xs ${error ? "text-red-500" : "text-slate-600 dark:text-gray-400"}`,
       ...error ? { role: "alert", "aria-live": "polite" } : {},
       children: error ?? hint
     }
@@ -6766,8 +6767,13 @@ function FormInput({
   onValueChange,
   ...props
 }) {
+  const autoId = React11.useId();
+  const inputId = props.id ?? autoId;
+  const errorId = `${inputId}-error`;
+  const hintId = `${inputId}-hint`;
+  const describedBy = error ? errorId : hint ? hintId : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": label ? `field-${label.toLowerCase().replace(/\s+/g, "-")}` : "form-field", children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `mb-1.5 block font-medium text-gray-500 dark:text-gray-400 ${labelClasses[inputSize]}`, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: `mb-1.5 block font-medium text-gray-500 dark:text-gray-400 ${labelClasses[inputSize]}`, children: [
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-red-500", children: "*" }) : null
     ] }) : null,
@@ -6777,12 +6783,16 @@ function FormInput({
         "input",
         {
           ...props,
-          className: "w-full bg-transparent text-gray-900 placeholder:text-gray-400 focus:outline-none dark:text-white dark:placeholder:text-gray-500",
+          id: inputId,
+          required,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": describedBy,
+          className: "w-full bg-transparent text-gray-900 placeholder:text-slate-500 focus:outline-none dark:text-white dark:placeholder:text-gray-500",
           onChange: (event) => onValueChange?.(event.target.value)
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(FieldMeta, { hint, error })
+    /* @__PURE__ */ jsxRuntime.jsx(FieldMeta, { hint, error, errorId, hintId })
   ] });
 }
 function FormTextarea({
@@ -6795,8 +6805,13 @@ function FormTextarea({
   onValueChange,
   ...props
 }) {
+  const autoId = React11.useId();
+  const inputId = props.id ?? autoId;
+  const errorId = `${inputId}-error`;
+  const hintId = `${inputId}-hint`;
+  const describedBy = error ? errorId : hint ? hintId : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": label ? `field-${label.toLowerCase().replace(/\s+/g, "-")}` : "form-field", children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `mb-1.5 block font-medium text-gray-500 dark:text-gray-400 ${labelClasses[inputSize]}`, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: `mb-1.5 block font-medium text-gray-500 dark:text-gray-400 ${labelClasses[inputSize]}`, children: [
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-red-500", children: "*" }) : null
     ] }) : null,
@@ -6804,11 +6819,15 @@ function FormTextarea({
       "textarea",
       {
         ...props,
-        className: `w-full resize-y bg-transparent px-3.5 py-2.5 text-gray-900 placeholder:text-gray-400 focus:outline-none dark:text-white dark:placeholder:text-gray-500 ${className}`,
+        id: inputId,
+        required,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": describedBy,
+        className: `w-full resize-y bg-transparent px-3.5 py-2.5 text-gray-900 placeholder:text-slate-500 focus:outline-none dark:text-white dark:placeholder:text-gray-500 ${className}`,
         onChange: (event) => onValueChange?.(event.target.value)
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(FieldMeta, { hint, error })
+    /* @__PURE__ */ jsxRuntime.jsx(FieldMeta, { hint, error, errorId, hintId })
   ] });
 }
 var priceSizeConfig = {
@@ -6840,9 +6859,14 @@ function FormPriceInput({
   max,
   className = ""
 }) {
+  const autoId = React11.useId();
+  const inputId = autoId;
+  const errorId = `${inputId}-error`;
+  const hintId = `${inputId}-hint`;
+  const describedBy = error ? errorId : hint ? hintId : void 0;
   const sizes3 = priceSizeConfig[priceSize ?? defaultPriceSize(inputSize)];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": label ? `field-${label.toLowerCase().replace(/\s+/g, "-")}` : "form-field", children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `mb-1.5 block font-medium text-gray-500 dark:text-gray-400 ${labelClasses[inputSize]}`, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: `mb-1.5 block font-medium text-gray-500 dark:text-gray-400 ${labelClasses[inputSize]}`, children: [
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-red-500", children: "*" }) : null
     ] }) : null,
@@ -6858,19 +6882,24 @@ function FormPriceInput({
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
+          id: inputId,
           type: "number",
           step,
           value,
           onChange: (event) => onValueChange?.(event.target.value),
           placeholder,
           disabled,
+          required,
           min,
           max,
-          className: `w-full bg-transparent tabular-nums ${sizes3.input} ${sizes3.padding} text-gray-900 placeholder:text-gray-400 focus:outline-none dark:text-white dark:placeholder:text-gray-500 ${colorClass ?? ""} ${className}`
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": describedBy,
+          "aria-label": label ? `${label} in ${currencySymbol}` : void 0,
+          className: `w-full bg-transparent tabular-nums ${sizes3.input} ${sizes3.padding} text-gray-900 placeholder:text-slate-500 focus:outline-none dark:text-white dark:placeholder:text-gray-500 ${colorClass ?? ""} ${className}`
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(FieldMeta, { hint, error })
+    /* @__PURE__ */ jsxRuntime.jsx(FieldMeta, { hint, error, errorId, hintId })
   ] });
 }
 function FormSelect({
@@ -6884,8 +6913,13 @@ function FormSelect({
   options,
   ...props
 }) {
+  const autoId = React11.useId();
+  const inputId = props.id ?? autoId;
+  const errorId = `${inputId}-error`;
+  const hintId = `${inputId}-hint`;
+  const describedBy = error ? errorId : hint ? hintId : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": label ? `field-${label.toLowerCase().replace(/\s+/g, "-")}` : "form-field", children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `mb-1.5 block font-medium text-gray-500 dark:text-gray-400 ${labelClasses[inputSize]}`, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: `mb-1.5 block font-medium text-gray-500 dark:text-gray-400 ${labelClasses[inputSize]}`, children: [
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-red-500", children: "*" }) : null
     ] }) : null,
@@ -6893,12 +6927,16 @@ function FormSelect({
       "select",
       {
         ...props,
+        id: inputId,
+        required,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": describedBy,
         className: `w-full bg-transparent ${sizeClasses3[inputSize]} text-gray-900 focus:outline-none dark:text-white ${className}`,
         onChange: (event) => onValueChange?.(event.target.value),
         children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(FieldMeta, { hint, error })
+    /* @__PURE__ */ jsxRuntime.jsx(FieldMeta, { hint, error, errorId, hintId })
   ] });
 }
 var Form = React11__namespace.default.forwardRef(
@@ -7080,7 +7118,7 @@ function BaseForm({
           color: "ios-glass-blue",
           disabled: isLoading || submitDisabled,
           children: [
-            isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }),
+            isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-4 w-4 animate-spin motion-reduce:animate-none rounded-full border-2 border-white border-t-transparent" }),
             submitLabel
           ]
         }
@@ -7401,7 +7439,7 @@ function StepNavigationButtons({
         onClick: onContinue,
         className: `${CONTINUE_BUTTON_CLASSES}${!onBack ? " w-full" : ""}`,
         children: isLoading && showSpinner ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-4 w-4 animate-spin motion-reduce:animate-none rounded-full border-2 border-white border-t-transparent" }),
           displayLabel
         ] }) : displayLabel
       }
@@ -7445,7 +7483,7 @@ function SearchFilterToolbar({
             placeholder,
             "aria-label": label,
             "data-testid": "search-input",
-            className: "min-w-[100px] flex-1 bg-transparent py-1 text-base text-gray-900 outline-none placeholder:text-slate-400 dark:text-white dark:placeholder:text-slate-500"
+            className: "min-w-[100px] flex-1 bg-transparent py-1 text-base text-gray-900 outline-none focus-visible:ring-2 focus-visible:ring-blue-500 placeholder:text-slate-400 dark:text-white dark:placeholder:text-slate-500"
           }
         )
       ] }),
@@ -8196,8 +8234,8 @@ function AnalysisSkeleton() {
 }
 
 // src/components/skeletons/shimmer.tsx
-var shimmerClass = "bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 animate-shimmer bg-[length:200%_100%]";
-var shimmerWhiteClass = "bg-white/20 animate-pulse";
+var shimmerClass = "bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 animate-shimmer motion-reduce:animate-none bg-[length:200%_100%]";
+var shimmerWhiteClass = "bg-white/20 animate-pulse motion-reduce:animate-none";
 function SectionHeaderSkeleton() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-10 w-10 rounded-lg ${shimmerClass}` }),
@@ -9013,7 +9051,7 @@ function DynamicIslandConfirm({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-2 py-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-9 w-9 shrink-0 rounded-xl ${iconBackground} flex items-center justify-center`, children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.TrashIcon, { className: "h-5 w-5 text-white" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] uppercase tracking-wide text-gray-400", children: appName }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] uppercase tracking-wide text-gray-500", children: appName }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { id: "dynamic-island-title", className: "text-sm font-semibold", children: title })
         ] })
       ] }),
@@ -9686,7 +9724,7 @@ function BrandedLoader({
             "div",
             {
               className: clsx__default.default(
-                "absolute -inset-3 animate-ping rounded-3xl opacity-20",
+                "absolute -inset-3 animate-ping motion-reduce:animate-none rounded-3xl opacity-20",
                 `bg-gradient-to-br ${gradient}`
               ),
               style: { animationDuration: "2s" }
@@ -9698,7 +9736,7 @@ function BrandedLoader({
               className: clsx__default.default(
                 "absolute -inset-1.5 rounded-[22px] ring-2",
                 accentRing,
-                "animate-pulse"
+                "animate-pulse motion-reduce:animate-none"
               ),
               style: { animationDuration: "1.5s" }
             }
@@ -9735,7 +9773,7 @@ function BrandedLoader({
               className: clsx__default.default(
                 "h-1.5 w-1.5 rounded-full",
                 `bg-gradient-to-br ${gradient}`,
-                "animate-bounce"
+                "animate-bounce motion-reduce:animate-none"
               ),
               style: { animationDelay: `${i * 150}ms`, animationDuration: "0.8s" }
             },
@@ -9750,7 +9788,7 @@ function BrandedLoader({
               className: clsx__default.default(
                 "h-2 w-2 rounded-full",
                 `bg-gradient-to-br ${gradient}`,
-                "animate-bounce"
+                "animate-bounce motion-reduce:animate-none"
               ),
               style: { animationDelay: `${i * 150}ms`, animationDuration: "0.8s" }
             },
@@ -12800,7 +12838,7 @@ function DataPagination({
           value: params?.limit ?? effectivePageSize,
           onChange: (event) => handlePageSizeChange(event.target.value),
           disabled: loading,
-          className: "rounded-xl liquid-surface px-2 py-1.5 text-xs font-medium text-slate-700 outline-none dark:text-slate-300",
+          className: "rounded-xl liquid-surface px-2 py-1.5 text-xs font-medium text-slate-700 outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:text-slate-300",
           children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: size, children: size }, size))
         }
       ),
@@ -12819,7 +12857,7 @@ function DataPagination({
           (page, index) => page === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: "inline-flex h-9 w-6 items-center justify-center text-xs text-slate-400",
+              className: "inline-flex h-9 w-6 items-center justify-center text-xs text-slate-500",
               children: "\u2026"
             },
             `ellipsis-${index}`
@@ -14019,6 +14057,20 @@ function PlatformShell({
     extras
   ] });
 }
+function SkipToContent({
+  targetId = "main-content",
+  label = "Skip to main content"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href: `#${targetId}`,
+      className: "sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[9999] focus:rounded-lg focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-indigo-600 focus:shadow-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none dark:focus:bg-gray-800 dark:focus:text-indigo-400",
+      "data-testid": "skip-to-content",
+      children: label
+    }
+  );
+}
 
 Object.defineProperty(exports, "LOCALE_FLAGS", {
   enumerable: true,
@@ -14238,6 +14290,7 @@ exports.ServerErrorPage = ServerErrorPage;
 exports.SettingsDialog = SettingsDialog;
 exports.SettingsModal = SettingsModal;
 exports.Sheet = Sheet;
+exports.SkipToContent = SkipToContent;
 exports.SocialLoginButtons = SocialLoginButtons;
 exports.SortableTableHeader = SortableTableHeader;
 exports.Spinner = Spinner;
@@ -14358,5 +14411,5 @@ exports.useGeoMapState = useGeoMapState;
 exports.useNotifications = useNotifications;
 exports.usePlatformShellStore = usePlatformShellStore;
 exports.usePullToRefresh = usePullToRefresh;
-//# sourceMappingURL=chunk-JYX3ILSA.js.map
-//# sourceMappingURL=chunk-JYX3ILSA.js.map
+//# sourceMappingURL=chunk-WXI7OCNY.js.map
+//# sourceMappingURL=chunk-WXI7OCNY.js.map