@digigov/ui 2.0.0-a32ad9b2 → 2.0.0-abd768eb

package/app/BannerContainer/__stories__/CookiesBanner.d.ts

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

package/app/Footer/Footer.stories.d.ts

@@ -4,6 +4,8 @@ declare namespace _default {
     export let link: string;
     export let defaultWidth: string;
     export { Footer as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;

package/app/Footer/__stories__/Default.d.ts

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

package/app/Footer/__stories__/DefaultCopyright.d.ts

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

package/app/Footer/__stories__/FooterAllInclusive.d.ts

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

package/app/Footer/__stories__/FooterWithLink.d.ts

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

package/app/Footer/__stories__/FooterWithLogo.d.ts

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

package/app/Footer/__stories__/FooterWithSecondaryNavigation.d.ts

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

package/app/Footer/__stories__/FooterWithText.d.ts

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

package/app/Footer/__stories__/YearCopyright.d.ts

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

package/app/Header/Header.stories.d.ts

@@ -1,6 +1,8 @@
 declare namespace _default {
     export let title: string;
     export { Header as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
     export let description: string;
     export let link: string;

package/app/Header/__stories__/Default.d.ts

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

package/app/Header/__stories__/WithHeaderNavigation.d.ts

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

package/app/Header/__stories__/WithNavigation.d.ts

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

package/app/Header/__stories__/WithServiceName.d.ts

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

package/app/Header/__stories__/WithServiceNameAndLogo.d.ts

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

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

@@ -6,4 +6,5 @@ declare namespace _default {
 export default _default;
 export { Default } from "@digigov/ui/app/Loader/__stories__/Default";
 export { FullPageLoader } from "@digigov/ui/app/Loader/__stories__/FullPageLoader";
+export { AccessibilityLoader } from "@digigov/ui/app/Loader/__stories__/AccessibilityLoader";
 import CircularProgress from '@digigov/ui/app/Loader';

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__/Default.d.ts

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

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

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

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

@@ -4,6 +4,8 @@ declare namespace _default {
     export let link: string;
     export let defaultWidth: string;
     export { Masthead as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;

package/app/Masthead/__stories__/Default.d.ts

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

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

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

package/app/Masthead/__stories__/WithElements.d.ts

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

package/app/Masthead/__stories__/WithLogo.d.ts

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

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

@@ -3,6 +3,8 @@ declare namespace _default {
     export let description: string;
     export let link: string;
     export { Modal as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;

package/app/Modal/__stories__/AlertDialog.d.ts

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

package/app/Modal/__stories__/Auto.d.ts

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

package/app/Modal/__stories__/Default.d.ts

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

package/app/Modal/__stories__/Dense.d.ts

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

package/app/Modal/__stories__/WithHooks.d.ts

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

package/app/Modal/__stories__/WithoutModalGaps.d.ts

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

package/app/NotFound/NotFound.stories.d.ts

@@ -1,6 +1,8 @@
 declare namespace _default {
     export let title: string;
     export { NotFound as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;

package/app/NotFound/__stories__/Default.d.ts

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

package/app/Panel/Panel.stories.d.ts

@@ -3,6 +3,8 @@ declare namespace _default {
     export let description: string;
     export let link: string;
     export { Panel as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;

package/app/Panel/__stories__/Default.d.ts

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

package/app/PhaseBannerHeader/PhaseBannerHeader.stories.d.ts

@@ -1,6 +1,8 @@
 declare namespace _default {
     export let title: string;
     export { PhaseBannerHeader as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;

package/app/PhaseBannerHeader/__stories__/Default.d.ts

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

package/app/QrCodeScanner/__stories__/Default.d.ts

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

package/app/QrCodeScanner/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/app/QrCodeScanner/index.tsx"],
-  "sourcesContent": ["import React from 'react';\n\nconst QrReader = React.lazy(() => import('@uides/react-qr-reader'));\n\nexport interface QrCodeScannerProps {\n  style?: React.CSSProperties;\n  dataType?: 'url' | 'text';\n  legacyMode?: boolean;\n  validate?: (...args) => boolean;\n  onScan: (...args) => void;\n  onError: (err: any, data: any) => void;\n  onLoad?: (...args) => void;\n  onImageLoad?: (...args) => void;\n  delay?: number;\n  facingMode?: 'user' | 'environment';\n  showViewFinder?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * QRCodeScanner assumes that the data provided inside the QR code image,\n * are a HTTP link, thus it uses the `encodeURI` function to escape\n * all scanned data that will be forwarded to the `onScan` function\n *\n * When a QR code is scanned, before we run the `onScan` callback function,\n * we do the following:\n *\n * 1. Run a validator function provided in the props of QrCodeScanner component\n *    that receives the *raw* scanned data and returns a boolean type. (eg. check\n *    if it's a gov.gr subdomain, or that it matches the current domain)\n * 2. If the validator returns `true`, then construct a URL object from the data provided\n *    and check if the protocol is `https` and the `origin` is the same as the origin of this page\n * 2. Automatically fallback to the `onError` callback function, if the validation or url check fail\n * 3. Finally, run `onScan` callback function with the scanned data encoded as a URI.\n *\n */\n\nexport const QrCodeScanner: React.FC<QrCodeScannerProps> = ({\n  children,\n  validate,\n  onScan,\n  onError,\n  dataType = 'url',\n  legacyMode = false,\n  ...props\n}) => {\n  if (dataType === 'text') {\n    console.warn(\n      `Security Warning! The \\`text\\` dataType could be used to inject XSS code to your application database or user DOM.\n\nIn order to be safe, you can:\n1. Use a sanitizer function inside the \\`onScan\\` callback function that makes sure the data is not posing a threat to your app\n2. Contact @digigov-ui for any further details and feature requests.\n3. Read more about xss https://owasp.org/www-community/attacks/xss/\n`\n    );\n  }\n  const handleOnScan = (data) => {\n    if (data) {\n      if (dataType === 'url') {\n        try {\n          new URL(data);\n        } catch {\n          return onError(\n            new Error(\n              '@digigov-ui XSS Validation failed: qr code payload should follow the pattern `https://dilosi.services.gov.gr/show/:reference_code`'\n            ),\n            data\n          );\n        }\n      }\n      // run a validator function provided by the application code\n      if (validate && !validate(data)) {\n        return onError(\n          new Error('Custom QR Code payload validation failed'),\n          data\n        );\n      }\n      // proceed with application defined callback function\n      onScan(data);\n    }\n  };\n  return (\n    <>\n      <QrReader\n        delay={100}\n        onError={onError}\n        onScan={handleOnScan}\n        legacyMode={legacyMode}\n        {...props}\n      />\n      {children}\n    </>\n  );\n};\n\nexport default QrCodeScanner;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAElB,MAAM,WAAW,MAAM,KAAK,MAAM,OAAO,wBAAwB,CAAC;AAoC3D,MAAM,gBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,MAAI,aAAa,QAAQ;AACvB,YAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOF;AAAA,EACF;AACA,QAAM,eAAe,CAAC,SAAS;AAC7B,QAAI,MAAM;AACR,UAAI,aAAa,OAAO;AACtB,YAAI;AACF,cAAI,IAAI,IAAI;AAAA,QACd,QAAQ;AACN,iBAAO;AAAA,YACL,IAAI;AAAA,cACF;AAAA,YACF;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,UAAI,YAAY,CAAC,SAAS,IAAI,GAAG;AAC/B,eAAO;AAAA,UACL,IAAI,MAAM,0CAA0C;AAAA,UACpD;AAAA,QACF;AAAA,MACF;AAEA,aAAO,IAAI;AAAA,IACb;AAAA,EACF;AACA,SACE,0DACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACC,QACH;AAEJ;AAEA,IAAO,wBAAQ;",
+  "sourcesContent": ["import React from 'react';\n\n// @ts-ignore\nconst QrReader = React.lazy(() => import('@uides/react-qr-reader'));\n\nexport interface QrCodeScannerProps {\n  style?: React.CSSProperties;\n  dataType?: 'url' | 'text';\n  legacyMode?: boolean;\n  validate?: (...args) => boolean;\n  onScan: (...args) => void;\n  onError: (err: any, data: any) => void;\n  onLoad?: (...args) => void;\n  onImageLoad?: (...args) => void;\n  delay?: number;\n  facingMode?: 'user' | 'environment';\n  showViewFinder?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * QRCodeScanner assumes that the data provided inside the QR code image,\n * are a HTTP link, thus it uses the `encodeURI` function to escape\n * all scanned data that will be forwarded to the `onScan` function\n *\n * When a QR code is scanned, before we run the `onScan` callback function,\n * we do the following:\n *\n * 1. Run a validator function provided in the props of QrCodeScanner component\n *    that receives the *raw* scanned data and returns a boolean type. (eg. check\n *    if it's a gov.gr subdomain, or that it matches the current domain)\n * 2. If the validator returns `true`, then construct a URL object from the data provided\n *    and check if the protocol is `https` and the `origin` is the same as the origin of this page\n * 2. Automatically fallback to the `onError` callback function, if the validation or url check fail\n * 3. Finally, run `onScan` callback function with the scanned data encoded as a URI.\n *\n */\n\nexport const QrCodeScanner: React.FC<QrCodeScannerProps> = ({\n  children,\n  validate,\n  onScan,\n  onError,\n  dataType = 'url',\n  legacyMode = false,\n  ...props\n}) => {\n  if (dataType === 'text') {\n    console.warn(\n      `Security Warning! The \\`text\\` dataType could be used to inject XSS code to your application database or user DOM.\n\nIn order to be safe, you can:\n1. Use a sanitizer function inside the \\`onScan\\` callback function that makes sure the data is not posing a threat to your app\n2. Contact @digigov-ui for any further details and feature requests.\n3. Read more about xss https://owasp.org/www-community/attacks/xss/\n`\n    );\n  }\n  const handleOnScan = (data) => {\n    if (data) {\n      if (dataType === 'url') {\n        try {\n          new URL(data);\n        } catch {\n          return onError(\n            new Error(\n              '@digigov-ui XSS Validation failed: qr code payload should follow the pattern `https://dilosi.services.gov.gr/show/:reference_code`'\n            ),\n            data\n          );\n        }\n      }\n      // run a validator function provided by the application code\n      if (validate && !validate(data)) {\n        return onError(\n          new Error('Custom QR Code payload validation failed'),\n          data\n        );\n      }\n      // proceed with application defined callback function\n      onScan(data);\n    }\n  };\n  return (\n    <>\n      <QrReader\n        delay={100}\n        onError={onError}\n        onScan={handleOnScan}\n        legacyMode={legacyMode}\n        {...props}\n      />\n      {children}\n    </>\n  );\n};\n\nexport default QrCodeScanner;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAGlB,MAAM,WAAW,MAAM,KAAK,MAAM,OAAO,wBAAwB,CAAC;AAoC3D,MAAM,gBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,MAAI,aAAa,QAAQ;AACvB,YAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOF;AAAA,EACF;AACA,QAAM,eAAe,CAAC,SAAS;AAC7B,QAAI,MAAM;AACR,UAAI,aAAa,OAAO;AACtB,YAAI;AACF,cAAI,IAAI,IAAI;AAAA,QACd,QAAQ;AACN,iBAAO;AAAA,YACL,IAAI;AAAA,cACF;AAAA,YACF;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,UAAI,YAAY,CAAC,SAAS,IAAI,GAAG;AAC/B,eAAO;AAAA,UACL,IAAI,MAAM,0CAA0C;AAAA,UACpD;AAAA,QACF;AAAA,MACF;AAEA,aAAO,IAAI;AAAA,IACb;AAAA,EACF;AACA,SACE,0DACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACC,QACH;AAEJ;AAEA,IAAO,wBAAQ;",
   "names": []
 }

package/app/QrCodeViewer/QRCode.stories.d.ts

@@ -1,6 +1,8 @@
 declare namespace _default {
     export let title: string;
     export { QrCodeViewer as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;

package/app/QrCodeViewer/__stories__/Custom.d.ts

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

package/app/QrCodeViewer/__stories__/Default.d.ts

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

package/app/Skeleton/Skeleton.stories.d.ts

@@ -2,6 +2,8 @@ declare namespace _default {
     export let title: string;
     export let description: string;
     export { Skeleton as component };
+    export let tags: string[];
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;

package/app/Skeleton/__stories__/Button.d.ts

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

package/app/Skeleton/__stories__/Circular.d.ts

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

package/app/Skeleton/__stories__/Default.d.ts

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

package/app/Skeleton/__stories__/NoAnimation.d.ts

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

package/app/Skeleton/__stories__/Rectangular.d.ts

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

package/app/Skeleton/__stories__/SpecificWidthAndHeight.d.ts

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

package/app/Skeleton/__stories__/TextSizes.d.ts

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

package/app/Skeleton/__stories__/UnderTypography.d.ts

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

package/app/Skeleton/__stories__/WithChildren.d.ts

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

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/{Loader/Loader.stories → hooks/useNotificationArea}/package.json

@@ -2,5 +2,5 @@
   "sideEffects": false,
   "module": "./index.js",
   "types": "./index.d.ts",
-  "main": "../../../cjs/app/Loader/Loader.stories/index.js"
+  "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": []
+}