@dbcdk/react-components 0.0.4 → 0.0.5

package/dist/styles/themes/dbc/light.css

@@ -1,43 +1,163 @@
 :root {
-  --color-primary: #0c3ee3;
-  --color-primary-hover: #0932b6;
-  --color-secondary: #6b7280;
-  --color-secondary-hover: #4b5563;
-  --color-accent: #ec4899;
-  --color-accent-hover: #be185d;
-
-  --color-highlight: #3b6ff5;
-  --color-hover: var(--opac-bg-light);
-
-  --color-bg-selected: #e8edfd;
-  --color-bg-selected-hover: #dce5fc;
-  --color-border-selected: var(--color-primary);
-
-  --color-background: #ffffff;
-  --color-surface: #ffffff;
-  --color-surface-hover: var(--opac-bg-light);
-  --color-surface-pressed: var(--opac-bg-default);
-  --color-surface-selected: var(--color-bg-selected);
-
-  /* Text */
-  --color-text: #1a1a1a;
-  --color-text-secondary: #374151;
-  --color-text-muted: #5f6368;
-  --color-text-inverse: #ffffff;
-  --color-text-on-primary: var(--color-text-inverse);
-  --color-text-on-secondary: var(--color-text-inverse);
-  --color-text-on-highlight: var(--color-text-inverse);
-
-  /* Links */
-  --color-link: #0c3ee3;
-  --color-link-hover: #0932b6;
-  --color-link-visited: #5b3ee3;
-
-  /* Borders */
-  --color-border: rgba(0, 0, 0, 0.12);
+  /* ==========================================================================
+   * PRIMITIVES (DBC)
+   * ======================================================================= */
+
+  /* Brand blues */
+  --dbc-blue-500: #0c3ee3;
+  --dbc-blue-600: #0932b6;
+  --dbc-blue-400: #3b6ff5;
+  --dbc-blue-300: #7ea5ff; /* used for focus ring */
+  --dbc-blue-100: #e8edfd;
+  --dbc-blue-150: #dce5fc;
+
+  /* Neutrals */
+  --dbc-neutral-900: #1a1a1a;
+  --dbc-neutral-700: #374151;
+  --dbc-neutral-600: #5f6368;
+  --dbc-neutral-200: #e5e7eb;
+  --dbc-neutral-100: #f3f4f6;
+
+  /* Accents */
+  --dbc-pink-500: #ec4899;
+  --dbc-pink-600: #be185d;
+
+  --dbc-gray-500: #6b7280;
+  --dbc-gray-600: #4b5563;
+
+  /* Status colors */
+  --dbc-green-500: #10b981;
+  --dbc-green-100: #e6f9f3;
+  --dbc-green-700: #065f46;
+  --dbc-green-300: #34d399;
+
+  --dbc-amber-700: #b45309;
+  --dbc-amber-100: #fff7ed;
+  --dbc-amber-800: #92400e;
+  --dbc-amber-400: #f59e0b;
+
+  --dbc-red-600: #dc2626;
+  --dbc-red-100: #fef2f2;
+  --dbc-red-800: #991b1b;
+  --dbc-red-300: #f87171;
+
+  --dbc-info-500: #0ea5e9;
+  --dbc-info-100: #e0f2fe;
+  --dbc-info-700: #075985;
+  --dbc-info-300: #38bdf8;
+
+  /* ==========================================================================
+   * SEMANTIC COLORS (HUE-AGNOSTIC – COMPONENTS USE THESE)
+   * ======================================================================= */
+
+  /* === Brand & accents === */
+  --color-brand: var(--dbc-blue-500);
+  --color-brand-hover: var(--dbc-blue-600);
+  --color-brand-strong: var(--dbc-blue-600); /* same as hover for this theme */
+
+  /* === Backgrounds & surfaces === */
+  --color-bg-page: #ffffff;
+  --color-bg-surface: #ffffff;
+  --color-bg-surface-subtle: rgba(0, 0, 0, 0.02);
+  --color-bg-surface-strong: #f9fafb;
+
+  --color-bg-contextual: #f4f2ee;
+  --color-bg-contextual-subtle: #faf8f5;
+
+  /* Interaction backgrounds */
+  --color-bg-hover-subtle: var(--opac-bg-light);
+  --color-bg-pressed-subtle: var(--opac-bg-default);
+
+  /* Selected */
+  --color-bg-selected: var(--dbc-blue-100);
+  --color-bg-selected-hover: var(--dbc-blue-150);
+
+  --color-neutral: var(--dbc-neutral-200);
+  --color-neutral-fg: #000000;
+  --color-neutral-strong: var(--dbc-neutral-600);
+  --color-neutral-strong-fg: #ffffff;
+  /* === Borders === */
+
+  --color-border-subtle: rgba(0, 0, 0, 0.12);
+  --color-border-default: rgba(0, 0, 0, 0.12);
   --color-border-strong: rgba(0, 0, 0, 0.24);
+  --color-border-selected: var(--color-brand);
+
+  /* Border widths */
   --border-width-thin: 1px;
-  --border-width-thick: 2px;
+  --border-width-medium: 2px;
+  --border-width-thick: 4px;
+
+  /* === Text / foreground === */
+
+  --color-fg-default: var(--dbc-neutral-900);
+  --color-fg-muted: var(--dbc-neutral-700);
+  --color-fg-subtle: var(--dbc-neutral-600);
+
+  --color-fg-on-strong: #ffffff;
+  --color-fg-on-brand: #ffffff;
+
+  /* === Links === */
+
+  --color-link: var(--dbc-blue-500);
+  --color-link-hover: var(--dbc-blue-600);
+  --color-link-visited: #5b3ee3;
+
+  /* === Status / severity === */
+
+  --color-status-success: var(--dbc-green-500);
+  --color-status-success-bg: var(--dbc-green-100);
+  --color-status-success-border: var(--dbc-green-300);
+  --color-status-success-fg: var(--dbc-green-700);
+
+  --color-status-warning: var(--dbc-amber-700);
+  --color-status-warning-bg: var(--dbc-amber-100);
+  --color-status-warning-border: var(--dbc-amber-400);
+  --color-status-warning-fg: var(--dbc-amber-800);
+
+  --color-status-error: var(--dbc-red-600);
+  --color-status-error-bg: var(--dbc-red-100);
+  --color-status-error-border: var(--dbc-red-300);
+  --color-status-error-fg: var(--dbc-red-800);
+
+  --color-status-info: var(--dbc-info-500);
+  --color-status-info-bg: var(--dbc-info-100);
+  --color-status-info-border: var(--dbc-info-300);
+  --color-status-info-fg: var(--dbc-info-700);
+
+  /* === Disabled === */
+
+  --color-disabled-bg: var(--dbc-neutral-100);
+  --color-disabled-fg: #9ca3af;
+  --color-disabled-border: var(--dbc-neutral-200);
+
+  /* === Focus === */
+
+  --color-focus-ring: var(--dbc-blue-300);
+  --focus-ring: 0 0 0 3px rgba(12, 62, 227, 0.25);
+
+  /* ==========================================================================
+   * OPTIONAL COMPONENT-LEVEL TOKENS
+   * ======================================================================= */
+
+  /* Cards */
+  --card-bg-default: var(--color-bg-surface);
+  --card-bg-subtle: var(--color-bg-surface-subtle);
+  --card-bg-strong: var(--color-bg-surface-strong);
+
+  --card-fg-default: var(--color-fg-default);
+  --card-fg-on-strong: var(--color-fg-on-strong);
+  --card-fg-on-accent-1: var(--color-fg-on-accent-1);
+  --card-fg-on-accent-2: var(--color-fg-on-accent-2);
+
+  /* Buttons */
+  --button-bg-primary: var(--color-brand);
+  --button-bg-primary-hover: var(--color-brand-hover);
+  --button-fg-primary: var(--color-fg-on-brand);
+
+  /* ==========================================================================
+   * NON-COLOR SYSTEM TOKENS
+   * ======================================================================= */
 
   /* Opacities (light) */
   --opac-bg-light: rgba(0, 0, 0, 0.025);
@@ -48,38 +168,7 @@
   --opac-bg-default-invert: rgba(255, 255, 255, 0.05);
   --opac-bg-dark-invert: rgba(255, 255, 255, 0.1);
 
-  /* Semantic (Status) */
-  --color-success: #166534;
-  --color-warning: #a05a00;
-  --color-error: #b91c1c;
-  --color-info: #075985;
-
-  --color-bg-success: #ecfdf5;
-  --color-bg-warning: #fff3d1;
-  --color-bg-error: #fef2f2;
-  --color-bg-info: #e0f2fe;
-
-  --color-text-success: #166534;
-  --color-text-warning: #a05a00;
-  --color-text-error: #b91c1c;
-  --color-text-info: #075985;
-
-  --color-border-success: #16a34a;
-  --color-border-warning: #d97706;
-  --color-border-error: #ef4444;
-  --color-border-info: #0284c7;
-
-  /* Disabled */
-  --color-disabled-bg: #f3f4f6;
-  --color-disabled-text: #9ca3af;
-  --color-disabled-border: #e5e7eb;
-
-  /* Focus */
-  --focus-ring-color: #7ea5ff; /* tuned for light backgrounds */
-  --focus-ring: 0 0 0 3px rgba(12, 62, 227, 0.25);
-
   /* ===== Spacing & Layout ===== */
-  /* 4px base scale */
   --spacing-2xs: 2px;
   --spacing-xxs: 4px;
   --spacing-xs: 8px;
@@ -91,7 +180,6 @@
   --spacing-3xl: 64px;
   --spacing-4xl: 96px;
 
-  /* Gutters */
   --gutter-sm: 12px;
   --gutter-md: 16px;
   --gutter-lg: 24px;
@@ -110,14 +198,18 @@
   --container-xl: 1280px;
 
   /* ===== Sizing ===== */
-  --icon-size: 20px;
+  --icon-size-sm: 16px;
+  --icon-size-md: 20px;
+  --icon-size-lg: 24px;
+
   --component-size-xs: 20px;
   --component-size-sm: 30px;
-  --component-size-md: 40px;
-  --component-size-lg: 48px;
-  --component-size-xl: 64px;
+  --component-size-md: 36px;
+  --component-size-lg: 44px;
+  --component-size-xl: 435px;
+  --sidebar-width: 200px;
 
-  /* Control paddings (horizontal/vertical) */
+  /* Control paddings */
   --control-padding-x: 12px;
   --control-padding-y: 8px;
 
@@ -131,15 +223,17 @@
   --border-radius-lg: 0.5rem;
   --border-radius-xl: 0.75rem;
 
-  /* Density presets (add/subtract from heights/paddings) */
+  /* Density */
   --density-compact: -2px;
   --density-comfortable: 0px;
   --density-spacious: 4px;
 
-  /* ===== Typography ===== */
+  /* Typography */
+  --text-max-width: 65ch;
   --font-family:
     Roboto, Inter, ui-sans-serif, system-ui, 'Segoe UI', 'Helvetica Neue', Arial,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+
   --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
 
   --font-size-xs: 12px;
@@ -149,11 +243,10 @@
   --font-size-xl: 24px;
   --font-size-2xl: 30px;
 
-  /* Fluid helpers (optional) */
   --font-size-fluid-sm: clamp(14px, 1.2vw, 16px);
   --font-size-fluid-lg: clamp(18px, 1.6vw, 22px);
 
-  --font-weight-regular: 400;
+  --font-weight-default: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
@@ -171,7 +264,7 @@
   --breadcrumb-transform: none;
   --tab-label-transform: none;
 
-  /* ===== Motion ===== */
+  /* Motion */
   --transition-fast: 150ms;
   --transition-normal: 250ms;
   --transition-slow: 400ms;
@@ -181,17 +274,17 @@
   --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
   --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
 
-  /* ===== Elevation & Overlay ===== */
+  /* Elevation & Overlay */
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
 
   --overlay-scrim: rgba(0, 0, 0, 0.5);
   --backdrop-blur: 8px;
 
-  /* ===== Layers ===== */
+  /* Layers */
   --z-base: 0;
   --z-dropdown: 1000;
   --z-sticky: 1100;
@@ -202,7 +295,7 @@
   --z-tooltip: 1400;
   --z-toast: 1500;
 
-  /* ===== Data Visualization (optional but handy for tags/charts) ===== */
+  /* Data viz */
   --viz-cat-1: #2563eb;
   --viz-cat-2: #16a34a;
   --viz-cat-3: #f59e0b;
@@ -214,17 +307,17 @@
   --viz-seq-mid: #60a5fa;
   --viz-seq-end: #1d4ed8;
 
-  /* ===== Components: Skeletons & Loaders ===== */
+  /* Skeletons & loaders */
   --skeleton-base: #e5e7eb;
   --skeleton-pulse: #f3f4f6;
   --spinner-size: 16px;
   --spinner-stroke: 2px;
 
-  /* ===== Directionality / Logical Spacing ===== */
-  --space-inline-sm: 8px; /* use with margin-inline, padding-inline, etc. */
+  /* Logical spacing */
+  --space-inline-sm: 8px;
 }
 
