@dbcdk/react-components 0.0.187 → 0.0.188

package/dist/client.cjs

@@ -34,6 +34,7 @@ var SkeletonLoader = require('./components/skeleton-loader/SkeletonLoader');
 var Page = require('./components/page/Page');
 var Breadcrumbs = require('./components/breadcrumbs/Breadcrumbs');
 var Circle = require('./components/circle/Circle');
+var Badge = require('./components/badge/Badge');
 var Checkbox = require('./components/forms/checkbox/Checkbox');
 var Switch = require('./components/forms/switch/Switch');
 var Table = require('./components/table/Table');
@@ -301,6 +302,12 @@ Object.keys(Circle).forEach(function (k) {
 		get: function () { return Circle[k]; }
 	});
 });
+Object.keys(Badge).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Badge[k]; }
+	});
+});
 Object.keys(Checkbox).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -31,6 +31,7 @@ export * from './components/skeleton-loader/SkeletonLoader';
 export * from './components/page/Page';
 export * from './components/breadcrumbs/Breadcrumbs';
 export * from './components/circle/Circle';
+export * from './components/badge/Badge';
 export * from './components/forms/checkbox/Checkbox';
 export * from './components/forms/switch/Switch';
 export * from './components/table/Table';

package/dist/client.js

@@ -32,6 +32,7 @@ export * from './components/skeleton-loader/SkeletonLoader';
 export * from './components/page/Page';
 export * from './components/breadcrumbs/Breadcrumbs';
 export * from './components/circle/Circle';
+export * from './components/badge/Badge';
 export * from './components/forms/checkbox/Checkbox';
 export * from './components/forms/switch/Switch';
 export * from './components/table/Table';

