Quick Start Guide
To begin using the Next Sapien Component Library in your Angular projects, follow these simple steps:
Install the Library into Your Angular Project
You can install the library into your Angular project using npm. Navigate to your Angular project directory and run: `npm install nextsapien-component-lib`
Install The Required fonts

- You can download the Gilroy fonts from this link and put them in your assets folder.
- For Calistoga and Material Icons, you can add the following lines to your index.html file:
  - <link rel="preconnect" href="https://fonts.googleapis.com" />
  - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  - <link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet" />
  - <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Using Assets from nextsapien-component-lib

The nextsapien-component-lib library exports required assets that can be accessed from the following path:

    node_modules/nextsapien-component-lib/src/assets

To include these assets in your project, you can configure your Angular workspace's angular.json file as follows:

          {
            "assets": [
              {
                "glob": "**/*",
                "input": "node_modules/nextsapien-component-lib/src/assets",
                "output": "/assets/"
              }
            ]
          }

CSS Overrides
To integrate Angular Material components with the Next Sapien design language, it's recommended to include specific CSS overrides in your project. Add the following code snippet to your global styles.scss file: `

              // Custom Theming for Angular Material
              @use '@angular/material' as mat;

              $custom-typography: mat.define-typography-config(
                $font-family: 'Gilroy-Regular, serif',
              );

              @include mat.core();

              $ns-add-in-primary: mat.define-palette(mat.$indigo-palette);
              $ns-add-in-accent: mat.define-palette(mat.$pink-palette);

              $ns-add-in-warn: mat.define-palette(mat.$red-palette);

              $ns-add-in-theme: mat.define-dark-theme(
                (
                  color: (
                    primary: $ns-add-in-primary,
                    accent: $ns-add-in-accent,
                    warn: $ns-add-in-warn,
                  ),
                  typography: $custom-typography,
                  density: -12,
                )
              );

              @include mat.all-component-themes($ns-add-in-theme);

              @import 'node_modules/nextsapien-component-lib/src/lib/shared-styles/styles.scss';

`
Start Using Next Sapien Components
Once installed, you can start using the Next Sapien Component Library's components in your Angular project. Import the required modules and use the components as needed within your application.