@navikt/ds-react 5.3.1 → 5.3.3

package/_docs.json

@@ -5450,7 +5450,7 @@
   },
   {
     "filePath": "src/list/ListItem.tsx",
-    "displayName": "ListItem",
+    "displayName": "List.Item",
     "props": {
       "children": {
         "defaultValue": null,
@@ -7112,6 +7112,27 @@
           "name": "string | number"
         }
       },
+      "as": {
+        "defaultValue": {
+          "value": "\"div\""
+        },
+        "description": "Overrides html-tag",
+        "name": "as",
+        "parent": {
+          "fileName": "src/skeleton/Skeleton.tsx",
+          "name": "SkeletonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/skeleton/Skeleton.tsx",
+            "name": "SkeletonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"div\" | \"span\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -16785,6 +16806,25 @@
           "name": "ResponsiveProp<SpacingScale>"
         }
       },
+      "align": {
+        "defaultValue": null,
+        "description": "Vertical alignment of children. Elements will by default stretch to the height of parent-element.",
+        "name": "align",
+        "parent": {
+          "fileName": "src/layout/grid/HGrid.tsx",
+          "name": "HGridProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/grid/HGrid.tsx",
+            "name": "HGridProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -18000,7 +18040,7 @@
   },
   {
     "filePath": "src/dropdown/Menu/List/index.tsx",
-    "displayName": "List",
+    "displayName": "Dropdown.Menu.List",
     "props": {
       "children": {
         "defaultValue": null,

package/cjs/date/monthpicker/MonthButton.js

@@ -38,8 +38,8 @@ const context_1 = require("../context");
 const utils_1 = require("../utils");
 const disableMonth = (month, fromDate, toDate) => {
     if (fromDate && toDate) {
-        return ((0, isSameMonth_1.default)(month, fromDate) && (0, isSameYear_1.default)(month, fromDate))
-            || ((0, isSameMonth_1.default)(month, toDate) && (0, isSameYear_1.default)(month, toDate));
+        return (((0, isSameMonth_1.default)(month, fromDate) && (0, isSameYear_1.default)(month, fromDate)) ||
+            ((0, isSameMonth_1.default)(month, toDate) && (0, isSameYear_1.default)(month, toDate)));
     }
     else if (fromDate) {
         return (0, isSameMonth_1.default)(month, fromDate) && (0, isSameYear_1.default)(month, fromDate);

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

@@ -46,4 +46,5 @@ exports.List = (0, react_1.forwardRef)((_a, ref) => {
     return (react_1.default.createElement("ul", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-dropdown__list", className) }), children));
 });
 exports.List.Item = Item_1.default;
+exports.List.displayName = "Dropdown.Menu.List";
 exports.default = exports.List;

package/cjs/layout/grid/HGrid.js

@@ -67,8 +67,8 @@ const css_1 = require("../utilities/css");
  * </HGrid>
  */
 exports.HGrid = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, columns, gap, style } = _a, rest = __rest(_a, ["className", "columns", "gap", "style"]);
-    const styles = Object.assign(Object.assign(Object.assign({}, style), (0, css_1.getResponsiveProps)(`hgrid`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(`hgrid`, "columns", formatGrid(columns)));
+    var { className, columns, gap, style, align } = _a, rest = __rest(_a, ["className", "columns", "gap", "style", "align"]);
+    const styles = Object.assign(Object.assign(Object.assign(Object.assign({}, style), { "--__ac-hgrid-align": align }), (0, css_1.getResponsiveProps)(`hgrid`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(`hgrid`, "columns", formatGrid(columns)));
     return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-hgrid", className), style: styles })));
 });
 function formatGrid(props) {

package/cjs/list/ListItem.js

@@ -58,4 +58,5 @@ exports.ListItem = (0, react_1.forwardRef)((_a, ref) => {
             title && (react_1.default.createElement(typography_1.Label, { as: "p", size: size }, title)),
             children)));
 });
+exports.ListItem.displayName = "List.Item";
 exports.default = exports.ListItem;

package/cjs/skeleton/Skeleton.js

@@ -50,8 +50,8 @@ 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}`, {
+    var { className, children, height, width, style, variant = "text", as: As = "div" } = _a, rest = __rest(_a, ["className", "children", "height", "width", "style", "variant", "as"]);
+    return (react_1.default.createElement(As, 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,

package/esm/date/monthpicker/MonthButton.js

@@ -9,8 +9,8 @@ import { useSharedMonthContext } from "../context";
 import { dateIsInCurrentMonth, isMatch, nextEnabled } from "../utils";
 const disableMonth = (month, fromDate, toDate) => {
     if (fromDate && toDate) {
-        return (isSameMonth(month, fromDate) && isSameYear(month, fromDate))
-            || (isSameMonth(month, toDate) && isSameYear(month, toDate));
+        return ((isSameMonth(month, fromDate) && isSameYear(month, fromDate)) ||
+            (isSameMonth(month, toDate) && isSameYear(month, toDate)));
     }
     else if (fromDate) {
         return isSameMonth(month, fromDate) && isSameYear(month, fromDate);

package/esm/date/monthpicker/MonthButton.js.map

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

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

@@ -17,5 +17,6 @@ export const List = forwardRef((_a, ref) => {
     return (React.createElement("ul", Object.assign({}, rest, { ref: ref, className: cl("navds-dropdown__list", className) }), children));
 });
 List.Item = ListItem;
+List.displayName = "Dropdown.Menu.List";
 export default List;
 //# sourceMappingURL=index.js.map

package/esm/dropdown/Menu/List/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/dropdown/Menu/List/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,QAA2B,MAAM,QAAQ,CAAC;AAoBjD,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAAY,OAAA,CACxE,4CAAQ,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,KACrE,QAAQ,CACN,CACN,CAAA;CAAA,CAAa,CAAC;AAEf,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;AAErB,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/dropdown/Menu/List/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,QAA2B,MAAM,QAAQ,CAAC;AAoBjD,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAAY,OAAA,CACxE,4CAAQ,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,KACrE,QAAQ,CACN,CACN,CAAA;CAAA,CAAa,CAAC;AAEf,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;AACrB,IAAI,CAAC,WAAW,GAAG,oBAAoB,CAAC;AACxC,eAAe,IAAI,CAAC"}

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

@@ -19,6 +19,10 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
      * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
      */
     gap?: ResponsiveProp<SpacingScale>;
+    /**
+     * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
+     */
+    align?: "start" | "center" | "end";
 }
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.

package/esm/layout/grid/HGrid.js

@@ -38,8 +38,8 @@ import { getResponsiveProps, getResponsiveValue, } from "../utilities/css";
  * </HGrid>
  */
 export const HGrid = forwardRef((_a, ref) => {
-    var { className, columns, gap, style } = _a, rest = __rest(_a, ["className", "columns", "gap", "style"]);
-    const styles = Object.assign(Object.assign(Object.assign({}, style), getResponsiveProps(`hgrid`, "gap", "spacing", gap)), getResponsiveValue(`hgrid`, "columns", formatGrid(columns)));
+    var { className, columns, gap, style, align } = _a, rest = __rest(_a, ["className", "columns", "gap", "style", "align"]);
+    const styles = Object.assign(Object.assign(Object.assign(Object.assign({}, style), { "--__ac-hgrid-align": align }), getResponsiveProps(`hgrid`, "gap", "spacing", gap)), getResponsiveValue(`hgrid`, "columns", formatGrid(columns)));
     return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-hgrid", className), style: styles })));
 });
 function formatGrid(props) {

package/esm/layout/grid/HGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"HGrid.js","sourceRoot":"","sources":["../../../src/layout/grid/HGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EACL,kBAAkB,EAClB,kBAAkB,GAGnB,MAAM,kBAAkB,CAAC;AAsB1B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAA2C,EAAE,GAAG,EAAE,EAAE;QAApD,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,OAAW,EAAN,IAAI,cAAzC,wCAA2C,CAAF;IACxC,MAAM,MAAM,iDACP,KAAK,GACL,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAC/D,CAAC;IAEF,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,MAAM,IACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,UAAU,CACjB,KAAuC;IAEvC,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC1D,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC;QAC5D,eAAe;QACf,cAAc,CAAC,WAAW,CAAC;KAC5B,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,IAAqB,EAAE,EAAE;IAC/C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAO,UAAU,IAAI,mBAAmB,CAAC;KAC1C;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"HGrid.js","sourceRoot":"","sources":["../../../src/layout/grid/HGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EACL,kBAAkB,EAClB,kBAAkB,GAGnB,MAAM,kBAAkB,CAAC;AA0B1B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAkD,EAAE,GAAG,EAAE,EAAE;QAA3D,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhD,iDAAkD,CAAF;IAC/C,MAAM,MAAM,+DACP,KAAK,KACR,oBAAoB,EAAE,KAAK,KACxB,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAC/D,CAAC;IAEF,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,MAAM,IACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,UAAU,CACjB,KAAuC;IAEvC,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC1D,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC;QAC5D,eAAe;QACf,cAAc,CAAC,WAAW,CAAC;KAC5B,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,IAAqB,EAAE,EAAE;IAC/C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAO,UAAU,IAAI,mBAAmB,CAAC;KAC1C;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/layout/stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAE1D,OAAO,EACL,kBAAkB,GAGnB,MAAM,kBAAkB,CAAC;AA+B1B,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,EACH,KAAK,EAAE,MAAM,EACb,SAAS,OAEV,EADI,IAAI,cATT,4EAUC,CADQ;IAIT,MAAM,KAAK,GAAG,8CACT,MAAM,KACT,wBAAwB,EAAE,SAAS,EACnC,oBAAoB,EAAE,KAAK,EAC3B,sBAAsB,EAAE,OAAO,EAC/B,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAC1C,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,CAC/B,CAAC;IAEzB,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,cAAc,EAAE,SAAS,KAAK,QAAQ;YACtC,cAAc,EAAE,SAAS,KAAK,KAAK;SACpC,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAE1D,OAAO,EACL,kBAAkB,GAGnB,MAAM,kBAAkB,CAAC;AA+B1B,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,EACH,KAAK,EAAE,MAAM,EACb,SAAS,OAEV,EADI,IAAI,cATT,4EAUC,CADQ;IAIT,MAAM,KAAK,iDACN,MAAM,KACT,wBAAwB,EAAE,SAAS,EACnC,oBAAoB,EAAE,KAAK,EAC3B,sBAAsB,EAAE,OAAO,EAC/B,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAC1C,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,CACtD,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,cAAc,EAAE,SAAS,KAAK,QAAQ;YACtC,cAAc,EAAE,SAAS,KAAK,KAAK;SACpC,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

package/esm/list/ListItem.js

@@ -29,5 +29,6 @@ export const ListItem = forwardRef((_a, ref) => {
             title && (React.createElement(Label, { as: "p", size: size }, title)),
             children)));
 });
+ListItem.displayName = "List.Item";
 export default ListItem;
 //# sourceMappingURL=ListItem.js.map

package/esm/list/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../src/list/ListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAiBrC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,EAA6C,EAAE,GAAG,EAAE,EAAE;QAAtD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,OAAW,EAAN,IAAI,cAA3C,0CAA6C,CAAF;IAC1C,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEnD,IAAI,QAAQ,KAAK,IAAI,IAAI,IAAI,EAAE;QAC7B,OAAO,CAAC,IAAI,CACV,sFAAsF,CACvF,CAAC;KACH;IAED,OAAO,CACL,4CAAQ,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC;QACjE,QAAQ,KAAK,IAAI,IAAI,CACpB,6BACE,SAAS,EAAE,EAAE,CAAC;gBACZ,+BAA+B,EAAE,IAAI;gBACrC,iCAAiC,EAAE,CAAC,IAAI;aACzC,CAAC,IAED,IAAI,CAAC,CAAC,CAAC,CACN,IAAI,CACL,CAAC,CAAC,CAAC,CACF,6BACE,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,uBAElC,SAAS,EAAE,KAAK,EAChB,IAAI,EAAC,KAAK;YAEV,8BAAM,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CACpD,CACP,CACG,CACP;QAED,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,0BAA0B;YACjE,KAAK,IAAI,CACR,oBAAC,KAAK,IAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,IACrB,KAAK,CACA,CACT;YACA,QAAQ,CACC,CACT,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../src/list/ListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAiBrC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,EAA6C,EAAE,GAAG,EAAE,EAAE;QAAtD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,OAAW,EAAN,IAAI,cAA3C,0CAA6C,CAAF;IAC1C,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEnD,IAAI,QAAQ,KAAK,IAAI,IAAI,IAAI,EAAE;QAC7B,OAAO,CAAC,IAAI,CACV,sFAAsF,CACvF,CAAC;KACH;IAED,OAAO,CACL,4CAAQ,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC;QACjE,QAAQ,KAAK,IAAI,IAAI,CACpB,6BACE,SAAS,EAAE,EAAE,CAAC;gBACZ,+BAA+B,EAAE,IAAI;gBACrC,iCAAiC,EAAE,CAAC,IAAI;aACzC,CAAC,IAED,IAAI,CAAC,CAAC,CAAC,CACN,IAAI,CACL,CAAC,CAAC,CAAC,CACF,6BACE,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,uBAElC,SAAS,EAAE,KAAK,EAChB,IAAI,EAAC,KAAK;YAEV,8BAAM,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CACpD,CACP,CACG,CACP;QAED,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,0BAA0B;YACjE,KAAK,IAAI,CACR,oBAAC,KAAK,IAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,IACrB,KAAK,CACA,CACT;YACA,QAAQ,CACC,CACT,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,WAAW,CAAC;AACnC,eAAe,QAAQ,CAAC"}

package/esm/skeleton/Skeleton.d.ts

@@ -13,6 +13,11 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
      * When not inferring width from children, you must specify width
      */
     width?: number | string;
+    /**
+     * Overrides html-tag
+     * @default "div"
+     */
+    as?: "div" | "span";
 }
 /**
  * Simple skeleton loader

package/esm/skeleton/Skeleton.js

@@ -21,8 +21,8 @@ import cl from "clsx";
  * ```
  */
 export const Skeleton = forwardRef((_a, ref) => {
-    var { className, children, height, width, style, variant = "text" } = _a, rest = __rest(_a, ["className", "children", "height", "width", "style", "variant"]);
-    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-skeleton", className, `navds-skeleton--${variant}`, {
+    var { className, children, height, width, style, variant = "text", as: As = "div" } = _a, rest = __rest(_a, ["className", "children", "height", "width", "style", "variant", "as"]);
+    return (React.createElement(As, Object.assign({}, rest, { ref: ref, className: cl("navds-skeleton", className, `navds-skeleton--${variant}`, {
             "navds-skeleton--has-children": Boolean(children),
             "navds-skeleton--no-height": !height,
             "navds-skeleton--no-width": !width,

package/esm/skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAkBtB;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EAAwE,EACxE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,OAAW,EAAN,IAAI,cAAtE,gEAAwE,CAAF;IAGtE,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gBAAgB,EAChB,SAAS,EACT,mBAAmB,OAAO,EAAE,EAC5B;YACE,8BAA8B,EAAE,OAAO,CAAC,QAAQ,CAAC;YACjD,2BAA2B,EAAE,CAAC,MAAM;YACpC,0BAA0B,EAAE,CAAC,KAAK;SACnC,CACF,EACD,KAAK,kCAAO,KAAK,KAAE,KAAK,EAAE,MAAM,6BAG/B,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAuBtB;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,OAAO,GAAG,MAAM,EAChB,EAAE,EAAE,EAAE,GAAG,KAAK,OAEf,EADI,IAAI,cART,sEASC,CADQ;IAIT,OAAO,CACL,oBAAC,EAAE,oBACG,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gBAAgB,EAChB,SAAS,EACT,mBAAmB,OAAO,EAAE,EAC5B;YACE,8BAA8B,EAAE,OAAO,CAAC,QAAQ,CAAC;YACjD,2BAA2B,EAAE,CAAC,MAAM;YACpC,0BAA0B,EAAE,CAAC,KAAK;SACnC,CACF,EACD,KAAK,kCAAO,KAAK,KAAE,KAAK,EAAE,MAAM,6BAG/B,QAAQ,CACN,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.3.1",
+  "version": "5.3.3",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -32,13 +32,13 @@
     "docgen": "yarn ts-node ../../../scripts/docgen.ts",
     "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
     "clean": "rimraf cjs esm",
-    "build": "concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && yarn create-package-json-pointers-to-esm",
+    "build": "concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json\" && yarn create-package-json-pointers-to-esm",
     "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "TZ=UTC jest"
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^5.3.1",
+    "@navikt/aksel-icons": "^5.3.3",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/alert/alert.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { Alert } from ".";
+import { Alert, AlertProps } from ".";
 import { BodyLong, Heading as DsHeading, Link } from "..";
 import { within, userEvent } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
@@ -14,7 +14,7 @@ export default meta;
 
 type Story = StoryObj<typeof Alert>;
 
-const variants: Array<"error" | "warning" | "info" | "success"> = [
+const variants: AlertProps["variant"][] = [
   "error",
   "warning",
   "info",
@@ -33,24 +33,17 @@ export const Default: Story = {
   },
   argTypes: {
     variant: {
-      control: {
-        type: "radio",
-      },
+      control: { type: "radio" },
       options: ["info", "error", "warning", "success"],
     },
     size: {
-      control: {
-        type: "radio",
-      },
+      control: { type: "radio" },
       options: ["medium", "small"],
     },
-    closeButton: {
-      type: "boolean",
-    },
   },
 };
 
-export const Small = {
+export const Small: Story = {
   render: (props) => {
     return (
       <div className="colgap">
@@ -69,14 +62,10 @@ export const Small = {
       </div>
     );
   },
+
   args: {
     closeButton: false,
   },
-  argtypes: {
-    closeButton: {
-      type: "boolean",
-    },
-  },
 };
 
 export const FullWidth = () => {
@@ -163,13 +152,11 @@ export const Links = () => {
 const AlertWithCloseButton = ({ children }: { children?: React.ReactNode }) => {
   let [show, setShow] = React.useState(true);
 
-  return (
-    show && (
-      <Alert variant="success" closeButton onClose={() => setShow(false)}>
-        {children || "Content"}
-      </Alert>
-    )
-  );
+  return show ? (
+    <Alert variant="success" closeButton onClose={() => setShow(false)}>
+      {children || "Content"}
+    </Alert>
+  ) : null;
 };
 
 export const WithCloseButton: Story = {

package/src/date/monthpicker/MonthButton.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import format from "date-fns/format";
 import isSameMonth from "date-fns/isSameMonth";
-import isSameYear from  "date-fns/isSameYear";
+import isSameYear from "date-fns/isSameYear";
 import setYear from "date-fns/setYear";
 import React, { useEffect, useRef } from "react";
 import { useDayPicker } from "react-day-picker";
@@ -19,12 +19,14 @@ interface MonthType {
 
 const disableMonth = (month: Date, fromDate?: Date, toDate?: Date) => {
   if (fromDate && toDate) {
-    return (isSameMonth(month, fromDate) && isSameYear(month, fromDate))
-    || (isSameMonth(month, toDate) && isSameYear(month, toDate))
+    return (
+      (isSameMonth(month, fromDate) && isSameYear(month, fromDate)) ||
+      (isSameMonth(month, toDate) && isSameYear(month, toDate))
+    );
   } else if (fromDate) {
-    return isSameMonth(month, fromDate) && isSameYear(month, fromDate)
+    return isSameMonth(month, fromDate) && isSameYear(month, fromDate);
   } else if (toDate) {
-    return isSameMonth(month, toDate) && isSameYear(month, toDate)
+    return isSameMonth(month, toDate) && isSameYear(month, toDate);
   }
   return false;
 };

package/src/dropdown/Menu/List/index.tsx

@@ -28,5 +28,5 @@ export const List = forwardRef(({ className, children, ...rest }, ref) => (
 )) as ListType;
 
 List.Item = ListItem;
-
+List.displayName = "Dropdown.Menu.List";
 export default List;

package/src/form/combobox/combobox.stories.tsx

@@ -1,26 +1,18 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { Meta } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React, { useState, useId, useMemo } from "react";
 import { userEvent, within } from "@storybook/testing-library";
-import { Chips, UNSAFE_Combobox, TextField } from "../../index";
+import { Chips, UNSAFE_Combobox, ComboboxProps, TextField } from "../../index";
 import { expect, jest } from "@storybook/jest";
 
 export default {
   title: "ds-react/Combobox",
   component: UNSAFE_Combobox,
-  argTypes: {
-    isListOpen: {
-      control: {
-        type: "boolean",
-      },
-    },
-    isLoading: {
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-} as Meta;
+  decorators: [(story) => <div style={{ width: "300px" }}>{story()}</div>],
+} satisfies Meta<typeof UNSAFE_Combobox>;
+
+type StoryObject = StoryObj<typeof UNSAFE_Combobox>;
+type StoryFunction = StoryFn<typeof UNSAFE_Combobox>;
 
 const options = [
   "banana",
@@ -38,55 +30,39 @@ const options = [
   "grape fruit",
 ];
 
-const initialSelectedOptions = ["passion fruit", "grape fruit"];
-
-const DemoContainer = ({
-  dataTheme,
-  children,
-}: {
-  children: any;
-  dataTheme: "dark" | "light";
-}) => (
-  <div data-theme={dataTheme} style={{ width: "300px" }}>
-    {children}
-  </div>
-);
-
-export const Default = (props) => {
+export const Default: StoryFunction = (props) => {
   const id = useId();
-  return (
-    <DemoContainer dataTheme={props.darkMode}>
-      <UNSAFE_Combobox
-        options={props.options}
-        label="Hva er dine favorittfrukter?"
-        /* everything under here is optional? */
-        shouldAutocomplete={props.shouldAutoComplete}
-        size="medium"
-        id={id}
-      />
-    </DemoContainer>
-  );
+  return <UNSAFE_Combobox {...props} id={id} />;
 };
-
 Default.args = {
   options,
-  shouldAutoComplete: true,
+  label: "Hva er dine favorittfrukter?",
+  shouldAutocomplete: true,
+  isLoading: false,
+};
+Default.argTypes = {
+  isListOpen: {
+    control: { type: "boolean" },
+  },
+  size: {
+    options: ["medium", "small"],
+    defaultValue: "medium",
+    control: { type: "radio" },
+  },
 };
 
-export function MultiSelect(props) {
+export const MultiSelect: StoryFunction = (props) => {
   const id = useId();
   return (
-    <DemoContainer dataTheme={props.darkMode}>
-      <UNSAFE_Combobox
-        id={id}
-        label="Komboboks - velg flere"
-        options={props.options}
-        isMultiSelect={props.isMultiSelect}
-        size={props.size}
-      />
-    </DemoContainer>
+    <UNSAFE_Combobox
+      id={id}
+      label="Komboboks - velg flere"
+      options={props.options}
+      isMultiSelect={props.isMultiSelect}
+      size={props.size}
+    />
   );
-}
+};
 
 MultiSelect.args = {
   options,
@@ -94,41 +70,37 @@ MultiSelect.args = {
   size: "medium",
 };
 
-export function WithAddNewOptions(props) {
+export const WithAddNewOptions: StoryFunction = (props) => {
   const id = useId();
   return (
-    <DemoContainer dataTheme={props.darkMode}>
-      <UNSAFE_Combobox
-        id={id}
-        label="Komboboks med mulighet for å legge til nye verdier"
-        options={props.options}
-        allowNewValues={props.allowNewValues}
-        shouldAutocomplete={props.shouldAutoComplete}
-      />
-    </DemoContainer>
+    <UNSAFE_Combobox
+      id={id}
+      label="Komboboks med mulighet for å legge til nye verdier"
+      options={props.options}
+      allowNewValues={props.allowNewValues}
+      shouldAutocomplete={props.shouldAutocomplete}
+    />
   );
-}
+};
 
 WithAddNewOptions.args = {
   options,
   allowNewValues: true,
-  shouldAutoComplete: true,
+  shouldAutocomplete: true,
 };
 
-export function MultiSelectWithAddNewOptions(props) {
+export const MultiSelectWithAddNewOptions: StoryFunction = (props) => {
   const id = useId();
   return (
-    <DemoContainer dataTheme={props.darkMode}>
-      <UNSAFE_Combobox
-        id={id}
-        isMultiSelect={props.isMultiSelect}
-        label="Multiselect komboboks med mulighet for å legge til nye verdier"
-        options={props.options}
-        allowNewValues={props.allowNewValues}
-      />
-    </DemoContainer>
+    <UNSAFE_Combobox
+      id={id}
+      isMultiSelect={props.isMultiSelect}
+      label="Multiselect komboboks med mulighet for å legge til nye verdier"
+      options={props.options}
+      allowNewValues={props.allowNewValues}
+    />
   );
-}
+};
 
 MultiSelectWithAddNewOptions.args = {
   allowNewValues: true,
@@ -137,19 +109,20 @@ MultiSelectWithAddNewOptions.args = {
   shouldAutocomplete: false,
 };
 
-export const MultiSelectWithExternalChips = (props) => {
-  const [selectedOptions, setSelectedOptions] = useState<string[]>(
-    props.selectedOptions
-  );
+export const MultiSelectWithExternalChips: StoryFn<{
+  controlled: boolean;
+  options: ComboboxProps["options"];
+}> = (props) => {
+  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
   const [value, setValue] = useState("");
   const id = useId();
 
-  const toggleSelected = (option) =>
+  const toggleSelected = (option: string) =>
     selectedOptions.includes(option)
       ? setSelectedOptions(selectedOptions.filter((opt) => opt !== option))
       : setSelectedOptions([...selectedOptions, option]);
   return (
-    <DemoContainer dataTheme={props.darkMode}>
+    <>
       {selectedOptions && (
         <Chips>
           {selectedOptions.map((option) => (
@@ -164,84 +137,85 @@ export const MultiSelectWithExternalChips = (props) => {
         </Chips>
       )}
       <UNSAFE_Combobox
-        options={options}
+        options={props.options}
         selectedOptions={selectedOptions}
-        onToggleSelected={(option: string) => toggleSelected(option)}
-        isListOpen={props.isListOpen}
+        onToggleSelected={(option) => toggleSelected(option)}
         isMultiSelect
         value={props.controlled ? value : undefined}
         onChange={(event) =>
-          props.controlled ? setValue(event.currentTarget.value) : undefined
+          props.controlled
+            ? setValue(event?.currentTarget.value || "")
+            : undefined
         }
         label="Komboboks"
         size="medium"
-        error={props.error && "error here"}
         id={id}
         shouldShowSelectedOptions={false}
       />
-    </DemoContainer>
+    </>
   );
 };
 
 MultiSelectWithExternalChips.args = {
   controlled: false,
   options,
-  selectedOptions: [],
 };
 
-export function Loading(props) {
+export const Loading: StoryFunction = (props) => {
   const id = useId();
   return (
-    <DemoContainer dataTheme={props.darkMode}>
-      <UNSAFE_Combobox
-        id={id}
-        label="Komboboks (laster)"
-        options={[]}
-        selectedOptions={[]}
-        isListOpen={props.isListOpen}
-        isLoading={props.isLoading}
-      />
-    </DemoContainer>
+    <UNSAFE_Combobox
+      id={id}
+      label="Komboboks (laster)"
+      options={[]}
+      selectedOptions={[]}
+      isListOpen={props.isListOpen}
+      isLoading={props.isLoading}
+    />
   );
-}
+};
 
 Loading.args = {
   isLoading: true,
   isListOpen: true,
 };
 
-export function ComboboxWithNoHits(props) {
+export const ComboboxWithNoHits: StoryFunction = (props) => {
   const id = useId();
   const [value, setValue] = useState(props.value);
   return (
-    <DemoContainer dataTheme={props.darkMode}>
-      <UNSAFE_Combobox
-        id={id}
-        label="Komboboks (uten søketreff)"
-        options={props.options}
-        value={value}
-        onChange={(event) => setValue(event.currentTarget.value)}
-        isListOpen={true}
-      />
-    </DemoContainer>
+    <UNSAFE_Combobox
+      id={id}
+      label="Komboboks (uten søketreff)"
+      options={props.options}
+      value={value}
+      onChange={(event) => setValue(event?.currentTarget.value)}
+      isListOpen={true}
+    />
   );
-}
+};
 
 ComboboxWithNoHits.args = {
   options,
   value: "Orange",
 };
 
-export const Controlled = (props) => {
+export const Controlled: StoryFn<{
+  value: string;
+  options: string[];
+  initialSelectedOptions: string[];
+}> = (props) => {
   const id = useId();
   const [value, setValue] = useState(props.value);
-  const [selectedOptions, setSelectedOptions] = useState(props.selectedOptions);
+  const [selectedOptions, setSelectedOptions] = useState(
+    props.initialSelectedOptions
+  );
   const filteredOptions = useMemo(
     () => props.options.filter((option) => option.includes(value)),
     [props.options, value]
   );
 
-  const onToggleSelected = (option, isSelected) => {
+  const onToggleSelected = (option: string, isSelected: boolean) => {
     if (isSelected) {
       setSelectedOptions([...selectedOptions, option]);
     } else {
@@ -250,7 +224,7 @@ export const Controlled = (props) => {
   };
 
   return (
-    <DemoContainer dataTheme={props.darkMode}>
+    <>
       <TextField
         label="Overstyr value"
         onChange={(event) => setValue(event.target.value)}
@@ -263,23 +237,23 @@ export const Controlled = (props) => {
         filteredOptions={filteredOptions}
         isMultiSelect
         options={props.options}
-        onChange={(event) => setValue(event.target.value)}
+        onChange={(event) => setValue(event?.target.value || "")}
         onToggleSelected={onToggleSelected}
         selectedOptions={selectedOptions}
         value={value}
       />
-    </DemoContainer>
+    </>
   );
 };
 
 Controlled.args = {
   value: "apple",
   options,
-  selectedOptions: initialSelectedOptions,
+  initialSelectedOptions: ["passion fruit", "grape fruit"],
 };
 
-export const ComboboxSizes = (props) => (
-  <DemoContainer dataTheme={props.darkMode}>
+export const ComboboxSizes = () => (
+  <>
     <UNSAFE_Combobox
       label="Hva er dine favorittfrukter?"
       description="Medium single-select"
@@ -309,36 +283,29 @@ export const ComboboxSizes = (props) => (
       size="small"
       allowNewValues
     />
-  </DemoContainer>
+  </>
 );
 
-ComboboxSizes.args = {
-  options,
-};
-
-export const WithError = {
+export const WithError: StoryObject = {
   args: {
     error: "Du må velge en favorittfrukt.",
-    isLoading: true,
   },
   render: (props) => {
     const [hasSelectedValue, setHasSelectedValue] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     return (
-      <DemoContainer dataTheme={props.darkMode}>
-        <UNSAFE_Combobox
-          filteredOptions={isLoading ? [] : undefined}
-          options={options}
-          label="Hva er dine favorittfrukter?"
-          error={!hasSelectedValue && props.error}
-          isLoading={isLoading}
-          onChange={() => {
-            setIsLoading(true);
-            setTimeout(() => setIsLoading(false), 2000);
-          }}
-          onToggleSelected={(_, isSelected) => setHasSelectedValue(isSelected)}
-        />
-      </DemoContainer>
+      <UNSAFE_Combobox
+        filteredOptions={isLoading ? [] : undefined}
+        options={options}
+        label="Hva er dine favorittfrukter?"
+        error={!hasSelectedValue && props.error}
+        isLoading={isLoading}
+        onChange={() => {
+          setIsLoading(true);
+          setTimeout(() => setIsLoading(false), 2000);
+        }}
+        onToggleSelected={(_, isSelected) => setHasSelectedValue(isSelected)}
+      />
     );
   },
 };
@@ -347,15 +314,10 @@ function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-export const CancelInputTest = {
-  render: (props) => {
+export const CancelInputTest: StoryObject = {
+  render: () => {
     return (
-      <DemoContainer dataTheme={props.darkMode}>
-        <UNSAFE_Combobox
-          options={options}
-          label="Hva er dine favorittfrukter?"
-        />
-      </DemoContainer>
+      <UNSAFE_Combobox options={options} label="Hva er dine favorittfrukter?" />
     );
   },
   play: async ({ canvasElement }) => {
@@ -378,16 +340,14 @@ export const CancelInputTest = {
   },
 };
 
-export const RemoveSelectedMultiSelectTest = {
-  render: (props) => {
+export const RemoveSelectedMultiSelectTest: StoryObject = {
+  render: () => {
     return (
-      <DemoContainer dataTheme={props.darkMode}>
-        <UNSAFE_Combobox
-          options={options}
-          label="Hva er dine favorittfrukter?"
-          isMultiSelect
-        />
-      </DemoContainer>
+      <UNSAFE_Combobox
+        options={options}
+        label="Hva er dine favorittfrukter?"
+        isMultiSelect
+      />
     );
   },
   play: async ({ canvasElement }) => {
@@ -436,16 +396,14 @@ export const RemoveSelectedMultiSelectTest = {
   },
 };
 
-export const AddWhenAddNewDisabledTest = {
-  render: (props) => {
+export const AddWhenAddNewDisabledTest: StoryObject = {
+  render: () => {
     return (
-      <DemoContainer dataTheme={props.darkMode}>
-        <UNSAFE_Combobox
-          options={options}
-          label="Hva er dine favorittfrukter?"
-          isMultiSelect
-        />
-      </DemoContainer>
+      <UNSAFE_Combobox
+        options={options}
+        label="Hva er dine favorittfrukter?"
+        isMultiSelect
+      />
     );
   },
   play: async ({ canvasElement }) => {
@@ -471,7 +429,11 @@ export const AddWhenAddNewDisabledTest = {
   },
 };
 
-export const TestThatCallbacksOnlyFireWhenExpected = {
+export const TestThatCallbacksOnlyFireWhenExpected: StoryObj<{
+  onChange: ReturnType<typeof jest.fn>;
+  onClear: ReturnType<typeof jest.fn>;
+  onToggleSelected: ReturnType<typeof jest.fn>;
+}> = {
   args: {
     onChange: jest.fn(),
     onClear: jest.fn(),
@@ -479,13 +441,11 @@ export const TestThatCallbacksOnlyFireWhenExpected = {
   },
   render: (props) => {
     return (
-      <DemoContainer dataTheme={props.darkMode}>
-        <UNSAFE_Combobox
-          options={options}
-          label="Hva er dine favorittfrukter?"
-          {...props}
-        />
-      </DemoContainer>
+      <UNSAFE_Combobox
+        options={options}
+        label="Hva er dine favorittfrukter?"
+        {...props}
+      />
     );
   },
   play: async ({ canvasElement, args }) => {
@@ -510,16 +470,10 @@ export const TestThatCallbacksOnlyFireWhenExpected = {
   },
 };
 
-export const TestHoverAndFocusSwitching = {
-  render: (props) => {
+export const TestHoverAndFocusSwitching: StoryObject = {
+  render: () => {
     return (
-      <DemoContainer dataTheme={props.darkMode}>
-        <UNSAFE_Combobox
-          options={options}
-          label="Hva er dine favorittfrukter?"
-          {...props}
-        />
-      </DemoContainer>
+      <UNSAFE_Combobox options={options} label="Hva er dine favorittfrukter?" />
     );
   },
   play: async ({ canvasElement }) => {

package/src/guide-panel/guidepanel.stories.tsx

@@ -16,10 +16,10 @@ enim id.`;
 export const Default = {
   render: (props: { poster: boolean; colorOverride: boolean }) => {
     const style = props.colorOverride
-      ? ({
+      ? {
           "--ac-guide-panel-illustration-bg": "var(--a-purple-200)",
           "--ac-guide-panel-border": "var(--a-purple-400)",
-        } as React.CSSProperties)
+        }
       : {};
 
     return (

package/src/layout/grid/HGrid.tsx

@@ -26,6 +26,10 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
    * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
    */
   gap?: ResponsiveProp<SpacingScale>;
+  /**
+   * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
+   */
+  align?: "start" | "center" | "end";
 }
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
@@ -53,9 +57,10 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
  * </HGrid>
  */
 export const HGrid = forwardRef<HTMLDivElement, HGridProps>(
-  ({ className, columns, gap, style, ...rest }, ref) => {
+  ({ className, columns, gap, style, align, ...rest }, ref) => {
     const styles: React.CSSProperties = {
       ...style,
+      "--__ac-hgrid-align": align,
       ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
       ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
     };

package/src/layout/grid/h-grid.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { HGrid } from ".";
+import { VStack } from "../stack";
 
 const columnsVariants = {
   Number: "columnNumber",
@@ -86,12 +87,31 @@ export const DynamicColumns = {
   ),
 };
 
-function Placeholder({ text }) {
+export const AlignItems = {
+  render: () => (
+    <VStack gap="8">
+      <HGrid gap="4" columns={2} align="start">
+        <Placeholder text="start" height="8rem" />
+        <Placeholder text="auto" height="auto" />
+      </HGrid>
+      <HGrid gap="4" columns={2} align="center">
+        <Placeholder text="center" height="8rem" />
+        <Placeholder text="auto" height="auto" />
+      </HGrid>
+      <HGrid gap="4" columns={2} align="end">
+        <Placeholder text="end" height="8rem" />
+        <Placeholder text="auto" height="auto" />
+      </HGrid>
+    </VStack>
+  ),
+};
+
+function Placeholder({ text, height }: { text: string; height?: string }) {
   return (
     <div
       style={{
         background: "var(--a-deepblue-900)",
-        height: "5rem",
+        height: height ?? "5rem",
         width: "auto",
         color: "white",
       }}

package/src/layout/stack/Stack.tsx

@@ -52,14 +52,14 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       },
       ref
     ) => {
-      const style = {
+      const style: React.CSSProperties = {
         ..._style,
         "--__ac-stack-direction": direction,
         "--__ac-stack-align": align,
         "--__ac-stack-justify": justify,
         "--__ac-stack-wrap": wrap ? "wrap" : "nowrap",
         ...getResponsiveProps(`stack`, "gap", "spacing", gap),
-      } as React.CSSProperties;
+      };
 
       return (
         <Component

package/src/list/ListItem.tsx

@@ -69,4 +69,5 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
   }
 );
 
+ListItem.displayName = "List.Item";
 export default ListItem;

package/src/react-css.d.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line react/no-typos
+import "react";
+
+declare module "react" {
+  interface CSSProperties {
+    [key: `--ac-${string}`]: string | undefined;
+    [key: `--__ac-${string}`]: string | undefined;
+  }
+}

package/src/skeleton/Skeleton.tsx

@@ -15,6 +15,11 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
    * When not inferring width from children, you must specify width
    */
   width?: number | string;
+  /**
+   * Overrides html-tag
+   * @default "div"
+   */
+  as?: "div" | "span";
 }
 
 /**
@@ -28,11 +33,20 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
   (
-    { className, children, height, width, style, variant = "text", ...rest },
+    {
+      className,
+      children,
+      height,
+      width,
+      style,
+      variant = "text",
+      as: As = "div",
+      ...rest
+    },
     ref
   ) => {
     return (
-      <div
+      <As
         {...rest}
         ref={ref}
         className={cl(
@@ -49,7 +63,7 @@ export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
         aria-hidden
       >
         {children}
-      </div>
+      </As>
     );
   }
 );

package/src/skeleton/skeleton.stories.tsx

@@ -102,7 +102,7 @@ export const NativeText = {
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
           voluptas sint dolore omnis quia consequatur beatae vero cum officia
           debitis. Quidem debitis omnis reprehenderit nobis rerum. Nulla,
-          magnam? Saepe, eveniet? Test
+          magnam? Saepe, eveniet?
         </Skeleton>
       </h1>
       <Skeleton>
@@ -110,9 +110,20 @@ export const NativeText = {
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
           voluptas sint dolore omnis quia consequatur beatae vero cum officia
           debitis. Quidem debitis omnis reprehenderit nobis rerum. Nulla,
-          magnam? Saepe, eveniet? Test
+          magnam? Saepe, eveniet?
         </p>
       </Skeleton>
     </div>
   ),
 };
+
+export const InlineText = {
+  render: () => (
+    <BodyLong>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
+      voluptas sint dolore <Skeleton as="span">omnis quia consequatur</Skeleton>{" "}
+      beatae vero cum officia debitis. Quidem debitis omnis reprehenderit nobis
+      rerum. Nulla, magnam? Saepe, eveniet?
+    </BodyLong>
+  ),
+};

package/src/table/stories/table-async.stories.tsx

@@ -14,7 +14,7 @@ export default {
 
 const rowsPerPage = 10;
 
-const queryString = (obj) =>
+const queryString = (obj: Record<string, number | string | undefined>) =>
   Object.keys(obj)
     .filter((key) => obj[key] !== undefined)
     .map((key) => key + "=" + obj[key])
@@ -22,11 +22,15 @@ const queryString = (obj) =>
 
 const updateData = async (url: string) => {
   const newUrl = new URL(`https://www.example.com/${url}`);
-  const comparator = (a, b, orderBy) => {
-    if (b[orderBy] < a[orderBy]) {
+  const comparator = (
+    a: Record<string, string | number | null>,
+    b: Record<string, string | number | null>,
+    orderBy: string
+  ) => {
+    if ((b[orderBy] ?? "") < (a[orderBy] ?? "")) {
       return -1;
     }
-    if (b[orderBy] > a[orderBy]) {
+    if ((b[orderBy] ?? "") > (a[orderBy] ?? "")) {
       return 1;
     }
     return 0;
@@ -74,7 +78,14 @@ export const Async = () => {
 
   const { results: people, count } = data;
 
-  const columns = [
+  type ColumnsType = {
+    key: keyof (typeof people)[0];
+    name: string;
+    width: number;
+    sortable?: boolean;
+    value?: (person: (typeof people)[0]) => string | undefined;
+  };
+  const columns: ColumnsType[] = [
     { key: "name", name: "Name", width: 154 },
     { key: "height", name: "Height", width: 108 },
     { key: "mass", name: "Mass", width: 95 },
@@ -105,7 +116,8 @@ export const Async = () => {
           sort={sort}
           onSortChange={(sortKey) =>
             setSort(
-              sort?.orderBy === sortKey && sort.direction === "descending"
+              !sortKey ||
+                (sort?.orderBy === sortKey && sort.direction === "descending")
                 ? undefined
                 : {
                     orderBy: sortKey,
@@ -144,7 +156,7 @@ export const Async = () => {
                       whiteSpace: "nowrap",
                       textOverflow: "ellipsis",
                     }}
-                    title={person[key]}
+                    title={person[key]?.toString()}
                     key={key}
                   >
                     {value ? value(person) : person[key]}