@navikt/ds-react 5.3.5 → 5.4.0

package/_docs.json

@@ -16865,6 +16865,212 @@
       }
     }
   },
+  {
+    "filePath": "src/layout/responsive/Responsive.tsx",
+    "displayName": "Hide",
+    "props": {
+      "above": {
+        "defaultValue": null,
+        "description": "@example above='md'",
+        "name": "above",
+        "parent": {
+          "fileName": "src/layout/responsive/Responsive.tsx",
+          "name": "ResponsiveProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/responsive/Responsive.tsx",
+            "name": "ResponsiveProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"sm\" | \"md\" | \"lg\" | \"xl\""
+        }
+      },
+      "below": {
+        "defaultValue": null,
+        "description": "@example below='md'",
+        "name": "below",
+        "parent": {
+          "fileName": "src/layout/responsive/Responsive.tsx",
+          "name": "ResponsiveProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/responsive/Responsive.tsx",
+            "name": "ResponsiveProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"sm\" | \"md\" | \"lg\" | \"xl\""
+        }
+      },
+      "as": {
+        "defaultValue": {
+          "value": "\"div\""
+        },
+        "description": "Overrides html-tag",
+        "name": "as",
+        "parent": {
+          "fileName": "src/layout/responsive/Responsive.tsx",
+          "name": "ResponsiveProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/responsive/Responsive.tsx",
+            "name": "ResponsiveProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"div\" | \"span\""
+        }
+      },
+      "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/layout/responsive/Responsive.tsx",
+    "displayName": "Show",
+    "props": {
+      "above": {
+        "defaultValue": null,
+        "description": "@example above='md'",
+        "name": "above",
+        "parent": {
+          "fileName": "src/layout/responsive/Responsive.tsx",
+          "name": "ResponsiveProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/responsive/Responsive.tsx",
+            "name": "ResponsiveProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"sm\" | \"md\" | \"lg\" | \"xl\""
+        }
+      },
+      "below": {
+        "defaultValue": null,
+        "description": "@example below='md'",
+        "name": "below",
+        "parent": {
+          "fileName": "src/layout/responsive/Responsive.tsx",
+          "name": "ResponsiveProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/responsive/Responsive.tsx",
+            "name": "ResponsiveProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"sm\" | \"md\" | \"lg\" | \"xl\""
+        }
+      },
+      "as": {
+        "defaultValue": {
+          "value": "\"div\""
+        },
+        "description": "Overrides html-tag",
+        "name": "as",
+        "parent": {
+          "fileName": "src/layout/responsive/Responsive.tsx",
+          "name": "ResponsiveProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/responsive/Responsive.tsx",
+            "name": "ResponsiveProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"div\" | \"span\""
+        }
+      },
+      "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/layout/stack/HStack.tsx",
     "displayName": "HStack",

package/cjs/form/search/Search.js

@@ -63,7 +63,6 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
     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"]);
     const searchRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([searchRef, ref]), [ref]);
-    const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
     const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
     const handleChange = (0, react_1.useCallback)((v) => {
         value === undefined && setInternalValue(v);
@@ -75,16 +74,19 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
         handleChange("");
         searchRef.current && ((_b = (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a));
     }, [handleChange, onClear]);
-    (0, __1.useEventListener)("keydown", (0, react_1.useCallback)((e) => {
-        if (e.key === "Escape") {
-            e.preventDefault();
-            handleClear({ trigger: "Escape", event: e });
-        }
-    }, [handleClear]), wrapperRef);
     const handleClick = () => {
         onSearchClick === null || onSearchClick === void 0 ? void 0 : onSearchClick(`${value !== null && value !== void 0 ? value : internalValue}`);
     };
-    return (react_1.default.createElement("div", { ref: setWrapperRef, className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
+    return (react_1.default.createElement("div", { onKeyDown: (e) => {
+            var _a, _b;
+            if (e.key !== "Escape") {
+                return;
+            }
+            ((_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.value) &&
+                ((_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.value) !== "" &&
+                e.preventDefault();
+            handleClear({ trigger: "Escape", event: e });
+        }, className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
             "navds-search--with-size": !!htmlSize,

package/cjs/index.js

@@ -51,3 +51,4 @@ __exportStar(require("./util"), exports);
 __exportStar(require("./layout/stack"), exports);
 __exportStar(require("./layout/grid"), exports);
 __exportStar(require("./layout/content-container"), exports);
+__exportStar(require("./layout/responsive"), exports);

package/cjs/layout/grid/HGrid.js

@@ -44,7 +44,7 @@ const css_1 = require("../utilities/css");
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hgrid)
  * @see 🏷️ {@link HGridProps}
  *
  * @example

package/cjs/layout/responsive/Responsive.js

@@ -0,0 +1,95 @@
+"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.Show = exports.Hide = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const Responsive = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "div", className, above, below, variant } = _a, rest = __rest(_a, ["as", "className", "above", "below", "variant"]);
+    const aboveProp = variant === "show" ? above : below;
+    const belowProp = variant === "show" ? below : above;
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-responsive", className, {
+            [`navds-responsive__above--${aboveProp}`]: aboveProp,
+            [`navds-responsive__below--${belowProp}`]: belowProp,
+        }) })));
+});
+/**
+ * Responsive view Primitive to show/hide elements based on breakpoints
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hide)
+ * @see 🏷️ {@link ResponsiveProps}
+ *
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Hide below="md">
+ *      // Only visible above "md"
+ *   </Hide>
+ * </HGrid>
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Hide above="md">
+ *      // Only visible below "md"
+ *   </Hide>
+ * </HGrid>
+ */
+exports.Hide = (0, react_1.forwardRef)((props, ref) => react_1.default.createElement(Responsive, Object.assign({}, props, { ref: ref, variant: "hide" })));
+/**
+ * Responsive view Primitive to show/hide elements based on breakpoints
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/show)
+ * @see 🏷️ {@link ResponsiveProps}
+ *
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Show below="md">
+ *      // Only visible below "md"
+ *   </Show>
+ * </HGrid>
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Show above="md">
+ *      // Only visible above "md"
+ *   </Show>
+ * </HGrid>
+ */
+exports.Show = (0, react_1.forwardRef)((props, ref) => react_1.default.createElement(Responsive, Object.assign({}, props, { ref: ref, variant: "show" })));

package/cjs/layout/responsive/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hide = exports.Show = void 0;
+var Responsive_1 = require("./Responsive");
+Object.defineProperty(exports, "Show", { enumerable: true, get: function () { return Responsive_1.Show; } });
+Object.defineProperty(exports, "Hide", { enumerable: true, get: function () { return Responsive_1.Hide; } });

package/cjs/layout/responsive/package.json

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

package/cjs/layout/stack/HStack.js

@@ -29,7 +29,7 @@ const Stack_1 = require("./Stack");
 /**
  * Layout-primitive for horizontal flexbox
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
  * @see 🏷️ {@link HStackProps}
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *

package/cjs/layout/stack/Spacer.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 /**
  * Layout-primitive for auto-spacing between elements
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
  *
  * @example
  * <HStack gap="8">

package/cjs/layout/stack/VStack.js

@@ -29,7 +29,7 @@ const Stack_1 = require("./Stack");
 /**
  * Layout-primitive for vetical flexbox
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/vstack)
  * @see 🏷️ {@link VStackProps}
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *

package/cjs/modal/Modal.js

@@ -129,7 +129,7 @@ exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
     }, [modalRef, portalNode, open]);
     (0, ModalUtils_1.useBodyScrollLock)(modalRef, portalNode);
     const isWidthPreset = typeof width === "string" && ["small", "medium"].includes(width);
-    const component = (react_1.default.createElement("dialog", Object.assign({ ref: mergedRef, className: (0, clsx_1.default)("navds-modal", className, {
+    const component = (react_1.default.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: (0, clsx_1.default)("navds-modal", className, {
             "navds-modal--polyfilled": dialog_polyfill_1.needPolyfill,
             "navds-modal--autowidth": !width,
             [`navds-modal--${width}`]: isWidthPreset,
@@ -142,7 +142,7 @@ exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
                 onCancel(event);
         }, "aria-labelledby": !ariaLabelledby && !rest["aria-label"] && header
             ? ariaLabelId
-            : ariaLabelledby }, rest),
+            : ariaLabelledby }),
         react_1.default.createElement(ModalContext_1.ModalContext.Provider, { value: {
                 closeHandler: (0, ModalUtils_1.getCloseHandler)(modalRef, header, onBeforeClose),
             } },

package/esm/form/search/Search.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { XMarkIcon, MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useCallback, useMemo, useRef, useState, } from "react";
-import { BodyShort, ErrorMessage, Label, mergeRefs, omit, useEventListener, } from "../..";
+import { BodyShort, ErrorMessage, Label, mergeRefs, omit } from "../..";
 import { useFormField } from "../useFormField";
 import SearchButton from "./SearchButton";
 export const SearchContext = React.createContext(null);
@@ -34,7 +34,6 @@ export const Search = forwardRef((props, ref) => {
     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"]);
     const searchRef = useRef(null);
     const mergedRef = useMemo(() => mergeRefs([searchRef, ref]), [ref]);
-    const [wrapperRef, setWrapperRef] = useState(null);
     const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
     const handleChange = useCallback((v) => {
         value === undefined && setInternalValue(v);
@@ -46,16 +45,19 @@ export const Search = forwardRef((props, ref) => {
         handleChange("");
         searchRef.current && ((_b = (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a));
     }, [handleChange, onClear]);
-    useEventListener("keydown", useCallback((e) => {
-        if (e.key === "Escape") {
-            e.preventDefault();
-            handleClear({ trigger: "Escape", event: e });
-        }
-    }, [handleClear]), wrapperRef);
     const handleClick = () => {
         onSearchClick === null || onSearchClick === void 0 ? void 0 : onSearchClick(`${value !== null && value !== void 0 ? value : internalValue}`);
     };
-    return (React.createElement("div", { ref: setWrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
+    return (React.createElement("div", { onKeyDown: (e) => {
+            var _a, _b;
+            if (e.key !== "Escape") {
+                return;
+            }
+            ((_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.value) &&
+                ((_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.value) !== "" &&
+                e.preventDefault();
+            handleClear({ trigger: "Escape", event: e });
+        }, className: cl(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
             "navds-search--with-size": !!htmlSize,

package/esm/form/search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../src/form/search/Search.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../src/form/search/Search.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EACZ,UAAU,EAEV,WAAW,EACX,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAkB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AAsEhE,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAC9C,IAAI,CACL,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,UAAU,EACV,IAAI,GAAG,QAAQ,EACf,kBAAkB,EAClB,OAAO,EACP,YAAY,EACZ,QAAQ,GACT,GAAG,YAAY,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAEvC,MAAM,EACJ,SAAS,EACT,SAAS,GAAG,IAAI,EAChB,KAAK,EACL,WAAW,EACX,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,WAAW,GAAG,IAAI,EAClB,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,QAAQ,KAEN,KAAK,EADJ,IAAI,UACL,KAAK,EAhBH,yLAgBL,CAAQ,CAAC;IAEV,MAAM,SAAS,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEpE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC;IAEvE,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAS,EAAE,EAAE;QACZ,KAAK,KAAK,SAAS,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAAC;QAC3C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;IAChB,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAuB,EAAE,EAAE;;QAC1B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;QACjB,YAAY,CAAC,EAAE,CAAC,CAAC;QACjB,SAAS,CAAC,OAAO,KAAI,MAAA,MAAA,SAAS,CAAC,OAAO,0CAAE,KAAK,kDAAI,CAAA,CAAC;IACpD,CAAC,EACD,CAAC,YAAY,EAAE,OAAO,CAAC,CACxB,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,aAAa,EAAE,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;;YACf,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACtB,OAAO;aACR;YACD,CAAA,MAAA,SAAS,CAAC,OAAO,0CAAE,KAAK;gBACtB,CAAA,MAAA,SAAS,CAAC,OAAO,0CAAE,KAAK,MAAK,EAAE;gBAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;YAErB,WAAW,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;QAC/C,CAAC,EACD,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,IAAI,EAAE,EAC3B,cAAc,EAEd;YACE,qBAAqB,EAAE,QAAQ;YAC/B,wBAAwB,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;YAC/C,yBAAyB,EAAE,CAAC,CAAC,QAAQ;SACtC,CACF;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;gBACvC,eAAe,EAAE,SAAS;aAC3B,CAAC,IAED,KAAK,CACA;QACP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE;gBAC7C,eAAe,EAAE,SAAS;aAC3B,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,KAAK,IAEP,WAAW,CACF,CACb;QACD,6BAAK,SAAS,EAAC,uBAAuB;YACpC,6BAAK,SAAS,EAAC,6BAA6B;gBACzC,OAAO,KAAK,QAAQ,IAAI,CACvB,oBAAC,mBAAmB,yBAElB,SAAS,EAAC,2BAA2B,GACrC,CACH;gBACD,6CACE,GAAG,EAAE,SAAS,IACV,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,EACpD,UAAU,IACd,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,aAAa,EAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,WAAW,EAChB,SAAS,EAAE,EAAE,CACX,SAAS,EACT,qBAAqB,EACrB,wBAAwB,OAAO,EAAE,EACjC,yBAAyB,EACzB,kBAAkB,EAClB,cAAc,IAAI,EAAE,CACrB,IACG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAChD;gBACD,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,aAAa,CAAC,IAAI,WAAW,IAAI,CAC1C,gCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAC3D,SAAS,EAAC,4BAA4B;oBAEtC,8BAAM,SAAS,EAAC,eAAe,IAC5B,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CACvC;oBACP,oBAAC,SAAS,0BAAe,CAClB,CACV,CACG;YACN,oBAAC,aAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;oBACL,IAAI;oBACJ,QAAQ,EAAE,UAAU,CAAC,QAAQ;oBAC7B,OAAO;oBACP,WAAW;iBACZ,IAEA,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,KAAK,QAAQ,IAAI,oBAAC,YAAY,OAAG,CACxC,CACrB;QACN,6BACE,SAAS,EAAC,yBAAyB,EACnC,EAAE,EAAE,OAAO,mBACG,oBAAoB,eACxB,QAAQ,IAEjB,YAAY,IAAI,CACf,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,IAAG,KAAK,CAAC,KAAK,CAAgB,CACvD,CACG,CACF,CACP,CAAC;AACJ,CAAC,CACiB,CAAC;AAErB,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC;AAE7B,eAAe,MAAM,CAAC"}

package/esm/index.d.ts

@@ -35,3 +35,4 @@ export * from "./util";
 export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";
+export * from "./layout/responsive";

package/esm/index.js

@@ -35,4 +35,5 @@ export * from "./util";
 export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";
+export * from "./layout/responsive";
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC"}

package/esm/layout/grid/HGrid.d.ts

@@ -27,7 +27,7 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hgrid)
  * @see 🏷️ {@link HGridProps}
  *
  * @example

package/esm/layout/grid/HGrid.js

@@ -15,7 +15,7 @@ import { getResponsiveProps, getResponsiveValue, } from "../utilities/css";
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hgrid)
  * @see 🏷️ {@link HGridProps}
  *
  * @example

package/esm/layout/responsive/Responsive.d.ts

@@ -0,0 +1,64 @@
+import React, { HTMLAttributes } from "react";
+import { BreakpointsAlias } from "../utilities/css";
+export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * @example
+     * above='md'
+     */
+    above?: Exclude<BreakpointsAlias, "xs">;
+    /**
+     * @example
+     * below='md'
+     */
+    below?: Exclude<BreakpointsAlias, "xs">;
+    /**
+     * Overrides html-tag
+     * @default "div"
+     */
+    as?: "div" | "span";
+}
+/**
+ * Responsive view Primitive to show/hide elements based on breakpoints
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hide)
+ * @see 🏷️ {@link ResponsiveProps}
+ *
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Hide below="md">
+ *      // Only visible above "md"
+ *   </Hide>
+ * </HGrid>
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Hide above="md">
+ *      // Only visible below "md"
+ *   </Hide>
+ * </HGrid>
+ */
+export declare const Hide: React.ForwardRefExoticComponent<ResponsiveProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Responsive view Primitive to show/hide elements based on breakpoints
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/show)
+ * @see 🏷️ {@link ResponsiveProps}
+ *
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Show below="md">
+ *      // Only visible below "md"
+ *   </Show>
+ * </HGrid>
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Show above="md">
+ *      // Only visible above "md"
+ *   </Show>
+ * </HGrid>
+ */
+export declare const Show: React.ForwardRefExoticComponent<ResponsiveProps & React.RefAttributes<HTMLDivElement>>;

