@alfalab/core-components 41.7.0 → 41.8.0

package/date-input/esm/Component.js

@@ -8,7 +8,7 @@ import 'date-fns/format';
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-var styles = {"nativeInput":"date-input__nativeInput_1sbyi"};
+var styles = {"nativeInput":"date-input__nativeInput_relvq"};
 require('./index.css');
 
 var DateInput = forwardRef(function (_a, ref) {

package/date-input/esm/index.css

@@ -14,7 +14,7 @@
 } :root {
 } :root {
 } :root {
-} .date-input__nativeInput_1sbyi {
+} .date-input__nativeInput_relvq {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -24,8 +24,8 @@
     -webkit-appearance: none;
             appearance: none;
     z-index: 1
-} .date-input__nativeInput_1sbyi::-webkit-calendar-picker-indicator {
+} .date-input__nativeInput_relvq::-webkit-calendar-picker-indicator {
         display: none;
-    } .date-input__nativeInput_1sbyi::-webkit-inner-spin-button {
+    } .date-input__nativeInput_relvq::-webkit-inner-spin-button {
         display: none;
     }

package/date-input/index.css

@@ -14,7 +14,7 @@
 } :root {
 } :root {
 } :root {
-} .date-input__nativeInput_1sbyi {
+} .date-input__nativeInput_relvq {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -24,8 +24,8 @@
     -webkit-appearance: none;
             appearance: none;
     z-index: 1
-} .date-input__nativeInput_1sbyi::-webkit-calendar-picker-indicator {
+} .date-input__nativeInput_relvq::-webkit-calendar-picker-indicator {
         display: none;
-    } .date-input__nativeInput_1sbyi::-webkit-inner-spin-button {
+    } .date-input__nativeInput_relvq::-webkit-inner-spin-button {
         display: none;
     }

package/date-input/modern/Component.js

@@ -7,7 +7,7 @@ import 'date-fns/format';
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-const styles = {"nativeInput":"date-input__nativeInput_1sbyi"};
+const styles = {"nativeInput":"date-input__nativeInput_relvq"};
 require('./index.css');
 
 const DateInput = forwardRef(({ mobileMode = 'input', defaultValue = '', rightAddons, error, value: propValue, onBlur, onChange, onComplete, ...restProps }, ref) => {

package/date-input/modern/index.css

@@ -14,7 +14,7 @@
 } :root {
 } :root {
 } :root {
-} .date-input__nativeInput_1sbyi {
+} .date-input__nativeInput_relvq {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -24,8 +24,8 @@
     -webkit-appearance: none;
             appearance: none;
     z-index: 1
-} .date-input__nativeInput_1sbyi::-webkit-calendar-picker-indicator {
+} .date-input__nativeInput_relvq::-webkit-calendar-picker-indicator {
         display: none;
-    } .date-input__nativeInput_1sbyi::-webkit-inner-spin-button {
+    } .date-input__nativeInput_relvq::-webkit-inner-spin-button {
         display: none;
     }

package/date-range-input/components/date-range-input/Component.js

@@ -22,7 +22,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var dateFnsIsValid__default = /*#__PURE__*/_interopDefaultCompat(dateFnsIsValid);
 
-var styles = {"component":"date-range-input__component_owdvo","calendarContainer":"date-range-input__calendarContainer_owdvo","calendarResponsive":"date-range-input__calendarResponsive_owdvo","block":"date-range-input__block_owdvo"};
+var styles = {"component":"date-range-input__component_1hpcg","calendarContainer":"date-range-input__calendarContainer_1hpcg","calendarResponsive":"date-range-input__calendarResponsive_1hpcg","block":"date-range-input__block_1hpcg","calendarIcon":"date-range-input__calendarIcon_1hpcg"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -218,7 +218,7 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
             _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
         React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
                 rightAddons,
-                picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
+                picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) })),
         picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles.calendarContainer, (_c = {},
                 _c[styles.calendarResponsive] = calendarResponsive,
                 _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));

