@digigov/ui 2.0.0-a402a664 → 2.0.0-a594a958

package/app/Loader/Loader.stories.d.ts

@@ -2,8 +2,52 @@ declare namespace _default {
     export let title: string;
     export { CircularProgress as component };
     export let displayName: string;
+    export let tags: string[];
+    export { doc as markdown };
 }
 export default _default;
+export namespace WithControls {
+    function render(args: any): React.JSX.Element;
+    namespace args {
+        let loadingText: string;
+        let loadingFinishedText: string;
+        let color: string;
+        let size: string;
+    }
+    namespace argsTypes {
+        export namespace loadingText_1 {
+            let control: string;
+        }
+        export { loadingText_1 as loadingText };
+        export namespace loadingFinishedText_1 {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        export { loadingFinishedText_1 as loadingFinishedText };
+        export namespace color_1 {
+            export namespace control_2 {
+                let type: string;
+            }
+            export { control_2 as control };
+            export let options: string[];
+        }
+        export { color_1 as color };
+        export namespace size_1 {
+            export namespace control_3 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_3 as control };
+            let options_1: string[];
+            export { options_1 as options };
+        }
+        export { size_1 as size };
+    }
+}
 export { Default } from "@digigov/ui/app/Loader/__stories__/Default";
+export { Secondary } from "@digigov/ui/app/Loader/__stories__/Secondary";
+export { Sizes } from "@digigov/ui/app/Loader/__stories__/Sizes";
 export { FullPageLoader } from "@digigov/ui/app/Loader/__stories__/FullPageLoader";
-import CircularProgress from '@digigov/ui/app/Loader';
+export { AccessibilityLoader } from "@digigov/ui/app/Loader/__stories__/AccessibilityLoader";
+import { CircularProgress } from '@digigov/ui/app/Loader';
+import React from 'react';

package/app/Loader/__stories__/AccessibilityLoader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const AccessibilityLoader: (_: any) => React.JSX.Element;
+export default AccessibilityLoader;

package/app/Loader/__stories__/FullPageLoader.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
 export declare const FullPageLoader: (_: any) => React.JSX.Element;
+export default FullPageLoader;

package/app/Loader/__stories__/Secondary.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const Secondary: (_: any) => React.JSX.Element;
+export default Secondary;

package/app/Loader/__stories__/Sizes.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const Sizes: (_: any) => React.JSX.Element;
+export default Sizes;

package/app/Loader/index.native.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { CircularProgressProps } from '@digigov/react-core/CircularProgress';
-export declare const CircularProgress: React.FC<CircularProgressProps>;
+import { CircularProgressBaseProps } from '@digigov/react-core/CircularProgressBase';
+export declare const CircularProgress: React.FC<CircularProgressBaseProps>;

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

