@pingux/astro 2.171.0-alpha.0 → 2.172.0

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

@@ -0,0 +1,207 @@
+"use strict";
+
+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");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+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 _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Sizes = exports.Default = exports.CommonlyUsed = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _storybookAddonDesigns = require("storybook-addon-designs");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
+var _iconSizeProps = require("../../utils/docUtils/iconSizeProps");
+var _IconSymbol = _interopRequireDefault(require("./IconSymbol.mdx"));
+var _react2 = require("@emotion/react");
+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 _default = exports["default"] = {
+  title: 'Components/MaterialSymbolIcon',
+  component: _index.Icon,
+  decorators: [_storybookAddonDesigns.withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_IconSymbol["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], 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/'
+    }
+  }, _iconSizeProps.sizeArgTypes),
+  args: {
+    icon: 'disabled_by_default',
+    className: 'material-symbols-outlined',
+    size: 'md'
+  }
+};
+var Default = exports.Default = function Default(args) {
+  return (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({}, args, {
+    icon: "search",
+    title: {
+      name: 'Search Icon'
+    }
+  }));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.icon["default"]
+  }
+};
+var rowHeadings = ['Size', 'Code Example', 'Icon Example'];
+var Sizes = exports.Sizes = function Sizes() {
+  return (0, _react2.jsx)(_index.Table, null, (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
+    key: "head"
+  }, (0, _map["default"])(rowHeadings).call(rowHeadings, function (head) {
+    return (0, _react2.jsx)(_index.TableCell, {
+      isHeading: true,
+      key: head
+    }, head);
+  }))), (0, _react2.jsx)(_index.TableBody, {
+    sx: {
+      borderBottom: 'unset'
+    }
+  }, (0, _react2.jsx)(_index.TableRow, {
+    height: "80px",
+    bg: "transparent !important"
+  }, (0, _react2.jsx)(_index.TableCell, {
+    justifyContent: "center"
+  }, (0, _react2.jsx)(_index.Text, null, "XXS | 9px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, '<Icon  icon="search" size="xxs"/>')), (0, _react2.jsx)(_index.TableCell, {
+    justifyContent: "center"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: "search",
+    title: {
+      name: 'Search Icon'
+    },
+    size: "xxs"
+  }))), (0, _react2.jsx)(_index.TableRow, {
+    height: "80px",
+    bg: "transparent !important"
+  }, (0, _react2.jsx)(_index.TableCell, {
+    justifyContent: "center"
+  }, (0, _react2.jsx)(_index.Text, null, "XS | 15px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, '<Icon  icon="search" size="xs"/>')), (0, _react2.jsx)(_index.TableCell, {
+    justifyContent: "center"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: "search",
+    size: "xs",
+    title: {
+      name: 'Search Icon'
+    }
+  }))), (0, _react2.jsx)(_index.TableRow, {
+    height: "80px",
+    bg: "transparent !important"
+  }, (0, _react2.jsx)(_index.TableCell, {
+    justifyContent: "center"
+  }, (0, _react2.jsx)(_index.Text, null, "SM | 20px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, '<Icon  icon="search" size="sm"/>')), (0, _react2.jsx)(_index.TableCell, {
+    justifyContent: "center"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: "search",
+    size: "sm",
+    title: {
+      name: 'Search Icon'
+    }
+  }))), (0, _react2.jsx)(_index.TableRow, {
+    height: "80px",
+    bg: "transparent !important"
+  }, (0, _react2.jsx)(_index.TableCell, {
+    justifyContent: "center"
+  }, (0, _react2.jsx)(_index.Text, null, "MD | 25px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, '<Icon  icon="search" size="md"/>')), (0, _react2.jsx)(_index.TableCell, {
+    justifyContent: "center"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: "search",
+    size: "md",
+    title: {
+      name: 'Search Icon'
+    }
+  })))));
+};
+var CommonlyUsed = exports.CommonlyUsed = function CommonlyUsed() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: "account_circle",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Account Icon'
+    },
+    hasFill: true
+  })), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: "groups",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Account Group Icon'
+    },
+    hasFill: true
+  })), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: "lock",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Lock Icon'
+    },
+    hasFill: true
+  })), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: "search",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Search Icon'
+    },
+    hasFill: true
+  })), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: "notifications",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Notification Icon'
+    },
+    hasFill: true
+  })));
+};

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -103,44 +103,44 @@ declare const useGetTheme: () => {
     icons: {
         pingLogoHorizontalSmall: import("react/jsx-runtime").JSX.Element;
         aic: (props: any) => import("react/jsx-runtime").JSX.Element;
-        applicationsIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        Ascending: import("@pingux/mdi-react").MdiReactIconComponentType;
-        authenticationIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        clipboard: import("@pingux/mdi-react").MdiReactIconComponentType;
-        CreateIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        daVinci: import("@pingux/mdi-react").MdiReactIconComponentType;
-        DefaultCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
-        Descending: import("@pingux/mdi-react").MdiReactIconComponentType;
-        popoverMenuIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        ErrorCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
-        integrationsIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiAccountCog: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiAccountMultiple: import("@pingux/mdi-react").MdiReactIconComponentType;
+        applicationsIcon: string;
+        Ascending: string;
+        authenticationIcon: string;
+        clipboard: string;
+        CreateIcon: string;
+        daVinci: string;
+        DefaultCircle: string;
+        Descending: string;
+        popoverMenuIcon: string;
+        ErrorCircle: string;
+        integrationsIcon: string;
+        listViewMenu: string;
+        mdiAccountCog: string;
+        mdiAccountMultiple: string;
         mdiEarth: import("@pingux/mdi-react").MdiReactIconComponentType;
         mdiEmoticonHappyOutline: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiFingerprint: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiPlayCircleIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiScaleBalance: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiShoCard: import("@pingux/mdi-react").MdiReactIconComponentType;
+        mdiFingerprint: string;
+        mdiPlayCircleIcon: string;
+        mdiScaleBalance: string;
+        mdiShoCard: string;
         mdiTransitConnectionVariant: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiViewDashboard: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiWeb: import("@pingux/mdi-react").MdiReactIconComponentType;
-        MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
-        MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
+        mdiViewDashboard: string;
+        mdiWeb: string;
+        MenuDown: string;
+        MenuUp: string;
         monitoringIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        openInNew: import("@pingux/mdi-react").MdiReactIconComponentType;
-        overviewIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        p1verify: import("@pingux/mdi-react").MdiReactIconComponentType;
+        openInNew: string;
+        overviewIcon: string;
+        p1verify: string;
         pam: (props: any) => import("react/jsx-runtime").JSX.Element;
-        PingAuthorize: import("@pingux/mdi-react").MdiReactIconComponentType;
+        PingAuthorize: string;
         protect: (props: any) => import("react/jsx-runtime").JSX.Element;
-        rocketLaunchIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        shareFeedbackIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        rocketLaunchIcon: string;
+        shareFeedbackIcon: string;
         shieldStar: import("@pingux/mdi-react").MdiReactIconComponentType;
-        SuccessCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
-        userExperienceIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        WarningIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        SuccessCircle: string;
+        userExperienceIcon: string;
+        WarningIcon: string;
     };
     defaultIconColor: string;
     badgeStyles: {

package/lib/cjs/index.d.ts

@@ -1,3 +1,4 @@
+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/cjs/index.js

@@ -1168,6 +1168,7 @@ _Object$defineProperty(exports, "useTreeData", {
     return _reactStately.useTreeData;
   }
 });
+require("@material-symbols/font-400");
 var _AccordionGridGroup = _interopRequireWildcard(require("./components/AccordionGridGroup"));
 _forEachInstanceProperty(_context = _Object$keys(_AccordionGridGroup)).call(_context, function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/icons.d.ts

@@ -1,43 +1,43 @@
 declare const _default: {
     pingLogoHorizontalSmall: import("react/jsx-runtime").JSX.Element;
     aic: (props: any) => import("react/jsx-runtime").JSX.Element;
-    applicationsIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-    Ascending: import("@pingux/mdi-react").MdiReactIconComponentType;
-    authenticationIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-    clipboard: import("@pingux/mdi-react").MdiReactIconComponentType;
-    CreateIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-    daVinci: import("@pingux/mdi-react").MdiReactIconComponentType;
-    DefaultCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
-    Descending: import("@pingux/mdi-react").MdiReactIconComponentType;
-    popoverMenuIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-    ErrorCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
-    integrationsIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-    listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
-    mdiAccountCog: import("@pingux/mdi-react").MdiReactIconComponentType;
-    mdiAccountMultiple: import("@pingux/mdi-react").MdiReactIconComponentType;
+    applicationsIcon: string;
+    Ascending: string;
+    authenticationIcon: string;
+    clipboard: string;
+    CreateIcon: string;
+    daVinci: string;
+    DefaultCircle: string;
+    Descending: string;
+    popoverMenuIcon: string;
+    ErrorCircle: string;
+    integrationsIcon: string;
+    listViewMenu: string;
+    mdiAccountCog: string;
+    mdiAccountMultiple: string;
     mdiEarth: import("@pingux/mdi-react").MdiReactIconComponentType;
     mdiEmoticonHappyOutline: import("@pingux/mdi-react").MdiReactIconComponentType;
-    mdiFingerprint: import("@pingux/mdi-react").MdiReactIconComponentType;
-    mdiPlayCircleIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-    mdiScaleBalance: import("@pingux/mdi-react").MdiReactIconComponentType;
-    mdiShoCard: import("@pingux/mdi-react").MdiReactIconComponentType;
+    mdiFingerprint: string;
+    mdiPlayCircleIcon: string;
+    mdiScaleBalance: string;
+    mdiShoCard: string;
     mdiTransitConnectionVariant: import("@pingux/mdi-react").MdiReactIconComponentType;
-    mdiViewDashboard: import("@pingux/mdi-react").MdiReactIconComponentType;
-    mdiWeb: import("@pingux/mdi-react").MdiReactIconComponentType;
-    MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
-    MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
+    mdiViewDashboard: string;
+    mdiWeb: string;
+    MenuDown: string;
+    MenuUp: string;
     monitoringIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-    openInNew: import("@pingux/mdi-react").MdiReactIconComponentType;
-    overviewIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-    p1verify: import("@pingux/mdi-react").MdiReactIconComponentType;
+    openInNew: string;
+    overviewIcon: string;
+    p1verify: string;
     pam: (props: any) => import("react/jsx-runtime").JSX.Element;
-    PingAuthorize: import("@pingux/mdi-react").MdiReactIconComponentType;
+    PingAuthorize: string;
     protect: (props: any) => import("react/jsx-runtime").JSX.Element;
-    rocketLaunchIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-    shareFeedbackIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+    rocketLaunchIcon: string;
+    shareFeedbackIcon: string;
     shieldStar: import("@pingux/mdi-react").MdiReactIconComponentType;
-    SuccessCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
-    userExperienceIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-    WarningIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+    SuccessCircle: string;
+    userExperienceIcon: string;
+    WarningIcon: string;
 };
 export default _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -4,44 +4,44 @@ export declare const nextGenDarkThemeValues: {
     icons: {
         pingLogoHorizontalSmall: import("react/jsx-runtime").JSX.Element;
         aic: (props: any) => import("react/jsx-runtime").JSX.Element;
-        applicationsIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        Ascending: import("@pingux/mdi-react").MdiReactIconComponentType;
-        authenticationIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        clipboard: import("@pingux/mdi-react").MdiReactIconComponentType;
-        CreateIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        daVinci: import("@pingux/mdi-react").MdiReactIconComponentType;
-        DefaultCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
-        Descending: import("@pingux/mdi-react").MdiReactIconComponentType;
-        popoverMenuIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        ErrorCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
-        integrationsIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiAccountCog: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiAccountMultiple: import("@pingux/mdi-react").MdiReactIconComponentType;
+        applicationsIcon: string;
+        Ascending: string;
+        authenticationIcon: string;
+        clipboard: string;
+        CreateIcon: string;
+        daVinci: string;
+        DefaultCircle: string;
+        Descending: string;
+        popoverMenuIcon: string;
+        ErrorCircle: string;
+        integrationsIcon: string;
+        listViewMenu: string;
+        mdiAccountCog: string;
+        mdiAccountMultiple: string;
         mdiEarth: import("@pingux/mdi-react").MdiReactIconComponentType;
         mdiEmoticonHappyOutline: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiFingerprint: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiPlayCircleIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiScaleBalance: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiShoCard: import("@pingux/mdi-react").MdiReactIconComponentType;
+        mdiFingerprint: string;
+        mdiPlayCircleIcon: string;
+        mdiScaleBalance: string;
+        mdiShoCard: string;
         mdiTransitConnectionVariant: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiViewDashboard: import("@pingux/mdi-react").MdiReactIconComponentType;
-        mdiWeb: import("@pingux/mdi-react").MdiReactIconComponentType;
-        MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
-        MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
+        mdiViewDashboard: string;
+        mdiWeb: string;
+        MenuDown: string;
+        MenuUp: string;
         monitoringIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        openInNew: import("@pingux/mdi-react").MdiReactIconComponentType;
-        overviewIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        p1verify: import("@pingux/mdi-react").MdiReactIconComponentType;
+        openInNew: string;
+        overviewIcon: string;
+        p1verify: string;
         pam: (props: any) => import("react/jsx-runtime").JSX.Element;
-        PingAuthorize: import("@pingux/mdi-react").MdiReactIconComponentType;
+        PingAuthorize: string;
         protect: (props: any) => import("react/jsx-runtime").JSX.Element;
-        rocketLaunchIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        shareFeedbackIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        rocketLaunchIcon: string;
+        shareFeedbackIcon: string;
         shieldStar: import("@pingux/mdi-react").MdiReactIconComponentType;
-        SuccessCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
-        userExperienceIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
-        WarningIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        SuccessCircle: string;
+        userExperienceIcon: string;
+        WarningIcon: string;
     };
     defaultIconColor: string;
     badgeStyles: {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -666,58 +666,56 @@ declare const _default: {
         base: {
             '&.is-default': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    color: string;
                 };
             };
             '&.is-critical': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    color: string;
                 };
             };
             '&.is-warning': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    color: string;
                 };
             };
             '&.is-info': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    color: string;
                 };
             };
             '&.is-major': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    color: string;
                 };
             };
             '&.is-minor': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    color: string;
                 };
             };
             '&.is-warning-neutral': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    color: string;
                 };
             };
             '&.is-fatal': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    color: string;
                 };
             };
             '&.is-selected.is-selected': {
                 bg: string;
-                '& > svg': {
-                    path: {
-                        fill: string;
-                    };
+                span: {
+                    color: string;
                 };
             };
         };

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

@@ -128,58 +128,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'
       }
     }
   }