aq-fe-framework 0.1.155 → 0.1.156

package/dist/components/Layouts/HeaderMegaMenu/HeaderMegaMenuStore.ts

@@ -0,0 +1,19 @@
+import { createGenericStore } from "@/stores/CreateGenericStore";
+
+interface I {
+    name?: string;
+}
+
+const useStore = createGenericStore<I>({
+    initialState: { name: "Đăng ký khóa học" },
+    storageKey: 'HeaderMegaMenuStore'
+});
+
+
+
+export function useHeaderMegaMenuStore() {
+    const store = useStore()
+    return {
+        ...store
+    }
+}

package/dist/components/Layouts/HeaderMegaMenu/css.module.css

@@ -0,0 +1,50 @@
+.header {
+  position: sticky; /* Giúp header dính trên cùng */
+  top: 0;
+  z-index: 1; /* Đảm bảo header nằm trên các thành phần khác */
+  height: 60px;
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark));
+  padding-left: var(--mantine-spacing-md);
+  padding-right: var(--mantine-spacing-md);
+  border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-left: var(--mantine-spacing-md);
+  padding-right: var(--mantine-spacing-md);
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  font-weight: 500;
+  font-size: var(--mantine-font-size-sm);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    height: 42px;
+    width: 100%;
+  }
+
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+}
+
+.subLink {
+  width: 100%;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+  border-radius: var(--mantine-radius-md);
+
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+  }
+}
+
+.dropdownFooter {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+  margin: calc(var(--mantine-spacing-md) * -1);
+  margin-top: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-md) calc(var(--mantine-spacing-md) * 2);
+  padding-bottom: var(--mantine-spacing-xl);
+  border-top: 1px solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+}

package/dist/components/Layouts/HtmlWrapper/MyHtmlWrapper.tsx

@@ -0,0 +1,29 @@
+import { ScrollArea, TypographyStylesProvider, TypographyStylesProviderProps } from "@mantine/core";
+import pako from "pako";
+
+interface HtmlWrapper extends TypographyStylesProviderProps {
+    html: string;
+    mah?: number | string;
+    zip?: boolean
+}
+
+export function MyHtmlWrapper({ html, mah, zip = false, ...rest }: HtmlWrapper) {
+    const extractHtmlFromZip = () => {
+        const binaryString = Buffer.from(html, "base64");
+        // Giải nén Gzip
+        const decompressedData = pako.inflate(binaryString, { to: "string" });
+        const cleanedHtml = decompressedData?.replaceAll(" font-family:'Times New Roman'; font-size:1em;", "");
+        return cleanedHtml.replaceAll(" font-family:'Times New Roman'; font-size:1em;", "")
+    }
+    return (
+        <ScrollArea.Autosize mah={mah}>
+            <TypographyStylesProvider {...rest}>
+                <div
+                    dangerouslySetInnerHTML={{
+                        __html: zip ? extractHtmlFromZip() : html
+                    }}
+                />
+            </TypographyStylesProvider>
+        </ScrollArea.Autosize>
+    );
+}

package/dist/components/Layouts/PageContent/MyPageContent.tsx