@@ -1,7 +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 { CircularProgressProps } from '@digigov/react-core/CircularProgress';\n\nexport const CircularProgress: React.FC<CircularProgressProps> = ({\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,OAAO,SAAS,QAAQ,iBAAiB;AACzC,SAAS,UAAU,cAAc;AACjC,OAAO,OAAO,cAAc;AAGrB,MAAM,mBAAoD,CAAC;AAAA,EAChE,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,aAAa,OAAO,IAAI,SAAS,MAAM,CAAC,CAAC,EAAE;AACjD,QAAM,WAAW,OAAO,IAAI,SAAS,MAAM,aAAa,CAAC,EAAE;AAE3D,QAAM,gBAAgB,UAAU,YAAY,YAAY;AACxD,QAAM,kBAAkB;AACxB,QAAM,WAAW;AAEjB,YAAU,MAAM;AACd,aAAS;AAAA,MACP,SAAS,OAAO,YAAY;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,OAAO;AAAA,QACf,iBAAiB;AAAA,MACnB,CAAC;AAAA,IACH,EAAE,MAAM;AAAA,EACV,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AACd,aAAS;AAAA,MACP,SAAS,SAAS;AAAA,QAChB,SAAS,OAAO,UAAU;AAAA,UACxB,SAAS;AAAA,UACT,UAAU,WAAW;AAAA,UACrB,QAAQ,OAAO,MAAM,OAAO,IAAI;AAAA,UAChC,iBAAiB;AAAA,QACnB,CAAC;AAAA,QACD,SAAS,OAAO,UAAU;AAAA,UACxB,SAAS;AAAA,UACT,UAAU,WAAW;AAAA,UACrB,QAAQ,OAAO,MAAM,OAAO,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;AAAA,IAAC,SAAS;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;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,MAAM,IAAI;AAAA,QACjB,QAAQ,MAAM,IAAI;AAAA,QAClB,SAAS,OAAO,MAAM,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC;AAAA;AAAA,MAE1C;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;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,SAAS,wBAAwB,MAAM;",
+  "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,OAAO,SAAS,QAAQ,iBAAiB;AACzC,SAAS,UAAU,cAAc;AACjC,OAAO,OAAO,cAAc;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,aAAa,OAAO,IAAI,SAAS,MAAM,CAAC,CAAC,EAAE;AACjD,QAAM,WAAW,OAAO,IAAI,SAAS,MAAM,aAAa,CAAC,EAAE;AAE3D,QAAM,gBAAgB,UAAU,YAAY,YAAY;AACxD,QAAM,kBAAkB;AACxB,QAAM,WAAW;AAEjB,YAAU,MAAM;AACd,aAAS;AAAA,MACP,SAAS,OAAO,YAAY;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,OAAO;AAAA,QACf,iBAAiB;AAAA,MACnB,CAAC;AAAA,IACH,EAAE,MAAM;AAAA,EACV,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AACd,aAAS;AAAA,MACP,SAAS,SAAS;AAAA,QAChB,SAAS,OAAO,UAAU;AAAA,UACxB,SAAS;AAAA,UACT,UAAU,WAAW;AAAA,UACrB,QAAQ,OAAO,MAAM,OAAO,IAAI;AAAA,UAChC,iBAAiB;AAAA,QACnB,CAAC;AAAA,QACD,SAAS,OAAO,UAAU;AAAA,UACxB,SAAS;AAAA,UACT,UAAU,WAAW;AAAA,UACrB,QAAQ,OAAO,MAAM,OAAO,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;AAAA,IAAC,SAAS;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;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,MAAM,IAAI;AAAA,QACjB,QAAQ,MAAM,IAAI;AAAA,QAClB,SAAS,OAAO,MAAM,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC;AAAA;AAAA,MAE1C;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;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,SAAS,wBAAwB,MAAM;",
   "names": []
 }

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

@@ -1,2 +1,18 @@
-export * from "@digigov/react-core/CircularProgress";
+import React from "react";
+export * from "@digigov/react-core/CircularProgressBase";
+import CircularProgressBase from "@digigov/react-core/CircularProgressBase";
+import { useNotificationArea } from "@digigov/ui/app/hooks/useNotificationArea";
+const CircularProgress = React.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) {
+  useNotificationArea(loadingText, loadingFinishedText);
+  return /* @__PURE__ */ React.createElement(CircularProgressBase, { ref, ...props });
+});
+var index_web_default = CircularProgress;
+export {
+  CircularProgress,
+  index_web_default as default
+};
 //# sourceMappingURL=index.web.js.map

package/app/Loader/index.web.d.ts

