@pingux/astro 2.221.6-alpha.0 → 2.234.0-alpha.0

package/lib/index.js

@@ -62,6 +62,8 @@ export { default as Checkbox } from './components/Checkbox';
 export * from './components/Checkbox';
 export { default as CheckboxField } from './components/CheckboxField';
 export * from './components/CheckboxField';
+export { default as CheckboxFieldGroup, CheckboxFieldGroupItem } from './components/CheckboxFieldGroup';
+export * from './components/CheckboxFieldGroup';
 export { default as CodeEditor } from './components/CodeEditor';
 export { default as CodeView } from './components/CodeView';
 export { default as CollapsiblePanel } from './components/CollapsiblePanel';
@@ -79,6 +81,8 @@ export * from './components/DataTable';
 export { default as DatePicker } from './components/DatePicker';
 export { default as DateField } from './components/DatePicker/DateField';
 export { default as EditButton } from './components/EditButton';
+export { default as EmptyState } from './components/EmptyState';
+export * from './components/EmptyState';
 export { default as EnvironmentBreadcrumb } from './components/EnvironmentBreadcrumb';
 export { default as ExpandableText } from './components/ExpandableText';
 export { default as FieldHelperText } from './components/FieldHelperText';

package/lib/styles/forms/index.js

@@ -10,6 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as checkbox from '../../components/Checkbox/Checkbox.styles';
+import checkboxFieldGroup from '../../components/CheckboxFieldGroup/CheckboxFieldGroup.styles';
 import colorField from '../../components/ColorField/ColorField.styles';
 import comboBox from '../../components/ComboBox/ComboBox.styles';
 import datePicker from '../../components/DatePicker/DatePicker.styles';
@@ -23,15 +24,34 @@ import * as select from '../../components/SelectField/Select.styles';
 import * as switchable from '../../components/Switch/Switch.styles'; // 'switch' is a reserved keyword
 import textarea from '../../components/TextArea/TextArea.styles';
 import timeField from '../../components/TimeField/TimeField.styles';
+var labelVariants = _objectSpread(_objectSpread({}, label.label), {}, {
+  checkboxFieldGroup: _objectSpread(_objectSpread({}, label.label), {}, {
+    mb: 'sm',
+    flexWrap: 'wrap'
+  }),
+  checkboxFieldGroupItem: _objectSpread(_objectSpread({}, label.label.checkbox), {}, {
+    minWidth: 0,
+    maxWidth: '100%',
+    flexWrap: 'wrap',
+    '> div': {
+      mr: 'md'
+    },
+    '&.is-disabled, &.is-read-only': {
+      color: 'inherit'
+    }
+  })
+});
 
 // See ThemeUI docs on variants and themes for intended structure
 // Variants should be defined in the approprate file.
-export default _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
+export default _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
+  checkboxFieldGroup: checkboxFieldGroup,
   colorField: colorField,
   comboBox: comboBox,
   datePicker: datePicker,
   fileInputField: fileInputField
