@djangocfg/ui-core 2.1.571 → 2.1.573

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.571",
+  "version": "2.1.573",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -130,7 +130,7 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.571",
+    "@djangocfg/i18n": "^2.1.573",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -206,9 +206,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/eslint-config": "^2.1.571",
-    "@djangocfg/i18n": "^2.1.571",
-    "@djangocfg/typescript-config": "^2.1.571",
+    "@djangocfg/eslint-config": "^2.1.573",
+    "@djangocfg/i18n": "^2.1.573",
+    "@djangocfg/typescript-config": "^2.1.573",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",

package/src/components/data/relative-time-card/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import * as React from "react";
-import moment from "moment";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../../lib/utils";
 
@@ -31,13 +30,16 @@ const relativeTimeCardVariants = cva(
 interface RelativeTimeCardProps
   extends React.HTMLAttributes<HTMLSpanElement>,
     VariantProps<typeof relativeTimeCardVariants> {
-  /** Date value — accepts Date, string in any format, number (timestamp), or Moment */
-  date: Date | string | number | moment.Moment;
-  /** Input format hint if date is a string (e.g. "DD.MM.YYYY HH:mm"). Auto-detected if omitted. */
+  /** Date value — a `Date`, an ISO 8601 string, or a timestamp in milliseconds */
+  date: DateInput;
+  /**
+   * @deprecated Ignored. Dates are parsed as ISO 8601; arbitrary input patterns
+   * went away with moment. Kept so existing call sites still type-check.
+   */
   inputFormat?: string;
   /** Display format: relative | auto | datetime | custom */
   format?: "relative" | "auto" | "datetime" | "custom";
-  /** Custom output format string (moment format). Used when format="custom" */
+  /** Output pattern for `format="custom"`. Supports `YYYY MM DD HH mm ss`. */
   outputFormat?: string;
   /** Update interval in ms for relative format. @default 60000 */
   updateInterval?: number;
@@ -51,65 +53,117 @@ interface RelativeTimeCardProps
   utc?: boolean;
 }
 
-function parseDate(
-  value: Date | string | number | moment.Moment,
-  inputFormat?: string,
-  useUtc: boolean = true
-): moment.Moment {
-  if (moment.isMoment(value)) {
-    return useUtc ? value.utc() : value.local();
-  }
-
-  const m = useUtc ? moment.utc : moment;
-
-  if (value instanceof Date) {
-    return m(value);
-  }
-
-  if (typeof value === "number") {
-    return m(value);
-  }
-
+/* Built on `Intl`, not moment.
+ *
+ * moment bundles 137 locale files and this module was the last thing importing
+ * it here. Because the package entry is `export *` under a file-level
+ * `'use client'`, that cost reached every consumer of the barrel, not just the
+ * ones rendering a date: measured on the MLS Caribbean property pages
+ * 2026-10-17, two 805 KB chunks on every listing, for a component those pages
+ * never render.
+ *
+ * `Intl.RelativeTimeFormat` and `Intl.DateTimeFormat` are in every browser this
+ * package targets, and they localise from the `locale` prop rather than from a
+ * global `moment.locale()` call — which was shared mutable state, so two cards
+ * with different locales fought over it.
+ *
+ * Two deliberate narrowings, both of moment-only behaviour:
+ *   - `inputFormat` no longer parses arbitrary patterns. `Date` accepts ISO
+ *     8601; anything else was already locale-dependent guesswork.
+ *   - `outputFormat` accepts the moment-style tokens this component actually
+ *     shipped with (`YYYY MM DD HH mm ss`), not the full moment grammar.
+ */
+
+type DateInput = Date | string | number;
+
+/** A timestamp with no zone designator is UTC here, as the APIs emit it. */
+function toDate(value: DateInput, useUtc: boolean): Date {
+  if (value instanceof Date) return value;
+  if (typeof value === "number") return new Date(value);
   if (typeof value === "string") {
-    if (inputFormat) {
-      return m(value, inputFormat, true);
-    }
-    return m(value);
+    const iso =
+      useUtc && !/(?:Z|[+-]\d{2}:?\d{2})$/.test(value) ? `${value}Z` : value;
+    return new Date(iso);
   }
-
-  return m();
+  return new Date();
 }
 
-function getRelativeTime(date: moment.Moment, locale: string = "en"): string {
-  moment.locale(locale);
-  return date.fromNow();
+const RELATIVE_UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+  ["year", 365 * 24 * 60 * 60],
+  ["month", 30 * 24 * 60 * 60],
+  ["day", 24 * 60 * 60],
+  ["hour", 60 * 60],
+  ["minute", 60],
+  ["second", 1],
+];
+
+function getRelativeTime(date: Date, locale: string = "en"): string {
+  const seconds = Math.round((date.getTime() - Date.now()) / 1000);
+  const absolute = Math.abs(seconds);
+  const formatter = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+
+  for (const [unit, size] of RELATIVE_UNITS) {
+    if (absolute >= size || unit === "second") {
+      return formatter.format(Math.round(seconds / size), unit);
+    }
+  }
+  return formatter.format(0, "second");
 }
 
-function getAutoFormat(date: moment.Moment, locale: string = "en"): string {
-  moment.locale(locale);
-  const now = moment();
-  const diffHours = now.diff(date, "hours");
-  const diffDays = now.diff(date, "days");
+function getAutoFormat(date: Date, locale: string = "en"): string {
+  const diffHours = (Date.now() - date.getTime()) / 3_600_000;
+  const diffDays = diffHours / 24;
 
   if (diffHours < 24) {
-    return date.format("HH:mm");
+    return new Intl.DateTimeFormat(locale, {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    }).format(date);
   }
   if (diffDays < 7) {
-    return date.format("ddd");
+    return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date);
   }
   if (diffDays < 365) {
-    return date.format("MMM D");
+    return new Intl.DateTimeFormat(locale, {
+      month: "short",
+      day: "numeric",
+    }).format(date);
   }
-  return date.format("MMM D, YYYY");
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  }).format(date);
 }
 