@@ -1 +1,19 @@
-export * from '@digigov/react-core/CircularProgress';
+import React from 'react';
+export * from '@digigov/react-core/CircularProgressBase';
+import { CircularProgressBaseProps } from '@digigov/react-core/CircularProgressBase';
+export interface CircularProgressProps extends CircularProgressBaseProps {
+    /**
+     * loadingText prop is optional
+     * Text for screen readers when loading starts
+     * @default "Γίνεται φόρτωση..."
+     */
+    loadingText?: string;
+    /**
+     * loadingFinishedText prop is optional
+     * Text for screen readers when loading finishes
+     * @default "Η φόρτωση ολοκληρώθηκε."
+     */
+    loadingFinishedText?: string;
+}
+export declare const CircularProgress: React.ForwardRefExoticComponent<Omit<CircularProgressProps, "ref"> & React.RefAttributes<SVGElement>>;
+export default CircularProgress;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/app/Loader/index.web.tsx"],
-  "sourcesContent": ["export * from '@digigov/react-core/CircularProgress';\n"],
-  "mappings": "AAAA,cAAc;",
-  "names": []
+  "sourcesContent": ["import React from 'react';\nexport * from '@digigov/react-core/CircularProgressBase';\nimport CircularProgressBase, {\n  CircularProgressBaseProps,\n} from '@digigov/react-core/CircularProgressBase';\nimport { useNotificationArea } from '@digigov/ui/app/hooks/useNotificationArea';\n\nexport interface CircularProgressProps extends CircularProgressBaseProps {\n  /**\n   * loadingText prop is optional\n   * Text for screen readers when loading starts\n   * @default \"\u0393\u03AF\u03BD\u03B5\u03C4\u03B1\u03B9 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7...\"\n   */\n  loadingText?: string;\n  /**\n   * loadingFinishedText prop is optional\n   * Text for screen readers when loading finishes\n   * @default \"\u0397 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7 \u03BF\u03BB\u03BF\u03BA\u03BB\u03B7\u03C1\u03CE\u03B8\u03B7\u03BA\u03B5.\"\n   */\n  loadingFinishedText?: string;\n}\n\nexport const CircularProgress = React.forwardRef<\n  SVGElement,\n  CircularProgressProps\n>(function CircularProgress(\n  {\n    loadingText = '\u0393\u03AF\u03BD\u03B5\u03C4\u03B1\u03B9 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7...',\n    loadingFinishedText = '\u0397 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7 \u03BF\u03BB\u03BF\u03BA\u03BB\u03B7\u03C1\u03CE\u03B8\u03B7\u03BA\u03B5.',\n    ...props\n  },\n  ref\n) {\n  useNotificationArea(loadingText, loadingFinishedText);\n\n  return <CircularProgressBase ref={ref} {...props} />;\n});\n\nexport default CircularProgress;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,cAAc;AACd,OAAO,0BAEA;AACP,SAAS,2BAA2B;AAiB7B,MAAM,mBAAmB,MAAM,WAGpC,SAASA,kBACT;AAAA,EACE,cAAc;AAAA,EACd,sBAAsB;AAAA,EACtB,GAAG;AACL,GACA,KACA;AACA,sBAAoB,aAAa,mBAAmB;AAEpD,SAAO,oCAAC,wBAAqB,KAAW,GAAG,OAAO;AACpD,CAAC;AAED,IAAO,oBAAQ;",
+  "names": ["CircularProgress"]
 }

package/app/Masthead/Masthead.stories.d.ts

@@ -9,8 +9,35 @@ declare namespace _default {
     export let displayName: string;
 }
 export default _default;
+export namespace WithControls {
+    function render(args: any): React.JSX.Element;
+    namespace args {
+        let color: string;
+        let showHint: boolean;
+    }
+    namespace argTypes {
+        export namespace color_1 {
+            namespace control {
+                let type: string;
+            }
+            let options: string[];
+        }
+        export { color_1 as color };
+        export namespace showHint_1 {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        export { showHint_1 as showHint };
+    }
+    namespace parameters {
+        namespace controls {
+            let exclude: string[];
+        }
+    }
+}
 export { Default } from "@digigov/ui/app/Masthead/__stories__/Default";
 export { Secondary } from "@digigov/ui/app/Masthead/__stories__/Secondary";
 export { WithLogo } from "@digigov/ui/app/Masthead/__stories__/WithLogo";
 export { WithElements } from "@digigov/ui/app/Masthead/__stories__/WithElements";
-import Masthead from '@digigov/ui/app/Masthead';
+import { Masthead } from '@digigov/ui/app/Masthead';
+import React from 'react';

package/app/Modal/Modal.stories.d.ts

@@ -8,10 +8,29 @@ declare namespace _default {
     export let displayName: string;
 }
 export default _default;
+export namespace WithControls {
+    function render(args: any): React.JSX.Element;
+    namespace args {
+        let dense: boolean;
+        let gaps: boolean;
+    }
+    namespace argsTypes {
+        export namespace dense_1 {
+            let control: string;
+        }
+        export { dense_1 as dense };
+        export namespace gaps_1 {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        export { gaps_1 as gaps };
+    }
+}
 export { Default } from "@digigov/ui/app/Modal/__stories__/Default";
 export { AlertDialog } from "@digigov/ui/app/Modal/__stories__/AlertDialog";
 export { Dense } from "@digigov/ui/app/Modal/__stories__/Dense";
 export { WithHooks } from "@digigov/ui/app/Modal/__stories__/WithHooks";
 export { Auto } from "@digigov/ui/app/Modal/__stories__/Auto";
 export { WithoutModalGaps } from "@digigov/ui/app/Modal/__stories__/WithoutModalGaps";
-import Modal from '@digigov/ui/app/Modal';
+import { Modal } from '@digigov/ui/app/Modal';
+import React from 'react';

package/app/Modal/index.web/index.js

@@ -36,9 +36,9 @@ const ModalBase = React.forwardRef(
         "aria-modal": "true",
         ...props
       },
-      /* @__PURE__ */ React.createElement("span", { tabIndex: -1, ref: firstModalElement, "aria-hidden": "true" }),
+      /* @__PURE__ */ React.createElement("span", { tabIndex: -1, ref: firstModalElement }),
       open && children,
-      /* @__PURE__ */ React.createElement("span", { tabIndex: 0, ref: lastModalElement, "aria-hidden": "true" })
+      /* @__PURE__ */ React.createElement("span", { tabIndex: 0, ref: lastModalElement })
     );
   }
 );

