@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/page-layout/PageLayout.js

@@ -1,95 +1,42 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageLayoutHero } from './components/page-layout-hero/PageLayoutHero';
 import styles from './PageLayout.module.css';
-
-const PageLayoutBase = ({
-  children,
-  sidebar,
-  header,
-  containScrolling = false,
-  orientation = "vertical"
-}) => {
-  if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `${styles.container} ${styles.vertical} ${containScrolling ? styles.containScrolling : ""}`,
-        children: /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", height: "100%", maxWidth: "100%" }, children: [
-          sidebar,
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                flex: 1,
-                display: "flex",
-                flexDirection: "column",
-                height: "100%",
-                maxHeight: "100vh",
-                overflow: "auto"
-              },
-              children: [
-                header && /* @__PURE__ */ jsx("div", { className: styles.header, children: header }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      flex: 1,
-                      display: "flex",
-                      flexDirection: "column",
-                      padding: "1rem",
-                      gap: 20,
-                      overflow: "auto"
-                    },
-                    children
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("div", { className: `${styles.container} ${containScrolling ? styles.containScrolling : ""}`, children });
+/** Base component */
+const PageLayoutBase = ({ children, sidebar, header, containScrolling = false, orientation = 'vertical', }) => {
+    if (orientation === 'vertical') {
+        return (_jsx("div", { className: `${styles.container} ${styles.vertical} ${containScrolling ? styles.containScrolling : ''}`, children: _jsxs("div", { style: { flex: 1, display: 'flex', height: '100%', maxWidth: '100%' }, children: [sidebar, _jsxs("div", { style: {
+                            flex: 1,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            maxHeight: '100vh',
+                            overflow: 'auto',
+                        }, children: [header && _jsx("div", { className: styles.header, children: header }), _jsx("div", { style: {
+                                    flex: 1,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    padding: 'var(--spacing-md)',
+                                    gap: 'var(--spacing-md)',
+                                    backgroundColor: 'var(--color-bg-surface)',
+                                    overflow: 'auto',
+                                }, children: children })] })] }) }));
+    }
+    return (_jsx("div", { className: `${styles.container} ${containScrolling ? styles.containScrolling : ''}`, children: children }));
 };
-const PageLayoutHeader = ({
-  maxWidth = true,
-  children
-}) => {
-  return /* @__PURE__ */ jsx("div", { className: styles.headerContainer, children: /* @__PURE__ */ jsx("div", { className: `${styles.headerContent} ${maxWidth ? styles.maxWidth : ""}`, children }) });
+/** Subcomponents */
+const PageLayoutHeader = ({ maxWidth = true, children, }) => {
+    return (_jsx("div", { className: styles.headerContainer, children: _jsx("div", { className: `${styles.headerContent} ${maxWidth ? styles.maxWidth : ''}`, children: children }) }));
 };
-const PageLayoutHero = ({
-  children,
-  link,
-  metaHeadline,
-  headline,
-  image,
-  maxWidth = true
-}) => {
-  const content = /* @__PURE__ */ jsx("div", { className: `${styles.heroContainer} ${maxWidth ? styles.maxWidth : ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.heroImageWrapper, children: [
-    image,
-    /* @__PURE__ */ jsx("div", { className: styles.heroText, children: /* @__PURE__ */ jsxs("div", { children: [
-      metaHeadline && /* @__PURE__ */ jsx("div", { className: styles.metaHeadline, children: metaHeadline }),
-      headline && /* @__PURE__ */ jsx("div", { className: styles.headline, children: /* @__PURE__ */ jsx("h2", { children: headline }) }),
-      children
-    ] }) })
-  ] }) });
-  const rendered = link ? link(content) : content;
-  return /* @__PURE__ */ jsx(Fragment, { children: rendered });
-};
-const PageLayoutContent = ({
-  maxWidth = true,
-  children
-}) => {
-  return /* @__PURE__ */ jsx("main", { className: `${styles.content} ${maxWidth ? styles.maxWidth : ""}`, children });
+const PageLayoutContent = ({ maxWidth = true, children, }) => {
+    return _jsx("main", { className: `${styles.content} ${maxWidth ? styles.maxWidth : ''}`, children: children });
 };
 const PageLayoutFooter = ({ children }) => {
-  return /* @__PURE__ */ jsx("footer", { className: styles.footer, children });
+    return _jsx("footer", { className: styles.footer, children: children });
 };
-const PageLayout = Object.assign(PageLayoutBase, {
-  Header: PageLayoutHeader,
-  Hero: PageLayoutHero,
-  Content: PageLayoutContent,
-  Footer: PageLayoutFooter
+export const PageLayout = Object.assign(PageLayoutBase, {
+    Header: PageLayoutHeader,
+    Hero: PageLayoutHero,
+    Content: PageLayoutContent,
+    Footer: PageLayoutFooter,
 });
-
-export { PageLayout };

package/dist/components/page-layout/PageLayout.module.css

@@ -22,91 +22,15 @@
   }
 }
 
-.heroContainer {
-  height: clamp(220px, 80svh, 520px);
-  height: clamp(220px, 80vh, 600px);
-  position: relative;
-  overflow: hidden;
-  margin: var(--spacing-lg) auto;
-  width: 100%;
-  padding: 0 var(--spacing-lg);
-  box-sizing: border-box;
-}
-
-.heroContainer img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: 0% 10%;
-  display: block;
-}
-
-.heroImageWrapper {
-  height: 100%;
-  position: relative;
-}
-.heroImageWrapper::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.15);
-}
-
-.heroText {
-  z-index: 10;
-  position: absolute;
-  left: var(--spacing-2xl);
-  bottom: var(--spacing-2xl);
-  padding: var(--spacing-md);
-  letter-spacing: 1px;
-  color: #fff;
-  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.3;
-}
-
-.heroText h2 {
-  margin: 0;
-  font-size: var(--font-size-2xl);
-}
-
-.heroText .metaHeadline {
-  text-transform: uppercase;
-  opacity: 0.9;
-  font-size: var(--font-size-lg);
-  text-transform: uppercase;
-  opacity: 0.9;
-  font-weight: 500;
-  padding: 0 0 var(--spacing-xs) 0;
-  font-weight: 400;
-}
-
-.metaHeadline::after {
-  content: '';
-  display: block;
-  width: 40px;
-  height: 3px;
-  background: var(--color-primary);
-  margin-top: 4px;
-  border-radius: 2px;
-}
-
 .headerContainer {
   display: flex;
   justify-content: center;
 }
 
-.container:not(.containScrolling) {
-  .headerContainer {
-    position: sticky;
-    z-index: 1000;
-    top: 0;
-  }
+.container:not(.containScrolling) .headerContainer {
+  position: sticky;
+  z-index: 1000;
+  top: 0;
 }
 
 .headerContent {

package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface PageLayoutHeroProps {
+    children?: React.ReactNode;
+    link?: (children: React.ReactNode) => React.ReactNode;
+    image?: React.ReactNode;
+    headline?: string | React.ReactNode;
+    metaHeadline?: string | React.ReactNode;
+    maxWidth?: boolean;
+    textBgColor?: string;
+}
+export declare const PageLayoutHero: React.FC<PageLayoutHeroProps>;

package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import heroStyles from './PageLayoutHero.module.css';
+import layoutStyles from '../../PageLayout.module.css';
+export const PageLayoutHero = ({ children, link, metaHeadline, headline, image, maxWidth = true, textBgColor = 'var(--color-primary-900)', }) => {
+    const content = (_jsx("div", { className: `${heroStyles.heroContainer} ${maxWidth ? layoutStyles.maxWidth : ''}`, children: _jsxs("div", { className: heroStyles.splitWrapper, children: [_jsx("div", { className: heroStyles.imageColumn, children: image }), _jsx("div", { className: heroStyles.textColumn, style: { backgroundColor: textBgColor }, children: _jsxs("div", { className: heroStyles.textInner, children: [metaHeadline && _jsx("div", { className: heroStyles.metaHeadline, children: metaHeadline }), headline && (_jsx("div", { className: heroStyles.headline, children: _jsx("h2", { children: headline }) })), children] }) })] }) }));
+    return link ? _jsx(_Fragment, { children: link(content) }) : _jsx(_Fragment, { children: content });
+};

package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.module.css

@@ -0,0 +1,84 @@
+.heroContainer {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--color-brand);
+}
+
+.splitWrapper {
+  display: flex;
+  width: 100%;
+  height: clamp(260px, 60vh, 540px);
+  overflow: hidden;
+}
+
+/* LEFT SIDE — IMAGE */
+.imageColumn {
+  flex: 0 0 60%;
+  position: relative;
+  overflow: hidden;
+}
+
+.imageColumn img,
+.imageColumn picture,
+.imageColumn video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* RIGHT SIDE — TEXT BLOCK */
+.textColumn {
+  flex: 0 0 40%;
+  color: var(--color-fg-on-brand);
+  display: flex;
+  align-items: flex-end;
+  padding: var(--spacing-lg);
+  position: relative;
+}
+
+.textInner {
+  z-index: 1;
+  max-width: 500px;
+}
+
+.metaHeadline {
+  text-transform: uppercase;
+  opacity: 0.9;
+  font-size: var(--font-size-lg);
+  font-weight: 400;
+  margin-bottom: var(--spacing-xs);
+}
+
+.metaHeadline::after {
+  content: '';
+  display: block;
+  width: 40px;
+  height: 3px;
+  background-color: var(--color-fg-on-brand);
+  margin-top: 4px;
+  border-radius: 2px;
+}
+
+.headline h2 {
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: var(--font-size-3xl);
+  color: var(--color-fg-on-brand);
+}
+
+@media (max-width: 900px) {
+  .splitWrapper {
+    flex-direction: column;
+    height: auto;
+  }
+
+  .imageColumn,
+  .textColumn {
+    flex: none;
+    width: 100%;
+  }
+
+  .textColumn {
+    padding: var(--spacing-xl) var(--spacing-lg);
+  }
+}

package/dist/components/pagination/Pagination.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export type PageChangeEvent = {
     page: number;
     take: number;
@@ -12,6 +13,8 @@ interface PaginationProps {
     onPageChange?: (e: PageChangeEvent) => void;
     lazy?: boolean;
     pageSizeOptions?: number[];
+    showFirstLast?: boolean;
+    showGoToPage?: boolean;
 }
-export declare function Pagination({ itemsCount, skip, take, onPageChange, pageSizeOptions, }: PaginationProps): React.ReactNode;
+export declare function Pagination({ itemsCount, skip, take, onPageChange, pageSizeOptions, showFirstLast, showGoToPage, }: PaginationProps): ReactNode;
 export {};

package/dist/components/pagination/Pagination.js

@@ -1,111 +1,44 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight, ChevronDown, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import { useMemo, useCallback } from 'react';
 import styles from './Pagination.module.css';
 import { Button } from '../button/Button';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
-import { Popover } from '../popover/Popover';
 import { Menu } from '../menu/Menu';
-
+import { Popover } from '../popover/Popover';
 const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-function Pagination({
-  itemsCount = 0,
-  skip = 0,
-  take = DEFAULT_PAGE_SIZE_OPTIONS[1],
-  onPageChange,
-  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS
-}) {
-  const totalPages = useMemo(() => {
-    const pages = Math.max(1, Math.ceil(itemsCount / Math.max(1, take)));
-    return pages;
-  }, [itemsCount, take]);
-  const currentPage = useMemo(() => {
-    const p = Math.floor(skip / Math.max(1, take)) + 1;
-    return Math.min(Math.max(1, p), totalPages);
-  }, [skip, take, totalPages]);
-  const emit = useCallback(
-    (page) => {
-      const clampedPage = Math.min(Math.max(1, page), totalPages);
-      const nextSkip = (clampedPage - 1) * take;
-      onPageChange == null ? void 0 : onPageChange({
-        page: clampedPage,
-        take,
-        skip: nextSkip,
-        totalPages
-      });
-    },
-    [onPageChange, take, totalPages]
-  );
-  const prevPage = useCallback(() => emit(currentPage - 1), [emit, currentPage]);
-  const nextPage = useCallback(() => emit(currentPage + 1), [emit, currentPage]);
-  const goToPage = useCallback((page) => emit(page), [emit]);
-  const pageList = useMemo(() => {
-    const visiblePages = 3;
-    const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
-    let startIndex = Math.max(currentPage - Math.floor(visiblePages / 2) - 1, 0);
-    let endIndex = startIndex + visiblePages;
-    if (endIndex > totalPages) {
-      endIndex = totalPages;
-      startIndex = Math.max(endIndex - visiblePages, 0);
-    }
-    return {
-      first: startIndex > 0 ? 1 : void 0,
-      items: pages.slice(startIndex, endIndex),
-      last: endIndex < totalPages ? totalPages : void 0
-    };
-  }, [totalPages, currentPage]);
-  const handlePageSizeChange = useCallback(
-    (size) => {
-      onPageChange == null ? void 0 : onPageChange({
-        page: 1,
-        take: size,
-        skip: 0,
-        totalPages: Math.max(1, Math.ceil(itemsCount / Math.max(1, size)))
-      });
-    },
-    [onPageChange, itemsCount]
-  );
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    /* @__PURE__ */ jsx(Button, { disabled: currentPage === 1, icon: /* @__PURE__ */ jsx(ArrowLeft, {}), onClick: prevPage }),
-    pageList.first && /* @__PURE__ */ jsxs("span", { className: styles.ellipsisButton, children: [
-      /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: () => goToPage(1), children: pageList.first }),
-      "\u2026"
-    ] }),
-    pageList.items.map((page) => /* @__PURE__ */ jsx(
-      Button,
-      {
-        "aria-current": page === currentPage ? "page" : void 0,
-        variant: "outlined",
-        onClick: () => goToPage(page),
-        active: page === currentPage,
-        children: page
-      },
-      page
-    )),
-    pageList.last !== void 0 && /* @__PURE__ */ jsxs("span", { className: styles.ellipsisButton, children: [
-      "\u2026",
-      /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: () => goToPage(pageList.last), children: pageList.last })
-    ] }),
-    /* @__PURE__ */ jsx(Button, { disabled: currentPage === totalPages, icon: /* @__PURE__ */ jsx(ArrowRight, {}), onClick: nextPage }),
-    /* @__PURE__ */ jsx(
-      Popover,
-      {
-        trigger: (event, icon) => /* @__PURE__ */ jsxs(Button, { variant: "outlined", onClick: event, children: [
-          "Vis ",
-          take,
-          icon
-        ] }),
-        children: /* @__PURE__ */ jsx(Menu, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(Menu.Item, { active: size === take, children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => {
-              handlePageSizeChange(size);
-            },
-            children: size
-          }
-        ) }, size)) })
-      }
-    )
-  ] });
+export function Pagination({ itemsCount = 0, skip = 0, take = DEFAULT_PAGE_SIZE_OPTIONS[1], onPageChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, showFirstLast = true, showGoToPage = true, }) {
+    const totalPages = useMemo(() => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))), [itemsCount, take]);
+    const currentPage = useMemo(() => {
+        const p = Math.floor(skip / Math.max(1, take)) + 1;
+        return Math.min(Math.max(1, p), totalPages);
+    }, [skip, take, totalPages]);
+    const emit = useCallback((page, nextTake = take) => {
+        const nextTotalPages = Math.max(1, Math.ceil(itemsCount / Math.max(1, nextTake)));
+        const clampedPage = Math.min(Math.max(1, page), nextTotalPages);
+        const nextSkip = (clampedPage - 1) * nextTake;
+        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange({
+            page: clampedPage,
+            take: nextTake,
+            skip: nextSkip,
+            totalPages: nextTotalPages,
+        });
+    }, [onPageChange, take, itemsCount]);
+    const firstPage = useCallback(() => emit(1), [emit]);
+    const lastPage = useCallback(() => emit(totalPages), [emit, totalPages]);
+    const prevPage = useCallback(() => emit(currentPage - 1), [emit, currentPage]);
+    const nextPage = useCallback(() => emit(currentPage + 1), [emit, currentPage]);
+    const goToPage = useCallback((page) => emit(page), [emit]);
+    const canPrev = currentPage > 1;
+    const canNext = currentPage < totalPages;
+    const rangeLabel = useMemo(() => {
+        if (itemsCount <= 0)
+            return '0 af 0';
+        const first = skip + 1;
+        const last = Math.min(skip + take, itemsCount);
+        return `${first.toLocaleString('da-DK')}\u2013${last.toLocaleString('da-DK')} af ${itemsCount.toLocaleString('da-DK')}`;
+    }, [itemsCount, skip, take]);
+    const pages = useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
+    const handlePageSizeChange = useCallback((size) => emit(1, size), [emit]);
+    return (_jsxs("div", { className: styles.container, children: [showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsLeft, {}), disabled: !canPrev, onClick: firstPage, "aria-label": "First page" })), _jsx(Button, { size: "sm", icon: _jsx(ArrowLeft, {}), disabled: !canPrev, onClick: prevPage, "aria-label": "Previous page" }), _jsx("div", { className: styles.range, "aria-live": "polite", children: rangeLabel }), _jsx(Button, { size: "sm", icon: _jsx(ArrowRight, {}), disabled: !canNext, onClick: nextPage, "aria-label": "Next page" }), showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsRight, {}), disabled: !canNext, onClick: lastPage, "aria-label": "Last page" })), showGoToPage && (_jsx(Popover, { trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Side ", currentPage, "/", totalPages, " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pages.map(page => (_jsx(Menu.Item, { active: page === currentPage, children: _jsx("button", { onClick: () => goToPage(page), children: page }) }, page))) }) })), _jsx(Popover, { trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Vis ", take, " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pageSizeOptions.map(size => (_jsx(Menu.Item, { active: size === take, children: _jsx("button", { onClick: () => handlePageSizeChange(size), children: size }) }, size))) }) })] }));
 }
-
-export { Pagination };

package/dist/components/pagination/Pagination.module.css

@@ -1,17 +1,25 @@
 .container {
   display: flex;
-  gap: 5px;
-  align-items: flex-end;
+  gap: var(--spacing-xxs);
+  align-items: center;
   justify-content: center;
   margin: 0 auto;
+  max-width: 100%;
+  overflow-x: auto;
 }
 
 .ellipsisButton {
   display: none;
 }
 
-@media (min-width: 480px) {
+@media (min-width: var(--bp-xs)) {
   .ellipsisButton {
     display: contents;
   }
 }
+.range {
+  min-width: 110px;
+  text-align: center;
+  font-size: var(--font-size-xs);
+  padding: 0 var(--spacing-xxs);
+}

package/dist/components/panel/Panel.d.ts

@@ -1,10 +1,11 @@
+import type { ReactNode, JSX } from 'react';
 interface PanelProps {
     header: string;
-    headerIcon?: React.ReactNode;
+    headerIcon?: ReactNode;
     severity?: Severity;
-    children: React.ReactNode;
+    children: ReactNode;
     size?: 'sm' | 'md' | 'lg';
 }
-import { Severity } from '@/constants/severity.types';
+import { Severity } from '../../constants/severity.types';
 export declare function Panel({ header, headerIcon, children, severity, size }: PanelProps): JSX.Element;
 export {};

package/dist/components/panel/Panel.js

@@ -1,12 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Headline } from '../headline/Headline';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Panel.module.css';
-
-function Panel({ header, headerIcon, children, severity, size }) {
-  return /* @__PURE__ */ jsxs("section", { className: `${styles.container} ${size ? styles[size] : ""}`, children: [
-    /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 3, icon: headerIcon, severity, children: header }) }),
-    /* @__PURE__ */ jsx("div", { className: styles.content, children })
-  ] });
+import { Headline } from '../headline/Headline';
+export function Panel({ header, headerIcon, children, severity, size }) {
+    return (_jsxs("section", { className: `${styles.container} ${size ? styles[size] : ''}`, children: [_jsx("div", { className: styles.header, children: _jsx(Headline, { disableMargin: true, size: 3, icon: headerIcon, severity: severity, children: header }) }), _jsx("div", { className: styles.content, children: children })] }));
 }
-
-export { Panel };

package/dist/components/panel/Panel.module.css

@@ -1,7 +1,7 @@
 .container {
   border: 1px solid var(--color-border-strong);
   border-radius: var(--border-radius-default);
-  background-color: var(--color-bg);
+  background-color: var(--color-bg-surface);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -11,19 +11,17 @@
   border-bottom: 1px solid var(--color-border-strong);
 }
 
-
 .content {
   padding: var(--spacing-md);
 }
 
-.header
-{
+.header {
   padding: var(--spacing-sm) var(--spacing-md);
 }
 
-
 .container.sm {
-  .header,.content {
+  .header,
+  .content {
     padding: var(--spacing-sm) var(--spacing-md);
   }
-}
+}

package/dist/components/popover/Popover.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
 interface PopoverProps {
     trigger: (event: (e: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => void, icon: React.ReactNode) => React.ReactNode;
-    children: React.ReactNode;
+    children: ((close?: () => void) => React.ReactNode) | React.ReactNode;
     minWidth?: string;
+    matchTriggerWidth?: boolean;
     viewportPadding?: number;
     edgeBuffer?: number;
+    dataCy?: string;
 }
 export interface PopoverHandle {
     close: () => void;