@openmrs/esm-styleguide 8.0.1-pre.3585 → 8.0.1-pre.3600

package/dist/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './pagination.component';

package/dist/pagination/pagination.component.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type PaginationProps as CarbonPaginationProps } from '@carbon/react';
+export interface PaginationProps {
+    /** The count of current items displayed */
+    currentItems: number;
+    /** The count of total items displayed */
+    totalItems: number;
+    /** The current page number */
+    pageNumber: number;
+    /** The size of each page */
+    pageSize: number;
+    /** A callback to be called when the page changes */
+    onPageNumberChange?: CarbonPaginationProps['onChange'];
+    /** An optional URL the user should be directed to if they click on the link to see all results */
+    dashboardLinkUrl?: string;
+    /** Optional text to display instead of the default "See all" */
+    dashboardLinkLabel?: string;
+}
+/**
+ * Re-usable pagination bar
+ */
+export declare const Pagination: React.FC<PaginationProps>;

package/dist/public.d.ts

@@ -1,24 +1,25 @@
-export { showNotification, showActionableNotification } from './notifications';
-export { type NotificationDescriptor, type InlineNotificationType } from './notifications/notification.component';
-export { type ActionableNotificationDescriptor, type ActionableNotificationType, } from './notifications/actionable-notification.component';
-export { showToast } from './toasts';
-export { showModal } from './modals';
-export * from './workspaces/public';
-export { type ToastDescriptor, type ToastType, type ToastNotificationMeta } from './toasts/toast.component';
-export { showSnackbar } from './snackbars';
-export { type SnackbarDescriptor, type SnackbarType, type SnackbarMeta } from './snackbars/snackbar.component';
-export * from './left-nav';
+export { type StyleguideConfigObject } from './config-schema';
+export * from './cards';
+export * from './custom-overflow-menu';
 export * from './dashboard-extension';
-export * from './error-state';
 export * from './datepicker';
-export * from './responsive-wrapper';
-export * from './patient-banner';
-export * from './patient-photo';
-export * from './custom-overflow-menu';
+export * from './diagnosis-tags';
+export * from './empty-card';
+export * from './error-state';
 export * from './icons/icons';
+export * from './left-nav';
+export * from './location-picker';
+export { showModal } from './modals';
+export { showNotification, showActionableNotification } from './notifications';
+export { type ActionableNotificationDescriptor, type ActionableNotificationType, } from './notifications/actionable-notification.component';
+export { type NotificationDescriptor, type InlineNotificationType } from './notifications/notification.component';
 export * from './page-header';
+export * from './pagination';
+export * from './patient-banner';
+export * from './patient-photo';
 export * from './pictograms/pictograms';
-export { type StyleguideConfigObject } from './config-schema';
-export * from './location-picker';
-export * from './diagnosis-tags';
+export * from './responsive-wrapper';
+export { showSnackbar, type SnackbarDescriptor, type SnackbarType, type SnackbarMeta } from './snackbars';
+export { showToast, type ToastDescriptor, type ToastType, type ToastNotificationMeta } from './toasts';
+export * from './workspaces/public';
 export { launchWorkspace2, launchWorkspaceGroup2, closeWorkspaceGroup2, getRegisteredWorkspace2Names, useWorkspace2Context, ActionMenuButton2, Workspace2, type Workspace2Definition, type Workspace2DefinitionProps, } from './workspaces2';

package/dist/snackbars/index.d.ts

@@ -1,4 +1,5 @@
 import type { SnackbarDescriptor } from './snackbar.component';
