@reykjavik/hanna-react 0.10.53

package/README.md

@@ -0,0 +1,69 @@
+# @reykjavik/hanna-react
+
+The official React components for Hanna – Reykjavík's design-system
+
+```
+npm install --save @reykjavik/hanna-react
+```
+
+## Versioning
+
+This module always targets the most recent version of the Hanna markup
+patterns (currently **Hanna 0.8**).
+
+<!--
+	NOTE:
+	If need arises we may decide to branch the repo and publish separate
+	legacy modules (i.e. `@reykjavik/hanna_1-react`) that provide active
+	long-term-support for older major-versions of Hanna's markup patterns.
+-->
+
+The version number of the `@reykjavik/hanna-react` package reflects changes in
+the React Component signatures, dependencies, etc. and may have major releases
+at much higher rate than Hanna's markup patterns.
+
+Note, however, that a major version update to the Hanna markup patterns
+automatically triggers a major version bump in this package.
+
+If you need a version of this package that "targets" an older Hanna markup
+version, you'll find the appropriate package version in the
+[change log](CHANGELOG.md).
+
+## CSS
+
+Each component is paired with a CSS file that can be loaded via the Hanna CSS
+server – https://styles.reykjavik.is/
+
+If your project uses `<Layout/>`, `<HeroBlock/>`, `<TextInput/>`,
+`<Selectbox/>` and `<ButtonPrimary/>` you can load the required CSS by linking
+to
+<https://styles.reykjavik.is/bundle/v0.8?m=-basics,Layout,HeroBlock,TextInput,Selectbox,ButtonPrimary>
+
+The preferred way to build the CSS URL is to use the helper `getCssBundleUrl`:
+
+```js
+import { getCssBundleUrl } from '@reykjavik/hanna-css';
+
+const cssUrl = getCssBundleUrl([
+  '-basics',
+  'Layout',
+  'HeroBlock',
+  'TextInput',
+  'Selectbox',
+  'ButtonPrimary',
+]);
+```
+
+**NOTE:** The `-basics` URL token adds basic CSS resets, `@font-face`
+declarations global color-variables, etc.
+
+For best result, try and make sure each web page has **only one `<link />`**
+to the CSS server to avoid unpredictable styling behavior.
+
+<!--
+## Older versions
+
+To view the documentation for older versions of Hanna, check out the
+corresponding branches in the git repo.
+
+-->

package/lib/AccordionList.cjs

@@ -0,0 +1,91 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AccordionList_exports = {};
+__export(AccordionList_exports, {
+  default: () => AccordionList_default
+});
+module.exports = __toCommonJS(AccordionList_exports);
+var import_react = __toESM(require("react"));
+var import_hooks = require("@hugsmidjan/react/hooks");
+var import_getBemClass = __toESM(require("@hugsmidjan/react/utils/getBemClass"));
+var import_seenEffect = require("./utils/seenEffect");
+const AccordionListItem = (props) => {
+  const { title, content, id, disabled = false, defaultOpen, ssr } = props;
+  const [open, setOpen] = (0, import_react.useState)(defaultOpen);
+  (0, import_react.useEffect)(() => setOpen(defaultOpen), [defaultOpen]);
+  const domid = (0, import_hooks.useDomid)();
+  const isBrowser = (0, import_hooks.useIsBrowserSide)(ssr);
+  const itemDisabled = isBrowser && disabled || !content;
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    className: (0, import_getBemClass.default)("AccordionList__item", [itemDisabled && "disabled"]),
+    id,
+    "data-start-open": defaultOpen || void 0,
+    "data-sprinkled": isBrowser
+  }, /* @__PURE__ */ import_react.default.createElement("h3", {
+    className: "AccordionList__title"
+  }, isBrowser ? /* @__PURE__ */ import_react.default.createElement("button", {
+    type: "button",
+    className: "AccordionList__button",
+    "aria-controls": domid,
+    "aria-expanded": open || void 0,
+    onClick: () => {
+      setOpen(!open);
+    },
+    disabled: itemDisabled
+  }, title) : title), /* @__PURE__ */ import_react.default.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] = (0, import_seenEffect.useSeenEffect)(startSeen);
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    className: (0, import_getBemClass.default)("AccordionList", [wide && "wide"]),
+    ref
+  }, items.map((item, i) => /* @__PURE__ */ import_react.default.createElement(AccordionListItem, __spreadProps(__spreadValues({
+    key: i
+  }, item), {
+    ssr,
+    defaultOpen: defaultOpen && defaultOpen.includes(i)
+  }))));
+};
+var AccordionList_default = AccordionList;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/AccordionList.mjs

