@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/utils/date/formatDate.js

@@ -1,17 +1,26 @@
-function formatDate(date, options = {}) {
-  const d = date instanceof Date ? date : new Date(date);
-  if (isNaN(d.getTime())) return "";
-  const pad = (n) => n.toString().padStart(2, "0");
-  const day = pad(d.getDate());
-  const month = pad(d.getMonth() + 1);
-  const year = d.getFullYear();
-  const base = `${day}/${month}/${year}`;
-  if (!options.showTime) return base;
-  const hours = pad(d.getHours());
-  const minutes = pad(d.getMinutes());
-  if (!options.showSeconds) return `${base} ${hours}:${minutes}`;
-  const seconds = pad(d.getSeconds());
-  return `${base} ${hours}:${minutes}:${seconds}`;
+/**
+ * Formats a Date as "dd:mm:yyyy" or "dd:mm:yyyy hh:mm:ss".
+ * All parts are zero-padded numbers.
+ *
+ * @param date - The Date or date-parsable value to format
+ * @param options.showSeconds - If true, append time "hh:mm:ss"
+ * @returns A formatted string
+ */
+export function formatDate(date, options = {}) {
+    const d = date instanceof Date ? date : new Date(date);
+    if (isNaN(d.getTime()))
+        return '';
+    const pad = (n) => n.toString().padStart(2, '0');
+    const day = pad(d.getDate());
+    const month = pad(d.getMonth() + 1);
+    const year = d.getFullYear();
+    const base = `${day}/${month}/${year}`;
+    if (!options.showTime)
+        return base;
+    const hours = pad(d.getHours());
+    const minutes = pad(d.getMinutes());
+    if (!options.showSeconds)
+        return `${base} ${hours}:${minutes}`;
+    const seconds = pad(d.getSeconds());
+    return `${base} ${hours}:${minutes}:${seconds}`;
 }
-
-export { formatDate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",
@@ -42,18 +42,19 @@
     "README.md"
   ],
   "scripts": {
-    "build:js": "tsup",
-    "build:types": "tsc -p tsconfig.build.json",
-    "build": "npm run build:js && npm run build:types",
-    "dev": "tsup --watch",
+    "clean": "rimraf dist",
+    "build": "npm run clean && npm run build:code && npm run postbuild",
+    "build:code": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
     "test": "jest",
+    "format": "prettier . --write",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --max-warnings=0",
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
     "storybook": "storybook dev -p 6006 --no-open",
     "build:storybook": "storybook build",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
     "pack-it": "npm run build && npm pack",
     "postbuild": "cpy \"src/**/*.css\" dist --parents && cpy \"src/styles/styles.css\" dist && cpy \"src/styles/fonts/**/*\" dist/styles/fonts",
     "yalc:publish": "npm run build && yalc publish --push",
@@ -73,8 +74,9 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.6",
+    "@mdx-js/react": "^3.1.1",
     "@storybook/addon-a11y": "^9.1.3",
-    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.17",
     "@storybook/addon-viewport": "^9.0.8",
     "@storybook/react-vite": "^9.1.3",
     "@swc/core": "^1.15.11",
@@ -85,15 +87,20 @@
     "@types/jest": "^30.0.0",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "@types/testing-library__jest-dom": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^8.41.0",
     "@typescript-eslint/parser": "^8.41.0",
+    "@vitejs/plugin-react": "^5.1.3",
     "cpy-cli": "^6.0.0",
     "esbuild-css-modules-plugin": "^3.1.5",
     "esbuild-plugin-css-modules": "^0.3.0",
     "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^17.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
@@ -101,9 +108,11 @@
     "prettier": "^3.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "rimraf": "^6.1.2",
     "storybook": "^9.1.3",
+    "tsc-alias": "^1.8.16",
     "tsup": "^8.5.0",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^6.0.5",
     "vitest": "^3.2.4"

package/dist/assets/logo.cjs

@@ -1,87 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-
-const Logo = () => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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)"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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)"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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)"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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)"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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)"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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)"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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)"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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)"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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)"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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)"
-        }
-      )
-    ]
-  }
-);
-
-exports.Logo = Logo;

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

@@ -1,159 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Select = require('@/components/select/Select');
-var Headline = require('@/components/headline/Headline');
-var styles = require('./Colors.module.css');
-var react = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-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)"
-  }
-];
-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" }
-];
-const textColors = [
-  { name: "Text Default", value: "--color-fg-default", backgroundColor: void 0 },
-  { name: "Text Secondary", value: "--color-fg-muted", backgroundColor: void 0 },
-  { name: "Text Muted", value: "--color-fg-subtle", backgroundColor: void 0 },
-  {
-    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];
-function Colors() {
-  const [fontWeight, setFontWeight] = react.useState(fontWeights[0].value);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { children: "Colors" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `dbc-flex dbc-gap-sm dbc-flex-wrap ${styles__default.default.container}`,
-        style: { width: "100%" },
-        children: colors.map((color) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: styles__default.default.colorItem,
-            style: {
-              "--bgColor": `var(${color.value})`,
-              "--textColor": color.textColor
-            },
-            children: color.name
-          },
-          color.name
-        ))
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Headline.Headline,
-        {
-          addition: /* @__PURE__ */ jsxRuntime.jsx(
-            Select.Select,
-            {
-              selectedValue: fontWeight,
-              onChange: (e) => setFontWeight(e),
-              options: fontWeights
-            }
-          ),
-          children: "Typography"
-        }
-      ),
-      textColors.map((color) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dbc-flex dbc-gap-sm", children: textSizes.map((size) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: styles__default.default.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
-      )) })),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dbc-flex dbc-gap-sm", children: headerSizes.map((size) => /* @__PURE__ */ jsxRuntime.jsxs(Headline.Headline, { size, children: [
-        "Header ",
-        size
-      ] }, `header-size-${size}`)) })
-    ] })
-  ] });
-}
-
-exports.Colors = Colors;
-exports.textColors = textColors;
-exports.textSizes = textSizes;

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