package/dist/components/badge/Badge.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Badge.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function formatBadgeCount(count, max) {
+  return count > max ? `${max}+` : String(count);
+}
+function Badge({
+  children,
+  count,
+  max = 99,
+  severity = "error",
+  dot = false
+}) {
+  const showBadge = dot || typeof count === "number" && count > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.wrapper, children: [
+    children,
+    showBadge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.badge} ${styles__default.default[severity]}`, "data-dot": dot || void 0, children: !dot && typeof count === "number" ? formatBadgeCount(count, max) : null })
+  ] });
+}
+
+exports.Badge = Badge;
+exports.formatBadgeCount = formatBadgeCount;

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+interface BadgeProps {
+    /** The element the badge is overlaid on top of, e.g. an icon. */
+    children: ReactNode;
+    /** Shown inside the badge, capped at `max`. Omit (with `dot` false) to render nothing. */
+    count?: number;
+    /** Counts above this render as `${max}+`. */
+    max?: number;
+    severity?: Severity;
+    /** Render a plain dot instead of a count - use when only "something changed" matters, not how much. */
+    dot?: boolean;
+}
+export declare function formatBadgeCount(count: number, max: number): string;
+export declare function Badge({ children, count, max, severity, dot, }: BadgeProps): JSX.Element;
+export {};

package/dist/components/badge/Badge.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Badge.module.css';
+
+function formatBadgeCount(count, max) {
+  return count > max ? `${max}+` : String(count);
+}
+function Badge({
+  children,
+  count,
+  max = 99,
+  severity = "error",
+  dot = false
+}) {
+  const showBadge = dot || typeof count === "number" && count > 0;
+  return /* @__PURE__ */ jsxs("span", { className: styles.wrapper, children: [
+    children,
+    showBadge && /* @__PURE__ */ jsx("span", { className: `${styles.badge} ${styles[severity]}`, "data-dot": dot || void 0, children: !dot && typeof count === "number" ? formatBadgeCount(count, max) : null })
+  ] });
+}
+
+export { Badge, formatBadgeCount };

package/dist/components/badge/Badge.module.css

@@ -0,0 +1,53 @@
+.wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-inline-size: 16px;
+  block-size: 16px;
+  padding-inline: var(--spacing-2xs);
+  border-radius: var(--border-radius-rounded);
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  color: var(--color-fg-inverse);
+  pointer-events: none;
+}
+
+.badge[data-dot='true'] {
+  min-inline-size: 8px;
+  inline-size: 8px;
+  block-size: 8px;
+  padding-inline: 0;
+  border-radius: var(--border-radius-round);
+}
+
+.neutral {
+  background-color: var(--color-neutral);
+}
+.brand {
+  background-color: var(--color-brand);
+}
+.accent {
+  background-color: var(--color-accent);
+}
+.success {
+  background-color: var(--color-status-success);
+}
+.warning {
+  background-color: var(--color-status-warning);
+}
+.error {
+  background-color: var(--color-status-error);
+}
+.info {
+  background-color: var(--color-status-info);
+}

package/dist/components/table/components/table-settings/TableSettings.cjs

@@ -8,7 +8,7 @@ var Button = require('../../../button/Button');
 var Menu = require('../../../menu/Menu');
 var Popover = require('../../../popover/Popover');
 
-function TableSettings({
+function TableSettingsMenuSection({
   viewMode,
   handleChangeViewMode,
   columns = [],
@@ -17,12 +17,12 @@ function TableSettings({
   columnsLabel = "Kolonner",
   allPresetLabel = "Alle",
   standardPresetLabel = "Standard",
-  buttonSize = "sm",
-  additionalSettings
+  additionalSettings,
+  close
 }) {
-  const handleViewModeChange = (mode, close) => {
+  const handleViewModeChange = (mode, close2) => {
     handleChangeViewMode(mode === "wrapped" ? "compact" : "wrapped");
-    close == null ? void 0 : close();
+    close2 == null ? void 0 : close2();
   };
   const hideableColumns = react.useMemo(() => columns.filter((c) => c.enableHiding !== false), [columns]);
   const allPresetIds = react.useMemo(() => hideableColumns.map((c) => c.id), [hideableColumns]);
@@ -63,6 +63,73 @@ function TableSettings({
     return hideableColumns.every((c) => c.id && visibleSet.has(c.id) === std.has(c.id));
   }, [hideableColumns, visibleSet, standardPresetIds]);
   const presetRadioName = "table-columns-preset";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    additionalSettings == null ? void 0 : additionalSettings(close),
+    /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListChevronsUpDown, {}),
+      "Ombryd tekst"
+    ] }) }),
+    hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "6px 10px", fontSize: 12, opacity: 0.7 }, children: columnsLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Menu.Menu.RadioItem,
+        {
+          name: presetRadioName,
+          value: "all",
+          checked: isAllActive,
+          label: allPresetLabel,
+          onValueChange: () => {
+            setVisibleIds(
+              allPresetIds.filter((id) => typeof id === "string" && Boolean(id))
+            );
+            close == null ? void 0 : close();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Menu.Menu.RadioItem,
+        {
+          name: presetRadioName,
+          value: "standard",
+          checked: isStandardActive,
+          label: standardPresetLabel,
+          onValueChange: () => {
+            setVisibleIds(
+              standardPresetIds.filter(
+                (id) => typeof id === "string" && Boolean(id)
+              )
+            );
+            close == null ? void 0 : close();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
+      hideableColumns.map((col) => {
+        const isVisible = col.id ? visibleSet.has(col.id) : false;
+        const disableUncheckingLast = isVisible && visibleCount <= 1;
+        const label = col.header;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Menu.Menu.CheckItem,
+          {
+            checked: isVisible,
+            disabled: disableUncheckingLast,
+            label,
+            onCheckedChange: (nextChecked) => {
+              if (disableUncheckingLast) return;
+              toggleColumn(col.id, nextChecked);
+            }
+          },
+          col.id
+        );
+      })
+    ] }) : null
+  ] });
+}
+function TableSettings({
+  buttonSize = "sm",
+  ...sectionProps
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Popover.Popover,
     {
@@ -70,70 +137,10 @@ function TableSettings({
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, {}),
         icon
       ] }),
-      children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [
-        additionalSettings == null ? void 0 : additionalSettings(close),
-        /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListChevronsUpDown, {}),
-          "Ombryd tekst"
-        ] }) }),
-        hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "6px 10px", fontSize: 12, opacity: 0.7 }, children: columnsLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Menu.Menu.RadioItem,
-            {
-              name: presetRadioName,
-              value: "all",
-              checked: isAllActive,
-              label: allPresetLabel,
-              onValueChange: () => {
-                setVisibleIds(
-                  allPresetIds.filter((id) => typeof id === "string" && Boolean(id))
-                );
-                close == null ? void 0 : close();
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Menu.Menu.RadioItem,
-            {
-              name: presetRadioName,
-              value: "standard",
-              checked: isStandardActive,
-              label: standardPresetLabel,
-              onValueChange: () => {
-                setVisibleIds(
-                  standardPresetIds.filter(
-                    (id) => typeof id === "string" && Boolean(id)
-                  )
-                );
-                close == null ? void 0 : close();
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Separator, {}),
-          hideableColumns.map((col) => {
-            const isVisible = col.id ? visibleSet.has(col.id) : false;
-            const disableUncheckingLast = isVisible && visibleCount <= 1;
-            const label = col.header;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              Menu.Menu.CheckItem,
-              {
-                checked: isVisible,
-                disabled: disableUncheckingLast,
-                label,
-                onCheckedChange: (nextChecked) => {
-                  if (disableUncheckingLast) return;
-                  toggleColumn(col.id, nextChecked);
-                }
-              },
-              col.id
-            );
-          })
-        ] }) : null
-      ] })
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx(TableSettingsMenuSection, { ...sectionProps, close }) })
     }
   );
 }
 
 exports.TableSettings = TableSettings;
+exports.TableSettingsMenuSection = TableSettingsMenuSection;

package/dist/components/table/components/table-settings/TableSettings.d.ts

@@ -2,7 +2,7 @@ import { ColumnDef } from '@tanstack/react-table';
 import type { JSX, ReactNode } from 'react';
 import { ViewMode } from '../../../../hooks/useTableSettings';
 import { ButtonSize } from '../../../button/Button';
-interface TableSettingsProps<T extends Record<string, any>> {
+export interface TableSettingsMenuSectionProps<T extends Record<string, any>> {
     handleChangeViewMode: (mode: ViewMode) => void;
     viewMode: ViewMode;
     columns?: ColumnDef<T>[];
@@ -11,8 +11,17 @@ interface TableSettingsProps<T extends Record<string, any>> {
     columnsLabel?: string;
     allPresetLabel?: string;
     standardPresetLabel?: string;
-    buttonSize?: ButtonSize;
     additionalSettings?: (close?: () => void) => ReactNode;
+    /** Called after an action closes the surrounding menu/popover, if any. */
+    close?: () => void;
+}
+export interface TableSettingsProps<T extends Record<string, any>> extends Omit<TableSettingsMenuSectionProps<T>, 'close'> {
+    buttonSize?: ButtonSize;
 }
-export declare function TableSettings<T extends Record<string, any>>({ viewMode, handleChangeViewMode, columns, visibleColumnIds, onVisibleColumnIdsChange, columnsLabel, allPresetLabel, standardPresetLabel, buttonSize, additionalSettings, }: TableSettingsProps<T>): JSX.Element;
-export {};
+/**
+ * The table settings menu items (view mode toggle + column visibility), with
+ * no `Menu`/`Popover`/trigger wrapper. Use this to fold table settings into
+ * another menu; use `TableSettings` for the standalone button + popover.
+ */
+export declare function TableSettingsMenuSection<T extends Record<string, any>>({ viewMode, handleChangeViewMode, columns, visibleColumnIds, onVisibleColumnIdsChange, columnsLabel, allPresetLabel, standardPresetLabel, additionalSettings, close, }: TableSettingsMenuSectionProps<T>): JSX.Element;
+export declare function TableSettings<T extends Record<string, any>>({ buttonSize, ...sectionProps }: TableSettingsProps<T>): JSX.Element;

package/dist/components/table/components/table-settings/TableSettings.js

@@ -1,12 +1,12 @@
 'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { ListChevronsUpDown, Settings } from 'lucide-react';
 import { useMemo } from 'react';
 import { Button } from '../../../button/Button';
 import { Menu } from '../../../menu/Menu';
 import { Popover } from '../../../popover/Popover';
 
-function TableSettings({
+function TableSettingsMenuSection({
   viewMode,
   handleChangeViewMode,
   columns = [],
@@ -15,12 +15,12 @@ function TableSettings({
   columnsLabel = "Kolonner",
   allPresetLabel = "Alle",
   standardPresetLabel = "Standard",
-  buttonSize = "sm",
-  additionalSettings
+  additionalSettings,
+  close
 }) {
-  const handleViewModeChange = (mode, close) => {
+  const handleViewModeChange = (mode, close2) => {
     handleChangeViewMode(mode === "wrapped" ? "compact" : "wrapped");
-    close == null ? void 0 : close();
+    close2 == null ? void 0 : close2();
   };
   const hideableColumns = useMemo(() => columns.filter((c) => c.enableHiding !== false), [columns]);
   const allPresetIds = useMemo(() => hideableColumns.map((c) => c.id), [hideableColumns]);
@@ -61,6 +61,73 @@ function TableSettings({
     return hideableColumns.every((c) => c.id && visibleSet.has(c.id) === std.has(c.id));
   }, [hideableColumns, visibleSet, standardPresetIds]);
   const presetRadioName = "table-columns-preset";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    additionalSettings == null ? void 0 : additionalSettings(close),
+    /* @__PURE__ */ jsx(Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
+      /* @__PURE__ */ jsx(ListChevronsUpDown, {}),
+      "Ombryd tekst"
+    ] }) }),
+    hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Menu.Separator, {}),
+      /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px", fontSize: 12, opacity: 0.7 }, children: columnsLabel }),
+      /* @__PURE__ */ jsx(
+        Menu.RadioItem,
+        {
+          name: presetRadioName,
+          value: "all",
+          checked: isAllActive,
+          label: allPresetLabel,
+          onValueChange: () => {
+            setVisibleIds(
+              allPresetIds.filter((id) => typeof id === "string" && Boolean(id))
+            );
+            close == null ? void 0 : close();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Menu.RadioItem,
+        {
+          name: presetRadioName,
+          value: "standard",
+          checked: isStandardActive,
+          label: standardPresetLabel,
+          onValueChange: () => {
+            setVisibleIds(
+              standardPresetIds.filter(
+                (id) => typeof id === "string" && Boolean(id)
+              )
+            );
+            close == null ? void 0 : close();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Menu.Separator, {}),
+      hideableColumns.map((col) => {
+        const isVisible = col.id ? visibleSet.has(col.id) : false;
+        const disableUncheckingLast = isVisible && visibleCount <= 1;
+        const label = col.header;
+        return /* @__PURE__ */ jsx(
+          Menu.CheckItem,
+          {
+            checked: isVisible,
+            disabled: disableUncheckingLast,
+            label,
+            onCheckedChange: (nextChecked) => {
+              if (disableUncheckingLast) return;
+              toggleColumn(col.id, nextChecked);
+            }
+          },
+          col.id
+        );
+      })
+    ] }) : null
+  ] });
+}
+function TableSettings({
+  buttonSize = "sm",
+  ...sectionProps
+}) {
   return /* @__PURE__ */ jsx(
     Popover,
     {
@@ -68,70 +135,9 @@ function TableSettings({
         /* @__PURE__ */ jsx(Settings, {}),
         icon
       ] }),
-      children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
-        additionalSettings == null ? void 0 : additionalSettings(close),
-        /* @__PURE__ */ jsx(Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
-          /* @__PURE__ */ jsx(ListChevronsUpDown, {}),
-          "Ombryd tekst"
-        ] }) }),
-        hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Menu.Separator, {}),
-          /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px", fontSize: 12, opacity: 0.7 }, children: columnsLabel }),
-          /* @__PURE__ */ jsx(
-            Menu.RadioItem,
-            {
-              name: presetRadioName,
-              value: "all",
-              checked: isAllActive,
-              label: allPresetLabel,
-              onValueChange: () => {
-                setVisibleIds(
-                  allPresetIds.filter((id) => typeof id === "string" && Boolean(id))
-                );
-                close == null ? void 0 : close();
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Menu.RadioItem,
-            {
-              name: presetRadioName,
-              value: "standard",
-              checked: isStandardActive,
-              label: standardPresetLabel,
-              onValueChange: () => {
-                setVisibleIds(
-                  standardPresetIds.filter(
-                    (id) => typeof id === "string" && Boolean(id)
-                  )
-                );
-                close == null ? void 0 : close();
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(Menu.Separator, {}),
-          hideableColumns.map((col) => {
-            const isVisible = col.id ? visibleSet.has(col.id) : false;
-            const disableUncheckingLast = isVisible && visibleCount <= 1;
-            const label = col.header;
-            return /* @__PURE__ */ jsx(
-              Menu.CheckItem,
-              {
-                checked: isVisible,
-                disabled: disableUncheckingLast,
-                label,
-                onCheckedChange: (nextChecked) => {
-                  if (disableUncheckingLast) return;
-                  toggleColumn(col.id, nextChecked);
-                }
-              },
-              col.id
-            );
-          })
-        ] }) : null
-      ] })
+      children: (close) => /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx(TableSettingsMenuSection, { ...sectionProps, close }) })
     }
   );
 }
 
-export { TableSettings };
+export { TableSettings, TableSettingsMenuSection };

package/dist/components/tabs/Tabs.module.css

@@ -32,14 +32,23 @@
 
 .tabButtons {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  /* Explicit, not just tidy: leaving this "visible" would compute to "auto"
+     too (overflow-x auto + overflow-y visible isn't a valid combination per
+     spec), silently turning on a vertical scrollbar/clip that's never needed
+     here. */
+  overflow-y: hidden;
   min-width: 0;
 }
 
-/* Extra content next to the tab buttons, pushed into the free space on the right */
+/* Extra content next to the tab buttons, pushed into the free space on the
+   right. It takes the space it needs — .tabButtons scrolls instead of
+   squeezing it. */
 .tabListAddition {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
   gap: var(--spacing-sm);
   margin-inline-start: auto;
   padding-inline-start: var(--spacing-md);
@@ -49,6 +58,7 @@
 .tab {
   display: flex;
   align-items: stretch;
+  flex-shrink: 0;
   border-radius: 0;
   border-block-end: 2px solid var(--color-border-default);
 }
@@ -134,6 +144,7 @@
   align-items: center;
   justify-content: center;
   align-self: stretch;
+  flex-shrink: 0;
 
   color: var(--color-fg-muted);
   background: none;

package/dist/index.cjs

@@ -18,6 +18,7 @@ var SkeletonLoader = require('./components/skeleton-loader/SkeletonLoader');
 var Page = require('./components/page/Page');
 var Breadcrumbs = require('./components/breadcrumbs/Breadcrumbs');
 var Circle = require('./components/circle/Circle');
+var Badge = require('./components/badge/Badge');
 var chartColors = require('./constants/chart-colors');
 var chartColors_types = require('./constants/chart-colors.types');
 var severity_types = require('./constants/severity.types');
@@ -159,6 +160,12 @@ Object.keys(Circle).forEach(function (k) {
 		get: function () { return Circle[k]; }
 	});
 });
+Object.keys(Badge).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Badge[k]; }
+	});
+});
 Object.keys(chartColors).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.css

@@ -6,6 +6,7 @@
 @import './components/app-header/AppHeader.module.css';
 @import './components/attribute-chip/AttributeChip.module.css';
 @import './components/avatar/Avatar.module.css';
+@import './components/badge/Badge.module.css';
 @import './components/breadcrumbs/Breadcrumbs.module.css';
 @import './components/button-select/ButtonSelect.module.css';
 @import './components/button/Button.module.css';

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from './components/skeleton-loader/SkeletonLoader';
 export * from './components/page/Page';
 export * from './components/breadcrumbs/Breadcrumbs';
 export * from './components/circle/Circle';
+export * from './components/badge/Badge';
 export * from './constants/chart-colors';
 export * from './constants/chart-colors.types';
 export * from './constants/severity.types';

package/dist/index.js

@@ -16,6 +16,7 @@ export * from './components/skeleton-loader/SkeletonLoader';
 export * from './components/page/Page';
 export * from './components/breadcrumbs/Breadcrumbs';
 export * from './components/circle/Circle';
+export * from './components/badge/Badge';
 export * from './constants/chart-colors';
 export * from './constants/chart-colors.types';
 export * from './constants/severity.types';

package/dist/styles/styles.css

@@ -303,8 +303,15 @@ tr.dbc-table--hover:hover td:last-child {
    Scrollbars
    ========================================================================== */
 
+/* Firefox equivalent of the thin, muted webkit scrollbar below. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-strong) transparent;
+}
+
 ::-webkit-scrollbar {
   width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {

package/dist/styles.css

@@ -303,8 +303,15 @@ tr.dbc-table--hover:hover td:last-child {
    Scrollbars
    ========================================================================== */
 
+/* Firefox equivalent of the thin, muted webkit scrollbar below. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-strong) transparent;
+}
+
 ::-webkit-scrollbar {
   width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.187",
+  "version": "0.0.188",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",