-}, input), label), {}, {
+}, input), {}, {
+  label: labelVariants,
   numberField: numberField,
   radio: radio
 }, select), {}, {

package/lib/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -30,7 +30,7 @@ var border = {
   input: astroTokensDark.color.gray[500],
   separator: chroma.mix('#23282e', 'white', 0.15, 'rgb').hex(),
   attachment: '#39414b',
-  hairline: '#737577'
+  hairline: astroTokensDark.color.common.border
 };
 var badge = {
   background: astroTokensDark.color.gray[800],
@@ -81,6 +81,23 @@ var twoTone = {
     lightGreen: 'black',
     lightYellow: 'black',
     lightIndigo: 'black'
+  },
+  secondary: {
+    orange: astroTokensDark.color.orange[500],
+    cyan: astroTokensDark.color.cyan[500],
+    green: astroTokensDark.color.green[500],
+    purple: astroTokensDark.color.purple[500],
+    pink: astroTokensDark.color.pink[500],
+    red: astroTokensDark.color.red[500],
+    yellow: astroTokensDark.color.yellow[500],
+    teal: astroTokensDark.color.teal[500],
+    blue: astroTokensDark.color.blue[500],
+    indigo: astroTokensDark.color.indigo[500],
+    lightBlue: astroTokensDark.color.blue[600],
+    lightPink: astroTokensDark.color.pink[600],
+    lightGreen: astroTokensDark.color.green[800],
+    lightYellow: astroTokensDark.color.yellow[800],
+    lightIndigo: astroTokensDark.color.indigo[700]
   }
 };
 var iconWrapper = {

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

@@ -57,11 +57,46 @@ var dark = {
     color: astroTokensDark.color.gray[100]
   }
 };
-var activeStatusBadge = _objectSpread({}, primary);
-var warningStatusBadge = _objectSpread({}, warning);
-var criticalStatusBadge = _objectSpread({}, danger);
-var healthyStatusBadge = _objectSpread({}, success);
-var secondaryStatusBadge = _objectSpread({}, secondary);
+var activeStatusBadge = _objectSpread(_objectSpread({}, primary), {}, {
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: 'black'
+    }
+  }
+});
+var warningStatusBadge = _objectSpread(_objectSpread({}, warning), {}, {
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: 'black'
+    }
+  }
+});
+var criticalStatusBadge = _objectSpread(_objectSpread({}, danger), {}, {
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: 'black'
+    }
+  }
+});
+var healthyStatusBadge = _objectSpread(_objectSpread({}, success), {}, {
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: 'black'
+    }
+  }
+});
+var secondaryStatusBadge = _objectSpread(_objectSpread({}, secondary), {}, {
+  '& svg': {
+    color: 'inherit',
+    path: {
+      fill: astroTokensDark.color.gray[100]
+    }
+  }
+});
 var countBadge = {
   backgroundColor: '#F6F8FA !important',
   '& span': {
@@ -103,6 +138,30 @@ var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {},
     }
   }
 });
+var removableBadge = {
+  backgroundColor: "".concat(astroTokensDark.color.gray[700], " !important"),
+  '& span': {
+    color: astroTokensDark.color.gray[100]
+  },
+  '& svg': {
+    color: astroTokensDark.color.gray[100],
+    path: {
+      fill: astroTokensDark.color.gray[100]
+    }
+  }
+};
+var invertedRemovableBadge = {
+  backgroundColor: "".concat(astroTokensDark.color.gray[100], " !important"),
+  '& span': {
+    color: astroTokensDark.color.gray[700]
+  },
+  '& svg': {
+    color: astroTokensDark.color.gray[700],
+    path: {
+      fill: astroTokensDark.color.gray[700]
+    }
+  }
+};
 var tableBaseBadgeSpanStyle = {
   fontSize: '11.25px',
   lineHeight: '1'
@@ -141,6 +200,12 @@ var tableBaseBadge = {
 };
 var badges = {
   baseBadge: baseBadge,
+  convenienceDefault: {
+    backgroundColor: "".concat(astroTokensDark.color.gray.light, " !important"),
+    '& span': {
+      color: astroTokensDark.color.font.base
+    }
+  },
   primary: primary,
   secondary: secondary,
   success: success,
@@ -160,30 +225,12 @@ var badges = {
   readOnlyBadge: readOnlyBadge,
   readOnlyFieldBadge: readOnlyFieldBadge,
   itemBadgeWithSlot: itemBadgeWithSlot,
-  errorCalloutBadge: {
-    backgroundColor: '#23282e !important',
-    '& span': {
-      color: 'font.base'
-    }
-  },
-  infoCalloutBadge: {
-    backgroundColor: '#23282e !important',
-    '& span': {
-      color: 'font.base'
-    }
-  },
-  successCalloutBadge: {
-    backgroundColor: '#23282e !important',
-    '& span': {
-      color: 'font.base'
-    }
-  },
-  warningCalloutBadge: {
-    backgroundColor: '#23282e !important',
-    '& span': {
-      color: 'font.base'
-    }
-  },
+  removableBadge: removableBadge,
+  invertedRemovableBadge: invertedRemovableBadge,
+  errorCalloutBadge: _objectSpread({}, criticalStatusBadge),
+  infoCalloutBadge: _objectSpread({}, activeStatusBadge),
+  successCalloutBadge: _objectSpread({}, healthyStatusBadge),
+  warningCalloutBadge: _objectSpread({}, warningStatusBadge),
   tableBaseBadge: tableBaseBadge
 };
 export default badges;

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

@@ -0,0 +1,15 @@
+export var box = {
+  indeterminateCheckboxIcon: {
+    height: '16px',
+    width: '16px',
+    color: 'primary',
+    '&.is-disabled': {
+      opacity: 0.5,
+      // Override base Astro theme's neutral.80 fill so disabled state stays blue at 50%
+      '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
+        fill: 'primary',
+        stroke: 'primary'
+      }
+    }
+  }
+};

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

@@ -66,6 +66,23 @@ var iconButtons = {
     }
   }),
   modalCloseButton: _objectSpread({}, baseIconButton),