@@ -0,0 +1,67 @@
+"use client";
+import { MyButtonRouterBack } from "@/components/Buttons/ButtonRouterBack/MyButtonRouterBack";
+import { Code, Container, Divider, Group, Indicator, Title } from "@mantine/core";
+import { ReactNode } from "react";
+import { useS_BasicAppShell } from "../BasicAppShell/useS_BasicAppShell";
+
+interface IPageContent {
+    title?: string;
+    canBack?: boolean;
+    rightTopBar?: ReactNode;
+    children?: ReactNode;
+    leftTopBar?: ReactNode;
+    status?: "Prototype" | "Beta";
+}
+
+// Hàm helper để lấy màu sắc dựa trên trạng thái
+const getStatusColor = (status?: string) => {
+    switch (status) {
+        case "Prototype":
+            return "blue";
+        case "Beta":
+            return "orange";
+        default:
+            return "gray";
+    }
+};
+
+// Component riêng cho tiêu đề có trạng thái
+const PageTitle = ({ title, status }: { title: string; status?: string }) => {
+    const color = getStatusColor(status);
+    return (
+        <Indicator label={status} size={16} inline color={color} disabled={!status} pt={6}>
+            <Title order={4}>{title}</Title>
+        </Indicator>
+    );
+};
+
+export function MyPageContent({
+    leftTopBar,
+    title,
+    canBack = false,
+    rightTopBar,
+    status,
+    children,
+}: IPageContent) {
+    const basicAppShellStore = useS_BasicAppShell();
+    const finalTitle = title || basicAppShellStore.state.title;
+    return (
+        <Container p={0} fluid>
+            <Group justify="space-between">
+                <Group>
+                    {canBack && <MyButtonRouterBack />}
+                    <PageTitle title={finalTitle} status={status} />
+                    {leftTopBar}
+                </Group>
+                <Group>
+                    {rightTopBar}
+                    <Code color="var(--mantine-color-blue-light)">
+                        {basicAppShellStore.state.menuCode}
+                    </Code>
+                </Group>
+            </Group>
+            <Divider my={"xs"} />
+            {children}
+        </Container>
+    );
+}

package/dist/components/Layouts/Tab/MyTab.tsx

@@ -0,0 +1,33 @@
+'use client'
+import { rem, Space, Tabs, TabsProps } from '@mantine/core'
+import { Icon, IconProps } from '@tabler/icons-react'
+import React, { ReactNode } from 'react'
+
+interface ITab {
+    label: string,
+    icon?: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<Icon>>
+}
+
+interface IMyTab extends TabsProps {
+    tabList: ITab[],
+    children?: ReactNode
+}
+
+export function MyTab({ tabList, children, ...rest }: IMyTab) {
+    const iconStyle = { width: rem(20), height: rem(20) };
+    return (
+        <Tabs defaultValue={tabList[0].label} {...rest}>
+            <Tabs.List>
+                {tabList.map((item, idx) => {
+                    return (
+                        <Tabs.Tab key={idx} value={item.label} leftSection={item.icon && <item.icon style={iconStyle}></item.icon>}>
+                            {item.label}
+                        </Tabs.Tab>
+                    )
+                })}
+            </Tabs.List>
+            <Space my={'md'} />
+            {children}
+        </Tabs>
+    )
+}

package/dist/components/Loaders/MyCardioLoader.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+
+export function MyCardioLoader() {
+    useEffect(() => {
+        async function getLoader() {
+            const { cardio } = await import("ldrs");
+            cardio.register();
+        }
+        getLoader();
+    }, []);
+    return <l-cardio color="var(--cyan-400)"></l-cardio>;
+}

package/dist/components/RESTAPIComponents/DataTableSelect/MyDataTableSelect.tsx

