@delightui/components 0.1.82 → 0.1.84

package/dist/cjs/components/atoms/Checkbox/Checkbox.presenter.d.ts

@@ -22,7 +22,7 @@ declare const usePresenter: (props: CheckboxProps) => {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
+        id?: string;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
         slot?: string | undefined | undefined;
@@ -295,7 +295,7 @@ declare const usePresenter: (props: CheckboxProps) => {
     };
     labelAlignment: import("./Checkbox.types").CheckboxLabelAlignmentEnum;
     disabled: boolean;
-    isChecked: boolean | undefined;
+    isChecked: boolean;
     required: boolean | undefined;
     name: string | undefined;
     invalid: boolean;

package/dist/cjs/components/atoms/Checkbox/CheckboxLikeFieldsExample.d.ts

@@ -0,0 +1,2 @@
+declare const CheckboxLikeFieldsExample: () => import("react/jsx-runtime").JSX.Element;
+export default CheckboxLikeFieldsExample;

package/dist/cjs/components/atoms/Checkbox/useCheckboxField.d.ts

@@ -0,0 +1,11 @@
+export type CheckboxFieldProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    value?: boolean;
+    onValueChange?: (value: boolean) => void;
+};
+declare const useCheckboxField: ({ checked, defaultChecked, value, onValueChange }: CheckboxFieldProps) => {
+    isChecked: boolean;
+    onCheckboxChanged: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export default useCheckboxField;

package/dist/cjs/components/atoms/CheckboxItem/CheckboxItem.presenter.d.ts

@@ -30,7 +30,7 @@ declare const usePresenter: (props: CheckboxItemProps) => {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
+        id?: string;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
         slot?: string | undefined | undefined;

package/dist/cjs/components/atoms/CustomToggle/CustomToggle.presenter.d.ts

@@ -3,12 +3,13 @@ declare const usePresenter: (props: CustomToggleProps) => {
     variantProps: {
         'component-variant': string;
     };
-    isChecked: boolean | undefined;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    isChecked: boolean;
+    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     disabled: boolean;
     invalid: boolean;
     otherInputProps: {
         initialValue?: boolean | undefined;
+        id?: string;
     };
     required: boolean;
     content: import("react").ReactNode;

package/dist/cjs/components/atoms/Input/Input.presenter.d.ts

@@ -28,7 +28,7 @@ declare const usePresenter: (props: InputProps) => {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
+        id?: string;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
         slot?: string | undefined | undefined;

package/dist/cjs/components/atoms/Input/InputExample.d.ts

@@ -0,0 +1,2 @@
+declare const InputExample: () => import("react/jsx-runtime").JSX.Element;
+export default InputExample;

package/dist/cjs/components/atoms/RadioButtonItem/RadioButtonItem.presenter.d.ts

@@ -37,7 +37,7 @@ declare const usePresenter: (props: RadioButtonItemProps) => {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
+        id?: string;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
         slot?: string | undefined | undefined;

package/dist/cjs/components/atoms/TextArea/TextArea.presenter.d.ts

@@ -24,7 +24,7 @@ declare const usePresenter: (props: TextAreaProps) => {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
+        id?: string;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
         slot?: string | undefined | undefined;

package/dist/cjs/components/atoms/Toggle/Toggle.presenter.d.ts

@@ -3,7 +3,7 @@ declare const usePresenter: (props: ToggleProps) => {
     variantProps: {
         'component-variant': string;
     };
-    isChecked: boolean | undefined;
+    isChecked: boolean;
     onToggleChanged: (event: React.ChangeEvent<HTMLInputElement>) => void;
     otherInputProps: {
         className?: string | undefined | undefined;
@@ -28,7 +28,7 @@ declare const usePresenter: (props: ToggleProps) => {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
+        id?: string;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
         slot?: string | undefined | undefined;

package/dist/cjs/components/atoms/ToggleButton/ToggleButton.presenter.d.ts

@@ -17,7 +17,6 @@ declare const usePresenter: (props: ToggleButtonProps) => {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
         slot?: string | undefined | undefined;
@@ -268,8 +267,8 @@ declare const usePresenter: (props: ToggleButtonProps) => {
         trailingIcon?: import("react").ReactNode;
         initialValue?: boolean | undefined;
     };
-    isChecked: boolean | undefined;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    isChecked: boolean;
+    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     disabled: boolean;
     required: boolean;
     invalid: boolean;
@@ -277,5 +276,6 @@ declare const usePresenter: (props: ToggleButtonProps) => {
     appearance: import("../Button/Button.types").ButtonAppearanceEnum;
     style: import("../Button/Button.types").ButtonStyleEnum;
     size: import("../Button/Button.types").ButtonSizeEnum;
+    id: string | undefined;
 };
 export default usePresenter;

package/dist/cjs/components/molecules/ChipInput/ChipInput.presenter.d.ts

@@ -10,6 +10,7 @@ declare const usePresenter: (props: ChipInputProps) => {
             placeholder: string;
             className: string;
             disabled: boolean;
+            id: string | undefined;
         };
         inputRef: import("react").RefObject<HTMLInputElement>;
     })[];
@@ -25,9 +26,6 @@ declare const usePresenter: (props: ChipInputProps) => {
     variantProps: {
         'component-variant': string;
     };
-    stateProps: {
-        invalid: boolean;
-        disabled: boolean;
-    };
+    disabled: boolean;
 };
 export default usePresenter;

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

@@ -14,6 +14,7 @@ declare const usePresenter: (props: DatePickerProps) => {
     otherProps: {
         initialValue?: string | Date | (string | Date)[] | undefined;
         checked?: boolean;
+        id?: string;
         minDate?: string | Date;
         maxDate?: string | Date;
         defaultDate?: string | Date;

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

@@ -85,4 +85,8 @@ export type ControlledFormComponentProps<T extends FieldValue> = {
      * @default false
      */
     invalid?: boolean;
+    /**
+     * Id for the form field
+     */
+    id?: string;
 };

package/dist/cjs/components/molecules/Select/Select.presenter.d.ts

@@ -16,11 +16,12 @@ declare const usePresenter: (props: SelectProps) => {
     selectedValue: import("../..").FieldValue;
     resetSelectedValue: () => void;
     triggerProps: {
-        invalid: boolean;
+        id?: string;
         disabled?: boolean | undefined;
         required?: boolean | undefined;
         checked?: boolean | undefined;
         value?: import("../..").FieldValue | undefined;
+        invalid?: boolean | undefined;
         onValueChange?: ((value: import("../..").FieldValue) => void) | undefined;
         initialValue?: import("../..").FieldValue | undefined;
         role?: import("react").AriaRole | undefined;
@@ -39,7 +40,6 @@ declare const usePresenter: (props: SelectProps) => {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
         slot?: string | undefined | undefined;

package/dist/cjs/components/organisms/Dropzone/Dropzone.presenter.d.ts

@@ -15,5 +15,6 @@ declare const usePresenter: (props: DropzoneProps) => {
         [key: string]: readonly string[];
     } | undefined;
     resetFiles: () => void;
+    id: string | undefined;
 };
 export default usePresenter;

package/dist/cjs/library.css

@@ -558,6 +558,7 @@
   align-items: center;
   gap: var(--toggle-row-gap) var(--toggle-column-gap);
   color: var(--toggle-color);
+  cursor: pointer;
   height: var(--toggle-height);
   min-height: var(--toggle-min-height);
   max-height: var(--toggle-max-height);
@@ -3710,18 +3711,18 @@ span.flatpickr-weekday {
   color: var(--chip-input-color);
 }
 
-.ChipInput-module_chipInput__tCCgW .ChipInput-module_chipList__l2ctU {
+.ChipInput-module_chipInput__tCCgW .ChipInput-module_trigger__KLvR4 .ChipInput-module_chipList__l2ctU {
   --list-row-gap: var(--chip-input-chip-list-row-gap);
   --list-column-gap: var(--chip-input-chip-list-column-gap, var(--chip-input-chip-list-row-gap));
 }
 
-.ChipInput-module_chipInput__tCCgW .ChipInput-module_chipList__l2ctU > * {
+.ChipInput-module_chipInput__tCCgW .ChipInput-module_trigger__KLvR4 .ChipInput-module_chipList__l2ctU > * {
   display: flex;
   justify-content: flex-start;
   align-items: center;
 }
 
-.ChipInput-module_chipInput__tCCgW .ChipInput-module_chipList__l2ctU .ChipInput-module_chip__-6re8 {
+.ChipInput-module_chipInput__tCCgW .ChipInput-module_trigger__KLvR4 .ChipInput-module_chipList__l2ctU .ChipInput-module_chip__-6re8 {
   --chip-border-top-left-radius: var(--chip-input-chip-item-border-top-left-radius);
   --chip-border-top-right-radius: var(--chip-input-chip-item-border-top-right-radius);
   --chip-border-bottom-left-radius: var(--chip-input-chip-item-border-bottom-left-radius);
@@ -3735,21 +3736,21 @@ span.flatpickr-weekday {
   --chip-column-gap: var(--chip-input-chip-item-column-gap);
 }
 
-.ChipInput-module_chipInput__tCCgW .ChipInput-module_input__J979Z {
+.ChipInput-module_chipInput__tCCgW .ChipInput-module_trigger__KLvR4 .ChipInput-module_chipList__l2ctU .ChipInput-module_input__J979Z {
   --input-border-top-width: 0px;
   --input-border-right-width: 0px;
   --input-border-bottom-width: 0px;
   --input-border-left-width: 0px;
 }
 
-.ChipInput-module_chipInput__tCCgW .ChipInput-module_input__J979Z.ChipInput-module_disabledInput__ciuDU {
+.ChipInput-module_chipInput__tCCgW .ChipInput-module_trigger__KLvR4 .ChipInput-module_chipList__l2ctU .ChipInput-module_input__J979Z.ChipInput-module_disabledInput__ciuDU {
   --input-border-top-width: 0px;
   --input-border-right-width: 0px;
   --input-border-bottom-width: 0px;
   --input-border-left-width: 0px;
 }
 
-.ChipInput-module_chipInput__tCCgW .ChipInput-module_input__J979Z:hover:not(:disabled), .ChipInput-module_chipInput__tCCgW .ChipInput-module_input__J979Z:active:not(:disabled), .ChipInput-module_chipInput__tCCgW .ChipInput-module_input__J979Z:has(:focus-visible):not(:disabled) {
+.ChipInput-module_chipInput__tCCgW .ChipInput-module_trigger__KLvR4 .ChipInput-module_chipList__l2ctU .ChipInput-module_input__J979Z:hover:not(:disabled), .ChipInput-module_chipInput__tCCgW .ChipInput-module_trigger__KLvR4 .ChipInput-module_chipList__l2ctU .ChipInput-module_input__J979Z:active:not(:disabled), .ChipInput-module_chipInput__tCCgW .ChipInput-module_trigger__KLvR4 .ChipInput-module_chipList__l2ctU .ChipInput-module_input__J979Z:has(:focus-visible):not(:disabled) {
   --input-border-top-width: 0px;
   --input-border-right-width: 0px;
   --input-border-bottom-width: 0px;
@@ -14790,6 +14791,16 @@ span.flatpickr-weekday {
         --select-paragraph-spacing: 0px;
         --select-paragraph-indent: 0px
     }
+[data-theme='dark'] [component-variant="select-single-select"][invalid]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="select-single-select"][invalid]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="select-single-select"]:invalid:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="select-single-select"]:invalid:not(:disabled):not([disabled]) {
+        --select-width: 100%;
+        --select-row-gap: var(--spacing-space-2);
+        --select-column-gap: var(--spacing-space-2);
+        --select-font-family: sans-sarif;
+        --select-font-size: initial;
+        --select-font-weight: regular;
+        --select-paragraph-spacing: 0px;
+        --select-paragraph-indent: 0px
+    }
 [data-theme='dark'] [component-variant="select-single-select"][disabled],
 [data-theme='light'] [component-variant="select-single-select"][disabled],
 [data-theme='dark'] [component-variant="select-single-select"]:disabled,
@@ -14853,6 +14864,16 @@ span.flatpickr-weekday {
         --select-paragraph-spacing: 0px;
         --select-paragraph-indent: 0px
     }
+[data-theme='dark'] [component-variant="select-multi-select"][invalid]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="select-multi-select"][invalid]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="select-multi-select"]:invalid:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="select-multi-select"]:invalid:not(:disabled):not([disabled]) {
+        --select-width: 100%;
+        --select-row-gap: var(--spacing-space-2);
+        --select-column-gap: var(--spacing-space-2);
+        --select-font-family: sans-sarif;
+        --select-font-size: initial;
+        --select-font-weight: regular;
+        --select-paragraph-spacing: 0px;
+        --select-paragraph-indent: 0px
+    }
 [data-theme='dark'] [component-variant="select-multi-select"][disabled],
 [data-theme='light'] [component-variant="select-multi-select"][disabled],
 [data-theme='dark'] [component-variant="select-multi-select"]:disabled,
@@ -15001,6 +15022,33 @@ span.flatpickr-weekday {
         --select-trigger-paragraph-spacing: 0px;
         --select-trigger-paragraph-indent: 0px
     }
+[data-theme='dark'] [component-variant="select-single-select"][invalid]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="select-single-select"][invalid]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="select-single-select"]:invalid:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="select-single-select"]:invalid:not(:disabled):not([disabled]) {
+        --select-trigger-height: 32px;
+        --select-trigger-width: 100%;
+        --select-trigger-background-color: var(--interactive-surface-secondary-default);
+        --select-trigger-color: var(--text-primary);
+        --select-trigger-border-top-left-radius: var(--corner-radius-extra-small);
+        --select-trigger-border-top-right-radius: var(--corner-radius-extra-small);
+        --select-trigger-border-bottom-left-radius: var(--corner-radius-extra-small);
+        --select-trigger-border-bottom-right-radius: var(--corner-radius-extra-small);
+        --select-trigger-border-color: var(--border-destructive);
+        --select-trigger-border-top-width: 1px;
+        --select-trigger-border-right-width: 1px;
+        --select-trigger-border-bottom-width: 1px;
+        --select-trigger-border-left-width: 1px;
+        --select-trigger-padding-left: var(--spacing-space-5);
+        --select-trigger-padding-right: var(--spacing-space-5);
+        --select-trigger-padding-top: var(--spacing-space-5);
+        --select-trigger-padding-bottom: var(--spacing-space-5);
+        --select-trigger-row-gap: var(--spacing-space-5);
+        --select-trigger-column-gap: var(--spacing-space-5);
+        --select-trigger-font-family: var(--font-family-body);
+        --select-trigger-font-size: var(--font-size-body-small);
+        --select-trigger-font-weight: var(--font-weight-regular);
+        --select-trigger-line-height: var(--line-height-body-small);
+        --select-trigger-paragraph-spacing: 0px;
+        --select-trigger-paragraph-indent: 0px
+    }
 [data-theme='dark'] [component-variant="select-single-select"][disabled],
 [data-theme='light'] [component-variant="select-single-select"][disabled],
 [data-theme='dark'] [component-variant="select-single-select"]:disabled,
@@ -15166,6 +15214,33 @@ span.flatpickr-weekday {
         --select-trigger-paragraph-spacing: 0px;
         --select-trigger-paragraph-indent: 0px
     }
+[data-theme='dark'] [component-variant="select-multi-select"][invalid]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="select-multi-select"][invalid]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="select-multi-select"]:invalid:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="select-multi-select"]:invalid:not(:disabled):not([disabled]) {
+        --select-trigger-height: 32px;
+        --select-trigger-width: 100%;
+        --select-trigger-background-color: var(--interactive-surface-secondary-default);
+        --select-trigger-color: var(--text-primary);
+        --select-trigger-border-top-left-radius: var(--corner-radius-extra-small);
+        --select-trigger-border-top-right-radius: var(--corner-radius-extra-small);
+        --select-trigger-border-bottom-left-radius: var(--corner-radius-extra-small);
+        --select-trigger-border-bottom-right-radius: var(--corner-radius-extra-small);
+        --select-trigger-border-color: var(--border-destructive);
+        --select-trigger-border-top-width: 1px;
+        --select-trigger-border-right-width: 1px;
+        --select-trigger-border-bottom-width: 1px;
+        --select-trigger-border-left-width: 1px;
+        --select-trigger-padding-left: var(--spacing-space-5);
+        --select-trigger-padding-right: var(--spacing-space-5);
+        --select-trigger-padding-top: var(--spacing-space-5);
+        --select-trigger-padding-bottom: var(--spacing-space-5);
+        --select-trigger-row-gap: var(--spacing-space-5);
+        --select-trigger-column-gap: var(--spacing-space-5);
+        --select-trigger-font-family: var(--font-family-body);
+        --select-trigger-font-size: var(--font-size-body-small);
+        --select-trigger-font-weight: var(--font-weight-regular);
+        --select-trigger-line-height: var(--line-height-body-small);
+        --select-trigger-paragraph-spacing: 0px;
+        --select-trigger-paragraph-indent: 0px
+    }
 [data-theme='dark'] [component-variant="select-multi-select"][disabled],
 [data-theme='light'] [component-variant="select-multi-select"][disabled],
 [data-theme='dark'] [component-variant="select-multi-select"]:disabled,
@@ -15316,6 +15391,30 @@ span.flatpickr-weekday {
         --select-options-paragraph-spacing: 0px;
         --select-options-paragraph-indent: 0px
     }
+[data-theme='dark'] [component-variant="select-single-select"][invalid]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="select-single-select"][invalid]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="select-single-select"]:invalid:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="select-single-select"]:invalid:not(:disabled):not([disabled]) {
+        --select-options-width: 100%;
+        --select-options-background-color: var(--surface-background-4);
+        --select-options-border-top-left-radius: var(--corner-radius-extra-small);
+        --select-options-border-top-right-radius: var(--corner-radius-extra-small);
+        --select-options-border-bottom-left-radius: var(--corner-radius-extra-small);
+        --select-options-border-bottom-right-radius: var(--corner-radius-extra-small);
+        --select-options-border-color: var(--border-border-grey-3);
+        --select-options-border-top-width: 1px;
+        --select-options-border-right-width: 1px;
+        --select-options-border-bottom-width: 1px;
+        --select-options-border-left-width: 1px;
+        --select-options-padding-left: var(--spacing-space-5);
+        --select-options-padding-right: var(--spacing-space-5);
+        --select-options-padding-top: var(--spacing-space-5);
+        --select-options-padding-bottom: var(--spacing-space-5);
+        --select-options-row-gap: var(--spacing-space-3);
+        --select-options-column-gap: var(--spacing-space-3);
+        --select-options-font-family: sans-sarif;
+        --select-options-font-size: initial;
+        --select-options-font-weight: regular;
+        --select-options-paragraph-spacing: 0px;
+        --select-options-paragraph-indent: 0px
+    }
 [data-theme='dark'] [component-variant="select-multi-select"], [data-theme='light'] [component-variant="select-multi-select"] {
         --select-options-width: 100%;
         --select-options-background-color: var(--surface-background-4);
@@ -15436,6 +15535,30 @@ span.flatpickr-weekday {
         --select-options-paragraph-spacing: 0px;
         --select-options-paragraph-indent: 0px
     }
+[data-theme='dark'] [component-variant="select-multi-select"][invalid]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="select-multi-select"][invalid]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="select-multi-select"]:invalid:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="select-multi-select"]:invalid:not(:disabled):not([disabled]) {
+        --select-options-width: 100%;
+        --select-options-background-color: var(--surface-background-4);
+        --select-options-border-top-left-radius: var(--corner-radius-extra-small);
+        --select-options-border-top-right-radius: var(--corner-radius-extra-small);
+        --select-options-border-bottom-left-radius: var(--corner-radius-extra-small);
+        --select-options-border-bottom-right-radius: var(--corner-radius-extra-small);
+        --select-options-border-color: var(--border-border-grey-3);
+        --select-options-border-top-width: 1px;
+        --select-options-border-right-width: 1px;
+        --select-options-border-bottom-width: 1px;
+        --select-options-border-left-width: 1px;
+        --select-options-padding-left: var(--spacing-space-5);
+        --select-options-padding-right: var(--spacing-space-5);
+        --select-options-padding-top: var(--spacing-space-5);
+        --select-options-padding-bottom: var(--spacing-space-5);
+        --select-options-row-gap: var(--spacing-space-3);
+        --select-options-column-gap: var(--spacing-space-3);
+        --select-options-font-family: sans-sarif;
+        --select-options-font-size: initial;
+        --select-options-font-weight: regular;
+        --select-options-paragraph-spacing: 0px;
+        --select-options-paragraph-indent: 0px
+    }
 [data-theme='dark'] [component-variant^="select-list-item-"], [data-theme='light'] [component-variant^="select-list-item-"] {
         --select-list-item-opacity: 1;
         --select-list-item-height: auto;