rk-designsystem 1.2.5 → 1.3.1

package/README.md

@@ -66,6 +66,11 @@ The design system includes the following components:
 npm install rk-designsystem
 ```
 
+> Since 1.4.0 the library declares `@digdir/designsystemet-react` and
+> `@digdir/designsystemet-css` as peer dependencies (`~1.13.2`) and requires
+> React `>=18.3.1`. npm 7+ installs peers automatically; with older
+> setups install them alongside the package.
+
 ### 2. Setup Layout with Font
 
 For Next.js projects, use `next/font` for optimal font loading:
@@ -216,6 +221,36 @@ The guide remains the main human-readable reference. The manifest is additive an
 
 This guide provides a set of standards and best practices for creating new components. Following these guidelines ensures that our component library remains consistent, accessible, and easy to maintain.
 
+## Migration notes (1.3.0 / 1.4.0)
+
+The library is pre-production, so breaking changes ship as minor versions
+until it has real production consumers. The breaking changes below landed in
+1.3.0 unless marked otherwise. (Note: 1.2.5 already contained the
+Button prop removals, mislabeled as a patch — 1.2.5 is deprecated.)
+
+- **Peer dependencies (1.4.0):** `@digdir/designsystemet-react` and
+  `@digdir/designsystemet-css` (`~1.13.2`) are peers; React `>=18.3.1 || ^19`.
+- **ESM-only (1.4.0):** the CommonJS/UMD entry is removed, so
+  `require('rk-designsystem')` now fails explicitly. It never actually worked:
+  the UMD file was parsed as ESM (the package is `"type": "module"`), and the
+  underlying Digdir library's own CJS entry is broken as well. Use `import`
+  (every bundler and modern Node setup).
+- **`import 'rk-designsystem/styles'` now delivers everything:** Digdir base,
+  the Røde Kors theme, the component CSS and Source Sans 3.
+- **Button:** `shape`/`pill` and `soft` props are removed — styling comes
+  from the design tokens.
+- **CrossCorner is removed:** use `GraphicElement` with `shape="angle"`.
+- **Footer:** `showCrossCorners` is renamed `showGraphicElements`.
+- **Alert:** `title` renders visibly (previously a native tooltip); pass
+  `titleLevel` (2–6) when it should be a real heading.
+- **DateInput:** invalid input is no longer silently rewritten (45 stays 45);
+  a built-in inline validation message appears on blur (`showValidationMessage`
+  to opt out), with `minDate`/`maxDate` (default 1900–2100) and an
+  `onValidationChange` callback. A label (or `aria-label`/`aria-labelledby`)
+  is required at type level.
+- **DatePicker:** days outside the month are disabled for all input methods;
+  the calendar is a real ARIA grid with arrow-key navigation.
+
 ## Getting Started (for Contributors)
 
 Follow these steps to get the local development environment running. All commands should be run from the root of the project.
@@ -231,6 +266,14 @@ pnpm build
 pnpm storybook
 ```
 
+## Testing
+
+Testing i dette repoet følger Norges Røde Kors' testpolicy og overordnede teststrategi. Se **[TESTING.md](./TESTING.md)** for testplanen: testnivåer, risikobasert prioritering, kriterier for «klar til produksjon», feilhåndtering og rapportering. Kort versjon:
+
+- Stories er testene: hver offentlig komponent har en assertion-bærende kontraktstory i ekte nettleser, og komponenter med brukeradferd har risikobaserte interaksjonstester. Automatisk WCAG-sjekk inngår i begge nivåer (brudd feiler bygget).
+- Full regresjon (`npm test`) kjøres på hver pull request og hver push til `main` — ingenting merges eller publiseres utestet.
+- Feil meldes som GitHub Issues med bug-malen; alvorlighetsgrad og reproduksjonssteg er påkrevd.
+
 ## Core Principles
 
 Every component we build should adhere to these core principles:
@@ -317,9 +360,9 @@ Your Storybook file is the official documentation. It must be clear and comprehe
 
 ## Using NAV/Aksel Icons
 
-This library is designed to work seamlessly with the official icon set from NAV/Aksel.
+This library is designed to work seamlessly with the official icon set from NAV/Aksel. Since 1.4.0, `@navikt/aksel-icons` ships as a regular dependency of `rk-designsystem` — no separate install needed. To use the icons directly in your own code:
 
