@pingux/astro 2.136.1-alpha.3 → 2.137.0-alpha.0

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

@@ -18,75 +18,99 @@ var _button = _interopRequireDefault(require("./button"));
 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 badgeFont = {
-  fontSize: '11.25px',
+  fontSize: '12px',
   fontWeight: 2
 };
-var baseBadge = {
+var badgeIconStyle = {
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'inherit'
+  }),
+  '& button': {
+    alignSelf: 'center',
+    p: '0',
+    bg: 'transparent',
+    '&.is-hovered': {
+      bg: 'transparent',
+      '& svg': {
+        path: {
+          fill: 'inherit'
+        }
+      }
+    }
+  },
+  '& svg': {
+    path: {
+      fill: 'inherit'
+    }
+  }
+};
+var baseBadge = _objectSpread({
   alignItems: 'center',
   justifyContent: 'center',
   py: '.25em',
   px: '.4em',
   borderRadius: '4px',
-  fontSize: '11.25px',
+  maxHeight: '18px',
+  minHeight: '18px',
+  fontSize: '12px',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
   width: 'fit-content',
-  '& span': _objectSpread({}, badgeFont)
-};
+  color: 'text.primary'
+}, badgeIconStyle);
 var primary = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: '#eaf1fb !important',
-  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: '#1967d2'
-  })
+  backgroundColor: '#EAF2FD !important',
+  color: 'blue-600'
 });
 var secondary = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#f6f8fa !important',
-  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'gray-900'
-  })
+  color: 'gray-900'
 });
 var success = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: '#d3eddf !important',
-  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'success.dark'
-  })
+  backgroundColor: '#D3EDDF !important',
+  color: 'success.dark'
 });
 var danger = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: '#f8d8d5 !important',
-  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'red-700'
-  })
+  backgroundColor: '#F8D8D5 !important',
+  color: 'red-700'
 });
 var warning = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: '#fff1da !important',
-  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'yellow-700'
-  })
+  backgroundColor: '#FFF1DA !important',
+  color: 'yellow-800'
 });
 var dark = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: 'black !important',
-  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'white'
-  })
+  color: 'white'
+});
+var info = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  backgroundColor: '#EAF2FD !important',
+  color: 'darkblue'
 });
 var selectedItemBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#eaf2fd !important',
   paddingRight: '0px !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    fontSize: '14px',
     color: 'text.primary',
     fontWeight: 400
   })
 });
-var readOnlyBadge = {
-  '& span': {
-    fontSize: '14px'
-  }
-};
-var info = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  backgroundColor: '#eaf2fd !important',
+var readOnlyBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  border: 'none',
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'text.primary',
+    fontWeight: 2
+  })
+});
+var readOnlyFieldBadge = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'darkblue'
+    color: 'white'
+  })
+});
+var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
+  bg: '#f6f8fa !important',
+  fontWeight: 2,
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'text.primary'
   })
 });
 var badgeDeleteButton = _objectSpread(_objectSpread({}, _button["default"].iconButtons.base), {}, {
@@ -106,23 +130,52 @@ var warningStatusBadge = _objectSpread(_objectSpread({}, warning), dataTableBadg
 var criticalStatusBadge = _objectSpread(_objectSpread({}, danger), dataTableBadge);
 var healthyStatusBadge = _objectSpread(_objectSpread({}, success), dataTableBadge);
 var secondaryStatusBadge = _objectSpread(_objectSpread({}, secondary), dataTableBadge);
+var countBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  backgroundColor: '#455469 !important',
+  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+    color: 'white'
+  })
+});
+var countNeutral = _objectSpread({}, secondary);
+var invertedRemovableBadge = _objectSpread({}, dark);
+var removableBadge = _objectSpread(_objectSpread({}, secondary), {}, {
+  border: 'none'
+});
 var badges = {
   baseBadge: _objectSpread({}, baseBadge),
   "default": _objectSpread({}, baseBadge),
   primary: primary,
+  countBadge: countBadge,
+  countNeutral: countNeutral,
   secondary: secondary,
   success: success,
   danger: danger,
   warning: warning,
   dark: dark,
+  info: info,
   selectedItemBadge: selectedItemBadge,
   readOnlyBadge: readOnlyBadge,
+  readOnlyFieldBadge: readOnlyFieldBadge,
   activeStatusBadge: activeStatusBadge,
   warningStatusBadge: warningStatusBadge,
   criticalStatusBadge: criticalStatusBadge,
   healthyStatusBadge: healthyStatusBadge,
   secondaryStatusBadge: secondaryStatusBadge,
   badgeDeleteButton: badgeDeleteButton,
-  info: info
+  itemBadgeWithSlot: itemBadgeWithSlot,
+  removableBadge: removableBadge,
+  invertedRemovableBadge: invertedRemovableBadge,
+  errorCalloutBadge: {
+    backgroundColor: 'white !important'
+  },
+  infoCalloutBadge: {
+    backgroundColor: 'white !important'
+  },
+  successCalloutBadge: {
+    backgroundColor: 'white !important'
+  },
+  warningCalloutBadge: {
+    backgroundColor: 'white !important'
+  }
 };
 exports.badges = badges;

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

