@commonsku/styles 1.17.19 → 1.17.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +11 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +9 -2
- package/dist/index.mjs +11 -4
- package/dist/index.mjs.map +1 -1
- package/dist/styles/DateRangeDropdown.d.ts +2 -2
- package/dist/styles/DateRangeDropdown.d.ts.map +1 -1
- package/dist/styles/DateRangePicker.d.ts.map +1 -1
- package/dist/styles/datepickerStyles.d.ts +1 -1
- package/dist/styles/datepickerStyles.d.ts.map +1 -1
- package/dist/styles/index.d.ts +2 -2
- package/dist/styles/index.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1235,7 +1235,7 @@ function GearIcon(_a) {
|
|
|
1235
1235
|
React__default.default.createElement("path", { d: renderPath, fill: color }));
|
|
1236
1236
|
}
|
|
1237
1237
|
|
|
1238
|
-
var datepickerStyles = "\n.react-datepicker {\n font-family: \"skufont-demibold\", sans-serif;\n color: var(--color-neutrals-dark);\n}\n\n.commonsku-styles-datepicker {\n &.react-datepicker-wrapper {\n width: 100%;\n }\n\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n\n .react-datepicker {\n border-radius: 3px;\n border: 1px solid var(--color-primary1-60);\n outline: none;\n box-shadow: 1px 1px 0px var(--color-primary1-60),\n -1px -1px 0px var(--color-primary1-60),\n 1px -1px 0px var(--color-primary1-60),\n -1px 1px 0px var(--color-primary1-60);\n }\n\n /* For date ranges */\n &.daterangepicker {\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n {\n background-color: var(--color-primary1-60);\n color: #fff;\n }\n\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n background-color: var(--color-primary1-40);\n }\n\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__day--weekend,\n .react-datepicker__day--selected\n )\n {\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day--in-range.react-datepicker__day--weekend:not(\n .react-datepicker__day--selected,\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n color: var(--color-errors-main);\n }\n\n .react-datepicker__day--in-selecting-range:not(\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n background-color: var(--color-primary1-40);\n &.react-datepicker__day:not(\n .react-datepicker__day--outside-month,\n .react-datepicker__day--weekend,\n ) {\n color: var(--color-neutrals-90);\n }\n &.react-datepicker__day--outside-month {\n color: var(--color-neutrals-70);\n }\n &.react-datepicker__day--weekend {\n color: var(--color-errors-main);\n }\n }\n }\n\n .react-datepicker__current-month,\n .react-datepicker-time__header,\n .react-datepicker-year-header,\n .react-datepicker__header {\n padding-top: 8px;\n padding-bottom: 8px;\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__header,\n .react-datepicker__today-button {\n background: var(--color-neutrals-20);\n padding-top: 8px;\n padding-bottom: 8px;\n }\n\n .react-datepicker__header {\n border-bottom: none;\n }\n\n .react-datepicker__today-button {\n border-top: none;\n }\n\n .react-datepicker__day\n {\n outline: none;\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day-name {\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day:hover :not(.react-datepicker__day--selected),\n .react-datepicker__month-text:hover,\n .react-datepicker__quarter-text:hover,\n .react-datepicker__year-text:hover {\n background-color: var(--color-neutrals-20);\n }\n\n .react-datepicker__day--outside-month {\n color: var(--color-neutrals-70);\n }\n\n .react-datepicker__day--weekend {\n color: var(--color-errors-main);\n }\n\n .react-datepicker__day--selected,\n .react-datepicker__month-text--keyboard-selected,\n .react-datepicker__quarter-text--keyboard-selected,\n .react-datepicker__year-text--keyboard-selected\n {\n background-color: var(--color-primary1-60);\n color: #fff;\n }\n\n .react-datepicker__day--keyboard-selected {\n background-color: inherit;\n }\n\n .react-datepicker__triangle {\n border-bottom-color: var(--color-neutrals-20) !important;\n }\n\n .react-datepicker__triangle::before {\n border-bottom-color: var(--color-primary1-60) !important;\n border-top-color: var(--color-primary1-60) !important;\n }\n\n .react-datepicker__month-select,\n .react-datepicker__year-select {\n height: 30px;\n border: 2px solid var(--color-primary1-60);\n padding: 3px;\n border-radius: 5px;\n outline: none;\n }\n\n .react-datepicker__time-container {\n margin-top: -2px;\n border-top-left-radius: 0px;\n border-right: 2px solid var(--color-primary1-60);\n border-bottom: 2px solid var(--color-primary1-60);\n border-top: 2px solid var(--color-primary1-60);\n }\n\n .react-datepicker__navigation-icon {\n &.react-datepicker__navigation-icon--next::before {\n top: 2px;\n left: -8px;\n height: 6px;\n width: 6px;\n border-width: 3px 3px 0 0;\n border-top-right-radius: 2px;\n border-color: var(--color-primary1-60);\n }\n\n &.react-datepicker__navigation-icon--previous::before {\n top: 2px;\n right: -8px;\n height: 6px;\n width: 6px;\n border-width: 3px 3px 0 0;\n border-top-right-radius: 2px;\n border-color: var(--color-primary1-60);\n }\n }\n\n .react-datepicker__aria-live {\n display: none;\n }\n\n @media only screen and (min-height: 600px) and (max-height: 800px ) {\n .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n overflow-y: scroll;\n max-height: 140px;\n }\n }\n @media only screen and (max-height: 599px ) {\n .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n overflow-y: scroll;\n max-height: 110px;\n }\n\n .react-datepicker__time-container {\n margin-top: -2px;\n border-top-left-radius: 0px;\n border-right: 2px solid var(--color-primary1-60);\n border-bottom: 2px solid var(--color-primary1-60);\n border-top: 2px solid var(--color-primary1-60);\n }\n }\n}\n";
|
|
1238
|
+
var datepickerStyles = "\n.react-datepicker {\n font-family: \"skufont-demibold\", sans-serif;\n color: var(--color-neutrals-dark);\n}\n\n.commonsku-styles-datepicker {\n &.react-datepicker-wrapper {\n width: 100%;\n }\n\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n\n .react-datepicker {\n border-radius: 3px;\n border: 1px solid var(--color-primary1-60);\n outline: none;\n box-shadow: 1px 1px 0px var(--color-primary1-60),\n -1px -1px 0px var(--color-primary1-60),\n 1px -1px 0px var(--color-primary1-60),\n -1px 1px 0px var(--color-primary1-60);\n }\n\n /* For date ranges */\n &.daterangepicker {\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n {\n background-color: var(--color-primary1-60);\n color: #fff;\n }\n\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n background-color: var(--color-primary1-40);\n }\n\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__day--weekend,\n .react-datepicker__day--selected\n )\n {\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day--in-range.react-datepicker__day--weekend:not(\n .react-datepicker__day--selected,\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n color: var(--color-errors-main);\n }\n\n .react-datepicker__day--in-selecting-range:not(\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n background-color: var(--color-primary1-40);\n &.react-datepicker__day:not(\n .react-datepicker__day--outside-month,\n .react-datepicker__day--weekend,\n ) {\n color: var(--color-neutrals-90);\n }\n &.react-datepicker__day--outside-month {\n color: var(--color-neutrals-70);\n }\n &.react-datepicker__day--weekend {\n color: var(--color-errors-main);\n }\n }\n }\n\n .react-datepicker__current-month,\n .react-datepicker-time__header,\n .react-datepicker-year-header,\n .react-datepicker__header {\n padding-top: 8px;\n padding-bottom: 8px;\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__header,\n .react-datepicker__today-button {\n background: var(--color-neutrals-20);\n padding-top: 8px;\n padding-bottom: 8px;\n }\n\n .react-datepicker__header {\n border-bottom: none;\n }\n\n .react-datepicker__today-button {\n border-top: none;\n }\n\n .react-datepicker__day\n {\n outline: none;\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day-name {\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day:hover :not(.react-datepicker__day--selected),\n .react-datepicker__month-text:hover,\n .react-datepicker__quarter-text:hover,\n .react-datepicker__year-text:hover {\n background-color: var(--color-neutrals-20);\n }\n\n .react-datepicker__day--outside-month {\n color: var(--color-neutrals-70);\n }\n\n .react-datepicker__day--weekend {\n color: var(--color-errors-main);\n }\n\n .react-datepicker__day--selected,\n .react-datepicker__month-text--keyboard-selected,\n .react-datepicker__quarter-text--keyboard-selected,\n .react-datepicker__year-text--keyboard-selected\n {\n background-color: var(--color-primary1-60);\n color: #fff;\n }\n\n .react-datepicker__day--keyboard-selected {\n background-color: inherit;\n }\n\n .react-datepicker__triangle {\n border-bottom-color: var(--color-neutrals-20) !important;\n }\n\n .react-datepicker__triangle::before {\n border-bottom-color: var(--color-primary1-60) !important;\n border-top-color: var(--color-primary1-60) !important;\n }\n\n .react-datepicker__month-select,\n .react-datepicker__year-select {\n height: 30px;\n border: 2px solid var(--color-primary1-60);\n padding: 3px;\n border-radius: 5px;\n outline: none;\n }\n\n .react-datepicker__time-container {\n margin-top: -2px;\n border-top-left-radius: 0px;\n border-right: 2px solid var(--color-primary1-60);\n border-bottom: 2px solid var(--color-primary1-60);\n border-top: 2px solid var(--color-primary1-60);\n }\n\n .react-datepicker__navigation-icon {\n &.react-datepicker__navigation-icon--next::before {\n content: '';\n box-sizing: initial;\n top: 2px;\n left: -8px;\n height: 6px;\n width: 6px;\n border-width: 3px 3px 0 0;\n border-top-right-radius: 2px;\n border-color: var(--color-primary1-60);\n }\n\n &.react-datepicker__navigation-icon--previous::before {\n content: '';\n box-sizing: initial;\n top: 2px;\n right: -8px;\n height: 6px;\n width: 6px;\n border-width: 3px 3px 0 0;\n border-top-right-radius: 2px;\n border-color: var(--color-primary1-60);\n }\n }\n\n .react-datepicker__aria-live {\n display: none;\n }\n\n @media only screen and (min-height: 600px) and (max-height: 800px ) {\n .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n overflow-y: scroll;\n max-height: 140px;\n }\n }\n @media only screen and (max-height: 599px ) {\n .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n overflow-y: scroll;\n max-height: 110px;\n }\n\n .react-datepicker__time-container {\n margin-top: -2px;\n border-top-left-radius: 0px;\n border-right: 2px solid var(--color-primary1-60);\n border-bottom: 2px solid var(--color-primary1-60);\n border-top: 2px solid var(--color-primary1-60);\n }\n }\n}\n";
|
|
1239
1239
|
|
|
1240
1240
|
var parseColorVars = function (colors, prefix) {
|
|
1241
1241
|
if (prefix === void 0) { prefix = ''; }
|
|
@@ -3845,7 +3845,7 @@ var LabeledIconInput = React__default.default.forwardRef(function (_a, ref) {
|
|
|
3845
3845
|
var labelWithAction = props.password ? React__default.default.createElement("div", null,
|
|
3846
3846
|
label,
|
|
3847
3847
|
React__default.default.createElement("div", { style: { width: 24, float: 'right' }, onClick: function () { return setShowPassword(function (s) { return !s; }); } },
|
|
3848
|
-
React__default.default.createElement(EyeIcon, { hide: showPassword, cursor: "pointer" }))) : React__default.default.createElement(React__default.default.Fragment, null, label);
|
|
3848
|
+
React__default.default.createElement(EyeIcon, { hide: !showPassword, cursor: "pointer" }))) : React__default.default.createElement(React__default.default.Fragment, null, label);
|
|
3849
3849
|
return (React__default.default.createElement("div", { style: containerStyle },
|
|
3850
3850
|
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') }) },
|
|
3851
3851
|
labelWithAction,
|
|
@@ -7381,6 +7381,13 @@ var presetListStyles = {
|
|
|
7381
7381
|
width: '520px',
|
|
7382
7382
|
gap: '0.5rem 1rem',
|
|
7383
7383
|
};
|
|
7384
|
+
var presetLabelStyles = {
|
|
7385
|
+
margin: '0',
|
|
7386
|
+
flexGrow: '1',
|
|
7387
|
+
flexBasis: '200px',
|
|
7388
|
+
justifyContent: 'left',
|
|
7389
|
+
padding: '13px',
|
|
7390
|
+
};
|
|
7384
7391
|
var dateRangeLabelStyles = {
|
|
7385
7392
|
color: colors$1.neutrals['darkest'],
|
|
7386
7393
|
marginBottom: '0.25rem',
|
|
@@ -7433,7 +7440,7 @@ var DateRangePicker = React.forwardRef(function (_a, ref) {
|
|
|
7433
7440
|
React__default.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' } },
|
|
7434
7441
|
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); } }),
|
|
7435
7442
|
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)))))); };
|
|
7436
|
-
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:
|
|
7443
|
+
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 })); }))); };
|
|
7437
7444
|
return (React__default.default.createElement("div", { ref: ref, style: style },
|
|
7438
7445
|
hasPresets &&
|
|
7439
7446
|
React__default.default.createElement(Row, { style: { gap: '2rem', marginBottom: '2rem' } },
|
|
@@ -8623,6 +8630,7 @@ exports.CreditCardIcon = CreditCardIcon;
|
|
|
8623
8630
|
exports.Csku = Csku;
|
|
8624
8631
|
exports.CustomDateInput = CustomDateInput;
|
|
8625
8632
|
exports.DateRangeDropdown = DateRangeDropdown;
|
|
8633
|
+
exports.DateRangeInput = DateRangeInput;
|
|
8626
8634
|
exports.DateRangePicker = DateRangePicker;
|
|
8627
8635
|
exports.Datepicker = Datepicker;
|
|
8628
8636
|
exports.DaysBodyWrapper = DaysBodyWrapper;
|