@digigov/ui 2.0.0-85c27c19 → 2.0.0-8bbad051

package/app/hooks/useNotificationArea/index.js

@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useRef } from "react";
+const notificationAreaId = "loader-notification-area";
+const activeSpinnersAttr = "data-active-spinners";
+function generateUniqueId() {
+  return `spinner-${Math.random().toString(36).substring(2, 9)}`;
+}
+const getOrCreateNotificationArea = () => {
+  let element = document.getElementById(notificationAreaId);
+  if (!element) {
+    element = document.createElement("div");
+    element.id = notificationAreaId;
+    element.setAttribute("role", "status");
+    element.setAttribute("aria-live", "polite");
+    element.className = "ds-visually-hidden";
+    document.body.appendChild(element);
+  }
+  return element;
+};
+const useNotificationArea = (loadingText = "\u0393\u03AF\u03BD\u03B5\u03C4\u03B1\u03B9 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7...", finishedText = "\u0397 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7 \u03BF\u03BB\u03BF\u03BA\u03BB\u03B7\u03C1\u03CE\u03B8\u03B7\u03BA\u03B5.") => {
+  const spinnerId = useRef(generateUniqueId());
+  const notificationRef = useRef(null);
+  const getActiveIds = useCallback(() => {
+    const current = notificationRef.current;
+    const value = current?.getAttribute(activeSpinnersAttr) || "";
+    return value.split(",").filter(Boolean);
+  }, [notificationRef]);
+  const setActiveSpinnerId = useCallback(() => {
+    const current = notificationRef.current;
+    if (current) {
+      const ids = new Set(getActiveIds());
+      ids.add(spinnerId.current);
+      current.setAttribute(activeSpinnersAttr, Array.from(ids).join(","));
+    }
+  }, [notificationRef, getActiveIds, spinnerId]);
+  const unsetActiveSpinnerId = useCallback(() => {
+    const current = notificationRef.current;
+    if (current) {
+      const ids = getActiveIds().filter((id) => id !== spinnerId.current);
+      current.setAttribute(activeSpinnersAttr, ids.join(","));
+    }
+  }, [notificationRef, getActiveIds, spinnerId]);
+  const setTextContent = (text) => {
+    if (notificationRef.current) {
+      notificationRef.current.textContent = text;
+    }
+  };
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    notificationRef.current = getOrCreateNotificationArea();
+    setActiveSpinnerId();
+    setTextContent(loadingText);
+    return () => {
+      unsetActiveSpinnerId();
+      if (getActiveIds().length === 0) {
+        setTextContent(finishedText);
+        setTimeout(() => {
+          const el = notificationRef.current;
+          if (el && getActiveIds().length === 0) {
+            el.removeAttribute(activeSpinnersAttr);
+            el.textContent = "";
+          }
+        }, 1e3);
+      }
+    };
+  }, [
+    loadingText,
+    finishedText,
+    setActiveSpinnerId,
+    unsetActiveSpinnerId,
+    getActiveIds
+  ]);
+};
+export {
+  useNotificationArea
+};
+//# sourceMappingURL=useNotificationArea.js.map

package/app/hooks/useNotificationArea/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/app/hooks/useNotificationArea/index.js"
+}

package/app/hooks/useNotificationArea.d.ts

@@ -0,0 +1 @@
+export declare const useNotificationArea: (loadingText?: string, finishedText?: string) => void;

