@pingux/astro 2.131.0 → 2.132.0-alpha.0

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

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['GridList', 'DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'Callout', 'Table', 'TableBase', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField'];
+var nextGenConvertedComponents = ['GridList', 'DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'StatusIcon', 'Callout', 'Table', 'TableBase', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],
@@ -21,7 +21,8 @@ var astroBlacklistStory = {
   DataTable: ['Onyx Default'],
   NavBar: ['Onyx Default'],
   SearchField: ['Onyx With Filter'],
-  Callout: ['Customizations']
+  Callout: ['Customizations'],
+  StatusIcon: ['Default', 'In Rocker Button']
 };
 exports.astroBlacklistStory = astroBlacklistStory;
 var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];

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

@@ -1,6 +1,9 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -9,16 +12,21 @@ 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 _ArrowDownIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowDownIcon"));
+var _ArrowUpIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowUpIcon"));
 var _CheckCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleOutlineIcon"));
 var _ChevronDownIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronDownIcon"));
 var _ChevronUpIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronUpIcon"));
+var _CloseOctagonOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseOctagonOutlineIcon"));
 var _DotsHorizontalIcon = _interopRequireDefault(require("@pingux/mdi-react/DotsHorizontalIcon"));
 var _InformationOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationOutlineIcon"));
 var _logos = require("../../../../utils/devUtils/constants/logos");
-var _statuses = _interopRequireDefault(require("../../../../utils/devUtils/constants/statuses"));
+var _statuses = _interopRequireWildcard(require("../../../../utils/devUtils/constants/statuses"));
 var _MenuDown$MenuUp$stat;
+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; }
 var _default = (_MenuDown$MenuUp$stat = {
   MenuDown: _ChevronDownIcon["default"],
   MenuUp: _ChevronUpIcon["default"]
-}, (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].DEFAULT, _InformationOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].ERROR, _AlertCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].SUCCESS, _CheckCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].WARNING, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmall), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "listViewMenu", _DotsHorizontalIcon["default"]), _MenuDown$MenuUp$stat);
+}, (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].DEFAULT, _InformationOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].ERROR, _AlertCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].SUCCESS, _CheckCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].WARNING, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.INFO, _InformationOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.CRITICAL, _AlertCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.MAJOR, _ArrowUpIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.MINOR, _ArrowDownIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.WARNING_NEUTRAL, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.FATAL, _CloseOctagonOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmall), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "listViewMenu", _DotsHorizontalIcon["default"]), _MenuDown$MenuUp$stat);
 exports["default"] = _default;

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

