@navikt/ds-react 4.1.6 → 4.2.0

package/_docs.json

@@ -768,7 +768,7 @@
       },
       "backgroundColor": {
         "defaultValue": null,
-        "description": "Background color on bubble",
+        "description": "Background color on bubble\n@deprecated Use `variant` on Chat instead",
         "name": "backgroundColor",
         "parent": {
           "fileName": "src/chat/Bubble.tsx",
@@ -907,7 +907,7 @@
       },
       "avatar": {
         "defaultValue": null,
-        "description": "Avatar for messenger. Regular text for initials works to",
+        "description": "Avatar for messenger. Regular text for initials works too, but it will be hidden for screen readers.",
         "name": "avatar",
         "parent": {
           "fileName": "src/chat/Chat.tsx",
@@ -919,14 +919,35 @@
             "name": "ChatProps"
           }
         ],
-        "required": true,
+        "required": false,
         "type": {
           "name": "ReactNode"
         }
       },
+      "variant": {
+        "defaultValue": {
+          "value": "\"subtle\""
+        },
+        "description": "Changes background color on avatar and bubbles.\nAvoid using the same background as the surface behind Chat.",
+        "name": "variant",
+        "parent": {
+          "fileName": "src/chat/Chat.tsx",
+          "name": "ChatProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chat/Chat.tsx",
+            "name": "ChatProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"subtle\" | \"info\" | \"neutral\""
+        }
+      },
       "backgroundColor": {
         "defaultValue": null,
-        "description": "Background color on bubbles",
+        "description": "Background color on bubbles\n@deprecated Use `variant` instead",
         "name": "backgroundColor",
         "parent": {
           "fileName": "src/chat/Chat.tsx",
@@ -945,7 +966,7 @@
       },
       "avatarBgColor": {
         "defaultValue": null,
-        "description": "Background color for avatar",
+        "description": "Background color for avatar\n@deprecated Use `variant` instead",
         "name": "avatarBgColor",
         "parent": {
           "fileName": "src/chat/Chat.tsx",
@@ -966,7 +987,7 @@
         "defaultValue": {
           "value": "\"left\""
         },
-        "description": "Positions avatar and Bubbles",
+        "description": "Positions avatar and bubbles",
         "name": "position",
         "parent": {
           "fileName": "src/chat/Chat.tsx",
@@ -985,7 +1006,7 @@
       },
       "toptextPosition": {
         "defaultValue": {
-          "value": "Same as chat"
+          "value": "Same as position"
         },
         "description": "Hoizontal position of toptext",
         "name": "toptextPosition",
@@ -1004,6 +1025,27 @@
           "name": "\"left\" | \"right\""
         }
       },
+      "size": {
+        "defaultValue": {
+          "value": "\"medium\""
+        },
+        "description": "Affects padding and font size in bubbles",
+        "name": "size",
+        "parent": {
+          "fileName": "src/chat/Chat.tsx",
+          "name": "ChatProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chat/Chat.tsx",
+            "name": "ChatProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"medium\" | \"small\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -4359,6 +4401,25 @@
           "name": "\"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\""
         }
       },
+      "wrapperClassName": {
+        "defaultValue": null,
+        "description": "Classname for wrapper",
+        "name": "wrapperClassName",
+        "parent": {
+          "fileName": "src/help-text/HelpText.tsx",
+          "name": "HelpTextProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/help-text/HelpText.tsx",
+            "name": "HelpTextProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -13603,6 +13664,25 @@
           "name": "ReactNode"
         }
       },
+      "href": {
+        "defaultValue": null,
+        "description": "Link to errormessage",
+        "name": "href",
+        "parent": {
+          "fileName": "src/form/error-summary/ErrorSummaryItem.tsx",
+          "name": "ErrorSummaryItemProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/form/error-summary/ErrorSummaryItem.tsx",
+            "name": "ErrorSummaryItemProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",

package/cjs/chat/Bubble.js

@@ -43,9 +43,10 @@ const typography_1 = require("../typography");
 const Bubble = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, name, timestamp, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor", "toptextPosition"]);
     return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat__bubble", className), style: { backgroundColor: backgroundColor } }, rest),
-        (timestamp || name) && (react_1.default.createElement("div", { className: (0, clsx_1.default)(`navds-chat__top-text`, toptextPosition && `navds-chat__top-text--${toptextPosition}`) },
-            name && react_1.default.createElement(typography_1.Detail, { className: "navds-chat__name" }, name),
-            timestamp && (react_1.default.createElement(typography_1.Detail, { className: "navds-chat__timestamp" }, timestamp)))),
+        (timestamp || name) && (react_1.default.createElement("h3", { className: (0, clsx_1.default)(`navds-chat__top-text`, toptextPosition && `navds-chat__top-text--${toptextPosition}`) },
+            name && react_1.default.createElement(typography_1.Detail, { as: "span" }, name),
+            name && timestamp && (react_1.default.createElement(typography_1.Detail, { as: "span", "aria-hidden": true }, "\u2022")),
+            timestamp && react_1.default.createElement(typography_1.Detail, { as: "span" }, timestamp))),
         children));
 });
 exports.default = Bubble;

