@fernir2/saas-kit-cli 0.1.29 → 0.1.31

package/base-repo/app-constants/aliases.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 'use strict';
 
-const aliasSymbols={'atSign':'@','rootAlias':'@root/'};const typescriptAliases={'@':'./src','@cli':'./packages/level2/cli','@server':'./packages/level2/server','@schemas':'./generated','@npm-commands':'./packages/level2/npm-commands','@root':'.','@enricher':'./packages/level2/enricher','@packages':'./packages','@common':'./packages/level2/common','@meta':'./packages/level2/meta','@fd-toolbox':'./packages/level2/fd-toolbox','@fd-toolbox-core':'./packages/level2/fd-toolbox-core','@fd-component-toolbox':'./packages/level2/fd-component-toolbox','@fd-app-toolbox':'./packages/level2/fd-app-toolbox','@client':'./packages/level2/client'};const modulePathAliases=Object['fromEntries'](Object['entries'](typescriptAliases)['map'](([_0x4c5073,_0x2c2e15])=>[_0x4c5073+'/*',[_0x2c2e15+'/*']]));
+const aliasSymbols={'atSign':'@','rootAlias':'@root/'};const typescriptAliases={'@':'./src','@cli':'./packages/level2/cli','@server':'./packages/level2/server','@schemas':'./generated','@npm-commands':'./packages/level2/npm-commands','@root':'.','@enricher':'./packages/level2/enricher','@packages':'./packages','@common':'./packages/level2/common','@meta':'./packages/level2/meta','@fd-toolbox':'./packages/level2/fd-toolbox','@fd-toolbox-core':'./packages/level2/fd-toolbox-core','@fd-component-toolbox':'./packages/level2/fd-component-toolbox','@fd-app-toolbox':'./packages/level2/fd-app-toolbox','@client':'./packages/level2/client'};const modulePathAliases=Object['fromEntries'](Object['entries'](typescriptAliases)['map'](([_0x10cb80,_0x7a5991])=>[_0x10cb80+'/*',[_0x7a5991+'/*']]));
 
 exports.aliasSymbols = aliasSymbols;
 exports.modulePathAliases = modulePathAliases;

package/base-repo/app-constants/aliases.js

@@ -1,4 +1,4 @@
 'use strict';
-const aliasSymbols={'atSign':'@','rootAlias':'@root/'};const typescriptAliases={'@':'./src','@cli':'./packages/level2/cli','@server':'./packages/level2/server','@schemas':'./generated','@npm-commands':'./packages/level2/npm-commands','@root':'.','@enricher':'./packages/level2/enricher','@packages':'./packages','@common':'./packages/level2/common','@meta':'./packages/level2/meta','@fd-toolbox':'./packages/level2/fd-toolbox','@fd-toolbox-core':'./packages/level2/fd-toolbox-core','@fd-component-toolbox':'./packages/level2/fd-component-toolbox','@fd-app-toolbox':'./packages/level2/fd-app-toolbox','@client':'./packages/level2/client'};const modulePathAliases=Object['fromEntries'](Object['entries'](typescriptAliases)['map'](([_0x4c5073,_0x2c2e15])=>[_0x4c5073+'/*',[_0x2c2e15+'/*']]));
+const aliasSymbols={'atSign':'@','rootAlias':'@root/'};const typescriptAliases={'@':'./src','@cli':'./packages/level2/cli','@server':'./packages/level2/server','@schemas':'./generated','@npm-commands':'./packages/level2/npm-commands','@root':'.','@enricher':'./packages/level2/enricher','@packages':'./packages','@common':'./packages/level2/common','@meta':'./packages/level2/meta','@fd-toolbox':'./packages/level2/fd-toolbox','@fd-toolbox-core':'./packages/level2/fd-toolbox-core','@fd-component-toolbox':'./packages/level2/fd-component-toolbox','@fd-app-toolbox':'./packages/level2/fd-app-toolbox','@client':'./packages/level2/client'};const modulePathAliases=Object['fromEntries'](Object['entries'](typescriptAliases)['map'](([_0x10cb80,_0x7a5991])=>[_0x10cb80+'/*',[_0x7a5991+'/*']]));
 
 export { aliasSymbols, modulePathAliases, typescriptAliases };

package/cli/README.md

@@ -1,381 +1,101 @@
-# Getting Started
+## Getting started
 
