@navikt/ds-react 4.0.0 → 4.1.0

package/_docs.json

@@ -66,6 +66,27 @@
           "name": "\"large\" | \"medium\" | \"small\""
         }
       },
+      "indent": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Whether to indent content or not",
+        "name": "indent",
+        "parent": {
+          "fileName": "src/accordion/Accordion.tsx",
+          "name": "AccordionProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/accordion/Accordion.tsx",
+            "name": "AccordionProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "children": {
         "defaultValue": null,
         "description": "Instances of Accordion.Item",
@@ -1094,7 +1115,7 @@
     "props": {
       "variant": {
         "defaultValue": {
-          "value": "\"action\""
+          "value": "action"
         },
         "description": "Chip-variants",
         "name": "variant",
@@ -1115,7 +1136,7 @@
       },
       "removeLabel": {
         "defaultValue": {
-          "value": "\"slett filter\""
+          "value": "slett"
         },
         "description": "Replaces label read for screen-readers",
         "name": "removeLabel",
@@ -1216,6 +1237,48 @@
           "name": "boolean"
         }
       },
+      "variant": {
+        "defaultValue": {
+          "value": "action"
+        },
+        "description": "Chip-variants",
+        "name": "variant",
+        "parent": {
+          "fileName": "src/chips/Toggle.tsx",
+          "name": "ToggleChipsProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chips/Toggle.tsx",
+            "name": "ToggleChipsProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"action\" | \"neutral\""
+        }
+      },
+      "checkmark": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Toggles display of checkmark on selected",
+        "name": "checkmark",
+        "parent": {
+          "fileName": "src/chips/Toggle.tsx",
+          "name": "ToggleChipsProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chips/Toggle.tsx",
+            "name": "ToggleChipsProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -6656,9 +6719,112 @@
       }
     }
   },
+  {
+    "filePath": "src/skeleton/Skeleton.tsx",
+    "displayName": "Skeleton",
+    "props": {
+      "variant": {
+        "defaultValue": {
+          "value": "text"
+        },
+        "description": "",
+        "name": "variant",
+        "parent": {
+          "fileName": "src/skeleton/Skeleton.tsx",
+          "name": "SkeletonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/skeleton/Skeleton.tsx",
+            "name": "SkeletonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"circle\" | \"rectangle\" | \"rounded\" | \"text\""
+        }
+      },
+      "height": {
+        "defaultValue": null,
+        "description": "When not inferring height from children, you must specify height",
+        "name": "height",
+        "parent": {
+          "fileName": "src/skeleton/Skeleton.tsx",
+          "name": "SkeletonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/skeleton/Skeleton.tsx",
+            "name": "SkeletonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string | number"
+        }
+      },
+      "width": {
+        "defaultValue": null,
+        "description": "When not infering width from children, you must specify width",
+        "name": "width",
+        "parent": {
+          "fileName": "src/skeleton/Skeleton.tsx",
+          "name": "SkeletonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/skeleton/Skeleton.tsx",
+            "name": "SkeletonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string | number"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).\n@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom",
+        "name": "ref",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/stepper/Step.tsx",
-    "displayName": "StepComponent",
+    "displayName": "Step",
     "props": {
       "children": {
         "defaultValue": null,
@@ -14934,7 +15100,7 @@
         ],
         "required": false,
         "type": {
-          "name": "Ref<HTMLElement>"
+          "name": "Ref<HTMLDetailsElement>"
         }
       }
     }
@@ -14997,7 +15163,7 @@
         ],
         "required": false,
         "type": {
-          "name": "Ref<HTMLElement>"
+          "name": "Ref<HTMLDetailsElement>"
         }
       }
     }

package/cjs/accordion/Accordion.js

@@ -44,14 +44,34 @@ const AccordionItem_1 = __importDefault(require("./AccordionItem"));
 const AccordionContent_1 = __importDefault(require("./AccordionContent"));
 const AccordionHeader_1 = __importDefault(require("./AccordionHeader"));
 const AccordionContext_1 = require("./AccordionContext");
