@navikt/ds-react 0.7.7 → 0.8.0

package/cjs/accordion/Accordion.js

@@ -14,7 +14,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -33,32 +33,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const react_collapse_1 = require("react-collapse");
-const ds_icons_1 = require("@navikt/ds-icons");
-const __1 = require("..");
+const react_1 = __importStar(require("react"));
+const AccordionItem_1 = __importDefault(require("./AccordionItem"));
+const AccordionContent_1 = __importDefault(require("./AccordionContent"));
+const AccordionHeader_1 = __importDefault(require("./AccordionHeader"));
 const Accordion = react_1.forwardRef((_a, ref) => {
-    var { children, heading, open = false, className, renderContentWhenClosed = false, onClick, id } = _a, rest = __rest(_a, ["children", "heading", "open", "className", "renderContentWhenClosed", "onClick", "id"]);
-    const [internalOpen, setInternalOpen] = react_1.useState(open);
-    const buttonId = __1.useId(id);
-    const contentId = __1.useId();
-    react_1.useEffect(() => {
-        setInternalOpen(open);
-    }, [open]);
-    const CollapseComponent = renderContentWhenClosed
-        ? react_collapse_1.Collapse
-        : react_collapse_1.UnmountClosed;
-    return (react_1.default.createElement("div", { className: classnames_1.default("navds-accordion", className, {
-            "navds-accordion--open": internalOpen,
-            "navds-accordion--closed": !internalOpen,
-        }) },
-        react_1.default.createElement("button", Object.assign({ ref: ref, id: buttonId, className: "navds-accordion__button", "aria-expanded": open, "aria-controls": contentId, onClick: onClick ? onClick : () => setInternalOpen((open) => !open) }, rest),
-            react_1.default.createElement("span", { className: "navds-accordion__heading navds-title navds-title--s" }, heading),
-            react_1.default.createElement(ds_icons_1.Expand, { focusable: "false", role: "img", className: classnames_1.default("navds-accordion__chevron", `navds-accordion__chevron--${internalOpen ? "up" : "down"}`) }),
-            react_1.default.createElement(ds_icons_1.ExpandFilled, { focusable: "false", role: "img", className: classnames_1.default("navds-accordion__chevron", "navds-accordion__chevron--filled", `navds-accordion__chevron--${internalOpen ? "up" : "down"}`) })),
-        react_1.default.createElement("div", { id: contentId, role: "region", "aria-labelledby": buttonId },
-            react_1.default.createElement(CollapseComponent, { isOpened: internalOpen },
-                react_1.default.createElement("div", { className: "navds-accordion__content" }, children)))));
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: classnames_1.default("navds-accordion", className), ref: ref })));
 });
+Accordion.Header = AccordionHeader_1.default;
+Accordion.Content = AccordionContent_1.default;
+Accordion.Item = AccordionItem_1.default;
 exports.default = Accordion;

package/cjs/accordion/AccordionContent.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const react_collapse_1 = require("react-collapse");
+const util_1 = require("../util");
+const AccordionItem_1 = require("./AccordionItem");
+const AccordionContent = react_1.forwardRef((_a, ref) => {
+    var { children, className, id } = _a, rest = __rest(_a, ["children", "className", "id"]);
+    const context = react_1.useContext(AccordionItem_1.AccordionItemContext);
+    const newId = util_1.useId(id);
+    const setContentId = context && context.setContentId;
+    util_1.useClientLayoutEffect(() => {
+        setContentId && setContentId(id ? newId : `accordionContent-${newId}`);
+    }, [setContentId, newId]);
+    if (context === null) {
+        console.error("<Accordion.Content> has to be used within an <Accordion.Item>");
+        return null;
+    }
+    const CollapseComponent = context.renderContentWhenClosed
+        ? react_collapse_1.Collapse
+        : react_collapse_1.UnmountClosed;
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, id: context.contentId, role: "region", "aria-labelledby": context.buttonId }, rest),
+        react_1.default.createElement(CollapseComponent, { isOpened: context.open },
+            react_1.default.createElement("div", { className: classnames_1.default("navds-accordion__content", className) }, children))));
+});
+exports.default = AccordionContent;

package/cjs/accordion/AccordionHeader.js

