@commonsku/styles 1.17.12 → 1.17.14
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
|
@@ -4493,7 +4493,7 @@ var PopupContainer = function (_a) {
|
|
|
4493
4493
|
return ReactDOM__default.default.createPortal(children, ref.current);
|
|
4494
4494
|
};
|
|
4495
4495
|
var Popup = React__default.default.forwardRef(function (_a, forwardedRef) {
|
|
4496
|
-
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"]);
|
|
4496
|
+
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"]);
|
|
4497
4497
|
var ref = useFallbackRef(forwardedRef);
|
|
4498
4498
|
useClickOutside({
|
|
4499
4499
|
ref: ref,
|
|
@@ -4521,7 +4521,7 @@ var Popup = React__default.default.forwardRef(function (_a, forwardedRef) {
|
|
|
4521
4521
|
}, [closeOnClickOutside, closeOnEsc, onClose]);
|
|
4522
4522
|
return React__default.default.createElement(PopupContainer, null,
|
|
4523
4523
|
React__default.default.createElement(Overlay, { zIndex: overlayZIndex },
|
|
4524
|
-
React__default.default.createElement(PopupWindowComponent, __assign({ className: "popup" + (popupClassName ? " ".concat(popupClassName) : '') }, props, { ref: ref }),
|
|
4524
|
+
React__default.default.createElement(PopupWindowComponent, __assign({ className: "popup" + (popupClassName ? " ".concat(popupClassName) : ''), style: __assign({ position: 'fixed' }, style) }, props, { ref: ref }),
|
|
4525
4525
|
noHeader ? null :
|
|
4526
4526
|
header ? header : (React__default.default.createElement(PopupHeader, { className: "popup-header", xsStyle: "flex-wrap: wrap-reverse;", smStyle: "flex-wrap: wrap;" },
|
|
4527
4527
|
React__default.default.createElement(Col, { style: { textAlign: 'left', alignSelf: 'center' } },
|
|
@@ -5018,14 +5018,14 @@ var IMAGE_WIDTH_THRESHOLD = 250;
|
|
|
5018
5018
|
var IMAGE_HEIGHT_THRESHOLD = 250;
|
|
5019
5019
|
var INITIAL_THUMBNAILS_COUNT = 11;
|
|
5020
5020
|
var SLICE_COUNT = 2;
|
|
5021
|
-
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
|
|
5021
|
+
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"])));
|
|
5022
5022
|
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"])));
|
|
5023
|
-
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
|
|
5024
|
-
var StyledTooltip = styled__default.default(reactTooltip.Tooltip)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n background: #123952E5
|
|
5023
|
+
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"])));
|
|
5024
|
+
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"])));
|
|
5025
5025
|
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"])));
|
|
5026
5026
|
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']);
|
|
5027
5027
|
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"])));
|
|
5028
|
-
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
|
|
5028
|
+
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"])));
|
|
5029
5029
|
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);
|
|
5030
5030
|
var AutoHideImage = function (_a) {
|
|
5031
5031
|
var src = _a.src, props = __rest(_a, ["src"]);
|