@navikt/ds-react 4.0.0 → 4.1.0

package/cjs/form/Select.js

@@ -43,6 +43,22 @@ const react_1 = __importStar(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
 const __1 = require("..");
 const useFormField_1 = require("./useFormField");
+/**
+ * A component that displays a select input field.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/select)
+ * @see 🏷️ {@link SelectProps}
+ *
+ * @example
+ * ```jsx
+ * <Select label="Hvilket land har du bosted i.">
+ *   <option value="">Velg land</option>
+ *   <option value="norge">Norge</option>
+ *   <option value="sverige">Sverige</option>
+ *   <option value="danmark">Danmark</option>
+ * </Select>
+ * ```
+ */
 exports.Select = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textField");
     const { children, label, className, description, htmlSize, hideLabel = false, style } = props, rest = __rest(props, ["children", "label", "className", "description", "htmlSize", "hideLabel", "style"]);

package/cjs/form/Switch.js

@@ -44,6 +44,17 @@ const __1 = require("..");
 const useFormField_1 = require("./useFormField");
 const SelectedIcon = () => (react_1.default.createElement("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Deaktiver valg" },
     react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z", fill: "currentColor" })));
+/**
+ * A component that displays a switch input field.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/switch)
+ * @see 🏷️ {@link SwitchProps}
+ *
+ * @example
+ * ```jsx
+ * <Switch>Slå på notifikasjoner</Switch>
+ * ```
+ */
 exports.Switch = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const { inputProps, size } = (0, useFormField_1.useFormField)(props, "switch");

package/cjs/form/TextField.js

@@ -42,6 +42,17 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
 const useFormField_1 = require("./useFormField");
+/**
+ * A component that displays a text input field with a label.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/textfield)
+ * @see 🏷️ {@link TextFieldProps}
+ *
+ * @example
+ * ```jsx
+ * <TextField label="Har du noen tilbakemeldinger?" />
+ * ```
+ */
 exports.TextField = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textField");
     const { label, className, description, htmlSize, hideLabel = false, type = "text" } = props, rest = __rest(props, ["label", "className", "description", "htmlSize", "hideLabel", "type"]);

package/cjs/form/Textarea.js

@@ -43,6 +43,17 @@ const react_1 = __importStar(require("react"));
 const __1 = require("..");
 const TextareaAutoSize_1 = __importDefault(require("../util/TextareaAutoSize"));
 const useFormField_1 = require("./useFormField");
+/**
+ * A component that displays a textarea input field with a label.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/textarea)
+ * @see 🏷️ {@link TextareaProps}
+ *
+ * @example
+ * ```jsx
+ * <Textarea label="Har du noen tilbakemeldinger?" />
+ * ```
+ */
 exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textarea");

package/cjs/form/checkbox/CheckboxGroup.js

@@ -42,6 +42,21 @@ const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 exports.CheckboxGroupContext = (0, react_1.createContext)(null);
+/**
+ * A component that allows users to select one or more options from a list.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/checkbox)
+ * @see 🏷️ {@link CheckboxProps}
+ *
+ * @example
+ * ```jsx
+ * <CheckboxGroup legend="Hvor vil du sitte?">
+ *   <Checkbox value="Bakerst">Bakerst</Checkbox>
+ *   <Checkbox value="Midterst">Midterst</Checkbox>
+ *   <Checkbox value="Fremst">Fremst</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ */
 exports.CheckboxGroup = (0, react_1.forwardRef)((_a, ref) => {
     var _b, _c;
     var { value, defaultValue, onChange = () => { }, children, className } = _a, rest = __rest(_a, ["value", "defaultValue", "onChange", "children", "className"]);

package/cjs/form/error-summary/ErrorSummary.js

@@ -43,6 +43,24 @@ const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("../..");
 const ErrorSummaryItem_1 = __importDefault(require("./ErrorSummaryItem"));
 const util_1 = require("../../util");
+/**
+ * A component that displays a summary of errors.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/errorsummary)
+ * @see 🏷️ {@link ErrorSummaryProps}
+ *
+ * @example
+ * ```jsx
+ * <ErrorSummary heading="Du må fikse disse feilene før du kan sende inn søknad.">
+ *   <ErrorSummary.Item href="#1">
+ *     Felt må fylles ut med alder
+ *   </ErrorSummary.Item>
+ *   <ErrorSummary.Item href="#2">
+ *     Tekstfeltet må ha en godkjent e-mail
+ *   </ErrorSummary.Item>
+ * </ErrorSummary>
+ * ```
+ */
 exports.ErrorSummary = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, size = "medium", headingTag = "h2", heading } = _a, rest = __rest(_a, ["children", "className", "size", "headingTag", "heading"]);
     const headingId = (0, util_1.useId)();

package/cjs/form/radio/RadioGroup.js

@@ -45,8 +45,8 @@ const __2 = require("../..");
 exports.RadioGroupContext = react_1.default.createContext(null);
 /**
  * Form radio group
- * @see https://aksel.nav.no/komponenter/core/radio
- * @see {@link RadioGroupProps}
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/radio)
+ * @see 🏷️ {@link RadioGroupProps}
  * @example
  * <RadioGroup legend="Får du AAP nå?">
  *    <Radio value="ja">Ja</Radio>

package/cjs/form/search/Search.js

@@ -45,6 +45,19 @@ const __1 = require("../..");
 const useFormField_1 = require("../useFormField");
 const SearchButton_1 = __importDefault(require("./SearchButton"));
 exports.SearchContext = react_1.default.createContext(null);
+/**
+ * A component that displays a search input field.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/search)
+ * @see 🏷️ {@link SearchProps}
+ *
+ * @example
+ * ```jsx
+ * <form>
+ *   <Search label="Søk alle NAV sine sider" variant="primary" />
+ * </form>
+ * ```
+ */
 exports.Search = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, } = (0, useFormField_1.useFormField)(props, "searchfield");
     const { className, hideLabel = true, label, description, value, clearButtonLabel, onClear, clearButton = true, children, variant = "primary", defaultValue, onChange, onSearchClick, htmlSize } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "clearButton", "children", "variant", "defaultValue", "onChange", "onSearchClick", "htmlSize"]);