-:::warning[Important Notice]
-Our project documentation is still in development. We have a public release scheduled for September 2025, and the
-documentation will be more complete by then. Please note that the current documentation is not final and more
-information will be added over time.
-:::
+To make it easy for you to get started with GitLab, here's a list of recommended next steps.
 
-This tutorial assumes you are using Bash or Git Bash.
-Run in the terminal:
+Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
 
-```bash
-npx create-saas-kit-app
-```
-
-Find in the root folder file `.env.example`. Copy it and rename to the `.env` file. In this file replace the value of `DATABASE_CONNECTION_STRING` with a suitable one.
-
-Then run:
-
-```bash
-npm install
-# Create tutorial folder
-mkdir -p src/app/tutorial
-# Create file
-touch src/app/tutorial/student.resource.ts
-```
-
-In SaaS Kit everything revolves around resources. Resource is an entity in your system, it can be a database
-table or api endpoint or business object. `Order`, `Contact`, `Address` or `User` can be examples of resources.
-They are called resources because of Uniform Resource Locator (Url).
-
-Let's create Student resource, add the following code inside `student.resource.ts` file:
-
-```ts
-@resourceMetaId("d4507481-8b33-46e7-9c2e-606daab170cc")
-export class Student extends WorkspaceResource {
-    name!: string;
-}
-```
-
-Resolve import for @[resourceId](/docs/src/functions/resourceId) so you don't have red squiggly lines. Going forward we will assume that you
-are going to resolve imports by yourself.
-
-Resource files must end with `.resource.ts` extension and they need to have @[resourceId](/docs/src/functions/resourceId) decorator with
-randomly generated Uuid. Let's start the app:
-
-```bash
-npm start
-```
-
-In the future you can choose which command will be used for starting the application:
-
-```bash
-npm start
-```
-
-or
-
-```bash
-npm run dev
-```
-
-`start` will generate metadata files and seed database every time, and `dev` skips of that and is much faster.
-
-After starting the application, verify that the resource was properly created in your PostgreSQL database:
-
-1. Connect to your PostgreSQL database using your preferred client (psql, pgAdmin, etc.)
-2. Check that the `student` table was created automatically
-3. Verify the table structure has `name` column
-
-Once the database setup is verified, open it in the browser. Click `Sign In`.
-Then go to `/view?resource=Student` page to see Student resource.
-Click on `+` button to add a Student. Fill in all nessesary fields and click `Save` button.
-
-### Adding resources to Sidebar
-
-To have easier access to resource you can add it to Sidebar.
-
-To add Student to Sidebar go to `layout.tsx` where you will find `ClientRoot` component
-and add to the component's `sideBarResources` prop
-with `Student` in it:
-
-```tsx
-<ClientRoot sideBarResources={["Student"]}>{children}</ClientRoot>
-```
-
-### Resource relations
-
-Saas-kit automatically understands relations between resources. For this you just need to follow our code conventions.
-For example:
-
-1. Create Teacher resource that you want to connect to Student resource:
-
-```ts
-@resourceMetaId("783cbb56-0ee2-4d78-b7f1-2e139c8738d3")
-export class Teacher extends WorkspaceResource {
-    name!: string;
-}
-```
-
-2. Add links to each other to create relation between Student and Teacher resources.
-   For an one-to-many relation you need to add a `{resource}Id` field to first resource
-   and a `{resource}List` field to second resource:
-
-```ts
-export class Student extends WorkspaceResource {
-    name!: string;
-
-    teacherId?: string;
-
-    teacher?: Teacher;
-}
-
-export class Teacher extends WorkspaceResource {
-    name!: string;
-
-    studentList?: Student[];
-}
-```
-
-3. Use `npm start` command to create the relation.
-
-Now, going to `view?resource=Student` and looking upwards there appears new filter `Teacher`.
-You can click on it and choose a Teacher to filter Students by.
-If you want to add Teacher column to Student [ResourceList](/docs/src/functions/ResourceList), you can add decorator @[expandDescription](/docs/src/functions/expandDescription) to Student resource:
+## Add your files
 
-```ts
-export class Student extends WorkspaceResource {
-    name!: string;
+-   [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
+-   [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
 
-    @expandDescription()
-    teacherId?: string;
-    teacher?: Teacher;
-}
 ```