package/cjs/chat/Chat.js

@@ -37,34 +37,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Chat = void 0;
+exports.Chat = exports.SIZES = exports.POSITIONS = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const Bubble_1 = __importDefault(require("./Bubble"));
 const typography_1 = require("../typography");
+exports.POSITIONS = ["left", "right"];
+exports.SIZES = ["medium", "small"];
 /**
- * A component for displaying chat messages.
+ * A component for communicating dialogs between two parties.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
  * @see 🏷️ {@link ChatProps}
  *
  * @example
  * ```jsx
- * <Chat>
- *   <Chat.Bubble avatar="A" name="Alice">Hello!</Chat.Bubble>
+ * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
+ *   <Chat.Bubble>Hello!</Chat.Bubble>
+ *   <Chat.Bubble>How can I help you?</Chat.Bubble>
  * </Chat>
- * <Chat>
- *   <Chat.Bubble avatar="B" name="Bob">Hi there!</Chat.Bubble>
+ * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
+ *   <Chat.Bubble>Hi there!</Chat.Bubble>
  * </Chat>
  * ```
  */
 exports.Chat = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, name, timestamp, avatar, position = "left", avatarBgColor, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "avatarBgColor", "backgroundColor", "toptextPosition"]);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat", className, `navds-chat--${position} navds-chat--top-text-${toptextPosition !== null && toptextPosition !== void 0 ? toptextPosition : position}`) }, rest),
-        react_1.default.createElement(typography_1.BodyShort, { as: "div", className: "navds-chat__avatar", style: { backgroundColor: avatarBgColor } }, avatar),
+    var { children, className, name, timestamp, avatar, position = "left", variant = "subtle", avatarBgColor, backgroundColor, toptextPosition, size = "medium" } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "variant", "avatarBgColor", "backgroundColor", "toptextPosition", "size"]);
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat", className, `navds-chat--${position}`, `navds-chat--top-text-${toptextPosition !== null && toptextPosition !== void 0 ? toptextPosition : position}`, `navds-chat--${size}`, `navds-chat--${variant}`) }, rest),
+        avatar && (react_1.default.createElement("div", { className: "navds-chat__avatar", "aria-hidden": true, style: { backgroundColor: avatarBgColor } }, avatar)),
         react_1.default.createElement("ol", { className: "navds-chat__bubble-wrapper" }, react_1.default.Children.map(children, (child, i) => {
             if (react_1.default.isValidElement(child)) {
-                return (react_1.default.createElement(typography_1.BodyLong, { as: "li" }, react_1.default.cloneElement(child, Object.assign({ name: name && i === 0 ? name : undefined, timestamp: timestamp && i === 0 ? timestamp : undefined, backgroundColor }, child.props))));
+                return (react_1.default.createElement(typography_1.BodyLong, { as: "li", size: size }, react_1.default.cloneElement(child, Object.assign({ name: name && i === 0 ? name : undefined, timestamp: timestamp && i === 0 ? timestamp : undefined, backgroundColor }, child.props))));
             }
         }))));
 });

package/cjs/help-text/HelpText.js