package/cjs/guide-panel/GuidePanel.js

@@ -41,6 +41,21 @@ exports.GuidePanel = void 0;
 const react_1 = __importStar(require("react"));
 const Guide_1 = __importDefault(require("./Guide"));
 const clsx_1 = __importDefault(require("clsx"));
+/**
+ * A component that displays a guide panel.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/guidepanel)
+ * @see 🏷️ {@link GuidePanelProps}
+ *
+ * @example
+ * ```jsx
+ * <GuidePanel>
+ *   Saksbehandlingstiden varierer fra kommune til kommune. Hvis det går mer
+ *   enn X måneder siden du søkte, skal du få brev om at saksbehandlingstiden
+ *   er forlenget.
+ * </GuidePanel>
+ * ```
+ */
 exports.GuidePanel = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, illustration, poster = false, color } = _a, rest = __rest(_a, ["children", "className", "illustration", "poster", "color"]);
     return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-guide-panel", className, {

package/cjs/help-text/HelpText.js

@@ -42,6 +42,19 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
 const HelpTextIcon_1 = require("./HelpTextIcon");
+/**
+ * A component that displays a help text button with a popover.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/helptext)
+ * @see 🏷️ {@link HelpTextProps}
+ *
+ * @example
+ * ```jsx
+ * <HelpText title="Hvor kommer dette fra?">
+ *   Informasjonen er hentet fra X sin statistikk fra 2021
+ * </HelpText>
+ * ```
+ */
 exports.HelpText = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick"]);
     const buttonRef = (0, react_1.useRef)(null);

package/cjs/index.js