-
-## Getting resources on frontend
-
-Use [`fetchResource()`](/docs/src/functions/fetchResource) when you need to fetch a single resource.
-
-```ts
-const student = await fetchResource<Student>("Student", studentId);
-```
-
-Use [`fetchResources()`](/docs/src/functions/fetchResources) when you need to fetch a list of resources.
-
-```ts
-const students = await fetchResources<Student>("Student");
-```
-
-## Getting resources on backend
-
-Function [getResourcesByName](/docs/packages/server/fd/fd-toolbox/db/db/functions/getResourcesByName) gets resources by name from database.
-For Student resource function returns array of Student:
-
-```ts
-const students = await getResourcesByName<Student>("Student");
-```
-
-Function getResourceById gets a resource by its id and resourceName.
-Function throws an error if resource isn't found.
-If you want to skip the error add `false` as a third parameter:
-
-```ts
-const students = await getResourceById<Student>("Student", studentId, false);
-```
-
-## Configure search
-
-To enable search functionality for a resource based on specific fields, use the [searchable](packages/docs/content/src/functions/searchable.md) decorator on the properties you want to make searchable.
-You can mark multiple fields within a single resource as searchable.
-
-```ts
-class Student {
-  @searchable()
-  name: string;
-}
-```
-
-When the `name` field is marked as searchable, users will be able to find a student by typing their name into the search bar at the top-left corner of the page.
-
-## Create role with permission
-
-First we create the permission via [configurePermission](/docs/packages/server/functions/configurePermission)
-
-```ts
-const studentPermisionId = getNewUuid();
-await configurePermission(studentPermisionId, "EditStudent");
+cd existing_repo
+git remote add origin https://gitlab.com/flexdev/gitlab-spokbee-saas.git
+git branch -M main
+git push -uf origin main
 ```
 
-Then we create the role via [upsertRole](/docs/packages/server/functions/upsertRole)
+## Integrate with your tools
 
