@delightui/components 0.1.5 → 0.1.7

package/dist/cjs/components/atoms/Button/Button.types.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes, ReactNode, MouseEvent } from 'react';
-export type ButtonTypeEnum = 'Filled' | 'Outline' | 'Ghost';
+export type ButtonTypeEnum = 'Filled' | 'Outlined' | 'Ghost';
 export type ButtonStyleEnum = 'Primary' | 'Secondary' | 'Destructive';
 export type ButtonSizeEnum = 'Small' | 'Medium' | 'Large';
 export type ButtonActionTypeEnum = 'button' | 'submit' | 'reset';

package/dist/cjs/components/atoms/Text/Text.types.d.ts

@@ -54,6 +54,11 @@ export interface TextProps {
      * @default 'None'
      */
     decoration?: TextDecorationEnum;
+    /**
+     * Flag to show ellipsis for overflowing text.
+     * @default false
+     */
+    ellipsis?: boolean;
     /**
      * Transform style for the text.
      * @default 'None'

package/dist/cjs/components/molecules/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ButtonGroupProps } from './ButtonGroup.types';
+/**
+ * ButtonGroup component definition.
+ */
+declare const ButtonGroup: (props: ButtonGroupProps) => React.JSX.Element;
+export default ButtonGroup;

package/dist/cjs/components/molecules/ButtonGroup/ButtonGroup.types.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+/**
+ * Enum for the alignment of the button-group.
+ */
+export type ButtonGroupAlignEnum = 'Horizontal' | 'Vertical';
+/**
+ * Enum for the type of the button-group.
+ */
+export type ButtonGroupTypeEnum = 'Outlined' | 'Ghost';
+export type ButtonGroupProps = {
+    /**
+     * The alignment of the button-group.
+     * @default 'Horizontal'
+     */
+    align?: ButtonGroupAlignEnum;
+    /**
+     * Type of the button-group.
+     * @default 'Filled'
+     */
+    type?: ButtonGroupTypeEnum;
+    /**
+     * The content to be displayed within the ButtonGroup.
+     */
+    children: ReactNode | ReactNode[];
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+};

package/dist/cjs/components/molecules/ButtonGroup/index.d.ts

@@ -0,0 +1,4 @@
+import ButtonGroup from './ButtonGroup';
+import type { ButtonGroupProps } from './ButtonGroup.types';
+export type { ButtonGroupProps };
+export default ButtonGroup;

package/dist/cjs/components/molecules/ButtonGroup/utils.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+/**
+ * Renders a list of button items.
+ *
+ * This function takes children elements (which can be a single ReactNode
+ * or an array of ReactNodes) and maps them to list items (<li>)
+ * with unique keys.
+ *
+ * @param {ReactNode | ReactNode[]} children - The button items to render.
+ * @returns {ReactElement | null} A React fragment containing a list of
+ *          <li> elements, each wrapping a child.
+ */
+export declare const renderButtonItem: (children: ReactNode | ReactNode[]) => React.JSX.Element;

package/dist/cjs/components/molecules/DatePicker/DatePicker.types.d.ts

@@ -68,5 +68,10 @@ export type DatePickerProps = {
      * Datepicker position
      */
     position?: DatePickerPosition;
+    /**
+     * Function to parse date string to Date object.
+     * this function will be used to parse initial date string and date string from input field.
+     */
+    parseDate?: (date: string) => Date;
 };
 export {};

package/dist/cjs/components/molecules/FormField/FormField.types.d.ts

@@ -16,6 +16,10 @@ export type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
      * Info icon for message
      */
     infoIcon?: React.ReactNode;
+    /**
+     * Optional field for possible error message
+     */
+    hasMessage?: boolean;
 };
 /**
  * Context values for the FormField component.

package/dist/cjs/components/molecules/Popover/Popover.types.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 import type { CSSProperties, ReactNode } from 'react';
 import type { Offset } from 'react-overlays/usePopper';
 /**
  * Enum for the action type of the Popover.
  */
-export type ActionType = 'Click' | 'Hover';
+export type ActionType = 'Click' | 'Hover' | 'DoubleClick';
 /**
  * Enum for the overlay direction of the Popover.
  */
