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

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

@@ -0,0 +1,58 @@
+export declare const listViewItem: {
+    styledListItem: {
+        '&.has-separator': {
+            borderBottom: string;
+            borderBottomColor: string;
+        };
+        bg: string;
+        '&.is-selected': {
+            bg: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            bg: string;
+        };
+    };
+    expandableStyledListItem: {
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&.is-selected': {
+            bg: string;
+        };
+        '&.is-focused': {
+            bg: string;
+        };
+    };
+    expandIcon: {
+        color: string;
+    };
+};
+export declare const listView: {
+    container: {
+        borderColor: 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/themeOverrides/nextGenDarkMode/variants/{lsitview.js → listview.js}

@@ -4,7 +4,7 @@ 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 = void 0;
 var listViewItem = {
   styledListItem: {
     '&.has-separator': {
@@ -22,6 +22,20 @@ var listViewItem = {
       boxShadow: '0 0 0 3px inset #1a73e8',
       bg: 'background.hover'
     }
+  },
+  expandableStyledListItem: {
+    '&.is-hovered': {
+      bg: 'background.hover'
+    },
+    '&.is-selected': {
+      bg: 'background.hover'
+    },
+    '&.is-focused': {
+      bg: 'background.hover'
+    }
+  },
+  expandIcon: {
+    color: 'gray-400'
   }
 };
 exports.listViewItem = listViewItem;
@@ -30,4 +44,25 @@ var listView = {
     borderColor: 'border.base'
   }
 };
-exports.listView = listView;
+exports.listView = listView;
+var lisViewItemChart = {
+  title: {
+    color: 'gray-100'
+  },
+  count: {
+    color: 'gray-100'
+  },
+  countLabel: {
+    color: 'gray-100'
+  },
+  chartLabel: {
+    color: 'gray-100'
+  },
+  trend: {
+    color: 'gray-100'
+  },
+  chartButton: {
+    color: 'gray-100'
+  }
+};
+exports.lisViewItemChart = lisViewItemChart;

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

@@ -0,0 +1,15 @@
+export declare const text: {
+    listViewItemText: {
+        color: string;
+    };
+    listViewItemTextSelected: {
+        color: string;
+    };
+    listViewItemSubtext: {
+        color: string;
+    };
+    itemTitle: {
+        fontWeight: number;
+        color: string;
+    };
+};

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.text = void 0;
+var text = {
+  listViewItemText: {
+    color: 'text.secondary'
+  },
+  listViewItemTextSelected: {
+    color: 'gray-100'
+  },
+  listViewItemSubtext: {
+    color: 'gray-400'
+  },
+  itemTitle: {
+    fontWeight: 2,
+    color: 'text.secondary'
+  }
+};
+exports.text = text;

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

@@ -144,12 +144,46 @@ declare const _default: {
                 bg: string;
             };
         };
+        expandableStyledListItem: {
+            '&.is-hovered': {
+                bg: string;
+            };
+            '&.is-selected': {
+                bg: string;
+            };
+            '&.is-focused': {
+                bg: string;
+            };
+        };
+        expandIcon: {
+            color: string;
+        };
     };
     listView: {
         container: {
             borderColor: string;
         };
     };
