@pingux/astro 2.171.0-alpha.0 → 2.172.0

package/lib/components/Icon/MaterialSymbolIcon.stories.js

@@ -0,0 +1,200 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+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 React from 'react';
+import { withDesign } from 'storybook-addon-designs';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Box, Icon, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
+import { sizeArgTypes } from '../../utils/docUtils/iconSizeProps';
+import IconReadme from './IconSymbol.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/MaterialSymbolIcon',
+  component: Icon,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
+  argTypes: _objectSpread({
+    icon: {
+      control: {
+        type: {
+          name: 'string'
+        }
+      },
+      description: 'The font icon to render. List of font icons at https://marella.github.io/material-symbols/demo/'
+    }
+  }, sizeArgTypes),
+  args: {
+    icon: 'disabled_by_default',
+    className: 'material-symbols-outlined',
+    size: 'md'
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Icon, _extends({}, args, {
+    icon: "search",
+    title: {
+      name: 'Search Icon'
+    }
+  }));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.icon["default"]
+  }
+};
+var rowHeadings = ['Size', 'Code Example', 'Icon Example'];
+export var Sizes = function Sizes() {
+  return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, _mapInstanceProperty(rowHeadings).call(rowHeadings, function (head) {
+    return ___EmotionJSX(TableCell, {
+      isHeading: true,
+      key: head
+    }, head);
+  }))), ___EmotionJSX(TableBody, {
+    sx: {
+      borderBottom: 'unset'
+    }
+  }, ___EmotionJSX(TableRow, {
+    height: "80px",
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Text, null, "XXS | 9px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '<Icon  icon="search" size="xxs"/>')), ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: "search",
+    title: {
+      name: 'Search Icon'
+    },
+    size: "xxs"
+  }))), ___EmotionJSX(TableRow, {
+    height: "80px",
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Text, null, "XS | 15px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '<Icon  icon="search" size="xs"/>')), ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: "search",
+    size: "xs",
+    title: {
+      name: 'Search Icon'
+    }
+  }))), ___EmotionJSX(TableRow, {
+    height: "80px",
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Text, null, "SM | 20px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '<Icon  icon="search" size="sm"/>')), ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: "search",
+    size: "sm",
+    title: {
+      name: 'Search Icon'
+    }
+  }))), ___EmotionJSX(TableRow, {
+    height: "80px",
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Text, null, "MD | 25px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '<Icon  icon="search" size="md"/>')), ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: "search",
+    size: "md",
+    title: {
+      name: 'Search Icon'
+    }
+  })))));
+};
+export var CommonlyUsed = function CommonlyUsed() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: "account_circle",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Account Icon'
+    },
+    hasFill: true
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: "groups",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Account Group Icon'
+    },
+    hasFill: true
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: "lock",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Lock Icon'
+    },
+    hasFill: true
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: "search",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Search Icon'
+    },
+    hasFill: true
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: "notifications",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Notification Icon'
+    },
+    hasFill: true
+  })));
+};

package/lib/index.js

@@ -1,7 +1,7 @@
 // NOTE: Named exports must be unique across files, otherwise collisions will occur.
 
 /* eslint-disable import/export */
-
+import '@material-symbols/font-400';
 export { default as AccordionGridGroup } from './components/AccordionGridGroup';
 export * from './components/AccordionGridGroup';
 export { default as AccordionGridItem } from './components/AccordionGridItem';

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