package/app/Modal/index.web.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/app/Modal/index.web.tsx"],
-  "sourcesContent": ["import React, { useCallback, useEffect, useRef } from 'react';\nimport ModalContainer, {\n  ModalContainerProps,\n} from '@digigov/react-core/ModalContainer';\nimport useKeypress from '@digigov/ui/utils/hooks/useKeypress';\n\nexport interface ModalProps extends ModalContainerProps {\n  onEscape?: () => void;\n}\n\nexport const Modal = React.forwardRef<HTMLDivElement, ModalProps>(\n  function Modal({ ...props }, ref) {\n    if (props.open) {\n      return <ModalBase {...props} ref={ref} />;\n    } else {\n      return null;\n    }\n  }\n);\n\nexport const ModalBase = React.forwardRef<HTMLDivElement, ModalProps>(\n  function ModalBase({ open, children, onEscape, ...props }, ref) {\n    const firstModalElement = useRef<HTMLSpanElement>(null);\n    const lastModalElement = useRef<HTMLSpanElement>(null);\n    const handleFocus = useCallback(() => {\n      firstModalElement.current?.focus();\n    }, []);\n    useKeypress('Escape', onEscape);\n    useEffect(() => {\n      const lastModalElementInstance = lastModalElement.current;\n      handleFocus();\n      lastModalElementInstance?.addEventListener('focus', handleFocus);\n      return () => {\n        lastModalElementInstance?.removeEventListener('focus', handleFocus);\n      };\n    }, []);\n    return (\n      <ModalContainer\n        open={open}\n        role=\"dialog\"\n        ref={ref}\n        aria-hidden=\"false\"\n        aria-modal=\"true\"\n        {...props}\n      >\n        <span tabIndex={-1} ref={firstModalElement} aria-hidden=\"true\" />\n        {open && children}\n        <span tabIndex={0} ref={lastModalElement} aria-hidden=\"true\" />\n      </ModalContainer>\n    );\n  }\n);\n\nexport default Modal;\n"],
-  "mappings": "AAAA,OAAO,SAAS,aAAa,WAAW,cAAc;AACtD,OAAO,oBAEA;AACP,OAAO,iBAAiB;AAMjB,MAAM,QAAQ,MAAM;AAAA,EACzB,SAASA,OAAM,EAAE,GAAG,MAAM,GAAG,KAAK;AAChC,QAAI,MAAM,MAAM;AACd,aAAO,oCAAC,aAAW,GAAG,OAAO,KAAU;AAAA,IACzC,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,MAAM,YAAY,MAAM;AAAA,EAC7B,SAASC,WAAU,EAAE,MAAM,UAAU,UAAU,GAAG,MAAM,GAAG,KAAK;AAC9D,UAAM,oBAAoB,OAAwB,IAAI;AACtD,UAAM,mBAAmB,OAAwB,IAAI;AACrD,UAAM,cAAc,YAAY,MAAM;AACpC,wBAAkB,SAAS,MAAM;AAAA,IACnC,GAAG,CAAC,CAAC;AACL,gBAAY,UAAU,QAAQ;AAC9B,cAAU,MAAM;AACd,YAAM,2BAA2B,iBAAiB;AAClD,kBAAY;AACZ,gCAA0B,iBAAiB,SAAS,WAAW;AAC/D,aAAO,MAAM;AACX,kCAA0B,oBAAoB,SAAS,WAAW;AAAA,MACpE;AAAA,IACF,GAAG,CAAC,CAAC;AACL,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,eAAY;AAAA,QACZ,cAAW;AAAA,QACV,GAAG;AAAA;AAAA,MAEJ,oCAAC,UAAK,UAAU,IAAI,KAAK,mBAAmB,eAAY,QAAO;AAAA,MAC9D,QAAQ;AAAA,MACT,oCAAC,UAAK,UAAU,GAAG,KAAK,kBAAkB,eAAY,QAAO;AAAA,IAC/D;AAAA,EAEJ;AACF;AAEA,IAAO,oBAAQ;",
+  "sourcesContent": ["import React, { useCallback, useEffect, useRef } from 'react';\nimport ModalContainer, {\n  ModalContainerProps,\n} from '@digigov/react-core/ModalContainer';\nimport useKeypress from '@digigov/ui/utils/hooks/useKeypress';\n\nexport interface ModalProps extends ModalContainerProps {\n  onEscape?: () => void;\n}\n\nexport const Modal = React.forwardRef<HTMLDivElement, ModalProps>(\n  function Modal({ ...props }, ref) {\n    if (props.open) {\n      return <ModalBase {...props} ref={ref} />;\n    } else {\n      return null;\n    }\n  }\n);\n\nexport const ModalBase = React.forwardRef<HTMLDivElement, ModalProps>(\n  function ModalBase({ open, children, onEscape, ...props }, ref) {\n    const firstModalElement = useRef<HTMLSpanElement>(null);\n    const lastModalElement = useRef<HTMLSpanElement>(null);\n    const handleFocus = useCallback(() => {\n      firstModalElement.current?.focus();\n    }, []);\n    useKeypress('Escape', onEscape);\n    useEffect(() => {\n      const lastModalElementInstance = lastModalElement.current;\n      handleFocus();\n      lastModalElementInstance?.addEventListener('focus', handleFocus);\n      return () => {\n        lastModalElementInstance?.removeEventListener('focus', handleFocus);\n      };\n    }, []);\n    return (\n      <ModalContainer\n        open={open}\n        role=\"dialog\"\n        ref={ref}\n        aria-hidden=\"false\"\n        aria-modal=\"true\"\n        {...props}\n      >\n        <span tabIndex={-1} ref={firstModalElement} />\n        {open && children}\n        <span tabIndex={0} ref={lastModalElement} />\n      </ModalContainer>\n    );\n  }\n);\n\nexport default Modal;\n"],
+  "mappings": "AAAA,OAAO,SAAS,aAAa,WAAW,cAAc;AACtD,OAAO,oBAEA;AACP,OAAO,iBAAiB;AAMjB,MAAM,QAAQ,MAAM;AAAA,EACzB,SAASA,OAAM,EAAE,GAAG,MAAM,GAAG,KAAK;AAChC,QAAI,MAAM,MAAM;AACd,aAAO,oCAAC,aAAW,GAAG,OAAO,KAAU;AAAA,IACzC,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,MAAM,YAAY,MAAM;AAAA,EAC7B,SAASC,WAAU,EAAE,MAAM,UAAU,UAAU,GAAG,MAAM,GAAG,KAAK;AAC9D,UAAM,oBAAoB,OAAwB,IAAI;AACtD,UAAM,mBAAmB,OAAwB,IAAI;AACrD,UAAM,cAAc,YAAY,MAAM;AACpC,wBAAkB,SAAS,MAAM;AAAA,IACnC,GAAG,CAAC,CAAC;AACL,gBAAY,UAAU,QAAQ;AAC9B,cAAU,MAAM;AACd,YAAM,2BAA2B,iBAAiB;AAClD,kBAAY;AACZ,gCAA0B,iBAAiB,SAAS,WAAW;AAC/D,aAAO,MAAM;AACX,kCAA0B,oBAAoB,SAAS,WAAW;AAAA,MACpE;AAAA,IACF,GAAG,CAAC,CAAC;AACL,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,eAAY;AAAA,QACZ,cAAW;AAAA,QACV,GAAG;AAAA;AAAA,MAEJ,oCAAC,UAAK,UAAU,IAAI,KAAK,mBAAmB;AAAA,MAC3C,QAAQ;AAAA,MACT,oCAAC,UAAK,UAAU,GAAG,KAAK,kBAAkB;AAAA,IAC5C;AAAA,EAEJ;AACF;AAEA,IAAO,oBAAQ;",
   "names": ["Modal", "ModalBase"]
 }

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/cjs/app/Loader/index.native.js.map