@@ -0,0 +1,69 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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 /* @__PURE__ */ React.createElement("div", {
+    className: getBemClass("AccordionList__item", [itemDisabled && "disabled"]),
+    id,
+    "data-start-open": defaultOpen || void 0,
+    "data-sprinkled": isBrowser
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: "AccordionList__title"
+  }, isBrowser ? /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    className: "AccordionList__button",
+    "aria-controls": domid,
+    "aria-expanded": open || void 0,
+    onClick: () => {
+      setOpen(!open);
+    },
+    disabled: itemDisabled
+  }, title) : title), /* @__PURE__ */ 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 /* @__PURE__ */ React.createElement("div", {
+    className: getBemClass("AccordionList", [wide && "wide"]),
+    ref
+  }, items.map((item, i) => /* @__PURE__ */ React.createElement(AccordionListItem, __spreadProps(__spreadValues({
+    key: i
+  }, item), {
+    ssr,
+    defaultOpen: defaultOpen && defaultOpen.includes(i)
+  }))));
+};
+var AccordionList_default = AccordionList;
+export {
+  AccordionList_default as default
+};

package/lib/ActionCards.cjs

@@ -0,0 +1,57 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ActionCards_exports = {};
+__export(ActionCards_exports, {
+  default: () => ActionCards_default
+});
+module.exports = __toCommonJS(ActionCards_exports);
+var import_react = __toESM(require("react"));
+var import_CardList = require("./_abstract/CardList");
+var import_seenEffect = require("./utils/seenEffect");
+const ActionCards = (props) => {
+  const [ref] = (0, import_seenEffect.useSeenEffect)(props.startSeen);
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "ActionCards",
+    ref
+  }, /* @__PURE__ */ import_react.default.createElement(import_CardList.CardList, __spreadProps(__spreadValues({}, props), {
+    bemPrefix: "ActionCards"
+  })));
+};
+var ActionCards_default = ActionCards;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/ActionCards.mjs

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React from "react";
+import { CardList } from "./_abstract/CardList";
+import { useSeenEffect } from "./utils/seenEffect";
+const ActionCards = (props) => {
+  const [ref] = useSeenEffect(props.startSeen);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "ActionCards",
+    ref
+  }, /* @__PURE__ */ React.createElement(CardList, __spreadProps(__spreadValues({}, props), {
+    bemPrefix: "ActionCards"
+  })));
+};
+var ActionCards_default = ActionCards;
+export {
+  ActionCards_default as default
+};

package/lib/Alert.cjs

