@pingux/astro 2.170.1-alpha.0 → 2.172.0-alpha.0

package/lib/cjs/components/Icon/IconSymbol.mdx

@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Icon/Icon" />
+
+# Icon
+
+Icons are small images that represent concepts or capabilities that often provide information or lead users to other pages within the application. 
+
+Icon should be:
+- Centrally aligned when used in a group with an appropriate amount of space between them.
+- Paired with text or a tooltip when its intention is not immediately evident. 
+- Relatively sized when used with text.
+
+Icon shouldn’t:
+- Include letters in the icon design.
+- Be randomly scaled to fit the layout.
+
+Regarding sizing, this component uses the **1em x 1em** container by default and maintains the aspect ratios. You can:
+
+- Use the theme to color the icon.
+  
+- Use font icon text from the [Material Symbol Library](https://marella.github.io/material-symbols/demo/)
+
+It is built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the available [props from Theme-UI](https://theme-ui.com/sx-prop).
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+#### Labelling
+
+The Icon component accepts the title prop:
+`title={{ id: 'unique id', name: 'short description of the icon'}}`.
+The `name` will be passed inside title attribute of span element.
+The `id` is optional. If not specified, it will be generated automatically.
+This is needed to make font icon accessible.
+
+#### Screen Readers
+
+If the icon has a title associated with it, the **`aria-labelledby`** attribute is used to provide the label ID.
+
+
+
+

package/lib/cjs/components/Icon/IconSymbol.test.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _IconSymbol = _interopRequireDefault(require("./IconSymbol"));
+var _react3 = require("@emotion/react");
+var testId = 'test-icon';
+var testIcon = 'Search';
+var defaultProps = {
+  'data-testid': testId,
+  icon: testIcon,
+  title: {
+    id: 'title-id',
+    name: 'Search Icon'
+  }
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_IconSymbol["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_IconSymbol["default"], (0, _extends2["default"])({
+      icon: testIcon
+    }, props));
+  }
+});
+test('default icon', function () {
+  getComponent();
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveClass('material-symbols-outlined');
+  _react2.screen.getByText(/search/i);
+});
+test('default icon', function () {
+  getComponent({
+    icon: 'face'
+  });
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveClass('material-symbols-outlined');
+  _react2.screen.getByText(/face/i);
+});
+test('size prop', function () {
+  getComponent({
+    size: 'sm'
+  });
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveStyle('font-size: 20px');
+});
+test('color prop', function () {
+  getComponent({
+    color: 'red'
+  });
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveStyle('color: red');
+});
+test('hasFill prop', function () {
+  getComponent({
+    hasFill: true
+  });
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveStyle("font-variation-settings: 'FILL' 1");
+});
+test('title prop', function () {
+  getComponent();
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveAttribute('title', 'Search Icon');
+});
+test('className prop', function () {
+  var customClass = 'custom-icon-class';
+  getComponent({
+    className: customClass
+  });
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveClass(customClass);
+});

package/lib/cjs/components/Icon/MaterialSymbolIcon.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { IconProps } from '../../types';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn<IconProps>;
+export declare const Sizes: StoryFn;
+export declare const CommonlyUsed: StoryFn;

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: {