@@ -1,7 +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 { CircularProgressProps } from '@digigov/react-core/CircularProgress';\n\nexport const CircularProgress: React.FC<CircularProgressProps> = ({\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,mBAAoD,CAAC;AAAA,EAChE,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;",
+  "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

@@ -1,7 +1,13 @@
+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))
@@ -11,12 +17,37 @@ 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-
+  // 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);
-__reExport(index_web_exports, require("@digigov/react-core/CircularProgress"), module.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 = {
-  ...require("@digigov/react-core/CircularProgress")
+  CircularProgress,
+  ...require("@digigov/react-core/CircularProgressBase")
 });
 //# sourceMappingURL=index.web.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/app/Loader/index.web.tsx"],
-  "sourcesContent": ["export * from '@digigov/react-core/CircularProgress';\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,8BAAc,iDAAd;",
-  "names": []
+  "sourcesContent": ["import React from 'react';\nexport * from '@digigov/react-core/CircularProgressBase';\nimport CircularProgressBase, {\n  CircularProgressBaseProps,\n} from '@digigov/react-core/CircularProgressBase';\nimport { useNotificationArea } from '@digigov/ui/app/hooks/useNotificationArea';\n\nexport interface CircularProgressProps extends CircularProgressBaseProps {\n  /**\n   * loadingText prop is optional\n   * Text for screen readers when loading starts\n   * @default \"\u0393\u03AF\u03BD\u03B5\u03C4\u03B1\u03B9 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7...\"\n   */\n  loadingText?: string;\n  /**\n   * loadingFinishedText prop is optional\n   * Text for screen readers when loading finishes\n   * @default \"\u0397 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7 \u03BF\u03BB\u03BF\u03BA\u03BB\u03B7\u03C1\u03CE\u03B8\u03B7\u03BA\u03B5.\"\n   */\n  loadingFinishedText?: string;\n}\n\nexport const CircularProgress = React.forwardRef<\n  SVGElement,\n  CircularProgressProps\n>(function CircularProgress(\n  {\n    loadingText = '\u0393\u03AF\u03BD\u03B5\u03C4\u03B1\u03B9 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7...',\n    loadingFinishedText = '\u0397 \u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7 \u03BF\u03BB\u03BF\u03BA\u03BB\u03B7\u03C1\u03CE\u03B8\u03B7\u03BA\u03B5.',\n    ...props\n  },\n  ref\n) {\n  useNotificationArea(loadingText, loadingFinishedText);\n\n  return <CircularProgressBase ref={ref} {...props} />;\n});\n\nexport default CircularProgress;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,8BAAc,qDADd;AAEA,kCAEO;AACP,iCAAoC;AAiB7B,MAAM,mBAAmB,aAAAA,QAAM,WAGpC,SAASC,kBACT;AAAA,EACE,cAAc;AAAA,EACd,sBAAsB;AAAA,EACtB,GAAG;AACL,GACA,KACA;AACA,sDAAoB,aAAa,mBAAmB;AAEpD,SAAO,6BAAAD,QAAA,cAAC,4BAAAE,SAAA,EAAqB,KAAW,GAAG,OAAO;AACpD,CAAC;AAED,IAAO,oBAAQ;",
+  "names": ["React", "CircularProgress", "CircularProgressBase"]
 }

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

@@ -70,9 +70,9 @@ const ModalBase = import_react.default.forwardRef(
         "aria-modal": "true",
         ...props
       },
-      /* @__PURE__ */ import_react.default.createElement("span", { tabIndex: -1, ref: firstModalElement, "aria-hidden": "true" }),
+      /* @__PURE__ */ import_react.default.createElement("span", { tabIndex: -1, ref: firstModalElement }),
       open && children,
-      /* @__PURE__ */ import_react.default.createElement("span", { tabIndex: 0, ref: lastModalElement, "aria-hidden": "true" })
+      /* @__PURE__ */ import_react.default.createElement("span", { tabIndex: 0, ref: lastModalElement })
     );
   }
 );