@@ -0,0 +1,159 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Alert_exports = {};
+__export(Alert_exports, {
+  alertTypes: () => alertTypes,
+  default: () => Alert_default,
+  defaultAlertTexts: () => defaultAlertTexts
+});
+module.exports = __toCommonJS(Alert_exports);
+var import_react = __toESM(require("react"));
+var import_hooks = require("@hugsmidjan/react/hooks");
+var import_getBemClass = __toESM(require("@hugsmidjan/react/utils/getBemClass"));
+var import_i18n = require("@reykjavik/hanna-utils/i18n");
+var import_Button = __toESM(require("./_abstract/Button"));
+var import_env = require("./utils/env");
+const AlertCloseTransitionDuration = 400;
+const useAutoClosing = (autoClose) => {
+  const [temp, setTemp] = (0, import_react.useState)(0);
+  if (!autoClose) {
+    return { autoClosing: false };
+  }
+  const thaw = () => setTemp((temp2) => temp2 + 1);
+  const freeze = () => setTemp((temp2) => temp2 - 1);
+  return {
+    autoClosing: temp === 0,
+    autoClosingProps: __spreadValues({
+      onMouseEnter: freeze,
+      onMouseLeave: thaw,
+      onFocus: freeze,
+      onBlur: thaw
+    }, import_env.isPreact ? {
+      onfocusin: (e) => e.currentTarget !== e.target && freeze(),
+      onfocusout: (e) => e.currentTarget !== e.target && thaw()
+    } : void 0)
+  };
+};
+const defaultAlertTexts = {
+  en: { closeLabel: "Hide" },
+  is: { closeLabel: "Fela" }
+};
+const alertTypes = {
+  info: 1,
+  success: 1,
+  warning: 1,
+  error: 1,
+  critical: 1
+};
+const Alert = (props) => {
+  const {
+    type,
+    childrenHTML,
+    children,
+    onClose,
+    closeUrl,
+    closable = !!(onClose || closeUrl != null),
+    ssr,
+    onClosed
+  } = props;
+  const autoClose = props.autoClose && props.autoClose > 0 ? props.autoClose : 0;
+  const closing = (0, import_react.useRef)();
+  const [open, setOpen] = (0, import_react.useState)(!!ssr);
+  const isBrowser = (0, import_hooks.useIsBrowserSide)(ssr);
+  const showCloseButton = closable && (isBrowser || closeUrl != null);
+  const { closeLabel, closeLabelLong } = (0, import_i18n.getTexts)(props, defaultAlertTexts);
+  (0, import_hooks.useOnMount)(() => {
+    setOpen(true);
+  });
+  const closeAlert = (0, import_react.useCallback)((event) => {
+    const ret = onClose && onClose(event);
+    if (ret !== false) {
+      setOpen(false);
+      if (closing.current) {
+        clearTimeout(closing.current);
+        closing.current = void 0;
+      }
+      closing.current = setTimeout(() => {
+        onClosed && onClosed();
+      }, AlertCloseTransitionDuration);
+    }
+  }, [onClose, onClosed]);
+  const { autoClosing, autoClosingProps } = useAutoClosing(autoClose);
+  (0, import_react.useEffect)(() => {
+    if (autoClosing) {
+      let autoCloseTimeout;
+      autoCloseTimeout = setTimeout(() => {
+        closeAlert();
+      }, autoClose * 1e3);
+      return () => {
+        if (autoCloseTimeout) {
+          clearTimeout(autoCloseTimeout);
+          autoCloseTimeout = void 0;
+        }
+        if (closing.current) {
+          clearTimeout(closing.current);
+          closing.current = void 0;
+        }
+      };
+    }
+  }, [closeAlert, autoClosing, autoClose]);
+  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({
+    className: (0, import_getBemClass.default)("Alert", [
+      !!alertTypes[type] && type,
+      closable && "closable"
+    ]),
+    role: "alert",
+    hidden: !open || void 0
+  }, autoClosingProps), childrenHTML ? /* @__PURE__ */ import_react.default.createElement("div", {
+    dangerouslySetInnerHTML: { __html: childrenHTML }
+  }) : children, " ", showCloseButton && /* @__PURE__ */ import_react.default.createElement(import_Button.default, __spreadProps(__spreadValues({
+    bem: "Alert__close"
+  }, closeUrl != null ? { href: closeUrl } : { type: "button" }), {
+    onClick: (e) => {
+      closeAlert(e);
+    },
+    "aria-label": closeLabelLong,
+    title: closeLabelLong || closeLabel
+  }), closeLabel));
+};
+var Alert_default = Alert;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  alertTypes,
+  defaultAlertTexts
+});

package/lib/Alert.mjs