package/date-range-input/components/date-range-input/index.css

@@ -15,6 +15,7 @@
     --border-radius-m: 8px;
 } :root {
     --gap-m: 16px;
+    --gap-s-neg: -12px;
 } :root {
 } :root {
 } :root {
@@ -41,22 +42,25 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-range-input__component_owdvo {
+} .date-range-input__component_1hpcg {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-range-input__calendarContainer_owdvo {
+} .date-range-input__calendarContainer_1hpcg {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-range-input__calendarContainer_owdvo {
+} @media (max-width: 374px) { .date-range-input__calendarContainer_1hpcg {
         width: 100%;
         min-width: 288px
 }
-    } .date-range-input__calendarResponsive_owdvo {
+    } .date-range-input__calendarResponsive_1hpcg {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
-} .date-range-input__block_owdvo {
+} .date-range-input__block_1hpcg {
     width: 100%;
+} .date-range-input__calendarIcon_1hpcg {
+    margin-right: var(--gap-s-neg);
+    height: 100%;
 }

package/date-range-input/cssm/components/date-range-input/Component.js

@@ -217,7 +217,7 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
             _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
         React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
                 rightAddons,
-                picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
+                picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles__default.default.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) })),
         picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles__default.default.calendarContainer, (_c = {},
                 _c[styles__default.default.calendarResponsive] = calendarResponsive,
                 _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));

package/date-range-input/cssm/components/date-range-input/index.module.css

@@ -14,6 +14,7 @@
     --border-radius-m: 8px;
 } :root {
     --gap-m: 16px;
+    --gap-s-neg: -12px;
 } :root {
 } :root {
 } :root {
@@ -58,4 +59,7 @@
     padding: 0 var(--gap-m);
 } .block {
     width: 100%;
+} .calendarIcon {
+    margin-right: var(--gap-s-neg);
+    height: 100%;
 }

package/date-range-input/esm/components/date-range-input/Component.js

@@ -13,7 +13,7 @@ import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
 import 'date-fns/parse';
 
-var styles = {"component":"date-range-input__component_owdvo","calendarContainer":"date-range-input__calendarContainer_owdvo","calendarResponsive":"date-range-input__calendarResponsive_owdvo","block":"date-range-input__block_owdvo"};
+var styles = {"component":"date-range-input__component_1hpcg","calendarContainer":"date-range-input__calendarContainer_1hpcg","calendarResponsive":"date-range-input__calendarResponsive_1hpcg","block":"date-range-input__block_1hpcg","calendarIcon":"date-range-input__calendarIcon_1hpcg"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -209,7 +209,7 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
             _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
         React.createElement(Input, __assign({}, restProps, { block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
-                picker && (React.createElement(IconButton, { ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) })),
+                picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })),
         picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, (_c = {},
                 _c[styles.calendarResponsive] = calendarResponsive,
                 _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));

package/date-range-input/esm/components/date-range-input/index.css

@@ -15,6 +15,7 @@
     --border-radius-m: 8px;
 } :root {
     --gap-m: 16px;
+    --gap-s-neg: -12px;
 } :root {
 } :root {
 } :root {
@@ -41,22 +42,25 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-range-input__component_owdvo {
+} .date-range-input__component_1hpcg {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-range-input__calendarContainer_owdvo {
+} .date-range-input__calendarContainer_1hpcg {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-range-input__calendarContainer_owdvo {
+} @media (max-width: 374px) { .date-range-input__calendarContainer_1hpcg {
         width: 100%;
         min-width: 288px
 }
-    } .date-range-input__calendarResponsive_owdvo {
+    } .date-range-input__calendarResponsive_1hpcg {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
-} .date-range-input__block_owdvo {
+} .date-range-input__block_1hpcg {
     width: 100%;
+} .date-range-input__calendarIcon_1hpcg {
+    margin-right: var(--gap-s-neg);
+    height: 100%;
 }

package/date-range-input/modern/components/date-range-input/Component.js

@@ -12,7 +12,7 @@ import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
 import 'date-fns/parse';
 
-const styles = {"component":"date-range-input__component_owdvo","calendarContainer":"date-range-input__calendarContainer_owdvo","calendarResponsive":"date-range-input__calendarResponsive_owdvo","block":"date-range-input__block_owdvo"};
+const styles = {"component":"date-range-input__component_1hpcg","calendarContainer":"date-range-input__calendarContainer_1hpcg","calendarResponsive":"date-range-input__calendarResponsive_1hpcg","block":"date-range-input__block_1hpcg","calendarIcon":"date-range-input__calendarIcon_1hpcg"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -202,7 +202,7 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
         }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
         React.createElement(Input, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
-                picker && (React.createElement(IconButton, { ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) }),
+                picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) }),
         picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
                 [styles.calendarResponsive]: calendarResponsive,
             }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));

