aq-fe-framework 0.1.279 → 0.1.280

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/{chunk-EIPT2DZW.mjs → chunk-M72WIRIX.mjs} +801 -659
  2. package/dist/components/Layouts/HeaderMegaMenu/css.module.css +50 -50
  3. package/dist/components/index.d.mts +25 -6
  4. package/dist/components/index.mjs +8 -2
  5. package/dist/hooks/index.d.mts +1 -1
  6. package/dist/modules-features/authenticate/F_authenticate_Login/css.module.css +4 -4
  7. package/dist/modules-features/index.mjs +5 -59
  8. package/dist/providers/mantine.module.css +21 -21
  9. package/package.json +153 -153
package/dist/components/Layouts/HeaderMegaMenu/css.module.css CHANGED
@@ -1,50 +1,50 @@
1
- .header {
2
- position: sticky; /* Giúp header dính trên cùng */
3
- top: 0;
4
- z-index: 1; /* Đảm bảo header nằm trên các thành phần khác */
5
- height: 60px;
6
- background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark));
7
- padding-left: var(--mantine-spacing-md);
8
- padding-right: var(--mantine-spacing-md);
9
- border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
10
- }
11
-
12
- .link {
13
- display: flex;
14
- align-items: center;
15
- height: 100%;
16
- padding-left: var(--mantine-spacing-md);
17
- padding-right: var(--mantine-spacing-md);
18
- text-decoration: none;
19
- color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
20
- font-weight: 500;
21
- font-size: var(--mantine-font-size-sm);
22
-
23
- @media (max-width: $mantine-breakpoint-sm) {
24
- height: 42px;
25
- width: 100%;
26
- }
27
-
28
- @mixin hover {
29
- background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
30
- }
31
- }
32
-
33
- .subLink {
34
- width: 100%;
35
- padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
36
- border-radius: var(--mantine-radius-md);
37
-
38
- @mixin hover {
39
- background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
40
- }
41
- }
42
-
43
- .dropdownFooter {
44
- background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
45
- margin: calc(var(--mantine-spacing-md) * -1);
46
- margin-top: var(--mantine-spacing-sm);
47
- padding: var(--mantine-spacing-md) calc(var(--mantine-spacing-md) * 2);
48
- padding-bottom: var(--mantine-spacing-xl);
49
- border-top: 1px solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
50
- }
1
+ .header {
2
+ position: sticky; /* Giúp header dính trên cùng */
3
+ top: 0;
4
+ z-index: 1; /* Đảm bảo header nằm trên các thành phần khác */
5
+ height: 60px;
6
+ background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark));
7
+ padding-left: var(--mantine-spacing-md);
8
+ padding-right: var(--mantine-spacing-md);
9
+ border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
10
+ }
11
+
12
+ .link {
13
+ display: flex;
14
+ align-items: center;
15
+ height: 100%;
16
+ padding-left: var(--mantine-spacing-md);
17
+ padding-right: var(--mantine-spacing-md);
18
+ text-decoration: none;
19
+ color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
20
+ font-weight: 500;
21
+ font-size: var(--mantine-font-size-sm);
22
+
23
+ @media (max-width: $mantine-breakpoint-sm) {
24
+ height: 42px;
25
+ width: 100%;
26
+ }
27
+
28
+ @mixin hover {
29
+ background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
30
+ }
31
+ }
32
+
33
+ .subLink {
34
+ width: 100%;
35
+ padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
36
+ border-radius: var(--mantine-radius-md);
37
+
38
+ @mixin hover {
39
+ background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
40
+ }
41
+ }
42
+
43
+ .dropdownFooter {
44
+ background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
45
+ margin: calc(var(--mantine-spacing-md) * -1);
46
+ margin-top: var(--mantine-spacing-sm);
47
+ padding: var(--mantine-spacing-md) calc(var(--mantine-spacing-md) * 2);
48
+ padding-bottom: var(--mantine-spacing-xl);
49
+ border-top: 1px solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
50
+ }
package/dist/components/index.d.mts CHANGED
@@ -31,10 +31,10 @@ declare function MyBoxesBackground({ title, desc }: {
31
31
  }): react_jsx_runtime.JSX.Element;
