@pingux/astro 2.154.0-alpha.2 → 2.154.0-alpha.3

package/lib/cjs/components/ListView/ListView.js

@@ -154,7 +154,11 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "listView.container"
   }, containerProps), loadingState === _loadingStates["default"].LOADING_MORE_PREPEND && (0, _react2.jsx)(_Loader["default"], {
     variant: "loader.withinListView",
-    "aria-label": "Loading more..."
+    "aria-label": "Loading more...",
+    sx: {
+      paddingTop: 'md',
+      paddingBottom: 'md'
+    }
   }), (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, items ? gridProps : {
     role: 'presentation'
   }, {
@@ -196,7 +200,11 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (type === collectionTypes.LOADER) {
       return (0, _react2.jsx)(_Loader["default"], {
         variant: "loader.withinListView",
-        "aria-label": "Loading more..."
+        "aria-label": "Loading more...",
+        sx: {
+          paddingTop: 'md',
+          paddingBottom: 'md'
+        }
       });
     }
     return null;

package/lib/cjs/components/ListView/ListView.stories.js

@@ -121,10 +121,7 @@ var ExpandableChildren = function ExpandableChildren() {
     "aria-label": "Search",
     placeholder: "Search"
   }), (0, _react2.jsx)(_2.Text, {
-    sx: {
-      mt: 'md',
-      fontWeight: '1'
-    }
+    variant: "listViewItemExpandedText"
   }, "Lorem ipsum dolor sit amet consectetur. Viverra nulla nec velit sollicitudin sed nisi mi gravida. Maecenas vestibulum pretium dictum dictum tempus. Sit et rutrum hendrerit facilisi turpis tellus elementum. Egestas consectetur in ac id. Sit aliquam et ut pellentesque in at blandit sed. Sapien morbi cras eleifend lectus."));
 };
 var ExampleContent = function ExampleContent(contentProps) {
@@ -135,7 +132,7 @@ var ExampleContent = function ExampleContent(contentProps) {
     sx: {
       alignItems: 'center'
     },
-    gap: "md"
+    gap: "lg"
   }, (0, _react2.jsx)(_2.IconWrapper, {
     icon: icon,
     size: "sm",
@@ -145,7 +142,10 @@ var ExampleContent = function ExampleContent(contentProps) {
     isCircle: true,
     color: "cyan"
   }), (0, _react2.jsx)(_2.Text, {
-    variant: "itemTitle"
+    variant: "listViewItemText",
+    sx: {
+      my: 'auto'
+    }
   }, text));
 };
 var Controls = function Controls() {

package/lib/cjs/components/Loader/Loader.styles.d.ts

@@ -52,6 +52,7 @@ declare const _default: {
     };
     withinListView: {
         color: string;
+        height: string;
         padding: string;
         alignItems: string;
         justifyContent: string;

package/lib/cjs/components/Loader/Loader.styles.js

@@ -39,6 +39,7 @@ var withinListbox = {
 };
 var withinListView = {
   color: 'active',
+  height: '100%',
   padding: 'md',
   alignItems: 'center',
   justifyContent: 'center'

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -73,6 +73,12 @@ export declare const text: {
         wordWrap: wordWrapText;
         wordBreak: wordBreak;
     };
+    listViewItemExpandedText: {
+        mt: string;
+        fontWeight: number;
+        fontSize: string;
+        color: string;
+    };
     listViewItemSubtext: {
         textOverflow: string;
         overflow: string;

package/lib/cjs/components/Text/Text.styles.js

@@ -147,6 +147,12 @@ var copyRightText = {
 var attachmentTitle = _objectSpread(_objectSpread(_objectSpread({}, base), textEllipsis), {}, {
   fontWeight: 2
 });
+var listViewItemExpandedText = {
+  mt: 'md',
+  fontWeight: 1,
+  fontSize: 'md',
+  color: 'text.primary'
+};
 var text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
@@ -222,6 +228,7 @@ var text = _objectSpread(_objectSpread(_objectSpread({
     fontWeight: 0,
     color: 'text.secondary'
   }, textEllipsis),
+  listViewItemExpandedText: listViewItemExpandedText,
   listViewItemSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
   listViewItemText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
   modalTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/listview.d.ts

@@ -29,6 +29,12 @@ export declare const listViewItem: {
     };
     expandIcon: {
         color: string;
+        fill: string;
+    };
+    expandableRow: {
+        '&.has-separator': {
+            borderBottomColor: string;
+        };
     };
 };
 export declare const listView: {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/listview.js

@@ -5,11 +5,12 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.listViewItem = exports.listView = exports.lisViewItemChart = void 0;
+var _colors = require("../colors");
 var listViewItem = {
   styledListItem: {
     '&.has-separator': {
       borderBottom: '1px solid',
-      borderBottomColor: 'border.base'
+      borderBottomColor: 'border.attachment'
     },
     bg: 'backgroundBase',
     '&.is-selected': {
@@ -35,13 +36,19 @@ var listViewItem = {
     }
   },
   expandIcon: {
-    color: 'gray-400'
+    color: 'gray-100',
+    fill: "".concat(_colors.colors.secondary, " !important")
+  },
+  expandableRow: {
+    '&.has-separator': {
+      borderBottomColor: 'border.attachment'
+    }
   }
 };
 exports.listViewItem = listViewItem;
 var listView = {
   container: {
-    borderColor: 'border.base'
+    borderColor: 'border.attachment'
   }
 };
 exports.listView = listView;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/text.d.ts

@@ -1,4 +1,7 @@
 export declare const text: {
+    listViewItemExpandedText: {
+        color: string;
+    };
     listViewItemText: {
         color: string;
     };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/text.js

@@ -6,6 +6,9 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.text = void 0;
 var text = {
+  listViewItemExpandedText: {
+    color: 'gray-100'
+  },
   listViewItemText: {
     color: 'text.secondary'
   },

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -196,6 +196,12 @@ declare const _default: {
         };
         expandIcon: {
             color: string;
+            fill: string;
+        };
+        expandableRow: {
+            '&.has-separator': {
+                borderBottomColor: string;
+            };
         };
     };
     listView: {

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

@@ -1912,6 +1912,7 @@ declare const _default: {
             xl: string;
         };
         xs: string;
+        tiny: string;
         sm: string;
         md: string;
         lg: string;
@@ -2085,7 +2086,11 @@ declare const _default: {
             color: string;
             fontWeight: number;
             lineHeight: string;
-            mb: string;
+        };
+        listViewItemExpandedText: {
+            mt: string;
+            fontWeight: number;
+            lineHeight: string;
         };
         listViewItemSubtext: {
             fontSize: string;
@@ -4382,6 +4387,9 @@ declare const _default: {
             iconContainer: {
                 ml: string;
             };
+            iconWrapper: {
+                ml: string;
+            };
             imageWrapper: {
                 ml: string;
             };
@@ -4423,6 +4431,7 @@ declare const _default: {
             };
             expandableStyledListItem: {
                 px: string;
+                py: number;
                 bg: string;
                 '&.is-first-item': {
                     borderTopLeftRadius: string;
@@ -4460,26 +4469,41 @@ declare const _default: {
             };
             expandableRow: {
                 '&.has-separator': {
-                    borderBottom: string;
                     borderBottomColor: string;
                 };
                 '&.has-separator.is-last-row': {
                     border: string;
                 };
             };
+            editIcon: {
+                width: string;
+                height: string;
+            };
+            menuIcon: {
+                width: string;
+                height: string;
+            };
+            loaderContainer: {
+                pt: string;
+                pb: string;
+            };
         };
         lisViewItemChart: {
             title: {
                 color: string;
+                fontSize: string;
             };
             count: {
                 color: string;
+                fontSize: string;
             };
             countLabel: {
                 color: string;
+                fontSize: string;
             };
             chartLabel: {
                 color: string;
+                fontSize: string;
             };
             trend: {
                 color: string;

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

@@ -6,6 +6,7 @@ export declare const fontSizes: {
         xl: string;
     };
     xs: string;
+    tiny: string;
     sm: string;
     md: string;
     lg: string;

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

@@ -18,6 +18,7 @@ var fontSizes = {
     'xl': "calc(".concat(_sizes["default"].avatar.xl, " * .4)")
   },
   'xs': '11px',
+  'tiny': '12px',
   'sm': '0.875rem',
   'md': "".concat(fontSizeBase * 1, "rem"),
   'lg': "".concat(fontSizeBase * 1.25, "rem"),

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

@@ -7,6 +7,9 @@ export declare const listViewItem: {
     iconContainer: {
         ml: string;
     };
+    iconWrapper: {
+        ml: string;
+    };
     imageWrapper: {
         ml: string;
     };
@@ -48,6 +51,7 @@ export declare const listViewItem: {
     };
     expandableStyledListItem: {
         px: string;
+        py: number;
         bg: string;
         '&.is-first-item': {
             borderTopLeftRadius: string;
@@ -85,13 +89,24 @@ export declare const listViewItem: {
     };
     expandableRow: {
         '&.has-separator': {
-            borderBottom: string;
             borderBottomColor: string;
         };
         '&.has-separator.is-last-row': {
             border: string;
         };
     };
+    editIcon: {
+        width: string;
+        height: string;
+    };
+    menuIcon: {
+        width: string;
+        height: string;
+    };
+    loaderContainer: {
+        pt: string;
+        pb: string;
+    };
 };
 export declare const listView: {
     container: {
@@ -103,15 +118,19 @@ export declare const listView: {
 export declare const lisViewItemChart: {
     title: {
         color: string;
+        fontSize: string;
     };
     count: {
         color: string;
+        fontSize: string;
     };
     countLabel: {
         color: string;
+        fontSize: string;
     };
     chartLabel: {
         color: string;
+        fontSize: string;
     };
     trend: {
         color: string;

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

@@ -16,6 +16,9 @@ var listViewItem = {
   iconContainer: {
     ml: '0'
   },
+  iconWrapper: {
+    ml: 'lg'
+  },
   imageWrapper: {
     ml: 'md'
   },
@@ -57,6 +60,7 @@ var listViewItem = {
   },
   expandableStyledListItem: {
     px: 'lg',
+    py: 0,
     bg: 'backgroundBase',
     '&.is-first-item': {
       borderTopLeftRadius: borderRadius,
@@ -94,12 +98,23 @@ var listViewItem = {
   },
   expandableRow: {
     '&.has-separator': {
-      borderBottom: '1px solid',
-      borderBottomColor: 'border.base'
+      borderBottomColor: 'gray-200'
     },
     '&.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'
+  },
+  loaderContainer: {
+    pt: 'md',
+    pb: 'md'
   }
 };
 exports.listViewItem = listViewItem;
@@ -113,19 +128,23 @@ var listView = {
 exports.listView = listView;
 var lisViewItemChart = {
   title: {
-    color: 'gray-900'
+    color: 'gray-600',
+    fontSize: 'tiny'
   },
   count: {
-    color: 'gray-900'
+    color: 'gray-600',
+    fontSize: 'xl'
   },
   countLabel: {
-    color: 'gray-900'
+    color: 'gray-600',
+    fontSize: 'tiny'
   },
   chartLabel: {
-    color: 'gray-900'
+    color: 'gray-600',
+    fontSize: 'tiny'
   },
   trend: {
-    color: 'gray-900'
+    color: 'gray-600'
   },
   chartButton: {
     color: 'gray-900'

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

@@ -151,7 +151,11 @@ export declare const text: {
         color: string;
         fontWeight: number;
         lineHeight: string;
-        mb: string;
+    };
+    listViewItemExpandedText: {
+        mt: string;
+        fontWeight: number;
+        lineHeight: string;
     };
     listViewItemSubtext: {
         fontSize: string;

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

@@ -141,8 +141,12 @@ var text = _objectSpread(_objectSpread({
     fontFamily: 'standard',
     color: 'text.primary',
     fontWeight: 2,
-    lineHeight: 'body',
-    mb: 'xs'
+    lineHeight: 'sm'
+  },
+  listViewItemExpandedText: {
+    mt: 'md',
+    fontWeight: 0,
+    lineHeight: 'body'
   },
   listViewItemSubtext: {
     fontSize: 'md',

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

@@ -810,6 +810,9 @@ declare const _default: {
         iconContainer: {
             ml: string;
         };
+        iconWrapper: {
+            ml: string;
+        };
         imageWrapper: {
             ml: string;
         };
@@ -851,6 +854,7 @@ declare const _default: {
         };
         expandableStyledListItem: {
             px: string;
+            py: number;
             bg: string;
             '&.is-first-item': {
                 borderTopLeftRadius: string;
@@ -888,26 +892,41 @@ declare const _default: {
         };
         expandableRow: {
             '&.has-separator': {
-                borderBottom: string;
                 borderBottomColor: string;
             };
             '&.has-separator.is-last-row': {
                 border: string;
             };
         };
+        editIcon: {
+            width: string;
+            height: string;
+        };
+        menuIcon: {
+            width: string;
+            height: string;
+        };
+        loaderContainer: {
+            pt: string;
+            pb: string;
+        };
     };
     lisViewItemChart: {
         title: {
             color: string;
+            fontSize: string;
         };
         count: {
             color: string;
+            fontSize: string;
         };
         countLabel: {
             color: string;
+            fontSize: string;
         };
         chartLabel: {
             color: string;
+            fontSize: string;
         };
         trend: {
             color: string;

package/lib/components/ListView/ListView.js

@@ -141,7 +141,11 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "listView.container"
   }, containerProps), loadingState === loadingStates.LOADING_MORE_PREPEND && ___EmotionJSX(Loader, {
     variant: "loader.withinListView",
-    "aria-label": "Loading more..."
+    "aria-label": "Loading more...",
+    sx: {
+      paddingTop: 'md',
+      paddingBottom: 'md'
+    }
   }), ___EmotionJSX(Virtualizer, _extends({}, items ? gridProps : {
     role: 'presentation'
   }, {
@@ -183,7 +187,11 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     if (type === collectionTypes.LOADER) {
       return ___EmotionJSX(Loader, {
         variant: "loader.withinListView",
-        "aria-label": "Loading more..."
+        "aria-label": "Loading more...",
+        sx: {
+          paddingTop: 'md',
+          paddingBottom: 'md'
+        }
       });
     }
     return null;

package/lib/components/ListView/ListView.stories.js

@@ -108,10 +108,7 @@ var ExpandableChildren = function ExpandableChildren() {
     "aria-label": "Search",
     placeholder: "Search"
   }), ___EmotionJSX(Text, {
-    sx: {
-      mt: 'md',
-      fontWeight: '1'
-    }
+    variant: "listViewItemExpandedText"
   }, "Lorem ipsum dolor sit amet consectetur. Viverra nulla nec velit sollicitudin sed nisi mi gravida. Maecenas vestibulum pretium dictum dictum tempus. Sit et rutrum hendrerit facilisi turpis tellus elementum. Egestas consectetur in ac id. Sit aliquam et ut pellentesque in at blandit sed. Sapien morbi cras eleifend lectus."));
 };
 var ExampleContent = function ExampleContent(contentProps) {
@@ -122,7 +119,7 @@ var ExampleContent = function ExampleContent(contentProps) {
     sx: {
       alignItems: 'center'
     },
-    gap: "md"
+    gap: "lg"
   }, ___EmotionJSX(IconWrapper, {
     icon: icon,
     size: "sm",
@@ -132,7 +129,10 @@ var ExampleContent = function ExampleContent(contentProps) {
     isCircle: true,
     color: "cyan"
   }), ___EmotionJSX(Text, {
-    variant: "itemTitle"
+    variant: "listViewItemText",
+    sx: {
+      my: 'auto'
+    }
   }, text));
 };
 var Controls = function Controls() {

package/lib/components/Loader/Loader.styles.js

@@ -32,6 +32,7 @@ var withinListbox = {
 };
 var withinListView = {
   color: 'active',
+  height: '100%',
   padding: 'md',
   alignItems: 'center',
   justifyContent: 'center'

package/lib/components/Text/Text.styles.js

@@ -138,6 +138,12 @@ var copyRightText = {
 var attachmentTitle = _objectSpread(_objectSpread(_objectSpread({}, base), textEllipsis), {}, {
   fontWeight: 2
 });
+var listViewItemExpandedText = {
+  mt: 'md',
+  fontWeight: 1,
+  fontSize: 'md',
+  color: 'text.primary'
+};
 export var text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
@@ -213,6 +219,7 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
     fontWeight: 0,
     color: 'text.secondary'
   }, textEllipsis),
+  listViewItemExpandedText: listViewItemExpandedText,
   listViewItemSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
   listViewItemText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
   modalTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {

package/lib/styles/themeOverrides/nextGenDarkMode/variants/listview.js

@@ -1,8 +1,9 @@
+import { colors } from '../colors';
 export var listViewItem = {
   styledListItem: {
     '&.has-separator': {
       borderBottom: '1px solid',
-      borderBottomColor: 'border.base'
+      borderBottomColor: 'border.attachment'
     },
     bg: 'backgroundBase',
     '&.is-selected': {
@@ -28,12 +29,18 @@ export var listViewItem = {
     }
   },
   expandIcon: {
-    color: 'gray-400'
+    color: 'gray-100',
+    fill: "".concat(colors.secondary, " !important")
+  },
+  expandableRow: {
+    '&.has-separator': {
+      borderBottomColor: 'border.attachment'
+    }
   }
 };
 export var listView = {
   container: {
-    borderColor: 'border.base'
+    borderColor: 'border.attachment'
   }
 };
 export var lisViewItemChart = {

package/lib/styles/themeOverrides/nextGenDarkMode/variants/text.js

@@ -1,4 +1,7 @@
 export var text = {
+  listViewItemExpandedText: {
+    color: 'gray-100'
+  },
   listViewItemText: {
     color: 'text.secondary'
   },

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

@@ -10,6 +10,7 @@ export var fontSizes = {
     'xl': "calc(".concat(sizes.avatar.xl, " * .4)")
   },
   'xs': '11px',
+  'tiny': '12px',
   'sm': '0.875rem',
   'md': "".concat(fontSizeBase * 1, "rem"),
   'lg': "".concat(fontSizeBase * 1.25, "rem"),

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

@@ -7,6 +7,9 @@ export var listViewItem = {
   iconContainer: {
     ml: '0'
   },
+  iconWrapper: {
+    ml: 'lg'
+  },
   imageWrapper: {
     ml: 'md'
   },
@@ -48,6 +51,7 @@ export var listViewItem = {
   },
   expandableStyledListItem: {
     px: 'lg',
+    py: 0,
     bg: 'backgroundBase',
     '&.is-first-item': {
       borderTopLeftRadius: borderRadius,
@@ -85,12 +89,23 @@ export var listViewItem = {
   },
   expandableRow: {
     '&.has-separator': {
-      borderBottom: '1px solid',
-      borderBottomColor: 'border.base'
+      borderBottomColor: 'gray-200'
     },
     '&.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'
+  },
+  loaderContainer: {
+    pt: 'md',
+    pb: 'md'
   }
 };
 export var listView = {
@@ -102,19 +117,23 @@ export var listView = {
 };
 export var lisViewItemChart = {
   title: {
-    color: 'gray-900'
+    color: 'gray-600',
+    fontSize: 'tiny'
   },
   count: {
-    color: 'gray-900'
+    color: 'gray-600',
+    fontSize: 'xl'
   },
   countLabel: {
-    color: 'gray-900'
+    color: 'gray-600',
+    fontSize: 'tiny'
   },
   chartLabel: {
-    color: 'gray-900'
+    color: 'gray-600',
+    fontSize: 'tiny'
   },
   trend: {
-    color: 'gray-900'
+    color: 'gray-600'
   },
   chartButton: {
     color: 'gray-900'

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

@@ -134,8 +134,12 @@ export var text = _objectSpread(_objectSpread({
     fontFamily: 'standard',
     color: 'text.primary',
     fontWeight: 2,
-    lineHeight: 'body',
-    mb: 'xs'
+    lineHeight: 'sm'
+  },
+  listViewItemExpandedText: {
+    mt: 'md',
+    fontWeight: 0,
+    lineHeight: 'body'
   },
   listViewItemSubtext: {
     fontSize: 'md',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.154.0-alpha.2",
+  "version": "2.154.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",