@commonsku/styles 1.17.12 → 1.17.14

package/dist/index.mjs

@@ -4462,7 +4462,7 @@ var PopupContainer = function (_a) {
     return ReactDOM.createPortal(children, ref.current);
 };
 var Popup = React.forwardRef(function (_a, forwardedRef) {
-    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"]);
+    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"]);
     var ref = useFallbackRef(forwardedRef);
     useClickOutside({
         ref: ref,
@@ -4490,7 +4490,7 @@ var Popup = React.forwardRef(function (_a, forwardedRef) {
     }, [closeOnClickOutside, closeOnEsc, onClose]);
     return React.createElement(PopupContainer, null,
         React.createElement(Overlay, { zIndex: overlayZIndex },
-            React.createElement(PopupWindowComponent, __assign({ className: "popup" + (popupClassName ? " ".concat(popupClassName) : '') }, props, { ref: ref }),
+            React.createElement(PopupWindowComponent, __assign({ className: "popup" + (popupClassName ? " ".concat(popupClassName) : ''), style: __assign({ position: 'fixed' }, style) }, props, { ref: ref }),
                 noHeader ? null :
                     header ? header : (React.createElement(PopupHeader, { className: "popup-header", xsStyle: "flex-wrap: wrap-reverse;", smStyle: "flex-wrap: wrap;" },
                         React.createElement(Col, { style: { textAlign: 'left', alignSelf: 'center' } },
@@ -4987,14 +4987,14 @@ var IMAGE_WIDTH_THRESHOLD = 250;
 var IMAGE_HEIGHT_THRESHOLD = 250;
 var INITIAL_THUMBNAILS_COUNT = 11;
 var SLICE_COUNT = 2;
-var ThumbnailVerticalContainer = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n    max-height: 660px;\n    height: 660px;\n    overflow: auto;\n    margin-top: 20px !important;\n    padding-right: 5px !important;\n"], ["\n    max-height: 660px;\n    height: 660px;\n    overflow: auto;\n    margin-top: 20px !important;\n    padding-right: 5px !important;\n"])));
+var ThumbnailVerticalContainer = styled.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"])));
 var MainViewing = styled.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"])));
-var Main = styled.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 !important;\n"], ["\n    width: 100%;\n    height: 478px;\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: contain;\n    margin-bottom: 20px !important;\n"])));
-var StyledTooltip = styled(Tooltip)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n    background: #123952E5 !important;\n    width: 250px !important;\n    font-size: large !important;\n"], ["\n    background: #123952E5 !important;\n    width: 250px !important;\n    font-size: large !important;\n"])));
+var Main = styled.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"])));
+var StyledTooltip = styled(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"])));
 var ThumbnailContainer = styled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n        max-height: 190px;\n        overflow: auto;\n"], ["\n        max-height: 190px;\n        overflow: auto;\n"])));
 var Sku = styled.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']);
 var SelectableThumbnail = styled.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"])));
-var InnerFrameThumbnail = styled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  &&& {\n    display: flex;\n    padding: 8px;\n    flex-direction: column;\n    align-items: flex-start;\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    align-items: flex-start;\n    gap: 10px;\n    flex: 1 0 0;\n    align-self: stretch;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
+var InnerFrameThumbnail = styled.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"])));
 var SizeTag = styled.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);
 var AutoHideImage = function (_a) {
     var src = _a.src, props = __rest(_a, ["src"]);