@@ -0,0 +1,66 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ds_icons_1 = require("@navikt/ds-icons");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const AccordionItem_1 = require("./AccordionItem");
+const __1 = require("..");
+const AccordionHeader = react_1.forwardRef((_a, ref) => {
+    var { children, className, id, onClick } = _a, rest = __rest(_a, ["children", "className", "id", "onClick"]);
+    const context = react_1.useContext(AccordionItem_1.AccordionItemContext);
+    const newId = __1.useId(id);
+    const setButtonId = context && context.setButtonId;
+    __1.useClientLayoutEffect(() => {
+        setButtonId && setButtonId(id ? newId : `accordionContent-${newId}`);
+    }, [setButtonId, newId]);
+    if (context === null) {
+        console.error("<Accordion.Header> has to be used within an <Accordion.Item>");
+        return null;
+    }
+    const handleClick = (e) => {
+        context.toggleOpen();
+        onClick && onClick(e);
+    };
+    return (react_1.default.createElement("button", Object.assign({ ref: ref, id: context.buttonId, className: classnames_1.default("navds-accordion__header", className, "navds-heading", "navds-heading--small"), onClick: handleClick, "aria-controls": context.contentId }, rest),
+        children,
+        react_1.default.createElement(ds_icons_1.Expand, { focusable: "false", role: "img", "aria-label": context.open ? "Lukk panel ikon" : "Åpne panel ikon", className: classnames_1.default("navds-accordion__expand-icon", {
+                "navds-accordion__expand-icon--flip": context.open,
+            }) }),
+        react_1.default.createElement(ds_icons_1.ExpandFilled, { focusable: "false", role: "img", "aria-label": context.open ? "Lukk panel ikon" : "Åpne panel ikon", className: classnames_1.default("navds-accordion__expand-icon", "navds-accordion__expand-icon--filled", {
+                "navds-accordion__expand-icon--flip": context.open,
+            }) })));
+});
+exports.default = AccordionHeader;

package/cjs/accordion/AccordionItem.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionItemContext = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+exports.AccordionItemContext = react_1.createContext(null);
+const AccordionItem = react_1.forwardRef((_a, ref) => {
+    var { children, className, open, defaultOpen = false, renderContentWhenClosed = false, onClick, id } = _a, rest = __rest(_a, ["children", "className", "open", "defaultOpen", "renderContentWhenClosed", "onClick", "id"]);
+    const [internalOpen, setInternalOpen] = react_1.useState(defaultOpen);
+    const [buttonId, setButtonId] = react_1.useState("");
+    const [contentId, setContentId] = react_1.useState("");
+    return (react_1.default.createElement("div", Object.assign({ className: classnames_1.default("navds-accordion__item", className, {
+            "navds-accordion__item--open": open !== null && open !== void 0 ? open : internalOpen,
+        }), ref: ref }, rest),
+        react_1.default.createElement(exports.AccordionItemContext.Provider, { value: {
+                open: open !== null && open !== void 0 ? open : internalOpen,
+                toggleOpen: () => {
+                    if (open === undefined) {
+                        setInternalOpen((iOpen) => !iOpen);
+                    }
+                },
+                renderContentWhenClosed,
+                setButtonId,
+                buttonId,
+                setContentId,
+                contentId,
+            } }, children)));
+});
+exports.default = AccordionItem;

package/cjs/accordion/index.js

@@ -7,9 +7,13 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
 var Accordion_1 = require("./Accordion");
-Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.default; } });
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return __importDefault(Accordion_1).default; } });
 __exportStar(require("./Accordion"), exports);

package/cjs/accordion-menu/AccordionMenu.js

@@ -14,7 +14,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -36,9 +36,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const MenuItems_1 = __importDefault(require("./MenuItems"));
+const AccordionMenuCollapsable_1 = __importDefault(require("./AccordionMenuCollapsable"));
+const AccordionMenuItem_1 = __importDefault(require("./AccordionMenuItem"));
 const AccordionMenu = react_1.forwardRef((_a, ref) => {
     var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
     return (react_1.default.createElement("nav", Object.assign({ role: "navigation", ref: ref, className: classnames_1.default("navds-accordion-menu", className) }, rest),
         react_1.default.createElement(MenuItems_1.default, null, children)));
 });
+AccordionMenu.Collapsable = AccordionMenuCollapsable_1.default;
+AccordionMenu.Item = AccordionMenuItem_1.default;
 exports.default = AccordionMenu;

package/cjs/accordion-menu/AccordionMenuCollapsable.js

@@ -14,7 +14,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -37,7 +37,7 @@ const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const ds_icons_1 = require("@navikt/ds-icons");
 const MenuItems_1 = __importDefault(require("./MenuItems"));