package/date-range-input/modern/components/date-range-input/index.css

@@ -15,6 +15,7 @@
     --border-radius-m: 8px;
 } :root {
     --gap-m: 16px;
+    --gap-s-neg: -12px;
 } :root {
 } :root {
 } :root {
@@ -41,22 +42,25 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-range-input__component_owdvo {
+} .date-range-input__component_1hpcg {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-range-input__calendarContainer_owdvo {
+} .date-range-input__calendarContainer_1hpcg {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-range-input__calendarContainer_owdvo {
+} @media (max-width: 374px) { .date-range-input__calendarContainer_1hpcg {
         width: 100%;
         min-width: 288px
 }
-    } .date-range-input__calendarResponsive_owdvo {
+    } .date-range-input__calendarResponsive_1hpcg {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
-} .date-range-input__block_owdvo {
+} .date-range-input__block_1hpcg {
     width: 100%;
+} .date-range-input__calendarIcon_1hpcg {
+    margin-right: var(--gap-s-neg);
+    height: 100%;
 }

package/date-time-input/components/date-time-input/Component.js

@@ -20,7 +20,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"date-time-input__component_sbf04","calendarContainer":"date-time-input__calendarContainer_sbf04","calendarResponsive":"date-time-input__calendarResponsive_sbf04","block":"date-time-input__block_sbf04"};
+var styles = {"component":"date-time-input__component_dvy59","calendarContainer":"date-time-input__calendarContainer_dvy59","calendarResponsive":"date-time-input__calendarResponsive_dvy59","block":"date-time-input__block_dvy59","calendarIcon":"date-time-input__calendarIcon_dvy59"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -146,7 +146,7 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
             _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
         React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
                 rightAddons,
-                picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
+                picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles.calendarIcon, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) })),
         picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles.calendarContainer, (_c = {},
                 _c[styles.calendarResponsive] = calendarResponsive,
                 _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));

package/date-time-input/components/date-time-input/index.css

@@ -15,6 +15,7 @@
     --border-radius-m: 8px;
 } :root {
     --gap-m: 16px;
+    --gap-s-neg: -12px;
 } :root {
 } :root {
 } :root {
@@ -41,22 +42,25 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-time-input__component_sbf04 {
+} .date-time-input__component_dvy59 {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-time-input__calendarContainer_sbf04 {
+} .date-time-input__calendarContainer_dvy59 {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-time-input__calendarContainer_sbf04 {
+} @media (max-width: 374px) { .date-time-input__calendarContainer_dvy59 {
         width: 100%;
         min-width: 288px
 }
-    } .date-time-input__calendarResponsive_sbf04 {
+    } .date-time-input__calendarResponsive_dvy59 {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
-} .date-time-input__block_sbf04 {
+} .date-time-input__block_dvy59 {
     width: 100%;
+} .date-time-input__calendarIcon_dvy59 {
+    margin-right: var(--gap-s-neg);
+    height: 100%;
 }

package/date-time-input/cssm/components/date-time-input/Component.js

@@ -145,7 +145,7 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
             _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
         React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
                 rightAddons,
-                picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
+                picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles__default.default.calendarIcon, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) })),
         picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles__default.default.calendarContainer, (_c = {},
                 _c[styles__default.default.calendarResponsive] = calendarResponsive,
                 _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));