@@ -23,6 +24,10 @@ export type ContentProps = {
  * Props for the Popover component.
  */
 export type PopoverProps = {
+    /**
+     * Ref or Element for the Popover component to render in.
+     */
+    container?: HTMLElement | React.RefObject<HTMLElement> | null;
     /**
      * The content to display in the Popover.
      */

package/dist/cjs/components/molecules/Popover/index.d.ts

@@ -1,4 +1,4 @@
 import Popover from './Popover';
-import type { PopoverProps, PopoverHandle } from './Popover.types';
-export type { PopoverProps, PopoverHandle };
+import type { PopoverProps, PopoverHandle, OverlayDirectionEnum } from './Popover.types';
+export type { PopoverProps, PopoverHandle, OverlayDirectionEnum };
 export default Popover;

package/dist/cjs/components/molecules/index.d.ts

@@ -1,3 +1,4 @@
+export { default as ButtonGroup } from './ButtonGroup';
 export { default as ContextMenu } from './ContextMenu';
 export { default as DatePicker } from './DatePicker';
 export { default as FormField } from './FormField';
@@ -12,6 +13,7 @@ export { default as TableCell } from './TableCell';
 export { default as TableHeader } from './TableHeader';
 export { default as TableRow } from './TableRow';
 export { default as Tabs } from './Tabs';
+export * from './ButtonGroup';
 export * from './ContextMenu';
 export * from './DatePicker';
 export * from './FormField';

package/dist/cjs/library.css

@@ -170,6 +170,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
   padding-top: 0px;
   padding-top: var(--button-padding-top);
   padding-bottom: 0px;
@@ -188,6 +189,11 @@
   background-color: var(--button-background-color);
   color: var(--button-color);
 }
+.Button-module_button__y6Gwz .Button-module_content__IipV4 {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
 .Button-module_button__y6Gwz .Button-module_leadingIcon__vsX8z * > path,
 .Button-module_button__y6Gwz .Button-module_trailingIcon__kXG08 * > path {
   fill: var(--button-icon-fill);
@@ -284,10 +290,10 @@
   --button-background-color--focus-visible: var(--surface-destructive--hover);
   --button-background-color--disabled: var(--surface-destructive--disabled);
 }
-.Button-module_type--Outline__nmHP2 {
+.Button-module_type--Outlined__zZKWx {
   --button-background-color: transparent;
 }
-.Button-module_style--Primary__qHNSI.Button-module_type--Outline__nmHP2 {
+.Button-module_style--Primary__qHNSI.Button-module_type--Outlined__zZKWx {
   --button-border-color: var(--border-primary);
   --button-border-color--hover: var(--border-primary);
   --button-background-color--hover: var(--surface-primary);
@@ -298,7 +304,7 @@
   --button-border-color--disabled: var(--border-grey-3);
   --button-background-color--disabled: var(--surface-primary--disabled);
 }
-.Button-module_style--Secondary__hUuBL.Button-module_type--Outline__nmHP2 {
+.Button-module_style--Secondary__hUuBL.Button-module_type--Outlined__zZKWx {
   --button-border-color: var(--border-grey-3);
   --button-border-color--hover: var(--border-grey-3);
   --button-background-color--hover: var(--surface-secondary--hover);
@@ -309,7 +315,7 @@
   --button-border-color--disabled: var(--border-grey-3);
   --button-background-color--disabled: var(--surface-secondary--disabled);
 }
-.Button-module_style--Destructive__0zpw4.Button-module_type--Outline__nmHP2 {
+.Button-module_style--Destructive__0zpw4.Button-module_type--Outlined__zZKWx {
   --button-border-color: var(--border-destructive);
   --button-border-color--hover: var(--border-destructive);
   --button-background-color--hover: var(--surface-destructive--hover);
@@ -324,6 +330,7 @@
   --button-background-color: transparent;
   --button-border-color: transparent;
   --button-border-color--hover: transparent;
+  --button-border-width: 0px;
 }
 .Button-module_style--Primary__qHNSI.Button-module_type--Ghost__uCnZg {
   --button-background-color--hover: var(--surface-primary);
@@ -343,6 +350,18 @@
   --button-background-color--focus-visible: var(--surface-destructive--hover);
   --button-background-color--disabled: var(--surface-destructive--disabled);
 }
+.Button-module_button__y6Gwz.Button-module_loading__7LCMc {
+  cursor: default;
+  pointer-events: none;
+}
+.Button-module_button__y6Gwz.Button-module_loading__7LCMc .Button-module_content__IipV4,
+.Button-module_button__y6Gwz.Button-module_loading__7LCMc .Button-module_leadingIcon__vsX8z,
+.Button-module_button__y6Gwz.Button-module_loading__7LCMc .Button-module_trailingIcon__kXG08 {
+  visibility: hidden;
+}
+.Button-module_button__y6Gwz.Button-module_loading__7LCMc .Button-module_loadingIcon__W6dH2 {
+  position: absolute;
+}
 .Text-module_text__qmiLT {
   --font-family: sans-serif;
   --font-weight: var(--font-weight-4);
@@ -509,6 +528,10 @@
 .Text-module_lowerCase__0T-7t {
   text-transform: lowercase;
 }
+
+.Text-module_ellipsis__UXzJI {
+  text-overflow: ellipsis;
+}
 .Card-module_card__YEFzM {
   --card-padding-top: var(--spacing-extra-extra-large);
   --card-padding-bottom: var(--spacing-extra-extra-large);
@@ -578,10 +601,6 @@
 .Input-module_input__NAeHe {
   --input-width: auto;
   --input-gap: var(--spacing-extra-small);
-  --input-padding-top: var(--spacing-medium);
-  --input-padding-right: var(--spacing-medium);
-  --input-padding-bottom: var(--spacing-medium);
-  --input-padding-left: var(--spacing-medium);
   --input-radius: var(--radius-extra-small);
   --input-border-width: 1px;
   --input-surface-color: var(--background-5);
@@ -590,20 +609,23 @@
   --input-border-color--focus-within: var(--border-primary);
   --input-border-color--disabled: var(--border-grey-3);
   --input-border-color--error: var(--red-700);
-  --input-inputElement-height: var(--spacing-extra-large);
+  --input-inputElement-height: 2rem;
   --input-text-color: var(--text-primary);
   --input-text-color--disabled: var(--text-secondary);
   --input-placeholder-color: var(--text-secondary);
   --input-font-size: var(--font-size-body-medium);
   --input-font-weight: var(--font-weight-regular);
   --input-line-height: var(--line-height-body-medium);
+  --input-inputElement-padding-top: var(--spacing-medium);
+  --input-inputElement-padding-right: var(--spacing-medium);
+  --input-inputElement-padding-bottom: var(--spacing-medium);
+  --input-inputElement-padding-left: var(--spacing-medium);
   display: flex;
   gap: var(--input-gap);
-  padding: var(--input-padding-top) var(--input-padding-right) var(--input-padding-bottom) var(--input-padding-left);
   border-radius: var(--input-radius);
   background-color: var(--input-surface-color);
-  border: 1px solid var(--input-border-color);
-  border: var(--input-border-width) solid var(--input-border-color);
+  outline: 1px solid var(--input-border-color);
+  outline: var(--input-border-width) solid var(--input-border-color);
   align-items: center;
   width: auto;
   width: var(--input-width);
@@ -613,6 +635,7 @@
   width: 100%;
   height: var(--input-inputElement-height);
   color: var(--input-text-color);
+  padding: var(--input-inputElement-padding-top) var(--input-inputElement-padding-right) var(--input-inputElement-padding-bottom) var(--input-inputElement-padding-left);
   font-size: var(--input-font-size);
   font-weight: var(--input-font-weight);
   line-height: var(--input-line-height);
@@ -626,13 +649,19 @@
 .Input-module_input__NAeHe:focus-within:not(.Input-module_disabled__6XebD):not(.Input-module_error__qP189) {
   border-color: var(--input-border-color--focus-within);
 }
+.Input-module_input__NAeHe .Input-module_trailingIcon__UDufB {
+  padding-right: var(--spacing-medium);
+}
+.Input-module_input__NAeHe .Input-module_leadingIcon__bUFw5 {
+  padding-left: var(--spacing-medium);
+}
 .Input-module_disabled__6XebD {
   background-color: var(--input-surface-color--disabled);
-  border-color: var(--input-border-color--disabled);
+  --input-border-color: var(--input-border-color--disabled);
 }
 .Input-module_error__qP189 {
   background-color: var(--input-surface-color);
-  border-color: var(--input-border-color--error);
+  --input-border-color: var(--input-border-color--error);
 }
 .List-module_list__Fj0YJ {
   --list-gap: 0;
@@ -735,6 +764,97 @@
   border-color: var(--textArea-border-color--error);
   color: var(--textArea-text-color--error);
 }
+.ButtonGroup-module_buttonGroup__s1X98 {
+  --buttonGroup-gap: var(--spacing-none);
+  --buttonGroup-border-width: 1px;
+  --buttonGroup-border-color: transparent;
+  --buttonGroup-border-radius: var(--radius-extra-small);
+  --buttonGroup-border-color--hover: transparent;
+  --buttonGroup-border-color--pressed: transparent;
+  --buttonGroup-border-color--focus-visible: transparent;
+  display: flex;
+  gap: var(--buttonGroup-gap);
+  border: 1px solid transparent;
+  border: var(--buttonGroup-border-width) solid var(--buttonGroup-border-color);
+  border-radius: var(--buttonGroup-border-radius);
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.ButtonGroup-module_buttonGroup__s1X98:hover:not(:disabled) {
+  border: var(--buttonGroup-border-width) solid var(--buttonGroup-border-color--hover);
+}
+.ButtonGroup-module_buttonGroup__s1X98:active:not(:disabled) {
+  border: var(--buttonGroup-border-width) solid var(--buttonGroup-border-color--pressed);
+}
+.ButtonGroup-module_buttonGroup__s1X98:focus-visible:not(:disabled) {
+  border: var(--buttonGroup-border-width) solid var(--buttonGroup-border-color--focus-visible);
+}
+.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF {
+  flex-direction: row;
+}
+.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k {
+  flex-direction: column;
+}
+.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_type--Outlined__TZHay {
+  --buttonGroup-border-color: var(--border-primary);
+  --buttonGroup-border-color--hover: var(--border-primary);
+  --buttonGroup-border-color--pressed: var(--border-primary);
+  --buttonGroup-border-color--focus-visible: var(--border-primary);
+}
+.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li button {
+  height: 100%;
+  border: none;
+  border-right: var(--button-border-width) solid var(--button-border-color);
+  --button-border-radius: none;
+}
+.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 {
+  border: none;
+  border-right: var(--button-border-width) solid var(--button-border-color);
+  --button-border-radius: none;
+}
+/* Remove the right border if there's only one child */
+.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li:only-child button {
+  border-right: none;
+  --button-border-radius: none;
+}
+.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 {
+  --button-border-radius: none;
+  border-right: none;
+}
+/* Remove the right border of the last item if there are two children */
+.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Horizontal__UuSBF li:last-child:not(:only-child) button {
+  border-right: none;
+  --button-border-radius: none;
+}
+.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 {
+  --button-border-radius: none;
+  border-right: none;
+}
+.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li button {
+  width: 100%;
+  border: none;
+  border-bottom: var(--button-border-width) solid var(--button-border-color);
+  --button-border-radius: none;
+}
+.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 {
+  border: none;
+  border-bottom: var(--button-border-width) solid var(--button-border-color);
+  --button-border-radius: none;
+}
+/* Remove the bottom border if there's only one child */
+.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li:only-child button {
+  border-bottom: none;
+}
+.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 {
+  border-bottom: none;
+}
+/* Remove the bottom border of the last item if there are two children */
+.ButtonGroup-module_buttonGroup__s1X98.ButtonGroup-module_align--Vertical__BBd4k li:last-child:not(:only-child) button {
+  border-bottom: none;
+}
+.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 {
+  border-bottom: none;
+}
 .ContextMenu-module_contextMenuWrapper__Pdkb6 {
   width: -moz-fit-content;
   width: fit-content;
@@ -774,11 +894,12 @@
   height: -moz-fit-content;
   height: fit-content;
 }
-.Popover-module_popover__iRoMJ .Popover-module_content__--lC1 {
+.Popover-module_content__--lC1 {
   width: -moz-fit-content;
   width: fit-content;
   height: -moz-fit-content;
   height: fit-content;
+  z-index: 4;
 }
 .MenuItem-module_menuItem__Qu6-U {
   --menuItem-gap: var(--spacing-extra-small);
@@ -1623,8 +1744,66 @@ span.flatpickr-weekday {
   }
 }
 
-.DatePicker-module_datePicker__YSy2h {
+.FormField-module_formField__vNu-s {
+  --form-field-gap: var(--spacing-extra-small);
+  --form-field-container-gap: var(--spacing-extra-small);
+  --label-container-gap: var(--form-field-gap);
+  --message-container-gap: var(--form-field-gap);
+  --message-container-height: 16px;
+  --message-icon-height: 16px;
+  --message-icon-width: 16px;
+  --label-font-color: var(--text-primary);
+  --message-font-color: var(--text-secondary);
+  --message-icon-color: var(--text-secondary);
+  --error-font-color: var(--text-secondary);
+  --error-icon-color: var(--icon-destructive);
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-field-container-gap);
+}
+.FormField-module_formField__vNu-s .FormField-module_labelContainer__cPOaA {
+  display: flex;
+  flex-direction: column;
+  gap: var(--label-container-gap);
+}
+.FormField-module_formField__vNu-s .FormField-module_label__fzwKv {
+  color: var(--label-font-color);
+}
+.FormField-module_formField__vNu-s .FormField-module_label__fzwKv.FormField-module_required__JvRw2::after {
+  content: " *";
+}
+.FormField-module_formField__vNu-s > * {
+  width: 100%;
+}
+.FormField-module_formField__vNu-s .FormField-module_field__32X79 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-field-gap);
+}
+.FormField-module_formField__vNu-s .FormField-module_messageContainer__KOsuq {
   display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--message-container-gap);
+  min-height: var(--message-container-height);
+}
+.FormField-module_formField__vNu-s .FormField-module_messageIcon__UgBkw {
+  display: block;
+  flex: 0 0 auto;
+  width: var(--message-icon-width);
+  height: var(--message-icon-height);
+}
+.FormField-module_formField__vNu-s .FormField-module_messageIcon__UgBkw * > path {
+  fill: var(--message-icon-color);
+}
+.FormField-module_formField__vNu-s .FormField-module_message__ExDcf {
+  color: var(--message-font-color);
+}
+.FormField-module_formField__vNu-s.FormField-module_error__hc4sY .FormField-module_messageIcon__UgBkw * > path {
+  fill: var(--error-icon-color);
+}
+.FormField-module_formField__vNu-s.FormField-module_error__hc4sY .FormField-module_message__ExDcf {
+  color: var(--error-font-color);
 }
 .flatpickr-calendar {
   --datePicker-background-color: var(--background-2);
@@ -1779,59 +1958,6 @@ span.flatpickr-weekday {
   /* prevent edge case where 2 consecutive dates are selected in range mode */
   box-shadow: -8px 0 0 var(--datePicker-day-inRange-color), 8px 0 0 var(--datePicker-day-inRange-color);
 }
-.FormField-module_formField__vNu-s {
-  --form-field-gap: var(--spacing-extra-small);
-  --label-container-gap: var(--form-field-gap);
-  --message-container-gap: var(--form-field-gap);
-  --message-icon-height: 16px;
-  --message-icon-width: 16px;
-  --label-font-color: var(--text-primary);
-  --message-font-color: var(--text-secondary);
-  --message-icon-color: var(--text-secondary);
-  --error-font-color: var(--text-secondary);
-  --error-icon-color: var(--icon-destructive);
-  display: flex;
-  flex-direction: column;
-  gap: var(--form-field-gap);
-}
-.FormField-module_formField__vNu-s .FormField-module_labelContainer__cPOaA {
-  display: flex;
-  flex-direction: column;
-  gap: var(--label-container-gap);
-}
-.FormField-module_formField__vNu-s .FormField-module_label__fzwKv {
-  color: var(--label-font-color);
-}
-.FormField-module_formField__vNu-s .FormField-module_label__fzwKv.FormField-module_required__JvRw2::after {
-  content: " *";
-}
-.FormField-module_formField__vNu-s > * {
-  width: 100%;
-}
-.FormField-module_formField__vNu-s .FormField-module_messageContainer__KOsuq {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: var(--message-container-gap);
-}
-.FormField-module_formField__vNu-s .FormField-module_messageIcon__UgBkw {
-  display: block;
-  flex: 0 0 auto;
-  width: var(--message-icon-width);
-  height: var(--message-icon-height);
-}
-.FormField-module_formField__vNu-s .FormField-module_messageIcon__UgBkw * > path {
-  fill: var(--message-icon-color);
-}
-.FormField-module_formField__vNu-s .FormField-module_message__ExDcf {
-  color: var(--message-font-color);
-}
-.FormField-module_formField__vNu-s.FormField-module_error__hc4sY .FormField-module_messageIcon__UgBkw * > path {
-  fill: var(--error-icon-color);
-}
-.FormField-module_formField__vNu-s.FormField-module_error__hc4sY .FormField-module_message__ExDcf {
-  color: var(--error-font-color);
-}
 .Modal-module_modal__b2VqT {
   --modal-width: auto;
   --modal-border-width: 1px;
@@ -1978,7 +2104,7 @@ span.flatpickr-weekday {
   --select-trigger-padding-right: var(--spacing-medium);
   --select-trigger-padding-left: var(--spacing-medium);
   --select-trigger-gap: var(--spacing-medium);
-  --select-trigger-border-radius: var(--radius-medium);
+  --select-trigger-border-radius: var(--radius-extra-small);
   --select-trigger-border-width: 1px;
   --select-trigger-border-color: var(--border-grey-2);
   --select-trigger-background-color: var(--background-5);
@@ -2010,6 +2136,10 @@ span.flatpickr-weekday {
   --select-options-background-color: var(--background-5);
   --select-options-border-width: 1px;
   --select-options-border-color: var(--border-grey-2);
+  --options-list-padding-top: var(--spacing-medium);
+  --options-list-padding-right: var(--spacing-medium);
+  --options-list-padding-bottom: var(--spacing-medium);
+  --options-list-padding-left: var(--spacing-medium);
   --option-padding-top: var(--spacing-medium);
   --option-padding-right: var(--spacing-medium);
   --option-padding-bottom: var(--spacing-medium);
@@ -2018,6 +2148,10 @@ span.flatpickr-weekday {
   --option-surface-color: var(--background-5);
   --option-color: var(--text-primary);
   --option-gap: var(--spacing-extra-small);
+  --option-background-color--hover: var(--surface-secondary--hover);
+  --option-background-color--pressed: var(--surface-secondary--pressed);
+  --option-background-color--focus-visible: var(--surface-secondary--focus-visible);
+  --option-outline-color-focus-visible: var(--border-grey-1);
   width: auto;
   height: -moz-fit-content;
   height: fit-content;
@@ -2110,6 +2244,7 @@ span.flatpickr-weekday {
   background-color: var(--select-options-background-color);
   max-height: 160px;
   overflow-y: auto;
+  padding: var(--options-list-padding-top) var(--options-list-padding-right) var(--options-list-padding-bottom) var(--options-list-padding-left);
 }
 .Select-module_select__sbUrw .Select-module_options__UwfeB .Select-module_resetOption__dvBeU {
   display: flex;
@@ -2122,6 +2257,17 @@ span.flatpickr-weekday {
   color: var(--option-color);
   gap: var(--option-gap);
 }
+.Select-module_select__sbUrw .Select-module_options__UwfeB .Select-module_resetOption__dvBeU:hover:not(:disabled) {
+  background-color: var(--option-background-color--hover);
+}
+.Select-module_select__sbUrw .Select-module_options__UwfeB .Select-module_resetOption__dvBeU:active:not(:disabled) {
+  background-color: var(--option-background-color--pressed);
+}
+.Select-module_select__sbUrw .Select-module_options__UwfeB .Select-module_resetOption__dvBeU:focus-visible:not(:disabled) {
+  background-color: var(--option-background-color--focus-visible);
+  outline: 1px solid var(--option-outline-color-focus-visible);
+  outline-offset: -1px;
+}
 .Option-module_option__EOKym {
   --option-icon-size: var(--font-size-4);
   --option-icon-fill: var(--icon-secondary);
@@ -2150,6 +2296,17 @@ span.flatpickr-weekday {
 .Option-module_option__EOKym .Option-module_trailingIcon__phY9o * > path {
   fill: var(--option-icon-fill);
 }
+.Option-module_option__EOKym:hover:not(:disabled) {
+  background-color: var(--option-background-color--hover);
+}
+.Option-module_option__EOKym:active:not(:disabled) {
+  background-color: var(--option-background-color--pressed);
+}
+.Option-module_option__EOKym:focus-visible:not(:disabled) {
+  background-color: var(--option-background-color--focus-visible);
+  outline: 1px solid var(--option-outline-color-focus-visible);
+  outline-offset: -1px;
+}
 .Option-module_option__EOKym.Option-module_disabled__QMo00 {
   cursor: not-allowed;
   background-color: var(--option-background-color--disabled);
@@ -2332,7 +2489,7 @@ span.flatpickr-weekday {
   --font-family-8: inter;
 
   --font-size-1: 10px;
-  --font-size-2: 12px;
+  --font-size-2: 13px;
   --font-size-3: 14px;
   --font-size-4: 16px;
   --font-size-5: 28px;