-function getDateTimeFormat(date: moment.Moment, locale: string = "en"): string {
-  moment.locale(locale);
-  return date.format("MMM D, YYYY HH:mm");
+function getDateTimeFormat(date: Date, locale: string = "en"): string {
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  }).format(date);
+}
+
+/** The moment-style tokens this component shipped with, and only those. */
+function applyCustomFormat(date: Date, pattern: string): string {
+  const pad = (n: number) => String(n).padStart(2, "0");
+  const tokens: Record<string, string> = {
+    YYYY: String(date.getFullYear()),
+    MM: pad(date.getMonth() + 1),
+    DD: pad(date.getDate()),
+    HH: pad(date.getHours()),
+    mm: pad(date.getMinutes()),
+    ss: pad(date.getSeconds()),
+  };
+  return pattern.replace(/YYYY|MM|DD|HH|mm|ss/g, (t) => tokens[t] ?? t);
 }
 
 function formatDate(
-  date: moment.Moment,
+  date: Date,
   format: "relative" | "auto" | "datetime" | "custom",
   locale: string,
   outputFormat?: string
@@ -122,8 +176,7 @@ function formatDate(
     case "datetime":
       return getDateTimeFormat(date, locale);
     case "custom":
-      moment.locale(locale);
-      return date.format(outputFormat || "YYYY-MM-DD HH:mm");
+      return applyCustomFormat(date, outputFormat || "YYYY-MM-DD HH:mm");
   }
 }
 
@@ -149,10 +202,7 @@ const RelativeTimeCard = React.forwardRef<
     },
     ref
   ) => {
-    const dateObj = React.useMemo(
-      () => parseDate(date, inputFormat, utc),
-      [date, inputFormat, utc]
-    );
+    const dateObj = React.useMemo(() => toDate(date, utc), [date, utc]);
 
     const [display, setDisplay] = React.useState(() =>
       formatDate(dateObj, format, locale, outputFormat)
@@ -167,8 +217,16 @@ const RelativeTimeCard = React.forwardRef<
       return () => clearInterval(id);
     }, [dateObj, format, locale, outputFormat, updateInterval]);
 