+export { type SnackbarDescriptor, type SnackbarType, type SnackbarMeta } from './snackbar.component';
 /**
  * Starts a rendering host for snack bar notifications. Should only be used by the app shell.
  * Under normal conditions there is no need to use this function.

package/dist/toasts/index.d.ts

@@ -1,4 +1,5 @@
 import type { ToastDescriptor } from './toast.component';
+export { type ToastDescriptor, type ToastType, type ToastNotificationMeta } from './toast.component';
 /**
  * Starts a rendering host for toast notifications. Should only be used by the app shell.
  * Under normal conditions there is no need to use this function.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "8.0.1-pre.3585",
+  "version": "8.0.1-pre.3600",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "main": "dist/openmrs-esm-styleguide.js",
@@ -98,17 +98,17 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "8.0.1-pre.3585",
-    "@openmrs/esm-config": "8.0.1-pre.3585",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3585",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3585",
-    "@openmrs/esm-extensions": "8.0.1-pre.3585",
-    "@openmrs/esm-globals": "8.0.1-pre.3585",
-    "@openmrs/esm-navigation": "8.0.1-pre.3585",
-    "@openmrs/esm-react-utils": "8.0.1-pre.3585",
-    "@openmrs/esm-state": "8.0.1-pre.3585",
-    "@openmrs/esm-translations": "8.0.1-pre.3585",
-    "@openmrs/esm-utils": "8.0.1-pre.3585",
+    "@openmrs/esm-api": "8.0.1-pre.3600",
+    "@openmrs/esm-config": "8.0.1-pre.3600",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3600",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3600",
+    "@openmrs/esm-extensions": "8.0.1-pre.3600",
+    "@openmrs/esm-globals": "8.0.1-pre.3600",
+    "@openmrs/esm-navigation": "8.0.1-pre.3600",
+    "@openmrs/esm-react-utils": "8.0.1-pre.3600",
+    "@openmrs/esm-state": "8.0.1-pre.3600",
+    "@openmrs/esm-translations": "8.0.1-pre.3600",
+    "@openmrs/esm-utils": "8.0.1-pre.3600",
     "@rspack/cli": "^1.3.11",
     "@rspack/core": "^1.3.11",
     "@types/geopattern": "^1.2.9",

package/src/cards/card-header.component.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useLayoutType } from '@openmrs/esm-react-utils';
+import styles from './card-header.module.scss';
+
+export interface CardHeaderProps {
+  /** The title for this card. This must be a pre-translated string. */
+  title: string;
+  /** The contents of the card header to render if any. */
+  children?: React.ReactNode;
+}
+
+/**
+ * Re-usable header component for O3-style cards, like those found on the patient chart
+ */
+export function CardHeader({ title, children }: CardHeaderProps) {
+  const isTablet = useLayoutType() === 'tablet';
+
+  return (
+    <div
+      className={classNames({
+        [styles.tabletHeader]: isTablet,
+        [styles.desktopHeader]: !isTablet,
+      })}
+    >
+      <h4>{title}</h4>
+      {children}
+    </div>
+  );
+}

package/src/cards/card-header.module.scss