@@ -1,190 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./Spacing.module.css');
-var Headline = require('@/components/headline/Headline');
-var CopyButton = require('@/components/copy-button/CopyButton');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const SIZES = ["xxs", "xs", "sm", "md", "lg", "xl", "2xl"];
-const AXES = ["all", "block", "inline", "top", "bottom", "start", "end"];
-const SIZE_PX = {
-  xxs: "4px",
-  xs: "8px",
-  sm: "12px",
-  md: "16px",
-  lg: "24px",
-  xl: "32px",
-  "2xl": "48px"
-};
-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"
-  }
-};
-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 /* @__PURE__ */ jsxRuntime.jsx("code", { className: styles__default.default.code, children });
-}
-const ContentBlock = ({ helperClass }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "div",
-  {
-    className: `${styles__default.default.contentBlock} dbc-flex dbc-gap-xxs dbc-justify-center ${helperClass} dbc-items-center`,
-    children: [
-      helperClass,
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx(CopyButton.CopyButton, { text: helperClass, variant: "inline", size: "sm" })
-    ]
-  }
-);
-function PaddingPreview({ cls }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.paddingPreview} ${cls}`, children: /* @__PURE__ */ jsxRuntime.jsx(ContentBlock, { helperClass: cls }) });
-}
-function MarginPreview({ cls }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.marginCanvas, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.marginBlock} ${cls}`, children: /* @__PURE__ */ jsxRuntime.jsx(ContentBlock, { helperClass: cls }) }) });
-}
-function Cell({ kind, axis, size }) {
-  const cls = makeClass(kind, axis, size);
-  if (!cls) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.unavailable, children: "\u2014" });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellInner, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.cellPreview, children: kind === "padding" ? /* @__PURE__ */ jsxRuntime.jsx(PaddingPreview, { cls }) : /* @__PURE__ */ jsxRuntime.jsx(MarginPreview, { cls }) }) });
-}
-function Grid({ kind, title, severity }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: styles__default.default.section, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { marker: true, severity, disableMargin: true, size: 2, children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tableContainer, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: styles__default.default.table, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("th", { className: styles__default.default.axisCol, children: "Axis" }),
-        SIZES.map((size) => /* @__PURE__ */ jsxRuntime.jsxs("th", { className: styles__default.default.sizeHead, children: [
-          size,
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.sizePx, children: [
-            "(",
-            SIZE_PX[size],
-            ")"
-          ] })
-        ] }, size))
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: AXES.map((axis) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("th", { className: styles__default.default.axisHead, children: axis }),
-        SIZES.map((size) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: styles__default.default.cell, children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { kind, axis, size }) }, size))
-      ] }, axis)) })
-    ] }) })
-  ] });
-}
-function Spacing() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: styles__default.default.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: [
-        /* @__PURE__ */ jsxRuntime.jsx("header", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, children: "Spacing helpers" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("section", { className: styles__default.default.intro, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: styles__default.default.h2, children: "Naming Convention" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles__default.default.paragraph, children: [
-            "Spacing helpers follow a simple ",
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "prefix\u2013axis\u2013size" }),
-            " pattern:"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.example, children: /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "dbc-[prefix][axis?]-[size]" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles__default.default.list, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Prefix" }),
-              ": ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "p" }),
-              " for ",
-              /* @__PURE__ */ jsxRuntime.jsx("em", { children: "padding" }),
-              ", ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "m" }),
-              " for",
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx("em", { children: "margin" }),
-              "."
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Axis" }),
-              " (optional): ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "x" }),
-              " = inline (left + right), ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "y" }),
-              " ",
-              "= block (top + bottom), or single sides ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "t" }),
-              " / ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "b" }),
-              " / ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "s" }),
-              " ",
-              "/ ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "e" }),
-              "."
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Size" }),
-              ": one of ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "xxs" }),
-              ", ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "xs" }),
-              ", ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "sm" }),
-              ",",
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "md" }),
-              ", ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "lg" }),
-              ", ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "xl" }),
-              ", ",
-              /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "2xl" }),
-              "."
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles__default.default.paragraph, children: [
-            "For example: ",
-            /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "dbc-px-md" }),
-            " adds medium horizontal padding, while",
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "dbc-mt-lg" }),
-            " adds a large top margin."
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { kind: "padding", title: "Padding", severity: "info" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid, { kind: "margin", title: "Margin", severity: "warning" })
-      ]
-    }
-  );
-}
-
-exports.Spacing = Spacing;

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

@@ -1,14 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./AppHeader.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function AppHeader({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("header", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, children }) });
-}
-
-exports.AppHeader = AppHeader;

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

@@ -1,22 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./AttributeChip.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function AttributeChip({
-  label,
-  value,
-  size = "md",
-  loading
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${styles__default.default[size]}`, "aria-busy": loading, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
-  ] });
-}
-
-exports.AttributeChip = AttributeChip;