@@ -56,11 +56,11 @@ const HelpTextIcon_1 = require("./HelpTextIcon");
  * ```
  */
 exports.HelpText = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick"]);
+    var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick, wrapperClassName } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick", "wrapperClassName"]);
     const buttonRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([buttonRef, ref]), [ref]);
     const [open, setOpen] = (0, react_1.useState)(false);
-    return (react_1.default.createElement("div", { className: "navds-help-text" },
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-help-text", wrapperClassName) },
         react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
                 setOpen((x) => !x);
                 onClick === null || onClick === void 0 ? void 0 : onClick(e);

package/cjs/timeline/Pin.js

@@ -36,9 +36,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pin = void 0;
 const react_1 = require("@floating-ui/react");
-const util_1 = require("../util");
 const date_fns_1 = require("date-fns");
 const react_2 = __importStar(require("react"));
+const util_1 = require("../util");
 const useTimelineContext_1 = require("./hooks/useTimelineContext");
 const calc_1 = require("./utils/calc");
 exports.Pin = (0, react_2.forwardRef)((_a, ref) => {
@@ -68,15 +68,6 @@ exports.Pin = (0, react_2.forwardRef)((_a, ref) => {
         (0, react_1.useDismiss)(context),
     ]);
     const mergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([refs.setReference, ref]), [ref, refs.setReference]);
-    (0, util_1.useEventListener)("focusin", (0, react_2.useCallback)((e) => {
-        var _a;
-        if (![
-            refs.reference.current,
-            (_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current,
-        ].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target))) {
-            open && setOpen(false);
-        }
-    }, [open, refs.reference, refs === null || refs === void 0 ? void 0 : refs.floating]));
     const staticSide = {
         top: "bottom",
         right: "left",
@@ -99,6 +90,9 @@ exports.Pin = (0, react_2.forwardRef)((_a, ref) => {
             })))),
         children && (react_2.default.createElement("div", Object.assign({ className: "navds-timeline__popover", "data-placement": placement, "aria-hidden": !open, ref: refs.setFloating }, getFloatingProps({
             tabIndex: -1,
+            onBlur: (e) => e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
         }), { style: Object.assign(Object.assign({}, floatingStyles), { display: open ? undefined : "none" }) }),
             react_2.default.createElement("div", { className: "navds-timeline__popover-content" }, children),
             react_2.default.createElement("div", { ref: (node) => {

package/cjs/timeline/TimelineRow.js

@@ -64,7 +64,7 @@ exports.TimelineRow = (0, react_1.forwardRef)((_a, ref) => {
         react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-timeline__row", {
                 "navds-timeline__row--active": active,
             }) },
-            react_1.default.createElement("ol", Object.assign({}, rest, { ref: ref, "aria-label": periods.length === 0
+            react_1.default.createElement("ol", Object.assign({}, rest, { tabIndex: -1, ref: ref, "aria-label": periods.length === 0
                     ? "Ingen perioder"
                     : `${(0, date_fns_1.format)(earliest.start, "dd.MM.yyyy")} til ${(0, date_fns_1.format)(latest.end, "dd.MM.yyyy")}`, className: (0, clsx_1.default)("navds-timeline__row-periods", className), onKeyDown: (e) => {
                     if (e.key === "ArrowDown" || e.key === "ArrowUp") {

package/cjs/timeline/period/ClickablePeriod.js

@@ -27,9 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("@floating-ui/react");
-const util_1 = require("../../util");
 const clsx_1 = __importDefault(require("clsx"));
 const react_2 = __importStar(require("react"));
+const util_1 = require("../../util");
 const usePeriodContext_1 = require("../hooks/usePeriodContext");
 const useRowContext_1 = require("../hooks/useRowContext");
 const useTimelineContext_1 = require("../hooks/useTimelineContext");
@@ -62,15 +62,6 @@ const ClickablePeriod = react_2.default.memo(({ onSelectPeriod, start, end, stat
         (0, react_1.useDismiss)(context),
     ]);
     const mergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([refs.setReference, periodRef]), [periodRef, refs.setReference]);
-    (0, util_1.useEventListener)("focusin", (0, react_2.useCallback)((e) => {
-        var _a;
-        if (![
-            refs.reference.current,
-            (_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current,
-        ].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target))) {
-            open && setOpen(false);
-        }
-    }, [open, refs.reference, refs === null || refs === void 0 ? void 0 : refs.floating]));
     const staticSide = {
         top: "bottom",
         right: "left",
@@ -114,6 +105,9 @@ const ClickablePeriod = react_2.default.memo(({ onSelectPeriod, start, end, stat
             react_2.default.createElement("span", { className: "navds-timeline__period--inner" }, icon)),
         children && (react_2.default.createElement("div", Object.assign({ className: "navds-timeline__popover", "data-placement": placement, "aria-hidden": !open, ref: refs.setFloating }, getFloatingProps({
             tabIndex: -1,
+            onBlur: (e) => e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
         }), { style: Object.assign(Object.assign({}, floatingStyles), { display: open ? undefined : "none" }) }),
             react_2.default.createElement("div", { className: "navds-timeline__popover-content" }, children),
             react_2.default.createElement("div", { ref: (node) => {

package/esm/chat/Bubble.d.ts

@@ -14,6 +14,7 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
     timestamp?: string;
     /**
      * Background color on bubble
+     * @deprecated Use `variant` on Chat instead
      */
     backgroundColor?: string;
     /**

package/esm/chat/Bubble.js

@@ -15,9 +15,10 @@ import { Detail } from "../typography";
 const Bubble = forwardRef((_a, ref) => {
     var { children, className, name, timestamp, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor", "toptextPosition"]);
     return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-chat__bubble", className), style: { backgroundColor: backgroundColor } }, rest),
-        (timestamp || name) && (React.createElement("div", { className: cl(`navds-chat__top-text`, toptextPosition && `navds-chat__top-text--${toptextPosition}`) },
-            name && React.createElement(Detail, { className: "navds-chat__name" }, name),
-            timestamp && (React.createElement(Detail, { className: "navds-chat__timestamp" }, timestamp)))),
+        (timestamp || name) && (React.createElement("h3", { className: cl(`navds-chat__top-text`, toptextPosition && `navds-chat__top-text--${toptextPosition}`) },
+            name && React.createElement(Detail, { as: "span" }, name),
+            name && timestamp && (React.createElement(Detail, { as: "span", "aria-hidden": true }, "\u2022")),
+            timestamp && React.createElement(Detail, { as: "span" }, timestamp))),
         children));
 });
 export default Bubble;

package/esm/chat/Bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.js","sourceRoot":"","sources":["../../src/chat/Bubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAyBvC,MAAM,MAAM,GAAG,UAAU,CACvB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,eAAe,EACf,eAAe,OAEhB,EADI,IAAI,cAPT,oFAQC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAC9C,KAAK,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,IACvC,IAAI;QAEP,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CACtB,6BACE,SAAS,EAAE,EAAE,CACX,sBAAsB,EACtB,eAAe,IAAI,yBAAyB,eAAe,EAAE,CAC9D;YAEA,IAAI,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAC,kBAAkB,IAAE,IAAI,CAAU;YAC5D,SAAS,IAAI,CACZ,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,IAAE,SAAS,CAAU,CAC/D,CACG,CACP;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Bubble.js","sourceRoot":"","sources":["../../src/chat/Bubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AA0BvC,MAAM,MAAM,GAAG,UAAU,CACvB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,eAAe,EACf,eAAe,OAEhB,EADI,IAAI,cAPT,oFAQC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAC9C,KAAK,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,IACvC,IAAI;QAEP,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CACtB,4BACE,SAAS,EAAE,EAAE,CACX,sBAAsB,EACtB,eAAe,IAAI,yBAAyB,eAAe,EAAE,CAC9D;YAEA,IAAI,IAAI,oBAAC,MAAM,IAAC,EAAE,EAAC,MAAM,IAAE,IAAI,CAAU;YACzC,IAAI,IAAI,SAAS,IAAI,CACpB,oBAAC,MAAM,IAAC,EAAE,EAAC,MAAM,kCAER,CACV;YACA,SAAS,IAAI,oBAAC,MAAM,IAAC,EAAE,EAAC,MAAM,IAAE,SAAS,CAAU,CACjD,CACN;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/chat/Chat.d.ts

@@ -1,5 +1,7 @@
 import React, { HTMLAttributes } from "react";
-import { BubbleProps } from "./Bubble";
+import Bubble from "./Bubble";
+export declare const POSITIONS: readonly ["left", "right"];
+export declare const SIZES: readonly ["medium", "small"];
 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Children of type <Chat.Bubble />
@@ -14,47 +16,61 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
      */
     timestamp?: string;
     /**
-     * Avatar for messenger. Regular text for initials works to
+     * Avatar for messenger. Regular text for initials works too, but it will be hidden for screen readers.
      */
-    avatar: React.ReactNode;
+    avatar?: React.ReactNode;
+    /**
+     * Changes background color on avatar and bubbles.
+     * Avoid using the same background as the surface behind Chat.
+     * @default "subtle"
+     */
+    variant?: "subtle" | "info" | "neutral";
     /**
      * Background color on bubbles
+     * @deprecated Use `variant` instead
      */
     backgroundColor?: string;
     /**
      * Background color for avatar
+     * @deprecated Use `variant` instead
      */
     avatarBgColor?: string;
     /**
-     * Positions avatar and Bubbles
+     * Positions avatar and bubbles
      * @default "left"
      */
-    position?: "left" | "right";
+    position?: (typeof POSITIONS)[number];
     /**
      * Hoizontal position of toptext
-     * @default Same as chat
+     * @default Same as position
+     */
+    toptextPosition?: (typeof POSITIONS)[number];
+    /**
+     * Affects padding and font size in bubbles
+     * @default "medium"
      */
-    toptextPosition?: "left" | "right";
+    size?: (typeof SIZES)[number];
 }
 interface ChatComponent extends React.ForwardRefExoticComponent<ChatProps & React.RefAttributes<HTMLDivElement>> {
     /**
      * @see 🏷️ {@link BubbleProps}
      */
-    Bubble: React.ForwardRefExoticComponent<BubbleProps & React.RefAttributes<HTMLDivElement>>;
+    Bubble: typeof Bubble;
 }
 /**
- * A component for displaying chat messages.
+ * A component for communicating dialogs between two parties.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
  * @see 🏷️ {@link ChatProps}
  *
  * @example
  * ```jsx