+/**
+ * A component that displays collapsible content sections.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/accordion)
+ * @see 🏷️ {@link AccordionProps}
+ *
+ * @example
+ * ```jsx
+ * <Accordion>
+ *   <Accordion.Item>
+ *     <Accordion.Header>Section 1</Accordion.Header>
+ *     <Accordion.Content>Content 1</Accordion.Content>
+ *   </Accordion.Item>
+ *   <Accordion.Item>
+ *     <Accordion.Header>Section 2</Accordion.Header>
+ *     <Accordion.Content>Content 2</Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ */
 exports.Accordion = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, variant = "default", headingSize = "small", size = "medium" } = _a, rest = __rest(_a, ["className", "variant", "headingSize", "size"]);
+    var { className, variant = "default", headingSize = "small", size = "medium", indent = true } = _a, rest = __rest(_a, ["className", "variant", "headingSize", "size", "indent"]);
     return (react_1.default.createElement(AccordionContext_1.AccordionContext.Provider, { value: {
             variant,
             headingSize,
             size,
         } },
-        react_1.default.createElement("div", Object.assign({}, rest, { className: (0, clsx_1.default)("navds-accordion", className, `navds-accordion--${size}`), ref: ref }))));
+        react_1.default.createElement("div", Object.assign({}, rest, { className: (0, clsx_1.default)("navds-accordion", className, `navds-accordion--${size}`, { "navds-accordion--indent": indent }), ref: ref }))));
 });
 exports.Accordion.Header = AccordionHeader_1.default;
 exports.Accordion.Content = AccordionContent_1.default;

package/cjs/alert/Alert.js

@@ -57,6 +57,15 @@ const Icon = (_a) => {
             return null;
     }
 };
+/**
+ * A component for displaying alerts
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/alert)
+ * @see 🏷️ {@link AlertProps}
+ * @example
+ * ```jsx
+ * <Alert variant="error">Dette er en feilmelding</Alert>
+ * ```
+ */
 exports.Alert = (0, react_1.forwardRef)((_a, ref) => {
     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: (0, clsx_1.default)(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }) }),

package/cjs/button/Button.js

@@ -42,6 +42,16 @@ const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("../");
 const util_1 = require("../util");
+/**
+ * A button component
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/button)
+ * @see 🏷️ {@link ButtonProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ * @example
+ * ```jsx
+ * <Button>Klikk meg</Button>
+ * ```
+ */
 exports.Button = (0, react_1.forwardRef)((_a, ref) => {
     var { as: Component = "button", variant = "primary", className, children, size = "medium", loading = false, disabled, style, icon, iconPosition = "left" } = _a, rest = __rest(_a, ["as", "variant", "className", "children", "size", "loading", "disabled", "style", "icon", "iconPosition"]);
     const buttonRef = (0, react_1.useRef)(null);

package/cjs/chat/Chat.js

@@ -42,6 +42,22 @@ const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const Bubble_1 = __importDefault(require("./Bubble"));
 const typography_1 = require("../typography");
+/**
+ * A component for displaying chat messages.
+ *
+ * @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>
+ * <Chat>
+ *   <Chat.Bubble avatar="B" name="Bob">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),

package/cjs/chips/Chips.js

@@ -42,6 +42,33 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const Toggle_1 = __importDefault(require("./Toggle"));
 const Removable_1 = __importDefault(require("./Removable"));
+/**
+ * A component that displays a list of items as chips.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chips)
+ * @see 🏷️ {@link ChipsProps}
+ *
+ * @example
+ * ```jsx
+      <Chips size="small">
+        {options.map((c) => (
+          <Chips.Toggle
+            selected={selected.includes(c)}
+            key={c}
+            onClick={() =>
+              setSelected(
+                selected.includes(c)
+                  ? selected.filter((x) => x !== c)
+                  : [...selected, c]
+              )
+            }
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+ * ```
+ */
 exports.Chips = (0, react_1.forwardRef)((_a, ref) => {
     var { className, size = "medium", children } = _a, rest = __rest(_a, ["className", "size", "children"]);
     return (react_1.default.createElement("ul", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-chips", className, `navds-chips--${size}`, {

package/cjs/chips/Toggle.js

@@ -38,15 +38,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleChips = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 exports.ToggleChips = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, selected, as: Component = "button" } = _a, rest = __rest(_a, ["className", "children", "selected", "as"]);
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-chips__chip navds-chips__toggle", className, {
-            "navds-chips--icon-left": selected,
-        }), "aria-pressed": selected }),
-        selected && (react_1.default.createElement(aksel_icons_1.CheckmarkIcon, { "aria-hidden": true, className: "navds-chips__toggle-icon" })),
+    var { className, children, selected, variant = "action", checkmark = true, as: Component = "button" } = _a, rest = __rest(_a, ["className", "children", "selected", "variant", "checkmark", "as"]);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-chips__chip navds-chips__toggle", className, `navds-chips__toggle--${variant}`), "aria-pressed": selected }),
+        selected && checkmark && (react_1.default.createElement("svg", { "aria-hidden": true, className: "navds-chips__toggle-icon", width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img" },
+            react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.51894 0.45851C9.81799 0.745107 9.8281 1.21987 9.5415 1.51893L3.7915 7.51893C3.51247 7.81009 3.05315 7.82848 2.75174 7.56056L0.501735 5.56056C0.192148 5.28537 0.164263 4.81132 0.439451 4.50173C0.71464 4.19214 1.18869 4.16426 1.49828 4.43944L3.20835 5.95951L8.45852 0.481072C8.74511 0.182015 9.21988 0.171913 9.51894 0.45851Z", fill: "currentColor" }))),
         react_1.default.createElement("span", { className: "navds-chips__chip-text" }, children)));
 });
 exports.default = exports.ToggleChips;

