@pingux/astro 2.221.6 → 2.234.0-alpha.0

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

@@ -10,7 +10,11 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _AlertCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleOutlineIcon"));
+var _AlertOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertOutlineIcon"));
+var _CheckCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleOutlineIcon"));
 var _EmoticonHappyOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/EmoticonHappyOutlineIcon"));
+var _InformationCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationCircleOutlineIcon"));
 var _SettingsOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/SettingsOutlineIcon"));
 var _ShieldStarOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ShieldStarOutlineIcon"));
 var _ShowChartIcon = _interopRequireDefault(require("@pingux/mdi-react/ShowChartIcon"));
@@ -20,5 +24,5 @@ var _statuses = _interopRequireWildcard(require("../../../../utils/devUtils/cons
 var _navBarIcons = require("../../astro/customProperties/navBarIcons");
 var _icons;
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var icons = (_icons = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, _statuses["default"].DEFAULT, 'info'), _statuses["default"].ERROR, 'error'), _statuses["default"].SUCCESS, 'check_circle'), _statuses["default"].WARNING, 'warning'), _statuses.statusIcon.CRITICAL, 'error'), _statuses.statusIcon.FATAL, 'dangerous'), _statuses.statusIcon.INFO, 'info'), _statuses.statusIcon.MAJOR, 'arrow_upward'), _statuses.statusIcon.MINOR, 'arrow_downward'), _statuses.statusIcon.WARNING_NEUTRAL, 'warning'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "aic", _navBarIcons.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'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", _SettingsOutlineIcon["default"]), "mdiEmoticonHappyOutline", _EmoticonHappyOutlineIcon["default"]), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", _TransitConnectionVariantIcon["default"]), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "monitoringIcon", _ShowChartIcon["default"]), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "p1verify", 'person_check'), "pam", _navBarIcons.PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmall), "protect", _navBarIcons.Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", _ShieldStarOutlineIcon["default"]), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "WarningIcon", 'warning'), "CameraOutlineIcon", 'photo_camera'), "ImageOutlineIcon", 'image'), "helpHint", 'info'), "ModalCloseIcon", 'close'));
+var icons = (_icons = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, _statuses["default"].DEFAULT, 'info'), _statuses["default"].ERROR, 'error'), _statuses["default"].SUCCESS, 'check_circle'), _statuses["default"].WARNING, 'warning'), _statuses.statusIcon.CRITICAL, 'error'), _statuses.statusIcon.FATAL, 'dangerous'), _statuses.statusIcon.INFO, 'info'), _statuses.statusIcon.MAJOR, 'arrow_upward'), _statuses.statusIcon.MINOR, 'arrow_downward'), _statuses.statusIcon.WARNING_NEUTRAL, 'warning'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "aic", _navBarIcons.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'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", _SettingsOutlineIcon["default"]), "mdiEmoticonHappyOutline", _EmoticonHappyOutlineIcon["default"]), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", _TransitConnectionVariantIcon["default"]), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuUp", 'keyboard_arrow_up'), "tabPickerDown", 'keyboard_arrow_down'), "tabPickerUp", 'keyboard_arrow_up'), "monitoringIcon", _ShowChartIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), "p1verify", 'person_check'), "pam", _navBarIcons.PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmall), "protect", _navBarIcons.Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", _ShieldStarOutlineIcon["default"]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_icons, "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), "WarningIcon", 'warning'), "CameraOutlineIcon", 'photo_camera'), "ImageOutlineIcon", 'image'), "helpHint", 'info'), "ModalCloseIcon", 'close'), "errorCalloutBadge", _AlertCircleOutlineIcon["default"]), "infoCalloutBadge", _InformationCircleOutlineIcon["default"]), "successCalloutBadge", _CheckCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_icons, "warningCalloutBadge", _AlertOutlineIcon["default"]));
 var _default = exports["default"] = icons;

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