package/app/hooks/useNotificationArea.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/app/hooks/useNotificationArea.tsx"],
+  "sourcesContent": ["import { useCallback, useEffect, useRef } from 'react';\n\n// Unique ID for the aria-live notification area element.\nconst notificationAreaId = 'loader-notification-area';\n// Custom attribute to track active spinners\nconst activeSpinnersAttr = 'data-active-spinners';\n\n// Generates a random unique ID for each spinner instance.\nfunction generateUniqueId() {\n  return `spinner-${Math.random().toString(36).substring(2, 9)}`;\n}\n\n// Finds or creates the notification area element in the DOM.\nconst getOrCreateNotificationArea = (): HTMLElement => {\n  let element = document.getElementById(notificationAreaId);\n\n  // Create and append it to the DOM.\n  if (!element) {\n    element = document.createElement('div');\n    element.id = notificationAreaId;\n    element.setAttribute('role', 'status');\n    element.setAttribute('aria-live', 'polite');\n    element.className = 'ds-visually-hidden';\n    document.body.appendChild(element);\n  }\n\n  return element;\n};\n\nexport const useNotificationArea = (\n  loadingText = '\u0393\u03AF\u03BD\u03B5\u03C4\u03B1\u03B9 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7...',\n  finishedText = '\u0397 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7 \u03BF\u03BB\u03BF\u03BA\u03BB\u03B7\u03C1\u03CE\u03B8\u03B7\u03BA\u03B5.'\n) => {\n  // Unique ID for this spinner.\n  const spinnerId = useRef(generateUniqueId());\n  // Reference to the notification area DOM element.\n  const notificationRef = useRef<HTMLElement | null>(null);\n\n  // Returns an array of active spinner IDs.\n  const getActiveIds = useCallback(() => {\n    const current = notificationRef.current;\n    const value = current?.getAttribute(activeSpinnersAttr) || '';\n    return value.split(',').filter(Boolean);\n  }, [notificationRef]);\n\n  // Adds this spinner's ID to the active list.\n  const setActiveSpinnerId = useCallback(() => {\n    const current = notificationRef.current;\n    if (current) {\n      const ids = new Set(getActiveIds());\n      ids.add(spinnerId.current);\n      current.setAttribute(activeSpinnersAttr, Array.from(ids).join(','));\n    }\n  }, [notificationRef, getActiveIds, spinnerId]);\n\n  // Removes this spinner's ID from the active list.\n  const unsetActiveSpinnerId = useCallback(() => {\n    const current = notificationRef.current;\n    if (current) {\n      const ids = getActiveIds().filter((id) => id !== spinnerId.current);\n      current.setAttribute(activeSpinnersAttr, ids.join(','));\n    }\n  }, [notificationRef, getActiveIds, spinnerId]);\n\n  // Updates the text content of the aria-live region.\n  const setTextContent = (text: string) => {\n    if (notificationRef.current) {\n      notificationRef.current.textContent = text;\n    }\n  };\n\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n\n    // Set up notification area and mark this spinner as active.\n    notificationRef.current = getOrCreateNotificationArea();\n    setActiveSpinnerId();\n    setTextContent(loadingText);\n\n    // Cleanup when component unmounts.\n    return () => {\n      unsetActiveSpinnerId();\n\n      // If no active spinners remain, announce \"finished\" and clear the text.\n      if (getActiveIds().length === 0) {\n        setTextContent(finishedText);\n\n        // Give screen readers a chance to announce \"finished\" before clearing.\n        setTimeout(() => {\n          const el = notificationRef.current;\n          if (el && getActiveIds().length === 0) {\n            el.removeAttribute(activeSpinnersAttr);\n            el.textContent = '';\n          }\n        }, 1000);\n      }\n    };\n  }, [\n    loadingText,\n    finishedText,\n    setActiveSpinnerId,\n    unsetActiveSpinnerId,\n    getActiveIds,\n  ]);\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa,WAAW,cAAc;AAG/C,MAAM,qBAAqB;AAE3B,MAAM,qBAAqB;AAG3B,SAAS,mBAAmB;AAC1B,SAAO,WAAW,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,GAAG,CAAC,CAAC;AAC9D;AAGA,MAAM,8BAA8B,MAAmB;AACrD,MAAI,UAAU,SAAS,eAAe,kBAAkB;AAGxD,MAAI,CAAC,SAAS;AACZ,cAAU,SAAS,cAAc,KAAK;AACtC,YAAQ,KAAK;AACb,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,aAAa,aAAa,QAAQ;AAC1C,YAAQ,YAAY;AACpB,aAAS,KAAK,YAAY,OAAO;AAAA,EACnC;AAEA,SAAO;AACT;AAEO,MAAM,sBAAsB,CACjC,cAAc,4FACd,eAAe,kIACZ;AAEH,QAAM,YAAY,OAAO,iBAAiB,CAAC;AAE3C,QAAM,kBAAkB,OAA2B,IAAI;AAGvD,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,UAAU,gBAAgB;AAChC,UAAM,QAAQ,SAAS,aAAa,kBAAkB,KAAK;AAC3D,WAAO,MAAM,MAAM,GAAG,EAAE,OAAO,OAAO;AAAA,EACxC,GAAG,CAAC,eAAe,CAAC;AAGpB,QAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAM,UAAU,gBAAgB;AAChC,QAAI,SAAS;AACX,YAAM,MAAM,IAAI,IAAI,aAAa,CAAC;AAClC,UAAI,IAAI,UAAU,OAAO;AACzB,cAAQ,aAAa,oBAAoB,MAAM,KAAK,GAAG,EAAE,KAAK,GAAG,CAAC;AAAA,IACpE;AAAA,EACF,GAAG,CAAC,iBAAiB,cAAc,SAAS,CAAC;AAG7C,QAAM,uBAAuB,YAAY,MAAM;AAC7C,UAAM,UAAU,gBAAgB;AAChC,QAAI,SAAS;AACX,YAAM,MAAM,aAAa,EAAE,OAAO,CAAC,OAAO,OAAO,UAAU,OAAO;AAClE,cAAQ,aAAa,oBAAoB,IAAI,KAAK,GAAG,CAAC;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,iBAAiB,cAAc,SAAS,CAAC;AAG7C,QAAM,iBAAiB,CAAC,SAAiB;AACvC,QAAI,gBAAgB,SAAS;AAC3B,sBAAgB,QAAQ,cAAc;AAAA,IACxC;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,OAAO,aAAa,YAAa;AAGrC,oBAAgB,UAAU,4BAA4B;AACtD,uBAAmB;AACnB,mBAAe,WAAW;AAG1B,WAAO,MAAM;AACX,2BAAqB;AAGrB,UAAI,aAAa,EAAE,WAAW,GAAG;AAC/B,uBAAe,YAAY;AAG3B,mBAAW,MAAM;AACf,gBAAM,KAAK,gBAAgB;AAC3B,cAAI,MAAM,aAAa,EAAE,WAAW,GAAG;AACrC,eAAG,gBAAgB,kBAAkB;AACrC,eAAG,cAAc;AAAA,UACnB;AAAA,QACF,GAAG,GAAI;AAAA,MACT;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
+  "names": []
+}

