Version Packages (#2246 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🎨 Skeleton as-prop (#2239 )
2026-10-13 01:02:02 +00:00 · 2023-09-06 11:11:51 +02:00 · 2023-09-06 11:03:28 +02:00 · 2023-09-05 12:35:31 +02:00 · 2023-09-04 17:06:34 +02:00 · 2023-09-04 17:04:11 +02:00
81 changed files with 885 additions and 731 deletions
@@ -15,6 +15,10 @@ jobs:
  visual_regression_test:
    name: "visual regression test (chromatic)"
    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+      contents: write
    steps:
      - uses: actions/checkout@v3
        with:
@@ -54,7 +58,7 @@ jobs:

      - name: replace storybook url
        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
-        uses: frabert/replace-string-action@v2.0
+        uses: frabert/replace-string-action@v2
        id: storybook_url
        with:
          pattern: "(iframe.html)"
@@ -70,7 +74,7 @@ jobs:

      - name: Find Comment
        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
-        uses: peter-evans/find-comment@v1
+        uses: peter-evans/find-comment@v2
        id: fc
        with:
          issue-number: ${{ github.event.pull_request.number }}
@@ -79,7 +83,7 @@ jobs:

      - name: Create or update comment
        if: steps.chromatic_tests.outcome == 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
-        uses: peter-evans/create-or-update-comment@v1
+        uses: peter-evans/create-or-update-comment@v3
        with:
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
@@ -91,7 +95,7 @@ jobs:

      - name: Create or update failed comment
        if: steps.chromatic_tests.outcome != 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
-        uses: peter-evans/create-or-update-comment@v1
+        uses: peter-evans/create-or-update-comment@v3
        with:
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
@@ -1,5 +1,7 @@
 # @navikt/aksel-icons

+## 5.3.2
+
 ## 5.3.1

 ## 5.3.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "5.3.1",
+  "version": "5.3.2",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.build.json",
  "compilerOptions": {
    "outDir": "./dist/react/cjs",
    "module": "commonjs",
@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint

+## 5.3.2
+
 ## 5.3.1

 ## 5.3.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "5.3.1",
+  "version": "5.3.2",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^5.3.1",
-    "@navikt/ds-tokens": "^5.3.1",
+    "@navikt/ds-css": "^5.3.2",
+    "@navikt/ds-tokens": "^5.3.2",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,5 +1,12 @@
 # @navikt/aksel

+## 5.3.2
+
+### Patch Changes
+
+- Updated dependencies [[`4e0599342`](https://github.com/navikt/aksel/commit/4e0599342761f2a0fe2177c370f4bcf4fab7ef8a)]:
+  - @navikt/ds-css@5.3.2
+
 ## 5.3.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "5.3.1",
+  "version": "5.3.2",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "5.3.1",
+    "@navikt/ds-css": "5.3.2",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,11 @@
 # @navikt/ds-css

+## 5.3.2
+
+### Patch Changes
+
+- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
+
 ## 5.3.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.3.1",
+  "version": "5.3.2",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.3.1",
+    "@navikt/ds-tokens": "^5.3.2",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,5 +1,4 @@
 .navds-skeleton {
-  display: block;
  background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
  height: 1.3em;
  animation: akselSkeletonAnimation 0.8s linear infinite alternate;
@@ -1,5 +1,14 @@
 # @navikt/ds-react

+## 5.3.2
+
+### Patch Changes
+
+- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@5.3.2
+
 ## 5.3.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.3.1",
+  "version": "5.3.2",
  "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.2",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -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 = {
@@ -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;
 };
@@ -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;
@@ -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 }) => {
@@ -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 (
@@ -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
@@ -69,4 +69,5 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
  }
 );

+ListItem.displayName = "List.Item";
 export default ListItem;
@@ -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;
+  }
+}
@@ -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>
    );
  }
 );
@@ -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>
+  ),
+};
@@ -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]}
@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./cjs",
+    "module": "commonjs",
+    "noImplicitAny": false
+  },
+  "include": ["./src"]
+}
@@ -1,5 +1,5 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "./tsconfig.build.json",
  "compilerOptions": {
    "outDir": "./esm",
    "module": "esnext",
@@ -1,9 +1,7 @@
 {
  "extends": "../../../tsconfig.json",
  "compilerOptions": {
-    "outDir": "./cjs",
-    "module": "commonjs",
-    "noImplicitAny": false
-  },
-  "include": ["./src"]
+    "noImplicitAny": false,
+    "resolveJsonModule": true
+  }
 }
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 5.3.2
+
 ## 5.3.1

 ## 5.3.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "5.3.1",
+  "version": "5.3.2",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -22,7 +22,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.3.1",
+    "@navikt/ds-tokens": "^5.3.2",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,7 @@
 # @navikt/ds-tokens

+## 5.3.2
+
 ## 5.3.1

 ## 5.3.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.3.1",
