@pingux/astro 2.120.0 → 2.121.0-alpha.1

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -50,6 +50,13 @@ declare const _default: {
                 red: string;
                 yellow: string;
                 teal: string;
+                blue: string;
+                indigo: string;
+                lightBlue: string;
+                lightPink: string;
+                lightGreen: string;
+                lightYellow: string;
+                lightIndigo: string;
             };
             icon: {
                 orange: string;
@@ -60,6 +67,13 @@ declare const _default: {
                 red: string;
                 yellow: string;
                 teal: string;
+                blue: string;
+                indigo: string;
+                lightBlue: string;
+                lightPink: string;
+                lightGreen: string;
+                lightYellow: string;
+                lightIndigo: string;
             };
         };
         neutral: {
@@ -953,6 +967,9 @@ declare const _default: {
                 borderColor: string;
                 size: string;
                 p: string;
+                '&.is-hovered': {
+                    backgroundColor: string;
+                };
                 cursor: string;
                 transition: string;
                 outline: string;
@@ -965,12 +982,6 @@ declare const _default: {
                     outlineColor: string;
                     outlineOffset: string;
                 };
-                '&.is-hovered': {
-                    backgroundColor: string;
-                    path: {
-                        fill: string;
-                    };
-                };
                 '&.is-pressed': {
                     backgroundColor: string;
                     borderColor: string;
@@ -1005,6 +1016,30 @@ declare const _default: {
                     backgroundColor: string;
                 };
             };
+            searchClearButton: {
+                border: string;
+                '&.is-hovered': {
+                    bg: string;
+                };
+                '&.is-pressed': {
+                    bg: string;
+                };
+                position: string;
+                right: number;
+                cursor: string;
+                transition: string;
+                outline: string;
+                borderRadius: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+            };
         };
         modalCloseButton: {
             position: string;
@@ -1317,14 +1352,26 @@ declare const _default: {
             lineHeight: string;
         };
         listViewItemText: {
+            fontFamily: string;
             color: string;
             fontWeight: number;
+            mb: string;
+            fontSize: string;
         };
-        small: {
+        listViewItemSubtext: {
             fontSize: string;
+            lineHeight: string;
+            color: string;
+        };
+        itemTitle: {
+            fontWeight: number;
             color: string;
+        };
+        small: {
+            fontSize: string;
             fontFamily: string;
             lineHeight: string;
+            color: string;
         };
         response: {
             color: string;
@@ -2537,12 +2584,14 @@ declare const _default: {
         };
         listViewItem: {
             rightOfData: {
-                flexShrink: number;
                 whiteSpace: string;
             };
             iconContainer: {
                 ml: string;
             };
+            imageWrapper: {
+                ml: string;
+            };
             styledListItem: {
                 bg: string;
                 '&.is-selected': {
@@ -2560,10 +2609,19 @@ declare const _default: {
                     boxShadow: string;
                     bg: string;
                 };
+                '&.is-first-item': {
+                    borderTopLeftRadius: string;
+                    borderTopRightRadius: string;
+                };
+                '&.is-last-item': {
+                    borderBottomLeftRadius: string;
+                    borderBottomRightRadius: string;
+                    '&.has-separator': {
+                        border: string;
+                    };
+                };
             };
             styledContainer: {
-                py: string;
-                px: string;
                 bg: string;
                 '&.is-hovered': {
                     bg: string;
@@ -2571,17 +2629,58 @@ declare const _default: {
                 };
             };
             expandableStyledListItem: {
-                pr: string;
-                pl: number;
+                px: string;
+                bg: string;
+                '&.is-first-item': {
+                    borderTopLeftRadius: string;
+                    borderTopRightRadius: string;
+                };
+                '&.is-last-item': {
+                    borderBottomLeftRadius: string;
+                    borderBottomRightRadius: string;
+                    '&.is-hovered, &.is-expanded': {
+                        borderBottomLeftRadius: string;
+                        borderBottomRightRadius: string;
+                    };
+                };
+                '&.is-hovered': {
+                    bg: string;
+                };
+                '&.is-selected': {
+                    bg: string;
+                };
+                '&.is-focused': {
+                    boxShadow: string;
+                    bg: string;
+                };
             };
             expandableItemBody: {
                 px: string;
+                outline: string;
+                '&.is-last-item-body': {
+                    borderBottomLeftRadius: string;
+                    borderBottomRightRadius: string;
+                };
+                '&.is-focused': {
+                    boxShadow: string;
+                };
             };
             expandableRow: {
                 '&.has-separator': {
                     borderBottom: string;
                     borderBottomColor: string;
                 };
+                '&.has-separator.is-last-row': {
+                    border: string;
+                };
+            };
+            editIcon: {
+                width: string;
+                height: string;
+            };
+            menuIcon: {
+                width: string;
+                height: string;
             };
         };
         progressBar: {
@@ -2602,18 +2701,26 @@ declare const _default: {
                 borderRadius: string;
                 border: string;
                 borderColor: string;
-                '& > div > div': {
-                    '& > div:first-of-type': {
-                        '& > div > div': {
-                            borderRadius: string;
-                        };
-                    };
-                    '& > div:last-of-type': {
-                        '& > div > div': {
-                            borderRadius: string;
-                        };
-                    };
-                };
+            };
+        };
+        lisViewItemChart: {
+            title: {
+                color: string;
+            };
+            count: {
+                color: string;
+            };
+            countLabel: {
+                color: string;
+            };
+            chartLabel: {
+                color: string;
+            };
+            trend: {
+                color: string;
+            };
+            chartButton: {
+                color: string;
             };
         };
         dataTable: {
@@ -3087,6 +3194,11 @@ declare const _default: {
                 };
             };
         };
+        loader: {
+            withinListView: {
+                color: string;
+            };
+        };
     };
     images: {
         avatar: {};

package/lib/cjs/styles/themes/next-gen/variants/button.d.ts

@@ -720,6 +720,9 @@ declare const buttons: {
             borderColor: string;
             size: string;
             p: string;
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
             cursor: string;
             transition: string;
             outline: string;
@@ -732,12 +735,6 @@ declare const buttons: {
                 outlineColor: string;
                 outlineOffset: string;
             };
-            '&.is-hovered': {
-                backgroundColor: string;
-                path: {
-                    fill: string;
-                };
-            };
             '&.is-pressed': {
                 backgroundColor: string;
                 borderColor: string;
@@ -772,6 +769,30 @@ declare const buttons: {
                 backgroundColor: string;
             };
         };
+        searchClearButton: {
+            border: string;
+            '&.is-hovered': {
+                bg: string;
+            };
+            '&.is-pressed': {
+                bg: string;
+            };
+            position: string;
+            right: number;
+            cursor: string;
+            transition: string;
+            outline: string;
+            borderRadius: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+        };
     };
     modalCloseButton: {
         position: string;

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -307,11 +307,14 @@ var iconButtons = {
   }),
   copyButton: _codeView.copyButton,
   deleteAttachment: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    backgroundColor: 'white',
+    backgroundColor: 'light',
     border: '1px solid',
     borderColor: 'gray-300',
     size: '24px',
-    p: '4px'
+    p: '4px',
+    '&.is-hovered': {
+      backgroundColor: '#dde5ec'
+    }
   }),
   inverted: {
     cursor: 'pointer',
@@ -338,7 +341,18 @@ var iconButtons = {
     '&.is-disabled': {
       backgroundColor: 'gray-300'
     }
-  }
+  },
+  searchClearButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    border: 'none',
+    '&.is-hovered': {
+      bg: 'background.hover'
+    },
+    '&.is-pressed': {
+      bg: 'background.hover'
+    },
+    position: 'absolute',
+    right: 10
+  })
 };
 var buttons = {
   neutral: neutral,

package/lib/cjs/styles/themes/next-gen/variants/listview.d.ts

@@ -1,11 +1,15 @@
+export declare const focusBoxShadow = "0 0 0 3px inset #1a73e8";
+export declare const borderRadius = "16px";
 export declare const listViewItem: {
     rightOfData: {
-        flexShrink: number;
         whiteSpace: string;
     };
     iconContainer: {
         ml: string;
     };
+    imageWrapper: {
+        ml: string;
+    };
     styledListItem: {
         bg: string;
         '&.is-selected': {
@@ -23,10 +27,19 @@ export declare const listViewItem: {
             boxShadow: string;
             bg: string;
         };
+        '&.is-first-item': {
+            borderTopLeftRadius: string;
+            borderTopRightRadius: string;
+        };
+        '&.is-last-item': {
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
+            '&.has-separator': {
+                border: string;
+            };
+        };
     };
     styledContainer: {
-        py: string;
-        px: string;
         bg: string;
         '&.is-hovered': {
             bg: string;
@@ -34,17 +47,58 @@ export declare const listViewItem: {
         };
     };
     expandableStyledListItem: {
-        pr: string;
-        pl: number;
+        px: string;
+        bg: string;
+        '&.is-first-item': {
+            borderTopLeftRadius: string;
+            borderTopRightRadius: string;
+        };
+        '&.is-last-item': {
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
+            '&.is-hovered, &.is-expanded': {
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
+            };
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&.is-selected': {
+            bg: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            bg: string;
+        };
     };
     expandableItemBody: {
         px: string;
+        outline: string;
+        '&.is-last-item-body': {
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+        };
     };
     expandableRow: {
         '&.has-separator': {
             borderBottom: string;
             borderBottomColor: string;
         };
+        '&.has-separator.is-last-row': {
+            border: string;
+        };
+    };
+    editIcon: {
+        width: string;
+        height: string;
+    };
+    menuIcon: {
+        width: string;
+        height: string;
     };
 };
 export declare const listView: {
@@ -52,17 +106,25 @@ export declare const listView: {
         borderRadius: string;
         border: string;
         borderColor: string;
-        '& > div > div': {
-            '& > div:first-of-type': {
-                '& > div > div': {
-                    borderRadius: string;
-                };
-            };
-            '& > div:last-of-type': {
-                '& > div > div': {
-                    borderRadius: string;
-                };
-            };
-        };
+    };
+};
+export declare const lisViewItemChart: {
+    title: {
+        color: string;
+    };
+    count: {
+        color: string;
+    };
+    countLabel: {
+        color: string;
+    };
+    chartLabel: {
+        color: string;
+    };
+    trend: {
+        color: string;
+    };
+    chartButton: {
+        color: string;
     };
 };

package/lib/cjs/styles/themes/next-gen/variants/listview.js

@@ -4,14 +4,20 @@ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/obje
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.listViewItem = exports.listView = void 0;
+exports.listViewItem = exports.listView = exports.lisViewItemChart = exports.focusBoxShadow = exports.borderRadius = void 0;
+var focusBoxShadow = '0 0 0 3px inset #1a73e8';
+exports.focusBoxShadow = focusBoxShadow;
+var borderRadius = '16px';
+exports.borderRadius = borderRadius;
 var listViewItem = {
   rightOfData: {
-    flexShrink: 4,
     whiteSpace: 'nowrap'
   },
   iconContainer: {
-    ml: '0px'
+    ml: '0'
+  },
+  imageWrapper: {
+    ml: 'md'
   },
   styledListItem: {
     bg: 'white',
@@ -27,13 +33,22 @@ var listViewItem = {
       bg: 'gray-100'
     },
     '&.is-focused': {
-      boxShadow: '0 0 0 3px inset #1a73e8',
+      boxShadow: focusBoxShadow,
       bg: 'gray-100'
+    },
+    '&.is-first-item': {
+      borderTopLeftRadius: borderRadius,
+      borderTopRightRadius: borderRadius
+    },
+    '&.is-last-item': {
+      borderBottomLeftRadius: borderRadius,
+      borderBottomRightRadius: borderRadius,
+      '&.has-separator': {
+        border: 'none'
+      }
     }
   },
   styledContainer: {
-    py: 'md',
-    px: 'lg',
     bg: 'transparent',
     '&.is-hovered': {
       bg: 'transparent',
@@ -41,37 +56,87 @@ var listViewItem = {
     }
   },
   expandableStyledListItem: {
-    pr: '1.25rem',
-    pl: 0
+    px: 'lg',
+    bg: 'background.base',
+    '&.is-first-item': {
+      borderTopLeftRadius: borderRadius,
+      borderTopRightRadius: borderRadius
+    },
+    '&.is-last-item': {
+      borderBottomLeftRadius: borderRadius,
+      borderBottomRightRadius: borderRadius,
+      '&.is-hovered, &.is-expanded': {
+        borderBottomLeftRadius: '0',
+        borderBottomRightRadius: '0'
+      }
+    },
+    '&.is-hovered': {
+      bg: 'gray-100'
+    },
+    '&.is-selected': {
+      bg: 'gray-100'
+    },
+    '&.is-focused': {
+      boxShadow: focusBoxShadow,
+      bg: 'gray-100'
+    }
   },
   expandableItemBody: {
-    px: '1.5rem'
+    px: 'lg',
+    outline: 'none',
+    '&.is-last-item-body': {
+      borderBottomLeftRadius: borderRadius,
+      borderBottomRightRadius: borderRadius
+    },
+    '&.is-focused': {
+      boxShadow: focusBoxShadow
+    }
   },
   expandableRow: {
     '&.has-separator': {
       borderBottom: '1px solid',
       borderBottomColor: 'border.base'
+    },
+    '&.has-separator.is-last-row': {
+      border: 'none'
     }
+  },
+  editIcon: {
+    width: '1.5rem !important',
+    height: '1.5rem !important'
+  },
+  menuIcon: {
+    width: '1.5rem !important',
+    height: '1.5rem !important'
   }
 };
 exports.listViewItem = listViewItem;
 var listView = {
   container: {
-    borderRadius: '16px',
+    borderRadius: borderRadius,
     border: '1px solid',
-    borderColor: '#e7eef4',
-    '& > div > div': {
-      '& > div:first-of-type': {
-        '& > div > div': {
-          borderRadius: '16px 16px 0 0'
-        }
-      },
-      '& > div:last-of-type': {
-        '& > div > div': {
-          borderRadius: ' 0 0 16px 16px'
-        }
-      }
-    }
+    borderColor: '#e7eef4'
+  }
+};
+exports.listView = listView;
+var lisViewItemChart = {
+  title: {
+    color: 'gray-900'
+  },
+  count: {
+    color: 'gray-900'
+  },
+  countLabel: {
+    color: 'gray-900'
+  },
+  chartLabel: {
+    color: 'gray-900'
+  },
+  trend: {
+    color: 'gray-900'
+  },
+  chartButton: {
+    color: 'gray-900'
   }
 };
-exports.listView = listView;
+exports.lisViewItemChart = lisViewItemChart;

package/lib/cjs/styles/themes/next-gen/variants/text.d.ts

@@ -68,14 +68,26 @@ export declare const text: {
         lineHeight: string;
     };
     listViewItemText: {
+        fontFamily: string;
         color: string;
         fontWeight: number;
+        mb: string;
+        fontSize: string;
     };
-    small: {
+    listViewItemSubtext: {
         fontSize: string;
+        lineHeight: string;
         color: string;
+    };
+    itemTitle: {
+        fontWeight: number;
+        color: string;
+    };
+    small: {
+        fontSize: string;
         fontFamily: string;
         lineHeight: string;
+        color: string;
     };
     response: {
         color: string;

package/lib/cjs/styles/themes/next-gen/variants/text.js

@@ -82,14 +82,26 @@ var text = _objectSpread(_objectSpread({
     lineHeight: 'body'
   },
   listViewItemText: {
-    color: 'text.secondary',
-    fontWeight: 2
+    fontFamily: 'standard',
+    color: 'text.primary',
+    fontWeight: 2,
+    mb: 'xs',
+    fontSize: 'md'
+  },
+  listViewItemSubtext: {
+    fontSize: 'md',
+    lineHeight: 'body',
+    color: 'gray-700'
+  },
+  itemTitle: {
+    fontWeight: 2,
+    color: 'text.primary'
   },
   small: {
     fontSize: 'sm',
-    color: 'text.primary',
     fontFamily: 'standard',
-    lineHeight: 'md'
+    lineHeight: 'md',
+    color: 'text.primary'
   },
   response: {
     color: 'text.primary',