32
32
 
33
33
  type TYPES_MANTINE_SIZE = number | MantineSize | (string & {}) | undefined;
34
- type TYPES_CRUD = "default" | "create" | "update" | "delete" | "save" | "createMultiple" | "check" | "import" | "print" | "cancel" | "export" | "select";
34
+ type type_action = "create" | "update" | "delete" | "save" | "createMultiple" | "check" | "import" | "print" | "cancel" | "export" | "select";
35
35
 
36
36
  interface IMyActionIcon extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "style">, ActionIconProps {
37
- crudType?: TYPES_CRUD;
37
+ crudType?: type_action;
38
38
  children?: ReactNode;
39
39
  }
40
40
  declare function MyActionIcon({ children, crudType, ...rest }: IMyActionIcon): react_jsx_runtime.JSX.Element | undefined;
@@ -48,7 +48,7 @@ declare function MyActionIconCheck({ modalSize, comment, ...rest }: IActionIconC
48
48
  interface IMyActionIconModal extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "style" | "title">, ActionIconProps {
49
49
  title?: ReactNode;
50
50
  children?: ReactNode;
51
- crudType?: TYPES_CRUD;
51
+ crudType?: type_action;
52
52
  modalSize?: TYPES_MANTINE_SIZE;
53
53
  disclosure: ReturnType<typeof useDisclosure>;
54
54
  fullScreen?: boolean;
@@ -98,8 +98,19 @@ declare function MyAnchorViewPDF({ label, pdfLink }: {
98
98
  pdfLink: string;
99
99
  }): react_jsx_runtime.JSX.Element;
100
100
 
101
+ interface CoreActionIconProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "style">, ActionIconProps {
102
+ actionType?: type_action;
103
+ }
104
+ declare function CoreActionIcon({ children, actionType, ...rest }: CoreActionIconProps): react_jsx_runtime.JSX.Element;
105
+
106
+ interface CoreButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "style">, ButtonProps {
107
+ actionType?: type_action;
108
+ children?: ReactNode;
109
+ }
110
+ declare function CoreButton({ children, actionType, ...rest }: CoreButtonProps): react_jsx_runtime.JSX.Element;
111
+
101
112
  interface IMyButton extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "style">, ButtonProps {
102
- crudType?: TYPES_CRUD;
113
+ crudType?: type_action;
103
114
  children?: ReactNode;
104
115
  }
105
116
  declare function MyButton({ children, crudType, ...rest }: IMyButton): react_jsx_runtime.JSX.Element | undefined;
@@ -108,7 +119,7 @@ interface IMyButtonModal extends Omit<React.ButtonHTMLAttributes<HTMLButtonEleme
108
119
  label?: string;
109
120
  title?: ReactNode;
110
121
  children?: ReactNode;
111
- crudType?: TYPES_CRUD;
122
+ crudType?: type_action;
112
123
  modalSize?: TYPES_MANTINE_SIZE;
113
124
  objectName?: string;
114
125
  disclosure: ReturnType<typeof useDisclosure>;
@@ -234,6 +245,14 @@ interface IAQSelectTableByOpenModal<TData extends MRT_RowData> extends Omit<MRT_
234
245
  }
235
246
  declare function AQSelectTableByOpenModal<TData extends MRT_RowData>({ setSelectedData, data, columns, API, modalSize, title, label, listLabel, objectName, fullScreen, closeAfterSelect, ...rest }: IAQSelectTableByOpenModal<TData>): react_jsx_runtime.JSX.Element;
236
247
 
248
+ interface CoreButtonModalProps {
249
+ children?: ReactNode;
250
+ disclosure: ReturnType<typeof useDisclosure>;
251
+ buttonProps?: ButtonProps;
252
+ modalProps?: ModalProps;
253
+ }
254
+ declare function CoreButtonModal({ disclosure, children, buttonProps, modalProps, ...rest }: CoreButtonModalProps): react_jsx_runtime.JSX.Element;
255
+
237
256
  interface I$6 extends ButtonProps {
238
257
  contentToPrint?: ReactNode;
239
258
  children?: ReactNode;
@@ -565,4 +584,4 @@ interface IMySkeletonTable extends SkeletonProps {
565
584
  }
566
585
  declare function MySkeletonTable({ h }: IMySkeletonTable): react_jsx_runtime.JSX.Element;
567
586
 
568
- export { AQButtonCreateByImportFile, AQButtonExportData, AQCard, AQSelectTableByOpenModal, AQStatCard1, Boxes, FaviconSetter, HeaderMegaMenu, type IAQCardProps, type IMyTextEditor, type IWeeklySession, I_BasicAppShell_LinkItem, MyActionIcon, MyActionIconCheck, MyActionIconDelete, MyActionIconDownloadPDF, MyActionIconModal, MyActionIconUpdate, MyActionIconUpload, MyActionIconViewPDF, MyAnchorViewPDF, MyAppSpotlight, MyBoxesBackground, MyBoxesCore, MyButton, MyButtonCreate, MyButtonCreateUpdate, MyButtonDeleteList, MyButtonImport, MyButtonModal, MyButtonPrintPDF, MyButtonPrintTablePDF, MyButtonRouterBack, MyButtonViewPDF, MyCalendar, MyCardInformation, MyCardioLoader, MyCenterFull, MyCheckbox, MyContainer, MyDataTable, type MyDataTableInternalProps, type MyDataTableProps, MyDataTableSelect, MyDateInput, MyDayOfWeekPicker, MyFieldset, MyFileInput, MyFlexColumn, MyFlexEnd, MyFlexRow, MyHtmlWrapper, MyIconText, MyKeyLabel, MyNumberFormatter, MyNumberInput, MyPageContent, MyScheduleX, MySelect, MySelectAPIGet, MySkeletonTable, MySwitchTheme, MyTab, MyTextArea, MyTextEditor, MyTextInput, MyWeeklySessionSchedulerPicker, SelectFieldModal, SelectFileModal, type SelectFileModalProps, type WeeklySessionSchedulerProps, useHeaderMegaMenuStore, useS_BasicAppShell, useS_ButtonImport };
587
+ export { AQButtonCreateByImportFile, AQButtonExportData, AQCard, AQSelectTableByOpenModal, AQStatCard1, Boxes, CoreActionIcon, CoreButton, CoreButtonModal, FaviconSetter, HeaderMegaMenu, type IAQCardProps, type IMyTextEditor, type IWeeklySession, I_BasicAppShell_LinkItem, MyActionIcon, MyActionIconCheck, MyActionIconDelete, MyActionIconDownloadPDF, MyActionIconModal, MyActionIconUpdate, MyActionIconUpload, MyActionIconViewPDF, MyAnchorViewPDF, MyAppSpotlight, MyBoxesBackground, MyBoxesCore, MyButton, MyButtonCreate, MyButtonCreateUpdate, MyButtonDeleteList, MyButtonImport, MyButtonModal, MyButtonPrintPDF, MyButtonPrintTablePDF, MyButtonRouterBack, MyButtonViewPDF, MyCalendar, MyCardInformation, MyCardioLoader, MyCenterFull, MyCheckbox, MyContainer, MyDataTable, type MyDataTableInternalProps, type MyDataTableProps, MyDataTableSelect, MyDateInput, MyDayOfWeekPicker, MyFieldset, MyFileInput, MyFlexColumn, MyFlexEnd, MyFlexRow, MyHtmlWrapper, MyIconText, MyKeyLabel, MyNumberFormatter, MyNumberInput, MyPageContent, MyScheduleX, MySelect, MySelectAPIGet, MySkeletonTable, MySwitchTheme, MyTab, MyTextArea, MyTextEditor, MyTextInput, MyWeeklySessionSchedulerPicker, SelectFieldModal, SelectFileModal, type SelectFileModalProps, type WeeklySessionSchedulerProps, useHeaderMegaMenuStore, useS_BasicAppShell, useS_ButtonImport };
package/dist/components/index.mjs CHANGED
@@ -7,6 +7,9 @@ import {
7
7
  BasicAppShell,
8
8
  BasicAppShell_transformMenuToEnum,
9
9
  Boxes,
10
+ CoreActionIcon,
11
+ CoreButton,
12
+ CoreButtonModal,
10
13
  FaviconSetter,
11
14
  HeaderMegaMenu,
12
15
  MyActionIcon,
@@ -69,9 +72,9 @@ import {
69
72
  useS_BasicAppShell,
70
73
  useS_ButtonImport,
71
74
  utils_layout_getItemsWithoutLinks
72
- } from "../chunk-EIPT2DZW.mjs";
73
- import "../chunk-NWBLJ3W3.mjs";
75
+ } from "../chunk-M72WIRIX.mjs";
74
76
  import "../chunk-K6S7R6LU.mjs";
77
+ import "../chunk-NWBLJ3W3.mjs";
75
78
  import "../chunk-KKJ3OEEW.mjs";
76
79
  import "../chunk-Y3YGC5IH.mjs";
77
80
  import "../chunk-5U2JSHSJ.mjs";
@@ -86,6 +89,9 @@ export {
86
89
  BasicAppShell,
87
90
  BasicAppShell_transformMenuToEnum,
88
91
  Boxes,
92
+ CoreActionIcon,
93
+ CoreButton,
94
+ CoreButtonModal,
89
95
  FaviconSetter,
90
96
  HeaderMegaMenu,
91
97
  MyActionIcon,
package/dist/hooks/index.d.mts CHANGED
@@ -21,7 +21,7 @@ interface MyReactQueryProps<IRes, IBody> {
21
21
  axiosFn: () => Promise<AxiosResponse<MyApiResponse<IRes>, IBody>>;
22
22
  options?: Partial<UseQueryOptions<IRes, Error>>;
23
23
  }
24
- declare function useMyReactQuery<IRes, IBody>({ queryKey, axiosFn, options }: MyReactQueryProps<IRes, IBody>): _tanstack_react_query.UseQueryResult<_tanstack_react_query.NoInfer<IRes>, Error>;
24
+ declare function useMyReactQuery<IRes, IBody>({ queryKey, axiosFn, options }: MyReactQueryProps<IRes, IBody>): _tanstack_react_query.UseQueryResult<IRes, Error>;
25
25
 
26
26
  declare function useQ_AQ_GetAQModule(): _tanstack_react_query.UseQueryResult<IAQModule, Error>;
27
27
 
package/dist/modules-features/authenticate/F_authenticate_Login/css.module.css CHANGED
@@ -1,4 +1,4 @@
1
- .title {
2
- font-family: Greycliff CF, var(--mantine-font-family);
3
- font-weight: 900;
4
- }
1
+ .title {
2
+ font-family: Greycliff CF, var(--mantine-font-family);
3
+ font-weight: 900;
4
+ }
package/dist/modules-features/index.mjs CHANGED
@@ -24,17 +24,17 @@ import {
24
24
  useS_BasicAppShell,
25
25
  useS_authenticate,
26
26
  utils_layout_getItemsWithoutLinks
27
- } from "../chunk-EIPT2DZW.mjs";
27
+ } from "../chunk-M72WIRIX.mjs";
28
+ import {
29
+ enum_emailConfigModule
30
+ } from "../chunk-VH4ZAD6M.mjs";
31
+ import "../chunk-K6S7R6LU.mjs";
28
32
  import {
29
33
  const_object_documentTypes
30
34
  } from "../chunk-GFEMKKFH.mjs";
31
35
  import {
32
36
  const_object_colors
33
37
  } from "../chunk-NWBLJ3W3.mjs";
34
- import {
35
- enum_emailConfigModule
36
- } from "../chunk-VH4ZAD6M.mjs";
37
- import "../chunk-K6S7R6LU.mjs";
38
38
  import {
39
39
  baseAxios_default,
40
40
  useQ_AQ_GetAQModule,
@@ -1533,60 +1533,6 @@ function F_core38677_Save() {
1533
1533
 
1534
1534
  // src/data/menuData.ts
1535
1535
  var menuData = [
1536
- {
1537
- label: "Qu\u1EA3n l\xED h\u1EC7 th\u1ED1ng",
1538
- links: [
1539
- { pageId: 1, name: "Account management", label: "Qu\u1EA3n l\xED t\xE0i kho\u1EA3n", link: "core71678", note: "Qu\u1EA3n l\xED t\xE0i kho\u1EA3n c\u1EE7a ng\u01B0\u1EDDi d\xF9ng", status: "Prototype" },
1540
- { pageId: 2, name: "Access control level", label: "Ph\xE2n quy\u1EC1n c\u1EA5p \u0111\u01A1n v\u1ECB", link: "core38677", note: "Qu\u1EA3n l\xED t\xE0i kho\u1EA3n c\u1EE7a ng\u01B0\u1EDDi d\xF9ng" },
1541
- { pageId: 3, name: "Access control", label: "Ph\xE2n quy\u1EC1n s\u1EED d\u1EE5ng", link: "core83092", note: "Qu\u1EA3n l\xED t\xE0i kho\u1EA3n c\u1EE7a ng\u01B0\u1EDDi d\xF9ng" },
1542
- { pageId: 4, name: "Security regulations", label: "Quy \u0111\u1ECBnh an to\xE0n/ b\u1EA3o m\u1EADt th\xF4ng tin", link: "core76318" },
1543
- { pageId: 5, name: "System updates", label: "Th\xF4ng tin x\xE2y d\u1EF1ng, c\u1EA3i ti\u1EBFn, b\u1EA3o tr\xEC h\u1EC7 th\u1ED1ng", link: "core16209" },
1544
- { pageId: 6, name: "User guide", label: "T\xE0i li\u1EC7u h\u01B0\u1EDBng d\u1EABn s\u1EED d\u1EE5ng", link: "core40207" }
1545
- ]
1546
- },
1547
- {
1548
- label: "V\u0103n b\u1EA3n - Quy \u0111\u1ECBnh",
1549
- links: [
1550
- { pageId: 7, name: "Organizational regulations", label: "V\u0103n b\u1EA3n - Quy \u0111\u1ECBnh t\u1ED5 ch\u1EE9c", link: "core26965" },
1551
- { pageId: 8, name: "Workflow process", label: "Quy tr\xECnh x\u1EED l\xFD c\xF4ng vi\u1EC7c", link: "core27311" },
1552
- { pageId: 9, name: "Form templates", label: "T\xE0i li\u1EC7u bi\u1EC3u m\u1EABu", link: "core12196" }
1553
- ]
1554
- },
1555
- {
1556
- label: "Danh m\u1EE5c h\u1EC7 th\u1ED1ng ",
1557
- links: [
1558
- { pageId: 0, name: "Document categories", label: "Danh m\u1EE5c lo\u1EA1i v\u0103n b\u1EA3n", link: "core18256" },
1559
- { pageId: 0, name: "", label: "Danh m\u1EE5c c\u1EA5u h\xECnh mail", link: "core64229" },
1560
- { pageId: 0, name: "", label: "C\u1EA5u h\xECnh th\xF4ng tin ch\u1EE7 qu\u1EA3n", link: "core60524" }
1561
- ]
1562
- },
1563
- {
1564
- label: "Qu\u1EA3n l\xED h\u1EC7 th\u1ED1ng",
1565
- links: [
1566
- { pageId: 1, name: "Account management", label: "Qu\u1EA3n l\xED t\xE0i kho\u1EA3n", link: "core71678", note: "Qu\u1EA3n l\xED t\xE0i kho\u1EA3n c\u1EE7a ng\u01B0\u1EDDi d\xF9ng", status: "Prototype" },
1567
- { pageId: 2, name: "Access control level", label: "Ph\xE2n quy\u1EC1n c\u1EA5p \u0111\u01A1n v\u1ECB", link: "core38677", note: "Qu\u1EA3n l\xED t\xE0i kho\u1EA3n c\u1EE7a ng\u01B0\u1EDDi d\xF9ng" },
1568
- { pageId: 3, name: "Access control", label: "Ph\xE2n quy\u1EC1n s\u1EED d\u1EE5ng", link: "core83092", note: "Qu\u1EA3n l\xED t\xE0i kho\u1EA3n c\u1EE7a ng\u01B0\u1EDDi d\xF9ng" },
1569
- { pageId: 4, name: "Security regulations", label: "Quy \u0111\u1ECBnh an to\xE0n/ b\u1EA3o m\u1EADt th\xF4ng tin", link: "core76318" },
1570
- { pageId: 5, name: "System updates", label: "Th\xF4ng tin x\xE2y d\u1EF1ng, c\u1EA3i ti\u1EBFn, b\u1EA3o tr\xEC h\u1EC7 th\u1ED1ng", link: "core16209" },
1571
- { pageId: 6, name: "User guide", label: "T\xE0i li\u1EC7u h\u01B0\u1EDBng d\u1EABn s\u1EED d\u1EE5ng", link: "core40207" }
1572
- ]
1573
- },
1574
- {
1575
- label: "V\u0103n b\u1EA3n - Quy \u0111\u1ECBnh",
1576
- links: [
1577
- { pageId: 7, name: "Organizational regulations", label: "V\u0103n b\u1EA3n - Quy \u0111\u1ECBnh t\u1ED5 ch\u1EE9c", link: "core26965" },
1578
- { pageId: 8, name: "Workflow process", label: "Quy tr\xECnh x\u1EED l\xFD c\xF4ng vi\u1EC7c", link: "core27311" },
1579
- { pageId: 9, name: "Form templates", label: "T\xE0i li\u1EC7u bi\u1EC3u m\u1EABu", link: "core12196" }
1580
- ]
1581
- },
1582
- {
1583
- label: "Danh m\u1EE5c h\u1EC7 th\u1ED1ng ",
1584
- links: [
1585
- { pageId: 0, name: "Document categories", label: "Danh m\u1EE5c lo\u1EA1i v\u0103n b\u1EA3n", link: "core18256" },
1586
- { pageId: 0, name: "", label: "Danh m\u1EE5c c\u1EA5u h\xECnh mail", link: "core64229" },
1587
- { pageId: 0, name: "", label: "C\u1EA5u h\xECnh th\xF4ng tin ch\u1EE7 qu\u1EA3n", link: "core60524" }
1588
- ]
1589
- },
1590
1536
  {
1591
1537
  label: "Qu\u1EA3n l\xED h\u1EC7 th\u1ED1ng",
1592
1538
  links: [
package/dist/providers/mantine.module.css CHANGED
@@ -1,21 +1,21 @@
1
- .input {
2
- &[data-variant="underline"] {
3
- border: 2px solid transparent;
4
- border-radius: 5px;
5
- padding-left: 8px;
6
- padding-right: 8px;
7
- background-color: white;
8
-
9
- &:focus,
10
- &:focus-visible {
11
- border-color: var(--mantine-color-gray-5);
12
- outline: none;
13
- }
14
-
15
- &:active {
16
- border-color: var(--mantine-color-gray-5);
17
- }
18
-
19
- transition: border-color 0.2s ease-in-out;
20
- }
21
- }
1
+ .input {
2
+ &[data-variant="underline"] {
3
+ border: 2px solid transparent;
4
+ border-radius: 5px;
5
+ padding-left: 8px;
6
+ padding-right: 8px;
7
+ background-color: white;
8
+
9
+ &:focus,
10
+ &:focus-visible {
11
+ border-color: var(--mantine-color-gray-5);
12
+ outline: none;
13
+ }
14
+
15
+ &:active {
16
+ border-color: var(--mantine-color-gray-5);
17
+ }
18
+
19
+ transition: border-color 0.2s ease-in-out;
20
+ }
21
+ }