+  "version": "5.3.2",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,15 @@
 # Changelog

+## 5.3.2
+
+### @navikt/ds-react
+
+- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
+
+### @navikt/ds-css
+
+- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
+
 ## 5.3.1

 ### @navikt/ds-react
@@ -15,11 +15,11 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^5.3.1",
-    "@navikt/ds-css": "^5.3.1",
-    "@navikt/ds-react": "^5.3.1",
-    "@navikt/ds-tailwind": "^5.3.1",
-    "@navikt/ds-tokens": "^5.3.1"
+    "@navikt/aksel-icons": "^5.3.2",
+    "@navikt/ds-css": "^5.3.2",
+    "@navikt/ds-react": "^5.3.2",
+    "@navikt/ds-tailwind": "^5.3.2",
+    "@navikt/ds-tokens": "^5.3.2"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -35,10 +35,9 @@
    "@sanity/color-input": "^3.1.0",
    "@sanity/icons": "2.4.1",
    "@sanity/image-url": "1.0.2",
-    "@sanity/preview-kit": "^2.3.0",
    "@sanity/table": "1.0.1",
-    "@sanity/ui": "^1.7.4",
-    "@sanity/vision": "3.15.1",
+    "@sanity/ui": "^1.7.11",
+    "@sanity/vision": "3.16.2",
    "@svgr/webpack": "^5.5.0",
    "boring-avatars": "1.10.1",
    "clsx": "^1.2.1",
@@ -48,16 +47,16 @@
    "lodash": "^4.17.21",
    "next": "^13.2.1",
    "next-logger": "^3.0.2",
-    "next-sanity": "^5.2.7",
+    "next-sanity": "^5.4.6",
    "pino": "^8.14.1",
    "prism-react-renderer": "^1.3.0",
    "prismjs": "^1.27.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-responsive-masonry": "^2.1.7",
-    "sanity": "3.15.1",
+    "sanity": "3.16.2",
    "sanity-plugin-asset-source-unsplash": "^1.1.0",
-    "sanity-plugin-media": "^2.0.5",
+    "sanity-plugin-media": "^2.2.2",
    "sharp": "0.31.3",
    "sitemap": "^7.0.0",
    "styled-components": "^5.2",
@@ -71,8 +70,8 @@
    "@next/bundle-analyzer": "^12.1.0",
    "@next/eslint-plugin-next": "^12.2.0",
    "@playwright/test": "1.35.1",
-    "@sanity/block-tools": "^3.15.1",
-    "@sanity/schema": "^3.15.1",
+    "@sanity/block-tools": "^3.16.2",
+    "@sanity/schema": "^3.16.2",
    "@testing-library/jest-dom": "^5.16.0",
    "@testing-library/react": "^13.3.0",
    "@types/jest": "^29.0.0",
