@itcase/ui 1.8.177 → 1.8.178

package/dist/css/components/DatePeriod/DatePeriod.css

@@ -1,10 +1,17 @@
 .date-period {
   display: flex;
-  &__choice {
-    align-items: center !important;
+  gap: 16px;
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    ^&__choice {
+    }
+    ^&__datepicker {
+      min-width: 220px;
+    }
   }
-  &__datepicker {
-    min-width: 220px;
+  &__select {
+    min-width: 140px;
   }
 }
 .date-period {
@@ -32,108 +39,63 @@
 }
 .date-period {
   &_size {
-      &_xxs {
-        min-width: var(--date-period-xxs-min-width);
-        min-height: var(--date-period-xxs-min-height);
-        padding: var(--date-period-xxs-padding);
-      }
-      &_xs {
-        min-width: var(--date-period-xs-min-width);
-        min-height: var(--date-period-xs-min-height);
-        padding: var(--date-period-xs-padding);
-      }
       &_s {
-        min-width: var(--date-period-s-min-width);
-        min-height: var(--date-period-s-min-height);
-        padding: var(--date-period-s-padding);
+        & .date-period__wrapper {
+          min-width: var(--date-period-s-min-width);
+          min-height: var(--date-period-s-min-height);
+          padding: var(--date-period-s-padding);
+        }
+        & .input.date-period__datepicker-input {
+          &_size_s {
+            padding: var(--date-period-datepicker-input-s-padding);
+            min-height: auto;
+          }
+        }
       }
       &_m {
-        min-width: var(--date-period-m-min-width);
-        min-height: var(--date-period-m-min-height);
-        padding: var(--date-period-m-padding);
+        & .date-period__wrapper {
+          min-width: var(--date-period-m-min-width);
+          min-height: var(--date-period-m-min-height);
+          padding: var(--date-period-m-padding);
+        }
+        & .input.date-period__datepicker-input {
+          &_size_m {
+            padding: var(--date-period-datepicker-input-m-padding);
+            min-height: auto;
+          }
+        }
       }
       &_l {
-        min-width: var(--date-period-l-min-width);
-        min-height: var(--date-period-l-min-height);
-        padding: var(--date-period-l-padding);
-      }
-      &_xl {
-        min-width: var(--date-period-xl-min-width);
-        min-height: var(--date-period-xl-min-height);
-        padding: var(--date-period-xl-padding);
-      }
-      &_xxl {
-        min-width: var(--date-period-xxl-min-width);
-        min-height: var(--date-period-xxl-min-height);
-        padding: var(--date-period-xxl-padding);
-      }
-  }
-  &__datepicker-input_size {
-      input&_xxs {
-        padding: var(--date-period-datepicker-input-xxs-padding);
-        min-height: var(--date-period-datepicker-input-xxs-min-height);
-      }
-      input&_xs {
-        padding: var(--date-period-datepicker-input-xs-padding);
-        min-height: var(--date-period-datepicker-input-xs-min-height);
-      }
-      input&_s {
-        padding: var(--date-period-datepicker-input-s-padding);
-        min-height: var(--date-period-datepicker-input-s-min-height);
-      }
-      input&_m {
-        padding: var(--date-period-datepicker-input-m-padding);
-        min-height: var(--date-period-datepicker-input-m-min-height);
-      }
-      input&_l {
-        padding: var(--date-period-datepicker-input-l-padding);
-        min-height: var(--date-period-datepicker-input-l-min-height);
-      }
-      input&_xl {
-        padding: var(--date-period-datepicker-input-xl-padding);
-        min-height: var(--date-period-datepicker-input-xl-min-height);
-      }
-      input&_xxl {
-        padding: var(--date-period-datepicker-input-xxl-padding);
-        min-height: var(--date-period-datepicker-input-xxl-min-height);
+        & .date-period__wrapper {
+          min-width: var(--date-period-l-min-width);
+          min-height: var(--date-period-l-min-height);
+          padding: var(--date-period-l-padding);
+        }
+        & .input.date-period__datepicker-input {
+          &_size_l {
+            padding: var(--date-period-datepicker-input-l-padding);
+            min-height: auto;
+          }
+        }
       }
   }
 }
 :root {
-  /* Size XXL */
-  --date-period-xxl-padding: 2m 2m;
-  --date-period-xxl-min-width: 48px;
-  --date-period-xxl-min-height: 48px;
-
-  /* Size XL */
-  --date-period-xl-padding: 1m 1m;
-  --date-period-xl-min-width: 40px;
-  --date-period-xl-min-height: 40px;
-
   /* Size L */
-  --date-period-l-padding: 0.25m 0.25m;
+  --date-period-l-padding: 0 0.25m;
   --date-period-l-min-width: 32px;
   --date-period-l-min-height: 48px;
-  --date-period-datepicker-input-l-padding: 0.5m 12px;
-  --date-period-datepicker-input-l-min-height: 32px;
+  --date-period-datepicker-input-l-padding: 11px 12px;
 
   /* Size M */
-  --date-period-m-padding: 2px;
-  --date-period-m-min-width: 36px;
-  --date-period-m-min-height: 36px;
+  --date-period-m-padding: 0 0.25m;
+  --date-period-m-min-width: 40px;
+  --date-period-m-min-height: 40px;
+  --date-period-datepicker-input-m-padding: 7px 12px;
 
   /* Size S */
-  --date-period-s-padding: 0.25m 0.5m;
-  --date-period-s-min-width: 24px;
-  --date-period-s-min-height: 24px;
-
-  /* Size XS */
-  --date-period-xs-padding: 0.5m 0.5m;
-  --date-period-xs-min-width: 20px;
-  --date-period-xs-min-height: 20px;
-
-  /* Size XXS */
-  --date-period-xxs-padding: 0.25m 0.25m;
-  --date-period-xxs-min-width: 16px;
-  --date-period-xxs-min-height: 16px;
+  --date-period-s-padding: 0 0.25m;
+  --date-period-s-min-width: 28px;
+  --date-period-s-min-height: 28px;
+  --date-period-datepicker-input-s-padding: 4px 12px;
 }

package/dist/css/styles/bundles.css

@@ -59882,11 +59882,18 @@ div.avatar-stack {
 }
 .date-period {
   display: flex;
-  &__choice {
-    align-items: center !important;
+  gap: 16px;
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    ^&__choice {
+    }
+    ^&__datepicker {
+      min-width: 220px;
+    }
   }
-  &__datepicker {
-    min-width: 220px;
+  &__select {
+    min-width: 140px;
   }
 }
 .date-period {
@@ -59914,110 +59921,65 @@ div.avatar-stack {
 }
 .date-period {
   &_size {
-      &_xxs {
-        min-width: var(--date-period-xxs-min-width);
-        min-height: var(--date-period-xxs-min-height);
-        padding: var(--date-period-xxs-padding);
-      }
-      &_xs {
-        min-width: var(--date-period-xs-min-width);
-        min-height: var(--date-period-xs-min-height);
-        padding: var(--date-period-xs-padding);
-      }
       &_s {
-        min-width: var(--date-period-s-min-width);
-        min-height: var(--date-period-s-min-height);
-        padding: var(--date-period-s-padding);
+        & .date-period__wrapper {
+          min-width: var(--date-period-s-min-width);
+          min-height: var(--date-period-s-min-height);
+          padding: var(--date-period-s-padding);
+        }
+        & .input.date-period__datepicker-input {
+          &_size_s {
+            padding: var(--date-period-datepicker-input-s-padding);
+            min-height: auto;
+          }
+        }
       }
       &_m {
-        min-width: var(--date-period-m-min-width);
-        min-height: var(--date-period-m-min-height);
-        padding: var(--date-period-m-padding);
+        & .date-period__wrapper {
+          min-width: var(--date-period-m-min-width);
+          min-height: var(--date-period-m-min-height);
+          padding: var(--date-period-m-padding);
+        }
+        & .input.date-period__datepicker-input {
+          &_size_m {
+            padding: var(--date-period-datepicker-input-m-padding);
+            min-height: auto;
+          }
+        }
       }
       &_l {
-        min-width: var(--date-period-l-min-width);
-        min-height: var(--date-period-l-min-height);
-        padding: var(--date-period-l-padding);
-      }
-      &_xl {
-        min-width: var(--date-period-xl-min-width);
-        min-height: var(--date-period-xl-min-height);
-        padding: var(--date-period-xl-padding);
-      }
-      &_xxl {
-        min-width: var(--date-period-xxl-min-width);
-        min-height: var(--date-period-xxl-min-height);
-        padding: var(--date-period-xxl-padding);
-      }
-  }
-  &__datepicker-input_size {
-      input&_xxs {
-        padding: var(--date-period-datepicker-input-xxs-padding);
-        min-height: var(--date-period-datepicker-input-xxs-min-height);
-      }
-      input&_xs {
-        padding: var(--date-period-datepicker-input-xs-padding);
-        min-height: var(--date-period-datepicker-input-xs-min-height);
-      }
-      input&_s {
-        padding: var(--date-period-datepicker-input-s-padding);
-        min-height: var(--date-period-datepicker-input-s-min-height);
-      }
-      input&_m {
-        padding: var(--date-period-datepicker-input-m-padding);
-        min-height: var(--date-period-datepicker-input-m-min-height);
-      }
-      input&_l {
-        padding: var(--date-period-datepicker-input-l-padding);
-        min-height: var(--date-period-datepicker-input-l-min-height);
-      }
-      input&_xl {
-        padding: var(--date-period-datepicker-input-xl-padding);
-        min-height: var(--date-period-datepicker-input-xl-min-height);
-      }
-      input&_xxl {
-        padding: var(--date-period-datepicker-input-xxl-padding);
-        min-height: var(--date-period-datepicker-input-xxl-min-height);
+        & .date-period__wrapper {
+          min-width: var(--date-period-l-min-width);
+          min-height: var(--date-period-l-min-height);
+          padding: var(--date-period-l-padding);
+        }
+        & .input.date-period__datepicker-input {
+          &_size_l {
+            padding: var(--date-period-datepicker-input-l-padding);
+            min-height: auto;
+          }
+        }
       }
   }
 }
 :root {
-  /* Size XXL */
-  --date-period-xxl-padding: 2m 2m;
-  --date-period-xxl-min-width: 48px;
-  --date-period-xxl-min-height: 48px;
-
-  /* Size XL */
-  --date-period-xl-padding: 1m 1m;
-  --date-period-xl-min-width: 40px;
-  --date-period-xl-min-height: 40px;
-
   /* Size L */
-  --date-period-l-padding: 0.25m 0.25m;
+  --date-period-l-padding: 0 0.25m;
   --date-period-l-min-width: 32px;
   --date-period-l-min-height: 48px;
-  --date-period-datepicker-input-l-padding: 0.5m 12px;
-  --date-period-datepicker-input-l-min-height: 32px;
+  --date-period-datepicker-input-l-padding: 11px 12px;
 
   /* Size M */
-  --date-period-m-padding: 2px;
-  --date-period-m-min-width: 36px;
-  --date-period-m-min-height: 36px;
+  --date-period-m-padding: 0 0.25m;
+  --date-period-m-min-width: 40px;
+  --date-period-m-min-height: 40px;
+  --date-period-datepicker-input-m-padding: 7px 12px;
 
   /* Size S */
-  --date-period-s-padding: 0.25m 0.5m;
-  --date-period-s-min-width: 24px;
-  --date-period-s-min-height: 24px;
-
-  /* Size XS */
-  --date-period-xs-padding: 0.5m 0.5m;
-  --date-period-xs-min-width: 20px;
-  --date-period-xs-min-height: 20px;
-
-  /* Size XXS */
-  --date-period-xxs-padding: 0.25m 0.25m;
-  --date-period-xxs-min-width: 16px;
-  --date-period-xxs-min-height: 16px;
+  --date-period-s-padding: 0 0.25m;
+  --date-period-s-min-width: 28px;
+  --date-period-s-min-height: 28px;
+  --date-period-datepicker-input-s-padding: 4px 12px;
 }
 .react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view--down-arrow,

package/dist/types/components/DatePeriod/DatePeriod.appearance.d.ts

@@ -4,49 +4,66 @@ export declare const datePeriodAppearance: {
     };
     rounded: {
         shape: string;
+        chipsShape: string;
+        selectShape: string;
     };
     roundedXL: {
         shape: string;
         shapeStrength: string;
+        chipsShape: string;
+        selectShape: string;
     };
     roundedL: {
         shape: string;
         shapeStrength: string;
+        chipsShape: string;
+        selectShape: string;
     };
     roundedM: {
         shape: string;
         shapeStrength: string;
+        chipsShape: string;
+        selectShape: string;
     };
     roundedS: {
         shape: string;
         shapeStrength: string;
+        chipsShape: string;
+        selectShape: string;
     };
     sizeL: {
         size: string;
         chipsAppearanceSize: string;
         datePickerAppearanceSize: string;
         datePickerInputAppearanceSize: string;
+        selectAppearanceSize: string;
     };
     sizeM: {
         size: string;
         chipsAppearanceSize: string;
         datePickerAppearanceSize: string;
         datePickerInputAppearanceSize: string;
+        selectAppearanceSize: string;
+    };
+    sizeS: {
+        size: string;
+        chipsAppearanceSize: string;
+        datePickerAppearanceSize: string;
+        datePickerInputAppearanceSize: string;
+        selectAppearanceSize: string;
     };
     surfacePrimary: {
         fill: string;
         chipsAppearance: string;
-        chipsShape: string;
         datePickerAppearance: string;
         datePickerInputAppearance: string;
-        shape: string;
+        selectAppearance: string;
     };
     surfaceSecondary: {
         fill: string;
         chipsAppearance: string;
-        chipsShape: string;
         datePickerAppearance: string;
         datePickerInputAppearance: string;
-        shape: string;
+        selectAppearance: string;
     };
 };

package/dist/types/components/DatePeriod/DatePeriod.interface.d.ts

@@ -1,5 +1,5 @@
 import type { DatePeriodItem } from '@itcase/common/types';
-import type { AppearanceKeysDefault, CompositeAppearanceKey, DateIso, FillHoverProps, FillProps, ShapeProps, SizeOptionProps, SizePXProps, TextSizeProps } from '@itcase/types';
+import type { AppearanceKeysDefault, CompositeAppearanceKey, DateIso, FillHoverProps, FillProps, ShapeProps, SizePXProps, TextSizeProps } from '@itcase/types';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 type DatePeriodThemeColor = {
     fill?: FillProps;
@@ -25,7 +25,6 @@ type DatePeriodProps = DatePeriodThemeColor & StyleAttributes & {
     datePickerAppearance?: CompositeAppearanceKey;
     datePickerInputAppearance?: CompositeAppearanceKey;
     datePickerInputFillHover?: FillHoverProps;
-    datePickerInputSize?: SizeOptionProps;
     datePickerInputTextSize?: TextSizeProps;
     isSkeleton?: boolean;
     onChangeDatePeriod: (dateStart: Date | null, dateEnd: Date | null) => void;

package/dist/types/components/DatePeriod/appearance/datePeriodShape.d.ts

@@ -4,22 +4,32 @@ declare const datePeriodAppearanceShape: {
     };
     rounded: {
         shape: string;
+        chipsShape: string;
+        selectShape: string;
     };
     roundedXL: {
         shape: string;
         shapeStrength: string;
+        chipsShape: string;
+        selectShape: string;
     };
     roundedL: {
         shape: string;
         shapeStrength: string;
+        chipsShape: string;
+        selectShape: string;
     };
     roundedM: {
         shape: string;
         shapeStrength: string;
+        chipsShape: string;
+        selectShape: string;
     };
     roundedS: {
         shape: string;
         shapeStrength: string;
+        chipsShape: string;
+        selectShape: string;
     };
 };
 export { datePeriodAppearanceShape };

package/dist/types/components/DatePeriod/appearance/datePeriodSize.d.ts

@@ -4,12 +4,21 @@ declare const datePeriodAppearanceSize: {
         chipsAppearanceSize: string;
         datePickerAppearanceSize: string;
         datePickerInputAppearanceSize: string;
+        selectAppearanceSize: string;
     };
     sizeM: {
         size: string;
         chipsAppearanceSize: string;
         datePickerAppearanceSize: string;
         datePickerInputAppearanceSize: string;
+        selectAppearanceSize: string;
+    };
+    sizeS: {
+        size: string;
+        chipsAppearanceSize: string;
+        datePickerAppearanceSize: string;
+        datePickerInputAppearanceSize: string;
+        selectAppearanceSize: string;
     };
 };
 export { datePeriodAppearanceSize };

package/dist/types/components/DatePeriod/appearance/datePeriodSurface.d.ts

@@ -2,18 +2,16 @@ declare const datePeriodAppearanceSurface: {
     surfacePrimary: {
         fill: string;
         chipsAppearance: string;
-        chipsShape: string;
         datePickerAppearance: string;
         datePickerInputAppearance: string;
-        shape: string;
+        selectAppearance: string;
     };
     surfaceSecondary: {
         fill: string;
         chipsAppearance: string;
-        chipsShape: string;
         datePickerAppearance: string;
         datePickerInputAppearance: string;
-        shape: string;
+        selectAppearance: string;
     };
 };
 export { datePeriodAppearanceSurface };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.177",
+  "version": "1.8.178",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",