@@ -0,0 +1,61 @@
+import { MyCenterFull } from "@/components/CenterFull/MyCenterFull";
+import { MyDataTable } from "@/components/DataDisplay/DataTable/MyDataTable";
+import { ActionIcon, Button, Fieldset, Group, MantineSize, Modal } from "@mantine/core";
+import { useDisclosure, useListState } from "@mantine/hooks";
+import { IconX } from "@tabler/icons-react";
+import { MRT_ColumnDef, MRT_RowData, MRT_TableInstance, MRT_TableOptions } from "mantine-react-table";
+import { ReactNode } from "react";
+
+interface IDataTable<TData extends MRT_RowData> extends Omit<MRT_TableOptions<TData>, "data"> {
+    listLabel?: string;
+    columns: MRT_ColumnDef<TData>[];
+    data?: TData[];
+    renderTopToolbarCustomActions?: ((props: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode) | undefined,
+    listState: ReturnType<typeof useListState<TData>>;
+    selectButtonlabel?: string,
+    modalSize?: MantineSize
+}
+
+export function MyDataTableSelect<TData extends MRT_RowData>({ modalSize, renderTopToolbarCustomActions, data, selectButtonlabel, listState, columns, listLabel, ...rest }: IDataTable<TData>) {
+    const disc = useDisclosure(false)
+    if (data == undefined) return "Đang tải..."
+    return (
+        <Fieldset legend={listLabel ? listLabel : "Danh sách"}>
+            <MyDataTable
+                renderTopToolbarCustomActions={({ table }) => {
+                    return (
+                        <Group>
+                            {renderTopToolbarCustomActions && renderTopToolbarCustomActions({ table: table })}
+                            <Button onClick={disc[1].open}>{selectButtonlabel || "Chọn từ danh sách"}</Button>
+                        </Group>
+                    )
+                }}
+                columns={columns}
+                data={listState[0] as TData[]}
+                renderRowActions={({ row }) => {
+                    return (
+                        <MyCenterFull>
+                            <ActionIcon color="red" onClick={() => listState[1].remove(row.index)}><IconX /></ActionIcon>
+                        </MyCenterFull>
+                    )
+                }}
+                {...rest} />
+
+            <Modal opened={disc[0]} onClose={disc[1].close} size={modalSize || "80%"}>
+                <MyDataTable
+                    renderTopToolbarCustomActions={({ table }) => {
+                        return <Button onClick={() => {
+                            table.getSelectedRowModel().rows.map(item => listState[1].append(item.original))
+                            disc[1].close()
+                        }}>Chọn</Button>
+                    }}
+                    enableRowSelection
+                    data={data!}
+                    columns={columns}
+                    {...rest} />
+            </Modal>
+        </Fieldset>
+    )
+}

package/dist/components/RESTAPIComponents/SelectAPIGet/MySelectAPIGet.tsx

@@ -0,0 +1,37 @@
+import baseAxios from "@/api/baseAxios";
+import { Select, SelectProps } from "@mantine/core";
+import { useQuery } from "@tanstack/react-query";
+
+interface ISelect extends SelectProps {
+    apiGet: string;
+    label?: string;
+    dataMapper?: (item: any) => { value: string; label: string }; // Hàm tùy chỉnh cách map dữ liệu
+}
+
+export function MySelectAPIGet({ apiGet, label = "", dataMapper, ...rest }: ISelect) {
+    const query = useQuery({
+        queryKey: [apiGet],
+        queryFn: async () => {
+            return (await baseAxios.get(apiGet)).data;
+        },
+    });
+
+    if (query.isLoading) return "Loading...";
+
+    const data = query.data?.map((item: any) => {
+        if (dataMapper) return dataMapper(item)
+        return {
+            value: item.id?.toString()!,
+            label: `${item.code}-${item.name}`,
+        }
+    });
+
+    return (
+        <Select
+            label={label}
+            placeholder={`Chọn ${label?.toLowerCase()}`}
+            data={data}
+            {...rest}
+        />
+    );
+}

package/dist/components/ScheduleX/MyScheduleX.tsx

@@ -0,0 +1,58 @@
+'use client'
+// import '@schedule-x/theme-default/dist/index.css'
+import { useNextCalendarApp, ScheduleXCalendar } from '@schedule-x/react'
+import {
+    CalendarEventExternal,
+    createViewDay,
+    createViewMonthAgenda,
+    createViewMonthGrid,
+    createViewWeek,
+} from '@schedule-x/calendar'
+import { createEventsServicePlugin } from '@schedule-x/events-service'
+import { useState } from "react";
+import { createEventModalPlugin } from '@schedule-x/event-modal'
+
+interface MyScheduleXProps<T extends CalendarEventExternal> {
+    values?: T[]
+    timeGridEvent?: (props: { calendarEvent: T }) => React.ReactNode
+    eventModal?: (props: { calendarEvent: T }) => React.ReactNode,
+    nDays?: number,
+    startDayBoundaries?: string,
+    endDayBoundaries?: string
+}
+
+export function MyScheduleX<T extends CalendarEventExternal>({
+    values,
+    timeGridEvent,
+    eventModal,
+    nDays,
+    startDayBoundaries = "05:00",
+    endDayBoundaries = "21:00"
+}: MyScheduleXProps<T>) {
+    const eventsService = useState(() => createEventsServicePlugin())[0]
+    const eventModalPlugin = useState(() => createEventModalPlugin())[0]
+    const calendar = useNextCalendarApp({
+        locale: "vi-VN",
+        dayBoundaries: {
+            start: startDayBoundaries,
+            end: endDayBoundaries,
+        },
+        weekOptions: {
+            nDays: nDays,
+            gridHeight: 700
+        },
+        views: [createViewDay(), createViewWeek(), createViewMonthGrid(), createViewMonthAgenda()],
+        events: values,
+        plugins: [eventsService, eventModalPlugin],
+    })
+
+    return (
+        <ScheduleXCalendar
+            calendarApp={calendar}
+            customComponents={{
+                timeGridEvent: timeGridEvent,
+                eventModal: eventModal
+            }}
+        />
+    )
+}

package/dist/components/Skeletons/SkeletonTable/MySkeletonTable.tsx

@@ -0,0 +1,9 @@
+import { Skeleton, SkeletonProps } from '@mantine/core'
+
+interface IMySkeletonTable extends SkeletonProps { }
+
+export function MySkeletonTable({ h = 500 }: IMySkeletonTable) {
+    return (
+        <Skeleton h={h} />
+    )
+}

package/dist/components/index.mjs

@@ -66,7 +66,7 @@ import {
   useS_BasicAppShell,
   useS_ButtonImport,
   utils_layout_getItemsWithoutLinks
-} from "../chunk-PAHZ57DT.mjs";
+} from "../chunk-JLT4BL7I.mjs";
 import "../chunk-Z6OQG54Q.mjs";
 import "../chunk-Y3YGC5IH.mjs";
 import "../chunk-5U2JSHSJ.mjs";

