@commonsku/styles 1.17.20 → 1.17.22

package/dist/index.cjs

@@ -3845,7 +3845,7 @@ var LabeledIconInput = React__default.default.forwardRef(function (_a, ref) {
     var labelWithAction = props.password ? React__default.default.createElement("div", null,
         label,
         React__default.default.createElement("div", { style: { width: 24, float: 'right' }, onClick: function () { return setShowPassword(function (s) { return !s; }); } },
-            React__default.default.createElement(EyeIcon, { hide: showPassword, cursor: "pointer" }))) : React__default.default.createElement(React__default.default.Fragment, null, label);
+            React__default.default.createElement(EyeIcon, { hide: !showPassword, cursor: "pointer" }))) : React__default.default.createElement(React__default.default.Fragment, null, label);
     return (React__default.default.createElement("div", { style: containerStyle },
         label ? React__default.default.createElement(Label, { htmlFor: name, style: __assign(__assign({}, (!labelOnTop ? {} : { display: 'block' })), { fontFamily: "'skufont-medium', sans-serif", lineHeight: '24px', fontSize: '16px', color: getThemeColor(props, 'neutrals.100') }) },
             labelWithAction,
@@ -7381,6 +7381,13 @@ var presetListStyles = {
     width: '520px',
     gap: '0.5rem 1rem',
 };
+var presetLabelStyles = {
+    margin: '0',
+    flexGrow: '1',
+    flexBasis: '200px',
+    justifyContent: 'left',
+    padding: '13px',
+};
 var dateRangeLabelStyles = {
     color: colors$1.neutrals['darkest'],
     marginBottom: '0.25rem',
@@ -7433,7 +7440,7 @@ var DateRangePicker = React.forwardRef(function (_a, ref) {
             React__default.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' } },
                 React__default.default.createElement(Datepicker, { open: false, locale: locale, selected: endDate, dateFormat: dateFormat, isClearable: isClearable, onChange: function (newEnd, event) { return handleChange('end', startDate, newEnd, event); } }),
                 React__default.default.createElement(Datepicker, __assign({ key: endDateKey, inline: true, locale: locale, selected: endDate, selectsEnd: true, startDate: startDate !== null && startDate !== void 0 ? startDate : (endDate ? new Date(0) : null), endDate: endDate !== null && endDate !== void 0 ? endDate : (startDate ? new Date(9999, 1, 1) : null), todayButton: todayButton, dateFormat: dateFormat, isClearable: isClearable, showMonthDropdown: showMonthDropdown, showYearDropdown: showYearDropdown, nextMonthButtonLabel: nextMonthButtonLabel, nextYearButtonLabel: nextYearButtonLabel, previousMonthButtonLabel: previousMonthButtonLabel, previousYearButtonLabel: previousYearButtonLabel, dropdownMode: dropdownMode, peekNextMonth: peekNextMonth, calendarClassName: "commonsku-styles-datepicker daterangepicker ".concat(popperClassName || ''), onChange: function (newEnd, event) { return handleChange('end', startDate, newEnd, event); } }, props)))))); };
-    var renderPresetTab = function () { return (React__default.default.createElement("div", { style: presetListStyles }, presets === null || presets === void 0 ? void 0 : presets.map(function (preset, idx) { return (React__default.default.createElement(LabeledRadioInButton, { key: idx, labelStyle: { margin: '0', flexGrow: '1', flexBasis: '200px' }, label: preset.label, onChange: function () { return handleSelectPreset(preset); }, checked: selectedPreset != null && preset.label === selectedPreset.label })); }))); };
+    var renderPresetTab = function () { return (React__default.default.createElement("div", { style: presetListStyles }, presets === null || presets === void 0 ? void 0 : presets.map(function (preset, idx) { return (React__default.default.createElement(LabeledRadioInButton, { key: idx, labelStyle: presetLabelStyles, label: preset.label, onChange: function () { return handleSelectPreset(preset); }, checked: selectedPreset != null && preset.label === selectedPreset.label })); }))); };
     return (React__default.default.createElement("div", { ref: ref, style: style },
         hasPresets &&
             React__default.default.createElement(Row, { style: { gap: '2rem', marginBottom: '2rem' } },
@@ -7457,7 +7464,7 @@ var inputStyles = {
     cursor: 'pointer',
     position: 'absolute',
     top: '8px',
-    right: '36px',
+    right: '4px',
 };
 var formatDateRange = function (_a, dateFormat) {
     var startDate = _a.startDate, endDate = _a.endDate;
@@ -7474,8 +7481,8 @@ var formatDateRange = function (_a, dateFormat) {
 };
 var DateRangeInput = function (_a) {
     var value = _a.value, error = _a.error, noMargin = _a.noMargin, onClick = _a.onClick, isClearable = _a.isClearable; _a.selected; _a.dateFormat; var onInputSelect = _a.onInputSelect, props = __rest(_a, ["value", "error", "noMargin", "onClick", "isClearable", "selected", "dateFormat", "onInputSelect"]);
-    return (React__default.default.createElement("div", { style: { position: 'relative', display: 'inline-block' } },
-        React__default.default.createElement(Input, __assign({ readOnly: true, onFocus: onInputSelect, value: value, onClick: onClick, noMargin: noMargin, error: error, style: { marginRight: '2rem', display: 'inline-block', width: '250px' }, type: "text", autoComplete: "off" }, props)),
+    return (React__default.default.createElement("div", { style: { position: 'relative' } },
+        React__default.default.createElement(Input, __assign({ readOnly: true, onFocus: onInputSelect, value: value, onClick: onClick, noMargin: noMargin, error: error, type: "text", autoComplete: "off" }, props)),
         React__default.default.createElement("span", { style: inputStyles, onClick: onClick }, !isClearable &&
             React__default.default.createElement(CalendarIcon, { style: { width: '1.9rem', verticalAlign: 'middle' } }))));
 };
@@ -8623,6 +8630,7 @@ exports.CreditCardIcon = CreditCardIcon;
 exports.Csku = Csku;
 exports.CustomDateInput = CustomDateInput;
 exports.DateRangeDropdown = DateRangeDropdown;
+exports.DateRangeInput = DateRangeInput;
 exports.DateRangePicker = DateRangePicker;
 exports.Datepicker = Datepicker;
 exports.DaysBodyWrapper = DaysBodyWrapper;