package/app/hooks/useTheme/index.js

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
 const useTheme = () => {
-  const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const prefersDarkScheme = window.matchMedia(
+    "(prefers-color-scheme: dark)"
+  ).matches;
   const storedTheme = localStorage.getItem(
     "--theme-palette"
   );

package/app/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/app/hooks/useTheme.ts"],
-  "sourcesContent": ["import { useState, useEffect } from 'react';\n\nexport type ThemeSelectOptions = 'light' | 'dark' | 'auto';\nexport type StoredThemeOptions = ThemeSelectOptions | null;\n\nexport type UseThemeResult = [\n  ThemeSelectOptions,\n  (selectedTheme: ThemeSelectOptions) => void\n];\n\nexport const useTheme = (): UseThemeResult => {\n  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')\n    .matches;\n  const storedTheme = localStorage.getItem(\n    '--theme-palette'\n  ) as StoredThemeOptions;\n\n  const [theme, changeTheme] = useState<ThemeSelectOptions>(\n    storedTheme || 'auto'\n  );\n\n  useEffect(() => {\n    document.documentElement.classList.remove('dark', 'light', 'auto');\n    if (theme === 'auto') {\n      document.documentElement.classList.add(\n        prefersDarkScheme ? 'dark' : 'light'\n      );\n    } else {\n      document.documentElement.classList.add(theme);\n    }\n    localStorage.setItem('--theme-palette', theme);\n  }, [theme]);\n\n  useEffect(() => {\n    const beforePrintListener = () => {\n      document.documentElement.classList.remove('dark');\n      document.documentElement.classList.add('light');\n    };\n    const afterPrintListener = () => {\n      document.documentElement.classList.remove('light');\n      let localtheme;\n      if (localStorage.getItem('--theme-palette') === 'auto') {\n        localtheme = prefersDarkScheme ? 'dark' : 'light';\n      } else {\n        localtheme = localStorage.getItem('--theme-palette');\n      }\n      document.documentElement.classList.add(localtheme || theme);\n    };\n    window.addEventListener('beforeprint', beforePrintListener);\n    window.addEventListener('afterprint', afterPrintListener);\n    return () => {\n      window.removeEventListener('beforeprint', beforePrintListener);\n      window.removeEventListener('afterprint', afterPrintListener);\n    };\n  }, []);\n\n  return [theme, changeTheme];\n};\n\nexport default useTheme;\n"],
-  "mappings": "AAAA,SAAS,UAAU,iBAAiB;AAU7B,MAAM,WAAW,MAAsB;AAC5C,QAAM,oBAAoB,OAAO,WAAW,8BAA8B,EACvE;AACH,QAAM,cAAc,aAAa;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,CAAC,OAAO,WAAW,IAAI;AAAA,IAC3B,eAAe;AAAA,EACjB;AAEA,YAAU,MAAM;AACd,aAAS,gBAAgB,UAAU,OAAO,QAAQ,SAAS,MAAM;AACjE,QAAI,UAAU,QAAQ;AACpB,eAAS,gBAAgB,UAAU;AAAA,QACjC,oBAAoB,SAAS;AAAA,MAC/B;AAAA,IACF,OAAO;AACL,eAAS,gBAAgB,UAAU,IAAI,KAAK;AAAA,IAC9C;AACA,iBAAa,QAAQ,mBAAmB,KAAK;AAAA,EAC/C,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AACd,UAAM,sBAAsB,MAAM;AAChC,eAAS,gBAAgB,UAAU,OAAO,MAAM;AAChD,eAAS,gBAAgB,UAAU,IAAI,OAAO;AAAA,IAChD;AACA,UAAM,qBAAqB,MAAM;AAC/B,eAAS,gBAAgB,UAAU,OAAO,OAAO;AACjD,UAAI;AACJ,UAAI,aAAa,QAAQ,iBAAiB,MAAM,QAAQ;AACtD,qBAAa,oBAAoB,SAAS;AAAA,MAC5C,OAAO;AACL,qBAAa,aAAa,QAAQ,iBAAiB;AAAA,MACrD;AACA,eAAS,gBAAgB,UAAU,IAAI,cAAc,KAAK;AAAA,IAC5D;AACA,WAAO,iBAAiB,eAAe,mBAAmB;AAC1D,WAAO,iBAAiB,cAAc,kBAAkB;AACxD,WAAO,MAAM;AACX,aAAO,oBAAoB,eAAe,mBAAmB;AAC7D,aAAO,oBAAoB,cAAc,kBAAkB;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,OAAO,WAAW;AAC5B;AAEA,IAAO,mBAAQ;",
+  "sourcesContent": ["import { useState, useEffect } from 'react';\n\nexport type ThemeSelectOptions = 'light' | 'dark' | 'auto';\nexport type StoredThemeOptions = ThemeSelectOptions | null;\n\nexport type UseThemeResult = [\n  ThemeSelectOptions,\n  (selectedTheme: ThemeSelectOptions) => void,\n];\n\nexport const useTheme = (): UseThemeResult => {\n  const prefersDarkScheme = window.matchMedia(\n    '(prefers-color-scheme: dark)'\n  ).matches;\n  const storedTheme = localStorage.getItem(\n    '--theme-palette'\n  ) as StoredThemeOptions;\n\n  const [theme, changeTheme] = useState<ThemeSelectOptions>(\n    storedTheme || 'auto'\n  );\n\n  useEffect(() => {\n    document.documentElement.classList.remove('dark', 'light', 'auto');\n    if (theme === 'auto') {\n      document.documentElement.classList.add(\n        prefersDarkScheme ? 'dark' : 'light'\n      );\n    } else {\n      document.documentElement.classList.add(theme);\n    }\n    localStorage.setItem('--theme-palette', theme);\n  }, [theme]);\n\n  useEffect(() => {\n    const beforePrintListener = () => {\n      document.documentElement.classList.remove('dark');\n      document.documentElement.classList.add('light');\n    };\n    const afterPrintListener = () => {\n      document.documentElement.classList.remove('light');\n      let localtheme;\n      if (localStorage.getItem('--theme-palette') === 'auto') {\n        localtheme = prefersDarkScheme ? 'dark' : 'light';\n      } else {\n        localtheme = localStorage.getItem('--theme-palette');\n      }\n      document.documentElement.classList.add(localtheme || theme);\n    };\n    window.addEventListener('beforeprint', beforePrintListener);\n    window.addEventListener('afterprint', afterPrintListener);\n    return () => {\n      window.removeEventListener('beforeprint', beforePrintListener);\n      window.removeEventListener('afterprint', afterPrintListener);\n    };\n  }, []);\n\n  return [theme, changeTheme];\n};\n\nexport default useTheme;\n"],
+  "mappings": "AAAA,SAAS,UAAU,iBAAiB;AAU7B,MAAM,WAAW,MAAsB;AAC5C,QAAM,oBAAoB,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AACF,QAAM,cAAc,aAAa;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,CAAC,OAAO,WAAW,IAAI;AAAA,IAC3B,eAAe;AAAA,EACjB;AAEA,YAAU,MAAM;AACd,aAAS,gBAAgB,UAAU,OAAO,QAAQ,SAAS,MAAM;AACjE,QAAI,UAAU,QAAQ;AACpB,eAAS,gBAAgB,UAAU;AAAA,QACjC,oBAAoB,SAAS;AAAA,MAC/B;AAAA,IACF,OAAO;AACL,eAAS,gBAAgB,UAAU,IAAI,KAAK;AAAA,IAC9C;AACA,iBAAa,QAAQ,mBAAmB,KAAK;AAAA,EAC/C,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AACd,UAAM,sBAAsB,MAAM;AAChC,eAAS,gBAAgB,UAAU,OAAO,MAAM;AAChD,eAAS,gBAAgB,UAAU,IAAI,OAAO;AAAA,IAChD;AACA,UAAM,qBAAqB,MAAM;AAC/B,eAAS,gBAAgB,UAAU,OAAO,OAAO;AACjD,UAAI;AACJ,UAAI,aAAa,QAAQ,iBAAiB,MAAM,QAAQ;AACtD,qBAAa,oBAAoB,SAAS;AAAA,MAC5C,OAAO;AACL,qBAAa,aAAa,QAAQ,iBAAiB;AAAA,MACrD;AACA,eAAS,gBAAgB,UAAU,IAAI,cAAc,KAAK;AAAA,IAC5D;AACA,WAAO,iBAAiB,eAAe,mBAAmB;AAC1D,WAAO,iBAAiB,cAAc,kBAAkB;AACxD,WAAO,MAAM;AACX,aAAO,oBAAoB,eAAe,mBAAmB;AAC7D,aAAO,oBAAoB,cAAc,kBAAkB;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,OAAO,WAAW;AAC5B;AAEA,IAAO,mBAAQ;",
   "names": []
 }