package/dist/components/index.ts

@@ -0,0 +1,62 @@
+export * from './Aceternity/BoxesBackground/MyBoxes';
+export * from './Aceternity/BoxesBackground/MyBoxesBackground';
+export * from './ActionIcons/ActionIcon/MyActionIcon';
+export * from './ActionIcons/ActionIconCheck/MyActionIconCheck';
+export * from './ActionIcons/ActionIconCRUD/MyActionIconDelete';
+export * from './ActionIcons/ActionIconCRUD/MyActionIconUpdate';
+export * from './ActionIcons/ActionIconDownloadPDF/MyActionIconDownloadPDF';
+export * from './ActionIcons/ActionIconModal/MyActionIconModal';
+export * from './ActionIcons/ActionIconUpload/MyActionIconUpload';
+export * from './ActionIcons/ActionIconViewPdf/MyActionIconViewPDF';
+export * from './ActionIcons/SwitchTheme/MySwitchTheme';
+export * from './AppSpotlight/MyAppSpotlight';
+export * from './Buttons/Anchor/MyAnchorViewPDF';
+export * from './Buttons/Button/MyButton';
+export * from './Buttons/ButtonCRUD/AQButtonCreateByImportFile';
+export * from './Buttons/ButtonCRUD/AQButtonExportData';
+export * from './Buttons/ButtonCRUD/MyButtonCreate';
+export * from './Buttons/ButtonImport/MyButtonImport';
+export * from './Buttons/ButtonImport/SelectFieldModal';
+export * from './Buttons/ButtonImport/SelectFileModal';
+export * from './Buttons/ButtonImport/useS_ButtonImport';
+export * from './Buttons/ButtonModal/AQSelectTableByOpenModal';
+export * from './Buttons/ButtonModal/MyButtonModal';
+export * from './Buttons/ButtonPrintPDF/MyButtonPrintPDF';
+export * from './Buttons/ButtonPrintPDFTable/MyButtonPrintTablePDF';
+export * from './Buttons/ButtonRouterBack/MyButtonRouterBack';
+export * from './Buttons/ButtonViewPDF/MyButtonViewPDF';
+export * from './Calendar/MyCalendar';
+export * from './CenterFull/MyCenterFull';
+export * from './Checkbox/MyCheckbox';
+export * from './Combobox/Select/MySelect';
+export * from './DataDisplay/Card/AQCard';
+export * from './DataDisplay/CardInformation/MyCardInformation';
+export * from './DataDisplay/DataTable/MyDataTable';
+export * from './DataDisplay/IconText/MyIconText';
+export * from './DataDisplay/KeyLabel/MyKeyLabel';
+export * from './DataDisplay/NumberFormatter/MyNumberFormatter';
+export * from './DataDisplay/StatCard/AQStatCard1';
+export * from './FaviconSetter/FaviconSetter';
+export * from './Inputs/DateInput/MyDateInput';
+export * from './Inputs/Fieldset/MyFieldset';
+export * from './Inputs/FileInput/MyFileInput';
+export * from './Inputs/NumberInput/MyNumberInput';
+export * from './Inputs/TextArea/MyTextArea';
+export * from './Inputs/TextEditor/MyTextEditor';
+export * from './Inputs/TextInput/MyTextInput';
+export * from './Layouts/BasicAppShell/BasicAppShell';
+export * from './Layouts/BasicAppShell/useS_BasicAppShell';
+export * from './Layouts/Container/MyContainer';
+export * from './Layouts/FlexColumn/MyFlexColumn';
+export * from './Layouts/FlexEnd/MyFlexEnd';
+export * from './Layouts/FlexRow/MyFlexRow';
+export * from './Layouts/HeaderMegaMenu/HeaderMegaMenu';
+export * from './Layouts/HeaderMegaMenu/HeaderMegaMenuStore';
+export * from './Layouts/HtmlWrapper/MyHtmlWrapper';
+export * from './Layouts/PageContent/MyPageContent';
+export * from './Layouts/Tab/MyTab';
+export * from './Loaders/MyCardioLoader';
+export * from './RESTAPIComponents/DataTableSelect/MyDataTableSelect';
+export * from './RESTAPIComponents/SelectAPIGet/MySelectAPIGet';
+export * from './ScheduleX/MyScheduleX';
+export * from './Skeletons/SkeletonTable/MySkeletonTable';