-/* ===== Accessibility: Reduced Motion (light only) ===== */
+/* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :root {
     --transition-fast: 1ms;
@@ -237,9 +330,10 @@
   }
 }
 
-/* ===== Optional: High-Contrast Variant (still light) ===== */
+/* High-contrast variant */
 :root[data-contrast='high'] {
-  --color-border: #4b5563;
+  --color-border-subtle: #4b5563;
+  --color-border-default: #374151;
   --color-border-strong: #111827;
   --focus-ring: 0 0 0 3px #111827;
 }

package/dist/types/sizes.types.d.ts

@@ -1,2 +1,2 @@
-export type Size = "sm" | "md" | "lg" | "xl";
-export type SizeVariable = "var(--component-size-sm)" | "var(--component-size-md)" | "var(--component-size-lg)" | "var(--component-size-xl)";
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SizeVariable = 'var(--component-size-xs)' | 'var(--component-size-sm)' | 'var(--component-size-md)' | 'var(--component-size-lg)' | 'var(--component-size-xl)';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",
@@ -46,15 +46,14 @@
     "build:types": "tsc -p tsconfig.build.json",
     "build": "npm run build:js && npm run build:types",
     "dev": "tsup --watch",
-    "test": "vitest",
+    "test": "jest",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --max-warnings=0",
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-open",
     "build:storybook": "storybook build",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run build && npm run typecheck",
