@reykjavik/hanna-react 0.10.59 → 0.10.62

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.59",
+	"version": "0.10.62",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -17,10 +17,10 @@
 		"@hugsmidjan/react": "^0.4.17",
 		"@reykjavik/hanna-css": "^0.3.3",
 		"@reykjavik/hanna-utils": "^0.1.7",
-		"@types/react": "16",
+		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^3.0.2",
-		"@types/react-dom": "16",
+		"@types/react-dom": "^17.0.9",
 		"@types/react-transition-group": "^4.4.0",
 		"iframe-resizer-react": "^1.1.0",
 		"react-autosuggest": "^10.1.0",
@@ -38,379 +38,5 @@
 	},
 	"sideEffects": [
 		"**/focus-visible.js"
-	],
-	"exports": {
-		"./AccordionList": {
-			"import": "./esm/AccordionList.js",
-			"require": "./AccordionList.js"
-		},
-		"./ActionCards": {
-			"import": "./esm/ActionCards.js",
-			"require": "./ActionCards.js"
-		},
-		"./Alert": {
-			"import": "./esm/Alert.js",
-			"require": "./Alert.js"
-		},
-		"./ArticleCards": {
-			"import": "./esm/ArticleCards.js",
-			"require": "./ArticleCards.js"
-		},
-		"./ArticleCarousel": {
-			"import": "./esm/ArticleCarousel.js",
-			"require": "./ArticleCarousel.js"
-		},
-		"./ArticleMeta": {
-			"import": "./esm/ArticleMeta.js",
-			"require": "./ArticleMeta.js"
-		},
-		"./assets": {
-			"import": "./esm/assets.js",
-			"require": "./assets.js"
-		},
-		"./Attention": {
-			"import": "./esm/Attention.js",
-			"require": "./Attention.js"
-		},
-		"./BasicTable": {
-			"import": "./esm/BasicTable.js",
-			"require": "./BasicTable.js"
-		},
-		"./BgBox": {
-			"import": "./esm/BgBox.js",
-			"require": "./BgBox.js"
-		},
-		"./Bling": {
-			"import": "./esm/Bling.js",
-			"require": "./Bling.js"
-		},
-		"./BlockBreak": {
-			"import": "./esm/BlockBreak.js",
-			"require": "./BlockBreak.js"
-		},
-		"./BlockQuote": {
-			"import": "./esm/BlockQuote.js",
-			"require": "./BlockQuote.js"
-		},
-		"./BreadCrumbs": {
-			"import": "./esm/BreadCrumbs.js",
-			"require": "./BreadCrumbs.js"
-		},
-		"./ButtonBack": {
-			"import": "./esm/ButtonBack.js",
-			"require": "./ButtonBack.js"
-		},
-		"./ButtonBar": {
-			"import": "./esm/ButtonBar.js",
-			"require": "./ButtonBar.js"
-		},
-		"./ButtonPrimary": {
-			"import": "./esm/ButtonPrimary.js",
-			"require": "./ButtonPrimary.js"
-		},
-		"./ButtonSecondary": {
-			"import": "./esm/ButtonSecondary.js",
-			"require": "./ButtonSecondary.js"
-		},
-		"./ButtonTertiary": {
-			"import": "./esm/ButtonTertiary.js",
-			"require": "./ButtonTertiary.js"
-		},
-		"./Carousel": {
-			"import": "./esm/Carousel.js",
-			"require": "./Carousel.js"
-		},
-		"./CarouselStepper": {
-			"import": "./esm/CarouselStepper.js",
-			"require": "./CarouselStepper.js"
-		},
-		"./CenterColumn": {
-			"import": "./esm/CenterColumn.js",
-			"require": "./CenterColumn.js"
-		},
-		"./Checkbox": {
-			"import": "./esm/Checkbox.js",
-			"require": "./Checkbox.js"
-		},
-		"./CheckboxButtonsGroup": {
-			"import": "./esm/CheckboxButtonsGroup.js",
-			"require": "./CheckboxButtonsGroup.js"
-		},
-		"./CheckboxGroup": {
-			"import": "./esm/CheckboxGroup.js",
-			"require": "./CheckboxGroup.js"
-		},
-		"./CityBlock": {
-			"import": "./esm/CityBlock.js",
-			"require": "./CityBlock.js"
-		},
-		"./constants": {
-			"import": "./esm/constants.js",
-			"require": "./constants.js"
-		},
-		"./ContactBubble": {
-			"import": "./esm/ContactBubble.js",
-			"require": "./ContactBubble.js"
-		},
-		"./ContentArticle": {
-			"import": "./esm/ContentArticle.js",
-			"require": "./ContentArticle.js"
-		},
-		"./ContentImage": {
-			"import": "./esm/ContentImage.js",
-			"require": "./ContentImage.js"
-		},
-		"./Datepicker": {
-			"import": "./esm/Datepicker.js",
-			"require": "./Datepicker.js"
-		},
-		"./ExtraLinks": {
-			"import": "./esm/ExtraLinks.js",
-			"require": "./ExtraLinks.js"
-		},
-		"./FeatureList": {
-			"import": "./esm/FeatureList.js",
-			"require": "./FeatureList.js"
-		},
-		"./FieldGroup": {
-			"import": "./esm/FieldGroup.js",
-			"require": "./FieldGroup.js"
-		},
-		"./FileInput": {
-			"import": "./esm/FileInput.js",
-			"require": "./FileInput.js"
-		},
-		"./focus-visible": {
-			"import": "./esm/focus-visible.js",
-			"require": "./focus-visible.js"
-		},
-		"./Foonote": {
-			"import": "./esm/Foonote.js",
-			"require": "./Foonote.js"
-		},
-		"./FooterBadges": {
-			"import": "./esm/FooterBadges.js",
-			"require": "./FooterBadges.js"
-		},
-		"./FooterInfo": {
-			"import": "./esm/FooterInfo.js",
-			"require": "./FooterInfo.js"
-		},
-		"./Footnote": {
-			"import": "./esm/Footnote.js",
-			"require": "./Footnote.js"
-		},
-		"./Form": {
-			"import": "./esm/Form.js",
-			"require": "./Form.js"
-		},
-		"./FormField": {
-			"import": "./esm/FormField.js",
-			"require": "./FormField.js"
-		},
-		"./Gallery": {
-			"import": "./esm/Gallery.js",
-			"require": "./Gallery.js"
-		},
-		"./GridBlocks": {
-			"import": "./esm/GridBlocks.js",
-			"require": "./GridBlocks.js"
-		},
-		"./Heading": {
-			"import": "./esm/Heading.js",
-			"require": "./Heading.js"
-		},
-		"./HeroBlock": {
-			"import": "./esm/HeroBlock.js",
-			"require": "./HeroBlock.js"
-		},
-		"./IframeBlock": {
-			"import": "./esm/IframeBlock.js",
-			"require": "./IframeBlock.js"
-		},
-		"./Illustration": {
-			"import": "./esm/Illustration.js",
-			"require": "./Illustration.js"
-		},
-		"./ImageCards": {
-			"import": "./esm/ImageCards.js",
-			"require": "./ImageCards.js"
-		},
-		"./InfoBlock": {
-			"import": "./esm/InfoBlock.js",
-			"require": "./InfoBlock.js"
-		},
-		"./InfoHero": {
-			"import": "./esm/InfoHero.js",
-			"require": "./InfoHero.js"
-		},
-		"./IslandBlock": {
-			"import": "./esm/IslandBlock.js",
-			"require": "./IslandBlock.js"
-		},
-		"./IslandPageBlock": {
-			"import": "./esm/IslandPageBlock.js",
-			"require": "./IslandPageBlock.js"
-		},
-		"./LabeledTextBlock": {
-			"import": "./esm/LabeledTextBlock.js",
-			"require": "./LabeledTextBlock.js"
-		},
-		"./Layout": {
-			"import": "./esm/Layout.js",
-			"require": "./Layout.js"
-		},
-		"./MainMenu": {
-			"import": "./esm/MainMenu.js",
-			"require": "./MainMenu.js"
-		},
-		"./MiniMetrics": {
-			"import": "./esm/MiniMetrics.js",
-			"require": "./MiniMetrics.js"
-		},
-		"./Modal": {
-			"import": "./esm/Modal.js",
-			"require": "./Modal.js"
-		},
-		"./NameCard": {
-			"import": "./esm/NameCard.js",
-			"require": "./NameCard.js"
-		},
-		"./NameCards": {
-			"import": "./esm/NameCards.js",
-			"require": "./NameCards.js"
-		},
-		"./NewsHero": {
-			"import": "./esm/NewsHero.js",
-			"require": "./NewsHero.js"
-		},
-		"./PageFilter": {
-			"import": "./esm/PageFilter.js",
-			"require": "./PageFilter.js"
-		},
-		"./PageHeading": {
-			"import": "./esm/PageHeading.js",
-			"require": "./PageHeading.js"
-		},
-		"./Picture": {
-			"import": "./esm/Picture.js",
-			"require": "./Picture.js"
-		},
-		"./ProcessOverview": {
-			"import": "./esm/ProcessOverview.js",
-			"require": "./ProcessOverview.js"
-		},
-		"./PullQuote": {
-			"import": "./esm/PullQuote.js",
-			"require": "./PullQuote.js"
-		},
-		"./RadioButtonsGroup": {
-			"import": "./esm/RadioButtonsGroup.js",
-			"require": "./RadioButtonsGroup.js"
-		},
-		"./RadioGroup": {
-			"import": "./esm/RadioGroup.js",
-			"require": "./RadioGroup.js"
-		},
-		"./RelatedLinks": {
-			"import": "./esm/RelatedLinks.js",
-			"require": "./RelatedLinks.js"
-		},
-		"./RowBlock": {
-			"import": "./esm/RowBlock.js",
-			"require": "./RowBlock.js"
-		},
-		"./RowBlockColumn": {
-			"import": "./esm/RowBlockColumn.js",
-			"require": "./RowBlockColumn.js"
-		},
-		"./SearchInput": {
-			"import": "./esm/SearchInput.js",
-			"require": "./SearchInput.js"
-		},
-		"./SearchResults": {
-			"import": "./esm/SearchResults.js",
-			"require": "./SearchResults.js"
-		},
-		"./SeenEffect": {
-			"import": "./esm/SeenEffect.js",
-			"require": "./SeenEffect.js"
-		},
-		"./Selectbox": {
-			"import": "./esm/Selectbox.js",
-			"require": "./Selectbox.js"
-		},
-		"./ShareButtons": {
-			"import": "./esm/ShareButtons.js",
-			"require": "./ShareButtons.js"
-		},
-		"./Sharpie": {
-			"import": "./esm/Sharpie.js",
-			"require": "./Sharpie.js"
-		},
-		"./SiteSearchAutocomplete": {
-			"import": "./esm/SiteSearchAutocomplete.js",
-			"require": "./SiteSearchAutocomplete.js"
-		},
-		"./SiteSearchCurtain": {
-			"import": "./esm/SiteSearchCurtain.js",
-			"require": "./SiteSearchCurtain.js"
-		},
-		"./SiteSearchInput": {
-			"import": "./esm/SiteSearchInput.js",
-			"require": "./SiteSearchInput.js"
-		},
-		"./Skeleton": {
-			"import": "./esm/Skeleton.js",
-			"require": "./Skeleton.js"
-		},
-		"./SubHeading": {
-			"import": "./esm/SubHeading.js",
-			"require": "./SubHeading.js"
-		},
-		"./Tabs": {
-			"import": "./esm/Tabs.js",
-			"require": "./Tabs.js"
-		},
-		"./TagPill": {
-			"import": "./esm/TagPill.js",
-			"require": "./TagPill.js"
-		},
-		"./TextBlock": {
-			"import": "./esm/TextBlock.js",
-			"require": "./TextBlock.js"
-		},
-		"./TextButton": {
-			"import": "./esm/TextButton.js",
-			"require": "./TextButton.js"
-		},
-		"./TextInput": {
-			"import": "./esm/TextInput.js",
-			"require": "./TextInput.js"
-		},
-		"./utils": {
-			"import": "./esm/utils.js",
-			"require": "./utils.js"
-		},
-		"./VerticalTabsTOC": {
-			"import": "./esm/VerticalTabsTOC.js",
-			"require": "./VerticalTabsTOC.js"
-		},
-		"./VSpacer": {
-			"import": "./esm/VSpacer.js",
-			"require": "./VSpacer.js"
-		},
-		"./WizardLayout": {
-			"import": "./esm/WizardLayout.js",
-			"require": "./WizardLayout.js"
-		},
-		"./WizardLayoutClose": {
-			"import": "./esm/WizardLayoutClose.js",
-			"require": "./WizardLayoutClose.js"
-		},
-		"./WizardStepper": {
-			"import": "./esm/WizardStepper.js",
-			"require": "./WizardStepper.js"
-		}
-	}
+	]
 }