-### Install
+### Install (only for direct use in your app)
 
 ```bash
 # npm

package/dist/assets/images/ChevronLeftIcon.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+const i = ({ title: e, ...l }) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 28 28",
+    fill: "none",
+    "aria-hidden": e ? void 0 : !0,
+    focusable: "false",
+    ...l,
+    children: [
+      e && /* @__PURE__ */ o("title", { children: e }),
+      /* @__PURE__ */ o(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M16.952 6.96459C16.6103 6.62289 16.0563 6.62289 15.7146 6.96459L9.2979 13.3813C8.95621 13.723 8.95621 14.277 9.2979 14.6187L15.7146 21.0354C16.0563 21.3771 16.6103 21.3771 16.952 21.0354C17.2937 20.6937 17.2937 20.1396 16.952 19.7979L11.1541 14L16.952 8.20203C17.2937 7.86032 17.2937 7.3063 16.952 6.96459Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+i.displayName = "ChevronLeftIcon";
+export {
+  i as ChevronLeftIcon
+};

package/dist/assets/images/ChevronRightIcon.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+const n = ({ title: e, ...i }) => /* @__PURE__ */ l(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 28 28",
+    fill: "none",
+    "aria-hidden": e ? void 0 : !0,
+    focusable: "false",
+    ...i,
+    children: [
+      e && /* @__PURE__ */ o("title", { children: e }),
+      /* @__PURE__ */ o(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M11.048 6.96459C11.3897 6.62289 11.9437 6.62289 12.2854 6.96459L18.7021 13.3813C19.0438 13.723 19.0438 14.277 18.7021 14.6187L12.2854 21.0354C11.9437 21.3771 11.3897 21.3771 11.048 21.0354C10.7063 20.6937 10.7063 20.1396 11.048 19.7979L16.8459 14L11.048 8.20203C10.7063 7.86032 10.7063 7.3063 11.048 6.96459Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+n.displayName = "ChevronRightIcon";
+export {
+  n as ChevronRightIcon
+};

package/dist/components/Alert/index.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Alert as d } from "@digdir/designsystemet-react";
+import { Heading as n } from "../Heading/index.js";
+const c = m((s, i) => {
+  const { title: e, titleLevel: r, children: l, ...a } = s;
+  return /* @__PURE__ */ o(d, { ref: i, ...a, children: [
+    e && (r ? /* @__PURE__ */ t(n, { level: r, "data-size": "2xs", style: { marginBottom: "var(--ds-size-1)" }, children: e }) : /* @__PURE__ */ t("p", { className: "ds-heading", "data-size": "2xs", style: { marginBottom: "var(--ds-size-1)" }, children: e })),
+    l
+  ] });
+});
+c.displayName = "Alert";
+export {
+  c as Alert
+};

package/dist/components/Avatar/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import { Avatar as m } from "@digdir/designsystemet-react";
+const e = o((r, a) => /* @__PURE__ */ t(m, { ref: a, ...r }));
+e.displayName = "Avatar";
+export {
+  e as Avatar
+};

package/dist/components/Badge/index.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { BadgePosition as r, Badge as t } from "@digdir/designsystemet-react";
+const s = i((o, e) => /* @__PURE__ */ a(t, { ref: e, ...o }));
+s.displayName = "Badge";
+const n = r;
+export {
+  s as Badge,
+  n as BadgePosition
+};

package/dist/components/Breadcrumbs/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { Breadcrumbs as r, BreadcrumbsItem as s, BreadcrumbsLink as e, BreadcrumbsList as c } from "@digdir/designsystemet-react";
+const a = r, t = c, u = s, b = e;
+export {
+  a as Breadcrumbs,
+  u as BreadcrumbsItem,
+  b as BreadcrumbsLink,
+  t as BreadcrumbsList
+};

package/dist/components/Button/index.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { Button as u } from "@digdir/designsystemet-react";
+import { forwardRef as m } from "react";
+const e = m(function({ variant: t, ...o }, r) {
+  return /* @__PURE__ */ n(u, { ref: r, variant: t, ...o });
+});
+e.displayName = "Button";
+export {
+  e as Button
+};

package/dist/components/Card/index.js

@@ -0,0 +1,8 @@
+"use client";
+import { Card as a, CardBlock as r } from "@digdir/designsystemet-react";
+const d = a, C = r;
+d.displayName = "Card";
+export {
+  d as Card,
+  C as CardBlock
+};

package/dist/components/Carousel/index.js

@@ -0,0 +1,379 @@
+"use client";
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { useEffect as p, useState as d, useRef as J, useCallback as h, useMemo as Q } from "react";
+import Y from "embla-carousel-react";
+import a from "./styles.module.css.js";
+import { ChevronLeftIcon as Z, ChevronRightIcon as V, PlayIcon as ee, PauseIcon as te } from "@navikt/aksel-icons";
+import { Button as B } from "../Button/index.js";
+import { Spinner as re } from "../SpinnerLoader/index.js";
+import { useLanguageOptional as oe } from "../../context/LanguageContext.js";
+const ae = ({
+  images: e,
+  autoPlay: l = !1,
+  autoDelay: b = 5,
+  showArrows: v = !0,
+  showDots: x = !0,
+  variant: P,
+  slidesPerView: $ = 1,
+  slideSpacing: y = 16,
+  cornerRadius: g = 0,
+  "data-color": A,
+  "data-size": F
+}) => {
+  const { t: s } = oe();
+  p(() => {
+    const r = "rk-carousel-inline-styles";
+    if (typeof document > "u" || document.getElementById(r)) return;
+    const o = ie(a), i = document.createElement("style");
+    i.id = r, i.textContent = o, document.head.appendChild(i);
+  }, []);
+  const R = {
+    loop: !0,
+    align: "start",
+    containScroll: "trimSnaps",
+    slidesToScroll: 1
+  }, [T, t] = Y(R), [M, O] = d(0), [_, w] = d([]), [z, I] = d([]), k = J([]), D = (e ?? []).map((r) => r.src).join(`
+`);
+  p(() => {
+    I(
+      (e ?? []).map((r, o) => {
+        const i = k.current[o];
+        return !!(i && i.complete && i.naturalWidth > 0);
+      })
+    );
+  }, [D]);
+  const C = h((r) => {
+    I((o) => {
+      if (o[r]) return o;
+      const i = [...o];
+      return i[r] = !0, i;
+    });
+  }, []), N = Q(() => b * 1e3, [b]), c = h(() => {
+    t && O(t.selectedScrollSnap());
+  }, [t]), H = h((r) => t && t.scrollTo(r), [t]), K = h(() => t && t.scrollPrev(), [t]), U = h(() => t && t.scrollNext(), [t]);
+  p(() => {
+    if (t)
+      return t.on("select", c), t.on("reInit", c), w(t.scrollSnapList()), () => {
+        t.off("select", c), t.off("reInit", c);
+      };
+  }, [t, c]), p(() => {
+    t && (t.reInit(), w(t.scrollSnapList()));
+  }, [t, e, $, y]);
+  const [f, W] = d(!1), [X, S] = d(!1), [q, L] = d(!1), j = l && !f && !X && !q;
+  p(() => {
+    if (!j || !t || !e || e.length <= 1) return;
+    const r = window.setInterval(() => {
+      t.canScrollNext() && t.scrollNext();
+    }, N);
+    return () => {
+      window.clearInterval(r);
+    };
+  }, [j, N, t, e]);
+  const E = Math.max(1, $), G = `${100 / E}%`, m = y / 2;
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: a.carouselContainer,
+      "data-color": A,
+      "data-size": F,
+      "data-variant": P,
+      onMouseEnter: l ? () => S(!0) : void 0,
+      onMouseLeave: l ? () => S(!1) : void 0,
+      onFocus: l ? () => L(!0) : void 0,
+      onBlur: l ? (r) => {
+        r.currentTarget.contains(r.relatedTarget) || L(!1);
+      } : void 0,
+      children: [
+        /* @__PURE__ */ n("div", { className: a.viewport, ref: T, children: /* @__PURE__ */ n(
+          "div",
+          {
+            className: a.slides,
+            style: {
+              marginLeft: `-${m}px`,
+              marginRight: `-${m}px`
+            },
+            children: e && e.length > 0 ? e.map((r, o) => /* @__PURE__ */ n(
+              "div",
+              {
+                className: a.slide,
+                style: {
+                  flex: `0 0 ${G}`,
+                  paddingLeft: `${m}px`,
+                  paddingRight: `${m}px`,
+                  borderRadius: g > 0 ? `${g}px` : void 0,
+                  overflow: "hidden"
+                  // Ensure radius clips content
+                },
+                children: /* @__PURE__ */ u("div", { className: a.slideInner, style: { borderRadius: `${g}px`, overflow: "hidden", position: "relative", width: "100%", height: "100%" }, children: [
+                  !z[o] && /* @__PURE__ */ n("div", { className: a.loaderOverlay, children: /* @__PURE__ */ n(re, { "aria-label": s("carousel.loading") }) }),
+                  /* @__PURE__ */ n(
+                    "img",
+                    {
+                      ref: (i) => {
+                        k.current[o] = i;
+                      },
+                      className: `${a.image} ${z[o] ? a.loaded : a.loadingImage}`,
+                      src: r.src,
+                      alt: r.alt,
+                      loading: o < E ? "eager" : "lazy",
+                      crossOrigin: "anonymous",
+                      onLoad: () => C(o),
+                      onError: (i) => {
+                        i.target.style.display = "none", C(o);
+                      }
+                    }
+                  )
+                ] })
+              },
+              `image-${o}-${r.src}`
+            )) : /* @__PURE__ */ n("div", { className: a.slide, style: { flex: "0 0 100%" }, children: /* @__PURE__ */ n("div", { className: a.empty, children: "Ingen bilder" }) })
+          }
+        ) }),
+        (v || x && e && e.length > 1) && /* @__PURE__ */ u("div", { className: a.controls, "aria-hidden": "false", children: [
+          v && /* @__PURE__ */ u("div", { className: a.arrows, children: [
+            /* @__PURE__ */ n(
+              B,
+              {
+                variant: "primary",
+                icon: !0,
+                "aria-label": s("carousel.previousImage"),
+                onClick: K,
+                disabled: !e || e.length <= 1,
+                children: /* @__PURE__ */ n(Z, { "aria-hidden": !0 })
+              }
+            ),
+            /* @__PURE__ */ n(
+              B,
+              {
+                variant: "primary",
+                icon: !0,
+                "aria-label": s("carousel.nextImage"),
+                onClick: U,
+                disabled: !e || e.length <= 1,
+                children: /* @__PURE__ */ n(V, { "aria-hidden": !0 })
+              }
+            )
+          ] }),
+          x && e && e.length > 1 && /* @__PURE__ */ u("div", { className: a.dots, role: "group", "aria-label": s("carousel.imagePosition"), children: [
+            l && /* @__PURE__ */ n(
+              "button",
+              {
+                type: "button",
+                className: a.playPause,
+                onClick: () => W((r) => !r),
+                "aria-label": s(f ? "carousel.resumeAutoplay" : "carousel.pauseAutoplay"),
+                "aria-pressed": f,
+                children: f ? /* @__PURE__ */ n(ee, { "aria-hidden": !0 }) : /* @__PURE__ */ n(te, { "aria-hidden": !0 })
+              }
+            ),
+            _.map((r, o) => {
+              const i = o === M;
+              return /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  className: `${a.dot} ${i ? a.dotActive : ""}`,
+                  onClick: () => H(o),
+                  "aria-label": `${s("carousel.goToImage")} ${o + 1}`,
+                  "aria-current": i || void 0
+                },
+                `dot-${o}`
+              );
+            })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+ae.displayName = "Carousel";
+function ie(e) {
+  return `
+.${e.carouselContainer} {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  background-color: var(--ds-color-background-default, #fff);
+  color: var(--ds-color-text-default, #2b2b2b);
+  border-radius: var(--ds-border-radius-md, 4px);
+  box-sizing: border-box;
+  max-width: 100%;
+}
+.${e.viewport} {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+.${e.slides} {
+  display: flex;
+  height: 100%;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+.${e.slide} {
+  position: relative;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.${e.slideInner} {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: var(--ds-color-neutral-surface-tinted, #f5f5f5);
+  overflow: hidden;
+}
+.${e.loaderOverlay} {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.05);
+  z-index: 2;
+}
+.${e.image} {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  z-index: 1;
+}
+.${e.image}.${e.loaded} {
+  opacity: 1;
+}
+.${e.loading} {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-size-2, 8px);
+  color: var(--ds-color-text-subtle, #5d5d5d);
+  font-size: var(--ds-font-size-2, 14px);
+}
+.${e.empty} {
+  color: var(--ds-color-text-subtle, #5d5d5d);
+  font-size: var(--ds-font-size-2, 14px);
+  text-align: center;
+}
+.${e.controls} {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 10;
+}
+.${e.arrows} {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 var(--ds-size-4, 16px);
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+.${e.dots} {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: var(--ds-size-3, 12px);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-size-2, 8px);
+  pointer-events: auto;
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(4px);
+  padding: var(--ds-size-1, 4px) var(--ds-size-2, 8px);
+  border-radius: 999px;
+}
+.${e.dot} {
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  border: var(--ds-border-width-default, 1px) solid var(--ds-color-border-subtle, #d6d6d6);
+  background-color: rgba(255, 255, 255, 0.6);
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.${e.playPause} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-size-6, 24px);
+  height: var(--ds-size-6, 24px);
+  border-radius: 999px;
+  border: var(--ds-border-width-default, 1px) solid var(--ds-color-border-subtle, #d6d6d6);
+  background-color: rgba(255, 255, 255, 0.85);
+  color: var(--ds-color-neutral-text-default, #2b2b2b);
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+.${e.dotActive} {
+  background-color: var(--ds-color-primary-color-red-base-default, #D52B1E);
+  border-color: var(--ds-color-primary-color-red-base-default, #D52B1E);
+  transform: scale(1.1);
+}
+@media (max-width: 640px) {
+  .${e.carouselContainer} {
+    height: auto;
+    min-height: 150px;
+    aspect-ratio: 16 / 9;
+  }
+  .${e.viewport} {
+    aspect-ratio: 16 / 9;
+    height: auto;
+  }
+  .${e.slides} {
+    height: auto;
+    min-height: 150px;
+  }
+  .${e.slide} {
+    height: auto;
+    min-height: 150px;
+  }
+  .${e.slideInner} {
+    aspect-ratio: 16 / 9;
+    height: auto;
+  }
+  .${e.arrows} {
+    padding: 0 var(--ds-size-2, 8px);
+  }
+  .${e.dots} {
+    bottom: var(--ds-size-2, 8px);
+    gap: var(--ds-size-1, 4px);
+  }
+  .${e.dot} {
+    width: 10px;
+    height: 10px;
+  }
+}
+@media (max-width: 400px) {
+  .${e.carouselContainer} {
+    min-height: 120px;
+  }
+  .${e.arrows} {
+    padding: 0 var(--ds-size-1, 4px);
+  }
+  .${e.arrows} button {
+    transform: scale(0.85);
+  }
+}
+`;
+}
+export {
+  ae as Carousel
+};

package/dist/components/Carousel/styles.module.css.js

@@ -0,0 +1,38 @@
+"use client";
+const o = "_carouselContainer_oit30_1", t = "_viewport_oit30_14", s = "_slides_oit30_20", _ = "_slide_oit30_20", e = "_slideInner_oit30_40", i = "_loaderOverlay_oit30_48", n = "_image_oit30_58", l = "_loaded_oit30_69", a = "_loading_oit30_73", d = "_empty_oit30_81", r = "_controls_oit30_87", c = "_arrows_oit30_97", p = "_dots_oit30_107", y = "_playPause_oit30_122", v = "_dot_oit30_107", u = "_dotActive_oit30_153", g = {
+  carouselContainer: o,
+  viewport: t,
+  slides: s,
+  slide: _,
+  slideInner: e,
+  loaderOverlay: i,
+  image: n,
+  loaded: l,
+  loading: a,
+  empty: d,
+  controls: r,
+  arrows: c,
+  dots: p,
+  playPause: y,
+  dot: v,
+  dotActive: u
+};
+export {
+  c as arrows,
+  o as carouselContainer,
+  r as controls,
+  g as default,
+  v as dot,
+  u as dotActive,
+  p as dots,
+  d as empty,
+  n as image,
+  l as loaded,
+  i as loaderOverlay,
+  a as loading,
+  y as playPause,
+  _ as slide,
+  e as slideInner,
+  s as slides,
+  t as viewport
+};

package/dist/components/Checkbox/index.js

@@ -0,0 +1,10 @@
+"use client";
+import { Checkbox as e, useCheckboxGroup as o, Fieldset as s } from "@digdir/designsystemet-react";
+const c = e, t = s, x = o;
+c.displayName = "Checkbox";
+t.displayName = "Fieldset";
+export {
+  c as Checkbox,
+  t as Fieldset,
+  x as useCheckboxGroup
+};

package/dist/components/Chip/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { Chip as i } from "@digdir/designsystemet-react";
+const o = i;
+export {
+  o as Chip
+};