+  invertedBadgeDeleteButton: {
+    path: {
+      fill: astroTokensDark.color.gray[700]
+    },
+    '&.is-hovered': {
+      bg: 'transparent',
+      path: {
+        fill: astroTokensDark.color.gray[700]
+      }
+    },
+    '&.is-pressed': {
+      bg: 'transparent',
+      path: {
+        fill: astroTokensDark.color.gray[700]
+      }
+    }
+  },
   modalHeaderCloseButton: _objectSpread({}, baseIconButton),
   messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-hovered': {
@@ -174,6 +191,9 @@ var buttons = {
       path: {
         fill: 'black'
       }
+    },
+    '> span': {
+      color: 'black'
     }
   },
   inlineWithIcon: {

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

@@ -1,5 +1,9 @@
+import { astroTokensDark } from '@pingux/onyx-tokens';
 import { colors } from '../colors';
 var comboBox = {
+  inputInContainerSlot: {
+    right: astroTokensDark.spacing.input['padding-x']
+  },
   input: {
     bg: 'gray[900]',
     '&.is-disabled, &.is-read-only': {

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

@@ -19,6 +19,7 @@ export var select = {
   borderColor: '#69788B !important',
   color: 'text.primary',
   height: astroTokensDark.size.input.height,
+  pr: astroTokensDark.spacing.input['padding-x'],
   '&.is-disabled': {
     opacity: 1,
     borderColor: 'border.input',
@@ -28,21 +29,45 @@ export var select = {
     color: 'text.primary'
   }
 };
-export var radio = {
-  base: {
-    color: 'text.primary'
-  }
-};
 export var checkbox = {
-  color: 'text.primary'
+  color: astroTokensDark.color.gray[500],
+  '& rect[id="unchecked-bg"]': {
+    fill: astroTokensDark.color.gray[900]
+  },
+  'input:checked ~ &': {
+    color: 'primary'
+  },
+  // The input is visually hidden; use the focus state propagated to the label for the outline.
+  '.is-focused &': {
+    outline: '2px solid',
+    outlineColor: astroTokensDark.color.blue[400],
+    outlineOffset: '2px'
+  },
+  'input:disabled ~ &': {
+    opacity: 0.5
+  }
 };
 var label = {
   color: astroTokensDark.color.gray[100],
   radioGroup: {
-    color: 'white'
+    color: astroTokensDark.color.input.text
   },
   radio: {
-    color: 'white'
+    color: astroTokensDark.color.input.text
+  },
+  checkboxFieldGroup: {
+    color: 'text.primary'
+  },
+  checkboxFieldGroupItem: {
+    color: 'text.primary',
+    '&.is-disabled, &.is-read-only': {
+      color: 'text.primary'
+    }
+  },
+  checkbox: {
+    '&.is-disabled': {
+      color: astroTokensDark.color.gray[100]
+    }
   }
 };
 var selectOption = {
@@ -92,7 +117,6 @@ var numberField = {
 export default {
   input: input,
   checkbox: checkbox,
-  radio: radio,
   label: label,
   search: search,
   select: _objectSpread(_objectSpread({}, select), {}, {

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

@@ -1,6 +1,36 @@
 import { astroTokensDark } from '@pingux/onyx-tokens';
+import { borderRadius } from '../../../themes/next-gen/variants/listview';
 import { colors } from '../colors';
 export var listViewItem = {
+  container: {
+    bg: 'backgroundBase',
+    '&.is-selected': {
+      bg: 'background.hover'
+    },
+    borderBottom: 'none',
+    '&.has-separator': {
+      borderBottom: '1px solid',
+      borderBottomColor: 'border.attachment'
+    },
+    '&.is-hovered': {
+      bg: 'background.hover'
+    },
+    '&.is-focused': {
+      boxShadow: '0 0 0 3px inset #1a73e8',
+      bg: 'background.hover'
+    },
+    '&.is-first-item': {
+      borderTopLeftRadius: borderRadius,
+      borderTopRightRadius: borderRadius
+    },
+    '&.is-last-item': {
+      borderBottomLeftRadius: borderRadius,
+      borderBottomRightRadius: borderRadius,
+      '&.has-separator': {
+        border: 'none'
+      }
+    }
+  },
   styledListItem: {
     '&.has-separator': {
       borderBottom: '1px solid',

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

@@ -57,8 +57,11 @@ export var text = {
   },
   tabLabel: {
     color: astroTokensDark.color.font.base,
-    '.is-selected &': {
-      color: astroTokensDark.color.font.link
+    fontWeight: 0,
+    lineHeight: 'sm',
+    wordBreak: 'break-word',
+    '.is-disabled &': {
+      opacity: 0.65
     },
     '.is-selected &, .is-hovered &': {
       color: astroTokensDark.color.font.link

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

@@ -1,5 +1,7 @@
 import { astroTokensDark } from '@pingux/onyx-tokens';
+import { colors } from '../colors';
 import { avatar } from './avatar';
+import { box } from './box';
 import callout from './callout';
 import { footer } from './footer';
 import iconBadge from './iconBadge';
@@ -42,7 +44,11 @@ var listBox = {
     }
   }
 };
-var tab = {};
+var tab = {
+  '&.is-selected > span': {
+    color: 'link'
+  }
+};
 var modal = {
   content: {
     bg: 'backgroundBase'
@@ -176,6 +182,7 @@ var environmentBreadcrumb = {
   }
 };
 export default {
+  box: box,
   rockerButton: rockerButton,
   rangeCalendar: rangeCalendar,
   attachment: attachment,
@@ -191,6 +198,10 @@ export default {
   environmentBreadcrumb: environmentBreadcrumb,
   modal: modal,
   tab: tab,
+  tabPickerExpandIcon: {
+    color: astroTokensDark.color.gray[100],
+    fill: "".concat(colors.secondary, " !important")
+  },
   iconBadge: iconBadge,
   skeleton: skeleton,
   stepper: stepper,

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

@@ -9,6 +9,8 @@ import AlertIcon from '@pingux/mdi-react/AlertIcon';
 import WarningIcon from '@pingux/mdi-react/AlertOutlineIcon';
 import ApplicationOutlineIcon from '@pingux/mdi-react/ApplicationOutlineIcon';
 import ArrowDownIcon from '@pingux/mdi-react/ArrowDownIcon';
+import ArrowDropDownIcon from '@pingux/mdi-react/ArrowDropDownIcon';
+import ArrowDropUpIcon from '@pingux/mdi-react/ArrowDropUpIcon';
 import ArrowUpIcon from '@pingux/mdi-react/ArrowUpIcon';
 import CameraAltIcon from '@pingux/mdi-react/CameraAltIcon';
 import ChatIcon from '@pingux/mdi-react/ChatIcon';
@@ -63,4 +65,4 @@ var HelpIcon = function HelpIcon() {
     fill: "#3B4A58"
   }));
 };
-export default (_statuses$DEFAULT$sta = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, statuses.DEFAULT, InformationIcon), statuses.ERROR, AlertCircleIcon), statuses.SUCCESS, CheckCircleIcon), statuses.WARNING, AlertIcon), statusIcon.CRITICAL, AlertCircleOutlineIcon), statusIcon.FATAL, CloseOctagonOutlineIcon), statusIcon.INFO, InformationOutlineIcon), statusIcon.MAJOR, ArrowUpIcon), statusIcon.MINOR, ArrowDownIcon), statusIcon.WARNING_NEUTRAL, WarningIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "aic", Aic), "applicationsIcon", ApplicationOutlineIcon), "Ascending", MenuUp), "authenticationIcon", CheckCircleOutlineIcon), "clipboard", Clipboard), "CreateIcon", CreateIcon), "daVinci", DaVinci), "DefaultCircle", DefaultCircle), "Descending", MenuDown), "popoverMenuIcon", MoreVertIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "ErrorCircle", AlertCircleIcon), "integrationsIcon", ConnectionIcon), "listViewMenu", MoreVertIcon), "mdiAccountCog", mdiAccountCog), "mdiAccountMultiple", AccountMultiple), "mdiEarth", Earth), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", Fingerprint), "mdiPlayCircleIcon", PlayCircle), "mdiScaleBalance", ScaleBalance), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "mdiShoCard", Credentials), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", ViewDashboard), "mdiWeb", GlobeIcon), "MenuDown", MenuDown), "MenuUp", MenuUp), "monitoringIcon", PulseIcon), "openInNew", OpenInNew), "overviewIcon", WebIcon), "p1verify", Verify), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "pam", PamIcon), "PingAuthorize", KeyChainVariant), "HomeIcon", HomeIcon), "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", CheckCircleIcon), "userExperienceIcon", MonitorScreenshotIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "WarningIcon", WarningIcon), "CameraOutlineIcon", CameraAltIcon), "ImageOutlineIcon", ImageFilterHdrIcon), "helpHint", HelpIcon), "ModalCloseIcon", CloseIcon));
+export default (_statuses$DEFAULT$sta = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, statuses.DEFAULT, InformationIcon), statuses.ERROR, AlertCircleIcon), statuses.SUCCESS, CheckCircleIcon), statuses.WARNING, AlertIcon), statusIcon.CRITICAL, AlertCircleOutlineIcon), statusIcon.FATAL, CloseOctagonOutlineIcon), statusIcon.INFO, InformationOutlineIcon), statusIcon.MAJOR, ArrowUpIcon), statusIcon.MINOR, ArrowDownIcon), statusIcon.WARNING_NEUTRAL, WarningIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "aic", Aic), "applicationsIcon", ApplicationOutlineIcon), "Ascending", MenuUp), "authenticationIcon", CheckCircleOutlineIcon), "clipboard", Clipboard), "CreateIcon", CreateIcon), "daVinci", DaVinci), "DefaultCircle", DefaultCircle), "Descending", MenuDown), "popoverMenuIcon", MoreVertIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "ErrorCircle", AlertCircleIcon), "integrationsIcon", ConnectionIcon), "listViewMenu", MoreVertIcon), "mdiAccountCog", mdiAccountCog), "mdiAccountMultiple", AccountMultiple), "mdiEarth", Earth), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", Fingerprint), "mdiPlayCircleIcon", PlayCircle), "mdiScaleBalance", ScaleBalance), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "mdiShoCard", Credentials), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", ViewDashboard), "mdiWeb", GlobeIcon), "MenuDown", MenuDown), "MenuUp", MenuUp), "tabPickerDown", ArrowDropDownIcon), "tabPickerUp", ArrowDropUpIcon), "monitoringIcon", PulseIcon), "openInNew", OpenInNew), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "overviewIcon", WebIcon), "p1verify", Verify), "pam", PamIcon), "PingAuthorize", KeyChainVariant), "HomeIcon", HomeIcon), "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_statuses$DEFAULT$sta, "SuccessCircle", CheckCircleIcon), "userExperienceIcon", MonitorScreenshotIcon), "WarningIcon", WarningIcon), "CameraOutlineIcon", CameraAltIcon), "ImageOutlineIcon", ImageFilterHdrIcon), "helpHint", HelpIcon), "ModalCloseIcon", CloseIcon), "errorCalloutBadge", AlertCircleIcon), "infoCalloutBadge", InformationIcon), "successCalloutBadge", CheckCircleIcon), _defineProperty(_statuses$DEFAULT$sta, "warningCalloutBadge", AlertIcon));