package/utils/env.js

@@ -1,10 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isPreact = void 0;
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 exports.isPreact = 
 // imported from 'preact'
 'h' in react_1.default ||

package/utils/seenEffect.d.ts

@@ -4,7 +4,6 @@ export declare const getObserver: {
     (target: Element, callback?: ((target: Element) => void) | undefined): (() => void) | undefined;
     DATA_ATTR_NAME: string;
 };
-export declare const seenEffectOptOut: (target: Element, setFlag?: boolean) => void;
 declare const effects: {
     readonly fadein: 1;
     readonly fadeup: 1;
@@ -16,13 +15,13 @@ export declare type EffectProp = {
     effectType?: SeenEffectType | 'none';
 };
 /** Asserts that a prop value is a SeenEffectType and returns undefined otherwise */
-export declare const assertEffectType: (maybeType?: string | undefined) => SeenEffectType | undefined;
-export declare const getEffectAttr: (maybeType?: string | undefined) => {
+export declare const ensureEffectType: (maybeType?: string) => SeenEffectType | undefined;
+export declare const getEffectAttr: (maybeType?: string) => {
     'data-seen-effect': string | undefined;
 };
 export declare type SeenProp = {
     /** Should the component appear instantly, and not transition-in once seen */
     startSeen?: boolean;
 };
-export declare const useSeenEffect: <E extends Element = HTMLDivElement>(startSeen?: boolean | undefined, customRef?: RefObject<E> | undefined) => [RefObject<E> | undefined, true | undefined];
+export declare const useSeenEffect: <E extends Element = HTMLDivElement>(startSeen?: boolean, customRef?: RefObject<E> | undefined) => [RefObject<E> | undefined, true | undefined];
 export {};

package/utils/seenEffect.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSeenEffect = exports.getEffectAttr = exports.assertEffectType = exports.seenEffectOptOut = exports.getObserver = exports.DATA_ATTR_NAME = void 0;
+exports.useSeenEffect = exports.getEffectAttr = exports.ensureEffectType = exports.getObserver = exports.DATA_ATTR_NAME = void 0;
 const react_1 = require("react");
 exports.DATA_ATTR_NAME = 'is-seen';
 const STACKING_DELAY = 400; // ms
@@ -36,13 +36,10 @@ const getObserver = (target, callback) => {
     }
     target.setAttribute(dataAttr, 'false');
     observer.observe(target);
+    // return teardown/unmount effect
     return () => observer.unobserve(target);
 };
 exports.getObserver = getObserver;
-const seenEffectOptOut = (target, setFlag = true) => {
-    setFlag ? target.setAttribute(dataAttr, '') : target.removeAttribute(dataAttr);
-};
-exports.seenEffectOptOut = seenEffectOptOut;
 exports.getObserver.DATA_ATTR_NAME = exports.DATA_ATTR_NAME;
 // ---------------------------------------------------------------------------
 // ---------------------------------------------------------------------------
@@ -52,10 +49,10 @@ const effects = {
     fadeleft: 1,
 };
 /** Asserts that a prop value is a SeenEffectType and returns undefined otherwise */
-const assertEffectType = (maybeType) => maybeType && maybeType in effects ? maybeType : undefined;
-exports.assertEffectType = assertEffectType;
+const ensureEffectType = (maybeType) => maybeType && maybeType in effects ? maybeType : undefined;
+exports.ensureEffectType = ensureEffectType;
 const getEffectAttr = (maybeType) => ({
-    'data-seen-effect': maybeType === 'none' ? undefined : (0, exports.assertEffectType)(maybeType) || '',
+    'data-seen-effect': maybeType === 'none' ? undefined : (0, exports.ensureEffectType)(maybeType) || '',
 });
 exports.getEffectAttr = getEffectAttr;
 const useSeenEffect = (
@@ -63,19 +60,23 @@ const useSeenEffect = (
 startSeen, 
 /** Bring Your Own RefObject */
 customRef) => {
+    const _startSeen = startSeen || undefined; // normalize
+    const [isSeen, setSeen] = (0, react_1.useState)(_startSeen);
     const localRef = (0, react_1.useRef)(null);
-    const [isSeen, setSeen] = (0, react_1.useState)(startSeen || undefined);
-    const ref = !startSeen && (customRef || localRef);
+    const ref = customRef || localRef;
     (0, react_1.useEffect)(() => {
-        setSeen(startSeen || undefined);
-        if (ref && ref.current) {
-            // NOTE: Given that `ref` is defined, then
-            // `startSeen` is implicily `false | undefined` at
-            // this point.
-            (0, exports.seenEffectOptOut)(ref.current, false);
-            return (0, exports.getObserver)(ref.current, () => setSeen(true));
+        setSeen(_startSeen);
+        const refElm = ref.current;
+        if (refElm) {
+            if (_startSeen) {
+                refElm.setAttribute(dataAttr, '');
+            }
+            else {
+                refElm.removeAttribute(dataAttr);
+                return (0, exports.getObserver)(refElm, () => setSeen(true));
+            }
         }
-    }, [ref, startSeen]);
-    return [ref || undefined, isSeen];
+    }, [_startSeen, ref]);
+    return [ref, isSeen];
 };
 exports.useSeenEffect = useSeenEffect;

package/utils/useScrollbarWidthCSSVar.js

@@ -1,10 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useScrollbarWidthCSSVar = void 0;
-const getScrollbarWidth_1 = __importDefault(require("@hugsmidjan/qj/getScrollbarWidth"));
+const tslib_1 = require("tslib");
+const getScrollbarWidth_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/getScrollbarWidth"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
 const useScrollbarWidthCSSVar = () => (0, hooks_1.useOnMount)(() => getScrollbarWidth_1.default.setCSSvar());
 exports.useScrollbarWidthCSSVar = useScrollbarWidthCSSVar;

package/utils.js

@@ -1,18 +1,5 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./utils/useFormatMonitor"), exports);
-__exportStar(require("./utils/useGetSVGtext"), exports);
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./utils/useFormatMonitor"), exports);
+tslib_1.__exportStar(require("./utils/useGetSVGtext"), exports);

package/esm/AccordionList.d.ts

@@ -1,17 +0,0 @@
-import { SSRSupport } from '@hugsmidjan/react/hooks';
-import { SeenProp } from './utils/seenEffect';
-declare type AccordionListItemProps = {
-    title: string | JSX.Element;
-    content: string | JSX.Element | undefined;
-    id?: string;
-    disabled?: boolean;
-};
-export declare type AccordionListProps = {
-    items: Array<AccordionListItemProps>;
-    ssr?: SSRSupport;
-    wide?: boolean;
-    /** Index of those items that should start open */
-    defaultOpen?: Array<number>;
-} & SeenProp;
-declare const AccordionList: (props: AccordionListProps) => JSX.Element;
-export default AccordionList;

package/esm/AccordionList.js

@@ -1,24 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useDomid, useIsBrowserSide } from '@hugsmidjan/react/hooks';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-import { useSeenEffect } from './utils/seenEffect';
-const AccordionListItem = (props) => {
-    const { title, content, id, disabled = false, defaultOpen, ssr } = props;
-    const [open, setOpen] = useState(defaultOpen);
-    useEffect(() => setOpen(defaultOpen), [defaultOpen]);
-    const domid = useDomid();
-    const isBrowser = useIsBrowserSide(ssr);
-    const itemDisabled = (isBrowser && disabled) || !content;
-    return (React.createElement("div", { className: getBemClass('AccordionList__item', [itemDisabled && 'disabled']), id: id, "data-start-open": defaultOpen || undefined, "data-sprinkled": isBrowser },
-        React.createElement("h3", { className: "AccordionList__title" }, isBrowser ? (React.createElement("button", { type: "button", className: "AccordionList__button", "aria-controls": domid, "aria-expanded": open || undefined, onClick: () => {
-                setOpen(!open);
-            }, disabled: itemDisabled }, title)) : (title)),
-        React.createElement("div", { id: isBrowser && domid, className: "AccordionList__content", hidden: isBrowser && (!open || itemDisabled) }, content)));
-};
-// ---------------------------------------------------------------------------
-const AccordionList = (props) => {
-    const { items, ssr, wide, defaultOpen, startSeen } = props;
-    const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", { className: getBemClass('AccordionList', [wide && 'wide']), ref: ref }, items.map((item, i) => (React.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
-};
-export default AccordionList;