@@ -120,58 +120,56 @@ var statusIcon = {
   base: {
     '&.is-default': {
       bg: 'gray-100',
-      path: {
-        fill: 'black'
+      span: {
+        color: 'black'
       }
     },
     '&.is-critical': {
       bg: 'red-500',
-      path: {
-        fill: 'black'
+      span: {
+        color: 'black'
       }
     },
     '&.is-warning': {
       bg: 'yellow-500',
-      path: {
-        fill: 'black'
+      span: {
+        color: 'black'
       }
     },
     '&.is-info': {
       bg: 'blue-500',
-      path: {
-        fill: 'black'
+      span: {
+        color: 'black'
       }
     },
     '&.is-major': {
       bg: 'orange-500',
-      path: {
-        fill: 'black'
+      span: {
+        color: 'black'
       }
     },
     '&.is-minor': {
       bg: 'yellow-500',
-      path: {
-        fill: 'black'
+      span: {
+        color: 'black'
       }
     },
     '&.is-warning-neutral': {
       bg: 'gray-700',
-      path: {
-        fill: 'gray-100'
+      span: {
+        color: 'gray-100'
       }
     },
     '&.is-fatal': {
       bg: 'gray-100',
-      path: {
-        fill: 'gray-700'
+      span: {
+        color: 'gray-700'
       }
     },
     '&.is-selected.is-selected': {
       bg: 'black',
-      '& > svg': {
-        path: {
-          fill: 'active'
-        }
+      span: {
+        color: 'active'
       }
     }
   }

package/lib/styles/themeOverrides/onyxSideNav.js

@@ -206,6 +206,9 @@ var navBar = {
     },
     '> div > svg': {
       fill: '#455469'
+    },
+    '> span.material-symbols-outlined': {
+      color: '#455469'
     }
   },
   navBarItemBody: {

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', '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', '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'];
+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', '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'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],
@@ -21,7 +21,8 @@ export var astroBlacklistStory = {
   Avatar: ['Size Variation', 'Color Variation', 'Icon Variation', 'Square Variation', 'Logo Variation'],
   Text: ['Onyx'],
   Loader: ['Circular', 'Custom Circular'],
-  Card: ['With Shadow']
+  Card: ['With Shadow'],
+  MaterialSymbolIcon: ['Default', 'Sizes', 'Commonly Used']
 };
 export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];
 export default nextGenConvertedComponents;

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

@@ -1,43 +1,12 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _icons;
-import AccountCheckIcon from '@pingux/mdi-react/AccountCheckOutlineIcon';
-import mdiAccountCog from '@pingux/mdi-react/AccountCogIcon';
-import AccountMultipleOutlineIcon from '@pingux/mdi-react/AccountMultipleOutlineIcon';
-import AlertCircleOutlineIcon from '@pingux/mdi-react/AlertCircleOutlineIcon';
-import AlertOutlineIcon from '@pingux/mdi-react/AlertOutlineIcon';
-import AppsIcon from '@pingux/mdi-react/AppsIcon';
-import ArrowDownIcon from '@pingux/mdi-react/ArrowDownIcon';
-import ArrowUpIcon from '@pingux/mdi-react/ArrowUpIcon';
-import CardAccountDetailsOutlineIcon from '@pingux/mdi-react/CardAccountDetailsOutlineIcon';
-import ChatIcon from '@pingux/mdi-react/ChatIcon';
-import DefaultCircle from '@pingux/mdi-react/CheckboxBlankCircleOutlineIcon';
-import CheckCircleOutlineIcon from '@pingux/mdi-react/CheckCircleOutlineIcon';
-import ChevronDownIcon from '@pingux/mdi-react/ChevronDownIcon';
-import ChevronUpIcon from '@pingux/mdi-react/ChevronUpIcon';
-import Clipboard from '@pingux/mdi-react/ClipboardIcon';
-import CloseOctagonOutlineIcon from '@pingux/mdi-react/CloseOctagonOutlineIcon';
-import CreateOutlineIcon from '@pingux/mdi-react/CreateOutlineIcon';
-import DotsHorizontalIcon from '@pingux/mdi-react/DotsHorizontalIcon';
 import EmoticonHappy from '@pingux/mdi-react/EmoticonHappyOutlineIcon';
-import FileTreeIcon from '@pingux/mdi-react/FileTreeOutlineIcon';
-import Fingerprint from '@pingux/mdi-react/FingerprintIcon';
-import GlobeIcon from '@pingux/mdi-react/GlobeIcon';
-import InformationOutlineIcon from '@pingux/mdi-react/InformationOutlineIcon';
-import KeyOutline from '@pingux/mdi-react/KeyOutlineIcon';
-import OpenInNew from '@pingux/mdi-react/OpenInNewIcon';
-import PaletteOutlineIcon from '@pingux/mdi-react/PaletteOutlineIcon';
-import PlayCircleOutline from '@pingux/mdi-react/PlayCircleOutlineIcon';
-import RocketLaunchIcon from '@pingux/mdi-react/RocketLaunchIcon';
-import ScaleBalance from '@pingux/mdi-react/ScaleBalanceIcon';
 import Settings from '@pingux/mdi-react/SettingsOutlineIcon';
 import ShieldStarOutlineIcon from '@pingux/mdi-react/ShieldStarOutlineIcon';
 import ShowChartIcon from '@pingux/mdi-react/ShowChartIcon';
 import TransitConnection from '@pingux/mdi-react/TransitConnectionVariantIcon';
-import ViewDashboard from '@pingux/mdi-react/ViewDashboardIcon';
-import DashboardIcon from '@pingux/mdi-react/ViewDashboardOutlineIcon';
-import WidgetsOutlineIcon from '@pingux/mdi-react/WidgetsOutlineIcon';
 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, InformationOutlineIcon), statuses.ERROR, AlertCircleOutlineIcon), statuses.SUCCESS, CheckCircleOutlineIcon), statuses.WARNING, AlertOutlineIcon), statusIcon.CRITICAL, AlertCircleOutlineIcon), statusIcon.FATAL, CloseOctagonOutlineIcon), statusIcon.INFO, InformationOutlineIcon), statusIcon.MAJOR, ArrowUpIcon), statusIcon.MINOR, ArrowDownIcon), statusIcon.WARNING_NEUTRAL, AlertOutlineIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", AppsIcon), "Ascending", ArrowUpIcon), "authenticationIcon", CheckCircleOutlineIcon), "clipboard", Clipboard), "CreateIcon", CreateOutlineIcon), "daVinci", FileTreeIcon), "DefaultCircle", DefaultCircle), "Descending", ArrowDownIcon), "popoverMenuIcon", DotsHorizontalIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "ErrorCircle", AlertCircleOutlineIcon), "integrationsIcon", WidgetsOutlineIcon), "listViewMenu", DotsHorizontalIcon), "mdiAccountCog", mdiAccountCog), "mdiAccountMultiple", AccountMultipleOutlineIcon), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", Fingerprint), "mdiPlayCircleIcon", PlayCircleOutline), "mdiScaleBalance", ScaleBalance), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiShoCard", CardAccountDetailsOutlineIcon), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", ViewDashboard), "mdiWeb", GlobeIcon), "MenuDown", ChevronDownIcon), "MenuUp", ChevronUpIcon), "monitoringIcon", ShowChartIcon), "openInNew", OpenInNew), "overviewIcon", DashboardIcon), "p1verify", AccountCheckIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "pam", PamIcon), "PingAuthorize", KeyOutline), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", RocketLaunchIcon), "shareFeedbackIcon", ChatIcon), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", CheckCircleOutlineIcon), "userExperienceIcon", PaletteOutlineIcon), "WarningIcon", AlertOutlineIcon));