-    const isoString = dateObj.toISOString();
-    const title = dateObj.format("LLLL");
+    // An invalid date would throw from `toISOString`, where moment returned
+    // null and rendered "Invalid date". Both attributes are omitted instead.
+    const valid = !Number.isNaN(dateObj.getTime());
+    const isoString = valid ? dateObj.toISOString() : undefined;
+    const title = valid
+      ? new Intl.DateTimeFormat(locale, {
+          dateStyle: "full",
+          timeStyle: "short",
+        }).format(dateObj)
+      : undefined;
 
     return (
       <time

package/src/components/index.ts

@@ -286,8 +286,8 @@ export { Primitive, dispatchDiscreteCustomEvent } from './specialized/primitive'
 export type { PrimitivePropsWithRef } from './specialized/primitive';
 export { ImageWithFallback } from './specialized/image-with-fallback';
 export type { ImageWithFallbackProps } from './specialized/image-with-fallback';
-export { Flag, LanguageFlag, LANGUAGE_TO_COUNTRY, getLanguageCountryCode, FLAG_COMPONENTS } from './specialized/flag';
-export type { FlagProps, LanguageFlagProps, FlagSvgComponent } from './specialized/flag';
+export { Flag, LanguageFlag, LANGUAGE_TO_COUNTRY, getLanguageCountryCode, FLAG_LOADERS } from './specialized/flag';
+export type { FlagProps, LanguageFlagProps, FlagLoader } from './specialized/flag';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Effects

package/src/components/specialized/flag/Flag.tsx

@@ -4,13 +4,11 @@ import * as React from 'react';
 
 import { cn } from '../../../lib/utils';
 
-import { FLAG_COMPONENTS } from './flag-map';
+import { FLAG_LOADERS } from './flag-map';
 import { getLanguageCountryCode } from './language-to-country';
 
 /**
- * Presentational attributes only. The underlying `country-flag-icons`
- * components type their handlers against an element that cannot exist, so no
- * event handler passed here could be given an honest signature.
+ * Presentational attributes only.
  */
 export interface FlagProps {
   /** ISO 3166-1 alpha-2 country code (e.g. `'US'`, `'JP'`). Case-insensitive. */
@@ -23,24 +21,49 @@ export interface FlagProps {
   title?: string;
 }
 
+/** Loaded SVG strings, shared by every `Flag` on the page. */
+const loaded = new Map<string, string>();
+
 /**
- * SVG country flag (3:2 aspect). Renders nothing for unknown country codes
- * — call sites should reserve space if they want a stable layout.
+ * SVG country flag (3:2 aspect), loaded on demand — one small chunk per code.
+ * Renders an empty box of the same size until it arrives, and nothing for an
+ * unknown code.
  */
-export function Flag({ countryCode, rounded, className, ...props }: FlagProps) {
+export function Flag({ countryCode, rounded, className, width, height, title }: FlagProps) {
   const code = countryCode?.toUpperCase();
-  const Component = code ? FLAG_COMPONENTS[code] : undefined;
-  if (!Component) return null;
+  const load = code ? FLAG_LOADERS[code] : undefined;
+  const [svg, setSvg] = React.useState(() => (code ? loaded.get(code) : undefined));
+
+  React.useEffect(() => {
+    if (!code || !load) return;
+    const cached = loaded.get(code);
+    if (cached) {
+      setSvg(cached);
+      return;
+    }
+    let live = true;
+    load().then((m) => {
+      loaded.set(code, m.default);
+      if (live) setSvg(m.default);
+    });
+    return () => {
+      live = false;
+    };
+  }, [code, load]);
+
+  if (!load) return null;
   return (
-    <Component
+    <span
       className={cn(
-        'inline-block shrink-0 select-none',
+        'inline-block shrink-0 select-none [&>svg]:block [&>svg]:h-full [&>svg]:w-full',
         rounded && 'overflow-hidden rounded-[2px]',
         className,
       )}
+      style={{ width, height }}
+      title={title}
       aria-hidden="true"
-      focusable={false}
-      {...props}
+      // Static SVG from `country-flag-icons`, never user input.
+      dangerouslySetInnerHTML={svg ? { __html: svg } : undefined}
     />
   );
 }

package/src/components/specialized/flag/country-flag-strings.d.ts

@@ -0,0 +1,5 @@
+// `country-flag-icons` ships no types for its per-flag string modules.
+declare module 'country-flag-icons/string/3x2/*' {
+  const svg: string;
+  export default svg;
+}

package/src/components/specialized/flag/flag-map.ts

@@ -1,28 +1,275 @@
+/// <reference path="./country-flag-strings.d.ts" />
 /**
- * Static map: ISO 3166-1 alpha-2 country code → SVG React component.
+ * ISO 3166-1 alpha-2 country code → a loader for that one flag's SVG.
  *
- * Re-exports every flag from `country-flag-icons` (~270 entries) so the
- * `Flag` component covers every consumer — locale switchers, phone-input
- * country picker, country select, etc. Tree-shaking keeps unused flags out
- * of the final bundle when consumers reach for `<Flag countryCode>`
- * directly with a constant code.
+ * One dynamic import per flag, so a page pays for the flags it shows. The
+ * previous static map spread `import * as Flags` into an object, which no
+ * bundler can tree-shake: every app that reached `Flag` (a locale switcher
+ * with four languages) shipped all ~270 flags, ~250 KB raw.
+ *
+ * Generated from `country-flag-icons`' own `exports` (`./string/3x2/*`);
+ * regenerate when that package adds a code. Subdivision flags (`GB_ENG`,
+ * `ES_CT`, …) have no per-file module there, so they are not covered.
  */
 
-import * as Flags from 'country-flag-icons/react/3x2';
-
-/**
- * `country-flag-icons` declares its components against `HTMLSVGElement` — its
- * own `HTMLElement & SVGElement` intersection, which no DOM node satisfies. Its
- * event-handler props are consequently uncallable with a real SVG event, so
- * `FlagProps` exposes only the presentational attributes `Flag` forwards; a
- * handler would have to be typed against an element that cannot exist.
- */
-export type FlagSvgComponent = (typeof Flags)[keyof typeof Flags];
+export type FlagLoader = () => Promise<{ default: string }>;
 
-/**
- * Keyed by country code rather than indexed off the namespace object, because
- * the lookup code is a runtime string and a module namespace admits only its
- * literal export names.
- */
-export const FLAG_COMPONENTS: Record<string, FlagSvgComponent> =
-  Object.fromEntries(Object.entries(Flags));
+export const FLAG_LOADERS: Record<string, FlagLoader> = {
+  AC: () => import('country-flag-icons/string/3x2/AC'),
+  AD: () => import('country-flag-icons/string/3x2/AD'),
+  AE: () => import('country-flag-icons/string/3x2/AE'),
+  AF: () => import('country-flag-icons/string/3x2/AF'),
+  AG: () => import('country-flag-icons/string/3x2/AG'),
+  AI: () => import('country-flag-icons/string/3x2/AI'),
+  AL: () => import('country-flag-icons/string/3x2/AL'),
+  AM: () => import('country-flag-icons/string/3x2/AM'),
+  AO: () => import('country-flag-icons/string/3x2/AO'),
+  AQ: () => import('country-flag-icons/string/3x2/AQ'),
+  AR: () => import('country-flag-icons/string/3x2/AR'),
+  AS: () => import('country-flag-icons/string/3x2/AS'),
+  AT: () => import('country-flag-icons/string/3x2/AT'),
+  AU: () => import('country-flag-icons/string/3x2/AU'),
+  AW: () => import('country-flag-icons/string/3x2/AW'),
+  AX: () => import('country-flag-icons/string/3x2/AX'),
+  AZ: () => import('country-flag-icons/string/3x2/AZ'),
+  BA: () => import('country-flag-icons/string/3x2/BA'),
+  BB: () => import('country-flag-icons/string/3x2/BB'),
+  BD: () => import('country-flag-icons/string/3x2/BD'),
+  BE: () => import('country-flag-icons/string/3x2/BE'),
+  BF: () => import('country-flag-icons/string/3x2/BF'),
+  BG: () => import('country-flag-icons/string/3x2/BG'),
+  BH: () => import('country-flag-icons/string/3x2/BH'),
+  BI: () => import('country-flag-icons/string/3x2/BI'),
+  BJ: () => import('country-flag-icons/string/3x2/BJ'),
+  BL: () => import('country-flag-icons/string/3x2/BL'),
+  BM: () => import('country-flag-icons/string/3x2/BM'),
+  BN: () => import('country-flag-icons/string/3x2/BN'),
+  BO: () => import('country-flag-icons/string/3x2/BO'),
+  BQ: () => import('country-flag-icons/string/3x2/BQ'),
+  BR: () => import('country-flag-icons/string/3x2/BR'),
+  BS: () => import('country-flag-icons/string/3x2/BS'),
+  BT: () => import('country-flag-icons/string/3x2/BT'),
+  BV: () => import('country-flag-icons/string/3x2/BV'),
+  BW: () => import('country-flag-icons/string/3x2/BW'),
+  BY: () => import('country-flag-icons/string/3x2/BY'),
+  BZ: () => import('country-flag-icons/string/3x2/BZ'),
+  CA: () => import('country-flag-icons/string/3x2/CA'),
+  CC: () => import('country-flag-icons/string/3x2/CC'),
+  CD: () => import('country-flag-icons/string/3x2/CD'),
+  CF: () => import('country-flag-icons/string/3x2/CF'),
+  CG: () => import('country-flag-icons/string/3x2/CG'),
+  CH: () => import('country-flag-icons/string/3x2/CH'),
+  CI: () => import('country-flag-icons/string/3x2/CI'),
+  CK: () => import('country-flag-icons/string/3x2/CK'),
+  CL: () => import('country-flag-icons/string/3x2/CL'),
+  CM: () => import('country-flag-icons/string/3x2/CM'),
+  CN: () => import('country-flag-icons/string/3x2/CN'),
+  CO: () => import('country-flag-icons/string/3x2/CO'),
+  CR: () => import('country-flag-icons/string/3x2/CR'),
+  CU: () => import('country-flag-icons/string/3x2/CU'),
+  CV: () => import('country-flag-icons/string/3x2/CV'),
+  CW: () => import('country-flag-icons/string/3x2/CW'),
+  CX: () => import('country-flag-icons/string/3x2/CX'),
+  CY: () => import('country-flag-icons/string/3x2/CY'),
+  CZ: () => import('country-flag-icons/string/3x2/CZ'),
+  DE: () => import('country-flag-icons/string/3x2/DE'),
+  DJ: () => import('country-flag-icons/string/3x2/DJ'),
+  DK: () => import('country-flag-icons/string/3x2/DK'),
+  DM: () => import('country-flag-icons/string/3x2/DM'),
+  DO: () => import('country-flag-icons/string/3x2/DO'),
+  DZ: () => import('country-flag-icons/string/3x2/DZ'),
+  EC: () => import('country-flag-icons/string/3x2/EC'),
+  EE: () => import('country-flag-icons/string/3x2/EE'),
+  EG: () => import('country-flag-icons/string/3x2/EG'),
+  EH: () => import('country-flag-icons/string/3x2/EH'),
+  ER: () => import('country-flag-icons/string/3x2/ER'),
+  ES: () => import('country-flag-icons/string/3x2/ES'),
+  ET: () => import('country-flag-icons/string/3x2/ET'),
+  EU: () => import('country-flag-icons/string/3x2/EU'),
+  FI: () => import('country-flag-icons/string/3x2/FI'),
+  FJ: () => import('country-flag-icons/string/3x2/FJ'),
+  FK: () => import('country-flag-icons/string/3x2/FK'),
+  FM: () => import('country-flag-icons/string/3x2/FM'),
+  FO: () => import('country-flag-icons/string/3x2/FO'),
+  FR: () => import('country-flag-icons/string/3x2/FR'),
+  GA: () => import('country-flag-icons/string/3x2/GA'),
+  GB: () => import('country-flag-icons/string/3x2/GB'),
+  GD: () => import('country-flag-icons/string/3x2/GD'),
+  GE: () => import('country-flag-icons/string/3x2/GE'),
+  GF: () => import('country-flag-icons/string/3x2/GF'),
+  GG: () => import('country-flag-icons/string/3x2/GG'),
+  GH: () => import('country-flag-icons/string/3x2/GH'),
+  GI: () => import('country-flag-icons/string/3x2/GI'),
+  GL: () => import('country-flag-icons/string/3x2/GL'),
+  GM: () => import('country-flag-icons/string/3x2/GM'),
+  GN: () => import('country-flag-icons/string/3x2/GN'),
+  GP: () => import('country-flag-icons/string/3x2/GP'),
+  GQ: () => import('country-flag-icons/string/3x2/GQ'),
+  GR: () => import('country-flag-icons/string/3x2/GR'),
+  GS: () => import('country-flag-icons/string/3x2/GS'),
+  GT: () => import('country-flag-icons/string/3x2/GT'),
+  GU: () => import('country-flag-icons/string/3x2/GU'),
+  GW: () => import('country-flag-icons/string/3x2/GW'),
+  GY: () => import('country-flag-icons/string/3x2/GY'),
+  HK: () => import('country-flag-icons/string/3x2/HK'),
+  HM: () => import('country-flag-icons/string/3x2/HM'),
+  HN: () => import('country-flag-icons/string/3x2/HN'),
+  HR: () => import('country-flag-icons/string/3x2/HR'),
+  HT: () => import('country-flag-icons/string/3x2/HT'),
+  HU: () => import('country-flag-icons/string/3x2/HU'),
+  IC: () => import('country-flag-icons/string/3x2/IC'),
+  ID: () => import('country-flag-icons/string/3x2/ID'),
+  IE: () => import('country-flag-icons/string/3x2/IE'),
+  IL: () => import('country-flag-icons/string/3x2/IL'),
+  IM: () => import('country-flag-icons/string/3x2/IM'),
+  IN: () => import('country-flag-icons/string/3x2/IN'),
+  IO: () => import('country-flag-icons/string/3x2/IO'),
+  IQ: () => import('country-flag-icons/string/3x2/IQ'),
+  IR: () => import('country-flag-icons/string/3x2/IR'),
+  IS: () => import('country-flag-icons/string/3x2/IS'),
+  IT: () => import('country-flag-icons/string/3x2/IT'),
+  JE: () => import('country-flag-icons/string/3x2/JE'),
+  JM: () => import('country-flag-icons/string/3x2/JM'),
+  JO: () => import('country-flag-icons/string/3x2/JO'),
+  JP: () => import('country-flag-icons/string/3x2/JP'),
+  KE: () => import('country-flag-icons/string/3x2/KE'),
+  KG: () => import('country-flag-icons/string/3x2/KG'),
+  KH: () => import('country-flag-icons/string/3x2/KH'),
+  KI: () => import('country-flag-icons/string/3x2/KI'),
+  KM: () => import('country-flag-icons/string/3x2/KM'),
+  KN: () => import('country-flag-icons/string/3x2/KN'),
+  KP: () => import('country-flag-icons/string/3x2/KP'),
+  KR: () => import('country-flag-icons/string/3x2/KR'),
+  KW: () => import('country-flag-icons/string/3x2/KW'),
+  KY: () => import('country-flag-icons/string/3x2/KY'),
+  KZ: () => import('country-flag-icons/string/3x2/KZ'),
+  LA: () => import('country-flag-icons/string/3x2/LA'),
+  LB: () => import('country-flag-icons/string/3x2/LB'),
+  LC: () => import('country-flag-icons/string/3x2/LC'),
+  LI: () => import('country-flag-icons/string/3x2/LI'),
+  LK: () => import('country-flag-icons/string/3x2/LK'),
+  LR: () => import('country-flag-icons/string/3x2/LR'),
+  LS: () => import('country-flag-icons/string/3x2/LS'),
+  LT: () => import('country-flag-icons/string/3x2/LT'),
+  LU: () => import('country-flag-icons/string/3x2/LU'),
+  LV: () => import('country-flag-icons/string/3x2/LV'),
+  LY: () => import('country-flag-icons/string/3x2/LY'),
+  MA: () => import('country-flag-icons/string/3x2/MA'),
+  MC: () => import('country-flag-icons/string/3x2/MC'),
+  MD: () => import('country-flag-icons/string/3x2/MD'),
+  ME: () => import('country-flag-icons/string/3x2/ME'),
+  MF: () => import('country-flag-icons/string/3x2/MF'),
+  MG: () => import('country-flag-icons/string/3x2/MG'),
+  MH: () => import('country-flag-icons/string/3x2/MH'),
+  MK: () => import('country-flag-icons/string/3x2/MK'),
+  ML: () => import('country-flag-icons/string/3x2/ML'),
+  MM: () => import('country-flag-icons/string/3x2/MM'),
+  MN: () => import('country-flag-icons/string/3x2/MN'),
+  MO: () => import('country-flag-icons/string/3x2/MO'),
+  MP: () => import('country-flag-icons/string/3x2/MP'),
+  MQ: () => import('country-flag-icons/string/3x2/MQ'),
+  MR: () => import('country-flag-icons/string/3x2/MR'),
+  MS: () => import('country-flag-icons/string/3x2/MS'),
+  MT: () => import('country-flag-icons/string/3x2/MT'),
+  MU: () => import('country-flag-icons/string/3x2/MU'),
+  MV: () => import('country-flag-icons/string/3x2/MV'),
+  MW: () => import('country-flag-icons/string/3x2/MW'),
+  MX: () => import('country-flag-icons/string/3x2/MX'),
+  MY: () => import('country-flag-icons/string/3x2/MY'),
+  MZ: () => import('country-flag-icons/string/3x2/MZ'),
+  NA: () => import('country-flag-icons/string/3x2/NA'),
+  NC: () => import('country-flag-icons/string/3x2/NC'),
+  NE: () => import('country-flag-icons/string/3x2/NE'),
+  NF: () => import('country-flag-icons/string/3x2/NF'),
+  NG: () => import('country-flag-icons/string/3x2/NG'),
+  NI: () => import('country-flag-icons/string/3x2/NI'),
+  NL: () => import('country-flag-icons/string/3x2/NL'),
+  NO: () => import('country-flag-icons/string/3x2/NO'),
+  NP: () => import('country-flag-icons/string/3x2/NP'),
+  NR: () => import('country-flag-icons/string/3x2/NR'),
+  NU: () => import('country-flag-icons/string/3x2/NU'),
+  NZ: () => import('country-flag-icons/string/3x2/NZ'),
+  OM: () => import('country-flag-icons/string/3x2/OM'),
+  PA: () => import('country-flag-icons/string/3x2/PA'),
+  PE: () => import('country-flag-icons/string/3x2/PE'),
+  PF: () => import('country-flag-icons/string/3x2/PF'),
+  PG: () => import('country-flag-icons/string/3x2/PG'),
+  PH: () => import('country-flag-icons/string/3x2/PH'),
+  PK: () => import('country-flag-icons/string/3x2/PK'),
+  PL: () => import('country-flag-icons/string/3x2/PL'),
+  PM: () => import('country-flag-icons/string/3x2/PM'),
+  PN: () => import('country-flag-icons/string/3x2/PN'),
+  PR: () => import('country-flag-icons/string/3x2/PR'),
+  PS: () => import('country-flag-icons/string/3x2/PS'),
+  PT: () => import('country-flag-icons/string/3x2/PT'),
+  PW: () => import('country-flag-icons/string/3x2/PW'),
+  PY: () => import('country-flag-icons/string/3x2/PY'),
+  QA: () => import('country-flag-icons/string/3x2/QA'),
+  RE: () => import('country-flag-icons/string/3x2/RE'),
+  RO: () => import('country-flag-icons/string/3x2/RO'),
+  RS: () => import('country-flag-icons/string/3x2/RS'),
+  RU: () => import('country-flag-icons/string/3x2/RU'),
+  RW: () => import('country-flag-icons/string/3x2/RW'),
+  SA: () => import('country-flag-icons/string/3x2/SA'),
+  SB: () => import('country-flag-icons/string/3x2/SB'),
+  SC: () => import('country-flag-icons/string/3x2/SC'),
+  SD: () => import('country-flag-icons/string/3x2/SD'),
+  SE: () => import('country-flag-icons/string/3x2/SE'),
+  SG: () => import('country-flag-icons/string/3x2/SG'),
+  SH: () => import('country-flag-icons/string/3x2/SH'),
+  SI: () => import('country-flag-icons/string/3x2/SI'),
+  SJ: () => import('country-flag-icons/string/3x2/SJ'),
+  SK: () => import('country-flag-icons/string/3x2/SK'),
+  SL: () => import('country-flag-icons/string/3x2/SL'),
+  SM: () => import('country-flag-icons/string/3x2/SM'),
+  SN: () => import('country-flag-icons/string/3x2/SN'),
+  SO: () => import('country-flag-icons/string/3x2/SO'),
+  SR: () => import('country-flag-icons/string/3x2/SR'),
+  SS: () => import('country-flag-icons/string/3x2/SS'),
+  ST: () => import('country-flag-icons/string/3x2/ST'),
+  SV: () => import('country-flag-icons/string/3x2/SV'),
+  SX: () => import('country-flag-icons/string/3x2/SX'),
+  SY: () => import('country-flag-icons/string/3x2/SY'),
+  SZ: () => import('country-flag-icons/string/3x2/SZ'),
+  TA: () => import('country-flag-icons/string/3x2/TA'),
+  TC: () => import('country-flag-icons/string/3x2/TC'),
+  TD: () => import('country-flag-icons/string/3x2/TD'),
+  TF: () => import('country-flag-icons/string/3x2/TF'),
+  TG: () => import('country-flag-icons/string/3x2/TG'),
+  TH: () => import('country-flag-icons/string/3x2/TH'),
+  TJ: () => import('country-flag-icons/string/3x2/TJ'),
+  TK: () => import('country-flag-icons/string/3x2/TK'),
+  TL: () => import('country-flag-icons/string/3x2/TL'),
+  TM: () => import('country-flag-icons/string/3x2/TM'),
+  TN: () => import('country-flag-icons/string/3x2/TN'),
+  TO: () => import('country-flag-icons/string/3x2/TO'),
+  TR: () => import('country-flag-icons/string/3x2/TR'),
+  TT: () => import('country-flag-icons/string/3x2/TT'),
+  TV: () => import('country-flag-icons/string/3x2/TV'),
+  TW: () => import('country-flag-icons/string/3x2/TW'),
+  TZ: () => import('country-flag-icons/string/3x2/TZ'),
+  UA: () => import('country-flag-icons/string/3x2/UA'),
+  UG: () => import('country-flag-icons/string/3x2/UG'),
+  UM: () => import('country-flag-icons/string/3x2/UM'),
+  US: () => import('country-flag-icons/string/3x2/US'),
+  UY: () => import('country-flag-icons/string/3x2/UY'),
+  UZ: () => import('country-flag-icons/string/3x2/UZ'),
+  VA: () => import('country-flag-icons/string/3x2/VA'),
+  VC: () => import('country-flag-icons/string/3x2/VC'),
+  VE: () => import('country-flag-icons/string/3x2/VE'),
+  VG: () => import('country-flag-icons/string/3x2/VG'),
+  VI: () => import('country-flag-icons/string/3x2/VI'),
+  VN: () => import('country-flag-icons/string/3x2/VN'),
+  VU: () => import('country-flag-icons/string/3x2/VU'),
+  WF: () => import('country-flag-icons/string/3x2/WF'),
+  WS: () => import('country-flag-icons/string/3x2/WS'),
+  XA: () => import('country-flag-icons/string/3x2/XA'),
+  XC: () => import('country-flag-icons/string/3x2/XC'),
+  XK: () => import('country-flag-icons/string/3x2/XK'),
+  XO: () => import('country-flag-icons/string/3x2/XO'),
+  YE: () => import('country-flag-icons/string/3x2/YE'),
+  YT: () => import('country-flag-icons/string/3x2/YT'),
+  ZA: () => import('country-flag-icons/string/3x2/ZA'),
+  ZM: () => import('country-flag-icons/string/3x2/ZM'),
+  ZW: () => import('country-flag-icons/string/3x2/ZW'),
+};

package/src/components/specialized/flag/index.ts

@@ -1,5 +1,5 @@
 export { Flag, LanguageFlag } from './Flag';
 export type { FlagProps, LanguageFlagProps } from './Flag';
 export { LANGUAGE_TO_COUNTRY, getLanguageCountryCode } from './language-to-country';
-export { FLAG_COMPONENTS } from './flag-map';
-export type { FlagSvgComponent } from './flag-map';
+export { FLAG_LOADERS } from './flag-map';
+export type { FlagLoader } from './flag-map';

package/src/hooks/time/useCountdown.ts

@@ -1,6 +1,5 @@
 'use client';
 
-import moment from 'moment';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 export interface CountdownState {
@@ -64,10 +63,22 @@ export const useCountdown = (targetDate: string | null): CountdownState => {
   useEffect(() => {
     if (!targetDate) return;
 
-    const target = moment.utc(targetDate).local();
+    // Plain `Date` arithmetic, not moment: the hook only ever needed the gap in
+    // seconds, and the conversion moment did (`.utc().local()`) is what a Date
+    // already is internally — an absolute instant, rendered in local time only
+    // when formatted. Importing moment for this shipped its 137 locale files to
+    // every consumer of this package's barrel export.
+    //
+    // A timestamp with no zone designator means UTC here, so append the `Z`
+    // that `Date` would otherwise read as local time.
+    const iso = /(?:Z|[+-]\d{2}:?\d{2})$/.test(targetDate)
+      ? targetDate
+      : `${targetDate}Z`;
+    const targetMs = new Date(iso).getTime();
+    if (Number.isNaN(targetMs)) return;
 
     const tick = () => {
-      const diff = target.diff(moment(), 'seconds');
+      const diff = Math.round((targetMs - Date.now()) / 1000);
       setCountdown(secondsToState(diff));
     };