@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.
Files changed (28) hide show
  1. package/dist/cjs/components/atoms/Button/Button.types.d.ts +1 -1
  2. package/dist/cjs/components/atoms/Text/Text.types.d.ts +5 -0
  3. package/dist/cjs/components/molecules/ButtonGroup/ButtonGroup.d.ts +7 -0
  4. package/dist/cjs/components/molecules/ButtonGroup/ButtonGroup.types.d.ts +29 -0
  5. package/dist/cjs/components/molecules/ButtonGroup/index.d.ts +4 -0
  6. package/dist/cjs/components/molecules/ButtonGroup/utils.d.ts +13 -0
  7. package/dist/cjs/components/molecules/DatePicker/DatePicker.types.d.ts +5 -0
  8. package/dist/cjs/components/molecules/Popover/Popover.types.d.ts +6 -1
  9. package/dist/cjs/components/molecules/Popover/index.d.ts +2 -2
  10. package/dist/cjs/components/molecules/index.d.ts +2 -0
  11. package/dist/cjs/library.css +194 -71
  12. package/dist/cjs/library.js +3 -3
  13. package/dist/cjs/library.js.map +1 -1
  14. package/dist/esm/components/atoms/Button/Button.types.d.ts +1 -1
  15. package/dist/esm/components/atoms/Text/Text.types.d.ts +5 -0
  16. package/dist/esm/components/molecules/ButtonGroup/ButtonGroup.d.ts +7 -0
  17. package/dist/esm/components/molecules/ButtonGroup/ButtonGroup.types.d.ts +29 -0
  18. package/dist/esm/components/molecules/ButtonGroup/index.d.ts +4 -0
  19. package/dist/esm/components/molecules/ButtonGroup/utils.d.ts +13 -0
  20. package/dist/esm/components/molecules/DatePicker/DatePicker.types.d.ts +5 -0
  21. package/dist/esm/components/molecules/Popover/Popover.types.d.ts +6 -1
  22. package/dist/esm/components/molecules/Popover/index.d.ts +2 -2
  23. package/dist/esm/components/molecules/index.d.ts +2 -0
  24. package/dist/esm/library.css +194 -71
  25. package/dist/esm/library.js +3 -3
  26. package/dist/esm/library.js.map +1 -1
  27. package/dist/index.d.ts +51 -3
  28. package/package.json +1 -1
@@ -1,5 +1,5 @@
1
1
  import type { HTMLAttributes, ReactNode, MouseEvent } from 'react';
2
- export type ButtonTypeEnum = 'Filled' | 'Outline' | 'Ghost';
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,7 @@
1
+ import React from 'react';
2
+ import type { ButtonGroupProps } from './ButtonGroup.types';
3
+ /**
4
+ * ButtonGroup component definition.
5
+ */
6
+ declare const ButtonGroup: (props: ButtonGroupProps) => React.JSX.Element;
7
+ export default ButtonGroup;
@@ -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,4 @@
1
+ import ButtonGroup from './ButtonGroup';
2
+ import type { ButtonGroupProps } from './ButtonGroup.types';
3
+ export type { ButtonGroupProps };
4
+ export default ButtonGroup;
@@ -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';
@@ -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--Outline__nmHP2 {
293
+ .Button-module_type--Outlined__zZKWx {
288
294
  --button-background-color: transparent;
289
295
  }
290
- .Button-module_style--Primary__qHNSI.Button-module_type--Outline__nmHP2 {
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--Outline__nmHP2 {
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--Outline__nmHP2 {
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: var(--spacing-extra-large);
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
- border: 1px solid var(--input-border-color);
606
- border: var(--input-border-width) solid var(--input-border-color);
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-module_popover__iRoMJ .Popover-module_content__--lC1 {
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
- .DatePicker-module_datePicker__YSy2h {
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-medium);
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: 12px;
2458
+ --font-size-2: 13px;
2336
2459
  --font-size-3: 14px;
2337
2460
  --font-size-4: 16px;
2338
2461
  --font-size-5: 28px;