-```ts
-const studentRoleId = getNewUuid();
-const role: Role = {
-    id: studentRoleId,
-    name: "ClassPresident",
-    level: permissionLevels.ten,
-};
-await upsertRole(role);
-```
+-   [ ] [Set up project integrations](https://gitlab.com/flexdev/gitlab-spokbee-saas/-/settings/integrations)
 
-Next we use the function [createRoleToPermissionIfNotExist](/docs/packages/server/functions/createRoleToPermissionIfNotExist)
+## Collaborate with your team
 
-```ts
-await createRoleToPermissionIfNotExist(role.id, [
-    studentPermisionId,
-]);
-```
+-   [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
+-   [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
+-   [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
+-   [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
+-   [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
 
-## Most common decorators
-
-Here are the top 5 most commonly used decorators — check out the documentation to learn more about them:
-
-- [expandDescription](docs/src/functions/expandDescription)
-- [accessByUserId](docs/src/functions/accessByUserId)
-- [descriptionProperty](docs/src/functions/descriptionProperty)
-- [notDisplayable](docs/src/functions/notDisplayable)
-- [icon](docs/src/functions/icon)
-
-## Seeding data
-
-If you want to add additional data that is seeded on the app start you can open file `npm-commands/seed-db/index.ts`. In it, using function [crudCreate](/docs/packages/server/meta/fd-meta/basic-crud/cruds/functions/crudCreate) you can add any resources into your database.
-Function [crudCreate](/docs/packages/server/meta/fd-meta/basic-crud/cruds/functions/crudCreate) accepts [CrudUpdateConfig](docs/packages/server/interfaces/CrudUpdateConfig) parameter and creates a resource.
-
-```ts
-async function seed() {
-    try {
-        await seedDataBase();
-        await createTeacher();
-        await createStudent();
-        logInfo("Database seeded succesfully");
-        process.exit(0);
-    } catch (err) {
-        if (err instanceof Error) console.log("Error seeding database", err);
-
-        process.exit(1);
-    }
-}
-
-async function createStudent() {
-    const studentConfig: CrudUpdateConfig<Student> = {
-    resourceName: "Student",
-    resource: studentData,
-};
-    await crudCreate<Student>(studentConfig);
-}
-
-async function createTeacher() {
-    const teacherConfig: CrudUpdateConfig<Teacher> = {
-    resourceName: "Teacher",
-    resource: teacherData,
-};
-    await crudCreate<Teacher>(teacherConfig);
-}
-```
+## Test and Deploy
 
-If you want to seed demo resources that are displayed in this [video](https://youtu.be/RrHFmirV0j0) (for example `Contact`, `Company`, `Ticket`), add to the `.env` file:
+Use the built-in continuous integration in GitLab.
 
-`NEXT_PUBLIC_FD_SEED_DEMO_RESOURCES = true`
+-   [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
+-   [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing (SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
+-   [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
+-   [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
+-   [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
 
-## Checking for permissions
+---
 
-#### On frontend
+# Editing this README
 
-[checkAndNotifyCrudPermission](docs/src/functions/checkAndNotifyCrudPermission) — checks only explicit permissions and shows a notification if the user does not have access.
-The first argument specifies which CRUD action you want to verify.
+When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thanks to [makeareadme.com](https://www.makeareadme.com/) for this template.
 
-```ts
-checkAndNotifyCrudPermission(crudActions.create, uiMeta.resourceMeta, studentData);
-```
+## Suggestions for a good README
 
-In some cases you might want to use a less resctrictive permission checker. For that, examine [checkAndNotifyCrudPermissionLessResctrictive](docs/src/functions/checkAndNotifyCrudPermissionLessResctrictive) function
+Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
 
-#### On backend
+## Name
 
-[getPermissionCheckConfig](docs/src/functions/getPermissionCheckConfig) — creates a configuration object for a specific user, resource metadata, and resource data.
-[hasPermissionByPermissionCheckConfig](docs/src/functions/hasPermissionByPermissionCheckConfig) — checks permissions based on a prepared config.
+Choose a self-explaining name for your project.
 
-```ts
-const permissionConfig = getPermissionCheckConfig(userId, studentMeta, studentData);
-const hasPermission = await hasPermissionByPermissionCheckConfig(permissionConfig);
-console.log(hasPermission) //false
-```
+## Description
 
-[hasPermissionByUserId](docs/src/functions/hasPermissionByUserId) — checks whether a user has permission to perform a given CRUD action on a resource.
+Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
 
-```ts
-const hasPermission = await hasPermissionByUserId("Student", crudActions.create, userId);
-console.log(hasPermission) //false
-```
-
-#### Add custom permission checks
+## Badges
 
-If you want to perform custom permission check you can use add [@permissionCheckerFor](docs/src/functions/permissionCheckerFor) decorator.
+On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
 
-```ts
-const customChecker: ResourcePermissionChecker = async (
-  studentData,
-  userId,
-  crudActions.create
-) => {
-  return userId === userIds.timWId;
-};
+## Visuals
 
-@permissionCheckerFor("Student", customChecker)
-@resourceId("d4507481-8b33-46e7-9c2e-606daab170cc")
-export class Student extends WorkspaceResource {...}
-```
+Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
 
-In this example only user timW will be able to modify this resource.
+## Installation
 
-## Send notifications
+Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
 
-[sendNotification](packages/docs/content/src/functions/sendNotification) - sends a notification to a user and stores it in the database.
-
-```ts
-await sendNotification(
-    studentUserId,
-    "New feature available",
-    "Check out the new feature in your dashboard"
-);
-```
+## Usage
 
-It will look like this:
+Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
 
-![notification ui](packages/docs/screenshots/notification-example.png)
+## Support
 
-#### Sending emails
+Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
 
-If you also want the notification to be sent by email, specify:
-
-- `isExternal = true`
-- `FD_SEND_EMAIL = true` in `.env`
-- register with _SendGrid_ to get and configure `FD_EMAIL_SERVICE_URL` and `FD_SERVICE_KEY` in `.env`
-
-```ts
-await sendNotification(
-    studentUserId,
-    "New feature available",
-    "Check out the new feature in your dashboard",
-    true
-);
-```
-
-Functions for showing simple toast UI notifications:
-
-```ts
-notify("Notify message");
-```
-
-```ts
-notifySuccess("Notify success message");
-```
-
-```ts
-notifyFailure("Notify failure message");
-```
+## Roadmap
 
-It will look like this:  
-![toaster ui](packages/docs/screenshots/toaster-notify-succes.png)
+If you have ideas for releases in the future, it is a good idea to list them in the README.
 
-## Add role to a user
+## Contributing
 
-To assign a new role to a user, open `UserRole` menu and click `+` button.
+State if you are open to contributions and what your requirements are for accepting them.
 
-![alt text](packages/docs/screenshots/open-add-role-menu.png)
+For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
 
-In the `User` field, select the user you want to assign a role to. Then, in the `Role` field, choose the role you want to give. Finally click `Save` to apply the changes.
+You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
 
-![alt text](packages/docs/screenshots/role-menu.png)
+## Authors and acknowledgment
 
-## Assign role to permission
+Show your appreciation to those who have contributed to the project.
 
-To assign permissions to a role, open the RoleToPermission menu and click the `+` button.
+## License
 
-![alt text](packages/docs/screenshots/open-role-to-permission-menu.png)
+For open source projects, say how it is licensed.
 
-In the `Role` field, select the role you want to assign. Then, in the `Permission` field, choose the permission you want to give. Finally, click `Save` to confirm.
+## Project status
 
-![alt text](packages/docs/screenshots/role-to-permission-menu.png)
+If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.

package/cli/postcss.config.mjs

@@ -2,6 +2,7 @@
 const config = {
     plugins: {
         tailwindcss: {},
+        autoprefixer: {},
     },
 };
 

package/cli/src/app/globals.css

@@ -1,163 +1 @@
-@import "../../packages/level2/client/styles/common.css";
-@import "quill/dist/quill.snow.css";
-@import "../../packages/level2/client/styles/rich-text-editor.css";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 222.2 84% 4.9%;
-        --card: 0 0% 100%;
-        --card-foreground: 222.2 84% 4.9%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 222.2 84% 4.9%;
-        --primary: 222.2 47.4% 11.2%;
-        --primary-foreground: 210 40% 98%;
-        --secondary: 210 40% 96.1%;
-        --secondary-foreground: 222.2 47.4% 11.2%;
-        --muted: 210 40% 96.1%;
-        --muted-foreground: 215.4 16.3% 46.9%;
-        --accent: 210 40% 96.1%;
-        --accent-foreground: 222.2 47.4% 11.2%;
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 210 40% 98%;
-        --border: 214.3 31.8% 91.4%;
-        --input: 214.3 31.8% 91.4%;
-        --ring: 222.2 84% 4.9%;
-        --radius: 0.5rem;
-
-        --chart-1: 12 76% 61%;
-        --chart-2: 173 58% 39%;
-        --chart-3: 197 37% 24%;
-        --chart-4: 43 74% 66%;
-        --chart-5: 27 87% 67%;
-
-        --fd-accent: 190, 100%, 34%; /* accent-600 */
-        --fd-accent-light: 172, 100%, 37%; /* accent-100 */
-
-        --fd-tertiary-50: 216, 33%, 97%;
-        --fd-tertiary-200: 206, 35%, 86%;
-        --fd-tertiary-600: 206, 38%, 39%;
-        --fd-tertiary-700: 208, 38%, 32%;
-        --fd-tertiary-900: 208, 31%, 24%;
-        --fd-green-accent: 120, 100%, 34%;
-
-        --fd-shadow: 0, 0%, 0%, 0.25;
-
-        --fd-toolbar: var(--fd-tertiary-900);
-        --fd-toolbar-input: var(--fd-tertiary-700);
-        --fd-toolbar-hover: var(--fd-tertiary-700);
-        --fd-toolbar-keys: var(--fd-tertiary-200);
-        --fd-toolbar-placeholder: var(--fd-tertiary-50);
-        --fd-toolbar-shadow: var(--fd-shadow);
-        --fd-toolbar-separators: var(--fd-tertiary-600);
-        --fd-sidebar-icons: var(--fd-tertiary-50);
-        --fd-toolbar-icons: var(--fd-tertiary-50);
-        --fd-toolbar-border: var(--fd-tertiary-700);
-        --fd-toolbar-button: var(--fd-tertiary-600);
-
-        --subtle-400: 210, 10%, 65%;
-        --subtle-500: 220, 9%, 46%;
-        --subtle-700: 220, 20%, 27%;
-
-        --fd-enum-default-color: 0, 0%, 92%;
-        --fd-enum-color-1: 200, 50%, 87%;
-        --fd-enum-color-2: 120, 35%, 87%;
-        --fd-enum-color-3: 340, 61%, 91%;
-        --fd-enum-color-4: 19, 45%, 88%;
-        --fd-enum-color-5: 340, 61%, 91%;
-        --fd-enum-color-6: 9, 90%, 91%;
-        --fd-enum-color-7: 283, 44%, 90%;
-        --fd-enum-color-8: 9, 90%, 91%;
-        --fd-enum-color-9: 200, 50%, 87%;
-        --fd-enum-color-10: 38, 87%, 90%;
-        --fd-enum-color-11: 283, 44%, 90%;
-        --fd-enum-color-12: 283, 44%, 90%;
-        --fd-enum-color-13: 340, 61%, 91%;
-        --fd-enum-color-14: 283, 44%, 90%;
-        --fd-enum-color-15: 38, 87%, 90%;
-        --fd-enum-color-16: 0, 0%, 92%;
-        --fd-enum-color-17: 9, 90%, 91%;
-        --fd-enum-color-18: 19, 45%, 88%;
-    }
-
-    .dark {
-        --background: 222.2 84% 4.9%;
-        --foreground: 210 40% 98%;
-        --card: 222.2 84% 4.9%;
-        --card-foreground: 210 40% 98%;
-        --popover: 222.2 84% 4.9%;
-        --popover-foreground: 210 40% 98%;
-        --primary: 210 40% 98%;
-        --primary-foreground: 222.2 47.4% 11.2%;
-        --secondary: 217.2 32.6% 17.5%;
-        --secondary-foreground: 210 40% 98%;
-        --muted: 217.2 32.6% 17.5%;
-        --muted-foreground: 215 20.2% 65.1%;
-        --accent: 217.2 32.6% 17.5%;
-        --accent-foreground: 210 40% 98%;
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 210 40% 98%;
-        --border: 217.2 32.6% 17.5%;
-        --input: 217.2 32.6% 17.5%;
-        --ring: 212.7 26.8% 83.9;
-
-        --radius: 0.5rem;
-
-        --fd-accent: 190, 100%, 34%; /* accent-600 */
-        --fd-accent-light: 172, 100%, 37%; /* accent-100 */
-
-        --fd-tertiary-50: 216, 33%, 97%;
-        --fd-tertiary-200: 206, 35%, 86%;
-        --fd-tertiary-600: 206, 38%, 39%;
-        --fd-tertiary-700: 208, 38%, 32%;
-        --fd-tertiary-900: 208, 31%, 24%;
-
-        --fd-shadow: 0, 0%, 0%, 0.25;
-
-        --fd-toolbar: var(--fd-tertiary-900);
-        --fd-toolbar-input: var(--fd-tertiary-700);
-        --fd-toolbar-hover: var(--fd-tertiary-700);
-        --fd-toolbar-keys: var(--fd-tertiary-200);
-        --fd-toolbar-placeholder: var(--fd-tertiary-50);
-        --fd-toolbar-shadow: var(--fd-shadow);
-        --fd-toolbar-separators: var(--fd-tertiary-600);
-        --fd-sidebar-icons: var(--fd-tertiary-50);
-        --fd-toolbar-icons: var(--fd-tertiary-50);
-        --fd-toolbar-border: var(--fd-tertiary-700);
-        --fd-toolbar-button: var(--fd-tertiary-600);
-
-        --subtle-400: 210, 10%, 65%;
-        --subtle-500: 220, 9%, 46%;
-        --subtle-700: 220, 20%, 27%;
-
-        --chart-1: 220 70% 50%;
-        --chart-2: 160 60% 45%;
-        --chart-3: 30 80% 55%;
-        --chart-4: 280 65% 60%;
-        --chart-5: 340 75% 55%;
-
-        --fd-enum-default-color: 0, 0%, 22%;
-        --fd-enum-color-1: 219, 43%, 30%;
-        --fd-enum-color-2: 152, 37%, 27%;
-        --fd-enum-color-3: 328, 37%, 30%;
-        --fd-enum-color-4: 27, 63%, 32%;
-        --fd-enum-color-5: 328, 37%, 30%;
-        --fd-enum-color-6: 10, 40%, 31%;
-        --fd-enum-color-7: 268, 38%, 29%;
-        --fd-enum-color-8: 10, 40%, 31%;
-        --fd-enum-color-9: 219, 43%, 30%;
-        --fd-enum-color-10: 37, 56%, 36%;
-        --fd-enum-color-11: 268, 38%, 29%;
-        --fd-enum-color-12: 268, 38%, 29%;
-        --fd-enum-color-13: 328, 37%, 30%;
-        --fd-enum-color-14: 268, 38%, 29%;
-        --fd-enum-color-15: 37, 56%, 36%;
-        --fd-enum-color-16: 0, 0%, 35%;
-        --fd-enum-color-17: 10, 40%, 31%;
-        --fd-enum-color-18: 27, 63%, 32%;
-    }
-}
+@import "@fernir2/saas-kit/styles";