@commonsku/styles 1.17.15 → 1.17.16
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 +6 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +6 -6
- package/dist/index.mjs.map +1 -1
- package/dist/styles/Popup.d.ts.map +1 -1
- package/dist/styles/ProductDetail.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -4484,7 +4484,7 @@ var PopupContainer = function (_a) {
|
|
|
4484
4484
|
return ReactDOM__default.default.createPortal(children, ref.current);
|
|
4485
4485
|
};
|
|
4486
4486
|
var Popup = React__default.default.forwardRef(function (_a, forwardedRef) {
|
|
4487
|
-
var header = _a.header, _b = _a.noHeader, noHeader = _b === void 0 ? false : _b, title = _a.title, controls = _a.controls, children = _a.children, onClose = _a.onClose, _c = _a.noCloseButton, noCloseButton = _c === void 0 ? false : _c, _d = _a.closeOnEsc, closeOnEsc = _d === void 0 ? true : _d, _e = _a.closeOnClickOutside, closeOnClickOutside = _e === void 0 ? false : _e, overlayZIndex = _a.overlayZIndex, popupClassName = _a.popupClassName, contentClassName = _a.contentClassName, _f = _a.PopupWindowComponent, PopupWindowComponent = _f === void 0 ? PopupWindow : _f, props = __rest(_a, ["header", "noHeader", "title", "controls", "children", "onClose", "noCloseButton", "closeOnEsc", "closeOnClickOutside", "overlayZIndex", "popupClassName", "contentClassName", "PopupWindowComponent"]);
|
|
4487
|
+
var header = _a.header, _b = _a.noHeader, noHeader = _b === void 0 ? false : _b, title = _a.title, controls = _a.controls, children = _a.children, onClose = _a.onClose, _c = _a.noCloseButton, noCloseButton = _c === void 0 ? false : _c, _d = _a.closeOnEsc, closeOnEsc = _d === void 0 ? true : _d, _e = _a.closeOnClickOutside, closeOnClickOutside = _e === void 0 ? false : _e, overlayZIndex = _a.overlayZIndex, popupClassName = _a.popupClassName, contentClassName = _a.contentClassName, _f = _a.PopupWindowComponent, PopupWindowComponent = _f === void 0 ? PopupWindow : _f, style = _a.style, props = __rest(_a, ["header", "noHeader", "title", "controls", "children", "onClose", "noCloseButton", "closeOnEsc", "closeOnClickOutside", "overlayZIndex", "popupClassName", "contentClassName", "PopupWindowComponent", "style"]);
|
|
4488
4488
|
var ref = useFallbackRef(forwardedRef);
|
|
4489
4489
|
useClickOutside({
|
|
4490
4490
|
ref: ref,
|
|
@@ -4512,7 +4512,7 @@ var Popup = React__default.default.forwardRef(function (_a, forwardedRef) {
|
|
|
4512
4512
|
}, [closeOnClickOutside, closeOnEsc, onClose]);
|
|
4513
4513
|
return React__default.default.createElement(PopupContainer, null,
|
|
4514
4514
|
React__default.default.createElement(Overlay, { zIndex: overlayZIndex },
|
|
4515
|
-
React__default.default.createElement(PopupWindowComponent, __assign({ className: "popup" + (popupClassName ? " ".concat(popupClassName) : '') }, props, { ref: ref }),
|
|
4515
|
+
React__default.default.createElement(PopupWindowComponent, __assign({ className: "popup" + (popupClassName ? " ".concat(popupClassName) : ''), style: __assign({ position: 'fixed' }, style) }, props, { ref: ref }),
|
|
4516
4516
|
noHeader ? null :
|
|
4517
4517
|
header ? header : (React__default.default.createElement(PopupHeader, { className: "popup-header", xsStyle: "flex-wrap: wrap-reverse;", smStyle: "flex-wrap: wrap;" },
|
|
4518
4518
|
React__default.default.createElement(Col, { style: { textAlign: 'left', alignSelf: 'center' } },
|
|
@@ -5009,14 +5009,14 @@ var IMAGE_WIDTH_THRESHOLD = 250;
|
|
|
5009
5009
|
var IMAGE_HEIGHT_THRESHOLD = 250;
|
|
5010
5010
|
var INITIAL_THUMBNAILS_COUNT = 11;
|
|
5011
5011
|
var SLICE_COUNT = 2;
|
|
5012
|
-
var ThumbnailVerticalContainer = styled__default.default.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n max-height: 660px;\n height: 660px;\n overflow: auto;\n margin-top: 20px
|
|
5012
|
+
var ThumbnailVerticalContainer = styled__default.default.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n &&& {\n max-height: 660px;\n height: 660px;\n overflow: auto;\n margin-top: 20px;\n padding-right: 5px;\n }\n"], ["\n &&& {\n max-height: 660px;\n height: 660px;\n overflow: auto;\n margin-top: 20px;\n padding-right: 5px;\n }\n"])));
|
|
5013
5013
|
var MainViewing = styled__default.default.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n width: 600px;\n height: 600px;\n background-position: right;\n background-repeat: no-repeat;\n background-size: contain;\n"], ["\n width: 600px;\n height: 600px;\n background-position: right;\n background-repeat: no-repeat;\n background-size: contain;\n"])));
|
|
5014
|
-
var Main = styled__default.default.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n width: 100%;\n height: 478px;\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n margin-bottom: 20px
|
|
5015
|
-
var StyledTooltip = styled__default.default(reactTooltip.Tooltip)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n background: #123952E5
|
|
5014
|
+
var Main = styled__default.default.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n &&& {\n width: 100%;\n height: 478px;\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n margin-bottom: 20px; \n }\n"], ["\n &&& {\n width: 100%;\n height: 478px;\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n margin-bottom: 20px; \n }\n"])));
|
|
5015
|
+
var StyledTooltip = styled__default.default(reactTooltip.Tooltip)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n &&& {\n background: #123952E5;\n width: 250px;\n font-size: large; \n padding: 10px 15px;\n }\n"], ["\n &&& {\n background: #123952E5;\n width: 250px;\n font-size: large; \n padding: 10px 15px;\n }\n"])));
|
|
5016
5016
|
var ThumbnailContainer = styled__default.default.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n max-height: 190px;\n overflow: auto;\n"], ["\n max-height: 190px;\n overflow: auto;\n"])));
|
|
5017
5017
|
var Sku = styled__default.default.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n &&& {\n height: 28px;\n font-family: var(--font-family-regular);\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 28px;\n margin-bottom: 0.5rem;\n color: ", ";\n\n}"], ["\n &&& {\n height: 28px;\n font-family: var(--font-family-regular);\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 28px;\n margin-bottom: 0.5rem;\n color: ", ";\n\n}"])), colors$1.neutrals['90']);
|
|
5018
5018
|
var SelectableThumbnail = styled__default.default.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n &&& {\n display: flex;\n width: 99px;\n height: 99px;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n flex-shrink: 0;\n }\n"], ["\n &&& {\n display: flex;\n width: 99px;\n height: 99px;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n flex-shrink: 0;\n }\n"])));
|
|
5019
|
-
var InnerFrameThumbnail = styled__default.default.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n &&& {\n display: flex;\n padding: 8px;\n flex-direction: column;\n
|
|
5019
|
+
var InnerFrameThumbnail = styled__default.default.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n &&& {\n display: flex;\n padding: 8px;\n flex-direction: column;\n gap: 10px;\n flex: 1 0 0;\n align-self: stretch;\n justify-content: center;\n align-items: center;\n }\n"], ["\n &&& {\n display: flex;\n padding: 8px;\n flex-direction: column;\n gap: 10px;\n flex: 1 0 0;\n align-self: stretch;\n justify-content: center;\n align-items: center;\n }\n"])));
|
|
5020
5020
|
var SizeTag = styled__default.default.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n &&& {\n display: inline-flex;\n padding: 3px 10px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n\n border-radius: 200px;\n background: ", ";\n\n color: ", ";\n text-align: center;\n \n\n font-family: var(--font-family-regular);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; \n }\n"], ["\n &&& {\n display: inline-flex;\n padding: 3px 10px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n\n border-radius: 200px;\n background: ", ";\n\n color: ", ";\n text-align: center;\n \n\n font-family: var(--font-family-regular);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; \n }\n"])), colors$1.teal[80], colors$1.white);
|
|
5021
5021
|
var AutoHideImage = function (_a) {
|
|
5022
5022
|
var src = _a.src, props = __rest(_a, ["src"]);
|