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

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

@@ -213,6 +213,49 @@ declare const buttons: {
                 };
             };
         };
+        inverted: {
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            '&.is-hovered': {
+                border: string;
+                borderColor: string;
+                backgroundColor: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+        };
+        hintButton: {
+            path: {
+                fill: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-hovered': {
+                path: {
+                    fill: string;
+                };
+                backgroundColor: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
         nextGen: {
             '&.is-hovered': {
                 path: {
@@ -252,6 +295,29 @@ declare const buttons: {
                 };
             };
         };
+        modalCloseButton: {
+            path: {
+                fill: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-hovered': {
+                path: {
+                    fill: string;
+                };
+                backgroundColor: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
         messageCloseButton: {
             '&.is-hovered': {
                 backgroundColor: string;

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

@@ -41,8 +41,25 @@ var baseIconButton = {
     }
   }
 };
+var hintButton = _objectSpread({}, baseIconButton);
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
+  inverted: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    borderColor: 'transparent !important',
+    path: {
+      fill: 'black'
+    },
+    '&.is-pressed': {
+      backgroundColor: _chromaJs["default"].mix('white', 'black', 0.125, 'rgb').hex(),
+      borderColor: _chromaJs["default"].mix('white', 'black', 0.125, 'rgb').hex()
+    },
+    '&.is-hovered': {
+      border: 'none !important',
+      borderColor: 'none !important',
+      backgroundColor: 'white'
+    }
+  }),
+  hintButton: hintButton,
   nextGen: {
     '&.is-hovered': {
       path: {
@@ -67,6 +84,7 @@ var iconButtons = {
       backgroundColor: 'gray-700'
     }
   }),
+  modalCloseButton: _objectSpread({}, baseIconButton),
   messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-hovered': {
       backgroundColor: '#455469'

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

@@ -32,6 +32,14 @@ declare const _default: {
             color: string;
         };
     };
+    label: {
+        radioGroup: {
+            color: string;
+        };
+        radio: {
+            color: string;
+        };
+    };
     select: {
         option: {
             backgroundColor: string;
@@ -64,5 +72,12 @@ declare const _default: {
             color: string;
         };
     };
+    switch: {
+        thumb: {
+            '&.is-selected': {
+                bg: string;
+            };
+        };
+    };
 };
 export default _default;

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

@@ -44,6 +44,14 @@ var checkbox = {
   color: 'text.primary'
 };
 exports.checkbox = checkbox;
+var label = {
+  radioGroup: {
+    color: 'white'
+  },
+  radio: {
+    color: 'white'
+  }
+};
 var selectOption = {
   backgroundColor: 'background.base',
   color: 'text.primary',
@@ -60,12 +68,21 @@ var selectOption = {
     bg: 'active'
   }
 };
+var switchable = {
+  thumb: {
+    '&.is-selected': {
+      bg: 'black'
+    }
+  }
+};
 var _default = {
   input: _input.input,
   checkbox: checkbox,
   radio: radio,
+  label: label,
   select: _objectSpread(_objectSpread({}, select), {}, {
     option: _objectSpread({}, selectOption)
-  })
+  }),
+  "switch": switchable
 };
 exports["default"] = _default;

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

@@ -5,12 +5,4 @@ export declare const fieldControlWrapper: {
         borderColor: string;
         backgroundColor: string;
     };
-    '&.is-read-only': {
-        '> input': {
-            backgroundColor: string;
-        };
-        '> textarea': {
-            backgroundColor: string;
-        };
-    };
 };

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

@@ -27,20 +27,20 @@ var fieldControlWrapper = {
   '> textarea': {
     borderColor: 'border.input',
     backgroundColor: 'background.base'
-  },
-  '&.is-read-only': {
-    '> input': {
-      backgroundColor: 'background.base'
-    },
-    '> textarea': {
-      backgroundColor: 'background.base'
-    }
   }
 };
 exports.fieldControlWrapper = fieldControlWrapper;
 input.fieldControlWrapper = _objectSpread({}, fieldControlWrapper);
 input.multivaluesWrapper = {
-  backgroundColor: 'background.base'
+  backgroundColor: 'background.base',
+  '&.is-read-only': {
+    boxShadow: 'inset 0 0 0 100px #30373f',
+    border: '1px solid',
+    borderColor: 'border.input',
+    '> input': {
+      backgroundColor: 'disabled'
+    }
+  }
 };
 input.promptInput = {
   color: 'gray-100'

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

@@ -1,4 +1,18 @@
 declare const _default: {
+    app: {
+        color: string;
+        '&.is-hovered': {
+            textDecoration: string;
+            color: string;
+        };
+        '&.is-pressed': {
+            color: string;
+            textDecoration: string;
+        };
+        '&.is-visited': {
+            color: string;
+        };
+    };
     nextGen: {
         color: string;
         '&.is-hovered': {

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

@@ -47,7 +47,22 @@ var footerLink = _objectSpread(_objectSpread({}, nextGen), {}, {
 var footerEALink = _objectSpread(_objectSpread({}, nextGen), {}, {
   color: 'gray-400'
 });
+var app = {
+  color: 'blue-400',
+  '&.is-hovered': {
+    textDecoration: 'underline',
+    color: 'blue-300'
+  },
+  '&.is-pressed': {
+    color: 'blue-300',
+    textDecoration: 'underline'
+  },
+  '&.is-visited': {
+    color: 'purple-100'
+  }
+};
 var _default = {
+  app: app,
   nextGen: nextGen,
   sideNav: sideNav,
   footerLinks: footerLinks,

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

@@ -463,6 +463,11 @@ declare const _default: {
             color: string;
         };
     };
+    overlayPanel: {
+        container: {
+            boxShadow: string;
+        };
+    };
     dataTable: {
         selectableTableRow: {
             '&.is-selected': {

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

@@ -170,6 +170,11 @@ var _default = {
   skeleton: _skeleton["default"],
   footer: _footer.footer,
   tooltip: tooltip,
+  overlayPanel: {
+    container: {
+      boxShadow: 'none'
+    }
+  },
   dataTable: {
     selectableTableRow: {
       '&.is-selected': {

package/lib/cjs/styles/themes/astro/customProperties/icons.d.ts

@@ -1,8 +1,13 @@
 /// <reference types="react" />
 declare const _default: {
     [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: import("react").JSX.Element;
     listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
     Ascending: import("@pingux/mdi-react").MdiReactIconComponentType;

package/lib/cjs/styles/themes/astro/customProperties/icons.js

@@ -16,8 +16,10 @@ var _AlertIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertIcon"));
 var _AlertOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertOutlineIcon"));
 var _ArrowDownIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowDownIcon"));
 var _ArrowUpIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowUpIcon"));
+var _CheckboxBlankCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckboxBlankCircleOutlineIcon"));
 var _CheckCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleIcon"));
 var _CloseOctagonOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseOctagonOutlineIcon"));
+var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
 var _InformationIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationIcon"));
 var _InformationOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationOutlineIcon"));
 var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
@@ -25,11 +27,16 @@ var _MenuUpIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuUpIcon")
 var _MoreVertIcon = _interopRequireDefault(require("@pingux/mdi-react/MoreVertIcon"));
 var _logos = require("../../../../utils/devUtils/constants/logos");
 var _statuses = _interopRequireWildcard(require("../../../../utils/devUtils/constants/statuses"));
-var _MenuDown$MenuUp$stat;
+var _ErrorCircle$WarningI;
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var _default = (_MenuDown$MenuUp$stat = {
+var _default = (_ErrorCircle$WarningI = {
+  ErrorCircle: _AlertCircleIcon["default"],
+  WarningIcon: _AlertOutlineIcon["default"],
+  DefaultCircle: _CheckboxBlankCircleOutlineIcon["default"],
+  SuccessCircle: _CheckCircleIcon["default"],
   MenuDown: _MenuDownIcon["default"],
-  MenuUp: _MenuUpIcon["default"]
-}, (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].DEFAULT, _InformationIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].ERROR, _AlertCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].SUCCESS, _CheckCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].WARNING, _AlertIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.INFO, _InformationOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.CRITICAL, _AlertCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.MAJOR, _ArrowUpIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.MINOR, _ArrowDownIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.WARNING_NEUTRAL, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.FATAL, _CloseOctagonOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmallWhite), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "listViewMenu", _MoreVertIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "Ascending", _MenuUpIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "Descending", _MenuDownIcon["default"]), _MenuDown$MenuUp$stat);
+  MenuUp: _MenuUpIcon["default"],
+  CreateIcon: _CreateIcon["default"]
+}, (0, _defineProperty2["default"])(_ErrorCircle$WarningI, _statuses["default"].DEFAULT, _InformationIcon["default"]), (0, _defineProperty2["default"])(_ErrorCircle$WarningI, _statuses["default"].ERROR, _AlertCircleIcon["default"]), (0, _defineProperty2["default"])(_ErrorCircle$WarningI, _statuses["default"].SUCCESS, _CheckCircleIcon["default"]), (0, _defineProperty2["default"])(_ErrorCircle$WarningI, _statuses["default"].WARNING, _AlertIcon["default"]), (0, _defineProperty2["default"])(_ErrorCircle$WarningI, _statuses.statusIcon.INFO, _InformationOutlineIcon["default"]), (0, _defineProperty2["default"])(_ErrorCircle$WarningI, _statuses.statusIcon.CRITICAL, _AlertCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_ErrorCircle$WarningI, _statuses.statusIcon.MAJOR, _ArrowUpIcon["default"]), (0, _defineProperty2["default"])(_ErrorCircle$WarningI, _statuses.statusIcon.MINOR, _ArrowDownIcon["default"]), (0, _defineProperty2["default"])(_ErrorCircle$WarningI, _statuses.statusIcon.WARNING_NEUTRAL, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])(_ErrorCircle$WarningI, _statuses.statusIcon.FATAL, _CloseOctagonOutlineIcon["default"]), (0, _defineProperty2["default"])(_ErrorCircle$WarningI, "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmallWhite), (0, _defineProperty2["default"])(_ErrorCircle$WarningI, "listViewMenu", _MoreVertIcon["default"]), (0, _defineProperty2["default"])(_ErrorCircle$WarningI, "Ascending", _MenuUpIcon["default"]), (0, _defineProperty2["default"])(_ErrorCircle$WarningI, "Descending", _MenuDownIcon["default"]), _ErrorCircle$WarningI);
 exports["default"] = _default;

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -1,9 +1,18 @@
 /// <reference types="react" />
+import { IconSize } from '../../../../types';
 export declare const astroThemeValues: {
+    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: import("react").JSX.Element;
         listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
         Ascending: import("@pingux/mdi-react").MdiReactIconComponentType;
@@ -18,10 +27,19 @@ export declare const astroThemeValues: {
         sm: string;
         md: string;
     };
+    iconBadgeCircleColor: string;
     iconWrapperSizes: {
         sm: number;
         md: number;
         lg: number;
     };
+    iFrameContentDivBackgroundColor: string;
+    copyButtonSize: IconSize;
+    pageHeaderTitleMargin: string;
+    breadcrumbIconSize: IconSize;
+    breadcrumbIconMargin: number;
     rockerButtonGap: string;
+    accordionItemMarginLeft: string;
+    defaultLoaderSize: number;
+    defaultIconColor: string;
 };

package/lib/cjs/styles/themes/astro/customProperties/index.js

@@ -14,11 +14,36 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _tShirtSizes = _interopRequireWildcard(require("./tShirtSizes"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var copyButtonSize = 'xs';
+var breadcrumbIconMargin = 5;
+var breadcrumbIconSize = 'xs';
+var accordionItemDefaultLabelTag = 'span';
+var iconBadgeCircleColor = 'white';
+var rockerButtonGap = '3px';
+var accordionItemMarginLeft = 'sm';
+var pageHeaderTitleMargin = 'xs';
+var activeColor = '#4462ED';
+var backgroundBaseColor = 'white';
+var defaultLoaderSize = 16;
+var iFrameContentDivBackgroundColor = '#F7F8FD';
+var defaultIconColor = 'currentColor';
 var astroThemeValues = {
+  accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
+  activeColor: activeColor,
+  backgroundBaseColor: backgroundBaseColor,
   icons: _icons["default"],
   styles: _styles["default"],
   tShirtSizes: _tShirtSizes["default"],
+  iconBadgeCircleColor: iconBadgeCircleColor,
   iconWrapperSizes: _tShirtSizes.iconWrapperSizes,
-  rockerButtonGap: '3px'
+  iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
+  copyButtonSize: copyButtonSize,
+  pageHeaderTitleMargin: pageHeaderTitleMargin,
+  breadcrumbIconSize: breadcrumbIconSize,
+  breadcrumbIconMargin: breadcrumbIconMargin,
+  rockerButtonGap: rockerButtonGap,
+  accordionItemMarginLeft: accordionItemMarginLeft,
+  defaultLoaderSize: defaultLoaderSize,
+  defaultIconColor: defaultIconColor
 };
 exports.astroThemeValues = astroThemeValues;

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

@@ -1,7 +1,9 @@
 export declare const copyButton: {
+    mx: string;
     path: {
         fill: string;
     };
+    border: string;
 };
 declare const _default: {
     theme: {

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

@@ -136,9 +136,11 @@ var lineNo = {
   lineHeight: '20px'
 };
 var copyButton = {
+  mx: 'sm',
   path: {
-    fill: 'gray-300'
-  }
+    fill: 'text.primary'
+  },
+  border: 'none !important'
 };
 exports.copyButton = copyButton;
 var _default = {

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

@@ -57,6 +57,7 @@ declare const colors: {
         base: string;
         input: string;
         separator: string;
+        hairline: string;
     };
     active: string;
     primary: string;
@@ -104,6 +105,42 @@ declare const colors: {
         };
     };
     tooltip: string;
+    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;
+        };
+    };
     neutral: {
         80: string;
     };

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

@@ -16,6 +16,7 @@ exports.warning = exports.success = exports.info = exports["default"] = exports.
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _colorTokens = require("../tokens/colorTokens");
 var _iconWrapper = require("./iconWrapper");
+var _twoTone = _interopRequireDefault(require("./twoTone"));
 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 subColors = {
@@ -102,7 +103,8 @@ var text = {
 var border = {
   base: _colorTokens.nextGenColors['gray-300'],
   input: _colorTokens.nextGenColors['gray-500'],
-  separator: _colorTokens.nextGenColors['gray-200']
+  separator: _colorTokens.nextGenColors['gray-200'],
+  hairline: '#e7eef4'
 };
 var overrides = {
   neutral: {
@@ -140,7 +142,8 @@ var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColo
   primary: colorsObject.blue,
   background: background,
   iconWrapper: _iconWrapper.iconWrapper,
-  tooltip: tooltip
+  tooltip: tooltip,
+  twoTone: _twoTone["default"]
 });
 var _default = colors;
 exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/colors/iconWrapper.js

@@ -1,45 +1,24 @@
 "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.iconWrapper = void 0;
-var _colorTokens = require("../tokens/colorTokens");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _twoTone = _interopRequireDefault(require("./twoTone"));
+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 iconWrapper = {
-  wrapper: {
-    orange: _colorTokens.nextGenColors['orange-100'],
-    cyan: _colorTokens.nextGenColors['cyan-100'],
-    green: _colorTokens.nextGenColors['green-100'],
-    purple: _colorTokens.nextGenColors['purple-100'],
-    pink: _colorTokens.nextGenColors['pink-100'],
-    red: _colorTokens.nextGenColors['red-100'],
-    yellow: _colorTokens.nextGenColors['yellow-100'],
-    teal: _colorTokens.nextGenColors['teal-100'],
-    blue: _colorTokens.nextGenColors['blue-100'],
-    indigo: _colorTokens.nextGenColors['indigo-100'],
-    lightBlue: _colorTokens.nextGenColors['blue-100'],
-    lightPink: _colorTokens.nextGenColors['pink-100'],
-    lightGreen: _colorTokens.nextGenColors['green-100'],
-    lightYellow: _colorTokens.nextGenColors['yellow-100'],
-    lightIndigo: _colorTokens.nextGenColors['indigo-100']
-  },
-  icon: {
-    orange: _colorTokens.nextGenColors['orange-800'],
-    cyan: _colorTokens.nextGenColors['cyan-800'],
-    green: _colorTokens.nextGenColors['green-800'],
-    purple: _colorTokens.nextGenColors['purple-800'],
-    pink: _colorTokens.nextGenColors['pink-800'],
-    red: _colorTokens.nextGenColors['red-800'],
-    yellow: _colorTokens.nextGenColors['yellow-800'],
-    teal: _colorTokens.nextGenColors['teal-800'],
-    blue: _colorTokens.nextGenColors['blue-600'],
-    indigo: _colorTokens.nextGenColors['indigo-700'],
-    lightBlue: _colorTokens.nextGenColors['blue-500'],
-    lightPink: _colorTokens.nextGenColors['pink-600'],
-    lightGreen: _colorTokens.nextGenColors['green-800'],
-    lightYellow: _colorTokens.nextGenColors['yellow-800'],
-    lightIndigo: _colorTokens.nextGenColors['indigo-700']
-  }
+  wrapper: _objectSpread({}, _twoTone["default"].bg),
+  icon: _objectSpread({}, _twoTone["default"].text)
 };
 exports.iconWrapper = iconWrapper;

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

@@ -0,0 +1,37 @@
+declare const 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;
+    };
+};
+export default twoTone;