package/cjs/copybutton/CopyButton.js

@@ -43,6 +43,17 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const copy_1 = __importDefault(require("../util/copy"));
 const Label_1 = __importDefault(require("../typography/Label"));
+/**
+ * A button component that copies text to the clipboard when clicked.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/copybutton)
+ * @see 🏷️ {@link CopyButtonProps}
+ *
+ * @example
+ * ```jsx
+      <CopyButton copyText="3.14" />
+ * ```
+ */
 exports.CopyButton = (0, react_1.forwardRef)((_a, ref) => {
     var { className, copyText, text, activeText = "Kopiert!", variant = "neutral", size = "medium", onActiveChange, icon, activeIcon, activeDuration = 2000, title = "Kopier", activeTitle = "Kopiert" } = _a, rest = __rest(_a, ["className", "copyText", "text", "activeText", "variant", "size", "onActiveChange", "icon", "activeIcon", "activeDuration", "title", "activeTitle"]);
     const [active, setActive] = (0, react_1.useState)(false);

package/cjs/date/DateInput.js

@@ -74,7 +74,7 @@ const DateInput = (0, react_1.forwardRef)((props, ref) => {
                 react_1.default.createElement(aksel_icons_1.CalendarIcon, { pointerEvents: "none", title: open
                         ? conditionalVariables.iconTitle.close
                         : conditionalVariables.iconTitle.open }))),
-        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error)))));
+        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error))));
 });
 exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => react_1.default.createElement(DateInput, Object.assign({}, props, { ref: ref })));
 exports.MonthPickerInput = (0, react_1.forwardRef)((props, ref) => react_1.default.createElement(DateInput, Object.assign({}, props, { variant: "monthpicker", ref: ref })));

package/cjs/date/datepicker/DatePicker.js

@@ -50,6 +50,28 @@ const caption_1 = require("./caption");
 const DatePickerStandalone_1 = __importDefault(require("./DatePickerStandalone"));
 const DayButton_1 = require("./DayButton");
 const TableHead_1 = require("./TableHead");
+/**
+ * A component that allows users to select a date from a calendar.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/datepicker)
+ * @see 🏷️ {@link DatePickerProps}
+ *
+ * @example
+ * ```jsx
+ *  const { inputProps, datepickerProps } = useMonthpicker({
+ *    onMonthChange: console.log,
+ *  });
+ *
+ *  return (
+ *     <DatePicker {...datepickerProps} dropdownCaption>
+ *       <DatePicker.Input
+ *         {...inputProps}
+ *         label="Velg dato"
+ *       />
+ *     </DatePicker>
+ *  );
+ * ```
+ */
 exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
     var { children, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, className, wrapperClassName, open: _open, onClose, onOpenToggle, strategy = "absolute" } = _a, rest = __rest(_a, ["children", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "className", "wrapperClassName", "open", "onClose", "onOpenToggle", "strategy"]);

package/cjs/date/hooks/useDatepicker.js

@@ -12,6 +12,19 @@ const utils_1 = require("../utils");
 const useEscape_1 = require("./useEscape");
 const useOutsideClickHandler_1 = require("./useOutsideClickHandler");
 const getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidDate: true }, val));