@@ -0,0 +1,45 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '../vars' as *;
+
+.desktopHeader,
+.tabletHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-background;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.desktopHeader {
+  height: layout.$spacing-09;
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeader {
+  height: 4.5rem;
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .desktopHeader,
+  .tabletHeader {
+    text-align: right;
+    padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
+  }
+}

package/src/cards/index.ts

@@ -0,0 +1 @@
+export { CardHeader, type CardHeaderProps } from './card-header.component';

package/src/dashboard-extension/index.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { BrowserRouter, useLocation } from 'react-router-dom';
 import { shallowEqual } from '@openmrs/esm-utils';
 import { ConfigurableLink, MaybeIcon } from '@openmrs/esm-framework';
 import { type IconId } from '../icons';
@@ -10,8 +10,8 @@ import styles from './dashboard.module.scss';
 export interface DashboardExtensionProps {
   path: string;
   title: string;
-  basePath: string;
-  icon: IconId;
+  basePath?: string;
+  icon?: IconId;
 }
 
 export const DashboardExtension = ({ path, title, basePath, icon }: DashboardExtensionProps) => {
@@ -49,3 +49,13 @@ export const DashboardExtension = ({ path, title, basePath, icon }: DashboardExt
     </div>
   );
 };
+
+export function createDashboard(props: Omit<DashboardExtensionProps, 'basePath'>) {
+  return function ({ basePath }: { basePath: string }) {
+    return (
+      <BrowserRouter>
+        <DashboardExtension basePath={basePath} {...props} />
+      </BrowserRouter>
+    );
+  };
+}

package/src/declarations.d.ts

@@ -1,5 +1,17 @@
-declare module '*.css';
-declare module '*.scss';
+declare module '*.css' {
+  interface Styles {
+    [key: string]: string;
+  }
+  const content: Styles;
+  export default content;
+}
+declare module '*.scss' {
+  interface Styles {
+    [key: string]: string;
+  }
+  const content: Styles;
+  export default content;
+}
 declare module '*.svg' {
   const content: string;
   export default content;

package/src/empty-card/empty-card-registration.ts

@@ -0,0 +1,6 @@
+import emptyStateIllustration from './empty-data-illustration.svg';
+import { addSvg } from '../svg-utils';
+
+export function setupEmptyCard() {
+  addSvg('omrs-empty-state-illustration', emptyStateIllustration);
+}

package/src/empty-card/empty-card.component.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Button, Layer, Tile } from '@carbon/react';
+import { useLayoutType } from '@openmrs/esm-react-utils';
+import { getCoreTranslation } from '@openmrs/esm-translations';
+import { CardHeader } from '../cards';
+import styles from './empty-card.module.scss';
+
+export interface EmptyCardProps {
+  /** The name of the type of item that would be displayed here if not empty. This must be a pre-translated string. */
+  displayText: string;
+  /** The title to use for this empty component. This must be a pre-translated string. */
+  headerTitle: string;
+  /** A callback to invoke when the user tries to record a new item. */
+  launchForm?(): void;
+}
+
+export const EmptyCardIllustration = ({ width = '64', height = '64' }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 64 64">
+      <use href={`#omrs-empty-data-illustration`} />
+    </svg>
+  );
+};
+
+/**
+ * Re-usable card for displaying an empty state
+ */
+export const EmptyCard: React.FC<EmptyCardProps> = (props) => {
+  const isTablet = useLayoutType() === 'tablet';
+  const launchForm = props.launchForm;
+
+  return (
+    <Layer className={styles.layer}>
+      <Tile className={styles.tile}>
+        <CardHeader title={props.headerTitle} />
+        <EmptyCardIllustration />
+        <p className={styles.content}>
+          {getCoreTranslation('emptyStateText', 'There are no {{displayText}} to display', {
+            displayText: props.displayText,
+          })}
+        </p>
+        <p className={styles.action}>
+          {launchForm && (
+            <Button onClick={() => launchForm()} kind="ghost" size={isTablet ? 'lg' : 'sm'}>
+              {getCoreTranslation('recordNewEntry', 'Record {{ displayText }}', {
+                displayText: props.displayText,
+              })}
+            </Button>
+          )}
+        </p>
+      </Tile>
+    </Layer>
+  );
+};

package/src/empty-card/empty-card.module.scss