package/cjs/app/Footer/FooterLink/index.js

@@ -0,0 +1,50 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FooterLink_exports = {};
+__export(FooterLink_exports, {
+  FooterLink: () => FooterLink,
+  default: () => FooterLink_default
+});
+module.exports = __toCommonJS(FooterLink_exports);
+__reExport(FooterLink_exports, require("@digigov/react-core/FooterLinkBase"), module.exports);
+var import_react = __toESM(require("react"));
+var import_FooterLinkBase = require("@digigov/react-core/FooterLinkBase");
+var import_Link = require("@digigov/ui/navigation/Link");
+const FooterLink = import_react.default.forwardRef(
+  function FooterLink2({ children, ...props }, ref) {
+    return /* @__PURE__ */ import_react.default.createElement(import_FooterLinkBase.FooterLinkBase, { as: import_Link.Link, ref, ...props }, children);
+  }
+);
+var FooterLink_default = FooterLink;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FooterLink,
+  ...require("@digigov/react-core/FooterLinkBase")
+});
+//# sourceMappingURL=FooterLink.js.map

package/cjs/app/Footer/FooterLink.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/app/Footer/FooterLink.tsx"],
+  "sourcesContent": ["export * from '@digigov/react-core/FooterLinkBase';\nimport React from 'react';\nimport {\n  FooterLinkBase,\n  FooterLinkBaseProps,\n} from '@digigov/react-core/FooterLinkBase';\nimport { Link } from '@digigov/ui/navigation/Link';\n\nexport interface FooterLinkProps extends FooterLinkBaseProps {}\n\nexport const FooterLink = React.forwardRef<HTMLAnchorElement, FooterLinkProps>(\n  function FooterLink({ children, ...props }, ref) {\n    return (\n      <FooterLinkBase as={Link} ref={ref} {...props}>\n        {children}\n      </FooterLinkBase>\n    );\n  }\n);\nexport default FooterLink;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAc,+CAAd;AACA,mBAAkB;AAClB,4BAGO;AACP,kBAAqB;AAId,MAAM,aAAa,aAAAA,QAAM;AAAA,EAC9B,SAASC,YAAW,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK;AAC/C,WACE,6BAAAD,QAAA,cAAC,wCAAe,IAAI,kBAAM,KAAW,GAAG,SACrC,QACH;AAAA,EAEJ;AACF;AACA,IAAO,qBAAQ;",
+  "names": ["React", "FooterLink"]
+}

package/cjs/app/Footer/index.js

@@ -37,13 +37,13 @@ __reExport(Footer_exports, require("@digigov/react-core/FooterContent"), module.
 __reExport(Footer_exports, require("@digigov/react-core/FooterContentLogos"), module.exports);
 __reExport(Footer_exports, require("@digigov/react-core/FooterHeading"), module.exports);
 __reExport(Footer_exports, require("@digigov/react-core/FooterImage"), module.exports);
-__reExport(Footer_exports, require("@digigov/react-core/FooterLink"), module.exports);
 __reExport(Footer_exports, require("@digigov/react-core/FooterList"), module.exports);
 __reExport(Footer_exports, require("@digigov/react-core/FooterListItem"), module.exports);
 __reExport(Footer_exports, require("@digigov/react-core/FooterInfo"), module.exports);
 __reExport(Footer_exports, require("@digigov/react-core/FooterInfoSection"), module.exports);
 __reExport(Footer_exports, require("@digigov/react-core/FooterNavigation"), module.exports);
 __reExport(Footer_exports, require("@digigov/react-core/FooterNavigationSection"), module.exports);
+__reExport(Footer_exports, require("@digigov/ui/app/Footer/FooterLink"), module.exports);
 var import_Footer = __toESM(require("@digigov/react-core/Footer"));
 var Footer_default = import_Footer.default;
 // Annotate the CommonJS export names for ESM import in node:
@@ -54,12 +54,12 @@ var Footer_default = import_Footer.default;
   ...require("@digigov/react-core/FooterContentLogos"),
   ...require("@digigov/react-core/FooterHeading"),
   ...require("@digigov/react-core/FooterImage"),
-  ...require("@digigov/react-core/FooterLink"),
   ...require("@digigov/react-core/FooterList"),
   ...require("@digigov/react-core/FooterListItem"),
   ...require("@digigov/react-core/FooterInfo"),
   ...require("@digigov/react-core/FooterInfoSection"),
   ...require("@digigov/react-core/FooterNavigation"),
-  ...require("@digigov/react-core/FooterNavigationSection")
+  ...require("@digigov/react-core/FooterNavigationSection"),
+  ...require("@digigov/ui/app/Footer/FooterLink")
 });
 //# sourceMappingURL=index.js.map