package/esm/layout/responsive/Responsive.js

@@ -0,0 +1,67 @@
+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;
+};
+import cl from "clsx";
+import React, { forwardRef } from "react";
+const Responsive = forwardRef((_a, ref) => {
+    var { as: Component = "div", className, above, below, variant } = _a, rest = __rest(_a, ["as", "className", "above", "below", "variant"]);
+    const aboveProp = variant === "show" ? above : below;
+    const belowProp = variant === "show" ? below : above;
+    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-responsive", className, {
+            [`navds-responsive__above--${aboveProp}`]: aboveProp,
+            [`navds-responsive__below--${belowProp}`]: belowProp,
+        }) })));
+});
+/**
+ * Responsive view Primitive to show/hide elements based on breakpoints
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hide)
+ * @see 🏷️ {@link ResponsiveProps}
+ *
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Hide below="md">
+ *      // Only visible above "md"
+ *   </Hide>
+ * </HGrid>
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Hide above="md">
+ *      // Only visible below "md"
+ *   </Hide>
+ * </HGrid>
+ */
+export const Hide = forwardRef((props, ref) => React.createElement(Responsive, Object.assign({}, props, { ref: ref, variant: "hide" })));
+/**
+ * Responsive view Primitive to show/hide elements based on breakpoints
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/show)
+ * @see 🏷️ {@link ResponsiveProps}
+ *
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Show below="md">
+ *      // Only visible below "md"
+ *   </Show>
+ * </HGrid>
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Show above="md">
+ *      // Only visible above "md"
+ *   </Show>
+ * </HGrid>
+ */
+export const Show = forwardRef((props, ref) => React.createElement(Responsive, Object.assign({}, props, { ref: ref, variant: "show" })));
+//# sourceMappingURL=Responsive.js.map