@@ -1131,6 +1131,66 @@ declare const buttons: {
                 bg: string;
             };
         };
+        badgeDeleteButton: {
+            transition: string;
+            height: number;
+            p: number;
+            width: number;
+            border: string;
+            '&.is-focused': {
+                backgroundColor: string;
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-hovered': {
+                bg: string;
+            };
+            cursor: string;
+            outline: string;
+            borderRadius: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+        };
+        invertedBadgeDeleteButton: {
+            transition: string;
+            height: number;
+            p: number;
+            width: number;
+            border: string;
+            '&.is-focused': {
+                backgroundColor: string;
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-hovered': {
+                bg: string;
+            };
+            cursor: string;
+            outline: string;
+            borderRadius: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+        };
         clearSelectionButton: {
             top: string;
             right: string;

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

@@ -385,6 +385,25 @@ var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButto
   alignItems: 'center',
   justifyContent: 'center'
 });
+var badgeDeleteButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
+  height: 14,
+  p: 0,
+  width: 14,
+  border: 'none',
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    backgroundColor: 'gray-100'
+  }),
+  '&.is-pressed': {
+    backgroundColor: 'gray-100',
+    borderColor: 'gray-200',
+    path: {
+      fill: 'dark'
+    }
+  },
+  '&.is-hovered': {
+    bg: 'transparent'
+  }
+}, transitions);
 var searchClearButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   width: '20px',
   height: '20px',
@@ -522,6 +541,8 @@ var iconButtons = {
       bg: 'gray-900'
     }
   },