@@ -38,6 +38,7 @@ __exportStar(require("./panel"), exports);
 __exportStar(require("./popover"), exports);
 __exportStar(require("./provider"), exports);
 __exportStar(require("./read-more"), exports);
+__exportStar(require("./skeleton"), exports);
 __exportStar(require("./stepper"), exports);
 __exportStar(require("./table"), exports);
 __exportStar(require("./tabs"), exports);

package/cjs/internal-header/InternalHeader.js

@@ -38,12 +38,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InternalHeader = void 0;
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const InternalHeaderButton_1 = __importDefault(require("./InternalHeaderButton"));
 const InternalHeaderTitle_1 = __importDefault(require("./InternalHeaderTitle"));
 const InternalHeaderUser_1 = __importDefault(require("./InternalHeaderUser"));
-const InternalHeaderButton_1 = __importDefault(require("./InternalHeaderButton"));
 const InternalHeaderUserButton_1 = __importDefault(require("./InternalHeaderUserButton"));
-const clsx_1 = __importDefault(require("clsx"));
+/**
+ * Simple Header for internal pages and systems.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/i-header)
+ * @see 🏷️ {@link InternalHeaderProps}
+ *
+ * @example
+ * ```jsx
+ * <InternalHeader>
+ *   <InternalHeader.Title as="h1">Sykepenger</InternalHeader.Title>
+ *   <InternalHeader.User name="Ola Normann" className="ml-auto" />
+ * </InternalHeader>
+ * ```
+ * @example
+ * ```jsx
+ * <InternalHeader >
+ *  <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
+ *  <Dropdown>
+ *    <InternalHeader.Button
+ *      as={Dropdown.Toggle}
+ *    >
+ *      <MenuGridIcon title="MenuGridIconer og oppslagsverk" />
+ *    </InternalHeader.Button>
+ *    <Dropdown.Menu />
+ *  </Dropdown>
+ * </InternalHeader>
+ * ```
+ */
 exports.InternalHeader = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
     return (react_1.default.createElement("header", Object.assign({ "data-theme": "dark" }, rest, { ref: ref, className: (0, clsx_1.default)("navds-internalheader", className) })));

package/cjs/link/Link.js