package/cjs/app/Modal/index.web.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/app/Modal/index.web.tsx"],
-  "sourcesContent": ["import React, { useCallback, useEffect, useRef } from 'react';\nimport ModalContainer, {\n  ModalContainerProps,\n} from '@digigov/react-core/ModalContainer';\nimport useKeypress from '@digigov/ui/utils/hooks/useKeypress';\n\nexport interface ModalProps extends ModalContainerProps {\n  onEscape?: () => void;\n}\n\nexport const Modal = React.forwardRef<HTMLDivElement, ModalProps>(\n  function Modal({ ...props }, ref) {\n    if (props.open) {\n      return <ModalBase {...props} ref={ref} />;\n    } else {\n      return null;\n    }\n  }\n);\n\nexport const ModalBase = React.forwardRef<HTMLDivElement, ModalProps>(\n  function ModalBase({ open, children, onEscape, ...props }, ref) {\n    const firstModalElement = useRef<HTMLSpanElement>(null);\n    const lastModalElement = useRef<HTMLSpanElement>(null);\n    const handleFocus = useCallback(() => {\n      firstModalElement.current?.focus();\n    }, []);\n    useKeypress('Escape', onEscape);\n    useEffect(() => {\n      const lastModalElementInstance = lastModalElement.current;\n      handleFocus();\n      lastModalElementInstance?.addEventListener('focus', handleFocus);\n      return () => {\n        lastModalElementInstance?.removeEventListener('focus', handleFocus);\n      };\n    }, []);\n    return (\n      <ModalContainer\n        open={open}\n        role=\"dialog\"\n        ref={ref}\n        aria-hidden=\"false\"\n        aria-modal=\"true\"\n        {...props}\n      >\n        <span tabIndex={-1} ref={firstModalElement} aria-hidden=\"true\" />\n        {open && children}\n        <span tabIndex={0} ref={lastModalElement} aria-hidden=\"true\" />\n      </ModalContainer>\n    );\n  }\n);\n\nexport default Modal;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsD;AACtD,4BAEO;AACP,yBAAwB;AAMjB,MAAM,QAAQ,aAAAA,QAAM;AAAA,EACzB,SAASC,OAAM,EAAE,GAAG,MAAM,GAAG,KAAK;AAChC,QAAI,MAAM,MAAM;AACd,aAAO,6BAAAD,QAAA,cAAC,aAAW,GAAG,OAAO,KAAU;AAAA,IACzC,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,SAASE,WAAU,EAAE,MAAM,UAAU,UAAU,GAAG,MAAM,GAAG,KAAK;AAC9D,UAAM,wBAAoB,qBAAwB,IAAI;AACtD,UAAM,uBAAmB,qBAAwB,IAAI;AACrD,UAAM,kBAAc,0BAAY,MAAM;AACpC,wBAAkB,SAAS,MAAM;AAAA,IACnC,GAAG,CAAC,CAAC;AACL,2BAAAC,SAAY,UAAU,QAAQ;AAC9B,gCAAU,MAAM;AACd,YAAM,2BAA2B,iBAAiB;AAClD,kBAAY;AACZ,gCAA0B,iBAAiB,SAAS,WAAW;AAC/D,aAAO,MAAM;AACX,kCAA0B,oBAAoB,SAAS,WAAW;AAAA,MACpE;AAAA,IACF,GAAG,CAAC,CAAC;AACL,WACE,6BAAAH,QAAA;AAAA,MAAC,sBAAAI;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,eAAY;AAAA,QACZ,cAAW;AAAA,QACV,GAAG;AAAA;AAAA,MAEJ,6BAAAJ,QAAA,cAAC,UAAK,UAAU,IAAI,KAAK,mBAAmB,eAAY,QAAO;AAAA,MAC9D,QAAQ;AAAA,MACT,6BAAAA,QAAA,cAAC,UAAK,UAAU,GAAG,KAAK,kBAAkB,eAAY,QAAO;AAAA,IAC/D;AAAA,EAEJ;AACF;AAEA,IAAO,oBAAQ;",
+  "sourcesContent": ["import React, { useCallback, useEffect, useRef } from 'react';\nimport ModalContainer, {\n  ModalContainerProps,\n} from '@digigov/react-core/ModalContainer';\nimport useKeypress from '@digigov/ui/utils/hooks/useKeypress';\n\nexport interface ModalProps extends ModalContainerProps {\n  onEscape?: () => void;\n}\n\nexport const Modal = React.forwardRef<HTMLDivElement, ModalProps>(\n  function Modal({ ...props }, ref) {\n    if (props.open) {\n      return <ModalBase {...props} ref={ref} />;\n    } else {\n      return null;\n    }\n  }\n);\n\nexport const ModalBase = React.forwardRef<HTMLDivElement, ModalProps>(\n  function ModalBase({ open, children, onEscape, ...props }, ref) {\n    const firstModalElement = useRef<HTMLSpanElement>(null);\n    const lastModalElement = useRef<HTMLSpanElement>(null);\n    const handleFocus = useCallback(() => {\n      firstModalElement.current?.focus();\n    }, []);\n    useKeypress('Escape', onEscape);\n    useEffect(() => {\n      const lastModalElementInstance = lastModalElement.current;\n      handleFocus();\n      lastModalElementInstance?.addEventListener('focus', handleFocus);\n      return () => {\n        lastModalElementInstance?.removeEventListener('focus', handleFocus);\n      };\n    }, []);\n    return (\n      <ModalContainer\n        open={open}\n        role=\"dialog\"\n        ref={ref}\n        aria-hidden=\"false\"\n        aria-modal=\"true\"\n        {...props}\n      >\n        <span tabIndex={-1} ref={firstModalElement} />\n        {open && children}\n        <span tabIndex={0} ref={lastModalElement} />\n      </ModalContainer>\n    );\n  }\n);\n\nexport default Modal;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsD;AACtD,4BAEO;AACP,yBAAwB;AAMjB,MAAM,QAAQ,aAAAA,QAAM;AAAA,EACzB,SAASC,OAAM,EAAE,GAAG,MAAM,GAAG,KAAK;AAChC,QAAI,MAAM,MAAM;AACd,aAAO,6BAAAD,QAAA,cAAC,aAAW,GAAG,OAAO,KAAU;AAAA,IACzC,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,MAAM,YAAY,aAAAA,QAAM;AAAA,EAC7B,SAASE,WAAU,EAAE,MAAM,UAAU,UAAU,GAAG,MAAM,GAAG,KAAK;AAC9D,UAAM,wBAAoB,qBAAwB,IAAI;AACtD,UAAM,uBAAmB,qBAAwB,IAAI;AACrD,UAAM,kBAAc,0BAAY,MAAM;AACpC,wBAAkB,SAAS,MAAM;AAAA,IACnC,GAAG,CAAC,CAAC;AACL,2BAAAC,SAAY,UAAU,QAAQ;AAC9B,gCAAU,MAAM;AACd,YAAM,2BAA2B,iBAAiB;AAClD,kBAAY;AACZ,gCAA0B,iBAAiB,SAAS,WAAW;AAC/D,aAAO,MAAM;AACX,kCAA0B,oBAAoB,SAAS,WAAW;AAAA,MACpE;AAAA,IACF,GAAG,CAAC,CAAC;AACL,WACE,6BAAAH,QAAA;AAAA,MAAC,sBAAAI;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,eAAY;AAAA,QACZ,cAAW;AAAA,QACV,GAAG;AAAA;AAAA,MAEJ,6BAAAJ,QAAA,cAAC,UAAK,UAAU,IAAI,KAAK,mBAAmB;AAAA,MAC3C,QAAQ;AAAA,MACT,6BAAAA,QAAA,cAAC,UAAK,UAAU,GAAG,KAAK,kBAAkB;AAAA,IAC5C;AAAA,EAEJ;AACF;AAEA,IAAO,oBAAQ;",
   "names": ["React", "Modal", "ModalBase", "useKeypress", "ModalContainer"]
 }

package/cjs/app/hooks/useNotificationArea/index.js

@@ -0,0 +1,99 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useNotificationArea_exports = {};
+__export(useNotificationArea_exports, {
+  useNotificationArea: () => useNotificationArea
+});
+module.exports = __toCommonJS(useNotificationArea_exports);
+var import_react = require("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 = (0, import_react.useRef)(generateUniqueId());
+  const notificationRef = (0, import_react.useRef)(null);
+  const getActiveIds = (0, import_react.useCallback)(() => {
+    const current = notificationRef.current;
+    const value = current?.getAttribute(activeSpinnersAttr) || "";
+    return value.split(",").filter(Boolean);
+  }, [notificationRef]);
+  const setActiveSpinnerId = (0, import_react.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 = (0, import_react.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;
+    }
+  };
+  (0, import_react.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
+  ]);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useNotificationArea
+});
+//# sourceMappingURL=useNotificationArea.js.map