package/cjs/app/Footer/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/app/Footer/index.tsx"],
-  "sourcesContent": ["export * from '@digigov/react-core/Footer';\nexport * from '@digigov/react-core/FooterContainer';\nexport * from '@digigov/react-core/FooterContent';\nexport * from '@digigov/react-core/FooterContentLogos';\nexport * from '@digigov/react-core/FooterHeading';\nexport * from '@digigov/react-core/FooterImage';\nexport * from '@digigov/react-core/FooterLink';\nexport * from '@digigov/react-core/FooterList';\nexport * from '@digigov/react-core/FooterListItem';\nexport * from '@digigov/react-core/FooterInfo';\nexport * from '@digigov/react-core/FooterInfoSection';\nexport * from '@digigov/react-core/FooterNavigation';\nexport * from '@digigov/react-core/FooterNavigationSection';\n\nimport Footer from '@digigov/react-core/Footer';\nexport default Footer;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAc,uCAAd;AACA,2BAAc,gDADd;AAEA,2BAAc,8CAFd;AAGA,2BAAc,mDAHd;AAIA,2BAAc,8CAJd;AAKA,2BAAc,4CALd;AAMA,2BAAc,2CANd;AAOA,2BAAc,2CAPd;AAQA,2BAAc,+CARd;AASA,2BAAc,2CATd;AAUA,2BAAc,kDAVd;AAWA,2BAAc,iDAXd;AAYA,2BAAc,wDAZd;AAcA,oBAAmB;AACnB,IAAO,iBAAQ,cAAAA;",
+  "sourcesContent": ["export * from '@digigov/react-core/Footer';\nexport * from '@digigov/react-core/FooterContainer';\nexport * from '@digigov/react-core/FooterContent';\nexport * from '@digigov/react-core/FooterContentLogos';\nexport * from '@digigov/react-core/FooterHeading';\nexport * from '@digigov/react-core/FooterImage';\nexport * from '@digigov/react-core/FooterList';\nexport * from '@digigov/react-core/FooterListItem';\nexport * from '@digigov/react-core/FooterInfo';\nexport * from '@digigov/react-core/FooterInfoSection';\nexport * from '@digigov/react-core/FooterNavigation';\nexport * from '@digigov/react-core/FooterNavigationSection';\nexport * from '@digigov/ui/app/Footer/FooterLink';\n\nimport Footer from '@digigov/react-core/Footer';\nexport default Footer;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAc,uCAAd;AACA,2BAAc,gDADd;AAEA,2BAAc,8CAFd;AAGA,2BAAc,mDAHd;AAIA,2BAAc,8CAJd;AAKA,2BAAc,4CALd;AAMA,2BAAc,2CANd;AAOA,2BAAc,+CAPd;AAQA,2BAAc,2CARd;AASA,2BAAc,kDATd;AAUA,2BAAc,iDAVd;AAWA,2BAAc,wDAXd;AAYA,2BAAc,8CAZd;AAcA,oBAAmB;AACnB,IAAO,iBAAQ,cAAAA;",
   "names": ["Footer"]
 }

package/cjs/app/Header/HeaderLogo/index.js

@@ -28,14 +28,23 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var HeaderLogo_exports = {};
 __export(HeaderLogo_exports, {
+  HeaderLogo: () => HeaderLogo,
   default: () => HeaderLogo_default
 });
 module.exports = __toCommonJS(HeaderLogo_exports);
-var import_HeaderLogo = __toESM(require("@digigov/react-core/HeaderLogo"));
-__reExport(HeaderLogo_exports, require("@digigov/react-core/HeaderLogo"), module.exports);
-var HeaderLogo_default = import_HeaderLogo.default;
+__reExport(HeaderLogo_exports, require("@digigov/react-core/HeaderLogoBase"), module.exports);
+var import_react = __toESM(require("react"));
+var import_HeaderLogoBase = require("@digigov/react-core/HeaderLogoBase");
+var import_Link = require("@digigov/ui/navigation/Link");
+const HeaderLogo = import_react.default.forwardRef(
+  function HeaderLogo2({ children, ...props }, ref) {
+    return /* @__PURE__ */ import_react.default.createElement(import_HeaderLogoBase.HeaderLogoBase, { as: import_Link.Link, ref, ...props }, children);
+  }
+);
+var HeaderLogo_default = HeaderLogo;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ...require("@digigov/react-core/HeaderLogo")
+  HeaderLogo,
+  ...require("@digigov/react-core/HeaderLogoBase")
 });
 //# sourceMappingURL=HeaderLogo.js.map

package/cjs/app/Header/HeaderLogo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/app/Header/HeaderLogo.tsx"],
-  "sourcesContent": ["import HeaderLogo from '@digigov/react-core/HeaderLogo';\n\nexport * from '@digigov/react-core/HeaderLogo';\nexport default HeaderLogo;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AAEvB,+BAAc,2CAFd;AAGA,IAAO,qBAAQ,kBAAAA;",
-  "names": ["HeaderLogo"]
+  "sourcesContent": ["export * from '@digigov/react-core/HeaderLogoBase';\nimport React from 'react';\nimport {\n  HeaderLogoBase,\n  HeaderLogoBaseProps,\n} from '@digigov/react-core/HeaderLogoBase';\nimport { Link } from '@digigov/ui/navigation/Link';\n\nexport interface HeaderLogoProps extends HeaderLogoBaseProps {}\n\nexport const HeaderLogo = React.forwardRef<HTMLAnchorElement, HeaderLogoProps>(\n  function HeaderLogo({ children, ...props }, ref) {\n    return (\n      <HeaderLogoBase as={Link} ref={ref} {...props}>\n        {children}\n      </HeaderLogoBase>\n    );\n  }\n);\nexport default HeaderLogo;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAc,+CAAd;AACA,mBAAkB;AAClB,4BAGO;AACP,kBAAqB;AAId,MAAM,aAAa,aAAAA,QAAM;AAAA,EAC9B,SAASC,YAAW,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK;AAC/C,WACE,6BAAAD,QAAA,cAAC,wCAAe,IAAI,kBAAM,KAAW,GAAG,SACrC,QACH;AAAA,EAEJ;AACF;AACA,IAAO,qBAAQ;",
+  "names": ["React", "HeaderLogo"]
 }

package/cjs/app/Header/HeaderSecondaryLogo/index.js

@@ -16,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -27,14 +28,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var HeaderSecondaryLogo_exports = {};
 __export(HeaderSecondaryLogo_exports, {
-  HeaderSecondaryLogo: () => import_HeaderSecondaryLogo.default,
+  HeaderSecondaryLogo: () => HeaderSecondaryLogo,
   default: () => HeaderSecondaryLogo_default
 });
 module.exports = __toCommonJS(HeaderSecondaryLogo_exports);
-var import_HeaderSecondaryLogo = __toESM(require("@digigov/react-core/HeaderSecondaryLogo"));
-var HeaderSecondaryLogo_default = import_HeaderSecondaryLogo.default;
+__reExport(HeaderSecondaryLogo_exports, require("@digigov/react-core/HeaderSecondaryLogoBase"), module.exports);
+var import_react = __toESM(require("react"));
+var import_HeaderSecondaryLogoBase = require("@digigov/react-core/HeaderSecondaryLogoBase");
+var import_Link = require("@digigov/ui/navigation/Link");
+const HeaderSecondaryLogo = import_react.default.forwardRef(function HeaderSecondaryLogo2({ children, ...props }, ref) {
+  return /* @__PURE__ */ import_react.default.createElement(import_HeaderSecondaryLogoBase.HeaderSecondaryLogoBase, { as: import_Link.Link, ref, ...props }, children);
+});
+var HeaderSecondaryLogo_default = HeaderSecondaryLogo;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  HeaderSecondaryLogo
+  HeaderSecondaryLogo,
+  ...require("@digigov/react-core/HeaderSecondaryLogoBase")
 });
 //# sourceMappingURL=HeaderSecondaryLogo.js.map

