@pingux/astro 2.91.0-alpha.1 → 2.92.0-alpha.0

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

@@ -215,6 +215,7 @@ declare const _default: {
             boxShadow: string;
         };
         sectionButton: {
+            borderRadius: string;
             '&.is-hovered': {
                 backgroundColor: string;
             };
@@ -228,7 +229,10 @@ declare const _default: {
             };
         };
         itemButton: {
+            py: string;
+            paddingLeft: string;
             color: string;
+            borderRadius: string;
             '&.is-focused': {
                 outline: string;
                 outlineColor: string;
@@ -243,6 +247,7 @@ declare const _default: {
             };
             '&.is-selected': {
                 bg: string;
+                boxShadow: string;
                 color: string;
             };
         };
@@ -251,11 +256,13 @@ declare const _default: {
         };
         headerText: {
             color: string;
+            ml: string;
             '.is-selected &': {
                 color: string;
             };
         };
         headerNav: {
+            borderRadius: string;
             color: string;
             '&.is-hovered': {
                 backgroundColor: string;
@@ -270,17 +277,22 @@ declare const _default: {
             px: string;
             py: string;
             color: string;
+            borderRadius: string;
             '&.is-hovered': {
                 backgroundColor: string;
             };
             '> div > svg': {
                 fill: string;
             };
+            '&.is-pressed': {
+                backgroundColor: string;
+            };
             '&.is-selected': {
                 '> div > svg': {
                     fill: string;
                 };
                 backgroundColor: string;
+                boxShadow: string;
             };
             '&.is-focused': {
                 outline: string;
@@ -292,10 +304,13 @@ declare const _default: {
             };
         };
         itemHeaderContainer: {
+            boxShadow: string;
+            maxWidth: string;
             px: string;
             py: string;
             '&.is-selected': {
                 backgroundColor: string;
+                boxShadow: string;
             };
             backgroundColor: string;
             '> svg': {
@@ -305,13 +320,18 @@ declare const _default: {
                 fill: string;
             };
         };
+        navBarItemBody: {
+            mb: string;
+        };
     };
     fieldHelperText: {
         title: {
-            color: string;
             fontSize: string;
             pt: string;
             mt: string;
+            '&.is-default': {
+                color: string;
+            };
             '&.is-error': {
                 color: string;
             };
@@ -466,6 +486,15 @@ declare const _default: {
                 m: string;
             };
         };
+        navBarSeparator: {
+            my: string;
+            mx: string;
+            maxWidth: string;
+            backgroundColor: string;
+        };
+        navBarSubtitleSeparator: {
+            backgroundColor: string;
+        };
     };
     menuItem: {
         item: {
@@ -558,9 +587,6 @@ declare const _default: {
                 boxShadow: string;
                 bg: string;
             };
-            '&.is-pressed': {
-                bg: string;
-            };
         };
         styledContainer: {
             py: string;
@@ -764,10 +790,48 @@ declare const _default: {
         p: string;
         border: string;
         borderColor: string;
-        item: {
-            '&.is-pressed': {
-                bg: string;
+    };
+    iconWrapper: {
+        sm: {
+            '&.is-circle': {
+                borderRadius: string;
+            };
+            borderRadius: string;
+            minHeight: string;
+            minWidth: string;
+            height: string;
+            width: string;
+            p: string;
+        };
+        md: {
+            '&.is-circle': {
+                borderRadius: string;
+            };
+            borderRadius: string;
+            minHeight: string;
+            minWidth: string;
+            height: string;
+            width: string;
+            p: string;
+        };
+        lg: {
+            '&.is-circle': {
+                borderRadius: string;
             };
+            borderRadius: string;
+            minHeight: string;
+            minWidth: string;
+            height: string;
+            width: string;
+            p: string;
+        };
+    };
+    overlayPanel: {
+        container: {
+            backgroundColor: string;
+        };
+        innerPanel: {
+            backgroundColor: string;
         };
     };
 };

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

@@ -15,15 +15,24 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.badges = exports.badgeDeleteButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
+var _avatar = require("./avatar");
 var _button = _interopRequireDefault(require("./button"));
+var _iconWrapper = _interopRequireDefault(require("./iconWrapper"));
+var _listview = require("./listview");
+var _menu = require("./menu");
+var _messages = require("./messages");
+var _navbar = require("./navbar");
+var _tabs = require("./tabs");
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var fieldHelperText = {
   title: {
-    color: 'text.secondary',
     fontSize: 'sm',
     pt: '0px !important',
     mt: '.25rem',
+    '&.is-default': {
+      color: 'text.fieldHelper'
+    },
     '&.is-error': {
       color: 'critical.dark'
     },
@@ -35,46 +44,6 @@ var fieldHelperText = {
     }
   }
 };
-var message = {
-  item: {
-    maxWidth: 400,
-    pointerEvents: 'all',
-    mb: 'md',
-    p: '1.25rem',
-    wordBreak: 'break-word',
-    alignItems: 'center',
-    backgroundColor: 'blue-100',
-    borderLeftWidth: '5px',
-    borderLeftStyle: 'solid',
-    borderLeftColor: 'teal-500',
-    color: 'gray-700',
-    fontSize: '15px !important',
-    borderRadius: 4,
-    '&.is-success': {
-      bg: 'green-100',
-      borderLeftColor: 'green-500',
-      color: 'gray-700'
-    },
-    '&.is-warning': {
-      bg: 'warning.light',
-      borderLeftColor: 'yellow-500',
-      color: 'gray-700'
-    },
-    '&.is-error, > .is-error': {
-      bg: 'red-100',
-      color: 'gray-700'
-    },
-    '&.is-error, > button > svg': {
-      color: 'gray-700 !important',
-      path: {
-        fill: 'gray-700'
-      }
-    },
-    '&.is-error': {
-      borderLeftColor: 'red-500'
-    }
-  }
-};
 var badgeFont = {
   fontSize: '11.25px',
   fontWeight: 2
@@ -210,31 +179,6 @@ var modal = {
     justifyContent: 'start'
   }
 };
-var tab = {
-  borderRadius: '2px',
-  pt: '.5rem',
-  '& > span': {
-    px: '1rem',
-    fontSize: '.9375rem'
-  },
-  '&.is-focused': {
-    boxShadow: 'none',
-    outline: '3px solid',
-    outlineColor: 'active',
-    outlineOffset: '1px',
-    '& > span': {
-      outline: 'none'
-    }
-  },
-  '& > div': {
-    borderBottom: '3px solid',
-    borderBottomColor: 'primary',
-    ml: '0px'
-  }
-};
-var menuTab = {
-  ml: '0px !important'
-};
 var listBox = {
   container: {
     px: 'sm',
@@ -262,79 +206,22 @@ var listBox = {
     }
   }
 };
-var menuItem = {
-  item: {
-    bg: 'transparent',
-    padding: '10px 10px',
-    outline: 'none',
-    color: 'text.primary',
-    cursor: 'pointer',
-    '&.is-focused, &.is-selected, &.is-pressed': {
-      bg: 'gray-100',
-      color: 'text.primary',
-      '> *': {
-        color: 'text.primary'
-      }
-    },
-    '&.is-pressed': {
-      color: 'text.primary',
-      bg: 'lightblue'
-    }
-  },
-  separator: {
-    my: 'sm'
-  }
-};
 var separator = {
   base: {
-    bg: 'gray-300',
+    bg: 'border.base',
     '&.is-vertical': {
       m: '0'
     }
-  }
-};
-var avatar = {
-  backgroundColor: 'lightcyan',
-  color: 'darkcyan',
-  cursor: 'pointer',
-  '&.is-orange': {
-    backgroundColor: 'lightorange',
-    color: 'darkorange'
-  },
-  '&.is-green': {
-    backgroundColor: 'lightgreen',
-    color: 'darkgreen'
-  },
-  '&.is-purple': {
-    backgroundColor: 'lightpurple',
-    color: 'darkpurple'
-  },
-  '&.is-pink': {
-    backgroundColor: 'lightpink',
-    color: 'darkpink'
   },
-  '&.is-red': {
-    backgroundColor: 'lightred',
-    color: 'darkred'
+  navBarSeparator: {
+    my: '.5rem',
+    mx: '0px',
+    maxWidth: '236px',
+    backgroundColor: 'border.separator'
   },
-  '&.is-yellow': {
-    backgroundColor: 'lightyellow',
-    color: 'darkyellow'
-  },
-  '&.is-cyan': {
-    backgroundColor: 'lightcyan',
-    color: 'darkcyan'
-  },
-  '&.is-teal': {
-    backgroundColor: 'lightteal',
-    color: 'darkteal'
-  },
-  display: 'flex',
-  borderRadius: '50%',
-  textAlign: 'center',
-  alignItems: 'center',
-  justifyContent: 'center',
-  fontFamily: 'standard'
+  navBarSubtitleSeparator: {
+    backgroundColor: 'border.separator'
+  }
 };
 var progressBarContainer = {
   backgroundColor: 'gray-200',
@@ -348,182 +235,15 @@ var progressBar = {
     backgroundColor: 'active'
   })
 };
-var listViewItem = {
-  rightOfData: {
-    flexShrink: 4,
-    whiteSpace: 'nowrap'
-  },
-  iconContainer: {
-    ml: '0px'
-  },
-  styledListItem: {
-    bg: 'white',
-    '&.is-selected': {
-      bg: 'gray-100'
-    },
-    borderBottom: 'none',
-    '&.has-separator': {
-      borderBottom: '1px solid',
-      borderBottomColor: 'gray-200'
-    },
-    '&.is-hovered': {
-      bg: 'gray-100'
-    },
-    '&.is-focused': {
-      boxShadow: '0 0 0 3px inset #1a73e8',
-      bg: 'gray-100'
-    },
-    '&.is-pressed': {
-      bg: 'gray-200'
-    }
-  },
-  styledContainer: {
-    py: 'md',
-    px: 'lg',
-    bg: 'transparent',
-    '&.is-hovered': {
-      bg: 'transparent',
-      cursor: 'pointer'
-    }
-  },
-  expandableStyledListItem: {
-    pr: '1.25rem',
-    pl: 0
-  },
-  expandableItemBody: {
-    px: '1.5rem'
-  },
-  expandableRow: {
-    '&.has-separator': {
-      borderBottom: '1px solid',
-      borderBottomColor: 'gray-300'
-    }
-  }
-};
-var navBarSelected = {
-  backgroundColor: 'lightblue'
-};
-var navBarFocus = {
-  outline: '2px solid',
-  outlineColor: 'active',
-  outlineOffset: '-2px'
-};
-var navBar = {
-  container: {
-    width: '252px',
-    p: 'sm',
-    backgroundColor: 'white',
-    boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
-  },
-  sectionButton: {
-    '&.is-hovered': {
-      backgroundColor: 'light'
-    },
-    '&.is-pressed': {
-      backgroundColor: 'light'
-    },
-    '&.is-focused': _objectSpread({}, navBarFocus)
-  },
-  itemButton: {
-    color: 'text.primary',
-    '&.is-focused': _objectSpread({}, navBarFocus),
-    '&.is-hovered': {
-      backgroundColor: 'light'
-    },
-    '&.is-pressed': {
-      backgroundColor: 'light',
-      color: 'text.primary'
-    },
-    '&.is-selected': {
-      bg: 'lightblue',
-      color: 'darkblue'
-    }
-  },
-  subtitle: {
-    color: 'text.primary'
-  },
-  headerText: {
-    color: 'text.primary',
-    '.is-selected &': {
-      color: 'darkblue'
-    }
-  },
-  headerNav: {
-    color: 'text.primary',
-    '&.is-hovered': {
-      backgroundColor: 'light'
-    },
-    '&.is-focused': {
-      boxShadow: 'none',
-      WebkitBoxShadow: 'none',
-      MozBoxShadow: 'none'
-    }
-  },
-  item: {
-    px: '1rem',
-    py: '.75rem',
-    color: 'text.primary',
-    '&.is-hovered': {
-      backgroundColor: 'light'
-    },
-    '> div > svg': {
-      fill: 'text.primary'
-    },
-    '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
-      '> div > svg': {
-        fill: 'darkblue'
-      }
-    }),
-    '&.is-focused': {
-      outline: '2px solid',
-      outlineColor: 'active',
-      outlineOffset: '-2px',
-      boxShadow: 'none',
-      WebkitBoxShadow: 'none',
-      MozBoxShadow: 'none'
-    }
-  },
-  itemHeaderContainer: {
-    px: '1rem',
-    py: '.75rem',
-    '&.is-selected': _objectSpread({}, navBarSelected),
-    backgroundColor: 'transparent',
-    '> svg': {
-      fill: 'text.primary'
-    },
-    '> div > svg': {
-      fill: 'text.primary'
-    }
-  }
-};
-var listView = {
-  container: {
-    borderRadius: '16px',
-    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'
-        }
-      }
-    }
-  }
-};
 var dataTable = {
   container: {
     border: '1px solid',
-    borderColor: 'gray-300',
+    borderColor: 'border.base',
     borderRadius: '16px'
   },
   tableRow: {
     borderTop: '1px solid',
-    borderTopColor: 'gray-300',
+    borderTopColor: 'border.base',
     borderBottom: '0',
     pl: 'lg'
   },
@@ -542,53 +262,33 @@ var dataTable = {
     fontSize: 'md'
   }
 };
-
-/* const codeView = {
-  wrapper: {
-    backgroundColor: 'gray-900',
-    borderRadius: '4px',
-    '> button >svg': {
-      color: 'gray-300',
-      path: {
-        fill: 'gray-300',
-      },
-    },
-    '> pre': {
-      p: 'md',
-    },
+var overlayPanel = {
+  container: {
+    backgroundColor: 'background.base'
   },
-}; */
-
-var tabs = {
-  gap: '0px'
-};
-var menu = {
-  p: 'sm',
-  border: '1px solid',
-  borderColor: 'gray-300',
-  item: {
-    '&.is-pressed': {
-      bg: 'blue-100'
-    }
+  innerPanel: {
+    backgroundColor: 'background.base'
   }
 };
 var _default = {
-  navBar: navBar,
+  navBar: _navbar.navBar,
   fieldHelperText: fieldHelperText,
-  message: message,
+  message: _messages.message,
   modal: modal,
-  tab: tab,
-  menuTab: menuTab,
+  tab: _tabs.tab,
+  menuTab: _tabs.menuTab,
   listBox: listBox,
   separator: separator,
-  menuItem: menuItem,
-  avatar: avatar,
-  listViewItem: listViewItem,
+  menuItem: _menu.menuItem,
+  avatar: _avatar.avatar,
+  listViewItem: _listview.listViewItem,
   progressBar: progressBar,
-  listView: listView,
+  listView: _listview.listView,
   dataTable: dataTable,
   codeView: _codeView["default"],
-  tabs: tabs,
-  menu: menu
+  tabs: _tabs.tabs,
+  menu: _menu.menu,
+  iconWrapper: _iconWrapper["default"],
+  overlayPanel: overlayPanel
 };
 exports["default"] = _default;

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

@@ -0,0 +1,15 @@
+import { BoxProps } from './box';
+import { IconProps, IconTypeExtended } from './icon';
+export interface IconWrapperProps {
+    icon?: IconTypeExtended;
+    iconProps?: IconProps;
+    wrapperProps?: BoxProps;
+    color?: string;
+    size: string;
+    className?: string;
+    isCircle?: boolean;
+    title: {
+        name: string;
+        id?: string;
+    };
+}

package/lib/cjs/types/iconWrapper.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/utils/devUtils/constants/logos.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const pingLogoHorizontalSmall: React.JSX.Element;
+export declare const pingLogoHorizontalSmallWhite: React.JSX.Element;