@@ -62,6 +62,8 @@ export declare const nextGenThemeValues: {
         mdiWeb: string;
         MenuDown: string;
         MenuUp: string;
+        tabPickerDown: string;
+        tabPickerUp: string;
         monitoringIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
         openInNew: string;
         overviewIcon: string;
@@ -80,6 +82,10 @@ export declare const nextGenThemeValues: {
         ImageOutlineIcon: string;
         helpHint: string;
         ModalCloseIcon: string;
+        errorCalloutBadge: import("@pingux/mdi-react").MdiReactIconComponentType;
+        infoCalloutBadge: import("@pingux/mdi-react").MdiReactIconComponentType;
+        successCalloutBadge: import("@pingux/mdi-react").MdiReactIconComponentType;
+        warningCalloutBadge: import("@pingux/mdi-react").MdiReactIconComponentType;
     };
     tShirtSizes: {
         'icon-50': string;
@@ -99,6 +105,7 @@ export declare const nextGenThemeValues: {
         xsm: string;
     };
     iconBadgeCircleColor: string;
+    iconBadgeTwotoneColorNames: string[];
     iconWrapperSizes: {
         xs: number;
         sm: number;

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

@@ -16,6 +16,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.nextGenThemeValues = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _twoTone = require("../colors/twoTone");
 var _customSizes = _interopRequireDefault(require("./customSizes"));
 var _icons = _interopRequireDefault(require("./icons"));
 var _styles = _interopRequireDefault(require("./styles"));
@@ -30,7 +31,7 @@ var accordionHoveredState = {
   }
 };
 var accordionItemDefaultLabelTag = 'h2';
-var iconBadgeCircleColor = 'badge.iconBadge';
+var iconBadgeCircleColor = 'backgroundBase';
 var activeColor = '#1a73e8';
 var backgroundBaseColor = 'white';
 var iFrameContentDivBackgroundColor = backgroundBaseColor;
@@ -56,6 +57,7 @@ var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
   icons: _icons["default"],
   tShirtSizes: _tShirtSizes["default"],
   iconBadgeCircleColor: iconBadgeCircleColor,
+  iconBadgeTwotoneColorNames: _twoTone.twotoneColorNames,
   iconWrapperSizes: _tShirtSizes.iconWrapperSizes,
   defaultIconColor: defaultIconColor,
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,

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

@@ -1,10 +1,24 @@
+export declare const checkboxField: {
+    container: {
+        mb: string;
+    };
+};
 export declare const checkbox: {
     height: string;
     width: string;
+    borderRadius: number;
     color: string;
     mr: string;
-    'input ~ &.is-focused': {
-        boxShadow: string;
+    'input:checked ~ &': {
+        color: string;
+    };
+    '.is-focused &': {
+        outline: string;
+        outlineColor: string;
+        outlineOffset: string;
+    };
+    'input:disabled ~ &': {
+        opacity: number;
     };
 };
 export declare const select: {
@@ -12,6 +26,7 @@ export declare const select: {
     borderColor: string;
     color: string;
     height: number;
+    pr: number;
     '&.is-disabled': {
         opacity: number;
         borderColor: string;
@@ -50,6 +65,9 @@ export declare const comboBox: {
     button: {
         border: string;
     };
+    inputInContainerSlot: {
+        right: number;
+    };
 };
 export declare const numberField: {
     arrowsWrapper: {
@@ -121,6 +139,14 @@ export declare const radio: {
     base: {
         color: string;
         mr: string;
+        height: number;
+        width: number;
+        '.is-horizontal &': {
+            mr: string;
+        };
+        'input:checked ~ &': {
+            color: string;
+        };
         'input ~ &.is-focused': {
             boxShadow: string;
             border: string;
@@ -143,6 +169,17 @@ export declare const radio: {
             transformOrigin?: undefined;
         };
     };
+    outerContainer: {
+        '.is-horizontal &': {
+            mr: string;
+        };
+    };
+    checkedContent: {
+        pl: string;
+    };
+};
+export declare const radioGroupWrapper: {
+    rowGap: string;
 };
 export declare const timeField: {
     inputField: {
@@ -1052,15 +1089,34 @@ export declare const timeField: {
 declare const _default: {
     input: import("theme-ui").ThemeUICSSObject;
     label: import("theme-ui").ThemeUICSSObject;
+    checkboxField: {
+        container: {
+            mb: string;
+        };
+    };
     checkbox: {
         height: string;
         width: string;
+        borderRadius: number;
         color: string;
         mr: string;
-        'input ~ &.is-focused': {
-            boxShadow: string;
+        'input:checked ~ &': {
+            color: string;
+        };
+        '.is-focused &': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        'input:disabled ~ &': {
+            opacity: number;
         };
     };
+    checkboxFieldGroup: {
+        container: import("theme-ui").ThemeUICSSObject;
+        items: import("theme-ui").ThemeUICSSObject;
+        item: import("theme-ui").ThemeUICSSObject;
+    };
     comboBox: {
         input: {
             borderStyle: string;
@@ -1071,12 +1127,16 @@ declare const _default: {
         button: {
             border: string;
         };
+        inputInContainerSlot: {
+            right: number;
+        };
     };
     select: {
         borderRadius: number;
         borderColor: string;
         color: string;
         height: number;
+        pr: number;
         '&.is-disabled': {
             opacity: number;
             borderColor: string;
@@ -1100,6 +1160,14 @@ declare const _default: {
         base: {
             color: string;
             mr: string;
+            height: number;
+            width: number;
+            '.is-horizontal &': {
+                mr: string;
+            };
+            'input:checked ~ &': {
+                color: string;
+            };
             'input ~ &.is-focused': {
                 boxShadow: string;
                 border: string;
@@ -1122,6 +1190,17 @@ declare const _default: {
                 transformOrigin?: undefined;
             };
         };
+        outerContainer: {
+            '.is-horizontal &': {
+                mr: string;
+            };
+        };
+        checkedContent: {
+            pl: string;
+        };
+    };
+    radioGroupWrapper: {
+        rowGap: string;
     };
     search: {
         wrapper: {

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

@@ -12,9 +12,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.timeField = exports.select = exports.search = exports.radio = exports.numberField = exports["default"] = exports.comboBox = exports.checkbox = void 0;
+exports.timeField = exports.select = exports.search = exports.radioGroupWrapper = exports.radio = exports.numberField = exports["default"] = exports.comboBox = exports.checkboxField = exports.checkbox = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _onyxTokens = require("@pingux/onyx-tokens");
+var _CheckboxFieldGroup = _interopRequireDefault(require("../../../components/CheckboxFieldGroup/CheckboxFieldGroup.styles"));
 var _safariAgent = require("../../safariAgent.js");
 var _colors = _interopRequireDefault(require("./colors/colors"));
 var _tShirtSizes = _interopRequireDefault(require("./customProperties/tShirtSizes"));
@@ -23,13 +24,28 @@ var _label = require("./variants/label");
 var _switch = require("./variants/switch");
 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) { (0, _defineProperty2["default"])(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; }
+var checkboxField = exports.checkboxField = {
+  container: {
+    mb: 'xs'
+  }
+};
 var checkbox = exports.checkbox = {
-  height: '19.25px',
-  width: '19.25px',
-  color: 'text.secondary',
+  height: '16px',
+  width: '16px',
+  borderRadius: _onyxTokens.astroTokens.radius.checkbox.radius,
+  color: _colors["default"].neutral['80'],
   mr: '8px',
-  'input ~ &.is-focused': {
-    boxShadow: "inset 0px 0px 0px 1px ".concat(_colors["default"].focus)
+  'input:checked ~ &': {
+    color: 'active'
+  },
+  // The input is visually hidden; use the focus state propagated to the label for the outline.
+  '.is-focused &': {
+    outline: '2px solid',
+    outlineColor: _colors["default"].focus,
+    outlineOffset: '2px'
+  },
+  'input:disabled ~ &': {
+    opacity: 0.5
   }
 };
 var select = exports.select = {
@@ -37,6 +53,7 @@ var select = exports.select = {
   borderColor: 'border.input',
   color: 'text.primary',
   height: _onyxTokens.astroTokens.size.input.height,
+  pr: _onyxTokens.astroTokens.spacing.input['padding-x'],
   '&.is-disabled': {
     opacity: 1,
     borderColor: 'border.input',
@@ -74,6 +91,9 @@ var comboBox = exports.comboBox = {
   },
   button: {
     border: 'none !important'
+  },
+  inputInContainerSlot: {
+    right: _onyxTokens.astroTokens.spacing.input['padding-x']
   }
 };
 var numberField = exports.numberField = {
@@ -81,8 +101,17 @@ var numberField = exports.numberField = {
 };
 var radio = exports.radio = {
   base: {
-    color: 'text.secondary',
-    mr: '8px',
+    color: 'border.input',
+    mr: 'md',
+    height: 24,
+    width: 24,
+    // Horizontal RadioGroup uses a tighter icon-to-label gap per the Onyx spec
+    '.is-horizontal &': {
+      mr: 'sm'
+    },
+    'input:checked ~ &': {
+      color: 'active'
+    },
     'input ~ &.is-focused': /* istanbul ignore next */
     _safariAgent.isSafari ? {
       boxShadow: 'none',
@@ -97,8 +126,19 @@ var radio = exports.radio = {
       outlineColor: 'focus',
       outlineOffset: '1px'
     }
+  },
+  outerContainer: {
+    '.is-horizontal &': {
+      mr: 'lg'
+    }
+  },
+  checkedContent: {
+    pl: '40px'
   }
 };
+var radioGroupWrapper = exports.radioGroupWrapper = {
+  rowGap: 'xs'
+};
 var timeField = exports.timeField = {
   inputField: _objectSpread(_objectSpread({}, _input.input), {}, {
     color: 'font.base',
@@ -135,10 +175,13 @@ var timeField = exports.timeField = {
 var _default = exports["default"] = {
   input: _input.input,
   label: _label.label,
+  checkboxField: checkboxField,
   checkbox: checkbox,
+  checkboxFieldGroup: _CheckboxFieldGroup["default"],
   comboBox: comboBox,
   select: select,
   radio: radio,
+  radioGroupWrapper: radioGroupWrapper,
   search: search,
   "switch": _switch.switchable,
   numberField: numberField,