@@ -0,0 +1,27 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '../vars' as *;
+
+.action {
+  margin-bottom: layout.$spacing-03;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.heading:after {
+  content: '';
+  display: block;
+  width: layout.$spacing-07;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}

package/src/empty-card/empty-card.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { EmptyCard } from './empty-card.component';
+
+describe('EmptyCard', () => {
+  const defaultProps = {
+    displayText: 'medications',
+    headerTitle: 'Medications',
+  };
+
+  it('renders the header title', () => {
+    render(<EmptyCard {...defaultProps} />);
+    expect(screen.getByRole('heading', { name: /medications/i })).toBeInTheDocument();
+  });
+
+  it('renders the empty state text with the display text', () => {
+    render(<EmptyCard {...defaultProps} />);
+    expect(screen.getByText(/there are no medications to display/i)).toBeInTheDocument();
+  });
+
+  it('does not render the action button when launchForm is not provided', () => {
+    render(<EmptyCard {...defaultProps} />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('renders the action button when launchForm is provided', () => {
+    const launchForm = vi.fn();
+    render(<EmptyCard {...defaultProps} launchForm={launchForm} />);
+    expect(screen.getByRole('button', { name: /record medications/i })).toBeInTheDocument();
+  });
+
+  it('calls launchForm when the action button is clicked', async () => {
+    const user = userEvent.setup();
+    const launchForm = vi.fn();
+    render(<EmptyCard {...defaultProps} launchForm={launchForm} />);
+
+    const button = screen.getByRole('button', { name: /record medications/i });
+    await user.click(button);
+
+    expect(launchForm).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders with different display text', () => {
+    render(<EmptyCard displayText="allergies" headerTitle="Allergies" />);
+    expect(screen.getByRole('heading', { name: /allergies/i })).toBeInTheDocument();
+    expect(screen.getByText(/there are no allergies to display/i)).toBeInTheDocument();
+  });
+
+  it('renders the empty data illustration', () => {
+    render(<EmptyCard {...defaultProps} />);
+    // eslint-disable-next-line testing-library/no-node-access
+    const svg = document.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('viewBox', '0 0 64 64');
+  });
+});

package/src/empty-card/empty-data-illustration.svg

@@ -0,0 +1,32 @@
+<svg viewBox="0 0 64 64">
+  <g fill="none" fillRule="evenodd">
+    <path
+      d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+      fill="#F4F4F4"
+    />
+    <path
+      d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+      fill="#8D8D8D"
+    />
+    <path
+      d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+      fill="#C6C6C6"
+    />
+    <circle fill="#C6C6C6" cx="17.636" cy="2.314" r="1.855" />
+    <circle fill="#FFF" fillRule="nonzero" cx="17.636" cy="2.314" r="1.175" />
+    <path
+      d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+      fill="#F4F4F4"
+    />
+    <path
+      d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+      fill="#8D8D8D"
+    />
+    <path
+      d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+      fill="#C6C6C6"
+    />
+    <circle fill="#C6C6C6" cx="40.218" cy="9.755" r="1.855" />
+    <circle fill="#FFF" fillRule="nonzero" cx="40.218" cy="9.755" r="1.13" />
+  </g>
+</svg>

package/src/empty-card/index.ts

@@ -0,0 +1 @@
+export { EmptyCard, EmptyCardIllustration, type EmptyCardProps } from './empty-card.component';

package/src/error-state/error-state.component.tsx

@@ -1,23 +1,21 @@
 import React from 'react';
 import { Layer, Tile } from '@carbon/react';
 import { getCoreTranslation } from '@openmrs/esm-translations';
-import { useLayoutType } from '@openmrs/esm-react-utils';
 import styles from './error-state.module.scss';
+import { CardHeader } from '../cards';
 
 export interface ErrorStateProps {
+  /** The error that caused this error card to be rendered. Expected to be a failed fetch result. */
   error: any;
+  /** The title to use for this empty component. This must be a pre-translated string. */
   headerTitle: string;
 }
 
 export const ErrorState: React.FC<ErrorStateProps> = ({ error, headerTitle }) => {
-  const isTablet = useLayoutType() === 'tablet';
-
   return (
     <Layer>
       <Tile className={styles.tile}>
-        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
-          <h4>{headerTitle}</h4>
-        </div>
+        <CardHeader title={headerTitle} />
         <p className={styles.errorMessage}>
           {getCoreTranslation('error', 'Error')} {`${error?.response?.status}: `}
           {error?.response?.statusText}
@@ -27,3 +25,6 @@ export const ErrorState: React.FC<ErrorStateProps> = ({ error, headerTitle }) =>
     </Layer>
   );
 };
+
+export const ErrorCard = ErrorState;
+export type ErrorCardProps = ErrorStateProps;

package/src/error-state/error-state.module.scss

@@ -15,35 +15,6 @@
   color: $text-02;
 }
 
-.desktopHeading {
-  h4 {
-    @include type.type-style('heading-compact-02');
-    color: $text-02;
-  }
-}
-
-.tabletHeading {
-  h4 {
-    @include type.type-style('heading-03');
-    color: $text-02;
-  }
-}
-
-.desktopHeading,
-.tabletHeading {
-  text-align: left;
-  text-transform: capitalize;
-  margin-bottom: layout.$spacing-05;
-
-  h4:after {
-    content: '';
-    display: block;
-    width: layout.$spacing-07;
-    padding-top: 0.188rem;
-    border-bottom: 0.375rem solid var(--brand-03);
-  }
-}
-
 .tile {
   text-align: center;
   border: 1px solid $ui-03;

package/src/error-state/error-state.test.tsx

@@ -31,7 +31,7 @@ describe('ErrorState', () => {
 
     render(<ErrorState headerTitle="test" error={{}} />);
     // eslint-disable-next-line testing-library/no-node-access
-    expect(screen.getByRole('heading').parentElement?.getAttribute('class')).toContain('tabletHeading');
+    expect(screen.getByRole('heading').parentElement?.getAttribute('class')).toContain('tabletHeader');
   });
 
   it('should render desktop layout when layout type is not tablet', () => {
@@ -39,7 +39,7 @@ describe('ErrorState', () => {
 
     render(<ErrorState headerTitle="test" error={{}} />);
     // eslint-disable-next-line testing-library/no-node-access
-    expect(screen.getByRole('heading').parentElement?.getAttribute('class')).toContain('desktopHeading');
+    expect(screen.getByRole('heading').parentElement?.getAttribute('class')).toContain('desktopHeader');
   });
 
   it('should handle error with partial response data', () => {

package/src/icons/icons.tsx

@@ -862,18 +862,18 @@ export const ShoppingCartAddItemIcon = ShoppingCartArrowDownIcon;
  * ```
  */
 export const MaybeIcon = memo(
-  forwardRef<SVGSVGElement, { icon: string; fallback?: React.ReactNode } & IconProps>(function MaybeIcon(
+  forwardRef<SVGSVGElement, { icon: string | undefined; fallback?: React.ReactNode } & IconProps>(function MaybeIcon(
     { icon, fallback, ...iconProps },
     ref,
   ) {
-    const iconRef = useRef(document.getElementById(icon));
+    const iconRef = useRef(icon ? document.getElementById(icon) : undefined);
 
     useEffect(() => {
       const container = document.getElementById('omrs-svgs-container');
       const callback: MutationCallback = (mutationList) => {
         for (const mutation of mutationList) {
           if (mutation.type === 'childList') {
-            iconRef.current = document.getElementById(icon);
+            iconRef.current = icon ? document.getElementById(icon) : undefined;
           }
         }
       };

package/src/index.ts

@@ -1,10 +1,11 @@
 import { defineConfigSchema } from '@openmrs/esm-config';
-import { setupLogo } from './logo';
-import { setupIcons } from './icons/icon-registration';
+import { registerModal } from '@openmrs/esm-extensions';
 import { setupBranding } from './brand';
 import { esmStyleGuideSchema } from './config-schema';
+import { setupEmptyCard } from './empty-card/empty-card-registration';
+import { setupIcons } from './icons/icon-registration';
+import { setupLogo } from './logo';
 import { setupPictograms } from './pictograms/pictogram-registration';
-import { registerModal } from '@openmrs/esm-extensions';
 import { getSyncLifecycle } from '@openmrs/esm-react-utils';
 import Workspace2ClosePromptModal from './workspaces2/workspace2-close-prompt.modal';
 
@@ -13,6 +14,7 @@ setupBranding();
 setupLogo();
 setupIcons();
 setupPictograms();
+setupEmptyCard();
 
 registerModal({
   name: 'workspace2-close-prompt',

package/src/internal.ts

@@ -1,9 +1,11 @@
 export * from './breakpoints';
+export * from './cards';
 export * from './config-schema';
 export * from './custom-overflow-menu';
 export * from './dashboard-extension';
 export * from './datepicker';
 export * from './diagnosis-tags';
+export * from './empty-card';
 export * from './error-state';
 export * from './icons/icons';
 export * from './left-nav';
@@ -13,6 +15,7 @@ export * from './notifications';
 export * from './notifications/actionable-notification.component';
 export * from './notifications/notification.component';
 export * from './page-header';
+export * from './pagination';
 export * from './patient-banner';
 export * from './patient-photo';
 export * from './pictograms/pictograms';

package/src/pagination/index.ts

@@ -0,0 +1 @@
+export * from './pagination.component';