package/esm/layout/responsive/Responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Responsive.js","sourceRoot":"","sources":["../../../src/layout/responsive/Responsive.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAsB1D,MAAM,UAAU,GAAG,UAAU,CAI3B,CACE,EAAoE,EACpE,GAAG,EACH,EAAE;QAFF,EAAE,EAAE,EAAE,SAAS,GAAG,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAAlE,gDAAoE,CAAF;IAGlE,MAAM,SAAS,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IACrD,MAAM,SAAS,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;YAC3C,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAAE,SAAS;YACpD,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAAE,SAAS;SACrD,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,oBAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,IAAG,CACnE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,oBAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,IAAG,CACnE,CAAC"}

package/esm/layout/responsive/index.d.ts

@@ -0,0 +1 @@
+export { Show, Hide, type ResponsiveProps } from "./Responsive";

package/esm/layout/responsive/index.js

@@ -0,0 +1,2 @@
+export { Show, Hide } from "./Responsive";
+//# sourceMappingURL=index.js.map

package/esm/layout/responsive/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/responsive/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAwB,MAAM,cAAc,CAAC"}

package/esm/layout/stack/HStack.d.ts

@@ -4,7 +4,7 @@ export type HStackProps = Omit<StackProps, "direction">;
 /**
  * Layout-primitive for horizontal flexbox
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
  * @see 🏷️ {@link HStackProps}
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *

package/esm/layout/stack/HStack.js

@@ -3,7 +3,7 @@ import { Stack } from "./Stack";
 /**
  * Layout-primitive for horizontal flexbox
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
  * @see 🏷️ {@link HStackProps}
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *

package/esm/layout/stack/Spacer.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 /**
  * Layout-primitive for auto-spacing between elements
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
  *
  * @example
  * <HStack gap="8">

package/esm/layout/stack/Spacer.js

@@ -2,7 +2,7 @@ import React from "react";
 /**
  * Layout-primitive for auto-spacing between elements
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
  *
  * @example
  * <HStack gap="8">

package/esm/layout/stack/VStack.d.ts

@@ -4,7 +4,7 @@ export type VStackProps = Omit<StackProps, "direction" | "wrap">;
 /**
  * Layout-primitive for vetical flexbox
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/vstack)
  * @see 🏷️ {@link VStackProps}
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *

package/esm/layout/stack/VStack.js

@@ -3,7 +3,7 @@ import { Stack } from "./Stack";
 /**
  * Layout-primitive for vetical flexbox
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/vstack)
  * @see 🏷️ {@link VStackProps}
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *

package/esm/modal/Modal.js

@@ -100,7 +100,7 @@ export const Modal = forwardRef((_a, ref) => {
     }, [modalRef, portalNode, open]);
     useBodyScrollLock(modalRef, portalNode);
     const isWidthPreset = typeof width === "string" && ["small", "medium"].includes(width);
-    const component = (React.createElement("dialog", Object.assign({ ref: mergedRef, className: cl("navds-modal", className, {
+    const component = (React.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: cl("navds-modal", className, {
             "navds-modal--polyfilled": needPolyfill,
             "navds-modal--autowidth": !width,
             [`navds-modal--${width}`]: isWidthPreset,
@@ -113,7 +113,7 @@ export const Modal = forwardRef((_a, ref) => {
                 onCancel(event);
         }, "aria-labelledby": !ariaLabelledby && !rest["aria-label"] && header
             ? ariaLabelId
-            : ariaLabelledby }, rest),
+            : ariaLabelledby }),
         React.createElement(ModalContext.Provider, { value: {
                 closeHandler: getCloseHandler(modalRef, header, onBeforeClose),
             } },

package/esm/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":"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"}

package/package.json

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

package/src/form/search/Search.tsx

@@ -8,14 +8,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import {
-  BodyShort,
-  ErrorMessage,
-  Label,
-  mergeRefs,
-  omit,
-  useEventListener,
-} from "../..";
+import { BodyShort, ErrorMessage, Label, mergeRefs, omit } from "../..";
 import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
 
@@ -135,7 +128,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
 
     const searchRef = useRef<HTMLInputElement | null>(null);
     const mergedRef = useMemo(() => mergeRefs([searchRef, ref]), [ref]);
-    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
 
     const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 
@@ -156,27 +148,22 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       [handleChange, onClear]
     );
 
-    useEventListener(
-      "keydown",
-      useCallback(
-        (e) => {
-          if (e.key === "Escape") {
-            e.preventDefault();
-            handleClear({ trigger: "Escape", event: e });
-          }
-        },
-        [handleClear]
-      ),
-      wrapperRef
-    );
-
     const handleClick = () => {
       onSearchClick?.(`${value ?? internalValue}`);
     };
 
     return (
       <div
-        ref={setWrapperRef}
+        onKeyDown={(e) => {
+          if (e.key !== "Escape") {
+            return;
+          }
+          searchRef.current?.value &&
+            searchRef.current?.value !== "" &&
+            e.preventDefault();
+
+          handleClear({ trigger: "Escape", event: e });
+        }}
         className={cl(
           className,
           "navds-form-field",

package/src/index.ts

@@ -35,3 +35,4 @@ export * from "./util";
 export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";
+export * from "./layout/responsive";

package/src/layout/grid/HGrid.tsx

@@ -34,7 +34,7 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hgrid)
  * @see 🏷️ {@link HGridProps}
  *
  * @example

package/src/layout/responsive/Responsive.tsx

@@ -0,0 +1,96 @@
+import cl from "clsx";
+import React, { forwardRef, HTMLAttributes } from "react";
+import { BreakpointsAlias } from "../utilities/css";
+
+export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * @example
+   * above='md'
+   */
+  above?: Exclude<BreakpointsAlias, "xs">;
+  /**
+   * @example
+   * below='md'
+   */
+  below?: Exclude<BreakpointsAlias, "xs">;
+  /**
+   * Overrides html-tag
+   * @default "div"
+   */
+  as?: "div" | "span";
+}
+
+const Responsive = forwardRef<
+  HTMLDivElement,
+  ResponsiveProps & { variant: "show" | "hide" }
+>(
+  (
+    { as: Component = "div", className, above, below, variant, ...rest },
+    ref
+  ) => {
+    const aboveProp = variant === "show" ? above : below;
+    const belowProp = variant === "show" ? below : above;
+
+    return (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cl("navds-responsive", className, {
+          [`navds-responsive__above--${aboveProp}`]: aboveProp,
+          [`navds-responsive__below--${belowProp}`]: belowProp,
+        })}
+      />
+    );
+  }
+);
+
+/**
+ * Responsive view Primitive to show/hide elements based on breakpoints
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hide)
+ * @see 🏷️ {@link ResponsiveProps}
+ *
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Hide below="md">
+ *      // Only visible above "md"
+ *   </Hide>
+ * </HGrid>
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Hide above="md">
+ *      // Only visible below "md"
+ *   </Hide>
+ * </HGrid>
+ */
+export const Hide = forwardRef<HTMLDivElement, ResponsiveProps>(
+  (props, ref) => <Responsive {...props} ref={ref} variant="hide" />
+);
+
+/**
+ * Responsive view Primitive to show/hide elements based on breakpoints
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/show)
+ * @see 🏷️ {@link ResponsiveProps}
+ *
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Show below="md">
+ *      // Only visible below "md"
+ *   </Show>
+ * </HGrid>
+ * @example
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ *   <div/>
+ *   <Show above="md">
+ *      // Only visible above "md"
+ *   </Show>
+ * </HGrid>
+ */
+export const Show = forwardRef<HTMLDivElement, ResponsiveProps>(
+  (props, ref) => <Responsive {...props} ref={ref} variant="show" />
+);