+    "typecheck": "tsc -p tsconfig.build.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",
@@ -62,10 +61,10 @@
     "yalc:watch": "chokidar 'src/**/*' -c 'npm run yalc:push'"
   },
   "peerDependencies": {
-    "@tanstack/react-table": "^8.20.0",
-    "lucide-react": "^0.542.0",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "@tanstack/react-table": "^8.21.3",
+    "lucide-react": "^0.543.0",
+    "react": "^19.2.0 || ^19.0.0",
+    "react-dom": "^19.2.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-table": {
@@ -78,9 +77,12 @@
     "@storybook/addon-docs": "^9.1.3",
     "@storybook/addon-viewport": "^9.0.8",
     "@storybook/react-vite": "^9.1.3",
+    "@swc/core": "^1.15.11",
+    "@swc/jest": "^0.2.39",
     "@tanstack/react-table": "^8.20.0",
-    "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^30.0.0",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/testing-library__jest-dom": "^6.0.0",
@@ -92,6 +94,9 @@
     "eslint": "^9.34.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "jsdom": "^26.1.0",
     "prettier": "^3.2.4",
     "react": "18.2.0",
@@ -100,6 +105,7 @@
     "tsup": "^8.5.0",
     "typescript": "^5.9.2",
     "vite": "^6.3.5",
+    "vite-tsconfig-paths": "^6.0.5",
     "vitest": "^3.2.4"
   },
   "engines": {

package/dist/components/data-summary/DataSummary.cjs

@@ -1,49 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Headline = require('../headline/Headline');
-var styles = require('./DataSummary.module.css');
-var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function DataSummary({
-  title,
-  data,
-  loading,
-  variant = "default",
-  headerMarker,
-  headerIcon,
-  severity,
-  size
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${styles__default.default[variant]}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Headline.Headline,
-      {
-        severity,
-        marker: headerMarker,
-        icon: headerIcon,
-        size: 2,
-        disableMargin: true,
-        children: title
-      }
-    ),
-    loading && /* @__PURE__ */ jsxRuntime.jsx("table", { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { width: "100%" }) })
-    ] }, index)) }) }),
-    data && data.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("table", { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.label, children: [
-        item.icon,
-        item.label,
-        ":"
-      ] }) }, index),
-      /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: item.value }) })
-    ] })) }) })
-  ] });
-}
-
-exports.DataSummary = DataSummary;