package/cjs/app/Header/HeaderSecondaryLogo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/app/Header/HeaderSecondaryLogo.tsx"],
-  "sourcesContent": ["import HeaderSecondaryLogo from '@digigov/react-core/HeaderSecondaryLogo';\n\nexport { HeaderSecondaryLogo };\nexport default HeaderSecondaryLogo;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wDAAAA;AAAA,EAAA;AAAA;AAAA;AAAA,iCAAgC;AAGhC,IAAO,8BAAQ,2BAAAA;",
-  "names": ["HeaderSecondaryLogo"]
+  "sourcesContent": ["export * from '@digigov/react-core/HeaderSecondaryLogoBase';\nimport React from 'react';\nimport {\n  HeaderSecondaryLogoBase,\n  HeaderSecondaryLogoBaseProps,\n} from '@digigov/react-core/HeaderSecondaryLogoBase';\nimport { Link } from '@digigov/ui/navigation/Link';\n\nexport interface HeaderSecondaryLogoProps\n  extends HeaderSecondaryLogoBaseProps {}\n\nexport const HeaderSecondaryLogo = React.forwardRef<\n  HTMLAnchorElement,\n  HeaderSecondaryLogoProps\n>(function HeaderSecondaryLogo({ children, ...props }, ref) {\n  return (\n    <HeaderSecondaryLogoBase as={Link} ref={ref} {...props}>\n      {children}\n    </HeaderSecondaryLogoBase>\n  );\n});\nexport default HeaderSecondaryLogo;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAAc,wDAAd;AACA,mBAAkB;AAClB,qCAGO;AACP,kBAAqB;AAKd,MAAM,sBAAsB,aAAAA,QAAM,WAGvC,SAASC,qBAAoB,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK;AAC1D,SACE,6BAAAD,QAAA,cAAC,0DAAwB,IAAI,kBAAM,KAAW,GAAG,SAC9C,QACH;AAEJ,CAAC;AACD,IAAO,8BAAQ;",
+  "names": ["React", "HeaderSecondaryLogo"]
 }

package/cjs/app/Header/HeaderTitle/index.js

@@ -28,14 +28,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var HeaderTitle_exports = {};
 __export(HeaderTitle_exports, {
+  HeaderTitle: () => HeaderTitle,
   default: () => HeaderTitle_default
 });
 module.exports = __toCommonJS(HeaderTitle_exports);
-var import_HeaderTitle = __toESM(require("@digigov/react-core/HeaderTitle"));
-__reExport(HeaderTitle_exports, require("@digigov/react-core/HeaderTitle"), module.exports);
-var HeaderTitle_default = import_HeaderTitle.default;
+__reExport(HeaderTitle_exports, require("@digigov/react-core/HeaderTitleBase"), module.exports);
+var import_react = __toESM(require("react"));
+var import_HeaderTitleBase = require("@digigov/react-core/HeaderTitleBase");
+var import_Link = require("@digigov/ui/navigation/Link");
+const HeaderTitle = import_react.default.forwardRef(function HeaderTitle2({ children, ...props }, ref) {
+  return /* @__PURE__ */ import_react.default.createElement(import_HeaderTitleBase.HeaderTitleBase, { as: import_Link.Link, ref, ...props }, children);
+});
+var HeaderTitle_default = HeaderTitle;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ...require("@digigov/react-core/HeaderTitle")
+  HeaderTitle,
+  ...require("@digigov/react-core/HeaderTitleBase")
 });
 //# sourceMappingURL=HeaderTitle.js.map

package/cjs/app/Header/HeaderTitle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/app/Header/HeaderTitle.tsx"],
-  "sourcesContent": ["import HeaderTitle from '@digigov/react-core/HeaderTitle';\n\nexport * from '@digigov/react-core/HeaderTitle';\nexport default HeaderTitle;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAwB;AAExB,gCAAc,4CAFd;AAGA,IAAO,sBAAQ,mBAAAA;",
-  "names": ["HeaderTitle"]
+  "sourcesContent": ["export * from '@digigov/react-core/HeaderTitleBase';\nimport React from 'react';\nimport {\n  HeaderTitleBase,\n  HeaderTitleBaseProps,\n} from '@digigov/react-core/HeaderTitleBase';\nimport { Link } from '@digigov/ui/navigation/Link';\n\nexport interface HeaderTitleProps extends HeaderTitleBaseProps {}\n\nexport const HeaderTitle = React.forwardRef<\n  HTMLAnchorElement,\n  HeaderTitleProps\n>(function HeaderTitle({ children, ...props }, ref) {\n  return (\n    <HeaderTitleBase as={Link} ref={ref} {...props}>\n      {children}\n    </HeaderTitleBase>\n  );\n});\n\nexport default HeaderTitle;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAAc,gDAAd;AACA,mBAAkB;AAClB,6BAGO;AACP,kBAAqB;AAId,MAAM,cAAc,aAAAA,QAAM,WAG/B,SAASC,aAAY,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK;AAClD,SACE,6BAAAD,QAAA,cAAC,0CAAgB,IAAI,kBAAM,KAAW,GAAG,SACtC,QACH;AAEJ,CAAC;AAED,IAAO,sBAAQ;",
+  "names": ["React", "HeaderTitle"]
 }

package/cjs/app/Loader/index.js

@@ -32,14 +32,14 @@ __export(Loader_exports, {
 });
 module.exports = __toCommonJS(Loader_exports);
 __reExport(Loader_exports, require("@digigov/react-core/LoaderContainer"), module.exports);
-__reExport(Loader_exports, require("@digigov/react-core/CircularProgress"), module.exports);
 __reExport(Loader_exports, require("@digigov/react-core/FullPageBackground"), module.exports);
+__reExport(Loader_exports, require("@digigov/ui/app/Loader/index.web"), module.exports);
 var import_LoaderContainer = __toESM(require("@digigov/react-core/LoaderContainer"));
 var Loader_default = import_LoaderContainer.default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("@digigov/react-core/LoaderContainer"),
-  ...require("@digigov/react-core/CircularProgress"),
-  ...require("@digigov/react-core/FullPageBackground")
+  ...require("@digigov/react-core/FullPageBackground"),
+  ...require("@digigov/ui/app/Loader/index.web")
 });
 //# sourceMappingURL=index.js.map