+    lisViewItemChart: {
+        title: {
+            color: string;
+        };
+        count: {
+            color: string;
+        };
+        countLabel: {
+            color: string;
+        };
+        chartLabel: {
+            color: string;
+        };
+        trend: {
+            color: string;
+        };
+        chartButton: {
+            color: string;
+        };
+    };
     navBar: {
         container: {
             width: string;

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _avatar = require("./avatar");
 var _iconBadge = _interopRequireDefault(require("./iconBadge"));
-var _lsitview = require("./lsitview");
+var _listview = require("./listview");
 var _menu = require("./menu");
 var _message = require("./message");
 var _navbar = require("./navbar");
@@ -74,8 +74,9 @@ var _default = {
   message: _message.message,
   menu: _menu.menu,
   menuItem: _menu.menuItem,
-  listViewItem: _lsitview.listViewItem,
-  listView: _lsitview.listView,
+  listViewItem: _listview.listViewItem,
+  listView: _listview.listView,
+  lisViewItemChart: _listview.lisViewItemChart,
   navBar: _navbar.navBar,
   listBox: listBox,
   modal: modal,

package/lib/cjs/styles/themes/astro/customProperties/icons.d.ts

@@ -4,5 +4,6 @@ declare const _default: {
     MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
     MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
     pingLogoHorizontalSmall: import("react").JSX.Element;
+    listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
 };
 export default _default;

package/lib/cjs/styles/themes/astro/customProperties/icons.js

@@ -13,11 +13,12 @@ var _CheckCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCi
 var _InformationIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationIcon"));
 var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
 var _MenuUpIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuUpIcon"));
+var _MoreVertIcon = _interopRequireDefault(require("@pingux/mdi-react/MoreVertIcon"));
 var _logos = require("../../../../utils/devUtils/constants/logos");
 var _statuses = _interopRequireDefault(require("../../../../utils/devUtils/constants/statuses"));
 var _MenuDown$MenuUp$stat;
 var _default = (_MenuDown$MenuUp$stat = {
   MenuDown: _MenuDownIcon["default"],
   MenuUp: _MenuUpIcon["default"]
-}, (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].DEFAULT, _InformationIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].ERROR, _AlertCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].SUCCESS, _CheckCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].WARNING, _AlertIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmallWhite), _MenuDown$MenuUp$stat);
+}, (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].DEFAULT, _InformationIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].ERROR, _AlertCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].SUCCESS, _CheckCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].WARNING, _AlertIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmallWhite), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "listViewMenu", _MoreVertIcon["default"]), _MenuDown$MenuUp$stat);
 exports["default"] = _default;

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -5,6 +5,7 @@ export declare const astroThemeValues: {
         MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
         MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
         pingLogoHorizontalSmall: import("react").JSX.Element;
+        listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
     };
     styles: {
         navButtonEstHeight: number;

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

@@ -62,6 +62,8 @@ declare const colors: {
             red: string;
             yellow: string;
             teal: string;
+            blue: string;
+            indigo: string;
             lightBlue: string;
             lightPink: string;
             lightGreen: string;
@@ -77,6 +79,8 @@ declare const colors: {
             red: string;
             yellow: string;
             teal: string;
+            blue: string;
+            indigo: string;
             lightBlue: string;
             lightPink: string;
             lightGreen: string;

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

@@ -8,6 +8,8 @@ export declare const iconWrapper: {
         red: string;
         yellow: string;
         teal: string;
+        blue: string;
+        indigo: string;
         lightBlue: string;
         lightPink: string;
         lightGreen: string;
@@ -23,6 +25,8 @@ export declare const iconWrapper: {
         red: string;
         yellow: string;
         teal: string;
+        blue: string;
+        indigo: string;
         lightBlue: string;
         lightPink: string;
         lightGreen: string;

package/lib/cjs/styles/themes/next-gen/colors/iconWrapper.js

@@ -16,6 +16,8 @@ var iconWrapper = {
     red: _colorTokens.nextGenColors['red-100'],
     yellow: _colorTokens.nextGenColors['yellow-100'],
     teal: _colorTokens.nextGenColors['teal-100'],
+    blue: _colorTokens.nextGenColors['blue-100'],
+    indigo: _colorTokens.nextGenColors['indigo-100'],
     lightBlue: _colorTokens.nextGenColors['blue-100'],
     lightPink: _colorTokens.nextGenColors['pink-100'],
     lightGreen: _colorTokens.nextGenColors['green-100'],
@@ -31,6 +33,8 @@ var iconWrapper = {
     red: _colorTokens.nextGenColors['red-800'],
     yellow: _colorTokens.nextGenColors['yellow-800'],
     teal: _colorTokens.nextGenColors['teal-800'],
+    blue: _colorTokens.nextGenColors['blue-600'],
+    indigo: _colorTokens.nextGenColors['indigo-700'],
     lightBlue: _colorTokens.nextGenColors['blue-500'],
     lightPink: _colorTokens.nextGenColors['pink-600'],
     lightGreen: _colorTokens.nextGenColors['green-800'],

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

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'Pagination'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'ListViewItem', 'Pagination'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],

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

@@ -4,5 +4,6 @@ declare const _default: {
     MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
     MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
     pingLogoHorizontalSmall: import("react").JSX.Element;
+    listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
 };
 export default _default;

package/lib/cjs/styles/themes/next-gen/customProperties/icons.js

@@ -12,6 +12,7 @@ var _AlertOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertO
 var _CheckCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleOutlineIcon"));
 var _ChevronDownIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronDownIcon"));
 var _ChevronUpIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronUpIcon"));
+var _DotsHorizontalIcon = _interopRequireDefault(require("@pingux/mdi-react/DotsHorizontalIcon"));
 var _InformationOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationOutlineIcon"));
 var _logos = require("../../../../utils/devUtils/constants/logos");
 var _statuses = _interopRequireDefault(require("../../../../utils/devUtils/constants/statuses"));
@@ -19,5 +20,5 @@ var _MenuDown$MenuUp$stat;
 var _default = (_MenuDown$MenuUp$stat = {
   MenuDown: _ChevronDownIcon["default"],
   MenuUp: _ChevronUpIcon["default"]
-}, (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].DEFAULT, _InformationOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].ERROR, _AlertCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].SUCCESS, _CheckCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].WARNING, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmall), _MenuDown$MenuUp$stat);
+}, (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].DEFAULT, _InformationOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].ERROR, _AlertCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].SUCCESS, _CheckCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].WARNING, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmall), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "listViewMenu", _DotsHorizontalIcon["default"]), _MenuDown$MenuUp$stat);
 exports["default"] = _default;

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

@@ -8,6 +8,7 @@ export declare const nextGenThemeValues: {
         MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
         MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
         pingLogoHorizontalSmall: import("react").JSX.Element;
+        listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
     };
     tShirtSizes: {
         xxs: string;

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

@@ -50,6 +50,8 @@ declare const _default: {
                 red: string;
                 yellow: string;
                 teal: string;
+                blue: string;
+                indigo: string;
                 lightBlue: string;
                 lightPink: string;
                 lightGreen: string;
@@ -65,6 +67,8 @@ declare const _default: {
                 red: string;
                 yellow: string;
                 teal: string;
+                blue: string;
+                indigo: string;
                 lightBlue: string;
                 lightPink: string;
                 lightGreen: string;
@@ -1012,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;
@@ -1324,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;
@@ -2544,12 +2584,14 @@ declare const _default: {
         };
         listViewItem: {
             rightOfData: {
-                flexShrink: number;
                 whiteSpace: string;
             };
             iconContainer: {
                 ml: string;
             };
+            imageWrapper: {
+                ml: string;
+            };
             styledListItem: {
                 bg: string;
                 '&.is-selected': {
@@ -2567,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;
@@ -2578,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: {
@@ -2609,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: {
@@ -3094,6 +3194,11 @@ declare const _default: {
                 };
             };
         };
+        loader: {
+            withinListView: {
+                color: string;
+            };
+        };
     };
     images: {
         avatar: {};

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

@@ -769,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

@@ -341,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,