package/dist/components/data-summary/DataSummary.d.ts

@@ -1,19 +0,0 @@
-import { Severity } from '@/constants/severity.types';
-interface DataSummaryItem {
-    label: string;
-    value: React.ReactNode;
-    icon?: React.ReactNode;
-}
-interface DataSummaryProps {
-    title: string;
-    value: string | number;
-    data: DataSummaryItem[];
-    loading?: boolean;
-    variant?: 'default' | 'primary';
-    headerMarker?: boolean;
-    headerIcon?: React.ReactNode;
-    severity?: Severity;
-    size?: 'sm' | 'md' | 'lg';
-}
-export declare function DataSummary({ title, data, loading, variant, headerMarker, headerIcon, severity, size, }: DataSummaryProps): JSX.Element;
-export {};

package/dist/components/data-summary/DataSummary.js

@@ -1,43 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Headline } from '../headline/Headline';
-import styles from './DataSummary.module.css';
-import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-
-function DataSummary({
-  title,
-  data,
-  loading,
-  variant = "default",
-  headerMarker,
-  headerIcon,
-  severity,
-  size
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${styles[variant]}`, children: [
-    /* @__PURE__ */ jsx(
-      Headline,
-      {
-        severity,
-        marker: headerMarker,
-        icon: headerIcon,
-        size: 2,
-        disableMargin: true,
-        children: title
-      }
-    ),
-    loading && /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(SkeletonLoaderItem, {}) }),
-      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: "100%" }) })
-    ] }, index)) }) }),
-    data && data.length > 0 && /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: data.map((item, index) => /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("span", { className: styles.label, children: [
-        item.icon,
-        item.label,
-        ":"
-      ] }) }, index),
-      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: styles.value, children: item.value }) })
-    ] })) }) })
-  ] });
-}
-
-export { DataSummary };

package/dist/components/data-summary/DataSummary.module.css

@@ -1,51 +0,0 @@
-.container {
-  padding: var(--spacing-lg);
-  display: inline-flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-}
-
-.default {
-  background-color: var(--opac-bg-default);
-}
-
-.primary {
-  background-color: var(--color-primary);
-  color: var(--color-text-on-primary);
-}
-
-.label {
-  font-weight: 500;
-  padding-right: var(--spacing-sm);
-  color: var(--color-text-secondary);
-}
-
-.label,
-.value {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.container table td:first-child {
-  width: 1px;
-  white-space: nowrap;
-  padding-right: 10px;
-}
-.container table td {
-  vertical-align: top;
-  padding: 5px 0px;
-}
-
-.container table ul {
-  margin: 0;
-  padding: 0;
-}
-
-.container ul li {
-  list-style-position: inside;
-}
-.container svg {
-  height: 14px;
-  width: auto;
-}

package/dist/components/sidebar/Sidebar.module.css

@@ -1,66 +0,0 @@
-.container {
-  flex-shrink: 1;
-  height: 100%;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-lg);
-  width: 240px;
-  inline-size: 240px;
-  box-sizing: border-box;
-
-  border-inline-end: var(--border-width-thin) solid var(--color-border);
-  padding: var(--spacing-lg) var(--spacing-md);
-}
-
-.container a {
-  text-decoration: none;
-  color: inherit;
-}
-.container button {
-  background: none;
-  border: 0;
-  font-size: inherit;
-  display: flex;
-  padding: 0;
-}
-
-.container a:focus-visible,
-.container button:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-.links {
-  display: flex;
-  flex-grow: 1;
-  overflow: auto;
-  flex-direction: column;
-  font-size: var(--font-size-sm);
-}
-
-.header {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-}
-
-.logo img,
-.logo svg {
-  max-inline-size: 50px;
-  block-size: auto;
-}
-
-.content {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  gap: var(--spacing-lg);
-}
-
-.footer {
-  flex: 0 0 auto;
-}