- * <Chat>
- *   <Chat.Bubble avatar="A" name="Alice">Hello!</Chat.Bubble>
+ * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
+ *   <Chat.Bubble>Hello!</Chat.Bubble>
+ *   <Chat.Bubble>How can I help you?</Chat.Bubble>
  * </Chat>
- * <Chat>
- *   <Chat.Bubble avatar="B" name="Bob">Hi there!</Chat.Bubble>
+ * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
+ *   <Chat.Bubble>Hi there!</Chat.Bubble>
  * </Chat>
  * ```
  */

package/esm/chat/Chat.js

@@ -12,30 +12,33 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from "react";
 import cl from "clsx";
 import Bubble from "./Bubble";
-import { BodyLong, BodyShort } from "../typography";
+import { BodyLong } from "../typography";
+export const POSITIONS = ["left", "right"];
+export const SIZES = ["medium", "small"];
 /**
- * A component for displaying chat messages.
+ * A component for communicating dialogs between two parties.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
  * @see 🏷️ {@link ChatProps}
  *
  * @example
  * ```jsx
- * <Chat>
- *   <Chat.Bubble avatar="A" name="Alice">Hello!</Chat.Bubble>
+ * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
+ *   <Chat.Bubble>Hello!</Chat.Bubble>
+ *   <Chat.Bubble>How can I help you?</Chat.Bubble>
  * </Chat>
