@pingux/astro 2.121.0-alpha.0 → 2.121.0-alpha.1

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',

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

@@ -605,12 +605,14 @@ declare const _default: {
     };
     listViewItem: {
         rightOfData: {
-            flexShrink: number;
             whiteSpace: string;
         };
         iconContainer: {
             ml: string;
         };
+        imageWrapper: {
+            ml: string;
+        };
         styledListItem: {
             bg: string;
             '&.is-selected': {
@@ -628,10 +630,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;
@@ -639,17 +650,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: {
@@ -670,18 +722,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: {
@@ -1155,5 +1215,10 @@ declare const _default: {
             };
         };
     };
+    loader: {
+        withinListView: {
+            color: string;
+        };
+    };
 };
 export default _default;

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

@@ -301,6 +301,11 @@ var overlayPanel = {
     backgroundColor: 'background.base'
   }
 };
+var loader = {
+  withinListView: {
+    color: 'active'
+  }
+};
 var _default = {
   attachment: _Attachment["default"],
   navBar: _navbar.navBar,
@@ -316,6 +321,7 @@ var _default = {
   listViewItem: _listview.listViewItem,
   progressBar: progressBar,
   listView: _listview.listView,
+  lisViewItemChart: _listview.lisViewItemChart,
   dataTable: _dataTable.dataTable,
   codeView: _codeView["default"],
   prompt: _prompt["default"],
@@ -326,6 +332,7 @@ var _default = {
   suggestions: _suggestions["default"],
   suggestion: _suggestion["default"],
   response: _response["default"],
-  skeleton: _Skeleton["default"]
+  skeleton: _Skeleton["default"],
+  loader: loader
 };
 exports["default"] = _default;

package/lib/cjs/types/iconWrapper.d.ts

@@ -9,7 +9,7 @@ export interface IconWrapperProps extends StyleProps {
     size: string;
     className?: string;
     isCircle?: boolean;
-    title: {
+    title?: {
         name: string;
         id?: string;
     };