@navikt/ds-react 3.4.2 → 4.1.0

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/index.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSAFE_useMonthpicker = exports.UNSAFE_useRangeDatepicker = exports.UNSAFE_useDatepicker = void 0;
+exports.useMonthpicker = exports.useRangeDatepicker = exports.useDatepicker = void 0;
 var useDatepicker_1 = require("./useDatepicker");
-Object.defineProperty(exports, "UNSAFE_useDatepicker", { enumerable: true, get: function () { return useDatepicker_1.useDatepicker; } });
+Object.defineProperty(exports, "useDatepicker", { enumerable: true, get: function () { return useDatepicker_1.useDatepicker; } });
 var useRangeDatepicker_1 = require("./useRangeDatepicker");
-Object.defineProperty(exports, "UNSAFE_useRangeDatepicker", { enumerable: true, get: function () { return useRangeDatepicker_1.useRangeDatepicker; } });
+Object.defineProperty(exports, "useRangeDatepicker", { enumerable: true, get: function () { return useRangeDatepicker_1.useRangeDatepicker; } });
 var useMonthPicker_1 = require("./useMonthPicker");
-Object.defineProperty(exports, "UNSAFE_useMonthpicker", { enumerable: true, get: function () { return useMonthPicker_1.useMonthpicker; } });
+Object.defineProperty(exports, "useMonthpicker", { enumerable: true, get: function () { return useMonthPicker_1.useMonthpicker; } });

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/index.js

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSAFE_MonthPicker = exports.UNSAFE_useRangeDatepicker = exports.UNSAFE_useMonthpicker = exports.UNSAFE_useDatepicker = exports.UNSAFE_DatePicker = void 0;
+exports.MonthPicker = exports.useRangeDatepicker = exports.useMonthpicker = exports.useDatepicker = exports.DatePicker = void 0;
 var DatePicker_1 = require("./datepicker/DatePicker");
-Object.defineProperty(exports, "UNSAFE_DatePicker", { enumerable: true, get: function () { return __importDefault(DatePicker_1).default; } });
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return __importDefault(DatePicker_1).default; } });
 var hooks_1 = require("./hooks");
-Object.defineProperty(exports, "UNSAFE_useDatepicker", { enumerable: true, get: function () { return hooks_1.UNSAFE_useDatepicker; } });
-Object.defineProperty(exports, "UNSAFE_useMonthpicker", { enumerable: true, get: function () { return hooks_1.UNSAFE_useMonthpicker; } });
-Object.defineProperty(exports, "UNSAFE_useRangeDatepicker", { enumerable: true, get: function () { return hooks_1.UNSAFE_useRangeDatepicker; } });
+Object.defineProperty(exports, "useDatepicker", { enumerable: true, get: function () { return hooks_1.useDatepicker; } });
+Object.defineProperty(exports, "useMonthpicker", { enumerable: true, get: function () { return hooks_1.useMonthpicker; } });
+Object.defineProperty(exports, "useRangeDatepicker", { enumerable: true, get: function () { return hooks_1.useRangeDatepicker; } });
 var MonthPicker_1 = require("./monthpicker/MonthPicker");
-Object.defineProperty(exports, "UNSAFE_MonthPicker", { enumerable: true, get: function () { return __importDefault(MonthPicker_1).default; } });
+Object.defineProperty(exports, "MonthPicker", { enumerable: true, get: function () { return __importDefault(MonthPicker_1).default; } });

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

@@ -0,0 +1,88 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = exports.DropdownContext = void 0;
+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);
+    const handleToggle = (v) => {
+        if (open === undefined) {
+            setIsOpen(v);
+        }
+    };
+    return (react_1.default.createElement(exports.DropdownContext.Provider, { value: {
+            isOpen: open !== null && open !== void 0 ? open : isOpen,
+            handleToggle,
+            anchorEl,
+            setAnchorEl,
+            onSelect: (event) => {
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
+                if (closeOnSelect) {
+                    open === undefined && setIsOpen(false);
+                }
+            },
+        } }, children));
+});
+exports.Dropdown.Toggle = Toggle_1.default;
+exports.Dropdown.Menu = Menu_1.default;
+exports.default = exports.Dropdown;

package/cjs/dropdown/Menu/Divider.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.Divider = void 0;
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+exports.Divider = (0, react_1.forwardRef)((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (react_1.default.createElement("hr", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-dropdown__divider", className) })));
+});
+exports.default = exports.Divider;

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

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.GroupedHeading = void 0;
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+exports.GroupedHeading = (0, react_1.forwardRef)((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (react_1.default.createElement("dt", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-dropdown__list-heading", "navds-heading", "navds-heading--xsmall", className) })));
+});
+exports.default = exports.GroupedHeading;

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

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.GroupedItem = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const Dropdown_1 = require("../../Dropdown");
+exports.GroupedItem = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "button", className } = _a, rest = __rest(_a, ["as", "className"]);
+    const context = (0, react_1.useContext)(Dropdown_1.DropdownContext);
+    return (react_1.default.createElement("dd", { className: "navds-dropdown__list-item" },
+        react_1.default.createElement(Component, Object.assign({}, rest, { value: rest.children, onClick: (event) => {
+                var _a, _b;
+                (_a = context === null || context === void 0 ? void 0 : context.onSelect) === null || _a === void 0 ? void 0 : _a.call(context, event);
+                (_b = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _b === void 0 ? void 0 : _b.call(rest, event);
+            }, ref: ref, className: (0, clsx_1.default)("navds-dropdown__item", "navds-body-short", "navds-body-short--small", className) }))));
+});
+exports.default = exports.GroupedItem;

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

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.DescriptionList = void 0;
+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) => {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    return (react_1.default.createElement("dl", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-dropdown__list", className) }), children));
+});
+exports.DescriptionList.Heading = Heading_1.default;
+exports.DescriptionList.Item = Item_1.default;
+exports.default = exports.DescriptionList;

package/cjs/dropdown/Menu/GroupedList/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../../../esm/dropdown/Menu/GroupedList/index.js",
+  "types": "../../../../esm/dropdown/Menu/GroupedList/index.d.ts"
+}