@delightui/components 0.1.144 → 0.1.145

package/dist/cjs/library.css

@@ -2938,6 +2938,9 @@ span.flatpickr-weekday {
   align-items: center;
   display: flex;
   height: var(--date-picker-months-trigger-height);
+  -moz-column-gap: var(--date-picker-months-trigger-column-gap);
+       column-gap: var(--date-picker-months-trigger-column-gap);
+  row-gap: var(--date-picker-months-trigger-row-gap);
   padding-top: var(--date-picker-months-trigger-padding-top);
   padding-bottom: var(--date-picker-months-trigger-padding-bottom);
   padding-left: var(--date-picker-months-trigger-padding-left);
@@ -2978,6 +2981,22 @@ span.flatpickr-weekday {
   font-weight: var(--date-picker-months-trigger-font-weight);
   line-height: var(--date-picker-months-trigger-line-height);
   color: var(--date-picker-months-trigger-color);
+  text-align: center;
+}
+.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInput.cur-year {
+  border-radius: var(--corner-radius-extra-small);
+  padding-left: var(--spacing-space-5);
+  padding-right: var(--spacing-space-5);
+}
+.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInput.cur-year:hover {
+  cursor: pointer;
+  color: var(--text-primary);
+}
+.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInput.cur-year:focus, .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInput.cur-year:active {
+  cursor: text;
+  outline: 1px solid var(--border-border-grey-4);
+  background-color: var(--surface-background-3);
+  color: var(--text-primary);
 }
 .flatpickr-calendar .flatpickr-months .flatpickr-prev-month.flatpickr-disabled {
   display: block;
@@ -3125,6 +3144,39 @@ span.flatpickr-weekday {
 .time-dropdown .dropdown-option:hover {
   background-color: var(--date-picker-time-color--hover);
 }
+.DateInput-module_dateInput__hYA3X {
+  --input-height: var(--date-input-height);
+  --input-row-gap: var(--date-input-row-gap);
+  --input-column-gap: var(--date-input-column-gap);
+  --input-border-bottom-width: var(--date-input-border-bottom-width);
+  --input-border-left-width: var(--date-input-border-left-width);
+  --input-border-right-width: var(--date-input-border-right-width);
+  --input-border-top-width: var(--date-input-border-top-width);
+  --input-border-style: var(--date-input-border-style);
+  --input-border-color: var(--date-input-border-color);
+  --input-border-top-left-radius: var(--date-input-border-top-left-radius);
+  --input-border-top-right-radius: var(--date-input-border-top-right-radius);
+  --input-border-bottom-right-radius: var(--date-input-border-bottom-right-radius);
+  --input-border-bottom-left-radius: var(--date-input-border-bottom-left-radius);
+  --input-background-color: var(--date-input-background-color);
+  --input-color: var(--date-input-color);
+  --input-padding-top: calc(var(--date-input-padding-top) - var(--date-input-border-top-width));
+  --input-padding-bottom: calc(var(--date-input-padding-bottom) - var(--date-input-border-bottom-width));
+  --input-padding-left: calc(var(--date-input-padding-left) - var(--date-input-border-left-width));
+  --input-padding-right: calc(var(--date-input-padding-right) - var(--date-input-border-right-width));
+  --input-font-family: var(--date-input-font-family);
+  --input-font-weight: var(--date-input-font-weight);
+  --input-font-size: var(--date-input-font-size);
+  --input-letter-spacing: var(--date-input-letter-spacing);
+  --input-line-height: var(--date-input-line-height);
+  --input-color: var(--date-input-color);
+  --input-placeholder-font-family: var(--date-input-placeholder-font-family);
+  --input-placeholder-font-weight: var(--date-input-placeholder-font-weight);
+  --input-placeholder-font-size: var(--date-input-placeholder-font-size);
+  --input-placeholder-letter-spacing: var(--date-input-placeholder-letter-spacing);
+  --input-placeholder-line-height: var(--date-input-placeholder-line-height);
+  --input-placeholder-color: var(--date-input-placeholder-color);
+}
 .FormField-module_formField__vNu-s {
   display: flex;
   flex-direction: column;
@@ -14817,6 +14869,210 @@ span.flatpickr-weekday {
         --select-trigger-paragraph-spacing: 0px;
         --select-trigger-paragraph-indent: 0px
     }
+[data-theme='dark'] [component-variant^="date-input-"], [data-theme='light'] [component-variant^="date-input-"] {
+        --date-input-opacity: 1;
+        --date-input-height: auto;
+        --date-input-min-height: auto;
+        --date-input-max-height: none;
+        --date-input-width: auto;
+        --date-input-min-width: auto;
+        --date-input-max-width: none;
+        --date-input-background-color: transparent;
+        --date-input-fill: currentcolor;
+        --date-input-border-top-left-radius: 0px;
+        --date-input-border-top-right-radius: 0px;
+        --date-input-border-bottom-left-radius: 0px;
+        --date-input-border-bottom-right-radius: 0px;
+        --date-input-border-color: transparent;
+        --date-input-border-style: solid;
+        --date-input-border-gap: normal;
+        --date-input-border-dash: none;
+        --date-input-border-top-width: 0px;
+        --date-input-border-right-width: 0px;
+        --date-input-border-bottom-width: 0px;
+        --date-input-border-left-width: 0px;
+        --date-input-outline-color: auto;
+        --date-input-outline-style: solid;
+        --date-input-outline-width: 0px;
+        --date-input-padding-left: 0px;
+        --date-input-padding-right: 0px;
+        --date-input-padding-top: 0px;
+        --date-input-padding-bottom: 0px;
+        --date-input-row-gap: 0px;
+        --date-input-column-gap: 0px;
+        --date-input-font-family: sans-serif;
+        --date-input-font-size: medium;
+        --date-input-color: currentcolor;
+        --date-input-letter-spacing: normal;
+        --date-input-line-height: normal;
+        --date-input-paragraph-spacing: ;
+        --date-input-paragraph-indent:
+    }
+[data-theme='dark'] [component-variant="date-input-default"], [data-theme='light'] [component-variant="date-input-default"] {
+        --date-input-height: 32px;
+        --date-input-width: 284px;
+        --date-input-background-color: var(--interactive-surface-secondary-default);
+        --date-input-color: var(--text-secondary);
+        --date-input-border-top-left-radius: var(--corner-radius-extra-small);
+        --date-input-border-top-right-radius: var(--corner-radius-extra-small);
+        --date-input-border-bottom-left-radius: var(--corner-radius-extra-small);
+        --date-input-border-bottom-right-radius: var(--corner-radius-extra-small);
+        --date-input-border-color: var(--border-border-grey-3);
+        --date-input-border-top-width: 1px;
+        --date-input-border-right-width: 1px;
+        --date-input-border-bottom-width: 1px;
+        --date-input-border-left-width: 1px;
+        --date-input-padding-left: var(--spacing-space-5);
+        --date-input-padding-right: var(--spacing-space-5);
+        --date-input-padding-top: var(--spacing-space-3);
+        --date-input-padding-bottom: var(--spacing-space-3);
+        --date-input-row-gap: var(--spacing-space-5);
+        --date-input-column-gap: var(--spacing-space-5);
+        --date-input-font-family: var(--font-family-body);
+        --date-input-font-size: var(--font-size-body-small);
+        --date-input-font-weight: var(--font-weight-regular);
+        --date-input-line-height: var(--line-height-body-small);
+        --date-input-paragraph-spacing: 0px;
+        --date-input-paragraph-indent: 0px
+    }
+[data-theme='dark'] [component-variant="date-input-default"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-input-default"]:hover:not(:disabled):not([disabled]) {
+        --date-input-height: 32px;
+        --date-input-width: 284px;
+        --date-input-background-color: var(--interactive-surface-secondary-default);
+        --date-input-color: var(--text-primary);
+        --date-input-border-top-left-radius: var(--corner-radius-extra-small);
+        --date-input-border-top-right-radius: var(--corner-radius-extra-small);
+        --date-input-border-bottom-left-radius: var(--corner-radius-extra-small);
+        --date-input-border-bottom-right-radius: var(--corner-radius-extra-small);
+        --date-input-border-color: var(--border-border-grey-2);
+        --date-input-border-top-width: 1px;
+        --date-input-border-right-width: 1px;
+        --date-input-border-bottom-width: 1px;
+        --date-input-border-left-width: 1px;
+        --date-input-padding-left: var(--spacing-space-5);
+        --date-input-padding-right: var(--spacing-space-5);
+        --date-input-padding-top: var(--spacing-space-3);
+        --date-input-padding-bottom: var(--spacing-space-3);
+        --date-input-row-gap: var(--spacing-space-5);
+        --date-input-column-gap: var(--spacing-space-5);
+        --date-input-font-family: var(--font-family-body);
+        --date-input-font-size: var(--font-size-body-small);
+        --date-input-font-weight: var(--font-weight-regular);
+        --date-input-line-height: var(--line-height-body-small);
+        --date-input-paragraph-spacing: 0px;
+        --date-input-paragraph-indent: 0px
+    }
+[data-theme='dark'] [component-variant="date-input-default"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-input-default"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="date-input-default"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-input-default"]:active:not(:disabled):not([disabled]) {
+        --date-input-height: 32px;
+        --date-input-width: 284px;
+        --date-input-background-color: var(--interactive-surface-secondary-default);
+        --date-input-color: var(--text-primary);
+        --date-input-border-top-left-radius: var(--corner-radius-extra-small);
+        --date-input-border-top-right-radius: var(--corner-radius-extra-small);
+        --date-input-border-bottom-left-radius: var(--corner-radius-extra-small);
+        --date-input-border-bottom-right-radius: var(--corner-radius-extra-small);
+        --date-input-border-color: var(--border-border-grey-2);
+        --date-input-border-top-width: 1px;
+        --date-input-border-right-width: 1px;
+        --date-input-border-bottom-width: 1px;
+        --date-input-border-left-width: 1px;
+        --date-input-padding-left: var(--spacing-space-5);
+        --date-input-padding-right: var(--spacing-space-5);
+        --date-input-padding-top: var(--spacing-space-3);
+        --date-input-padding-bottom: var(--spacing-space-3);
+        --date-input-row-gap: var(--spacing-space-5);
+        --date-input-column-gap: var(--spacing-space-5);
+        --date-input-font-family: var(--font-family-body);
+        --date-input-font-size: var(--font-size-body-small);
+        --date-input-font-weight: var(--font-weight-regular);
+        --date-input-line-height: var(--line-height-body-small);
+        --date-input-paragraph-spacing: 0px;
+        --date-input-paragraph-indent: 0px
+    }
+[data-theme='dark'] [component-variant="date-input-default"]:has(:focus):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-input-default"]:has(:focus):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="date-input-default"]:focus:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-input-default"]:focus:not(:disabled):not([disabled]) {
+        --date-input-height: 32px;
+        --date-input-width: 284px;
+        --date-input-background-color: var(--interactive-surface-secondary-default);
+        --date-input-color: var(--text-primary);
+        --date-input-border-top-left-radius: var(--corner-radius-extra-small);
+        --date-input-border-top-right-radius: var(--corner-radius-extra-small);
+        --date-input-border-bottom-left-radius: var(--corner-radius-extra-small);
+        --date-input-border-bottom-right-radius: var(--corner-radius-extra-small);
+        --date-input-border-color: var(--border-primary);
+        --date-input-border-top-width: 1px;
+        --date-input-border-right-width: 1px;
+        --date-input-border-bottom-width: 1px;
+        --date-input-border-left-width: 1px;
+        --date-input-padding-left: var(--spacing-space-5);
+        --date-input-padding-right: var(--spacing-space-5);
+        --date-input-padding-top: var(--spacing-space-3);
+        --date-input-padding-bottom: var(--spacing-space-3);
+        --date-input-row-gap: var(--spacing-space-5);
+        --date-input-column-gap: var(--spacing-space-5);
+        --date-input-font-family: var(--font-family-body);
+        --date-input-font-size: var(--font-size-body-small);
+        --date-input-font-weight: var(--font-weight-regular);
+        --date-input-line-height: var(--line-height-body-small);
+        --date-input-paragraph-spacing: 0px;
+        --date-input-paragraph-indent: 0px
+    }
+[data-theme='dark'] [component-variant="date-input-default"][invalid]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-input-default"][invalid]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="date-input-default"]:invalid:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-input-default"]:invalid:not(:disabled):not([disabled]) {
+        --date-input-height: 32px;
+        --date-input-width: 284px;
+        --date-input-background-color: var(--interactive-surface-secondary-default);
+        --date-input-color: var(--text-primary);
+        --date-input-border-top-left-radius: var(--corner-radius-extra-small);
+        --date-input-border-top-right-radius: var(--corner-radius-extra-small);
+        --date-input-border-bottom-left-radius: var(--corner-radius-extra-small);
+        --date-input-border-bottom-right-radius: var(--corner-radius-extra-small);
+        --date-input-border-color: var(--border-destructive);
+        --date-input-border-top-width: 1px;
+        --date-input-border-right-width: 1px;
+        --date-input-border-bottom-width: 1px;
+        --date-input-border-left-width: 1px;
+        --date-input-padding-left: var(--spacing-space-5);
+        --date-input-padding-right: var(--spacing-space-5);
+        --date-input-padding-top: var(--spacing-space-3);
+        --date-input-padding-bottom: var(--spacing-space-3);
+        --date-input-row-gap: var(--spacing-space-5);
+        --date-input-column-gap: var(--spacing-space-5);
+        --date-input-font-family: var(--font-family-body);
+        --date-input-font-size: var(--font-size-body-small);
+        --date-input-font-weight: var(--font-weight-regular);
+        --date-input-line-height: var(--line-height-body-small);
+        --date-input-paragraph-spacing: 0px;
+        --date-input-paragraph-indent: 0px
+    }
+[data-theme='dark'] [component-variant="date-input-default"][disabled],
+    [data-theme='light'] [component-variant="date-input-default"][disabled],
+    [data-theme='dark'] [component-variant="date-input-default"]:disabled,
+    [data-theme='light'] [component-variant="date-input-default"]:disabled {
+        --date-input-height: 32px;
+        --date-input-width: 284px;
+        --date-input-background-color: var(--interactive-surface-secondary-disabled);
+        --date-input-color: var(--text-tertiary);
+        --date-input-border-top-left-radius: var(--corner-radius-extra-small);
+        --date-input-border-top-right-radius: var(--corner-radius-extra-small);
+        --date-input-border-bottom-left-radius: var(--corner-radius-extra-small);
+        --date-input-border-bottom-right-radius: var(--corner-radius-extra-small);
+        --date-input-border-color: var(--border-border-grey-2);
+        --date-input-border-top-width: 1px;
+        --date-input-border-right-width: 1px;
+        --date-input-border-bottom-width: 1px;
+        --date-input-border-left-width: 1px;
+        --date-input-padding-left: var(--spacing-space-5);
+        --date-input-padding-right: var(--spacing-space-5);
+        --date-input-padding-top: var(--spacing-space-3);
+        --date-input-padding-bottom: var(--spacing-space-3);
+        --date-input-row-gap: var(--spacing-space-5);
+        --date-input-column-gap: var(--spacing-space-5);
+        --date-input-font-family: var(--font-family-body);
+        --date-input-font-size: var(--font-size-body-small);
+        --date-input-font-weight: var(--font-weight-regular);
+        --date-input-line-height: var(--line-height-body-small);
+        --date-input-paragraph-spacing: 0px;
+        --date-input-paragraph-indent: 0px
+    }
 [data-theme='dark'] [component-variant^="date-picker-day-"], [data-theme='light'] [component-variant^="date-picker-day-"] {
         --date-picker-day-opacity: 1;
         --date-picker-day-height: auto;
@@ -34213,11 +34469,9 @@ span.flatpickr-weekday {
         --date-picker-letter-spacing: normal;
         --date-picker-line-height: normal;
         --date-picker-paragraph-spacing: ;
-        --date-picker-paragraph-indent: 
+        --date-picker-paragraph-indent:
     }
 [data-theme='dark'] [component-variant="date-picker-default"], [data-theme='light'] [component-variant="date-picker-default"] {
-        --date-picker-height: 32px;
-        --date-picker-width: 284px;
         --date-picker-background-color: var(--surface-background-2);
         --date-picker-border-top-left-radius: var(--corner-radius-extra-small);
         --date-picker-border-top-right-radius: var(--corner-radius-extra-small);
@@ -34240,134 +34494,6 @@ span.flatpickr-weekday {
         --date-picker-paragraph-spacing: 0px;
         --date-picker-paragraph-indent: 0px
     }
-[data-theme='dark'] [component-variant="date-picker-default"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-picker-default"]:hover:not(:disabled):not([disabled]) {
-        --date-picker-height: 32px;
-        --date-picker-width: 284px;
-        --date-picker-background-color: var(--interactive-surface-secondary-default);
-        --date-picker-border-top-left-radius: var(--corner-radius-extra-small);
-        --date-picker-border-top-right-radius: var(--corner-radius-extra-small);
-        --date-picker-border-bottom-left-radius: var(--corner-radius-extra-small);
-        --date-picker-border-bottom-right-radius: var(--corner-radius-extra-small);
-        --date-picker-border-color: var(--border-border-grey-2);
-        --date-picker-border-top-width: 1px;
-        --date-picker-border-right-width: 1px;
-        --date-picker-border-bottom-width: 1px;
-        --date-picker-border-left-width: 1px;
-        --date-picker-padding-left: var(--spacing-space-5);
-        --date-picker-padding-right: var(--spacing-space-5);
-        --date-picker-padding-top: var(--spacing-space-3);
-        --date-picker-padding-bottom: var(--spacing-space-3);
-        --date-picker-row-gap: var(--spacing-space-5);
-        --date-picker-column-gap: var(--spacing-space-5);
-        --date-picker-font-family: sans-sarif;
-        --date-picker-font-size: initial;
-        --date-picker-font-weight: regular;
-        --date-picker-paragraph-spacing: 0px;
-        --date-picker-paragraph-indent: 0px
-    }
-[data-theme='dark'] [component-variant="date-picker-default"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-picker-default"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="date-picker-default"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-picker-default"]:active:not(:disabled):not([disabled]) {
-        --date-picker-height: 32px;
-        --date-picker-width: 284px;
-        --date-picker-background-color: var(--interactive-surface-secondary-default);
-        --date-picker-border-top-left-radius: var(--corner-radius-extra-small);
-        --date-picker-border-top-right-radius: var(--corner-radius-extra-small);
-        --date-picker-border-bottom-left-radius: var(--corner-radius-extra-small);
-        --date-picker-border-bottom-right-radius: var(--corner-radius-extra-small);
-        --date-picker-border-color: var(--border-border-grey-2);
-        --date-picker-border-top-width: 1px;
-        --date-picker-border-right-width: 1px;
-        --date-picker-border-bottom-width: 1px;
-        --date-picker-border-left-width: 1px;
-        --date-picker-padding-left: var(--spacing-space-5);
-        --date-picker-padding-right: var(--spacing-space-5);
-        --date-picker-padding-top: var(--spacing-space-3);
-        --date-picker-padding-bottom: var(--spacing-space-3);
-        --date-picker-row-gap: var(--spacing-space-5);
-        --date-picker-column-gap: var(--spacing-space-5);
-        --date-picker-font-family: sans-sarif;
-        --date-picker-font-size: initial;
-        --date-picker-font-weight: regular;
-        --date-picker-paragraph-spacing: 0px;
-        --date-picker-paragraph-indent: 0px
-    }
-[data-theme='dark'] [component-variant="date-picker-default"]:has(:focus):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-picker-default"]:has(:focus):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="date-picker-default"]:focus:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-picker-default"]:focus:not(:disabled):not([disabled]) {
-        --date-picker-height: 32px;
-        --date-picker-width: 284px;
-        --date-picker-background-color: var(--interactive-surface-secondary-default);
-        --date-picker-border-top-left-radius: var(--corner-radius-extra-small);
-        --date-picker-border-top-right-radius: var(--corner-radius-extra-small);
-        --date-picker-border-bottom-left-radius: var(--corner-radius-extra-small);
-        --date-picker-border-bottom-right-radius: var(--corner-radius-extra-small);
-        --date-picker-border-color: var(--border-primary);
-        --date-picker-border-top-width: 1px;
-        --date-picker-border-right-width: 1px;
-        --date-picker-border-bottom-width: 1px;
-        --date-picker-border-left-width: 1px;
-        --date-picker-padding-left: var(--spacing-space-5);
-        --date-picker-padding-right: var(--spacing-space-5);
-        --date-picker-padding-top: var(--spacing-space-3);
-        --date-picker-padding-bottom: var(--spacing-space-3);
-        --date-picker-row-gap: var(--spacing-space-5);
-        --date-picker-column-gap: var(--spacing-space-5);
-        --date-picker-font-family: sans-sarif;
-        --date-picker-font-size: initial;
-        --date-picker-font-weight: regular;
-        --date-picker-paragraph-spacing: 0px;
-        --date-picker-paragraph-indent: 0px
-    }
-[data-theme='dark'] [component-variant="date-picker-default"][invalid]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-picker-default"][invalid]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="date-picker-default"]:invalid:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="date-picker-default"]:invalid:not(:disabled):not([disabled]) {
-        --date-picker-height: 32px;
-        --date-picker-width: 284px;
-        --date-picker-background-color: var(--interactive-surface-secondary-default);
-        --date-picker-border-top-left-radius: var(--corner-radius-extra-small);
-        --date-picker-border-top-right-radius: var(--corner-radius-extra-small);
-        --date-picker-border-bottom-left-radius: var(--corner-radius-extra-small);
-        --date-picker-border-bottom-right-radius: var(--corner-radius-extra-small);
-        --date-picker-border-color: var(--border-destructive);
-        --date-picker-border-top-width: 1px;
-        --date-picker-border-right-width: 1px;
-        --date-picker-border-bottom-width: 1px;
-        --date-picker-border-left-width: 1px;
-        --date-picker-padding-left: var(--spacing-space-5);
-        --date-picker-padding-right: var(--spacing-space-5);
-        --date-picker-padding-top: var(--spacing-space-3);
-        --date-picker-padding-bottom: var(--spacing-space-3);
-        --date-picker-row-gap: var(--spacing-space-5);
-        --date-picker-column-gap: var(--spacing-space-5);
-        --date-picker-font-family: sans-sarif;
-        --date-picker-font-size: initial;
-        --date-picker-font-weight: regular;
-        --date-picker-paragraph-spacing: 0px;
-        --date-picker-paragraph-indent: 0px
-    }
-[data-theme='dark'] [component-variant="date-picker-default"][disabled],
-[data-theme='light'] [component-variant="date-picker-default"][disabled],
-[data-theme='dark'] [component-variant="date-picker-default"]:disabled,
-[data-theme='light'] [component-variant="date-picker-default"]:disabled {
-        --date-picker-height: 32px;
-        --date-picker-width: 284px;
-        --date-picker-background-color: var(--interactive-surface-secondary-disabled);
-        --date-picker-border-top-left-radius: var(--corner-radius-extra-small);
-        --date-picker-border-top-right-radius: var(--corner-radius-extra-small);
-        --date-picker-border-bottom-left-radius: var(--corner-radius-extra-small);
-        --date-picker-border-bottom-right-radius: var(--corner-radius-extra-small);
-        --date-picker-border-color: var(--border-border-grey-2);
-        --date-picker-border-top-width: 1px;
-        --date-picker-border-right-width: 1px;
-        --date-picker-border-bottom-width: 1px;
-        --date-picker-border-left-width: 1px;
-        --date-picker-padding-left: var(--spacing-space-5);
-        --date-picker-padding-right: var(--spacing-space-5);
-        --date-picker-padding-top: var(--spacing-space-3);
-        --date-picker-padding-bottom: var(--spacing-space-3);
-        --date-picker-row-gap: var(--spacing-space-5);
-        --date-picker-column-gap: var(--spacing-space-5);
-        --date-picker-font-family: sans-sarif;
-        --date-picker-font-size: initial;
-        --date-picker-font-weight: regular;
-        --date-picker-paragraph-spacing: 0px;
-        --date-picker-paragraph-indent: 0px
-    }
 [data-theme='dark'] [component-variant="date-picker-default"], [data-theme='light'] [component-variant="date-picker-default"] {
         --date-picker-inner-container-font-family: sans-sarif;
         --date-picker-inner-container-font-size: initial;