@@ -0,0 +1,139 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { useIsBrowserSide, useOnMount } from "@hugsmidjan/react/hooks";
+import getBemClass from "@hugsmidjan/react/utils/getBemClass";
+import { getTexts } from "@reykjavik/hanna-utils/i18n";
+import Button from "./_abstract/Button";
+import { isPreact } from "./utils/env";
+const AlertCloseTransitionDuration = 400;
+const useAutoClosing = (autoClose) => {
+  const [temp, setTemp] = useState(0);
+  if (!autoClose) {
+    return { autoClosing: false };
+  }
+  const thaw = () => setTemp((temp2) => temp2 + 1);
+  const freeze = () => setTemp((temp2) => temp2 - 1);
+  return {
+    autoClosing: temp === 0,
+    autoClosingProps: __spreadValues({
+      onMouseEnter: freeze,
+      onMouseLeave: thaw,
+      onFocus: freeze,
+      onBlur: thaw
+    }, isPreact ? {
+      onfocusin: (e) => e.currentTarget !== e.target && freeze(),
+      onfocusout: (e) => e.currentTarget !== e.target && thaw()
+    } : void 0)
+  };
+};
+const defaultAlertTexts = {
+  en: { closeLabel: "Hide" },
+  is: { closeLabel: "Fela" }
+};
+const alertTypes = {
+  info: 1,
+  success: 1,
+  warning: 1,
+  error: 1,
+  critical: 1
+};
+const Alert = (props) => {
+  const {
+    type,
+    childrenHTML,
+    children,
+    onClose,
+    closeUrl,
+    closable = !!(onClose || closeUrl != null),
+    ssr,
+    onClosed
+  } = props;
+  const autoClose = props.autoClose && props.autoClose > 0 ? props.autoClose : 0;
+  const closing = useRef();
+  const [open, setOpen] = useState(!!ssr);
+  const isBrowser = useIsBrowserSide(ssr);
+  const showCloseButton = closable && (isBrowser || closeUrl != null);
+  const { closeLabel, closeLabelLong } = getTexts(props, defaultAlertTexts);
+  useOnMount(() => {
+    setOpen(true);
+  });
+  const closeAlert = useCallback((event) => {
+    const ret = onClose && onClose(event);
+    if (ret !== false) {
+      setOpen(false);
+      if (closing.current) {
+        clearTimeout(closing.current);
+        closing.current = void 0;
+      }
+      closing.current = setTimeout(() => {
+        onClosed && onClosed();
+      }, AlertCloseTransitionDuration);
+    }
+  }, [onClose, onClosed]);
+  const { autoClosing, autoClosingProps } = useAutoClosing(autoClose);
+  useEffect(() => {
+    if (autoClosing) {
+      let autoCloseTimeout;
+      autoCloseTimeout = setTimeout(() => {
+        closeAlert();
+      }, autoClose * 1e3);
+      return () => {
+        if (autoCloseTimeout) {
+          clearTimeout(autoCloseTimeout);
+          autoCloseTimeout = void 0;
+        }
+        if (closing.current) {
+          clearTimeout(closing.current);
+          closing.current = void 0;
+        }
+      };
+    }
+  }, [closeAlert, autoClosing, autoClose]);
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+    className: getBemClass("Alert", [
+      !!alertTypes[type] && type,
+      closable && "closable"
+    ]),
+    role: "alert",
+    hidden: !open || void 0
+  }, autoClosingProps), childrenHTML ? /* @__PURE__ */ React.createElement("div", {
+    dangerouslySetInnerHTML: { __html: childrenHTML }
+  }) : children, " ", showCloseButton && /* @__PURE__ */ React.createElement(Button, __spreadProps(__spreadValues({
+    bem: "Alert__close"
+  }, closeUrl != null ? { href: closeUrl } : { type: "button" }), {
+    onClick: (e) => {
+      closeAlert(e);
+    },
+    "aria-label": closeLabelLong,
+    title: closeLabelLong || closeLabel
+  }), closeLabel));
+};
+var Alert_default = Alert;
+export {
+  alertTypes,
+  Alert_default as default,
+  defaultAlertTexts
+};