package/src/layout/responsive/hide.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import { Hide } from ".";
+import { Tag } from "../../tag";
+import { VStack } from "../stack";
+
+export default {
+  title: "ds-react/Responsive/Hide",
+  component: Hide,
+} satisfies Meta<typeof Hide>;
+
+export const Default = {
+  render: () => (
+    <VStack gap="12">
+      <VStack gap="2" align="center">
+        <Hide above="xl">
+          <Tag variant="neutral">Visible below xl</Tag>
+        </Hide>
+        <Hide above="lg">
+          <Tag variant="neutral">Visible below lg</Tag>
+        </Hide>
+        <Hide above="md">
+          <Tag variant="neutral">Visible below md</Tag>
+        </Hide>
+        <Hide above="sm">
+          <Tag variant="neutral">Visible below sm</Tag>
+        </Hide>
+      </VStack>
+      <VStack gap="2" align="center">
+        <Hide below="xl">
+          <Tag variant="alt3">Visible above xl</Tag>
+        </Hide>
+        <Hide below="lg">
+          <Tag variant="alt3">Visible above lg</Tag>
+        </Hide>
+        <Hide below="md">
+          <Tag variant="alt3">Visible above md</Tag>
+        </Hide>
+        <Hide below="sm">
+          <Tag variant="alt3">Visible above sm</Tag>
+        </Hide>
+      </VStack>
+    </VStack>
+  ),
+};