@@ -40,6 +40,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+/**
+ * A component that displays a hyperlink.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/link)
+ * @see 🏷️ {@link LinkProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <Link href="#">lenke til ny side</Link>
+ * <Link as={ReactRouter.Link} to="#">lenke til ny side</Link>
+ * ```
+ */
 exports.Link = (0, react_1.forwardRef)((_a, ref) => {
     var { as: Component = "a", className } = _a, rest = __rest(_a, ["as", "className"]);
     return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-link", className) })));

package/cjs/link-panel/LinkPanel.js

@@ -44,6 +44,23 @@ const clsx_1 = __importDefault(require("clsx"));
 const LinkPanelTitle_1 = require("./LinkPanelTitle");
 const LinkPanelDescription_1 = require("./LinkPanelDescription");
 const aksel_icons_1 = require("@navikt/aksel-icons");
+/**
+ * A component that displays a link panel.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/linkpanel)
+ * @see 🏷️ {@link LinkPanelProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <LinkPanel href="#" border>
+ *   <LinkPanel.Title>Arbeidssøker eller permittert</LinkPanel.Title>
+ *   <LinkPanel.Description>
+ *     Om jobb, registrering, CV, dagpenger og feriepenger av dagpenger
+ *   </LinkPanel.Description>
+ * </LinkPanel>
+ * ```
+ */
 exports.LinkPanelComponent = (0, react_1.forwardRef)((_a, ref) => {
     var { children, as = "a", border = true, className } = _a, rest = __rest(_a, ["children", "as", "border", "className"]);
     return (react_1.default.createElement(__1.Panel, Object.assign({}, rest, { as: as, border: border, ref: ref, className: (0, clsx_1.default)("navds-link-panel", className) }),

package/cjs/loader/Loader.js

@@ -41,6 +41,17 @@ exports.Loader = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
+/**
+ * A component that displays a loading spinner.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/loader)
+ * @see 🏷️ {@link LoaderProps}
+ *
+ * @example
+ * ```jsx
+ * <Loader size="3xlarge" title="venter..." />
+ * ```
+ */
 exports.Loader = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, size = "medium", title = "venter...", transparent = false, variant = "neutral", id } = _a, rest = __rest(_a, ["children", "className", "size", "title", "transparent", "variant", "id"]);
     const internalId = (0, __1.useId)();

package/cjs/modal/Modal.js

@@ -44,6 +44,33 @@ const react_modal_1 = __importDefault(require("react-modal"));
 const __1 = require("..");
 const ModalContent_1 = __importDefault(require("./ModalContent"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
+/**
+ * A component that displays a modal dialog.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/modal)
+ * @see 🏷️ {@link ModalProps}
+ *
+ * @example
+ * ```jsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Modal
+ *   open={open}
+ *   aria-label="Modal demo"
+ *   onClose={() => setOpen((x) => !x)}
+ *   aria-labelledby="modal-heading"
+ * >
+ *   <Modal.Content>
+ *     <Heading spacing level="1" size="large" id="modal-heading">
+ *       Viktig info
+ *     </Heading>
+ *     <BodyLong spacing>
+ *       Hallo!
+ *     </BodyLong>
+ *   </Modal.Content>
+ * </Modal>
+ * ```
+ */
 exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
     var _b, _c;
     var { children, open, onClose, className, overlayClassName, shouldCloseOnOverlayClick = true, shouldCloseOnEsc = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal, "aria-label": contentLabel, style, parentSelector } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "overlayClassName", "shouldCloseOnOverlayClick", "shouldCloseOnEsc", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal", "aria-label", "style", "parentSelector"]);

package/cjs/pagination/Pagination.js

@@ -65,6 +65,23 @@ const getSteps = ({ page, count, boundaryCount = 1, siblingCount = 1, }) => {
     ];
 };
 exports.getSteps = getSteps;
+/**
+ * A component that displays pagination controls.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/pagination)
+ * @see 🏷️ {@link PaginationProps}
+ *
+ * @example
+ * ```jsx
+ * <Pagination
+ *   page={pageState}
+ *   onPageChange={(x) => setPageState(x)}
+ *   count={9}
+ *   boundaryCount={1}
+ *   siblingCount={1}
+ * />
+ * ```
+ */
 exports.Pagination = (0, react_1.forwardRef)((_a, ref) => {
     var { page, onPageChange, count, boundaryCount = 1, siblingCount = 1, className, size = "medium", prevNextTexts = false, renderItem: Item = (item) => (react_1.default.createElement(PaginationItem_1.default, Object.assign({}, item))) } = _a, rest = __rest(_a, ["page", "onPageChange", "count", "boundaryCount", "siblingCount", "className", "size", "prevNextTexts", "renderItem"]);
     if (page < 1) {

package/cjs/panel/Panel.js

@@ -40,6 +40,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Panel = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+/**
+ * A component that displays a bordered panel with heading and body.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/panel)
+ * @see 🏷️ {@link PanelProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <Panel border>
+ *   <Heading spacing level="2" size="large">
+ *     Søk om økonomisk sosialhjelp
+ *   </Heading>
+ *   <BodyLong>
+ *     Du kan søke om det du trenger økonomisk støtte til.
+ *   </BodyLong>
+ * </Panel>
+ * ```
+ */
 exports.Panel = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, border = false, as: Component = "div" } = _a, rest = __rest(_a, ["children", "className", "border", "as"]);
     return (react_1.default.createElement(Component, Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-panel", className, {

package/cjs/popover/Popover.js

@@ -44,6 +44,26 @@ const react_2 = __importStar(require("react"));
 const __1 = require("..");
 const util_1 = require("../util");
 const PopoverContent_1 = __importDefault(require("./PopoverContent"));
+/**
+ * A component that displays a popover.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/popover)
+ * @see 🏷️ {@link PopoverProps}
+ *
+ * @example
+ * ```jsx
+ * <Button ref={buttonRef} onClick={() => setOpenState(true)}>
+ *   Åpne popover
+ * </Button>
+ * <Popover
+ *   open={openState}
+ *   onClose={() => setOpenState(false)}
+ *   anchorEl={buttonRef.current}
+ * >
+ *   <Popover.Content>Innhold her!</Popover.Content>
+ * </Popover>
+ * ```
+ */
 exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
     var { className, children, anchorEl, arrow = true, open, onClose, placement = "top", offset, strategy: userStrategy = "absolute" } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset", "strategy"]);
     const arrowRef = (0, react_2.useRef)(null);

package/cjs/provider/Provider.js

@@ -39,6 +39,19 @@ const react_1 = __importStar(require("react"));
 exports.ProviderContext = (0, react_1.createContext)(undefined);
 const useProvider = () => (0, react_1.useContext)(exports.ProviderContext);
 exports.useProvider = useProvider;
+/**
+ * Provides added context to the component tree.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/provider)
+ * @see 🏷️ {@link ProviderProps}
+ *
+ * @example
+ * ```jsx
+ * <Provider rootElement={rootElement}>
+ *   {app}
+ * </Provider>
+ * ```
+ */
 const Provider = (_a) => {
     var { children } = _a, rest = __rest(_a, ["children"]);
     return (react_1.default.createElement(exports.ProviderContext.Provider, { value: rest }, children));

package/cjs/read-more/ReadMore.js

@@ -44,8 +44,8 @@ const typography_1 = require("../typography");
 const aksel_icons_1 = require("@navikt/aksel-icons");
 /**
  * ReadMore
- * @see https://aksel.nav.no/komponenter/core/read-more
- * @see {@link ReadMoreProps}
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/read-more)
+ * @see 🏷️ {@link ReadMoreProps}
  *
  * @example
  * // Default

package/cjs/skeleton/Skeleton.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.Skeleton = void 0;
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+exports.Skeleton = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, children, height, width, style, variant = "text" } = _a, rest = __rest(_a, ["className", "children", "height", "width", "style", "variant"]);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-skeleton", className, `navds-skeleton--${variant}`, {
+            "navds-skeleton--has-children": Boolean(children),
+            "navds-skeleton--no-height": !height,
+            "navds-skeleton--no-width": !width,
+        }), style: Object.assign(Object.assign({}, style), { width, height }), "aria-hidden": true }), children));
+});
+exports.default = exports.Skeleton;

package/cjs/skeleton/index.js

@@ -0,0 +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.Skeleton = void 0;
+var Skeleton_1 = require("./Skeleton");
+Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return __importDefault(Skeleton_1).default; } });

package/cjs/skeleton/package.json

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

package/cjs/stepper/Step.js

@@ -37,14 +37,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StepComponent = void 0;
+exports.Step = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
 const Stepper_1 = require("./Stepper");
 const CompletedIcon = () => (react_1.default.createElement("svg", { width: "14", height: "10", viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Fullf\u00F8rt" },
     react_1.default.createElement("path", { d: "M4.93563 6.41478L11.3755 0.404669C11.9796 -0.160351 12.9294 -0.130672 13.4959 0.47478C14.0624 1.08027 14.0299 2.03007 13.4249 2.59621L5.92151 9.59934C5.64138 9.85904 5.27598 10 4.90064 10C4.5069 10 4.12756 9.84621 3.83953 9.56111L1.33953 7.06111C0.75401 6.47558 0.75401 5.52542 1.33953 4.93989C1.92506 4.35437 2.87522 4.35437 3.46075 4.93989L4.93563 6.41478Z", fill: "currentColor" })));
-exports.StepComponent = (0, react_1.forwardRef)((_a, ref) => {
+exports.Step = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, as: Component = "a", unsafe_index = 0, completed = false, interactive } = _a, rest = __rest(_a, ["className", "children", "as", "unsafe_index", "completed", "interactive"]);
     const context = (0, react_1.useContext)(Stepper_1.StepperContext);
     if (context === null) {
@@ -68,5 +68,4 @@ exports.StepComponent = (0, react_1.forwardRef)((_a, ref) => {
             react_1.default.createElement(CompletedIcon, null))) : (react_1.default.createElement(__1.Label, { className: "navds-stepper__circle", as: "span", "aria-hidden": "true" }, unsafe_index + 1)),
         react_1.default.createElement(__1.Label, { as: "span", className: "navds-stepper__content" }, children)));
 });
-const Step = exports.StepComponent;
-exports.default = Step;
+exports.default = exports.Step;

package/cjs/stepper/Stepper.js

@@ -42,6 +42,30 @@ const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const Step_1 = __importDefault(require("./Step"));
 exports.StepperContext = (0, react_1.createContext)(null);
+/**
+ * A component that displays a stepper with clickable steps.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/stepper)
+ * @see 🏷️ {@link StepperProps}
+ *
+ * @example
+ * ```jsx
+ * <>
+ *   <Heading size="medium" spacing level="2" id="stepper-heading">
+ *     Søknadssteg
+ *   </Heading>
+ *   <Stepper
+ *     aria-labelledby="stepper-heading"
+ *     activeStep={activeStep}
+ *     onStepChange={(x) => setActiveStep(x)}
+ *   >
+ *     <Stepper.Step href="#">Start søknad</Stepper.Step>
+ *     <Stepper.Step href="#">Saksopplysninger</Stepper.Step>
+ *     <Stepper.Step href="#">Vedlegg</Stepper.Step>
+ *   </Stepper>
+ * </>
+ * ```
+ */
 exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, activeStep, orientation = "vertical", onStepChange = () => { }, interactive = true } = _a, rest = __rest(_a, ["children", "className", "activeStep", "orientation", "onStepChange", "interactive"]);
     activeStep = activeStep - 1;

package/cjs/table/Table.js

@@ -48,6 +48,38 @@ const HeaderCell_1 = __importDefault(require("./HeaderCell"));
 const DataCell_1 = __importDefault(require("./DataCell"));
 const ExpandableRow_1 = __importDefault(require("./ExpandableRow"));
 exports.TableContext = (0, react_1.createContext)(null);
+/**
+ * A component that displays a table with headers and rows.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/table)
+ * @see 🏷️ {@link TableProps}
+ *
+ * @example
+ * ```jsx
+ * <Table>
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.HeaderCell scope="col">Navn</Table.HeaderCell>
+ *       <Table.HeaderCell scope="col">Fødseslnr.</Table.HeaderCell>
+ *       <Table.HeaderCell scope="col">Start</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     {data.map(({ name, fnr, start }, i) => {
+ *       return (
+ *         <Table.Row key={i + fnr}>
+ *           <Table.HeaderCell scope="row">{name}</Table.HeaderCell>
+ *           <Table.DataCell>{fnr}</Table.DataCell>
+ *           <Table.DataCell>
+ *             {format(new Date(start), "dd.MM.yyyy")}
+ *           </Table.DataCell>
+ *         </Table.Row>
+ *       );
+ *     })}
+ *   </Table.Body>
+ * </Table>
+ * ```
+ */
 exports.Table = (0, react_1.forwardRef)((_a, ref) => {
     var { className, zebraStripes = false, size = "medium", onSortChange, sort } = _a, rest = __rest(_a, ["className", "zebraStripes", "size", "onSortChange", "sort"]);
     return (react_1.default.createElement(exports.TableContext.Provider, { value: { size, onSortChange, sort } },