- * <Chat>
- *   <Chat.Bubble avatar="B" name="Bob">Hi there!</Chat.Bubble>
+ * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
+ *   <Chat.Bubble>Hi there!</Chat.Bubble>
  * </Chat>
  * ```
  */
 export const Chat = forwardRef((_a, ref) => {
-    var { children, className, name, timestamp, avatar, position = "left", avatarBgColor, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "avatarBgColor", "backgroundColor", "toptextPosition"]);
-    return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-chat", className, `navds-chat--${position} navds-chat--top-text-${toptextPosition !== null && toptextPosition !== void 0 ? toptextPosition : position}`) }, rest),
-        React.createElement(BodyShort, { as: "div", className: "navds-chat__avatar", style: { backgroundColor: avatarBgColor } }, avatar),
+    var { children, className, name, timestamp, avatar, position = "left", variant = "subtle", avatarBgColor, backgroundColor, toptextPosition, size = "medium" } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "variant", "avatarBgColor", "backgroundColor", "toptextPosition", "size"]);
+    return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-chat", className, `navds-chat--${position}`, `navds-chat--top-text-${toptextPosition !== null && toptextPosition !== void 0 ? toptextPosition : position}`, `navds-chat--${size}`, `navds-chat--${variant}`) }, rest),
+        avatar && (React.createElement("div", { className: "navds-chat__avatar", "aria-hidden": true, style: { backgroundColor: avatarBgColor } }, avatar)),
         React.createElement("ol", { className: "navds-chat__bubble-wrapper" }, React.Children.map(children, (child, i) => {
             if (React.isValidElement(child)) {
-                return (React.createElement(BodyLong, { as: "li" }, React.cloneElement(child, Object.assign({ name: name && i === 0 ? name : undefined, timestamp: timestamp && i === 0 ? timestamp : undefined, backgroundColor }, child.props))));
+                return (React.createElement(BodyLong, { as: "li", size: size }, React.cloneElement(child, Object.assign({ name: name && i === 0 ? name : undefined, timestamp: timestamp && i === 0 ? timestamp : undefined, backgroundColor }, child.props))));
             }
         }))));
 });

package/esm/chat/Chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../src/chat/Chat.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,MAAuB,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAmDpD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,aAAa,EACb,eAAe,EACf,eAAe,OAEhB,EADI,IAAI,cAVT,2HAWC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,YAAY,EACZ,SAAS,EACT,eAAe,QAAQ,yBACrB,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,QACrB,EAAE,CACH,IACG,IAAI;QAER,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE,IAExC,MAAM,CACG;QACZ,4BAAI,SAAS,EAAC,4BAA4B,IACvC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC/B,OAAO,CACL,oBAAC,QAAQ,IAAC,EAAE,EAAC,IAAI,IACd,KAAK,CAAC,YAAY,CAAC,KAAK,kBACvB,IAAI,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACxC,SAAS,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvD,eAAe,IACZ,KAAK,CAAC,KAAK,EACd,CACO,CACZ,CAAC;aACH;QACH,CAAC,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CACe,CAAC;AAEnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AAErB,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../src/chat/Chat.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,CAAU,CAAC;AACpD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAC;AA8DlD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAaY,EACZ,GAAG,EACH,EAAE;QAfF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,OAAO,GAAG,QAAQ,EAClB,aAAa,EACb,eAAe,EACf,eAAe,EACf,IAAI,GAAG,QAAQ,OAEL,EADP,IAAI,cAZT,8IAaC,CADQ;IAGN,OAAA,CACH,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,YAAY,EACZ,SAAS,EACT,eAAe,QAAQ,EAAE,EACzB,wBAAwB,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,QAAQ,EAAE,EACrD,eAAe,IAAI,EAAE,EACrB,eAAe,OAAO,EAAE,CACzB,IACG,IAAI;QAEP,MAAM,IAAI,CACT,6BACE,SAAS,EAAC,oBAAoB,uBAE9B,KAAK,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE,IAExC,MAAM,CACH,CACP;QACD,4BAAI,SAAS,EAAC,4BAA4B,IACvC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC/B,OAAO,CACL,oBAAC,QAAQ,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,IACzB,KAAK,CAAC,YAAY,CAAC,KAAK,kBACvB,IAAI,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACxC,SAAS,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvD,eAAe,IACZ,KAAK,CAAC,KAAK,EACd,CACO,CACZ,CAAC;aACH;QACH,CAAC,CAAC,CACC,CACD,CACP,CAAA;CAAA,CACe,CAAC;AAEnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AAErB,eAAe,IAAI,CAAC"}

package/esm/form/error-summary/ErrorSummary.d.ts

@@ -21,6 +21,18 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
     headingTag?: React.ElementType<any>;
 }
 interface ErrorSummaryComponent extends React.ForwardRefExoticComponent<ErrorSummaryProps & React.RefAttributes<HTMLDivElement>> {
+    /**
+     * Link to error
+     *
+     * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+     *
+     * @example
+     * ```jsx
+     * <ErrorSummary.Item href="#1">
+     *   Felt må fylles ut med alder
+     * </ErrorSummary.Item>
+     * ```
+     */
     Item: ErrorSummaryItemType;
 }
 /**

package/esm/form/error-summary/ErrorSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorSummary.js","sourceRoot":"","sources":["../../../src/form/error-summary/ErrorSummary.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,gBAA0C,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AA8BnC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,IAAI,EACjB,OAAO,OAER,EADI,IAAI,cANT,0DAOC,CADQ;IAIT,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAE1B,OAAO,CACL,+CACE,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,qBAAqB,EACrB,wBAAwB,IAAI,EAAE,CAC/B,EACD,QAAQ,EAAE,CAAC,CAAC,eACF,QAAQ,mBACJ,KAAK,qBACF,SAAS;QAE1B,oBAAC,OAAO,IACN,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,SAAS,IAEZ,OAAO,CACA;QACV,oBAAC,SAAS,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,2BAA2B,IACjE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACtC,OAAO,4BAAI,GAAG,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,IAAG,KAAK,CAAM,CAAC;QAClD,CAAC,CAAC,CACQ,CACJ,CACX,CAAC;AACJ,CAAC,CACuB,CAAC;AAE3B,YAAY,CAAC,IAAI,GAAG,gBAAgB,CAAC;AAErC,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ErrorSummary.js","sourceRoot":"","sources":["../../../src/form/error-summary/ErrorSummary.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,gBAA0C,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AA0CnC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,IAAI,EACjB,OAAO,OAER,EADI,IAAI,cANT,0DAOC,CADQ;IAIT,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAE1B,OAAO,CACL,+CACE,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,qBAAqB,EACrB,wBAAwB,IAAI,EAAE,CAC/B,EACD,QAAQ,EAAE,CAAC,CAAC,eACF,QAAQ,mBACJ,KAAK,qBACF,SAAS;QAE1B,oBAAC,OAAO,IACN,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,SAAS,IAEZ,OAAO,CACA;QACV,oBAAC,SAAS,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,2BAA2B,IACjE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACtC,OAAO,4BAAI,GAAG,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,IAAG,KAAK,CAAM,CAAC;QAClD,CAAC,CAAC,CACQ,CACJ,CACX,CAAC;AACJ,CAAC,CACuB,CAAC;AAE3B,YAAY,CAAC,IAAI,GAAG,gBAAgB,CAAC;AAErC,eAAe,YAAY,CAAC"}

package/esm/form/error-summary/ErrorSummaryItem.d.ts

@@ -5,6 +5,10 @@ export interface ErrorSummaryItemProps extends React.AnchorHTMLAttributes<HTMLAn
      * Link text
      */
     children: React.ReactNode;
+    /**
+     * Link to errormessage
+     */
+    href?: string;
 }
 export type ErrorSummaryItemType = OverridableComponent<ErrorSummaryItemProps, HTMLAnchorElement>;
 export declare const ErrorSummaryItem: ErrorSummaryItemType;

package/esm/form/error-summary/ErrorSummaryItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorSummaryItem.js","sourceRoot":"","sources":["../../../src/form/error-summary/ErrorSummaryItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAgBtB,MAAM,CAAC,MAAM,gBAAgB,GAAyB,UAAU,CAC9D,CAAC,EAAqD,EAAE,GAAG,EAAE,EAAE;QAA9D,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,OAAW,EAAN,IAAI,cAAnD,+BAAqD,CAAF;IAClD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,2BAA2B,EAAE,YAAY,CAAC,KAElE,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ErrorSummaryItem.js","sourceRoot":"","sources":["../../../src/form/error-summary/ErrorSummaryItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAoBtB,MAAM,CAAC,MAAM,gBAAgB,GAAyB,UAAU,CAC9D,CAAC,EAAqD,EAAE,GAAG,EAAE,EAAE;QAA9D,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,OAAW,EAAN,IAAI,cAAnD,+BAAqD,CAAF;IAClD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,2BAA2B,EAAE,YAAY,CAAC,KAElE,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/esm/help-text/HelpText.d.ts

@@ -12,6 +12,10 @@ export interface HelpTextProps extends React.ButtonHTMLAttributes<HTMLButtonElem
      * @default "top"
      */
     placement?: "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+    /**
+     * Classname for wrapper
+     */
+    wrapperClassName?: string;
 }
 /**
  * A component that displays a help text button with a popover.

package/esm/help-text/HelpText.js

@@ -27,11 +27,11 @@ import { HelpTextIcon } from "./HelpTextIcon";
  * ```
  */
 export const HelpText = forwardRef((_a, ref) => {
-    var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick"]);
+    var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick, wrapperClassName } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick", "wrapperClassName"]);
     const buttonRef = useRef(null);
     const mergedRef = useMemo(() => mergeRefs([buttonRef, ref]), [ref]);
     const [open, setOpen] = useState(false);
-    return (React.createElement("div", { className: "navds-help-text" },
+    return (React.createElement("div", { className: cl("navds-help-text", wrapperClassName) },
         React.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
                 setOpen((x) => !x);
                 onClick === null || onClick === void 0 ? void 0 : onClick(e);

package/esm/help-text/HelpText.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,OAAO,EAAgB,SAAS,EAAE,MAAM,IAAI,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA8B9C;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,EACf,OAAO,OAER,EADI,IAAI,cAPT,sEAQC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACpE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI;YAEnB,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI;YAC9B,oBAAC,YAAY,IAAC,MAAM,QAAC,KAAK,EAAE,KAAK,GAAI,CAC9B;QACT,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,kBAAkB,IAC1C,QAAQ,CACO,CACV,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,OAAO,EAAgB,SAAS,EAAE,MAAM,IAAI,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAkC9C;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,EACf,OAAO,EACP,gBAAgB,OAEjB,EADI,IAAI,cART,0FASC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACpE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,gBAAgB,CAAC;QACrD,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI;YAEnB,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI;YAC9B,oBAAC,YAAY,IAAC,MAAM,QAAC,KAAK,EAAE,KAAK,GAAI,CAC9B;QACT,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,kBAAkB,IAC1C,QAAQ,CACO,CACV,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/timeline/Pin.js

@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { autoUpdate, arrow as flArrow, flip, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
-import { useEventListener, mergeRefs } from "../util";
 import { format } from "date-fns";
-import React, { forwardRef, useCallback, useMemo, useRef, useState, } from "react";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
+import { mergeRefs } from "../util";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { position } from "./utils/calc";
 export const Pin = forwardRef((_a, ref) => {
@@ -42,15 +42,6 @@ export const Pin = forwardRef((_a, ref) => {
         useDismiss(context),
     ]);
     const mergedRef = useMemo(() => mergeRefs([refs.setReference, ref]), [ref, refs.setReference]);
-    useEventListener("focusin", useCallback((e) => {
-        var _a;
-        if (![
-            refs.reference.current,
-            (_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current,
-        ].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target))) {
-            open && setOpen(false);
-        }
-    }, [open, refs.reference, refs === null || refs === void 0 ? void 0 : refs.floating]));
     const staticSide = {
         top: "bottom",
         right: "left",
@@ -73,6 +64,9 @@ export const Pin = forwardRef((_a, ref) => {
             })))),
         children && (React.createElement("div", Object.assign({ className: "navds-timeline__popover", "data-placement": placement, "aria-hidden": !open, ref: refs.setFloating }, getFloatingProps({
             tabIndex: -1,
+            onBlur: (e) => e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
         }), { style: Object.assign(Object.assign({}, floatingStyles), { display: open ? undefined : "none" }) }),
             React.createElement("div", { className: "navds-timeline__popover-content" }, children),
             React.createElement("div", { ref: (node) => {