@@ -25,7 +25,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -9,18 +9,18 @@ const Example = () => {
    <VStack gap="4">
      <div>
        <Descriptor>Default</Descriptor>
-        <BodyLong color="default">{lorem}</BodyLong>
+        <BodyLong textColor="default">{lorem}</BodyLong>
      </div>
      <Divider />
      <div>
        <Descriptor>Subtle</Descriptor>
-        <BodyLong color="subtle">{lorem}</BodyLong>
+        <BodyLong textColor="subtle">{lorem}</BodyLong>
      </div>
    </VStack>
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -26,7 +26,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -22,7 +22,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -5,7 +5,7 @@ const Example = () => {
  return <BodyLong as="span">Dette er nå en span!</BodyLong>;
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -26,7 +26,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -17,7 +17,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -13,7 +13,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -17,7 +17,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -24,7 +24,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -8,18 +8,18 @@ const Example = () => {
    <VStack gap="4">
      <div>
        <Descriptor>Default</Descriptor>
-        <BodyShort color="default">{lorem}</BodyShort>
+        <BodyShort textColor="default">{lorem}</BodyShort>
      </div>
      <Divider />
      <div>
        <Descriptor>Subtle</Descriptor>
-        <BodyShort color="subtle">{lorem}</BodyShort>
+        <BodyShort textColor="subtle">{lorem}</BodyShort>
      </div>
    </VStack>
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -25,7 +25,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -21,7 +21,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -5,7 +5,7 @@ const Example = () => {
  return <BodyShort as="span">Dette er nå en span!</BodyShort>;
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -25,7 +25,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -16,7 +16,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -12,7 +12,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -16,7 +16,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -24,7 +24,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -8,18 +8,18 @@ const Example = () => {
    <VStack gap="4">
      <div>
        <Descriptor>Default</Descriptor>
-        <Detail color="default">{lorem}</Detail>
+        <Detail textColor="default">{lorem}</Detail>
      </div>
      <Divider />
      <div>
        <Descriptor>Subtle</Descriptor>
-        <Detail color="subtle">{lorem}</Detail>
+        <Detail textColor="subtle">{lorem}</Detail>
      </div>
    </VStack>
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -21,7 +21,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -5,7 +5,7 @@ const Example = () => {
  return <Detail as="span">Dette er nå en span!</Detail>;
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -12,7 +12,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -7,7 +7,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -9,7 +9,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -30,7 +30,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -8,14 +8,14 @@ const Example = () => {
    <VStack gap="4">
      <div>
        <Descriptor>Default</Descriptor>
-        <Heading color="default" size="medium">
+        <Heading textColor="default" size="medium">
          {lorem}
        </Heading>
      </div>
      <Divider />
      <div>
        <Descriptor>Subtle</Descriptor>
-        <Heading color="subtle" size="medium">
+        <Heading textColor="subtle" size="medium">
          {lorem}
        </Heading>
      </div>
@@ -23,7 +23,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -16,7 +16,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -51,7 +51,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -16,7 +16,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -9,7 +9,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -16,7 +16,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -16,7 +16,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -16,7 +16,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -20,7 +20,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -8,7 +8,7 @@ const Example = () => {
  return <Label>{lorem}</Label>;
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -5,7 +5,7 @@ const Example = () => {
  return <Label as="span">Dette er nå en span!</Label>;
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -8,7 +8,7 @@ const Example = () => {
  return <Label size="small">{lorem}</Label>;
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -13,7 +13,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -17,7 +17,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -33,7 +33,10 @@ export const landingsider = [

 export const allArticleDocsRef = allArticleDocuments.map((x) => ({ type: x }));

-export const komponentKategorier = [{ title: "Core", value: "core" }];
+export const komponentKategorier = [
+  { title: "Primitives", value: "primitives" },
+  { title: "Core", value: "core" },
+];

 export const grunnleggendeKategorier = [
  { title: "Introduksjon", value: "introduksjon" },
@@ -26,14 +26,16 @@ const propList = (
  name: string
 ) =>
  src.map((prop) => {
+    const parseName = (name) => {
+      return `${name.toLowerCase().replaceAll(".", "-")}_${name}_ds_props`;
+    };
+
    let dupe = false;
-    if (ids.includes(`${prop?.displayName?.toLowerCase()}_${name}_ds_props`)) {
-      console.error(
-        `Found duplicate id: ${`${prop.displayName.toLowerCase()}_${name}_ds_props`}`
-      );
+    if (ids.includes(parseName(prop.displayName))) {
+      console.error(`Found duplicate id: ${parseName(prop.displayName)}`);
      dupe = true;
    }
-    const id = `${prop.displayName.toLowerCase()}_${name}_ds_props`;
+    const id = parseName(prop.displayName);
    ids.push(id);

    return {
@@ -10,8 +10,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@navikt/ds-css": "5.3.1",
-    "@navikt/ds-react": "5.3.1",
+    "@navikt/ds-css": "5.3.2",
+    "@navikt/ds-react": "5.3.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
@@ -21,7 +21,7 @@ const createPackageJsonsWithESMPointers = async () => {
        "package.json"
      );

-      const depth = (packageJsonPath.match(/\//g) || []).length;
+      const depth = packageJsonPath.split(path.sep).length - 1;
      const esmDir = `../`.repeat(depth) + "esm";

      const packageJson = {
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": [
+    "**/stories",
+    "**/*.stories.*",
+    "**/*.test.*",
+    "**/*.e2e.*"
+  ]
+}
@@ -7,12 +7,5 @@
    "moduleResolution": "node",
    "incremental": true,
    "skipLibCheck": true
-  },
-  "exclude": [
-    "**/stories",
-    "**/*.stories.*",
-    "**/*.test.ts",
-    "**/*.test.tsx",
-    "**/*.e2e.ts"
-  ]
+  }
 }
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	9f575b76b8	Version Packages (#2246 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-09-06 11:11:51 +02:00
Ken	4e05993427	🎨 Skeleton as-prop (#2239 )	2023-09-06 11:03:28 +02:00
Halvor Haugan	85a7521197	🐛 fiks createPackageJsonsWithESMPointers i Windows (#2237 )	2023-09-05 12:35:31 +02:00
Halvor HauganandKen	f635be70d0	🏷️ Forbedret typesjekking i stories (#2234 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-09-04 17:06:34 +02:00
Ken	b675a5b9ba	🛂 Permissions for chromatic-workflow (#2235 )	2023-09-04 17:04:11 +02:00
Ken	cc842113c3	✨ Primitives-kategori	2023-09-04 12:09:35 +02:00
Ken	f36d4c46d7	🐛 Fikset Typo-eksempler, dupliserte prop-entries	2023-09-03 14:22:40 +02:00
Ken	d7bd84f6ee	⬆️ Oppdatert sanity (#2228 )	2023-09-03 13:18:38 +02:00