@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/assets/logo.js

@@ -1,85 +1,2 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-const Logo = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    id: "bbbad536-f254-4715-8d5c-86b6d7022b08",
-    "data-name": "Logo",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 154 70",
-    children: [
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M73.13,1.4a16,16,0,0,0-9.31.67,14.12,14.12,0,0,0-4.63,3,13.42,13.42,0,0,0-3,4.55,15.21,15.21,0,0,0-1.07,5.75,16,16,0,0,0,1.17,6.33,12.73,12.73,0,0,0,3.22,4.56A14,14,0,0,0,64.13,29a16.32,16.32,0,0,0,5.52.93A14.79,14.79,0,0,0,72,29.76a16.17,16.17,0,0,0,2.24-.53,14,14,0,0,0,2.17-.87A2.11,2.11,0,0,0,77.6,26.8,2.42,2.42,0,0,0,77,24.72a2.12,2.12,0,0,0-1.4-.85,2.89,2.89,0,0,0-1.68.28,7.28,7.28,0,0,1-2.1.73,11.59,11.59,0,0,1-2.19.2A11.22,11.22,0,0,1,66,24.5a7.87,7.87,0,0,1-3-1.8,8.49,8.49,0,0,1-2-3,11.83,11.83,0,0,1-.71-4.29A11.27,11.27,0,0,1,61,11.52a8.48,8.48,0,0,1,1.84-3,8.12,8.12,0,0,1,2.93-2A11.14,11.14,0,0,1,71.9,6.1a10.21,10.21,0,0,1,2,.69,3.1,3.1,0,0,0,1.68.32A1.83,1.83,0,0,0,77,6.3a2.47,2.47,0,0,0,.58-2.06,2.14,2.14,0,0,0-1.23-1.66,14.22,14.22,0,0,0-3.2-1.18",
-          fill: "var(--color-primary)"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M51.82,20.92A9.6,9.6,0,0,1,51,25.29a6.71,6.71,0,0,1-2.29,2.63,8.77,8.77,0,0,1-3,1.27,15,15,0,0,1-3.12.35H32.43A2.43,2.43,0,0,1,30,27.07V3.67A2.43,2.43,0,0,1,32.43,1.2h10.2q3.88,0,5.79,1.82a7.12,7.12,0,0,1,1.9,5.39,6,6,0,0,1-.93,3.34,5.93,5.93,0,0,1-2.45,2.08,11,11,0,0,1,1.38.67,7.19,7.19,0,0,1,2.51,2.43A7.33,7.33,0,0,1,51.82,20.92Zm-6-2.64a3.17,3.17,0,0,0-1.74-1,10,10,0,0,0-1.86-.2h-7v7.81h7.29a4.25,4.25,0,0,0,3-1,3.84,3.84,0,0,0,1.09-3A3.88,3.88,0,0,0,45.83,18.28ZM44.19,6.77A3.25,3.25,0,0,0,41.9,6H35.22v6.31H42a3.18,3.18,0,0,0,2.11-.77,2.71,2.71,0,0,0,.93-2.22A3.26,3.26,0,0,0,44.19,6.77Z",
-          fill: "var(--color-primary)"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M3.47,1.2A2.43,2.43,0,0,0,1,3.67v23.4a2.43,2.43,0,0,0,2.47,2.47h9.67a11.16,11.16,0,0,0,6.62-1.91,11.93,11.93,0,0,0,4.11-5.12,17.57,17.57,0,0,0,1.42-7.14,18.88,18.88,0,0,0-.79-5.49,13.75,13.75,0,0,0-2.35-4.53,10.65,10.65,0,0,0-3.83-3,11.74,11.74,0,0,0-5.18-1.1ZM20,15.37a14.37,14.37,0,0,1-.75,4.72,7.58,7.58,0,0,1-2.37,3.48,6.44,6.44,0,0,1-4.17,1.31H6.06v-19h6.68a6.34,6.34,0,0,1,5.54,2.85,9.2,9.2,0,0,1,1.32,3A15.15,15.15,0,0,1,20,15.37Z",
-          fill: "var(--color-primary)"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M151.61,64.53a2.45,2.45,0,0,0-1.76-.67H139.29V42.73a2.32,2.32,0,0,0-.75-1.76,2.44,2.44,0,0,0-1.72-.71A2.55,2.55,0,0,0,135,41a2.34,2.34,0,0,0-.73,1.76v23.4a2.43,2.43,0,0,0,2.47,2.47h13.15a2.49,2.49,0,0,0,1.76-.67,2.2,2.2,0,0,0,.71-1.68A2.23,2.23,0,0,0,151.61,64.53Z",
-          fill: "var(--color-primary)"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M129.85,65.44,119.9,41.72a2.51,2.51,0,0,0-.91-1.2,2.42,2.42,0,0,0-1.36-.42,2.14,2.14,0,0,0-1.44.36,2.72,2.72,0,0,0-1,1.26l-10.08,24.2a2.73,2.73,0,0,0-.12.77,2.2,2.2,0,0,0,.53,1.5,2,2,0,0,0,1.62.61,2.09,2.09,0,0,0,1.27-.43,2.49,2.49,0,0,0,.87-1.19l2.1-4.94h12.07l2.1,4.9a2.9,2.9,0,0,0,.91,1.21,2.11,2.11,0,0,0,1.32.45,2.32,2.32,0,0,0,2.27-2.39A2.62,2.62,0,0,0,129.85,65.44Zm-16.48-7.85,4-9.48,4.06,9.48Z",
-          fill: "var(--color-primary)"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M107,40.91a2.52,2.52,0,0,0-1.76-.65h-18a2.55,2.55,0,0,0-1.76.63,2.15,2.15,0,0,0-.71,1.68,2.2,2.2,0,0,0,.71,1.7,2.52,2.52,0,0,0,1.76.65h6.35V66.13a2.39,2.39,0,0,0,.73,1.76,2.58,2.58,0,0,0,1.86.71,2.7,2.7,0,0,0,1.93-.71,2.34,2.34,0,0,0,.75-1.76V44.92h6.35a2.55,2.55,0,0,0,1.76-.63,2.15,2.15,0,0,0,.71-1.68A2.2,2.2,0,0,0,107,40.91Z",
-          fill: "var(--color-primary)"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M80.84,41a2.26,2.26,0,0,0-1.72-.71,3.74,3.74,0,0,0-1.74.36l-6.11,3.65A2.29,2.29,0,0,0,70,46.37a2.48,2.48,0,0,0,.68,1.68,2.2,2.2,0,0,0,1.74.79,2.52,2.52,0,0,0,1.3-.36L76.25,47V66.13A2.35,2.35,0,0,0,77,67.89a2.55,2.55,0,0,0,1.86.71,2.69,2.69,0,0,0,1.92-.71,2.34,2.34,0,0,0,.75-1.76V42.73A2.45,2.45,0,0,0,80.84,41Z",
-          fill: "var(--color-primary)"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M67.3,54a2.34,2.34,0,0,0-1.74-.71H58.92a2.44,2.44,0,0,0-1.76.69,2.51,2.51,0,0,0,0,3.48,2.44,2.44,0,0,0,1.76.69h3.81V63.4a11.67,11.67,0,0,1-2,.5,16.72,16.72,0,0,1-2.68.24,9.1,9.1,0,0,1-4.79-1.31,9.81,9.81,0,0,1-4.72-8.4,9.59,9.59,0,0,1,1.28-4.88A9.75,9.75,0,0,1,53.24,46,9,9,0,0,1,58,44.71a10.82,10.82,0,0,1,2.39.25,11.47,11.47,0,0,1,2.15.68,3.18,3.18,0,0,0,.67.25,3.05,3.05,0,0,0,.66.08,2.07,2.07,0,0,0,1.66-.77,2.63,2.63,0,0,0,.65-1.74,2.27,2.27,0,0,0-1.21-2,13.36,13.36,0,0,0-3.28-1.21,16.63,16.63,0,0,0-3.69-.4A14.45,14.45,0,0,0,52.29,41a14.63,14.63,0,0,0-4.7,3.14,14.82,14.82,0,0,0-3.18,4.63,14.53,14.53,0,0,0,0,11.33,14.89,14.89,0,0,0,7.88,7.78A14.62,14.62,0,0,0,58,69a15.78,15.78,0,0,0,4.64-.67,17.19,17.19,0,0,0,4.07-1.8,3.49,3.49,0,0,0,.87-.85A2.23,2.23,0,0,0,68,64.35V55.76A2.44,2.44,0,0,0,67.3,54Z",
-          fill: "var(--color-primary)"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M37.94,41a2.28,2.28,0,0,0-1.72-.71,3.69,3.69,0,0,0-1.74.36l-6.12,3.65a2.31,2.31,0,0,0-1.25,2.1,2.49,2.49,0,0,0,.69,1.68,2.2,2.2,0,0,0,1.74.79,2.46,2.46,0,0,0,1.29-.36L33.34,47V66.13a2.35,2.35,0,0,0,.73,1.76,2.58,2.58,0,0,0,1.86.71,2.7,2.7,0,0,0,1.93-.71,2.36,2.36,0,0,0,.74-1.76V42.73A2.48,2.48,0,0,0,37.94,41Z",
-          fill: "var(--color-primary)"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M3.47,40.26A2.43,2.43,0,0,0,1,42.73v23.4A2.43,2.43,0,0,0,3.47,68.6h9.67a11.16,11.16,0,0,0,6.62-1.91,12,12,0,0,0,4.11-5.12,17.57,17.57,0,0,0,1.42-7.14,18.83,18.83,0,0,0-.79-5.49,13.75,13.75,0,0,0-2.35-4.53,10.78,10.78,0,0,0-3.83-3.06,11.74,11.74,0,0,0-5.18-1.09ZM20,54.43a14.27,14.27,0,0,1-.75,4.71,7.48,7.48,0,0,1-2.37,3.48,6.39,6.39,0,0,1-4.17,1.32H6.06v-19h6.68a6.65,6.65,0,0,1,3.28.76,6.65,6.65,0,0,1,2.26,2.09,9.24,9.24,0,0,1,1.32,3A15.29,15.29,0,0,1,20,54.43Z",
-          fill: "var(--color-primary)"
-        }
-      )
-    ]
-  }
-);
-
-export { Logo };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Logo = () => (_jsxs("svg", { id: "bbbad536-f254-4715-8d5c-86b6d7022b08", "data-name": "Logo", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 154 70", children: [_jsx("path", { d: "M73.13,1.4a16,16,0,0,0-9.31.67,14.12,14.12,0,0,0-4.63,3,13.42,13.42,0,0,0-3,4.55,15.21,15.21,0,0,0-1.07,5.75,16,16,0,0,0,1.17,6.33,12.73,12.73,0,0,0,3.22,4.56A14,14,0,0,0,64.13,29a16.32,16.32,0,0,0,5.52.93A14.79,14.79,0,0,0,72,29.76a16.17,16.17,0,0,0,2.24-.53,14,14,0,0,0,2.17-.87A2.11,2.11,0,0,0,77.6,26.8,2.42,2.42,0,0,0,77,24.72a2.12,2.12,0,0,0-1.4-.85,2.89,2.89,0,0,0-1.68.28,7.28,7.28,0,0,1-2.1.73,11.59,11.59,0,0,1-2.19.2A11.22,11.22,0,0,1,66,24.5a7.87,7.87,0,0,1-3-1.8,8.49,8.49,0,0,1-2-3,11.83,11.83,0,0,1-.71-4.29A11.27,11.27,0,0,1,61,11.52a8.48,8.48,0,0,1,1.84-3,8.12,8.12,0,0,1,2.93-2A11.14,11.14,0,0,1,71.9,6.1a10.21,10.21,0,0,1,2,.69,3.1,3.1,0,0,0,1.68.32A1.83,1.83,0,0,0,77,6.3a2.47,2.47,0,0,0,.58-2.06,2.14,2.14,0,0,0-1.23-1.66,14.22,14.22,0,0,0-3.2-1.18", fill: "var(--color-brand)" }), _jsx("path", { d: "M51.82,20.92A9.6,9.6,0,0,1,51,25.29a6.71,6.71,0,0,1-2.29,2.63,8.77,8.77,0,0,1-3,1.27,15,15,0,0,1-3.12.35H32.43A2.43,2.43,0,0,1,30,27.07V3.67A2.43,2.43,0,0,1,32.43,1.2h10.2q3.88,0,5.79,1.82a7.12,7.12,0,0,1,1.9,5.39,6,6,0,0,1-.93,3.34,5.93,5.93,0,0,1-2.45,2.08,11,11,0,0,1,1.38.67,7.19,7.19,0,0,1,2.51,2.43A7.33,7.33,0,0,1,51.82,20.92Zm-6-2.64a3.17,3.17,0,0,0-1.74-1,10,10,0,0,0-1.86-.2h-7v7.81h7.29a4.25,4.25,0,0,0,3-1,3.84,3.84,0,0,0,1.09-3A3.88,3.88,0,0,0,45.83,18.28ZM44.19,6.77A3.25,3.25,0,0,0,41.9,6H35.22v6.31H42a3.18,3.18,0,0,0,2.11-.77,2.71,2.71,0,0,0,.93-2.22A3.26,3.26,0,0,0,44.19,6.77Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M3.47,1.2A2.43,2.43,0,0,0,1,3.67v23.4a2.43,2.43,0,0,0,2.47,2.47h9.67a11.16,11.16,0,0,0,6.62-1.91,11.93,11.93,0,0,0,4.11-5.12,17.57,17.57,0,0,0,1.42-7.14,18.88,18.88,0,0,0-.79-5.49,13.75,13.75,0,0,0-2.35-4.53,10.65,10.65,0,0,0-3.83-3,11.74,11.74,0,0,0-5.18-1.1ZM20,15.37a14.37,14.37,0,0,1-.75,4.72,7.58,7.58,0,0,1-2.37,3.48,6.44,6.44,0,0,1-4.17,1.31H6.06v-19h6.68a6.34,6.34,0,0,1,5.54,2.85,9.2,9.2,0,0,1,1.32,3A15.15,15.15,0,0,1,20,15.37Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M151.61,64.53a2.45,2.45,0,0,0-1.76-.67H139.29V42.73a2.32,2.32,0,0,0-.75-1.76,2.44,2.44,0,0,0-1.72-.71A2.55,2.55,0,0,0,135,41a2.34,2.34,0,0,0-.73,1.76v23.4a2.43,2.43,0,0,0,2.47,2.47h13.15a2.49,2.49,0,0,0,1.76-.67,2.2,2.2,0,0,0,.71-1.68A2.23,2.23,0,0,0,151.61,64.53Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M129.85,65.44,119.9,41.72a2.51,2.51,0,0,0-.91-1.2,2.42,2.42,0,0,0-1.36-.42,2.14,2.14,0,0,0-1.44.36,2.72,2.72,0,0,0-1,1.26l-10.08,24.2a2.73,2.73,0,0,0-.12.77,2.2,2.2,0,0,0,.53,1.5,2,2,0,0,0,1.62.61,2.09,2.09,0,0,0,1.27-.43,2.49,2.49,0,0,0,.87-1.19l2.1-4.94h12.07l2.1,4.9a2.9,2.9,0,0,0,.91,1.21,2.11,2.11,0,0,0,1.32.45,2.32,2.32,0,0,0,2.27-2.39A2.62,2.62,0,0,0,129.85,65.44Zm-16.48-7.85,4-9.48,4.06,9.48Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M107,40.91a2.52,2.52,0,0,0-1.76-.65h-18a2.55,2.55,0,0,0-1.76.63,2.15,2.15,0,0,0-.71,1.68,2.2,2.2,0,0,0,.71,1.7,2.52,2.52,0,0,0,1.76.65h6.35V66.13a2.39,2.39,0,0,0,.73,1.76,2.58,2.58,0,0,0,1.86.71,2.7,2.7,0,0,0,1.93-.71,2.34,2.34,0,0,0,.75-1.76V44.92h6.35a2.55,2.55,0,0,0,1.76-.63,2.15,2.15,0,0,0,.71-1.68A2.2,2.2,0,0,0,107,40.91Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M80.84,41a2.26,2.26,0,0,0-1.72-.71,3.74,3.74,0,0,0-1.74.36l-6.11,3.65A2.29,2.29,0,0,0,70,46.37a2.48,2.48,0,0,0,.68,1.68,2.2,2.2,0,0,0,1.74.79,2.52,2.52,0,0,0,1.3-.36L76.25,47V66.13A2.35,2.35,0,0,0,77,67.89a2.55,2.55,0,0,0,1.86.71,2.69,2.69,0,0,0,1.92-.71,2.34,2.34,0,0,0,.75-1.76V42.73A2.45,2.45,0,0,0,80.84,41Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M67.3,54a2.34,2.34,0,0,0-1.74-.71H58.92a2.44,2.44,0,0,0-1.76.69,2.51,2.51,0,0,0,0,3.48,2.44,2.44,0,0,0,1.76.69h3.81V63.4a11.67,11.67,0,0,1-2,.5,16.72,16.72,0,0,1-2.68.24,9.1,9.1,0,0,1-4.79-1.31,9.81,9.81,0,0,1-4.72-8.4,9.59,9.59,0,0,1,1.28-4.88A9.75,9.75,0,0,1,53.24,46,9,9,0,0,1,58,44.71a10.82,10.82,0,0,1,2.39.25,11.47,11.47,0,0,1,2.15.68,3.18,3.18,0,0,0,.67.25,3.05,3.05,0,0,0,.66.08,2.07,2.07,0,0,0,1.66-.77,2.63,2.63,0,0,0,.65-1.74,2.27,2.27,0,0,0-1.21-2,13.36,13.36,0,0,0-3.28-1.21,16.63,16.63,0,0,0-3.69-.4A14.45,14.45,0,0,0,52.29,41a14.63,14.63,0,0,0-4.7,3.14,14.82,14.82,0,0,0-3.18,4.63,14.53,14.53,0,0,0,0,11.33,14.89,14.89,0,0,0,7.88,7.78A14.62,14.62,0,0,0,58,69a15.78,15.78,0,0,0,4.64-.67,17.19,17.19,0,0,0,4.07-1.8,3.49,3.49,0,0,0,.87-.85A2.23,2.23,0,0,0,68,64.35V55.76A2.44,2.44,0,0,0,67.3,54Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M37.94,41a2.28,2.28,0,0,0-1.72-.71,3.69,3.69,0,0,0-1.74.36l-6.12,3.65a2.31,2.31,0,0,0-1.25,2.1,2.49,2.49,0,0,0,.69,1.68,2.2,2.2,0,0,0,1.74.79,2.46,2.46,0,0,0,1.29-.36L33.34,47V66.13a2.35,2.35,0,0,0,.73,1.76,2.58,2.58,0,0,0,1.86.71,2.7,2.7,0,0,0,1.93-.71,2.36,2.36,0,0,0,.74-1.76V42.73A2.48,2.48,0,0,0,37.94,41Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M3.47,40.26A2.43,2.43,0,0,0,1,42.73v23.4A2.43,2.43,0,0,0,3.47,68.6h9.67a11.16,11.16,0,0,0,6.62-1.91,12,12,0,0,0,4.11-5.12,17.57,17.57,0,0,0,1.42-7.14,18.83,18.83,0,0,0-.79-5.49,13.75,13.75,0,0,0-2.35-4.53,10.78,10.78,0,0,0-3.83-3.06,11.74,11.74,0,0,0-5.18-1.09ZM20,54.43a14.27,14.27,0,0,1-.75,4.71,7.48,7.48,0,0,1-2.37,3.48,6.39,6.39,0,0,1-4.17,1.32H6.06v-19h6.68a6.65,6.65,0,0,1,3.28.76,6.65,6.65,0,0,1,2.26,2.09,9.24,9.24,0,0,1,1.32,3A15.29,15.29,0,0,1,20,54.43Z", fill: "var(--color-brand)" })] }));

package/dist/components/__stories__/_data/table.d.ts

@@ -0,0 +1,15 @@
+import type { JSX } from 'react';
+import { ColumnItem } from '../../../components/table/Table';
+type HarvestRunRow = {
+    runId: string;
+    source: string;
+    started: string;
+    status: 'Completed' | 'Running' | 'Failed';
+    updated: number;
+    warnings: number;
+    failed: number;
+};
+export declare const STORY_TABLE_DATA: () => HarvestRunRow[];
+export declare const STORY_TABLE_COLUMNS: ColumnItem<HarvestRunRow>[];
+export declare const SampleTable: () => JSX.Element;
+export {};

package/dist/components/__stories__/_data/table.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Chip } from '../../../components/chip/Chip';
+import { Table } from '../../../components/table/Table';
+const sources = ['onix.vendor-x', 'onix.vendor-y', 'cover.provider-z'];
+const statuses = ['Completed', 'Running', 'Failed'];
+function randomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+function randomDate(start, end) {
+    const date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+    return date;
+}
+function pad(n) {
+    return n < 10 ? '0' + n : n;
+}
+function formatDate(date) {
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:00`;
+}
+function generateRandomRow() {
+    const date = randomDate(new Date(2026, 0, 27, 3), new Date(2026, 0, 27, 23));
+    const source = sources[randomInt(0, sources.length - 1)];
+    const status = statuses[randomInt(0, statuses.length - 1)];
+    return {
+        runId: `harvest:${formatDate(date).replace(' ', 'T')}`,
+        source,
+        started: formatDate(date),
+        status,
+        updated: status === 'Failed' ? 0 : randomInt(800, 2000),
+        warnings: randomInt(0, 40),
+        failed: status === 'Failed' ? randomInt(1, 5) : randomInt(0, 2),
+    };
+}
+export const STORY_TABLE_DATA = () => Array.from({ length: randomInt(10, 25) }, _ => generateRandomRow());
+export const STORY_TABLE_COLUMNS = [
+    { id: 'runId', header: 'Kørsels-ID', accessor: 'runId', sortable: true },
+    { id: 'source', header: 'Kilde', accessor: 'source', sortable: true },
+    { id: 'started', header: 'Startet', accessor: 'started', sortable: true },
+    {
+        id: 'status',
+        header: 'Status',
+        accessor: 'status',
+        sortable: true,
+        render: (row) => (_jsxs("span", { className: "dbc-flex dbc-flex-row dbc-flex-wrap dbc-gap-xs", children: [row.status === 'Completed' && (_jsx(Chip, { size: "sm", severity: "success", children: "Fuldf\u00F8rt" })), row.status === 'Running' && (_jsx(Chip, { size: "sm", severity: "info", children: "K\u00F8rer" })), row.status === 'Failed' && (_jsx(Chip, { size: "sm", severity: "error", children: "Fejlet" }))] })),
+    },
+    { id: 'updated', header: 'Opdateret', accessor: 'updated', sortable: true },
+    { id: 'warnings', header: 'Advarsler', accessor: 'warnings', sortable: true },
+    { id: 'failed', header: 'Fejlet', accessor: 'failed', sortable: true },
+];
+export const SampleTable = () => (_jsx(Table, { fillViewport: true, data: STORY_TABLE_DATA(), columns: STORY_TABLE_COLUMNS, dataKey: "runId", variant: "embedded" }));

package/dist/components/__stories__/story-components/Colors.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export declare const textSizes: {
+    name: string;
+    value: string;
+}[];
+export declare const textColors: {
+    name: string;
+    value: string;
+    backgroundColor: string | undefined;
+}[];
+export declare function Colors(): ReactNode;

package/dist/components/__stories__/story-components/Colors.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Select } from '../../../components/forms/select/Select';
+import { Headline } from '../../../components/headline/Headline';
+import styles from './Colors.module.css';
+const colors = [
+    {
+        name: 'Brand',
+        value: '--color-brand',
+        textColor: 'var(--color-fg-on-brand)',
+        hoverColor: 'var(--color-brand-hover)',
+    },
+    {
+        name: 'Success',
+        value: '--color-status-success',
+        textColor: 'var(--color-fg-on-strong)',
+        // no dedicated hover token for status colors in the new theme
+        hoverColor: 'var(--color-status-success)',
+    },
+    {
+        name: 'Info',
+        value: '--color-status-info',
+        textColor: 'var(--color-fg-on-strong)',
+        hoverColor: 'var(--color-status-info)',
+    },
+    {
+        name: 'Warning',
+        value: '--color-status-warning',
+        textColor: 'var(--color-fg-on-strong)',
+        hoverColor: 'var(--color-status-warning)',
+    },
+    {
+        name: 'Error',
+        value: '--color-status-error',
+        textColor: 'var(--color-fg-on-strong)',
+        hoverColor: 'var(--color-status-error)',
+    },
+    {
+        name: 'Success background',
+        value: '--color-status-success-bg',
+        textColor: 'var(--color-status-success-fg)',
+        hoverColor: 'var(--color-status-success-bg)',
+    },
+    {
+        name: 'Info background',
+        value: '--color-status-info-bg',
+        textColor: 'var(--color-status-info-fg)',
+        hoverColor: 'var(--color-status-info-bg)',
+    },
+    {
+        name: 'Warning background',
+        value: '--color-status-warning-bg',
+        textColor: 'var(--color-status-warning-fg)',
+        hoverColor: 'var(--color-status-warning-bg)',
+    },
+    {
+        name: 'Error background',
+        value: '--color-status-error-bg',
+        textColor: 'var(--color-status-error-fg)',
+        hoverColor: 'var(--color-status-error-bg)',
+    },
+];
+export const textSizes = [
+    { name: 'Extra small', value: '--font-size-xs' },
+    { name: 'Small', value: '--font-size-sm' },
+    { name: 'Medium', value: '--font-size-md' },
+    { name: 'Large', value: '--font-size-lg' },
+];
+export const textColors = [
+    { name: 'Text Default', value: '--color-fg-default', backgroundColor: undefined },
+    { name: 'Text Secondary', value: '--color-fg-muted', backgroundColor: undefined },
+    { name: 'Text Muted', value: '--color-fg-subtle', backgroundColor: undefined },
+    {
+        name: 'Text Inverse',
+        value: '--color-fg-on-strong',
+        backgroundColor: 'var(--color-fg-default)',
+    },
+];
+const fontWeights = [
+    { label: 'Default', value: 'var(--font-weight-default)' }, // <- fixed missing ')'
+    { label: 'Medium', value: 'var(--font-weight-medium)' },
+    { label: 'Bold', value: 'var(--font-weight-bold)' },
+];
+const headerSizes = [1, 2, 3, 4, 5, 6];
+export function Colors() {
+    const [fontWeight, setFontWeight] = useState(fontWeights[0].value);
+    return (_jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md", children: [_jsx(Headline, { children: "Colors" }), _jsx("div", { className: `dbc-flex dbc-gap-sm dbc-flex-wrap ${styles.container}`, style: { width: '100%' }, children: colors.map(color => (_jsx("div", { className: styles.colorItem, style: {
+                        '--bgColor': `var(${color.value})`,
+                        '--textColor': color.textColor,
+                    }, children: color.name }, color.name))) }), _jsxs("div", { children: [_jsx(Headline, { addition: _jsx(Select, { selectedValue: fontWeight, onChange: e => setFontWeight(e), options: fontWeights }), children: "Typography" }), textColors.map(color => (_jsx("div", { className: "dbc-flex dbc-gap-sm", children: textSizes.map(size => (_jsxs("div", { className: styles.textColorItem, style: {
+                                '--textColor': `var(${color.value})`,
+                                '--bgColor': color.backgroundColor ? color.backgroundColor : 'transparent',
+                                '--fontSize': `var(${size.value})`,
+                                '--fontWeight': fontWeight,
+                            }, children: [color.name, " - ", size.name] }, `${color.name}-${size.name}`))) }, color.name))), _jsx("div", { className: "dbc-flex dbc-gap-sm", children: headerSizes.map(size => (_jsxs(Headline, { size: size, children: ["Header ", size] }, `header-size-${size}`))) })] })] }));
+}

package/dist/components/__stories__/story-components/Colors.module.css

@@ -0,0 +1,27 @@
+.colorItem {
+  width: calc(100% / 3);
+  background-color: var(--bgColor);
+  padding: var(--spacing-md);
+  color: var(--textColor);
+  border-radius: var(--border-radius-default);
+  &:hover {
+    opacity: 0.8;
+    cursor: pointer;
+    transition: all 0.1s ease-in-out;
+  }
+}
+
+.textColorItem {
+  width: calc(100% / 3);
+  font-size: var(--fontSize);
+  background-color: var(--bgColor);
+  font-weight: var(--fontWeight);
+  padding: var(--spacing-md);
+  color: var(--textColor);
+  border-radius: var(--border-radius-default);
+  &:hover {
+    opacity: 0.8;
+    cursor: pointer;
+    transition: all 0.1s ease-in-out;
+  }
+}

package/dist/components/__stories__/story-components/Spacing.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export declare function Spacing(): JSX.Element;

package/dist/components/__stories__/story-components/Spacing.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButton } from '../../../components/copy-button/CopyButton';
+import { Headline } from '../../../components/headline/Headline';
+import styles from './Spacing.module.css';
+const SIZES = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+const AXES = ['all', 'block', 'inline', 'top', 'bottom', 'start', 'end'];
+// Theme spacing values (px) to show in headers
+const SIZE_PX = {
+    xxs: '4px',
+    xs: '8px',
+    sm: '12px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+    '2xl': '48px',
+};
+// map axis -> class fragment for each kind
+const CLASS_PARTS = {
+    padding: {
+        all: 'p',
+        block: 'py',
+        inline: 'px',
+        top: 'pt',
+        bottom: 'pb',
+        start: 'ps',
+        end: 'pe',
+    },
+    margin: {
+        all: 'm',
+        block: 'my',
+        inline: 'mx',
+        top: 'mt',
+        bottom: 'mb',
+        start: 'ms',
+        end: 'me',
+    },
+};
+// Single-side helpers only go up to xl
+const HAS_SINGLE_SIDE_FOR = (size) => size !== '2xl';
+function makeClass(kind, axis, size) {
+    if ((axis === 'top' || axis === 'bottom' || axis === 'start' || axis === 'end') &&
+        !HAS_SINGLE_SIDE_FOR(size)) {
+        return null;
+    }
+    const part = CLASS_PARTS[kind][axis];
+    return `dbc-${part}-${size}`;
+}
+function Code({ children }) {
+    return _jsx("code", { className: styles.code, children: children });
+}
+const ContentBlock = ({ helperClass }) => (_jsxs("div", { className: `${styles.contentBlock} dbc-flex dbc-gap-xxs dbc-justify-center ${helperClass} dbc-items-center`, children: [helperClass, " ", _jsx(CopyButton, { text: helperClass, variant: "inline", size: "sm" })] }));
+function PaddingPreview({ cls }) {
+    return (_jsx("div", { className: `${styles.paddingPreview} ${cls}`, children: _jsx(ContentBlock, { helperClass: cls }) }));
+}
+function MarginPreview({ cls }) {
+    return (_jsx("div", { className: styles.marginCanvas, children: _jsx("div", { className: `${styles.marginBlock} ${cls}`, children: _jsx(ContentBlock, { helperClass: cls }) }) }));
+}
+function Cell({ kind, axis, size }) {
+    const cls = makeClass(kind, axis, size);
+    if (!cls)
+        return _jsx("div", { className: styles.unavailable, children: "\u2014" });
+    return (_jsx("div", { className: styles.cellInner, children: _jsx("div", { className: styles.cellPreview, children: kind === 'padding' ? _jsx(PaddingPreview, { cls: cls }) : _jsx(MarginPreview, { cls: cls }) }) }));
+}
+function Grid({ kind, title, severity }) {
+    return (_jsxs("section", { className: styles.section, children: [_jsx(Headline, { marker: true, severity: severity, disableMargin: true, size: 2, children: title }), _jsx("div", { className: styles.tableContainer, children: _jsxs("table", { className: styles.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: styles.axisCol, children: "Axis" }), SIZES.map(size => (_jsxs("th", { className: styles.sizeHead, children: [size, " ", _jsxs("span", { className: styles.sizePx, children: ["(", SIZE_PX[size], ")"] })] }, size)))] }) }), _jsx("tbody", { children: AXES.map(axis => (_jsxs("tr", { children: [_jsx("th", { className: styles.axisHead, children: axis }), SIZES.map(size => (_jsx("td", { className: styles.cell, children: _jsx(Cell, { kind: kind, axis: axis, size: size }) }, size)))] }, axis))) })] }) })] }));
+}
+export function Spacing() {
+    return (_jsxs("div", { className: styles.container, style: {
+            ['--pad-indicator']: 'var(--color-bg-info)',
+            ['--pad-border']: 'var(--color-info)',
+            ['--margin-indicator']: 'var(--color-bg-warning)',
+            ['--margin-border']: 'var(--color-warning)',
+            ['--dot-pad']: 'var(--color-bg-selected)',
+            ['--dot-mar']: 'var(--opac-bg-default)',
+        }, children: [_jsx("header", { className: styles.header, children: _jsx(Headline, { disableMargin: true, children: "Spacing helpers" }) }), _jsxs("section", { className: styles.intro, children: [_jsx("h2", { className: styles.h2, children: "Naming Convention" }), _jsxs("p", { className: styles.paragraph, children: ["Spacing helpers follow a simple ", _jsx("strong", { children: "prefix\u2013axis\u2013size" }), " pattern:"] }), _jsx("div", { className: styles.example, children: _jsx(Code, { children: "dbc-[prefix][axis?]-[size]" }) }), _jsxs("ul", { className: styles.list, children: [_jsxs("li", { children: [_jsx("strong", { children: "Prefix" }), ": ", _jsx(Code, { children: "p" }), " for ", _jsx("em", { children: "padding" }), ", ", _jsx(Code, { children: "m" }), " for", ' ', _jsx("em", { children: "margin" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "Axis" }), " (optional): ", _jsx(Code, { children: "x" }), " = inline (left + right), ", _jsx(Code, { children: "y" }), ' ', "= block (top + bottom), or single sides ", _jsx(Code, { children: "t" }), " / ", _jsx(Code, { children: "b" }), " / ", _jsx(Code, { children: "s" }), ' ', "/ ", _jsx(Code, { children: "e" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "Size" }), ": one of ", _jsx(Code, { children: "xxs" }), ", ", _jsx(Code, { children: "xs" }), ", ", _jsx(Code, { children: "sm" }), ",", ' ', _jsx(Code, { children: "md" }), ", ", _jsx(Code, { children: "lg" }), ", ", _jsx(Code, { children: "xl" }), ", ", _jsx(Code, { children: "2xl" }), "."] })] }), _jsxs("p", { className: styles.paragraph, children: ["For example: ", _jsx(Code, { children: "dbc-px-md" }), " adds medium horizontal padding, while", ' ', _jsx(Code, { children: "dbc-mt-lg" }), " adds a large top margin."] })] }), _jsx(Grid, { kind: "padding", title: "Padding", severity: "info" }), _jsx(Grid, { kind: "margin", title: "Margin", severity: "warning" })] }));
+}

package/dist/components/__stories__/story-components/Spacing.module.css

@@ -0,0 +1,154 @@
+/* Layout */
+.container {
+  margin-inline: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.5rem;
+  color: var(--color-text);
+}
+
+/* Intro copy */
+.intro {
+  display: grid;
+  gap: 0.5rem;
+}
+.paragraph {
+  color: var(--color-text-secondary, #374151);
+}
+.example {
+  margin-top: 0.25rem;
+}
+.list {
+  margin: 0.5rem 0 0 1rem;
+  display: grid;
+  gap: 0.25rem;
+}
+
+.section {
+  display: grid;
+  gap: 1rem;
+}
+.h2 {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #27272a;
+}
+
+.tableContainer {
+  overflow: auto;
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  overflow: auto;
+  font-size: var(--font-size-sm);
+}
+
+.axisCol {
+  width: 90px;
+  text-align: left;
+  padding: 0.625rem 0.75rem;
+  color: var(--color-text-muted);
+  font-weight: 500;
+  background: var(--color-background);
+}
+
+.axisHead {
+  text-align: left;
+  padding: 0.625rem 0.75rem;
+  color: var(--color-text-secondary, #374151);
+  font-weight: 500;
+  background: var(--opac-bg-light, rgba(0, 0, 0, 0.025));
+  position: sticky;
+  left: 0;
+  z-index: 1;
+}
+.sizeHead {
+  text-align: center;
+  padding: 0.5rem 0.5rem;
+  font-weight: 600;
+  color: var(--color-text, #1a1a1a);
+  white-space: nowrap;
+  background: var(--color-surface, #fff);
+  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
+}
+.sizePx {
+  font-weight: 400;
+  color: var(--color-text-muted, #5f6368);
+  margin-left: 0.25rem;
+}
+
+.table tbody tr:nth-child(odd) {
+  background: var(--bg-color);
+}
+.table tbody tr:nth-child(even) {
+  background: var(--opac-bg-default);
+}
+
+.cell {
+  vertical-align: middle;
+  padding: var(--spacing-xs);
+}
+
+.cellInner {
+  display: grid;
+  gap: var(--spacing-xxs);
+  align-items: center;
+  justify-items: center;
+}
+
+.cellPreview {
+  width: min(200px, 100%);
+}
+
+.code {
+  border-radius: var(--border-radius-default);
+  background: var(--color-bg-default);
+  padding: 0 var(--spacing-xs);
+  line-height: 1.5;
+  font-size: 12px;
+  font-family: var(--font-family-mono, monospace);
+  color: var(--color-text-secondary);
+  box-shadow: var(--shadow-xs);
+}
+
+.contentBlock {
+  border-radius: var(--border-radius-md, 0.375rem);
+  background: var(--color-background);
+  text-align: center;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  box-shadow: var(--shadow-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.paddingPreview {
+  width: 100%;
+  border-radius: var(--border-radius-md, 0.375rem);
+  background: var(--pad-indicator, var(--color-bg-selected));
+  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
+  outline: 1px solid var(--pad-border, var(--color-border-selected));
+}
+
+.marginCanvas {
+  width: 100%;
+  position: relative;
+  display: inline-block;
+  border-radius: var(--border-radius-md, 0.375rem);
+  background: var(--margin-indicator, var(--opac-bg-default));
+  outline: 1px solid var(--margin-border, var(--color-border));
+}
+
+.marginBlock {
+  border-radius: var(--border-radius-md, 0.375rem);
+  background: var(--color-background, #fff);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+}

package/dist/components/app-header/AppHeader.d.ts

@@ -1,5 +1,6 @@
-interface AppHeader {
-    children: React.ReactNode;
+import type { ReactNode, JSX } from 'react';
+interface AppHeaderProps {
+    children: ReactNode;
 }
-export declare function AppHeader({ children }: AppHeader): JSX.Element;
+export declare function AppHeader({ children }: AppHeaderProps): JSX.Element;
 export {};

package/dist/components/app-header/AppHeader.js

@@ -1,8 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './AppHeader.module.css';
-
-function AppHeader({ children }) {
-  return /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx("div", { className: styles.container, children }) });
+export function AppHeader({ children }) {
+    return (_jsx("header", { children: _jsx("div", { className: styles.container, children: children }) }));
 }
-
-export { AppHeader };

package/dist/components/app-header/AppHeader.module.css

@@ -1,7 +1,3 @@
-/* =========================
-   AppHeader (owns the chrome)
-   ========================= */
-
 .container {
   /* layout */
   display: flex;
@@ -11,21 +7,20 @@
 
   /* sizing */
   inline-size: 100%;
-  min-block-size: 60px; /* preserve your previous height */
+  min-block-size: 60px;
   box-sizing: border-box;
 
   /* chrome */
-  background-color: var(--color-surface);
-  color: var(--color-text);
-  border-block-end: var(--border-width-thin) solid var(--color-border);
+  background-color: var(--color-bg-surface);
+  color: var(--color-fg-default);
+  border-block-end: var(--border-width-thin) solid var(--color-border-default);
 
   /* density-aware vertical rhythm */
   padding-block: calc(var(--control-padding-y) + var(--density));
-  padding-inline: var(--spacing-lg);
+  padding-inline: var(--spacing-md);
 }
 
-/* Optional content wrapper if you want to constrain width
-   (use in JSX: <AppHeader><div className={styles.inner}>…</div></AppHeader>) */
+/* Optional content wrapper */
 .inner {
   inline-size: min(100%, var(--container-xl));
   margin-inline: auto;
@@ -36,7 +31,7 @@
   gap: var(--spacing-lg);
 }
 
-/* Slots (optional utility classes) */
+/* Slots */
 .start,
 .center,
 .end {
@@ -55,19 +50,19 @@
   box-shadow: var(--focus-ring);
 }
 
-/* Elevated header (e.g., when page scrolls) */
+/* Elevated header */
 .elevated {
   border-block-end: 0;
   box-shadow: var(--shadow-sm);
 }
 
-/* Transparent header (e.g., over hero image) */
+/* Transparent header */
 .transparent {
   background-color: transparent;
   border-block-end: 0;
 }
 
-/* Condensed density option (keeps chrome in one place) */
+/* Condensed density option */
 :root[data-density='compact'] .container {
   padding-inline: var(--spacing-md);
 }

package/dist/components/attribute-chip/AttributeChip.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+interface AttributeChipProps {
+    label: string;
+    value: string | number | boolean;
+    loading?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function AttributeChip({ label, value, size, loading, }: AttributeChipProps): JSX.Element;
+export {};

package/dist/components/attribute-chip/AttributeChip.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './AttributeChip.module.css';
+export function AttributeChip({ label, value, size = 'md', loading, }) {
+    return (_jsxs("div", { className: `${styles.container} ${styles[size]}`, "aria-busy": loading, children: [_jsx("span", { className: styles.label, children: label }), _jsx("span", { className: styles.value, children: loading ? '—' : value === null || value === void 0 ? void 0 : value.toString() })] }));
+}