@navikt/ds-react 2.8.1 → 2.8.2

package/cjs/expansion-card/ExpansionCard.js

@@ -47,6 +47,7 @@ const ExpansionCardTitle_1 = require("./ExpansionCardTitle");
 exports.ExpansionCardContext = (0, react_1.createContext)({
     open: false,
     toggleOpen: () => { },
+    size: "medium",
 });
 exports.ExpansionCard = (0, react_1.forwardRef)((_a, ref) => {
     var { className, onToggle, open, defaultOpen = false, size = "medium" } = _a, rest = __rest(_a, ["className", "onToggle", "open", "defaultOpen", "size"]);
@@ -63,7 +64,7 @@ exports.ExpansionCard = (0, react_1.forwardRef)((_a, ref) => {
         }
         shouldFade.current = true;
     };
-    return (react_1.default.createElement(exports.ExpansionCardContext.Provider, { value: { open: open !== null && open !== void 0 ? open : _open, toggleOpen: handleOpen } },
+    return (react_1.default.createElement(exports.ExpansionCardContext.Provider, { value: { open: open !== null && open !== void 0 ? open : _open, toggleOpen: handleOpen, size } },
         react_1.default.createElement("section", Object.assign({}, rest, { className: (0, clsx_1.default)("navds-expansioncard", className, `navds-expansioncard--${size}`, {
                 "navds-expansioncard--open": open !== null && open !== void 0 ? open : _open,
                 "navds-expansioncard--no-fade": !shouldFade.current,

package/cjs/expansion-card/ExpansionCardContent.js

@@ -50,7 +50,7 @@ const ExpansionCardContent = (0, react_1.forwardRef)((_a, ref) => {
     }
     return (react_1.default.createElement(BodyLong_1.BodyLong, Object.assign({}, rest, { ref: ref, as: "div", className: (0, clsx_1.default)("navds-expansioncard__content", {
             "navds-expansioncard__content--closed": !panelContext.open,
-        }), "aria-hidden": !panelContext.open }),
+        }), "aria-hidden": !panelContext.open, size: panelContext.size }),
         react_1.default.createElement("div", { className: "navds-expansioncard__content-inner" }, children)));
 });
 exports.default = ExpansionCardContent;

package/cjs/expansion-card/ExpansionCardDescription.js

@@ -41,7 +41,13 @@ exports.ExpansionCardDescription = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const BodyLong_1 = require("../typography/BodyLong");
+const ExpansionCard_1 = require("./ExpansionCard");
 exports.ExpansionCardDescription = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement(BodyLong_1.BodyLong, Object.assign({}, rest, { as: "p", ref: ref, className: (0, clsx_1.default)("navds-link-panel__description", className) })));
+    const panelContext = (0, react_1.useContext)(ExpansionCard_1.ExpansionCardContext);
+    if (panelContext === null) {
+        console.error("<ExpansionCard.Header> has to be used within an <ExpansionCard>");
+        return null;
+    }
+    return (react_1.default.createElement(BodyLong_1.BodyLong, Object.assign({}, rest, { as: "p", ref: ref, className: (0, clsx_1.default)("navds-link-panel__description", className), size: panelContext.size })));
 });

package/esm/expansion-card/ExpansionCard.d.ts

@@ -37,6 +37,7 @@ export interface ExpansionCardProps extends React.HTMLAttributes<HTMLDivElement>
 export type ExpansionCardContextProps = {
     open: boolean;
     toggleOpen: () => void;
+    size: "medium" | "small";
 };
 export declare const ExpansionCardContext: React.Context<ExpansionCardContextProps>;
 export declare const ExpansionCard: ExpansionCardComponent;

package/esm/expansion-card/ExpansionCard.js

@@ -18,6 +18,7 @@ import { ExpansionCardTitle, } from "./ExpansionCardTitle";
 export const ExpansionCardContext = createContext({
     open: false,
     toggleOpen: () => { },
+    size: "medium",
 });
 export const ExpansionCard = forwardRef((_a, ref) => {
     var { className, onToggle, open, defaultOpen = false, size = "medium" } = _a, rest = __rest(_a, ["className", "onToggle", "open", "defaultOpen", "size"]);
@@ -34,7 +35,7 @@ export const ExpansionCard = forwardRef((_a, ref) => {
         }
         shouldFade.current = true;
     };
-    return (React.createElement(ExpansionCardContext.Provider, { value: { open: open !== null && open !== void 0 ? open : _open, toggleOpen: handleOpen } },
+    return (React.createElement(ExpansionCardContext.Provider, { value: { open: open !== null && open !== void 0 ? open : _open, toggleOpen: handleOpen, size } },
         React.createElement("section", Object.assign({}, rest, { className: cl("navds-expansioncard", className, `navds-expansioncard--${size}`, {
                 "navds-expansioncard--open": open !== null && open !== void 0 ? open : _open,
                 "navds-expansioncard--no-fade": !shouldFade.current,

package/esm/expansion-card/ExpansionCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpansionCard.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,oBAEN,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,wBAAwB,GAEzB,MAAM,4BAA4B,CAAC;AACpC,OAAO,mBAEN,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,kBAAkB,GAEnB,MAAM,sBAAsB,CAAC;AA4C9B,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA4B;IAC3E,IAAI,EAAE,KAAK;IACX,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,IAAI,GAAG,QAAQ,OAEhB,EADI,IAAI,cANT,wDAOC,CADQ;IAIT,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAEhD,MAAM,UAAU,GAAG,MAAM,CAAU,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC;IAEpE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC;YACvB,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,OAAO,CAAC,CAAC;SACrB;aAAM;YACL,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,IAAI,CAAC,CAAC;SACnB;QACD,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE;QAEtD,iDACM,IAAI,IACR,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,SAAS,EACT,wBAAwB,IAAI,EAAE,EAC9B;gBACE,2BAA2B,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK;gBAC1C,8BAA8B,EAAE,CAAC,UAAU,CAAC,OAAO;aACpD,CACF,EACD,GAAG,EAAE,GAAG,IACR,CAC4B,CACjC,CAAC;AACJ,CAAC,CACwB,CAAC;AAE5B,aAAa,CAAC,MAAM,GAAG,mBAAmB,CAAC;AAC3C,aAAa,CAAC,OAAO,GAAG,oBAAoB,CAAC;AAC7C,aAAa,CAAC,KAAK,GAAG,kBAAkB,CAAC;AACzC,aAAa,CAAC,WAAW,GAAG,wBAAwB,CAAC;AAErD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ExpansionCard.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,oBAEN,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,wBAAwB,GAEzB,MAAM,4BAA4B,CAAC;AACpC,OAAO,mBAEN,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,kBAAkB,GAEnB,MAAM,sBAAsB,CAAC;AA6C9B,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA4B;IAC3E,IAAI,EAAE,KAAK;IACX,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;IACpB,IAAI,EAAE,QAAQ;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,IAAI,GAAG,QAAQ,OAEhB,EADI,IAAI,cANT,wDAOC,CADQ;IAIT,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAEhD,MAAM,UAAU,GAAG,MAAM,CAAU,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC;IAEpE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC;YACvB,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,OAAO,CAAC,CAAC;SACrB;aAAM;YACL,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,IAAI,CAAC,CAAC;SACnB;QACD,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE;QAE5D,iDACM,IAAI,IACR,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,SAAS,EACT,wBAAwB,IAAI,EAAE,EAC9B;gBACE,2BAA2B,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK;gBAC1C,8BAA8B,EAAE,CAAC,UAAU,CAAC,OAAO;aACpD,CACF,EACD,GAAG,EAAE,GAAG,IACR,CAC4B,CACjC,CAAC;AACJ,CAAC,CACwB,CAAC;AAE5B,aAAa,CAAC,MAAM,GAAG,mBAAmB,CAAC;AAC3C,aAAa,CAAC,OAAO,GAAG,oBAAoB,CAAC;AAC7C,aAAa,CAAC,KAAK,GAAG,kBAAkB,CAAC;AACzC,aAAa,CAAC,WAAW,GAAG,wBAAwB,CAAC;AAErD,eAAe,aAAa,CAAC"}

package/esm/expansion-card/ExpansionCardContent.js

@@ -22,7 +22,7 @@ const ExpansionCardContent = forwardRef((_a, ref) => {
     }
     return (React.createElement(BodyLong, Object.assign({}, rest, { ref: ref, as: "div", className: cl("navds-expansioncard__content", {
             "navds-expansioncard__content--closed": !panelContext.open,
-        }), "aria-hidden": !panelContext.open }),
+        }), "aria-hidden": !panelContext.open, size: panelContext.size }),
         React.createElement("div", { className: "navds-expansioncard__content-inner" }, children)));
 });
 export default ExpansionCardContent;

package/esm/expansion-card/ExpansionCardContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpansionCardContent.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCardContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAWvD,MAAM,oBAAoB,GAA6B,UAAU,CAC/D,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,MAAM,YAAY,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEtD,IAAI,YAAY,KAAK,IAAI,EAAE;QACzB,OAAO,CAAC,KAAK,CACX,kEAAkE,CACnE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE;YAC5C,sCAAsC,EAAE,CAAC,YAAY,CAAC,IAAI;SAC3D,CAAC,iBACW,CAAC,YAAY,CAAC,IAAI;QAE/B,6BAAK,SAAS,EAAC,oCAAoC,IAAE,QAAQ,CAAO,CAC3D,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ExpansionCardContent.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCardContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAWvD,MAAM,oBAAoB,GAA6B,UAAU,CAC/D,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,MAAM,YAAY,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEtD,IAAI,YAAY,KAAK,IAAI,EAAE;QACzB,OAAO,CAAC,KAAK,CACX,kEAAkE,CACnE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE;YAC5C,sCAAsC,EAAE,CAAC,YAAY,CAAC,IAAI;SAC3D,CAAC,iBACW,CAAC,YAAY,CAAC,IAAI,EAC/B,IAAI,EAAE,YAAY,CAAC,IAAI;QAEvB,6BAAK,SAAS,EAAC,oCAAoC,IAAE,QAAQ,CAAO,CAC3D,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/esm/expansion-card/ExpansionCardDescription.js

@@ -9,11 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from "react";
+import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
 import { BodyLong } from "../typography/BodyLong";
+import { ExpansionCardContext } from "./ExpansionCard";
 export const ExpansionCardDescription = forwardRef((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement(BodyLong, Object.assign({}, rest, { as: "p", ref: ref, className: cl("navds-link-panel__description", className) })));
+    const panelContext = useContext(ExpansionCardContext);
+    if (panelContext === null) {
+        console.error("<ExpansionCard.Header> has to be used within an <ExpansionCard>");
+        return null;
+    }
+    return (React.createElement(BodyLong, Object.assign({}, rest, { as: "p", ref: ref, className: cl("navds-link-panel__description", className), size: panelContext.size })));
 });
 //# sourceMappingURL=ExpansionCardDescription.js.map

package/esm/expansion-card/ExpansionCardDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpansionCardDescription.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCardDescription.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAWlD,MAAM,CAAC,MAAM,wBAAwB,GACnC,UAAU,CAAC,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CAC1C,oBAAC,QAAQ,oBACH,IAAI,IACR,EAAE,EAAC,GAAG,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,IACzD,CACH,CAAA;CAAA,CAAC,CAAC"}
+{"version":3,"file":"ExpansionCardDescription.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCardDescription.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAWvD,MAAM,CAAC,MAAM,wBAAwB,GACnC,UAAU,CAAC,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAC9B,MAAM,YAAY,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEtD,IAAI,YAAY,KAAK,IAAI,EAAE;QACzB,OAAO,CAAC,KAAK,CACX,iEAAiE,CAClE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,EAAE,EAAC,GAAG,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,EACzD,IAAI,EAAE,YAAY,CAAC,IAAI,IACvB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/aksel-icons": "^2.8.1",
-    "@navikt/ds-icons": "^2.8.1",
+    "@navikt/aksel-icons": "^2.8.2",
+    "@navikt/ds-icons": "^2.8.2",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/expansion-card/ExpansionCard.tsx

@@ -55,11 +55,13 @@ export interface ExpansionCardProps
 export type ExpansionCardContextProps = {
   open: boolean;
   toggleOpen: () => void;
+  size: "medium" | "small";
 };
 
 export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
   open: false,
   toggleOpen: () => {},
+  size: "medium",
 });
 
 export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
@@ -91,7 +93,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
 
     return (
       <ExpansionCardContext.Provider
-        value={{ open: open ?? _open, toggleOpen: handleOpen }}
+        value={{ open: open ?? _open, toggleOpen: handleOpen, size }}
       >
         <section
           {...rest}

package/src/expansion-card/ExpansionCardContent.tsx

@@ -32,6 +32,7 @@ const ExpansionCardContent: ExpansionCardContentType = forwardRef(
           "navds-expansioncard__content--closed": !panelContext.open,
         })}
         aria-hidden={!panelContext.open}
+        size={panelContext.size}
       >
         <div className="navds-expansioncard__content-inner">{children}</div>
       </BodyLong>

package/src/expansion-card/ExpansionCardDescription.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
 import { BodyLong } from "../typography/BodyLong";
+import { ExpansionCardContext } from "./ExpansionCard";
 
 interface ExpansionCardDescriptionProps
   extends React.HTMLAttributes<HTMLParagraphElement> {
@@ -12,11 +13,23 @@ export type ExpansionCardDescriptionType = React.ForwardRefExoticComponent<
 >;
 
 export const ExpansionCardDescription: ExpansionCardDescriptionType =
-  forwardRef(({ className, ...rest }, ref) => (
-    <BodyLong
-      {...rest}
-      as="p"
-      ref={ref}
-      className={cl("navds-link-panel__description", className)}
-    />
-  ));
+  forwardRef(({ className, ...rest }, ref) => {
+    const panelContext = useContext(ExpansionCardContext);
+
+    if (panelContext === null) {
+      console.error(
+        "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
+      );
+      return null;
+    }
+
+    return (
+      <BodyLong
+        {...rest}
+        as="p"
+        ref={ref}
+        className={cl("navds-link-panel__description", className)}
+        size={panelContext.size}
+      />
+    );
+  });