+  badgeDeleteButton: badgeDeleteButton,
+  invertedBadgeDeleteButton: _objectSpread({}, badgeDeleteButton),
   clearSelectionButton: _objectSpread(_objectSpread({}, searchClearButton), {}, {
     top: '15px',
     right: '1rem',

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

@@ -1,211 +1,3 @@
-export declare const badgeDeleteButton: {
-    borderRadius: string;
-    cursor: string;
-    height: number;
-    p: number;
-    width: number;
-    transition: string;
-    outline: string;
-    border: string;
-    borderColor: string;
-    path: {
-        fill: string;
-    };
-    '&.is-focused': {
-        outline: string;
-        outlineColor: string;
-        outlineOffset: string;
-    };
-    '&.is-hovered': {
-        backgroundColor: string;
-        path: {
-            fill: string;
-        };
-    };
-    '&.is-pressed': {
-        backgroundColor: string;
-        borderColor: string;
-        path: {
-            fill: string;
-        };
-    };
-};
-export declare const badges: {
-    primary: {
-        backgroundColor: string;
-        '& span': {
-            color: string;
-            fontSize: string;
-            fontWeight: number;
-        };
-        alignItems: string;
-        justifyContent: string;
-        py: string;
-        px: string;
-        borderRadius: string;
-        fontSize: string;
-        alignSelf: string;
-        display: string;
-        width: string;
-    };
-    baseBadge: {
-        backgroundColor: string;
-        '& span': {
-            color: string;
-            fontSize: string;
-            fontWeight: number;
-        };
-        alignItems: string;
-        justifyContent: string;
-        py: string;
-        px: string;
-        borderRadius: string;
-        fontSize: string;
-        alignSelf: string;
-        display: string;
-        width: string;
-    };
-    secondary: {
-        backgroundColor: string;
-        '& span': {
-            color: string;
-            fontSize: string;
-            fontWeight: number;
-        };
-        alignItems: string;
-        justifyContent: string;
-        py: string;
-        px: string;
-        borderRadius: string;
-        fontSize: string;
-        alignSelf: string;
-        display: string;
-        width: string;
-    };
-    success: {
-        backgroundColor: string;
-        '& span': {
-            color: string;
-            fontSize: string;
-            fontWeight: number;
-        };
-        alignItems: string;
-        justifyContent: string;
-        py: string;
-        px: string;
-        borderRadius: string;
-        fontSize: string;
-        alignSelf: string;
-        display: string;
-        width: string;
-    };
-    danger: {
-        backgroundColor: string;
-        '& span': {
-            color: string;
-            fontSize: string;
-            fontWeight: number;
-        };
-        alignItems: string;
-        justifyContent: string;
-        py: string;
-        px: string;
-        borderRadius: string;
-        fontSize: string;
-        alignSelf: string;
-        display: string;
-        width: string;
-    };
-    warning: {
-        backgroundColor: string;
-        '& span': {
-            color: string;
-            fontSize: string;
-            fontWeight: number;
-        };
-        alignItems: string;
-        justifyContent: string;
-        py: string;
-        px: string;
-        borderRadius: string;
-        fontSize: string;
-        alignSelf: string;
-        display: string;
-        width: string;
-    };
-    dark: {
-        backgroundColor: string;
-        '& span': {
-            color: string;
-            fontSize: string;
-            fontWeight: number;
-        };
-        alignItems: string;
-        justifyContent: string;
-        py: string;
-        px: string;
-        borderRadius: string;
-        fontSize: string;
-        alignSelf: string;
-        display: string;
-        width: string;
-    };
-    selectedItemBadge: {
-        backgroundColor: string;
-        paddingRight: string;
-        '& span': {
-            fontSize: string;
-            color: string;
-            fontWeight: number;
-        };
-        alignItems: string;
-        justifyContent: string;
-        py: string;
-        px: string;
-        borderRadius: string;
-        fontSize: string;
-        alignSelf: string;
-        display: string;
-        width: string;
-    };
-    readOnlyBadge: {
-        '& span': {
-            fontSize: string;
-        };
-    };
-    badgeDeleteButton: {
-        borderRadius: string;
-        cursor: string;
-        height: number;
-        p: number;
-        width: number;
-        transition: string;
-        outline: string;
-        border: string;
-        borderColor: string;
-        path: {
-            fill: string;
-        };
-        '&.is-focused': {
-            outline: string;
-            outlineColor: string;
-            outlineOffset: string;
-        };
-        '&.is-hovered': {
-            backgroundColor: string;
-            path: {
-                fill: string;
-            };
-        };
-        '&.is-pressed': {
-            backgroundColor: string;
-            borderColor: string;
-            path: {
-                fill: string;
-            };
-        };
-    };
-};
 declare const _default: {
     attachment: {
         container: {

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

@@ -1,6 +1,5 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
 var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
@@ -9,19 +8,18 @@ var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/in
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
 var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.badges = exports.badgeDeleteButton = void 0;
+exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Attachment = _interopRequireDefault(require("../../../../components/AIComponents/Attachment/Attachment.styles"));
 var _Skeleton = _interopRequireDefault(require("../../../../components/Skeleton/Skeleton.styles"));
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
 var _colors = _interopRequireDefault(require("../colors/colors"));
 var _avatar = require("./avatar");
-var _button = _interopRequireWildcard(require("./button"));
+var _button = require("./button");
 var _callout = _interopRequireDefault(require("./callout"));
 var _dataTable = require("./dataTable");
 var _footer = require("./footer");
@@ -39,8 +37,6 @@ var _table = require("./table");
 var _tableBase = require("./tableBase");
 var _tabs = require("./tabs");
 var _tooltip = _interopRequireDefault(require("./tooltip"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 = {
@@ -62,90 +58,6 @@ var fieldHelperText = {
     }
   }
 };
-var badgeFont = {
-  fontSize: '11.25px',
-  fontWeight: 2
-};
-var baseBadge = {
-  alignItems: 'center',
-  justifyContent: 'center',
-  py: '.25em',
-  px: '.4em',
-  borderRadius: '4px',
-  fontSize: '11.25px',
-  alignSelf: 'flex-start',
-  display: 'inline-flex !important',
-  width: 'fit-content',
-  '& span': _objectSpread({}, badgeFont)
-};
-var badgeDeleteButton = _objectSpread(_objectSpread({}, _button["default"].iconButtons.base), {}, {
-  borderRadius: '50%',
-  cursor: 'pointer',
-  height: 14,
-  p: 0,
-  width: 14
-});
-exports.badgeDeleteButton = badgeDeleteButton;
-var badges = {
-  primary: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#eaf1fb !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: '#1967d2'
-    })
-  }),
-  baseBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#eaf1fb !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: '#1967d2'
-    })
-  }),
-  secondary: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#f6f8fa !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: 'gray-900'
-    })
-  }),
-  success: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#d3eddf !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: 'success.dark'
-    })
-  }),
-  danger: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#f8d8d5 !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: 'red-700'
-    })
-  }),
-  warning: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#fff1da !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: 'yellow-700'
-    })
-  }),
-  dark: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: 'black !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: 'white'
-    })
-  }),
-  selectedItemBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#eaf2fd !important',
-    paddingRight: '0px !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      fontSize: '14px',
-      color: 'text.primary',
-      fontWeight: 400
-    })
-  }),
-  readOnlyBadge: {
-    '& span': {
-      fontSize: '14px'
-    }
-  },
-  badgeDeleteButton: badgeDeleteButton
-};
-exports.badges = badges;
 var modalSize = {
   xs: ['100%', '300px', '300px', '300px', '300px', '300px'],
   sm: ['100%', '500px', '500px', '500px', '500px', '500px'],