package/date-time-input/cssm/components/date-time-input/index.module.css

@@ -14,6 +14,7 @@
     --border-radius-m: 8px;
 } :root {
     --gap-m: 16px;
+    --gap-s-neg: -12px;
 } :root {
 } :root {
 } :root {
@@ -58,4 +59,7 @@
     padding: 0 var(--gap-m);
 } .block {
     width: 100%;
+} .calendarIcon {
+    margin-right: var(--gap-s-neg);
+    height: 100%;
 }

package/date-time-input/esm/components/date-time-input/Component.js

@@ -12,7 +12,7 @@ import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isC
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-var styles = {"component":"date-time-input__component_sbf04","calendarContainer":"date-time-input__calendarContainer_sbf04","calendarResponsive":"date-time-input__calendarResponsive_sbf04","block":"date-time-input__block_sbf04"};
+var styles = {"component":"date-time-input__component_dvy59","calendarContainer":"date-time-input__calendarContainer_dvy59","calendarResponsive":"date-time-input__calendarResponsive_dvy59","block":"date-time-input__block_dvy59","calendarIcon":"date-time-input__calendarIcon_dvy59"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -138,7 +138,7 @@ var DateTimeInput = React.forwardRef(function (_a, ref) {
             _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
         React.createElement(Input, __assign({}, restProps, { block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, error: error, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
-                picker && (React.createElement(IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) })),
+                picker && (React.createElement(IconButton, { className: styles.calendarIcon, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })),
         picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, (_c = {},
                 _c[styles.calendarResponsive] = calendarResponsive,
                 _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));

package/date-time-input/esm/components/date-time-input/index.css

@@ -15,6 +15,7 @@
     --border-radius-m: 8px;
 } :root {
     --gap-m: 16px;
+    --gap-s-neg: -12px;
 } :root {
 } :root {
 } :root {
@@ -41,22 +42,25 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-time-input__component_sbf04 {
+} .date-time-input__component_dvy59 {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-time-input__calendarContainer_sbf04 {
+} .date-time-input__calendarContainer_dvy59 {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-time-input__calendarContainer_sbf04 {
+} @media (max-width: 374px) { .date-time-input__calendarContainer_dvy59 {
         width: 100%;
         min-width: 288px
 }
-    } .date-time-input__calendarResponsive_sbf04 {
+    } .date-time-input__calendarResponsive_dvy59 {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
-} .date-time-input__block_sbf04 {
+} .date-time-input__block_dvy59 {
     width: 100%;
+} .date-time-input__calendarIcon_dvy59 {
+    margin-right: var(--gap-s-neg);
+    height: 100%;
 }

package/date-time-input/modern/components/date-time-input/Component.js

@@ -11,7 +11,7 @@ import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isC
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-const styles = {"component":"date-time-input__component_sbf04","calendarContainer":"date-time-input__calendarContainer_sbf04","calendarResponsive":"date-time-input__calendarResponsive_sbf04","block":"date-time-input__block_sbf04"};
+const styles = {"component":"date-time-input__component_dvy59","calendarContainer":"date-time-input__calendarContainer_dvy59","calendarResponsive":"date-time-input__calendarResponsive_dvy59","block":"date-time-input__block_dvy59","calendarIcon":"date-time-input__calendarIcon_dvy59"};
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -134,7 +134,7 @@ const DateTimeInput = React.forwardRef(({ className, inputClassName, popoverClas
         }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
         React.createElement(Input, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, error: error, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
-                picker && (React.createElement(IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) }),
+                picker && (React.createElement(IconButton, { className: styles.calendarIcon, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) }),
         picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
                 [styles.calendarResponsive]: calendarResponsive,
             }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));

package/date-time-input/modern/components/date-time-input/index.css

@@ -15,6 +15,7 @@
     --border-radius-m: 8px;
 } :root {
     --gap-m: 16px;
+    --gap-s-neg: -12px;
 } :root {
 } :root {
 } :root {
@@ -41,22 +42,25 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-time-input__component_sbf04 {
+} .date-time-input__component_dvy59 {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-time-input__calendarContainer_sbf04 {
+} .date-time-input__calendarContainer_dvy59 {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-time-input__calendarContainer_sbf04 {
+} @media (max-width: 374px) { .date-time-input__calendarContainer_dvy59 {
         width: 100%;
         min-width: 288px
 }
-    } .date-time-input__calendarResponsive_sbf04 {
+    } .date-time-input__calendarResponsive_dvy59 {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
-} .date-time-input__block_sbf04 {
+} .date-time-input__block_dvy59 {
     width: 100%;
+} .date-time-input__calendarIcon_dvy59 {
+    margin-right: var(--gap-s-neg);
+    height: 100%;
 }

package/divider/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"divider__component_1myjx"};
+var styles = {"component":"divider__component_1ban7"};
 require('./index.css');
 
 var Divider = function (_a) {

package/divider/esm/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"divider__component_1myjx"};
+var styles = {"component":"divider__component_1ban7"};
 require('./index.css');
 
 var Divider = function (_a) {

package/divider/esm/index.css

@@ -17,7 +17,7 @@
 } :root {
 } :root {
     --divider-color: var(--color-light-border-primary);
-} .divider__component_1myjx {
+} .divider__component_1ban7 {
     border: none;
     border-bottom: 1px solid var(--divider-color);
     margin: 0;

package/divider/index.css

@@ -17,7 +17,7 @@
 } :root {
 } :root {
     --divider-color: var(--color-light-border-primary);
-} .divider__component_1myjx {
+} .divider__component_1ban7 {
     border: none;
     border-bottom: 1px solid var(--divider-color);
     margin: 0;

package/divider/modern/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"component":"divider__component_1myjx"};
+const styles = {"component":"divider__component_1ban7"};
 require('./index.css');
 
 const Divider = ({ className, dataTestId }) => (React.createElement("hr", { className: cn(styles.component, className), "data-test-id": dataTestId }));

package/divider/modern/index.css

@@ -17,7 +17,7 @@
 } :root {
 } :root {
     --divider-color: var(--color-light-border-primary);
-} .divider__component_1myjx {
+} .divider__component_1ban7 {
     border: none;
     border-bottom: 1px solid var(--divider-color);
     margin: 0;

package/drawer/Component.js

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"drawer__component_ymlkw","rightPlacement":"drawer__rightPlacement_ymlkw","leftPlacement":"drawer__leftPlacement_ymlkw","content":"drawer__content_ymlkw","simplebar":"drawer__simplebar_ymlkw","enterRight":"drawer__enterRight_ymlkw","enterLeft":"drawer__enterLeft_ymlkw","contentEnter":"drawer__contentEnter_ymlkw","backdropEnter":"drawer__backdropEnter_ymlkw","enterActive":"drawer__enterActive_ymlkw","backdropEnterActive":"drawer__backdropEnterActive_ymlkw","backdropEnterDone":"drawer__backdropEnterDone_ymlkw","contentEnterActive":"drawer__contentEnterActive_ymlkw","exit":"drawer__exit_ymlkw","backdropExit":"drawer__backdropExit_ymlkw","contentExit":"drawer__contentExit_ymlkw","exitActiveRight":"drawer__exitActiveRight_ymlkw","exitActiveLeft":"drawer__exitActiveLeft_ymlkw","backdropExitActive":"drawer__backdropExitActive_ymlkw","backdropExitDone":"drawer__backdropExitDone_ymlkw","contentExitActive":"drawer__contentExitActive_ymlkw"};
+var styles = {"component":"drawer__component_1t9m2","rightPlacement":"drawer__rightPlacement_1t9m2","leftPlacement":"drawer__leftPlacement_1t9m2","content":"drawer__content_1t9m2","simplebar":"drawer__simplebar_1t9m2","enterRight":"drawer__enterRight_1t9m2","enterLeft":"drawer__enterLeft_1t9m2","contentEnter":"drawer__contentEnter_1t9m2","backdropEnter":"drawer__backdropEnter_1t9m2","enterActive":"drawer__enterActive_1t9m2","backdropEnterActive":"drawer__backdropEnterActive_1t9m2","backdropEnterDone":"drawer__backdropEnterDone_1t9m2","contentEnterActive":"drawer__contentEnterActive_1t9m2","exit":"drawer__exit_1t9m2","backdropExit":"drawer__backdropExit_1t9m2","contentExit":"drawer__contentExit_1t9m2","exitActiveRight":"drawer__exitActiveRight_1t9m2","exitActiveLeft":"drawer__exitActiveLeft_1t9m2","backdropExitActive":"drawer__backdropExitActive_1t9m2","backdropExitDone":"drawer__backdropExitDone_1t9m2","contentExitActive":"drawer__contentExitActive_1t9m2"};
 require('./index.css');
 
 var ANIMATION_DURATION = 600;

package/drawer/esm/Component.js

@@ -5,7 +5,7 @@ import cn from 'classnames';
 import { BaseModal, BaseModalContext } from '../../base-modal/esm';
 import { Scrollbar } from '../../scrollbar/esm';
 
-var styles = {"component":"drawer__component_ymlkw","rightPlacement":"drawer__rightPlacement_ymlkw","leftPlacement":"drawer__leftPlacement_ymlkw","content":"drawer__content_ymlkw","simplebar":"drawer__simplebar_ymlkw","enterRight":"drawer__enterRight_ymlkw","enterLeft":"drawer__enterLeft_ymlkw","contentEnter":"drawer__contentEnter_ymlkw","backdropEnter":"drawer__backdropEnter_ymlkw","enterActive":"drawer__enterActive_ymlkw","backdropEnterActive":"drawer__backdropEnterActive_ymlkw","backdropEnterDone":"drawer__backdropEnterDone_ymlkw","contentEnterActive":"drawer__contentEnterActive_ymlkw","exit":"drawer__exit_ymlkw","backdropExit":"drawer__backdropExit_ymlkw","contentExit":"drawer__contentExit_ymlkw","exitActiveRight":"drawer__exitActiveRight_ymlkw","exitActiveLeft":"drawer__exitActiveLeft_ymlkw","backdropExitActive":"drawer__backdropExitActive_ymlkw","backdropExitDone":"drawer__backdropExitDone_ymlkw","contentExitActive":"drawer__contentExitActive_ymlkw"};
+var styles = {"component":"drawer__component_1t9m2","rightPlacement":"drawer__rightPlacement_1t9m2","leftPlacement":"drawer__leftPlacement_1t9m2","content":"drawer__content_1t9m2","simplebar":"drawer__simplebar_1t9m2","enterRight":"drawer__enterRight_1t9m2","enterLeft":"drawer__enterLeft_1t9m2","contentEnter":"drawer__contentEnter_1t9m2","backdropEnter":"drawer__backdropEnter_1t9m2","enterActive":"drawer__enterActive_1t9m2","backdropEnterActive":"drawer__backdropEnterActive_1t9m2","backdropEnterDone":"drawer__backdropEnterDone_1t9m2","contentEnterActive":"drawer__contentEnterActive_1t9m2","exit":"drawer__exit_1t9m2","backdropExit":"drawer__backdropExit_1t9m2","contentExit":"drawer__contentExit_1t9m2","exitActiveRight":"drawer__exitActiveRight_1t9m2","exitActiveLeft":"drawer__exitActiveLeft_1t9m2","backdropExitActive":"drawer__backdropExitActive_1t9m2","backdropExitDone":"drawer__backdropExitDone_1t9m2","contentExitActive":"drawer__contentExitActive_1t9m2"};
 require('./index.css');
 
 var ANIMATION_DURATION = 600;