@@ -3630,53 +3630,61 @@ declare const _default: {
         };
         rockerButton: {
             innerContainer: {
-                height: number;
                 boxShadow: string;
                 backgroundColor: string;
                 borderRadius: string;
                 padding: number;
-                button: {
-                    backgroundColor: string;
-                    padding: string;
-                    height: string;
-                    color: string;
-                    border: string;
-                    borderColor: string;
-                    borderRadius: number;
-                    '&.is-selected': {
-                        color: string;
-                        backgroundColor: string;
-                    };
-                    '&.is-hovered': {
-                        backgroundColor: string;
-                        color: string;
-                    };
-                    '&.is-pressed': {
-                        backgroundColor: string;
-                        color: string;
-                    };
-                    '&.is-focused': {
-                        outline: string;
-                        outlineColor: string;
-                        outlineOffset: string;
-                        position: string;
-                        zIndex: string;
-                    };
-                };
-                'button:not(:first-child)': {
-                    borderLeft: number;
+                border: string;
+            };
+            thumbSwitch: {
+                textTransform: string;
+                backgroundColor: string;
+                padding: string;
+                height: string;
+                color: string;
+                border: string;
+                borderColor: string;
+                borderRadius: number;
+                '&:not(:last-of-type)': {
+                    borderRight: string;
                 };
-                'button:first-child': {
+                '&:first-of-type': {
                     borderTopLeftRadius: string;
                     borderBottomLeftRadius: string;
                 };
-                'button:last-child': {
+                '&:last-of-type': {
                     borderTopRightRadius: string;
                     borderBottomRightRadius: string;
                 };
-            };
-            thumbSwitch: {
-                textTransform: string;
+                '&.is-selected': {
+                    color: string;
+                    backgroundColor: string;
+                    '& > div.status-icon': {
+                        bg: string;
+                        '& > svg': {
+                            path: {
+                                fill: string;
+                            };
+                        };
+                    };
+                };
+                '&.is-hovered': {
+                    borderColor: string;
+                    backgroundColor: string;
+                    color: string;
+                };
+                '&.is-pressed': {
+                    borderColor: string;
+                    backgroundColor: string;
+                    color: string;
+                };
+                '&.is-focused': {
+                    position: string;
+                    zIndex: string;
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
             };
         };
         tooltip: {
@@ -3888,6 +3896,66 @@ declare const _default: {
                 };
             };
         };
+        statusIcon: {
+            base: {
+                '&.is-default': {
+                    bg: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-critical': {
+                    bg: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-warning': {
+                    bg: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-info': {
+                    bg: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-major': {
+                    bg: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-minor': {
+                    bg: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-warning-neutral': {
+                    bg: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-fatal': {
+                    bg: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-selected.is-selected': {
+                    bg: string;
+                    '& > svg': {
+                        path: {
+                            fill: string;
+                        };
+                    };
+                };
+            };
+        };
         box: {
             indeterminateCheckboxIcon: {
                 height: string;

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

@@ -1229,53 +1229,61 @@ declare const _default: {
     };
     rockerButton: {
         innerContainer: {
-            height: number;
             boxShadow: string;
             backgroundColor: string;
             borderRadius: string;
             padding: number;
-            button: {
-                backgroundColor: string;
-                padding: string;
-                height: string;
-                color: string;
-                border: string;
-                borderColor: string;
-                borderRadius: number;
-                '&.is-selected': {
-                    color: string;
-                    backgroundColor: string;
-                };
-                '&.is-hovered': {
-                    backgroundColor: string;
-                    color: string;
-                };
-                '&.is-pressed': {
-                    backgroundColor: string;
-                    color: string;
-                };
-                '&.is-focused': {
-                    outline: string;
-                    outlineColor: string;
-                    outlineOffset: string;
-                    position: string;
-                    zIndex: string;
-                };
-            };
-            'button:not(:first-child)': {
-                borderLeft: number;
+            border: string;
+        };
+        thumbSwitch: {
+            textTransform: string;
+            backgroundColor: string;
+            padding: string;
+            height: string;
+            color: string;
+            border: string;
+            borderColor: string;
+            borderRadius: number;
+            '&:not(:last-of-type)': {
+                borderRight: string;
             };
-            'button:first-child': {
+            '&:first-of-type': {
                 borderTopLeftRadius: string;
                 borderBottomLeftRadius: string;
             };
-            'button:last-child': {
+            '&:last-of-type': {
                 borderTopRightRadius: string;
                 borderBottomRightRadius: string;
             };
-        };
-        thumbSwitch: {
-            textTransform: string;
+            '&.is-selected': {
+                color: string;
+                backgroundColor: string;
+                '& > div.status-icon': {
+                    bg: string;
+                    '& > svg': {
+                        path: {
+                            fill: string;
+                        };
+                    };
+                };
+            };
+            '&.is-hovered': {
+                borderColor: string;
+                backgroundColor: string;
+                color: string;
+            };
+            '&.is-pressed': {
+                borderColor: string;
+                backgroundColor: string;
+                color: string;
+            };
+            '&.is-focused': {
+                position: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
         };
     };
     tooltip: {
@@ -1487,6 +1495,66 @@ declare const _default: {
             };
         };
     };
+    statusIcon: {
+        base: {
+            '&.is-default': {
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-critical': {
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-warning': {
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-info': {
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-major': {
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-minor': {
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-warning-neutral': {
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-fatal': {
+                bg: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-selected.is-selected': {
+                bg: string;
+                '& > svg': {
+                    path: {
+                        fill: string;
+                    };
+                };
+            };
+        };
+    };
     box: {
         indeterminateCheckboxIcon: {
             height: string;

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

@@ -1,5 +1,6 @@
 "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");
@@ -8,6 +9,7 @@ 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
@@ -18,7 +20,7 @@ var _Attachment = _interopRequireDefault(require("../../../../components/AICompo
 var _Skeleton = _interopRequireDefault(require("../../../../components/Skeleton/Skeleton.styles"));
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
 var _avatar = require("./avatar");
-var _button = _interopRequireDefault(require("./button"));
+var _button = _interopRequireWildcard(require("./button"));
 var _callout = _interopRequireDefault(require("./callout"));
 var _dataTable = require("./dataTable");
 var _footer = require("./footer");
@@ -36,6 +38,8 @@ 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 = {
@@ -301,53 +305,58 @@ var overlayPanel = {
 };
 var rockerButton = {
   innerContainer: {
-    height: 50,
     boxShadow: 'none',
-    backgroundColor: 'white',
+    backgroundColor: 'common.background.base',
     borderRadius: '50px',
     padding: 0,
-    'button': {
-      backgroundColor: 'white',
-      padding: '0px 15px',
-      height: '100%',
-      color: 'active',
-      border: '1px solid',
-      borderColor: 'active',
-      borderRadius: 0,
-      '&.is-selected': {
-        color: 'white',
-        backgroundColor: 'active'
-      },
-      '&.is-hovered': {
-        backgroundColor: '#1462C8 !important',
-        color: 'white'
-      },
-      '&.is-pressed': {
-        backgroundColor: '#135CBC !important',
-        color: 'white'
-      },
-      '&.is-focused': {
-        outline: '2px solid',
-        outlineColor: 'focus',
-        outlineOffset: '2px',
-        position: 'relative',
-        zIndex: '1000'
-      }
-    },
-    'button:not(:first-child)': {
-      borderLeft: 0
+    border: 'none'
+  },
+  thumbSwitch: {
+    textTransform: 'none',
+    backgroundColor: 'common.background.base',
+    padding: 'md',
+    height: '50px',
+    color: 'active',
+    border: '1px solid',
+    borderColor: 'active',
+    borderRadius: 0,
+    '&:not(:last-of-type)': {
+      borderRight: 'none'
     },
-    'button:first-child': {
+    '&:first-of-type': {
       borderTopLeftRadius: '50px',
       borderBottomLeftRadius: '50px'
     },
-    'button:last-child': {
+    '&:last-of-type': {
       borderTopRightRadius: '50px',
       borderBottomRightRadius: '50px'
-    }
-  },
-  thumbSwitch: {
-    textTransform: 'none'
+    },
+    '&.is-selected': {
+      color: 'white',
+      backgroundColor: 'active',
+      '& > div.status-icon': {
+        bg: 'white',
+        '& > svg': {
+          path: {
+            fill: 'active'
+          }
+        }
+      }
+    },
+    '&.is-hovered': {
+      borderColor: '#1462C8',
+      backgroundColor: '#1462C8 !important',
+      color: 'white'
+    },
+    '&.is-pressed': {
+      borderColor: '#135CBC',
+      backgroundColor: '#135CBC !important',
+      color: 'white'
+    },
+    '&.is-focused': _objectSpread(_objectSpread({}, _button.defaultFocus), {}, {
+      position: 'relative',
+      zIndex: '1000'
+    })
   }
 };
 var loader = {
@@ -355,6 +364,66 @@ var loader = {
     color: 'active'
   }
 };
+var statusIcon = {
+  base: {
+    '&.is-default': {
+      bg: 'gray-100',
+      path: {
+        fill: 'gray-700'
+      }
+    },
+    '&.is-critical': {
+      bg: 'red-100',
+      path: {
+        fill: 'red-700'
+      }
+    },
+    '&.is-warning': {
+      bg: 'yellow-100',
+      path: {
+        fill: 'yellow-800'
+      }
+    },
+    '&.is-info': {
+      bg: 'blue-100',
+      path: {
+        fill: 'blue-600'
+      }
+    },
+    '&.is-major': {
+      bg: 'orange-100',
+      path: {
+        fill: 'orange-700'
+      }
+    },
+    '&.is-minor': {
+      bg: 'yellow-100',
+      path: {
+        fill: 'yellow-800'
+      }
+    },
+    '&.is-warning-neutral': {
+      bg: 'gray-100',
+      path: {
+        fill: 'gray-700'
+      }
+    },
+    '&.is-fatal': {
+      bg: 'gray-700',
+      path: {
+        fill: 'gray-100'
+      }
+    },
+    '&.is-selected.is-selected': {
+      bg: 'white',
+      '& > svg': {
+        path: {
+          fill: 'active'
+        }
+      }
+    }
+  }
+};
 var _default = {
   attachment: _Attachment["default"],
   navBar: _navbar.navBar,
@@ -390,6 +459,7 @@ var _default = {
   callout: _callout["default"],
   table: _table.table,
   tableBase: _tableBase.tableBase,
+  statusIcon: statusIcon,
   box: {
     indeterminateCheckboxIcon: {
       height: '19.25px',

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

@@ -58,6 +58,7 @@ var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox/Scro
 var _Separator = _interopRequireDefault(require("../../components/Separator/Separator.styles"));
 var _Skeleton = _interopRequireDefault(require("../../components/Skeleton/Skeleton.styles"));
 var _Slider = _interopRequireDefault(require("../../components/SliderField/Slider.styles"));
+var _StatusIcon = _interopRequireDefault(require("../../components/StatusIcon/StatusIcon.styles"));
 var _Stepper = _interopRequireDefault(require("../../components/Stepper/Stepper.styles"));
 var _Table = _interopRequireDefault(require("../../components/Table/Table.styles"));
 var _TableBase = _interopRequireDefault(require("../../components/TableBase/TableBase.styles"));
@@ -120,6 +121,7 @@ var _default = _objectSpread(_objectSpread({
   tooltip: _Tooltip["default"],
   treeView: _TreeView["default"]
 }, tab), {}, {
+  statusIcon: _StatusIcon["default"],
   tableBase: _TableBase["default"]
 });
 exports["default"] = _default;

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -225,4 +225,8 @@ export declare const FIGMA_LINKS: {
     searchField: {
         onyx: string;
     };
+    statusIcon: {
+        onyx: string;
+        inRockerButton: string;
+    };
 };

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -231,6 +231,10 @@ var FIGMA_LINKS = {
   },
   searchField: {
     onyx: 'https://www.figma.com/file/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=249-542&p=f&t=ZRXGSYrM1OXJ41QB-0'
+  },
+  statusIcon: {
+    onyx: 'https://www.figma.com/file/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=1516-84&p=f&t=1IrTSMDCAftH6Roq-0',
+    inRockerButton: 'https://www.figma.com/file/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=1516-498&t=TcHspIxapoPWqWJC-4'
   }
 };
 exports.FIGMA_LINKS = FIGMA_LINKS;

package/lib/cjs/utils/devUtils/constants/statuses.js

@@ -4,11 +4,23 @@ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/obje
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _default = {
+exports.statusIcon = exports["default"] = void 0;
+var statuses = {
   DEFAULT: 'default',
   ERROR: 'error',
   SUCCESS: 'success',
   WARNING: 'warning'
 };
+var statusIcon = {
+  DEFAULT: 'default',
+  CRITICAL: 'critical',
+  MAJOR: 'major',
+  MINOR: 'minor',
+  WARNING_NEUTRAL: 'warningNeutral',
+  INFO: 'info',
+  WARNING: 'warning',
+  FATAL: 'fatal'
+};
+exports.statusIcon = statusIcon;
+var _default = statuses;
 exports["default"] = _default;

package/lib/components/RockerButton/RockerButton.js

@@ -57,6 +57,7 @@ export var RockerButton = /*#__PURE__*/forwardRef(function (props, ref) {
     focusRingClass: "is-focused"
   }, ___EmotionJSX(Box, _extends({
     as: "button",
+    isRow: true,
     className: classNames,
     variant: "variants.rockerButton.thumbSwitch",
     ref: rockerButtonRef,