package/src/layout/responsive/index.ts

@@ -0,0 +1 @@
+export { Show, Hide, type ResponsiveProps } from "./Responsive";

package/src/layout/responsive/show.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import { Show } from ".";
+import { Tag } from "../../tag";
+import { VStack } from "../stack";
+
+export default {
+  title: "ds-react/Responsive/Show",
+  component: Show,
+} satisfies Meta<typeof Show>;
+
+export const Default = {
+  render: () => (
+    <VStack gap="12">
+      <VStack gap="2" align="center">
+        <Show above="xl">
+          <Tag variant="neutral">Visible above xl</Tag>
+        </Show>
+        <Show above="lg">
+          <Tag variant="neutral">Visible above lg</Tag>
+        </Show>
+        <Show above="md">
+          <Tag variant="neutral">Visible above md</Tag>
+        </Show>
+        <Show above="sm">
+          <Tag variant="neutral">Visible above sm</Tag>
+        </Show>
+      </VStack>
+      <VStack gap="2" align="center">
+        <Show below="xl">
+          <Tag variant="alt3">Visible below xl</Tag>
+        </Show>
+        <Show below="lg">
+          <Tag variant="alt3">Visible below lg</Tag>
+        </Show>
+        <Show below="md">
+          <Tag variant="alt3">Visible below md</Tag>
+        </Show>
+        <Show below="sm">
+          <Tag variant="alt3">Visible below sm</Tag>
+        </Show>
+      </VStack>
+    </VStack>
+  ),
+};