package/dist/constants/array/daysOfWeek.ts

@@ -0,0 +1,9 @@
+export const ARRAY_DAYS_OF_WEEK = [
+    "Thứ Hai",
+    "Thứ Ba",
+    "Thứ Tư",
+    "Thứ Năm",
+    "Thứ Sáu",
+    "Thứ Bảy",
+    "Chủ Nhật"
+]

package/dist/constants/enum/ENUM_EMAILCONFIG.ts

@@ -0,0 +1,6 @@
+export enum ENUM_EMAILCONFIG_MODULE {
+    "Đào tạo" = 1,
+    "Tuyển sinh" = 2,
+    "Sinh viên" = 3,
+    "Khảo thí" = 4
+}

package/dist/constants/enum/global.ts

@@ -0,0 +1,26 @@
+export enum ENUM_DAYS_OF_WEEK {
+    "Chủ Nhật" = 0,
+    "Thứ Hai" = 1,
+    "Thứ Ba" = 2,
+    "Thứ Tư" = 3,
+    "Thứ Năm" = 4,
+    "Thứ Sáu" = 5,
+    "Thứ Bảy" = 6
+}
+
+export enum ENUM_GENDER {
+    "Nam" = 1,
+    "Nữ" = 2,
+}
+
+export enum ENUM_QUESTION_TYPE {
+    "Trắc nghiệm" = 1,
+    "Tự luận" = 2,
+    "Trắc nghiệm + Tự luận" = 3,
+    "Tiểu luận" = 4,
+    "Vấn đáp" = 5,
+}
+
+export enum ENUM_ASSESSMENT_TOOL {
+    Rubrics = 1,
+}

package/dist/constants/object/color.ts

@@ -0,0 +1,5 @@
+export const OBJECT_COlORS = {
+  mantineBackgroundPrimary: "light-dark(var(--mantine-color-white), var(--mantine-color-dark))",
+  mantineBackgroundSecondary: "light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8))",
+  mantineBackgroundBlueLight: "var(--mantine-color-blue-light)",
+};

package/dist/constants/object/documentTypes.ts

@@ -0,0 +1,8 @@
+export const OBJECT_DOCUMENT_TYPES = {
+  Security: 1,
+  Refinement: 2,
+  Guideline: 3,
+  Regulations: 4,
+  Workflow: 5,
+  Form: 6,
+};