package/lib/styles/themes/astro/customProperties/index.js

@@ -1,4 +1,5 @@
 import { hoveredState } from '../../../../components/AccordionGroup/Accordion.styles';
+import { twotoneColorNames } from '../../next-gen/colors/twoTone';
 import icons from './icons';
 import styles from './styles';
 import tShirtSizes, { iconWrapperSizes } from './tShirtSizes';
@@ -7,6 +8,7 @@ var breadcrumbIconMargin = 5;
 var breadcrumbIconSize = 'xs';
 var accordionItemDefaultLabelTag = 'span';
 var iconBadgeCircleColor = 'white';
+var iconBadgeTwotoneColorNames = twotoneColorNames;
 var rockerButtonGap = '3px';
 var accordionItemMarginLeft = 'sm';
 var pageHeaderTitleMargin = 'xs';
@@ -36,6 +38,7 @@ export var astroThemeValues = {
   styles: styles,
   tShirtSizes: tShirtSizes,
   iconBadgeCircleColor: iconBadgeCircleColor,
+  iconBadgeTwotoneColorNames: iconBadgeTwotoneColorNames,
   iconWrapperSizes: iconWrapperSizes,
   iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
   copyButtonSize: copyButtonSize,

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

@@ -144,17 +144,20 @@ var lineNo = {
   backgroundColor: 'transparent'
 };
 export var copyButton = {
+  path: {
+    fill: 'text.primary'
+  },
   "default": {
     mx: 'sm',
     path: {
-      fill: 'font.reverse'
+      fill: 'white'
     },
     border: 'none !important'
   },
   light: {
     mx: 'sm',
     path: {
-      fill: '#23282f'
+      fill: 'black'
     },
     border: 'none !important'
   }

package/lib/styles/themes/next-gen/colors/twoTone.js

@@ -1,3 +1,4 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import { astroTokens } from '@pingux/onyx-tokens';
 var twoTone = {
   bg: {
@@ -33,6 +34,24 @@ var twoTone = {
     lightGreen: astroTokens.color.green[800],
     lightYellow: astroTokens.color.yellow[800],
     lightIndigo: astroTokens.color.indigo[700]
+  },
+  secondary: {
+    orange: astroTokens.color.orange[800],
+    cyan: astroTokens.color.cyan[800],
+    green: astroTokens.color.green[800],
+    purple: astroTokens.color.purple[800],
+    pink: astroTokens.color.pink[800],
+    red: astroTokens.color.red[800],
+    yellow: astroTokens.color.yellow[800],
+    teal: astroTokens.color.teal[800],
+    blue: astroTokens.color.blue[600],
+    indigo: astroTokens.color.indigo[700],
+    lightBlue: astroTokens.color.blue[500],
+    lightPink: astroTokens.color.pink[600],
+    lightGreen: astroTokens.color.green[800],
+    lightYellow: astroTokens.color.yellow[800],
+    lightIndigo: astroTokens.color.indigo[700]
   }
 };
+export var twotoneColorNames = _Object$keys(twoTone.text);
 export default twoTone;

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

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'MaterialSymbolIcon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PhoneNumberField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField', 'LabelValuePairs'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CheckboxFieldGroup', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'MaterialSymbolIcon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PhoneNumberField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField', 'LabelValuePairs'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],
@@ -8,7 +8,8 @@ export var componentSpecificNextGenBlacklist = {
   DataTable: ['Default'],
   Text: ['Default'],
   Tabs: ['Vertical Orientation'],
-  AccordionGridGroup: ['Default', 'Accordion With Inputs', 'Controlled']
+  AccordionGridGroup: ['Default', 'Accordion With Inputs', 'Controlled'],
+  ListView: ['Astro Empty List']
 };
 export var astroBlacklistStory = {
   AccordionGridGroup: ['Onyx Default'],
@@ -22,10 +23,11 @@ export var astroBlacklistStory = {
   Text: ['Onyx'],
   Loader: ['Circular', 'Custom Circular'],
   Card: ['With Shadow'],
+  ListView: ['Onyx Default Empty State', 'Custom Render Empty State'],
   ListViewItem: ['With Expandable Item'],
   MaterialSymbolIcon: ['Default', 'Sizes', 'Commonly Used'],
   Modal: ['With Full Page']
 };
-export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];
+export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns', 'EmptyState'];
 export var onyxOnlyRecipes = ['Vertical Onyx Stepper'];
 export default nextGenConvertedComponents;

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

@@ -1,6 +1,10 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _icons;
+import AlertCircleOutlineIcon from '@pingux/mdi-react/AlertCircleOutlineIcon';
+import AlertOutlineIcon from '@pingux/mdi-react/AlertOutlineIcon';
+import CheckCircleOutlineIcon from '@pingux/mdi-react/CheckCircleOutlineIcon';
 import EmoticonHappy from '@pingux/mdi-react/EmoticonHappyOutlineIcon';
+import InformationCircleOutlineIcon from '@pingux/mdi-react/InformationCircleOutlineIcon';
 import Settings from '@pingux/mdi-react/SettingsOutlineIcon';
 import ShieldStarOutlineIcon from '@pingux/mdi-react/ShieldStarOutlineIcon';
 import ShowChartIcon from '@pingux/mdi-react/ShowChartIcon';
@@ -8,5 +12,5 @@ import TransitConnection from '@pingux/mdi-react/TransitConnectionVariantIcon';
 import { pingLogoHorizontalSmall } from '../../../../utils/devUtils/constants/logos';
 import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statuses';
 import { Aic, PamIcon, Protect } from '../../astro/customProperties/navBarIcons';
-var icons = (_icons = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, statuses.DEFAULT, 'info'), statuses.ERROR, 'error'), statuses.SUCCESS, 'check_circle'), statuses.WARNING, 'warning'), statusIcon.CRITICAL, 'error'), statusIcon.FATAL, 'dangerous'), statusIcon.INFO, 'info'), statusIcon.MAJOR, 'arrow_upward'), statusIcon.MINOR, 'arrow_downward'), statusIcon.WARNING_NEUTRAL, 'warning'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", ShowChartIcon), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "p1verify", 'person_check'), "pam", PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "WarningIcon", 'warning'), "CameraOutlineIcon", 'photo_camera'), "ImageOutlineIcon", 'image'), "helpHint", 'info'), "ModalCloseIcon", 'close'));
+var icons = (_icons = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, statuses.DEFAULT, 'info'), statuses.ERROR, 'error'), statuses.SUCCESS, 'check_circle'), statuses.WARNING, 'warning'), statusIcon.CRITICAL, 'error'), statusIcon.FATAL, 'dangerous'), statusIcon.INFO, 'info'), statusIcon.MAJOR, 'arrow_upward'), statusIcon.MINOR, 'arrow_downward'), statusIcon.WARNING_NEUTRAL, 'warning'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "tabPickerDown", 'keyboard_arrow_down'), "tabPickerUp", 'keyboard_arrow_up'), "monitoringIcon", ShowChartIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), "p1verify", 'person_check'), "pam", PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", ShieldStarOutlineIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), "WarningIcon", 'warning'), "CameraOutlineIcon", 'photo_camera'), "ImageOutlineIcon", 'image'), "helpHint", 'info'), "ModalCloseIcon", 'close'), "errorCalloutBadge", AlertCircleOutlineIcon), "infoCalloutBadge", InformationCircleOutlineIcon), "successCalloutBadge", CheckCircleOutlineIcon), _defineProperty(_icons, "warningCalloutBadge", AlertOutlineIcon));
 export default icons;

package/lib/styles/themes/next-gen/customProperties/index.js

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { twotoneColorNames } from '../colors/twoTone';
 import customSizes from './customSizes';
 import icons from './icons';
 import styles from './styles';
@@ -20,7 +21,7 @@ var accordionHoveredState = {
   }
 };
 var accordionItemDefaultLabelTag = 'h2';
-var iconBadgeCircleColor = 'badge.iconBadge';
+var iconBadgeCircleColor = 'backgroundBase';
 var activeColor = '#1a73e8';
 var backgroundBaseColor = 'white';
 var iFrameContentDivBackgroundColor = backgroundBaseColor;
@@ -46,6 +47,7 @@ export var nextGenThemeValues = _objectSpread({
   icons: icons,
   tShirtSizes: tShirtSizes,
   iconBadgeCircleColor: iconBadgeCircleColor,
+  iconBadgeTwotoneColorNames: twotoneColorNames,
   iconWrapperSizes: iconWrapperSizes,
   defaultIconColor: defaultIconColor,
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,