package/src/layout/stack/HStack.tsx

@@ -7,7 +7,7 @@ export type HStackProps = Omit<StackProps, "direction">;
 /**
  * Layout-primitive for horizontal flexbox
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
  * @see 🏷️ {@link HStackProps}
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *

package/src/layout/stack/Spacer.tsx

@@ -3,7 +3,7 @@ import React from "react";
 /**
  * Layout-primitive for auto-spacing between elements
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
  *
  * @example
  * <HStack gap="8">

package/src/layout/stack/VStack.tsx

@@ -7,7 +7,7 @@ export type VStackProps = Omit<StackProps, "direction" | "wrap">;
 /**
  * Layout-primitive for vetical flexbox
  *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/vstack)
  * @see 🏷️ {@link VStackProps}
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *

package/src/modal/Modal.tsx

@@ -192,6 +192,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
 
     const component = (
       <dialog
+        {...rest}
         ref={mergedRef}
         className={cl("navds-modal", className, {
           "navds-modal--polyfilled": needPolyfill,
@@ -213,7 +214,6 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
             ? ariaLabelId
             : ariaLabelledby
         }
-        {...rest}
       >
         <ModalContext.Provider
           value={{

package/src/modal/modal.stories.tsx

@@ -16,7 +16,7 @@ export const WithUseRef = () => {
   const ref2 = useRef<HTMLDialogElement>(null);
 
   return (
-    <>
+    <div>
       <Button onClick={() => ref.current?.showModal()}>Open Modal</Button>
       <Modal
         open={ref.current ? undefined : true /* initially open */}
@@ -80,7 +80,7 @@ export const WithUseRef = () => {
           <Button variant="tertiary">Tertiary</Button>
         </Modal.Footer>
       </Modal>
-    </>
+    </div>
   );
 };
 WithUseRef.storyName = "With useRef";