package/dist/{components/index.css → css.module-4ICLUKPO.module.css}

@@ -1,22 +1,22 @@
-/* src/components/Layouts/HeaderMegaMenu/css.module.css */
 .header {
-  position: sticky;
+  position: sticky; /* Giúp header dính trên cùng */
   top: 0;
-  z-index: 1;
+  z-index: 1; /* Đảm bảo header nằm trên các thành phần khác */
   height: calc(3.75rem * var(--mantine-scale));
   background-color: var(--mantine-color-white);
 }
-[data-mantine-color-scheme=dark] .header {
+  [data-mantine-color-scheme='dark'] .header {
   background-color: var(--mantine-color-dark);
 }
-.header {
+  .header {
   padding-left: var(--mantine-spacing-md);
   padding-right: var(--mantine-spacing-md);
   border-bottom: 1px solid var(--mantine-color-gray-3);
 }
-[data-mantine-color-scheme=dark] .header {
+  [data-mantine-color-scheme='dark'] .header {
   border-bottom: 1px solid var(--mantine-color-dark-4);
 }
+
 .link {
   display: flex;
   align-items: center;
@@ -26,62 +26,74 @@
   text-decoration: none;
   color: var(--mantine-color-black);
 }
-[data-mantine-color-scheme=dark] .link {
+
+[data-mantine-color-scheme='dark'] .link {
   color: var(--mantine-color-white);
 }
+
 .link {
   font-weight: 500;
   font-size: var(--mantine-font-size-sm);
 }
+
 @media (max-width: $mantine-breakpoint-sm) {
-  .link {
+
+.link {
     height: calc(2.625rem * var(--mantine-scale));
-    width: 100%;
-  }
+    width: 100%
 }
+  }
+
 @media (hover: hover) {
   .link:hover {
     background-color: var(--mantine-color-gray-0);
   }
-  [data-mantine-color-scheme=dark] .link:hover {
+    [data-mantine-color-scheme='dark'] .link:hover {
     background-color: var(--mantine-color-dark-6);
   }
 }
+
 @media (hover: none) {
   .link:active {
     background-color: var(--mantine-color-gray-0);
   }
-  [data-mantine-color-scheme=dark] .link:active {
+    [data-mantine-color-scheme='dark'] .link:active {
     background-color: var(--mantine-color-dark-6);
   }
 }
+
 .subLink {
   width: 100%;
   padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
   border-radius: var(--mantine-radius-md);
 }
+
 @media (hover: hover) {
   .subLink:hover {
     background-color: var(--mantine-color-gray-0);
   }
-  [data-mantine-color-scheme=dark] .subLink:hover {
+    [data-mantine-color-scheme='dark'] .subLink:hover {
     background-color: var(--mantine-color-dark-7);
   }
 }
+
 @media (hover: none) {
   .subLink:active {
     background-color: var(--mantine-color-gray-0);
   }
-  [data-mantine-color-scheme=dark] .subLink:active {
+    [data-mantine-color-scheme='dark'] .subLink:active {
     background-color: var(--mantine-color-dark-7);
   }
 }
+
 .dropdownFooter {
   background-color: var(--mantine-color-gray-0);
 }
-[data-mantine-color-scheme=dark] .dropdownFooter {
+
+[data-mantine-color-scheme='dark'] .dropdownFooter {
   background-color: var(--mantine-color-dark-7);
 }
+
 .dropdownFooter {
   margin: calc(var(--mantine-spacing-md) * -1);
   margin-top: var(--mantine-spacing-sm);
@@ -89,6 +101,7 @@
   padding-bottom: var(--mantine-spacing-xl);
   border-top: 1px solid var(--mantine-color-gray-1);
 }
-[data-mantine-color-scheme=dark] .dropdownFooter {
+
+[data-mantine-color-scheme='dark'] .dropdownFooter {
   border-top: 1px solid var(--mantine-color-dark-5);
 }

package/dist/css.module-P45UW6UZ.module.css

@@ -0,0 +1,4 @@
+.title {
+  font-family: Greycliff CF, var(--mantine-font-family);
+  font-weight: 900;
+}