package/cjs/app/Loader/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/app/Loader/index.tsx"],
-  "sourcesContent": ["export * from '@digigov/react-core/LoaderContainer';\nexport * from '@digigov/react-core/CircularProgress';\nexport * from '@digigov/react-core/FullPageBackground';\n\nimport LoaderContainer from '@digigov/react-core/LoaderContainer';\nexport default LoaderContainer;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAc,gDAAd;AACA,2BAAc,iDADd;AAEA,2BAAc,mDAFd;AAIA,6BAA4B;AAC5B,IAAO,iBAAQ,uBAAAA;",
+  "sourcesContent": ["export * from '@digigov/react-core/LoaderContainer';\nexport * from '@digigov/react-core/FullPageBackground';\nexport * from '@digigov/ui/app/Loader/index.web';\n\nimport LoaderContainer from '@digigov/react-core/LoaderContainer';\nexport default LoaderContainer;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAc,gDAAd;AACA,2BAAc,mDADd;AAEA,2BAAc,6CAFd;AAIA,6BAA4B;AAC5B,IAAO,iBAAQ,uBAAAA;",
   "names": ["LoaderContainer"]
 }

package/cjs/app/Loader/index.native/index.js

@@ -0,0 +1,135 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_native_exports = {};
+__export(index_native_exports, {
+  CircularProgress: () => CircularProgress
+});
+module.exports = __toCommonJS(index_native_exports);
+var import_react = __toESM(require("react"));
+var import_react_native = require("react-native");
+var import_react_native_svg = __toESM(require("react-native-svg"));
+const CircularProgress = ({
+  size = "md",
+  color = "primary"
+}) => {
+  const sizes = {
+    sm: 20,
+    md: 40,
+    lg: 50
+  };
+  const strokeWidth = sizes[size] / 4;
+  const radius = (sizes[size] - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const rotateAnim = (0, import_react.useRef)(new import_react_native.Animated.Value(0)).current;
+  const dashAnim = (0, import_react.useRef)(new import_react_native.Animated.Value(circumference)).current;
+  const progressColor = color === "primary" ? "#003375" : "#fff";
+  const backgroundColor = "#01b0f0";
+  const duration = 4e3;
+  (0, import_react.useEffect)(() => {
+    import_react_native.Animated.loop(
+      import_react_native.Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 1e4,
+        easing: import_react_native.Easing.linear,
+        useNativeDriver: true
+      })
+    ).start();
+  }, [rotateAnim]);
+  (0, import_react.useEffect)(() => {
+    import_react_native.Animated.loop(
+      import_react_native.Animated.sequence([
+        import_react_native.Animated.timing(dashAnim, {
+          toValue: 0,
+          duration: duration * 0.4,
+          easing: import_react_native.Easing.inOut(import_react_native.Easing.ease),
+          useNativeDriver: true
+        }),
+        import_react_native.Animated.timing(dashAnim, {
+          toValue: circumference,
+          duration: duration * 0.6,
+          easing: import_react_native.Easing.inOut(import_react_native.Easing.ease),
+          useNativeDriver: true
+        })
+      ])
+    ).start();
+  }, [dashAnim, duration, circumference]);
+  const rotateInterpolate = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"]
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_react_native.Animated.View,
+    {
+      style: [
+        {
+          width: sizes[size],
+          height: sizes[size],
+          transform: [{ rotate: rotateInterpolate }]
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_react_native_svg.default,
+      {
+        width: sizes[size],
+        height: sizes[size],
+        viewBox: `0 0 ${sizes[size]} ${sizes[size]}`
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_react_native_svg.Circle,
+        {
+          cx: sizes[size] / 2,
+          cy: sizes[size] / 2,
+          r: radius,
+          stroke: backgroundColor,
+          strokeWidth,
+          fill: "none"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        AnimatedCircle,
+        {
+          cx: sizes[size] / 2,
+          cy: sizes[size] / 2,
+          r: radius,
+          stroke: progressColor,
+          strokeWidth,
+          strokeDasharray: `${circumference}`,
+          strokeDashoffset: dashAnim,
+          fill: "none"
+        }
+      )
+    )
+  );
+};
+const AnimatedCircle = import_react_native.Animated.createAnimatedComponent(import_react_native_svg.Circle);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CircularProgress
+});
+//# sourceMappingURL=index.native.js.map