+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'), "integrationsIcon", 'widgets'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", 'fingerprint'), "mdiPlayCircleIcon", 'play_circle'), "mdiScaleBalance", 'balance'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "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'), "p1verify", 'person_check'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "pam", PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", 'rocket_launch'), "shareFeedbackIcon", 'chat'), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), "WarningIcon", 'warning'));
 export default icons;

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

@@ -316,10 +316,8 @@ var rockerButton = {
       backgroundColor: 'active',
       '& > div.status-icon': {
         bg: 'white',
-        '& > svg': {
-          path: {
-            fill: 'active'
-          }
+        span: {
+          color: 'active'
         }
       }
     },
@@ -358,58 +356,64 @@ var statusIcon = {
   base: {
     '&.is-default': {
       bg: 'gray-100',
-      path: {
-        fill: 'gray-700'
+      span: {
+        fontSize: 'md',
+        color: 'gray-700'
       }
     },
     '&.is-critical': {
       bg: 'red-100',
-      path: {
-        fill: 'red-700'
+      span: {
+        fontSize: 'md',
+        color: 'red-700'
       }
     },
     '&.is-warning': {
       bg: 'yellow-100',
-      path: {
-        fill: 'yellow-800'
+      span: {
+        fontSize: 'md',
+        color: 'yellow-800'
       }
     },
     '&.is-info': {
       bg: 'blue-100',
-      path: {
-        fill: 'blue-600'
+      span: {
+        fontSize: 'md',
+        color: 'blue-600'
       }
     },
     '&.is-major': {
       bg: 'orange-100',
-      path: {
-        fill: 'orange-700'
+      span: {
+        fontSize: 'md',
+        color: 'orange-700'
       }
     },
     '&.is-minor': {
       bg: 'yellow-100',
-      path: {
-        fill: 'yellow-800'
+      span: {
+        fontSize: 'md',
+        color: 'yellow-800'
       }
     },
     '&.is-warning-neutral': {
       bg: 'gray-100',
-      path: {
-        fill: 'gray-700'
+      span: {
+        fontSize: 'md',
+        color: 'gray-700'
       }
     },
     '&.is-fatal': {
       bg: 'gray-700',
-      path: {
-        fill: 'gray-100'
+      span: {
+        fontSize: 'md',
+        color: 'gray-100'
       }
     },
     '&.is-selected.is-selected': {
       bg: 'white',
-      '& > svg': {
-        path: {
-          fill: 'active'
-        }
+      span: {
+        color: 'active'
       }
     }
   }