package/esm/ActionCards.d.ts

@@ -1,5 +0,0 @@
-import { TextCardListProps } from './_abstract/_CardList';
-import { SeenProp } from './utils/seenEffect';
-export declare type ActionCardsProps = TextCardListProps & SeenProp;
-declare const ActionCards: (props: ActionCardsProps) => JSX.Element;
-export default ActionCards;

package/esm/ActionCards.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { CardList } from './_abstract/_CardList';
-import { useSeenEffect } from './utils/seenEffect';
-const ActionCards = (props) => {
-    const [ref] = useSeenEffect(props.startSeen);
-    return (React.createElement("div", { className: "ActionCards", ref: ref },
-        React.createElement(CardList, Object.assign({}, props, { bemPrefix: "ActionCards" }))));
-};
-export default ActionCards;

package/esm/Alert.d.ts

@@ -1,49 +0,0 @@
-import { MouseEvent, ReactNode } from 'react';
-import { SSRSupport } from '@hugsmidjan/react/hooks';
-import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
-export declare type AlertI18n = {
-    closeLabel: string;
-    closeLabelLong?: string;
-};
-export declare const defaultAlertTexts: DefaultTexts<AlertI18n>;
-export declare const alertTypes: {
-    info: number;
-    success: number;
-    warning: number;
-    error: number;
-    critical: number;
-};
-declare type AlertType = keyof typeof alertTypes;
-export declare type AlertProps = {
-    type: AlertType;
-    closable?: boolean;
-    children?: ReactNode;
-    childrenHTML?: string;
-    /** server-side anchor href */
-    closeUrl?: string;
-    texts?: AlertI18n;
-    lang?: string;
-    ssr?: SSRSupport;
-} & ({
-    /** Seconds until the Alert auto-closes.
-     *
-     * Mosueover and keyboard focus resets the timer.
-     */
-    autoClose: number;
-    /** Return `false` to prevent the alert from closing. */
-    onClose?: () => void | boolean;
-    /** Callback that fires when the alert has closed/transitoned out */
-    onClosed: () => void;
-} | {
-    autoClose?: never;
-    /**
-     * @deprecated This signature with the `event` argument will be removed in hanna-react v0.9
-     *
-     * Return `false` to prevent the alert from closing
-     */
-    onClose?(event: MouseEvent): void | boolean;
-    /** Callback that fires after the alert has closed/transitoned out */
-    onClosed?(): void;
-});
-declare const Alert: (props: AlertProps) => JSX.Element;
-export default Alert;