package/cjs/app/Loader/index.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/app/Loader/index.native.tsx"],
+  "sourcesContent": ["import React, { useRef, useEffect } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport Svg, { Circle } from 'react-native-svg';\nimport { CircularProgressBaseProps } from '@digigov/react-core/CircularProgressBase';\n\nexport const CircularProgress: React.FC<CircularProgressBaseProps> = ({\n  size = 'md',\n  color = 'primary',\n}) => {\n  const sizes = {\n    sm: 20,\n    md: 40,\n    lg: 50,\n  };\n  const strokeWidth = sizes[size] / 4;\n  const radius = (sizes[size] - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const rotateAnim = useRef(new Animated.Value(0)).current;\n  const dashAnim = useRef(new Animated.Value(circumference)).current;\n\n  const progressColor = color === 'primary' ? '#003375' : '#fff';\n  const backgroundColor = '#01b0f0';\n  const duration = 4000;\n\n  useEffect(() => {\n    Animated.loop(\n      Animated.timing(rotateAnim, {\n        toValue: 1,\n        duration: 10000,\n        easing: Easing.linear,\n        useNativeDriver: true,\n      })\n    ).start();\n  }, [rotateAnim]);\n\n  useEffect(() => {\n    Animated.loop(\n      Animated.sequence([\n        Animated.timing(dashAnim, {\n          toValue: 0,\n          duration: duration * 0.4,\n          easing: Easing.inOut(Easing.ease),\n          useNativeDriver: true,\n        }),\n        Animated.timing(dashAnim, {\n          toValue: circumference,\n          duration: duration * 0.6,\n          easing: Easing.inOut(Easing.ease),\n          useNativeDriver: true,\n        }),\n      ])\n    ).start();\n  }, [dashAnim, duration, circumference]);\n\n  const rotateInterpolate = rotateAnim.interpolate({\n    inputRange: [0, 1],\n    outputRange: ['0deg', '360deg'],\n  });\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: sizes[size],\n          height: sizes[size],\n          transform: [{ rotate: rotateInterpolate }],\n        },\n      ]}\n    >\n      <Svg\n        width={sizes[size]}\n        height={sizes[size]}\n        viewBox={`0 0 ${sizes[size]} ${sizes[size]}`}\n      >\n        <Circle\n          cx={sizes[size] / 2}\n          cy={sizes[size] / 2}\n          r={radius}\n          stroke={backgroundColor}\n          strokeWidth={strokeWidth}\n          fill=\"none\"\n        />\n        <AnimatedCircle\n          cx={sizes[size] / 2}\n          cy={sizes[size] / 2}\n          r={radius}\n          stroke={progressColor}\n          strokeWidth={strokeWidth}\n          strokeDasharray={`${circumference}`}\n          strokeDashoffset={dashAnim}\n          fill=\"none\"\n        />\n      </Svg>\n    </Animated.View>\n  );\n};\n\nconst AnimatedCircle = Animated.createAnimatedComponent(Circle);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,0BAAiC;AACjC,8BAA4B;AAGrB,MAAM,mBAAwD,CAAC;AAAA,EACpE,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AACJ,QAAM,QAAQ;AAAA,IACZ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACA,QAAM,cAAc,MAAM,IAAI,IAAI;AAClC,QAAM,UAAU,MAAM,IAAI,IAAI,eAAe;AAC7C,QAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,QAAM,iBAAa,qBAAO,IAAI,6BAAS,MAAM,CAAC,CAAC,EAAE;AACjD,QAAM,eAAW,qBAAO,IAAI,6BAAS,MAAM,aAAa,CAAC,EAAE;AAE3D,QAAM,gBAAgB,UAAU,YAAY,YAAY;AACxD,QAAM,kBAAkB;AACxB,QAAM,WAAW;AAEjB,8BAAU,MAAM;AACd,iCAAS;AAAA,MACP,6BAAS,OAAO,YAAY;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,2BAAO;AAAA,QACf,iBAAiB;AAAA,MACnB,CAAC;AAAA,IACH,EAAE,MAAM;AAAA,EACV,GAAG,CAAC,UAAU,CAAC;AAEf,8BAAU,MAAM;AACd,iCAAS;AAAA,MACP,6BAAS,SAAS;AAAA,QAChB,6BAAS,OAAO,UAAU;AAAA,UACxB,SAAS;AAAA,UACT,UAAU,WAAW;AAAA,UACrB,QAAQ,2BAAO,MAAM,2BAAO,IAAI;AAAA,UAChC,iBAAiB;AAAA,QACnB,CAAC;AAAA,QACD,6BAAS,OAAO,UAAU;AAAA,UACxB,SAAS;AAAA,UACT,UAAU,WAAW;AAAA,UACrB,QAAQ,2BAAO,MAAM,2BAAO,IAAI;AAAA,UAChC,iBAAiB;AAAA,QACnB,CAAC;AAAA,MACH,CAAC;AAAA,IACH,EAAE,MAAM;AAAA,EACV,GAAG,CAAC,UAAU,UAAU,aAAa,CAAC;AAEtC,QAAM,oBAAoB,WAAW,YAAY;AAAA,IAC/C,YAAY,CAAC,GAAG,CAAC;AAAA,IACjB,aAAa,CAAC,QAAQ,QAAQ;AAAA,EAChC,CAAC;AAED,SACE,6BAAAA,QAAA;AAAA,IAAC,6BAAS;AAAA,IAAT;AAAA,MACC,OAAO;AAAA,QACL;AAAA,UACE,OAAO,MAAM,IAAI;AAAA,UACjB,QAAQ,MAAM,IAAI;AAAA,UAClB,WAAW,CAAC,EAAE,QAAQ,kBAAkB,CAAC;AAAA,QAC3C;AAAA,MACF;AAAA;AAAA,IAEA,6BAAAA,QAAA;AAAA,MAAC,wBAAAC;AAAA,MAAA;AAAA,QACC,OAAO,MAAM,IAAI;AAAA,QACjB,QAAQ,MAAM,IAAI;AAAA,QAClB,SAAS,OAAO,MAAM,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC;AAAA;AAAA,MAE1C,6BAAAD,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,MAAM,IAAI,IAAI;AAAA,UAClB,IAAI,MAAM,IAAI,IAAI;AAAA,UAClB,GAAG;AAAA,UACH,QAAQ;AAAA,UACR;AAAA,UACA,MAAK;AAAA;AAAA,MACP;AAAA,MACA,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,MAAM,IAAI,IAAI;AAAA,UAClB,IAAI,MAAM,IAAI,IAAI;AAAA,UAClB,GAAG;AAAA,UACH,QAAQ;AAAA,UACR;AAAA,UACA,iBAAiB,GAAG,aAAa;AAAA,UACjC,kBAAkB;AAAA,UAClB,MAAK;AAAA;AAAA,MACP;AAAA,IACF;AAAA,EACF;AAEJ;AAEA,MAAM,iBAAiB,6BAAS,wBAAwB,8BAAM;",
+  "names": ["React", "Svg"]
+}

package/cjs/app/Loader/index.web/index.js

@@ -0,0 +1,53 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_web_exports = {};
+__export(index_web_exports, {
+  CircularProgress: () => CircularProgress,
+  default: () => index_web_default
+});
+module.exports = __toCommonJS(index_web_exports);
+var import_react = __toESM(require("react"));
+__reExport(index_web_exports, require("@digigov/react-core/CircularProgressBase"), module.exports);
+var import_CircularProgressBase = __toESM(require("@digigov/react-core/CircularProgressBase"));
+var import_useNotificationArea = require("@digigov/ui/app/hooks/useNotificationArea");
+const CircularProgress = import_react.default.forwardRef(function CircularProgress2({
+  loadingText = "\u0393\u03AF\u03BD\u03B5\u03C4\u03B1\u03B9 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7...",
+  loadingFinishedText = "\u0397 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7 \u03BF\u03BB\u03BF\u03BA\u03BB\u03B7\u03C1\u03CE\u03B8\u03B7\u03BA\u03B5.",
+  ...props
+}, ref) {
+  (0, import_useNotificationArea.useNotificationArea)(loadingText, loadingFinishedText);
+  return /* @__PURE__ */ import_react.default.createElement(import_CircularProgressBase.default, { ref, ...props });
+});
+var index_web_default = CircularProgress;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CircularProgress,
+  ...require("@digigov/react-core/CircularProgressBase")
+});
+//# sourceMappingURL=index.web.js.map