@delightui/components 0.1.5 → 0.1.6
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.
- package/dist/cjs/components/atoms/Button/Button.types.d.ts +1 -1
- package/dist/cjs/components/atoms/Text/Text.types.d.ts +5 -0
- package/dist/cjs/components/molecules/ButtonGroup/ButtonGroup.d.ts +7 -0
- package/dist/cjs/components/molecules/ButtonGroup/ButtonGroup.types.d.ts +29 -0
- package/dist/cjs/components/molecules/ButtonGroup/index.d.ts +4 -0
- package/dist/cjs/components/molecules/ButtonGroup/utils.d.ts +13 -0
- package/dist/cjs/components/molecules/DatePicker/DatePicker.types.d.ts +5 -0
- package/dist/cjs/components/molecules/Popover/Popover.types.d.ts +6 -1
- package/dist/cjs/components/molecules/Popover/index.d.ts +2 -2
- package/dist/cjs/components/molecules/index.d.ts +2 -0
- package/dist/cjs/library.css +194 -71
- package/dist/cjs/library.js +3 -3
- package/dist/cjs/library.js.map +1 -1
- package/dist/esm/components/atoms/Button/Button.types.d.ts +1 -1
- package/dist/esm/components/atoms/Text/Text.types.d.ts +5 -0
- package/dist/esm/components/molecules/ButtonGroup/ButtonGroup.d.ts +7 -0
- package/dist/esm/components/molecules/ButtonGroup/ButtonGroup.types.d.ts +29 -0
- package/dist/esm/components/molecules/ButtonGroup/index.d.ts +4 -0
- package/dist/esm/components/molecules/ButtonGroup/utils.d.ts +13 -0
- package/dist/esm/components/molecules/DatePicker/DatePicker.types.d.ts +5 -0
- package/dist/esm/components/molecules/Popover/Popover.types.d.ts +6 -1
- package/dist/esm/components/molecules/Popover/index.d.ts +2 -2
- package/dist/esm/components/molecules/index.d.ts +2 -0
- package/dist/esm/library.css +194 -71
- package/dist/esm/library.js +3 -3
- package/dist/esm/library.js.map +1 -1
- package/dist/index.d.ts +51 -3
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { HTMLAttributes, ReactNode, MouseEvent } from 'react';
|
|
2
|
-
export type ButtonTypeEnum = 'Filled' | '
|
|
2
|
+
export type ButtonTypeEnum = 'Filled' | 'Outlined' | 'Ghost';
|
|
3
3
|
export type ButtonStyleEnum = 'Primary' | 'Secondary' | 'Destructive';
|
|
4
4
|
export type ButtonSizeEnum = 'Small' | 'Medium' | 'Large';
|
|
5
5
|
export type ButtonActionTypeEnum = 'button' | 'submit' | 'reset';
|
|
@@ -54,6 +54,11 @@ export interface TextProps {
|
|
|
54
54
|
* @default 'None'
|
|
55
55
|
*/
|
|
56
56
|
decoration?: TextDecorationEnum;
|
|
57
|
+
/**
|
|
58
|
+
* Flag to show ellipsis for overflowing text.
|
|
59
|
+
* @default false
|
|
60
|
+
*/
|
|
61
|
+
ellipsis?: boolean;
|
|
57
62
|
/**
|
|
58
63
|
* Transform style for the text.
|
|
59
64
|
* @default 'None'
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Enum for the alignment of the button-group.
|
|
4
|
+
*/
|
|
5
|
+
export type ButtonGroupAlignEnum = 'Horizontal' | 'Vertical';
|
|
6
|
+
/**
|
|
7
|
+
* Enum for the type of the button-group.
|
|
8
|
+
*/
|
|
9
|
+
export type ButtonGroupTypeEnum = 'Outlined' | 'Ghost';
|
|
10
|
+
export type ButtonGroupProps = {
|
|
11
|
+
/**
|
|
12
|
+
* The alignment of the button-group.
|
|
13
|
+
* @default 'Horizontal'
|
|
14
|
+
*/
|
|
15
|
+
align?: ButtonGroupAlignEnum;
|
|
16
|
+
/**
|
|
17
|
+
* Type of the button-group.
|
|
18
|
+
* @default 'Filled'
|
|
19
|
+
*/
|
|
20
|
+
type?: ButtonGroupTypeEnum;
|
|
21
|
+
/**
|
|
22
|
+
* The content to be displayed within the ButtonGroup.
|
|
23
|
+
*/
|
|
24
|
+
children: ReactNode | ReactNode[];
|
|
25
|
+
/**
|
|
26
|
+
* Additional class for styling.
|
|
27
|
+
*/
|
|
28
|
+
className?: string;
|
|
29
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Renders a list of button items.
|
|
4
|
+
*
|
|
5
|
+
* This function takes children elements (which can be a single ReactNode
|
|
6
|
+
* or an array of ReactNodes) and maps them to list items (<li>)
|
|
7
|
+
* with unique keys.
|
|
8
|
+
*
|
|
9
|
+
* @param {ReactNode | ReactNode[]} children - The button items to render.
|
|
10
|
+
* @returns {ReactElement | null} A React fragment containing a list of
|
|
11
|
+
* <li> elements, each wrapping a child.
|
|
12
|
+
*/
|
|
13
|
+
export declare const renderButtonItem: (children: ReactNode | ReactNode[]) => React.JSX.Element;
|
|
@@ -68,5 +68,10 @@ export type DatePickerProps = {
|
|
|
68
68
|
* Datepicker position
|
|
69
69
|
*/
|
|
70
70
|
position?: DatePickerPosition;
|
|
71
|
+
/**
|
|
72
|
+
* Function to parse date string to Date object.
|
|
73
|
+
* this function will be used to parse initial date string and date string from input field.
|
|
74
|
+
*/
|
|
75
|
+
parseDate?: (date: string) => Date;
|
|
71
76
|
};
|
|
72
77
|
export {};
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { CSSProperties, ReactNode } from 'react';
|
|
2
3
|
import type { Offset } from 'react-overlays/usePopper';
|
|
3
4
|
/**
|
|
4
5
|
* Enum for the action type of the Popover.
|
|
5
6
|
*/
|
|
6
|
-
export type ActionType = 'Click' | 'Hover';
|
|
7
|
+
export type ActionType = 'Click' | 'Hover' | 'DoubleClick';
|
|
7
8
|
/**
|
|
8
9
|
* Enum for the overlay direction of the Popover.
|
|
9
10
|
*/
|
|
@@ -23,6 +24,10 @@ export type ContentProps = {
|
|
|
23
24
|
* Props for the Popover component.
|
|
24
25
|
*/
|
|
25
26
|
export type PopoverProps = {
|
|
27
|
+
/**
|
|
28
|
+
* Ref or Element for the Popover component to render in.
|
|
29
|
+
*/
|
|
30
|
+
container?: HTMLElement | React.RefObject<HTMLElement> | null;
|
|
26
31
|
/**
|
|
27
32
|
* The content to display in the Popover.
|
|
28
33
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import Popover from './Popover';
|
|
2
|
-
import type { PopoverProps, PopoverHandle } from './Popover.types';
|
|
3
|
-
export type { PopoverProps, PopoverHandle };
|
|
2
|
+
import type { PopoverProps, PopoverHandle, OverlayDirectionEnum } from './Popover.types';
|
|
3
|
+
export type { PopoverProps, PopoverHandle, OverlayDirectionEnum };
|
|
4
4
|
export default Popover;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export { default as ButtonGroup } from './ButtonGroup';
|
|
1
2
|
export { default as ContextMenu } from './ContextMenu';
|
|
2
3
|
export { default as DatePicker } from './DatePicker';
|
|
3
4
|
export { default as FormField } from './FormField';
|
|
@@ -12,6 +13,7 @@ export { default as TableCell } from './TableCell';
|
|
|
12
13
|
export { default as TableHeader } from './TableHeader';
|
|
13
14
|
export { default as TableRow } from './TableRow';
|
|
14
15
|
export { default as Tabs } from './Tabs';
|
|
16
|
+
export * from './ButtonGroup';
|
|
15
17
|
export * from './ContextMenu';
|
|
16
18
|
export * from './DatePicker';
|
|
17
19
|
export * from './FormField';
|
package/dist/cjs/library.css
CHANGED
|
@@ -170,6 +170,7 @@
|
|
|
170
170
|
display: flex;
|
|
171
171
|
align-items: center;
|
|
172
172
|
justify-content: center;
|
|
173
|
+
position: relative;
|
|
173
174
|
padding-top: 0px;
|
|
174
175
|
padding-top: var(--button-padding-top);
|
|
175
176
|
padding-bottom: 0px;
|
|
@@ -188,6 +189,11 @@
|
|
|
188
189
|
background-color: var(--button-background-color);
|
|
189
190
|
color: var(--button-color);
|
|
190
191
|
}
|
|
192
|
+
.Button-module_button__y6Gwz .Button-module_content__IipV4 {
|
|
193
|
+
flex: 1;
|
|
194
|
+
display: flex;
|
|
195
|
+
justify-content: center;
|
|
196
|
+
}
|
|
191
197
|
.Button-module_button__y6Gwz .Button-module_leadingIcon__vsX8z * > path,
|
|
192
198
|
.Button-module_button__y6Gwz .Button-module_trailingIcon__kXG08 * > path {
|
|
193
199
|
fill: var(--button-icon-fill);
|
|
@@ -284,10 +290,10 @@
|
|
|
284
290
|
--button-background-color--focus-visible: var(--surface-destructive--hover);
|
|
285
291
|
--button-background-color--disabled: var(--surface-destructive--disabled);
|
|
286
292
|
}
|
|
287
|
-
.Button-module_type--
|
|
293
|
+
.Button-module_type--Outlined__zZKWx {
|
|
288
294
|
--button-background-color: transparent;
|
|
289
295
|
}
|
|
290
|
-
.Button-module_style--Primary__qHNSI.Button-module_type--
|
|
296
|
+
.Button-module_style--Primary__qHNSI.Button-module_type--Outlined__zZKWx {
|
|
291
297
|
--button-border-color: var(--border-primary);
|
|
292
298
|
--button-border-color--hover: var(--border-primary);
|
|
293
299
|
--button-background-color--hover: var(--surface-primary);
|
|
@@ -298,7 +304,7 @@
|
|
|
298
304
|
--button-border-color--disabled: var(--border-grey-3);
|
|
299
305
|
--button-background-color--disabled: var(--surface-primary--disabled);
|
|
300
306
|
}
|
|
301
|
-
.Button-module_style--Secondary__hUuBL.Button-module_type--
|
|
307
|
+
.Button-module_style--Secondary__hUuBL.Button-module_type--Outlined__zZKWx {
|
|
302
308
|
--button-border-color: var(--border-grey-3);
|
|
303
309
|
--button-border-color--hover: var(--border-grey-3);
|
|
304
310
|
--button-background-color--hover: var(--surface-secondary--hover);
|
|
@@ -309,7 +315,7 @@
|
|
|
309
315
|
--button-border-color--disabled: var(--border-grey-3);
|
|
310
316
|
--button-background-color--disabled: var(--surface-secondary--disabled);
|
|
311
317
|
}
|
|
312
|
-
.Button-module_style--Destructive__0zpw4.Button-module_type--
|
|
318
|
+
.Button-module_style--Destructive__0zpw4.Button-module_type--Outlined__zZKWx {
|
|
313
319
|
--button-border-color: var(--border-destructive);
|
|
314
320
|
--button-border-color--hover: var(--border-destructive);
|
|
315
321
|
--button-background-color--hover: var(--surface-destructive--hover);
|
|
@@ -324,6 +330,7 @@
|
|
|
324
330
|
--button-background-color: transparent;
|
|
325
331
|
--button-border-color: transparent;
|
|
326
332
|
--button-border-color--hover: transparent;
|
|
333
|
+
--button-border-width: 0px;
|
|
327
334
|
}
|
|
328
335
|
.Button-module_style--Primary__qHNSI.Button-module_type--Ghost__uCnZg {
|
|
329
336
|
--button-background-color--hover: var(--surface-primary);
|
|
@@ -343,6 +350,18 @@
|
|
|
343
350
|
--button-background-color--focus-visible: var(--surface-destructive--hover);
|
|
344
351
|
--button-background-color--disabled: var(--surface-destructive--disabled);
|
|
345
352
|
}
|
|
353
|
+
.Button-module_button__y6Gwz.Button-module_loading__7LCMc {
|
|
354
|
+
cursor: default;
|
|
355
|
+
pointer-events: none;
|
|
356
|
+
}
|
|
357
|
+
.Button-module_button__y6Gwz.Button-module_loading__7LCMc .Button-module_content__IipV4,
|
|
358
|
+
.Button-module_button__y6Gwz.Button-module_loading__7LCMc .Button-module_leadingIcon__vsX8z,
|
|
359
|
+
.Button-module_button__y6Gwz.Button-module_loading__7LCMc .Button-module_trailingIcon__kXG08 {
|
|
360
|
+
visibility: hidden;
|
|
361
|
+
}
|
|
362
|
+
.Button-module_button__y6Gwz.Button-module_loading__7LCMc .Button-module_loadingIcon__W6dH2 {
|
|
363
|
+
position: absolute;
|
|
364
|
+
}
|
|
346
365
|
.Text-module_text__qmiLT {
|
|
347
366
|
--font-family: sans-serif;
|
|
348
367
|
--font-weight: var(--font-weight-4);
|
|
@@ -509,6 +528,10 @@
|
|
|
509
528
|
.Text-module_lowerCase__0T-7t {
|
|
510
529
|
text-transform: lowercase;
|
|
511
530
|
}
|
|
531
|
+
|
|
532
|
+
.Text-module_ellipsis__UXzJI {
|
|
533
|
+
text-overflow: ellipsis;
|
|
534
|
+
}
|
|
512
535
|
.Card-module_card__YEFzM {
|
|
513
536
|
--card-padding-top: var(--spacing-extra-extra-large);
|
|
514
537
|
--card-padding-bottom: var(--spacing-extra-extra-large);
|
|
@@ -578,10 +601,6 @@
|
|
|
578
601
|
.Input-module_input__NAeHe {
|
|
579
602
|
--input-width: auto;
|
|
580
603
|
--input-gap: var(--spacing-extra-small);
|
|
581
|
-
--input-padding-top: var(--spacing-medium);
|
|
582
|
-
--input-padding-right: var(--spacing-medium);
|
|
583
|
-
--input-padding-bottom: var(--spacing-medium);
|
|
584
|
-
--input-padding-left: var(--spacing-medium);
|
|
585
604
|
--input-radius: var(--radius-extra-small);
|
|
586
605
|
--input-border-width: 1px;
|
|
587
606
|
--input-surface-color: var(--background-5);
|
|
@@ -590,20 +609,23 @@
|
|
|
590
609
|
--input-border-color--focus-within: var(--border-primary);
|
|
591
610
|
--input-border-color--disabled: var(--border-grey-3);
|
|
592
611
|
--input-border-color--error: var(--red-700);
|
|
593
|
-
--input-inputElement-height:
|
|
612
|
+
--input-inputElement-height: 2rem;
|
|
594
613
|
--input-text-color: var(--text-primary);
|
|
595
614
|
--input-text-color--disabled: var(--text-secondary);
|
|
596
615
|
--input-placeholder-color: var(--text-secondary);
|
|
597
616
|
--input-font-size: var(--font-size-body-medium);
|
|
598
617
|
--input-font-weight: var(--font-weight-regular);
|
|
599
618
|
--input-line-height: var(--line-height-body-medium);
|
|
619
|
+
--input-inputElement-padding-top: var(--spacing-medium);
|
|
620
|
+
--input-inputElement-padding-right: var(--spacing-medium);
|
|
621
|
+
--input-inputElement-padding-bottom: var(--spacing-medium);
|
|
622
|
+
--input-inputElement-padding-left: var(--spacing-medium);
|
|
600
623
|
display: flex;
|
|
601
624
|
gap: var(--input-gap);
|
|
602
|
-
padding: var(--input-padding-top) var(--input-padding-right) var(--input-padding-bottom) var(--input-padding-left);
|
|
603
625
|
border-radius: var(--input-radius);
|
|
604
626
|
background-color: var(--input-surface-color);
|
|
605
|
-
|
|
606
|
-
|
|
627
|
+
outline: 1px solid var(--input-border-color);
|
|
628
|
+
outline: var(--input-border-width) solid var(--input-border-color);
|
|
607
629
|
align-items: center;
|
|
608
630
|
width: auto;
|
|
609
631
|
width: var(--input-width);
|
|
@@ -613,6 +635,7 @@
|
|
|
613
635
|
width: 100%;
|
|
614
636
|
height: var(--input-inputElement-height);
|
|
615
637
|
color: var(--input-text-color);
|
|
638
|
+
padding: var(--input-inputElement-padding-top) var(--input-inputElement-padding-right) var(--input-inputElement-padding-bottom) var(--input-inputElement-padding-left);
|
|
616
639
|
font-size: var(--input-font-size);
|
|
617
640
|
font-weight: var(--input-font-weight);
|
|
618
641
|
line-height: var(--input-line-height);
|
|
@@ -626,13 +649,19 @@
|
|
|
626
649
|
.Input-module_input__NAeHe:focus-within:not(.Input-module_disabled__6XebD):not(.Input-module_error__qP189) {
|
|
627
650
|
border-color: var(--input-border-color--focus-within);
|
|
628
651
|
}
|
|
652
|
+
.Input-module_input__NAeHe .Input-module_trailingIcon__UDufB {
|
|
653
|
+
padding-right: var(--spacing-medium);
|
|
654
|
+
}
|
|
655
|
+
.Input-module_input__NAeHe .Input-module_leadingIcon__bUFw5 {
|
|
656
|
+
padding-left: var(--spacing-medium);
|
|
657
|
+
}
|
|
629
658
|
.Input-module_disabled__6XebD {
|
|
630
659
|
background-color: var(--input-surface-color--disabled);
|
|
631
|
-
border-color: var(--input-border-color--disabled);
|
|
660
|
+
--input-border-color: var(--input-border-color--disabled);
|
|
632
661
|
}
|
|
633
662
|
.Input-module_error__qP189 {
|
|
634
663
|
background-color: var(--input-surface-color);
|
|
635
|
-
border-color: var(--input-border-color--error);
|
|
664
|
+
--input-border-color: var(--input-border-color--error);
|
|
636
665
|
}
|
|
637
666
|
.List-module_list__Fj0YJ {
|
|
638
667
|
--list-gap: 0;
|
|
@@ -735,6 +764,97 @@
|
|
|
735
764
|
border-color: var(--textArea-border-color--error);
|
|
736
765
|
color: var(--textArea-text-color--error);
|
|
737
766
|
}
|
|
767
|
+
.ButtonGroup-module_buttonGroup__s1X98 {
|
|
768
|
+
--buttonGroup-gap: var(--spacing-none);
|
|
769
|
+
--buttonGroup-border-width: 1px;
|
|
770
|
+
--buttonGroup-border-color: transparent;
|
|
771
|
+
--buttonGroup-border-radius: var(--radius-extra-small);
|
|
772
|
+
--buttonGroup-border-color--hover: transparent;
|
|
773
|
+
--buttonGroup-border-color--pressed: transparent;
|
|
774
|
+
--buttonGroup-border-color--focus-visible: transparent;
|
|
775
|
+
display: flex;
|
|
776
|
+
gap: var(--buttonGroup-gap);
|
|
777
|
+
border: 1px solid transparent;
|
|
778
|
+
border: var(--buttonGroup-border-width) solid var(--buttonGroup-border-color);
|
|
779
|
+
border-radius: var(--buttonGroup-border-radius);
|
|
780
|
+
width: -moz-fit-content;
|
|
781
|
+
width: fit-content;
|
|
782
|
+
}
|
|
783
|
+
.ButtonGroup-module_buttonGroup__s1X98:hover:not(:disabled) {
|
|
784
|
+
border: var(--buttonGroup-border-width) solid var(--buttonGroup-border-color--hover);
|
|
785
|
+
}
|
|
786
|
+
.ButtonGroup-module_buttonGroup__s1X98:active:not(:disabled) {
|
|
787
|
+
border: var(--buttonGroup-border-width) solid var(--buttonGroup-border-color--pressed);
|
|
788
|
+
}
|
|
789
|
+
.ButtonGroup-module_buttonGroup__s1X98:focus-visible:not(:disabled) {
|
|
790
|
+
border: var(--buttonGroup-border-width) solid var(--buttonGroup-border-color--focus-visible);
|
|
791
|
+
}
|
|
792
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF {
|
|
793
|
+
flex-direction: row;
|
|
794
|
+
}
|
|
795
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k {
|
|
796
|
+
flex-direction: column;
|
|
797
|
+
}
|
|
798
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_type--Outlined__TZHay {
|
|
799
|
+
--buttonGroup-border-color: var(--border-primary);
|
|
800
|
+
--buttonGroup-border-color--hover: var(--border-primary);
|
|
801
|
+
--buttonGroup-border-color--pressed: var(--border-primary);
|
|
802
|
+
--buttonGroup-border-color--focus-visible: var(--border-primary);
|
|
803
|
+
}
|
|
804
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li button {
|
|
805
|
+
height: 100%;
|
|
806
|
+
border: none;
|
|
807
|
+
border-right: var(--button-border-width) solid var(--button-border-color);
|
|
808
|
+
--button-border-radius: none;
|
|
809
|
+
}
|
|
810
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li button:hover, .ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li button:active, .ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li button:focus-visible {
|
|
811
|
+
border: none;
|
|
812
|
+
border-right: var(--button-border-width) solid var(--button-border-color);
|
|
813
|
+
--button-border-radius: none;
|
|
814
|
+
}
|
|
815
|
+
/* Remove the right border if there's only one child */
|
|
816
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li:only-child button {
|
|
817
|
+
border-right: none;
|
|
818
|
+
--button-border-radius: none;
|
|
819
|
+
}
|
|
820
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li:only-child button:hover, .ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li:only-child button:active, .ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li:only-child button:focus-visible {
|
|
821
|
+
--button-border-radius: none;
|
|
822
|
+
border-right: none;
|
|
823
|
+
}
|
|
824
|
+
/* Remove the right border of the last item if there are two children */
|
|
825
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li:last-child:not(:only-child) button {
|
|
826
|
+
border-right: none;
|
|
827
|
+
--button-border-radius: none;
|
|
828
|
+
}
|
|
829
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li:last-child:not(:only-child) button:hover, .ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li:last-child:not(:only-child) button:active, .ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li:last-child:not(:only-child) button:focus-visible {
|
|
830
|
+
--button-border-radius: none;
|
|
831
|
+
border-right: none;
|
|
832
|
+
}
|
|
833
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li button {
|
|
834
|
+
width: 100%;
|
|
835
|
+
border: none;
|
|
836
|
+
border-bottom: var(--button-border-width) solid var(--button-border-color);
|
|
837
|
+
--button-border-radius: none;
|
|
838
|
+
}
|
|
839
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li button:hover, .ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li button:active, .ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li button:focus-visible {
|
|
840
|
+
border: none;
|
|
841
|
+
border-bottom: var(--button-border-width) solid var(--button-border-color);
|
|
842
|
+
--button-border-radius: none;
|
|
843
|
+
}
|
|
844
|
+
/* Remove the bottom border if there's only one child */
|
|
845
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li:only-child button {
|
|
846
|
+
border-bottom: none;
|
|
847
|
+
}
|
|
848
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li:only-child button:hover, .ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li:only-child button:active, .ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li:only-child button:focus-visible {
|
|
849
|
+
border-bottom: none;
|
|
850
|
+
}
|
|
851
|
+
/* Remove the bottom border of the last item if there are two children */
|
|
852
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li:last-child:not(:only-child) button {
|
|
853
|
+
border-bottom: none;
|
|
854
|
+
}
|
|
855
|
+
.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li:last-child:not(:only-child) button:hover, .ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li:last-child:not(:only-child) button:active, .ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li:last-child:not(:only-child) button:focus-visible {
|
|
856
|
+
border-bottom: none;
|
|
857
|
+
}
|
|
738
858
|
.ContextMenu-module_contextMenuWrapper__Pdkb6 {
|
|
739
859
|
width: -moz-fit-content;
|
|
740
860
|
width: fit-content;
|
|
@@ -774,11 +894,12 @@
|
|
|
774
894
|
height: -moz-fit-content;
|
|
775
895
|
height: fit-content;
|
|
776
896
|
}
|
|
777
|
-
.Popover-
|
|
897
|
+
.Popover-module_content__--lC1 {
|
|
778
898
|
width: -moz-fit-content;
|
|
779
899
|
width: fit-content;
|
|
780
900
|
height: -moz-fit-content;
|
|
781
901
|
height: fit-content;
|
|
902
|
+
z-index: 4;
|
|
782
903
|
}
|
|
783
904
|
.MenuItem-module_menuItem__Qu6-U {
|
|
784
905
|
--menuItem-gap: var(--spacing-extra-small);
|
|
@@ -1623,8 +1744,63 @@ span.flatpickr-weekday {
|
|
|
1623
1744
|
}
|
|
1624
1745
|
}
|
|
1625
1746
|
|
|
1626
|
-
.
|
|
1747
|
+
.FormField-module_formField__vNu-s {
|
|
1748
|
+
--form-field-gap: var(--spacing-extra-small);
|
|
1749
|
+
--label-container-gap: var(--form-field-gap);
|
|
1750
|
+
--message-container-gap: var(--form-field-gap);
|
|
1751
|
+
--form-field-height: 16px;
|
|
1752
|
+
--message-container-height: 16px;
|
|
1753
|
+
--message-icon-height: 16px;
|
|
1754
|
+
--message-icon-width: 16px;
|
|
1755
|
+
--label-font-color: var(--text-primary);
|
|
1756
|
+
--message-font-color: var(--text-secondary);
|
|
1757
|
+
--message-icon-color: var(--text-secondary);
|
|
1758
|
+
--error-font-color: var(--text-secondary);
|
|
1759
|
+
--error-icon-color: var(--icon-destructive);
|
|
1760
|
+
display: flex;
|
|
1761
|
+
flex-direction: column;
|
|
1762
|
+
gap: var(--form-field-gap);
|
|
1763
|
+
min-height: 16px;
|
|
1764
|
+
min-height: var(--form-field-height);
|
|
1765
|
+
}
|
|
1766
|
+
.FormField-module_formField__vNu-s .FormField-module_labelContainer__cPOaA {
|
|
1627
1767
|
display: flex;
|
|
1768
|
+
flex-direction: column;
|
|
1769
|
+
gap: var(--label-container-gap);
|
|
1770
|
+
}
|
|
1771
|
+
.FormField-module_formField__vNu-s .FormField-module_label__fzwKv {
|
|
1772
|
+
color: var(--label-font-color);
|
|
1773
|
+
}
|
|
1774
|
+
.FormField-module_formField__vNu-s .FormField-module_label__fzwKv.FormField-module_required__JvRw2::after {
|
|
1775
|
+
content: " *";
|
|
1776
|
+
}
|
|
1777
|
+
.FormField-module_formField__vNu-s > * {
|
|
1778
|
+
width: 100%;
|
|
1779
|
+
}
|
|
1780
|
+
.FormField-module_formField__vNu-s .FormField-module_messageContainer__KOsuq {
|
|
1781
|
+
display: flex;
|
|
1782
|
+
flex-direction: row;
|
|
1783
|
+
align-items: flex-start;
|
|
1784
|
+
gap: var(--message-container-gap);
|
|
1785
|
+
min-height: var(--message-container-height);
|
|
1786
|
+
}
|
|
1787
|
+
.FormField-module_formField__vNu-s .FormField-module_messageIcon__UgBkw {
|
|
1788
|
+
display: block;
|
|
1789
|
+
flex: 0 0 auto;
|
|
1790
|
+
width: var(--message-icon-width);
|
|
1791
|
+
height: var(--message-icon-height);
|
|
1792
|
+
}
|
|
1793
|
+
.FormField-module_formField__vNu-s .FormField-module_messageIcon__UgBkw * > path {
|
|
1794
|
+
fill: var(--message-icon-color);
|
|
1795
|
+
}
|
|
1796
|
+
.FormField-module_formField__vNu-s .FormField-module_message__ExDcf {
|
|
1797
|
+
color: var(--message-font-color);
|
|
1798
|
+
}
|
|
1799
|
+
.FormField-module_formField__vNu-s.FormField-module_error__hc4sY .FormField-module_messageIcon__UgBkw * > path {
|
|
1800
|
+
fill: var(--error-icon-color);
|
|
1801
|
+
}
|
|
1802
|
+
.FormField-module_formField__vNu-s.FormField-module_error__hc4sY .FormField-module_message__ExDcf {
|
|
1803
|
+
color: var(--error-font-color);
|
|
1628
1804
|
}
|
|
1629
1805
|
.flatpickr-calendar {
|
|
1630
1806
|
--datePicker-background-color: var(--background-2);
|
|
@@ -1779,59 +1955,6 @@ span.flatpickr-weekday {
|
|
|
1779
1955
|
/* prevent edge case where 2 consecutive dates are selected in range mode */
|
|
1780
1956
|
box-shadow: -8px 0 0 var(--datePicker-day-inRange-color), 8px 0 0 var(--datePicker-day-inRange-color);
|
|
1781
1957
|
}
|
|
1782
|
-
.FormField-module_formField__vNu-s {
|
|
1783
|
-
--form-field-gap: var(--spacing-extra-small);
|
|
1784
|
-
--label-container-gap: var(--form-field-gap);
|
|
1785
|
-
--message-container-gap: var(--form-field-gap);
|
|
1786
|
-
--message-icon-height: 16px;
|
|
1787
|
-
--message-icon-width: 16px;
|
|
1788
|
-
--label-font-color: var(--text-primary);
|
|
1789
|
-
--message-font-color: var(--text-secondary);
|
|
1790
|
-
--message-icon-color: var(--text-secondary);
|
|
1791
|
-
--error-font-color: var(--text-secondary);
|
|
1792
|
-
--error-icon-color: var(--icon-destructive);
|
|
1793
|
-
display: flex;
|
|
1794
|
-
flex-direction: column;
|
|
1795
|
-
gap: var(--form-field-gap);
|
|
1796
|
-
}
|
|
1797
|
-
.FormField-module_formField__vNu-s .FormField-module_labelContainer__cPOaA {
|
|
1798
|
-
display: flex;
|
|
1799
|
-
flex-direction: column;
|
|
1800
|
-
gap: var(--label-container-gap);
|
|
1801
|
-
}
|
|
1802
|
-
.FormField-module_formField__vNu-s .FormField-module_label__fzwKv {
|
|
1803
|
-
color: var(--label-font-color);
|
|
1804
|
-
}
|
|
1805
|
-
.FormField-module_formField__vNu-s .FormField-module_label__fzwKv.FormField-module_required__JvRw2::after {
|
|
1806
|
-
content: " *";
|
|
1807
|
-
}
|
|
1808
|
-
.FormField-module_formField__vNu-s > * {
|
|
1809
|
-
width: 100%;
|
|
1810
|
-
}
|
|
1811
|
-
.FormField-module_formField__vNu-s .FormField-module_messageContainer__KOsuq {
|
|
1812
|
-
display: flex;
|
|
1813
|
-
flex-direction: row;
|
|
1814
|
-
align-items: flex-start;
|
|
1815
|
-
gap: var(--message-container-gap);
|
|
1816
|
-
}
|
|
1817
|
-
.FormField-module_formField__vNu-s .FormField-module_messageIcon__UgBkw {
|
|
1818
|
-
display: block;
|
|
1819
|
-
flex: 0 0 auto;
|
|
1820
|
-
width: var(--message-icon-width);
|
|
1821
|
-
height: var(--message-icon-height);
|
|
1822
|
-
}
|
|
1823
|
-
.FormField-module_formField__vNu-s .FormField-module_messageIcon__UgBkw * > path {
|
|
1824
|
-
fill: var(--message-icon-color);
|
|
1825
|
-
}
|
|
1826
|
-
.FormField-module_formField__vNu-s .FormField-module_message__ExDcf {
|
|
1827
|
-
color: var(--message-font-color);
|
|
1828
|
-
}
|
|
1829
|
-
.FormField-module_formField__vNu-s.FormField-module_error__hc4sY .FormField-module_messageIcon__UgBkw * > path {
|
|
1830
|
-
fill: var(--error-icon-color);
|
|
1831
|
-
}
|
|
1832
|
-
.FormField-module_formField__vNu-s.FormField-module_error__hc4sY .FormField-module_message__ExDcf {
|
|
1833
|
-
color: var(--error-font-color);
|
|
1834
|
-
}
|
|
1835
1958
|
.Modal-module_modal__b2VqT {
|
|
1836
1959
|
--modal-width: auto;
|
|
1837
1960
|
--modal-border-width: 1px;
|
|
@@ -1978,7 +2101,7 @@ span.flatpickr-weekday {
|
|
|
1978
2101
|
--select-trigger-padding-right: var(--spacing-medium);
|
|
1979
2102
|
--select-trigger-padding-left: var(--spacing-medium);
|
|
1980
2103
|
--select-trigger-gap: var(--spacing-medium);
|
|
1981
|
-
--select-trigger-border-radius: var(--radius-
|
|
2104
|
+
--select-trigger-border-radius: var(--radius-extra-small);
|
|
1982
2105
|
--select-trigger-border-width: 1px;
|
|
1983
2106
|
--select-trigger-border-color: var(--border-grey-2);
|
|
1984
2107
|
--select-trigger-background-color: var(--background-5);
|
|
@@ -2332,7 +2455,7 @@ span.flatpickr-weekday {
|
|
|
2332
2455
|
--font-family-8: inter;
|
|
2333
2456
|
|
|
2334
2457
|
--font-size-1: 10px;
|
|
2335
|
-
--font-size-2:
|
|
2458
|
+
--font-size-2: 13px;
|
|
2336
2459
|
--font-size-3: 14px;
|
|
2337
2460
|
--font-size-4: 16px;
|
|
2338
2461
|
--font-size-5: 28px;
|