@commonsku/styles 1.17.12 → 1.17.13

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.mjs CHANGED
@@ -4497,7 +4497,7 @@ var Popup = React.forwardRef(function (_a, forwardedRef) {
4497
4497
  React.createElement("span", { className: "title" }, title)),
4498
4498
  React.createElement(Col, { style: { textAlign: 'right', alignSelf: 'center' } }, noCloseButton ? null :
4499
4499
  controls || React.createElement(Button, { onClick: onClose }, "Close")))),
4500
- React.createElement("div", { className: "popup-content" + (contentClassName ? " ".concat(contentClassName) : '') },
4500
+ React.createElement("div", { className: "popup-content" + (contentClassName ? " ".concat(contentClassName) : ''), style: { position: 'relative' } },
4501
4501
  children,
4502
4502
  " "))));
4503
4503
  });
@@ -4987,14 +4987,14 @@ var IMAGE_WIDTH_THRESHOLD = 250;
4987
4987
  var IMAGE_HEIGHT_THRESHOLD = 250;
4988
4988
  var INITIAL_THUMBNAILS_COUNT = 11;
4989
4989
  var SLICE_COUNT = 2;
4990
- 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"])));
4990
+ 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"])));
4991
4991
  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"])));
4992
- 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"])));
4993
- 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"])));
4992
+ 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"])));
4993
+ 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"])));
4994
4994
  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"])));
4995
4995
  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']);
4996
4996
  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"])));
4997
- 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"])));
4997
+ 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"])));
4998
4998
  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);
4999
4999
  var AutoHideImage = function (_a) {
5000
5000
  var src = _a.src, props = __rest(_a, ["src"]);