@commonsku/styles 1.17.54 → 1.17.56
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 +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +5 -3
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/styles/DateRangePicker.d.ts.map +1 -1
- package/dist/styles/Datepicker.d.ts +1 -1
- package/dist/styles/Datepicker.d.ts.map +1 -1
- package/dist/styles/ProductDetail.d.ts +3 -1
- package/dist/styles/ProductDetail.d.ts.map +1 -1
- package/dist/styles/datepickerStyles.d.ts +1 -1
- package/dist/styles/datepickerStyles.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -894,6 +894,8 @@ type PriceProps = {
|
|
|
894
894
|
type ProductDetailProps = {
|
|
895
895
|
name: string;
|
|
896
896
|
sku: string;
|
|
897
|
+
divisionName?: string;
|
|
898
|
+
divisionHref?: string;
|
|
897
899
|
descriptions: string[] | string;
|
|
898
900
|
sizes: string[];
|
|
899
901
|
allColors: string[];
|
|
@@ -907,7 +909,7 @@ type ProductDetailProps = {
|
|
|
907
909
|
productHref?: string;
|
|
908
910
|
addToTarget?: string;
|
|
909
911
|
};
|
|
910
|
-
declare const ProductDetail: ({ name, sku, descriptions, sizes, allColors, images, mainImage, prices, handleClickProductEvent, selected, showAddButton, costBased, productHref, addToTarget }: ProductDetailProps) => React__default.JSX.Element;
|
|
912
|
+
declare const ProductDetail: ({ name, sku, divisionName, divisionHref, descriptions, sizes, allColors, images, mainImage, prices, handleClickProductEvent, selected, showAddButton, costBased, productHref, addToTarget }: ProductDetailProps) => React__default.JSX.Element;
|
|
911
913
|
|
|
912
914
|
type ArtworkProps = {
|
|
913
915
|
picture?: string;
|
|
@@ -2082,7 +2084,7 @@ type DatepickerProps = Omit<ReactDatePickerProps, 'value'> & Omit<InputProps, 'v
|
|
|
2082
2084
|
value?: Date | null;
|
|
2083
2085
|
placeholder?: string;
|
|
2084
2086
|
};
|
|
2085
|
-
declare const Datepicker: ({ error, value, customInput, locale, todayButton, placeholder, placeholderText, dateFormat, isClearable, peekNextMonth, showMonthDropdown, showYearDropdown, showPopperArrow, dropdownMode, nextMonthButtonLabel, nextYearButtonLabel, previousMonthButtonLabel, previousYearButtonLabel, popperClassName, wrapperClassName, ...props }: DatepickerProps) => React__default.JSX.Element;
|
|
2087
|
+
declare const Datepicker: ({ error, value, customInput, locale, todayButton, placeholder, placeholderText, dateFormat, isClearable, peekNextMonth, showTimeInput, showMonthDropdown, showYearDropdown, showPopperArrow, dropdownMode, nextMonthButtonLabel, nextYearButtonLabel, previousMonthButtonLabel, previousYearButtonLabel, popperClassName, wrapperClassName, ...props }: DatepickerProps) => React__default.JSX.Element;
|
|
2086
2088
|
|
|
2087
2089
|
declare const StyledDropdown: styled_components.StyledComponent<"div", any, {}, never>;
|
|
2088
2090
|
type DropdownContentProps$2 = {
|
|
@@ -3154,7 +3156,7 @@ declare function CellphoneIcon({ color, size, altText, ...props }: Props$1): Rea
|
|
|
3154
3156
|
type Props = SVGIconProps;
|
|
3155
3157
|
declare function MonitorIcon({ color, size, altText, ...props }: Props): React__default.JSX.Element;
|
|
3156
3158
|
|
|
3157
|
-
declare const 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";
|
|
3159
|
+
declare const 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__input-time-container,\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 .react-datepicker__input-time-container {\n border-bottom: none;\n }\n\n .react-datepicker__today-button {\n border-top: none;\n }\n\n .react-datepicker__input-time-container {\n margin: 0;\n text-align: center;\n }\n \n .react-datepicker-time__caption {\n color: var(--color-neutrals-dark);\n font-size: 0.944rem;\n font-weight: bold;\n }\n\n .react-datepicker-time__input {\n padding: 8px;\n border-radius: 5px;\n font-size: 14px;\n font-weight: 400;\n color: var(--color-neutrals-darkest);\n border: 0;\n input {\n border: 2px solid var(--color-neutrals-60);\n }\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";
|
|
3158
3160
|
//# sourceMappingURL=datepickerStyles.d.ts.map
|
|
3159
3161
|
|
|
3160
3162
|
type ConfirmPopupProps = {
|