+/**
+ *
+ * @see 🏷️ {@link UseDatepickerOptions}
+ * @see 🏷️ {@link UseDatepickerValue}
+ * @see 🏷️ {@link DateValidationT}
+ * @example
+ * const { datepickerProps, inputProps } = useDatepicker({
+ *   fromDate: new Date("Aug 23 2019"),
+ *   toDate: new Date("Feb 23 2024"),
+ *   onDateChange: console.log,
+ *   onValidate: console.log,
+ * });
+ */
 const useDatepicker = (opt = {}) => {
     var _a, _b;
     const { locale: _locale = "nb", required, defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onDateChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, openOnFocus = true, } = opt;

package/cjs/date/hooks/useMonthPicker.js

@@ -16,6 +16,19 @@ const getIsAfter = (opt) => opt.toDate &&
     (opt.toDate.getFullYear() < opt.date.getFullYear() ||
         (opt.toDate.getFullYear() === opt.date.getFullYear() &&
             opt.toDate.getMonth() < opt.date.getMonth()));
+/**
+ *
+ * @see 🏷️ {@link UseMonthPickerOptions}
+ * @see 🏷️ {@link UseMonthPickerValue}
+ * @see 🏷️ {@link MonthValidationT}
+ * @example
+ * const { monthpickerProps, inputProps } = useMonthpicker({
+ *   fromDate: new Date("Aug 23 2019"),
+ *   toDate: new Date("Feb 23 2024"),
+ *   onMonthChange: console.log,
+ *   onValidate: console.log,
+ * });
+ */
 const useMonthpicker = (opt = {}) => {
     var _a, _b;
     const { locale: _locale = "nb", defaultSelected: _defaultSelected, fromDate, toDate, disabled, required, onMonthChange, inputFormat, onValidate, defaultYear, allowTwoDigitYear = true, openOnFocus = true, } = opt;

package/cjs/date/hooks/useRangeDatepicker.js

@@ -80,6 +80,18 @@ const initialValidation = (range, opt) => {
         : { isEmpty: true, isValidDate: false };
     return getValidationMessage(Object.assign({}, fromVal), Object.assign({}, toVal));
 };
+/**
+ *
+ * @see 🏷️ {@link UseRangeDatepickerOptions}
+ * @see 🏷️ {@link UseRangeDatepickerValue}
+ * @see 🏷️ {@link RangeValidationT}
+ * @example
+ * const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
+ *   fromDate: new Date("Aug 23 2019"),
+ *   onRangeChange: console.log,
+ *   onValidate: console.log,
+ * });
+ */
 const useRangeDatepicker = (opt = {}) => {
     var _a, _b;
     const { locale: _locale = "nb", defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onRangeChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, openOnFocus = true, } = opt;

package/cjs/date/monthpicker/MonthPicker.js

@@ -37,6 +37,28 @@ const utils_1 = require("../utils");
 const MonthCaption_1 = __importDefault(require("./MonthCaption"));
 const MonthPickerStandalone_1 = __importDefault(require("./MonthPickerStandalone"));
 const MonthSelector_1 = __importDefault(require("./MonthSelector"));
+/**
+ * A component that displays a month picker.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/monthpicker)
+ * @see 🏷️ {@link MonthPickerProps}
+ *
+ * @example
+ * ```jsx
+ *  const { inputProps, monthpickerProps } = useMonthpicker({
+ *    onMonthChange: console.log,
+ *  });
+ *
+ *  return (
+ *     <MonthPicker {...monthpickerProps} dropdownCaption>
+ *       <MonthPicker.Input
+ *         {...inputProps}
+ *         label="Velg måned"
+ *       />
+ *     </MonthPicker>
+ *  );
+ * ```
+ */
 exports.MonthPicker = (0, react_1.forwardRef)(({ children, dropdownCaption = false, fromDate, toDate, disabled = [], selected, open: _open, id, onClose, onOpenToggle, locale = "nb", onMonthSelect, className, wrapperClassName, defaultSelected, year, onYearChange, strategy = "absolute", }, ref) => {
     const ariaId = (0, __1.useId)(id);
     const [open, setOpen] = (0, react_1.useState)(_open !== null && _open !== void 0 ? _open : false);

package/cjs/dropdown/Dropdown.js

@@ -31,6 +31,37 @@ const react_1 = __importStar(require("react"));
 const Toggle_1 = __importDefault(require("./Toggle"));
 const Menu_1 = __importDefault(require("./Menu"));
 exports.DropdownContext = (0, react_1.createContext)(null);
+/**
+ * A component that displays a dropdown menu when the user clicks on its toggle button.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/dropdown)
+ * @see 🏷️ {@link DropdownProps}
+ *
+ * @example
+ * ```jsx
+ * <Dropdown>
+ *   <Button as={Dropdown.Toggle}>Toggle</Button>
+ *   <Dropdown.Menu>
+ *     <Dropdown.Menu.GroupedList>
+ *       <Dropdown.Menu.GroupedList.Heading>
+ *         Systemer og oppslagsverk
+ *       </Dropdown.Menu.GroupedList.Heading>
+ *       <Dropdown.Menu.GroupedList.Item>
+ *         Gosys
+ *       </Dropdown.Menu.GroupedList.Item>
+ *       <Dropdown.Menu.GroupedList.Item>
+ *         Infotrygd
+ *       </Dropdown.Menu.GroupedList.Item>
+ *     </Dropdown.Menu.GroupedList>
+ *     <Dropdown.Menu.Divider />
+ *     <Dropdown.Menu.List>
+ *       <Dropdown.Menu.List.Item>Gosys</Dropdown.Menu.List.Item>
+ *       <Dropdown.Menu.List.Item>Infotrygd</Dropdown.Menu.List.Item>
+ *     </Dropdown.Menu.List>
+ *   </Dropdown.Menu>
+ * </Dropdown>
+ * ```
+ */
 exports.Dropdown = (({ children, onSelect, closeOnSelect = true, defaultOpen = false, open, }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);

package/cjs/dropdown/Menu/GroupedList/index.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DescriptionList = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const Heading_1 = __importDefault(require("./Heading"));
 const Item_1 = __importDefault(require("./Item"));
 exports.DescriptionList = (0, react_1.forwardRef)((_a, ref) => {

package/cjs/dropdown/Menu/List/index.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const Item_1 = __importDefault(require("./Item"));
 exports.List = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children } = _a, rest = __rest(_a, ["className", "children"]);

package/cjs/dropdown/Menu/index.js

@@ -38,9 +38,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
-const popover_1 = require("../../popover");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const popover_1 = require("../../popover");
 const Dropdown_1 = require("../Dropdown");
 const Divider_1 = __importDefault(require("./Divider"));
 const GroupedList_1 = __importDefault(require("./GroupedList"));

package/cjs/expansion-card/ExpansionCard.js

@@ -49,6 +49,24 @@ exports.ExpansionCardContext = (0, react_1.createContext)({
     toggleOpen: () => { },
     size: "medium",
 });
+/**
+ * A component that displays an expandable card.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/expansioncard)
+ * @see 🏷️ {@link ExpansionCardProps}
+ *
+ * @example
+ * ```jsx
+ * <ExpansionCard aria-label="default-demo">
+ *   <ExpansionCard.Header>
+ *     <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+ *   </ExpansionCard.Header>
+ *   <ExpansionCard.Content>
+ *     <Innhold />
+ *   </ExpansionCard.Content>
+ * </ExpansionCard>
+ * ```
+ */
 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"]);
     const [_open, _setOpen] = (0, react_1.useState)(defaultOpen);

package/cjs/form/ConfirmationPanel.js

@@ -42,6 +42,24 @@ const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 const useFormField_1 = require("./useFormField");
+/**
+ * A component that displays a confirmation checkbox with a label.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/confirmationpanel)
+ * @see 🏷️ {@link ConfirmationPanelProps}
+ *
+ * @example
+ * ```jsx
+      <ConfirmationPanel
+        checked={state}
+        label="Ja, jeg samtykker."
+        onChange={() => setState((x) => !x)}
+      >
+        For å komme videre må du gi oss lov til å hente inn og bruke opplysninger
+        om deg.
+      </ConfirmationPanel>
+ * ```
+ */
 exports.ConfirmationPanel = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, label } = _a, props = __rest(_a, ["className", "children", "label"]);
     const { errorId, showErrorMsg, hasError, size, inputProps } = (0, useFormField_1.useFormField)(props, "confirmation-panel");