@mailstep/design-system 0.7.21 → 0.7.22

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.7.21",
3
+ "version": "0.7.22",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
@@ -10,7 +10,7 @@ export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 =
10
10
  export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n height: 100%;\n"])));
11
11
  export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n @media (min-width: 1024px) {\n height: calc(100% - ", "px);\n }\n"], ["\n height: calc(100% - ", "px);\n\n @media (min-width: 1024px) {\n height: calc(100% - ", "px);\n }\n"])), gridFooterHeight, gridFooterHeight);
12
12
  export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", "px;\n flex-wrap: wrap;\n z-index: 3;\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", "px;\n flex-wrap: wrap;\n z-index: 3;\n"])), gridButtonStripHeight);
13
- export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n padding-left: 12px;\n border-top: 1px solid ", ";\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 12px;\n flex-grow: 1;\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: fit-content;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right, .sticky-left {\n background: white;\n z-index: 1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n \n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left, .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n padding-left: 12px;\n border-top: 1px solid ", ";\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 12px;\n flex-grow: 1;\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: fit-content;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right, .sticky-left {\n background: white;\n z-index: 1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n \n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left, .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), gridButtonStripHeight, th('fonts.primary'), gridRowHeight, gridHeadHeight, th('colors.lightGray6'), th('fonts.primary'), function (_a) {
13
+ export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n padding-left: 12px;\n border-top: 1px solid ", ";\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 12px;\n flex-grow: 1;\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right, .sticky-left {\n background: white;\n z-index: 1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n \n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left, .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n padding-left: 12px;\n border-top: 1px solid ", ";\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 12px;\n flex-grow: 1;\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right, .sticky-left {\n background: white;\n z-index: 1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n \n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left, .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), gridButtonStripHeight, th('fonts.primary'), gridRowHeight, gridHeadHeight, th('colors.lightGray6'), th('fonts.primary'), function (_a) {
14
14
  var theme = _a.theme;
15
15
  return theme.colors.white;
16
16
  });
package/ui/index.es.js CHANGED
@@ -43238,13 +43238,12 @@ const KTe = (e = {}, t) => Cxe(e, (r) => {
43238
43238
  background-color: ${({
43239
43239
  theme: e
43240
43240
  }) => e.colors.white};
43241
- width: fit-content;
43241
+ width: auto;
43242
43242
  padding-bottom: 35px;
43243
43243
 
43244
43244
  @media (min-width: 1024px) {
43245
43245
  height: 100%;
43246
43246
  overflow-y: auto;
43247
- width: auto;
43248
43247
  padding-bottom: 0;
43249
43248
  }
43250
43249
  @media print {
package/ui/index.umd.js CHANGED
@@ -3091,13 +3091,12 @@ Avoid returning a new reference inside your input selector, e.g.
3091
3091
 
3092
3092
  & .gridWrapper {
3093
3093
  background-color: ${({theme:e})=>e.colors.white};
3094
- width: fit-content;
3094
+ width: auto;
3095
3095
  padding-bottom: 35px;
3096
3096
 
3097
3097
  @media (min-width: 1024px) {
3098
3098
  height: 100%;
3099
3099
  overflow-y: auto;
3100
- width: auto;
3101
3100
  padding-bottom: 0;
3102
3101
  }
3103
3102
  @media print {