@pingux/astro 2.143.0-alpha.0 → 2.143.0-alpha.1

package/lib/cjs/components/TextField/TextField.stories.js

@@ -23,6 +23,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _hooks = require("../../hooks");
 var _useCopyToClipboard = _interopRequireDefault(require("../../hooks/useCopyToClipboard"));
 var _index = require("../../index");
 var _labelModes = require("../../utils/devUtils/constants/labelModes");
@@ -289,6 +290,12 @@ var WithSlots = function WithSlots() {
     top: '5px',
     height: '32px'
   };
+  var onyxButtonSx = {
+    position: 'absolute',
+    right: 0,
+    top: '9px',
+    height: '32px'
+  };
   var containerSx = {
     sx: {
       '& input': {
@@ -296,6 +303,9 @@ var WithSlots = function WithSlots() {
       }
     }
   };
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.TextField, {
     label: "Multiple Addresses",
     labelMode: "float",
@@ -307,7 +317,7 @@ var WithSlots = function WithSlots() {
     slots: {
       inContainer: (0, _react2.jsx)(_CopyButton["default"], {
         onPress: copyAddressesToClipboard,
-        sx: buttonSx,
+        sx: isOnyx ? onyxButtonSx : buttonSx,
         iconProps: {
           sx: {
             path: {
@@ -329,7 +339,7 @@ var WithSlots = function WithSlots() {
     slots: {
       inContainer: (0, _react2.jsx)(_CopyButton["default"], {
         onPress: copyJsonToClipboard,
-        sx: buttonSx,
+        sx: isOnyx ? onyxButtonSx : buttonSx,
         iconProps: {
           sx: {
             path: {

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

@@ -0,0 +1,23 @@
+import { LoaderSize } from '../../types';
+interface UseCircularLoaderProps {
+    size?: LoaderSize;
+    mode?: string;
+    progress?: number;
+    isAstro: boolean;
+    defaultLoaderSize: number;
+}
+export declare const circularSizes: {
+    sm: number;
+    md: number;
+    lg: number;
+};
+declare const useCircularLoader: (props: UseCircularLoaderProps) => {
+    size: LoaderSize;
+    isCircle: boolean;
+    radius: number;
+    center: number;
+    strokeWidth: number;
+    dashLength: number;
+    gapLength: number;
+};
+export default useCircularLoader;

package/lib/cjs/hooks/useCircularLoader/useCircularLoader.js

@@ -0,0 +1,80 @@
+"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.circularSizes = void 0;
+var _parseInt2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-int"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _useTShirtSize2 = _interopRequireDefault(require("../useTShirtSize"));
+var _excluded = ["mode", "size", "isAstro", "defaultLoaderSize", "progress"];
+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 circularSizes = {
+  'sm': 16,
+  'md': 24,
+  'lg': 32
+};
+exports.circularSizes = circularSizes;
+var useCircularLoader = function useCircularLoader(props) {
+  var mode = props.mode,
+    size = props.size,
+    isAstro = props.isAstro,
+    defaultLoaderSize = props.defaultLoaderSize,
+    _props$progress = props.progress,
+    progress = _props$progress === void 0 ? 75 : _props$progress,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useTShirtSize = (0, _useTShirtSize2["default"])({
+      size: size || defaultLoaderSize,
+      sizes: circularSizes
+    }),
+    sizeProps = _useTShirtSize.sizeProps;
+  if (mode === 'dots' || isAstro) {
+    return _objectSpread({
+      size: size || defaultLoaderSize,
+      isCircle: false,
+      radius: 0,
+      center: 0,
+      strokeWidth: 0,
+      dashLength: 0,
+      gapLength: 0
+    }, others);
+  }
+  var parsedSize = (0, _parseInt2["default"])(sizeProps.size, 10);
+  var actualSize = parsedSize * (10 / 12);
+  var strokeWidth = (parsedSize - actualSize) / 2;
+
+  // Calculate the radius, considering the strokeWidth to fit within the given size
+  var radius = (actualSize - strokeWidth) / 2;
+
+  // Center of the circle
+  var center = actualSize / 2;
+
+  // Calculate the circumference
+  var circumference = 2 * Math.PI * radius;
+
+  // Calculate the dash and gap lengths for the progress
+  var dashLength = progress / 100 * circumference;
+  var gapLength = circumference;
+  return _objectSpread({
+    center: center,
+    isCircle: true,
+    radius: radius,
+    strokeWidth: strokeWidth,
+    dashLength: dashLength,
+    gapLength: gapLength,
+    size: actualSize
+  }, others);
+};
+var _default = useCircularLoader;
+exports["default"] = _default;

package/lib/cjs/hooks/useCircularLoader/useCircularLoader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/hooks/useCircularLoader/useCircularLoader.test.js

@@ -0,0 +1,136 @@
+"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");
+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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = require("@testing-library/react");
+var _useCircularLoader = _interopRequireWildcard(require("./useCircularLoader"));
+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 nonCircleProps = {
+  isAstro: true,
+  defaultLoaderSize: 20
+};
+var circleProps = {
+  isAstro: false,
+  defaultLoaderSize: 20
+};
+var defaultProps = {
+  isAstro: false,
+  defaultLoaderSize: 20
+};
+test('astro theme returns isCircle = false ', function () {
+  var _renderHook = (0, _react.renderHook)(function () {
+      return (0, _useCircularLoader["default"])(_objectSpread({}, nonCircleProps));
+    }),
+    result = _renderHook.result;
+  expect(result.current.isCircle).toEqual(false);
+});
+test('mode = "dots" returns  returns isCircle = false ', function () {
+  var _renderHook2 = (0, _react.renderHook)(function () {
+      return (0, _useCircularLoader["default"])(_objectSpread(_objectSpread({}, circleProps), {}, {
+        mode: 'dots'
+      }));
+    }),
+    result = _renderHook2.result;
+  expect(result.current.isCircle).toEqual(false);
+});
+test('numeric calcuations are correct', function () {
+  var _renderHook3 = (0, _react.renderHook)(function () {
+      return (0, _useCircularLoader["default"])(_objectSpread(_objectSpread({}, circleProps), {}, {
+        size: 120
+      }));
+    }),
+    result = _renderHook3.result;
+  var current = result.current;
+  var radius = current.radius,
+    strokeWidth = current.strokeWidth,
+    center = current.center,
+    size = current.size;
+  expect(radius).toEqual(45);
+  expect(center).toEqual(50);
+  expect(strokeWidth).toEqual(10);
+  expect(size).toEqual(100);
+});
+test('returns isCircle = false when mode is "dots"', function () {
+  var _renderHook4 = (0, _react.renderHook)(function () {
+      return (0, _useCircularLoader["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
+        mode: 'dots'
+      }));
+    }),
+    result = _renderHook4.result;
+  expect(result.current.isCircle).toBe(false);
+});
+test('returns isCircle = false when isAstro is true', function () {
+  var _renderHook5 = (0, _react.renderHook)(function () {
+      return (0, _useCircularLoader["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
+        isAstro: true
+      }));
+    }),
+    result = _renderHook5.result;
+  expect(result.current.isCircle).toBe(false);
+});
+test('calculates correct values for circular loader with size "sm"', function () {
+  var _renderHook6 = (0, _react.renderHook)(function () {
+      return (0, _useCircularLoader["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
+        size: 'sm'
+      }));
+    }),
+    result = _renderHook6.result;
+  var size = result.current.size;
+  expect(size).toBeCloseTo(_useCircularLoader.circularSizes.sm * (10 / 12)); // Adjust based on actual calculation
+});
+
+test('calculates correct values for circular loader with size "lg"', function () {
+  var _renderHook7 = (0, _react.renderHook)(function () {
+      return (0, _useCircularLoader["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
+        size: 'lg'
+      }));
+    }),
+    result = _renderHook7.result;
+  var size = result.current.size;
+  expect(size).toBeCloseTo(_useCircularLoader.circularSizes.lg * (10 / 12)); // Adjust based on actual calculation
+});
+
+test('uses defaultLoaderSize when size is not provided', function () {
+  var _renderHook8 = (0, _react.renderHook)(function () {
+      return (0, _useCircularLoader["default"])(_objectSpread({}, defaultProps));
+    }),
+    result = _renderHook8.result;
+  expect(result.current.size).toBe(defaultProps.defaultLoaderSize * (10 / 12));
+});
+test('calculates correct values for custom progress', function () {
+  var _renderHook9 = (0, _react.renderHook)(function () {
+      return (0, _useCircularLoader["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
+        size: 120,
+        progress: 50
+      }));
+    }),
+    result = _renderHook9.result;
+  var _result$current = result.current,
+    dashLength = _result$current.dashLength,
+    gapLength = _result$current.gapLength,
+    radius = _result$current.radius;
+  expect(dashLength).toBeCloseTo(50 / 100 * 2 * Math.PI * radius); // Progress = 50%
+  expect(gapLength).toBeCloseTo(2 * Math.PI * radius);
+});
+test('returns correct size when size is a custom number', function () {
+  var _renderHook10 = (0, _react.renderHook)(function () {
+      return (0, _useCircularLoader["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
+        size: 100
+      }));
+    }),
+    result = _renderHook10.result;
+  expect(result.current.size).toBeCloseTo(100 * (10 / 12)); // Adjust based on actual calculation
+});

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

@@ -1165,9 +1165,6 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         style?: React.CSSProperties | undefined;
         slot?: string | undefined;
         title?: string | undefined;
-        id?: string | undefined;
-        tabIndex?: number | undefined;
-        hidden?: boolean | undefined;
         key?: React.Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -1179,10 +1176,13 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
         placeholder?: string | undefined;
         spellCheck?: (boolean | "false" | "true") | undefined;
+        tabIndex?: number | undefined;
         radioGroup?: string | undefined;
         about?: string | undefined;
         datatype?: string | undefined;
@@ -1484,9 +1484,6 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         style?: React.CSSProperties | undefined;
         slot?: string | undefined;
         title?: string | undefined;
-        id?: string | undefined;
-        tabIndex?: number | undefined;
-        hidden?: boolean | undefined;
         key?: React.Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -1498,10 +1495,13 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
         placeholder?: string | undefined;
         spellCheck?: (boolean | "false" | "true") | undefined;
+        tabIndex?: number | undefined;
         radioGroup?: string | undefined;
         about?: string | undefined;
         datatype?: string | undefined;

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

@@ -6,10 +6,76 @@ export declare const baseState: {
     isCustom: boolean;
 };
 declare const useGetTheme: () => {
+    copyButtonSize: import("../..").IconSize;
+    breadcrumbIconSize: import("../..").IconSize;
+    breadcrumbIconMargin: string;
+    accordionItemMarginLeft: string;
+    pageHeaderTitleMargin: string;
+    defaultLoaderSize: number;
+    activeColor: string;
+    backgroundBaseColor: string;
+    styles: {
+        navButtonEstHeight: number;
+    };
+    icons: {
+        [x: number]: import("@pingux/mdi-react").MdiReactIconComponentType;
+        ErrorCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
+        WarningIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        DefaultCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
+        SuccessCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
+        CreateIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
+        MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
+        pingLogoHorizontalSmall: React.JSX.Element;
+        listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
+        Ascending: import("@pingux/mdi-react").MdiReactIconComponentType;
+        Descending: import("@pingux/mdi-react").MdiReactIconComponentType;
+    };
+    tShirtSizes: {
+        xxs: string;
+        'icon-100': string;
+        xs: string;
+        'icon-200': string;
+        sm: string;
+        'icon-300': string;
+        md: string;
+        'icon-400': string;
+        'icon-500': string;
+        'icon-600': string;
+        'icon-700': string;
+        'icon-800': string;
+        'icon-900': string;
+    };
+    iconBadgeCircleColor: string;
+    iconWrapperSizes: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    defaultIconColor: string;
+    accordionItemDefaultLabelTag: string;
+    iFrameContentDivBackgroundColor: string;
+    rockerButtonGap: string;
+    themeState: {
+        isOnyx: boolean;
+        isAstro: boolean;
+        isOnyxDark: boolean;
+        isCustom: boolean;
+    };
+    name: string;
+} | {
+    accordionItemDefaultLabelTag: string;
+    activeColor: string;
+    backgroundBaseColor: string;
     icons: {
         [x: number]: import("@pingux/mdi-react").MdiReactIconComponentType;
+        ErrorCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
+        WarningIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        DefaultCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
+        SuccessCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
         MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
         MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
+        CreateIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
         pingLogoHorizontalSmall: React.JSX.Element;
         listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
         Ascending: import("@pingux/mdi-react").MdiReactIconComponentType;
@@ -24,12 +90,21 @@ declare const useGetTheme: () => {
         sm: string;
         md: string;
     };
+    iconBadgeCircleColor: string;
     iconWrapperSizes: {
         sm: number;
         md: number;
         lg: number;
     };
+    iFrameContentDivBackgroundColor: string;
+    copyButtonSize: import("../..").IconSize;
+    pageHeaderTitleMargin: string;
+    breadcrumbIconSize: import("../..").IconSize;
+    breadcrumbIconMargin: number;
     rockerButtonGap: string;
+    accordionItemMarginLeft: string;
+    defaultLoaderSize: number;
+    defaultIconColor: string;
     name: string;
     themeState: {
         isAstro: boolean;

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

@@ -91,8 +91,6 @@ declare const usePagination: (props: PaginationProps) => {
         style?: import("react").CSSProperties | undefined;
         slot?: string | undefined;
         title?: string | undefined;
-        id?: string | undefined;
-        hidden?: boolean | undefined;
         key?: import("react").Key | null | undefined;
         disabled?: boolean | undefined;
         formAction?: string | undefined;
@@ -113,6 +111,8 @@ declare const usePagination: (props: PaginationProps) => {
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
         placeholder?: string | undefined;
@@ -420,8 +420,6 @@ declare const usePagination: (props: PaginationProps) => {
         style?: import("react").CSSProperties | undefined;
         slot?: string | undefined;
         title?: string | undefined;
-        id?: string | undefined;
-        hidden?: boolean | undefined;
         key?: import("react").Key | null | undefined;
         disabled?: boolean | undefined;
         formAction?: string | undefined;
@@ -442,6 +440,8 @@ declare const usePagination: (props: PaginationProps) => {
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
         placeholder?: string | undefined;

package/lib/cjs/styles/colors.d.ts

@@ -103,6 +103,9 @@ declare const allColors: {
     badge: {
         textColor: string;
         background: string;
+        readOnly: string;
+        iconBadge: string;
+        iconBadgeFill: string;
     };
     white: string;
     neutral: {
@@ -213,6 +216,9 @@ export declare const getBaseHexColor: (colorName: string) => string | {
     badge: {
         textColor: string;
         background: string;
+        readOnly: string;
+        iconBadge: string;
+        iconBadgeFill: string;
     };
     white: string;
     neutral: {

package/lib/cjs/styles/colors.js

@@ -144,7 +144,10 @@ var shadow = (0, _chromaJs["default"])(neutral[10]).alpha(0.25).hex();
 exports.shadow = shadow;
 var badge = {
   textColor: 'white',
-  background: neutral[10]
+  background: neutral[10],
+  readOnly: 'white',
+  iconBadge: 'white',
+  iconBadgeFill: accent[40]
 };
 var tooltip = accent[20];
 var allColors = {

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

@@ -5,6 +5,42 @@ export declare const overrides: {
     disabled: string;
 };
 export declare const colors: {
+    twoTone: {
+        bg: {
+            orange: string;
+            cyan: string;
+            green: string;
+            purple: string;
+            pink: string;
+            red: string;
+            yellow: string;
+            teal: string;
+            blue: string;
+            indigo: string;
+            lightBlue: string;
+            lightPink: string;
+            lightGreen: string;
+            lightYellow: string;
+            lightIndigo: string;
+        };
+        text: {
+            orange: string;
+            cyan: string;
+            green: string;
+            purple: string;
+            pink: string;
+            red: string;
+            yellow: string;
+            teal: string;
+            blue: string;
+            indigo: string;
+            lightBlue: string;
+            lightPink: string;
+            lightGreen: string;
+            lightYellow: string;
+            lightIndigo: string;
+        };
+    };
     light: string;
     secondary: string;
     dark: string;

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

@@ -41,8 +41,8 @@ var badge = {
   background: _colorTokens.nextGenColors['gray-800'],
   textColor: _colorTokens.nextGenColors['gray-100']
 };
-var iconWrapper = {
-  wrapper: {
+var twoTone = {
+  bg: {
     orange: _colorTokens.nextGenColors['orange-500'],
     cyan: _colorTokens.nextGenColors['cyan-500'],
     green: _colorTokens.nextGenColors['green-500'],
@@ -59,6 +59,26 @@ var iconWrapper = {
     lightYellow: _colorTokens.nextGenColors['yellow-800'],
     lightIndigo: _colorTokens.nextGenColors['indigo-700']
   },
+  text: {
+    orange: 'black',
+    cyan: 'black',
+    green: 'black',
+    purple: 'black',
+    pink: 'black',
+    red: 'black',
+    yellow: 'black',
+    teal: 'black',
+    blue: 'black',
+    indigo: 'black',
+    lightBlue: 'black',
+    lightPink: 'black',
+    lightGreen: 'black',
+    lightYellow: 'black',
+    lightIndigo: 'black'
+  }
+};
+var iconWrapper = {
+  wrapper: _objectSpread({}, twoTone.bg),
   icon: {
     orange: 'black',
     cyan: 'black',
@@ -81,6 +101,7 @@ var colors = _objectSpread(_objectSpread({
   border: border,
   iconWrapper: iconWrapper
 }, overrides), {}, {
+  twoTone: twoTone,
   light: _colorTokens.nextGenColors['gray-900'],
   secondary: _colorTokens.nextGenColors['gray-400'],
   dark: _colorTokens.nextGenColors['gray-400'],

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

@@ -1,6 +1,11 @@
 /// <reference types="react" />
 declare const _default: {
     pingLogoHorizontalSmall: import("react").JSX.Element;
+    ErrorCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
+    WarningIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+    DefaultCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
+    SuccessCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
+    CreateIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
     MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
     MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
     listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;

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

@@ -1,13 +1,28 @@
 /// <reference types="react" />
 export declare const nextGenDarkThemeValues: {
+    backgroundBaseColor: string;
+    iFrameContentDivBackgroundColor: string;
     icons: {
         pingLogoHorizontalSmall: import("react").JSX.Element;
+        ErrorCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
+        WarningIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        DefaultCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
+        SuccessCircle: import("@pingux/mdi-react").MdiReactIconComponentType;
+        CreateIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
         MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
         MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
         listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
         Ascending: import("@pingux/mdi-react").MdiReactIconComponentType;
         Descending: import("@pingux/mdi-react").MdiReactIconComponentType;
     };
+    defaultIconColor: string;
+    copyButtonSize: import("../../../..").IconSize;
+    breadcrumbIconSize: import("../../../..").IconSize;
+    breadcrumbIconMargin: string;
+    accordionItemMarginLeft: string;
+    pageHeaderTitleMargin: string;
+    defaultLoaderSize: number;
+    activeColor: string;
     styles: {
         navButtonEstHeight: number;
     };
@@ -26,10 +41,12 @@ export declare const nextGenDarkThemeValues: {
         'icon-800': string;
         'icon-900': string;
     };
+    iconBadgeCircleColor: string;
     iconWrapperSizes: {
         sm: number;
         md: number;
         lg: number;
     };
+    accordionItemDefaultLabelTag: string;
     rockerButtonGap: string;
 };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.js

@@ -18,7 +18,13 @@ var _customProperties = require("../../../themes/next-gen/customProperties");
 var _icons = _interopRequireDefault(require("./icons"));
 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 backgroundBaseColor = '#23282e';
+var defaultIconColor = 'gray-400';
+var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var nextGenDarkThemeValues = _objectSpread(_objectSpread({}, _customProperties.nextGenThemeValues), {}, {
-  icons: _icons["default"]
+  backgroundBaseColor: backgroundBaseColor,
+  iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
+  icons: _icons["default"],
+  defaultIconColor: defaultIconColor
 });
 exports.nextGenDarkThemeValues = nextGenDarkThemeValues;