-const AccordionMenuCollapsable = react_1.forwardRef((_a, ref) => {
+const Collapsable = react_1.forwardRef((_a, ref) => {
     var { children, defaultOpen = false, title, className } = _a, rest = __rest(_a, ["children", "defaultOpen", "title", "className"]);
     const [isOpen, setIsOpen] = react_1.useState(defaultOpen);
     return (react_1.default.createElement("div", Object.assign({ ref: ref, className: classnames_1.default("navds-accordion-menu-collapsable", className, {
@@ -48,4 +48,4 @@ const AccordionMenuCollapsable = react_1.forwardRef((_a, ref) => {
             react_1.default.createElement(ds_icons_1.Expand, { role: "img", focusable: "false", "aria-label": isOpen ? "Pil peker opp" : "Pil peker ned", className: "navds-accordion-menu-collapsable__expand-icon" })),
         isOpen && react_1.default.createElement(MenuItems_1.default, null, children)));
 });
-exports.default = AccordionMenuCollapsable;
+exports.default = Collapsable;

package/cjs/accordion-menu/AccordionMenuItem.js

@@ -14,7 +14,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -35,10 +35,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const AccordionMenuItem = react_1.forwardRef((_a, ref) => {
-    var { children, component: Component = "a", active = false, className } = _a, rest = __rest(_a, ["children", "component", "active", "className"]);
+const Item = react_1.forwardRef((_a, ref) => {
+    var { children, as: Component = "a", active = false, className } = _a, rest = __rest(_a, ["children", "as", "active", "className"]);
     return (react_1.default.createElement(Component, Object.assign({ ref: ref, className: classnames_1.default("navds-accordion-menu-item", className, {
             "navds-accordion-menu-item--active": active,
         }) }, rest), children));
 });
-exports.default = AccordionMenuItem;
+exports.default = Item;

package/cjs/accordion-menu/index.js

@@ -1,8 +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.AccordionMenu = void 0;
 var AccordionMenu_1 = require("./AccordionMenu");
-Object.defineProperty(exports, "AccordionMenu", { enumerable: true, get: function () { return AccordionMenu_1.default; } });
-var AccordionMenuCollapsable_1 = require("./AccordionMenuCollapsable");
-Object.defineProperty(exports, "AccordionMenuCollapsable", { enumerable: true, get: function () { return AccordionMenuCollapsable_1.default; } });
-var AccordionMenuItem_1 = require("./AccordionMenuItem");
-Object.defineProperty(exports, "AccordionMenuItem", { enumerable: true, get: function () { return AccordionMenuItem_1.default; } });
+Object.defineProperty(exports, "AccordionMenu", { enumerable: true, get: function () { return __importDefault(AccordionMenu_1).default; } });

package/cjs/alert/Alert.js

@@ -14,7 +14,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -33,29 +33,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertContext = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const ds_icons_1 = require("@navikt/ds-icons");
-const Icon = ({ variant }) => {
+const AlertContent_1 = __importDefault(require("./AlertContent"));
+const AlertTitle_1 = __importDefault(require("./AlertTitle"));
+const __1 = require("..");
+const Icon = (_a) => {
+    var { variant } = _a, props = __rest(_a, ["variant"]);
     switch (variant) {
         case "error":
-            return (react_1.default.createElement(ds_icons_1.ErrorFilled, { "aria-label": `${variant}-ikon`, focusable: "false", role: "img" }));
+            return react_1.default.createElement(ds_icons_1.ErrorFilled, Object.assign({}, props));
         case "warning":
-            return (react_1.default.createElement(ds_icons_1.WarningFilled, { "aria-label": `${variant}-ikon`, focusable: "false", role: "img" }));
+            return react_1.default.createElement(ds_icons_1.WarningFilled, Object.assign({}, props));
         case "info":
-            return (react_1.default.createElement(ds_icons_1.InformationFilled, { "aria-label": `${variant}-ikon`, focusable: "false", role: "img" }));
+            return react_1.default.createElement(ds_icons_1.InformationFilled, Object.assign({}, props));
         case "success":
-            return (react_1.default.createElement(ds_icons_1.SuccessFilled, { "aria-label": `${variant}-ikon`, focusable: "false", role: "img" }));
+            return react_1.default.createElement(ds_icons_1.SuccessFilled, Object.assign({}, props));
         default:
             return null;
     }
 };
+exports.AlertContext = react_1.createContext(null);
 const Alert = react_1.forwardRef((_a, ref) => {
-    var { variant, children, className, size = "m" } = _a, rest = __rest(_a, ["variant", "children", "className", "size"]);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: classnames_1.default(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, "navds-body-long", { "navds-body--s": size === "s" }) }, rest),
-        react_1.default.createElement("span", null,
-            react_1.default.createElement("span", { className: "sr-only" }, `${variant}-ikon`),
-            react_1.default.createElement(Icon, { variant: variant })),
-        react_1.default.createElement("div", null, children)));
+    var { children, className, variant, size = "medium", fullWidth = false, inline = false } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "fullWidth", "inline"]);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: classnames_1.default(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }) }),
+        react_1.default.createElement(Icon, { "aria-label": `${variant}-ikon`, focusable: "false", role: "img", variant: variant, alt: `${variant}-ikon`, className: "navds-alert__icon" }),
+        react_1.default.createElement(__1.BodyLong, { as: "div", size: size, className: "navds-alert__wrapper" }, children)));
 });
+Alert.Title = AlertTitle_1.default;
+Alert.Content = AlertContent_1.default;
 exports.default = Alert;

package/cjs/alert/AlertContent.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const __1 = require("..");
+const _1 = require(".");
+const AlertContent = react_1.forwardRef((_a, ref) => {
+    var _b;
+    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
+    const context = react_1.useContext(_1.AlertContext);
+    if (context === null) {
+        console.warn("AlertContent has to be wrapped in <Alert />");
+        return null;
+    }
+    return (react_1.default.createElement(__1.BodyLong, Object.assign({}, rest, { as: "div", className: classnames_1.default(className, "navds-alert__content"), ref: ref, size: (_b = context.size) !== null && _b !== void 0 ? _b : "medium" }), children));
+});
+exports.default = AlertContent;