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

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

@@ -34,8 +34,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: chroma.mix('white', 'black', 0.125, 'rgb').hex(),
+      borderColor: chroma.mix('white', 'black', 0.125, 'rgb').hex()
+    },
+    '&.is-hovered': {
+      border: 'none !important',
+      borderColor: 'none !important',
+      backgroundColor: 'white'
+    }
+  }),
+  hintButton: hintButton,
   nextGen: {
     '&.is-hovered': {
       path: {
@@ -60,6 +77,7 @@ var iconButtons = {
       backgroundColor: 'gray-700'
     }
   }),
+  modalCloseButton: _objectSpread({}, baseIconButton),
   messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-hovered': {
       backgroundColor: '#455469'

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

@@ -34,6 +34,14 @@ export var radio = {
 export var checkbox = {
   color: 'text.primary'
 };
+var label = {
+  radioGroup: {
+    color: 'white'
+  },
+  radio: {
+    color: 'white'
+  }
+};
 var selectOption = {
   backgroundColor: 'background.base',
   color: 'text.primary',
@@ -50,11 +58,20 @@ var selectOption = {
     bg: 'active'
   }
 };
+var switchable = {
+  thumb: {
+    '&.is-selected': {
+      bg: 'black'
+    }
+  }
+};
 export default {
   input: input,
   checkbox: checkbox,
   radio: radio,
+  label: label,
   select: _objectSpread(_objectSpread({}, select), {}, {
     option: _objectSpread({}, selectOption)
-  })
+  }),
+  "switch": switchable
 };

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

@@ -19,19 +19,19 @@ export var fieldControlWrapper = {
   '> textarea': {
     borderColor: 'border.input',
     backgroundColor: 'background.base'
-  },
-  '&.is-read-only': {
-    '> input': {
-      backgroundColor: 'background.base'
-    },
-    '> textarea': {
-      backgroundColor: 'background.base'
-    }
   }
 };
 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/styles/themeOverrides/nextGenDarkMode/variants/links.js

@@ -40,7 +40,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'
+  }
+};
 export default {
+  app: app,
   nextGen: nextGen,
   sideNav: sideNav,
   footerLinks: footerLinks,

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

@@ -162,6 +162,11 @@ export default {
   skeleton: skeleton,
   footer: footer,
   tooltip: tooltip,
+  overlayPanel: {
+    container: {
+      boxShadow: 'none'
+    }
+  },
   dataTable: {
     selectableTableRow: {
       '&.is-selected': {

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

@@ -1,13 +1,15 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-var _MenuDown$MenuUp$stat;
+var _ErrorCircle$WarningI;
 import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
 import AlertCircleOutlineIcon from '@pingux/mdi-react/AlertCircleOutlineIcon';
 import AlertIcon from '@pingux/mdi-react/AlertIcon';
-import AlertOutlineIcon from '@pingux/mdi-react/AlertOutlineIcon';
+import WarningIcon from '@pingux/mdi-react/AlertOutlineIcon';
 import ArrowDownIcon from '@pingux/mdi-react/ArrowDownIcon';
 import ArrowUpIcon from '@pingux/mdi-react/ArrowUpIcon';
+import DefaultCircle from '@pingux/mdi-react/CheckboxBlankCircleOutlineIcon';
 import CheckCircleIcon from '@pingux/mdi-react/CheckCircleIcon';
 import CloseOctagonOutlineIcon from '@pingux/mdi-react/CloseOctagonOutlineIcon';
+import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import InformationIcon from '@pingux/mdi-react/InformationIcon';
 import InformationOutlineIcon from '@pingux/mdi-react/InformationOutlineIcon';
 import MenuDown from '@pingux/mdi-react/MenuDownIcon';
@@ -15,7 +17,12 @@ import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
 import { pingLogoHorizontalSmallWhite } from '../../../../utils/devUtils/constants/logos';
 import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statuses';
-export default (_MenuDown$MenuUp$stat = {
+export default (_ErrorCircle$WarningI = {
+  ErrorCircle: AlertCircleIcon,
+  WarningIcon: WarningIcon,
+  DefaultCircle: DefaultCircle,
+  SuccessCircle: CheckCircleIcon,
   MenuDown: MenuDown,
-  MenuUp: MenuUp
-}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.INFO, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.CRITICAL, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MAJOR, ArrowUpIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MINOR, ArrowDownIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.WARNING_NEUTRAL, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.FATAL, CloseOctagonOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), _defineProperty(_MenuDown$MenuUp$stat, "listViewMenu", MoreVertIcon), _defineProperty(_MenuDown$MenuUp$stat, "Ascending", MenuUp), _defineProperty(_MenuDown$MenuUp$stat, "Descending", MenuDown), _MenuDown$MenuUp$stat);
+  MenuUp: MenuUp,
+  CreateIcon: CreateIcon
+}, _defineProperty(_ErrorCircle$WarningI, statuses.DEFAULT, InformationIcon), _defineProperty(_ErrorCircle$WarningI, statuses.ERROR, AlertCircleIcon), _defineProperty(_ErrorCircle$WarningI, statuses.SUCCESS, CheckCircleIcon), _defineProperty(_ErrorCircle$WarningI, statuses.WARNING, AlertIcon), _defineProperty(_ErrorCircle$WarningI, statusIcon.INFO, InformationOutlineIcon), _defineProperty(_ErrorCircle$WarningI, statusIcon.CRITICAL, AlertCircleOutlineIcon), _defineProperty(_ErrorCircle$WarningI, statusIcon.MAJOR, ArrowUpIcon), _defineProperty(_ErrorCircle$WarningI, statusIcon.MINOR, ArrowDownIcon), _defineProperty(_ErrorCircle$WarningI, statusIcon.WARNING_NEUTRAL, WarningIcon), _defineProperty(_ErrorCircle$WarningI, statusIcon.FATAL, CloseOctagonOutlineIcon), _defineProperty(_ErrorCircle$WarningI, "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), _defineProperty(_ErrorCircle$WarningI, "listViewMenu", MoreVertIcon), _defineProperty(_ErrorCircle$WarningI, "Ascending", MenuUp), _defineProperty(_ErrorCircle$WarningI, "Descending", MenuDown), _ErrorCircle$WarningI);

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

@@ -1,10 +1,35 @@
 import icons from './icons';
 import styles from './styles';
 import tShirtSizes, { iconWrapperSizes } from './tShirtSizes';
+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';
 export var astroThemeValues = {
+  accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
+  activeColor: activeColor,
+  backgroundBaseColor: backgroundBaseColor,
   icons: icons,
   styles: styles,
   tShirtSizes: tShirtSizes,
+  iconBadgeCircleColor: iconBadgeCircleColor,
   iconWrapperSizes: iconWrapperSizes,
-  rockerButtonGap: '3px'
+  iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
+  copyButtonSize: copyButtonSize,
+  pageHeaderTitleMargin: pageHeaderTitleMargin,
+  breadcrumbIconSize: breadcrumbIconSize,
+  breadcrumbIconMargin: breadcrumbIconMargin,
+  rockerButtonGap: rockerButtonGap,
+  accordionItemMarginLeft: accordionItemMarginLeft,
+  defaultLoaderSize: defaultLoaderSize,
+  defaultIconColor: defaultIconColor
 };

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

@@ -129,9 +129,11 @@ var lineNo = {
   lineHeight: '20px'
 };
 export var copyButton = {
+  mx: 'sm',
   path: {
-    fill: 'gray-300'
-  }
+    fill: 'text.primary'
+  },
+  border: 'none !important'
 };
 export default {
   theme: nextGenCodeViewTheme,

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

@@ -11,6 +11,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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) { _defineProperty(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; }
 import { nextGenColors } from '../tokens/colorTokens';
 import { iconWrapper } from './iconWrapper';
+import twoTone from './twoTone';
 var subColors = {
   lightblue: nextGenColors['blue-100'],
   lightindigo: nextGenColors['indigo-100'],
@@ -91,7 +92,8 @@ var text = {
 var border = {
   base: nextGenColors['gray-300'],
   input: nextGenColors['gray-500'],
-  separator: nextGenColors['gray-200']
+  separator: nextGenColors['gray-200'],
+  hairline: '#e7eef4'
 };
 var overrides = {
   neutral: {
@@ -129,6 +131,7 @@ var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColo
   primary: colorsObject.blue,
   background: background,
   iconWrapper: iconWrapper,
-  tooltip: tooltip
+  tooltip: tooltip,
+  twoTone: twoTone
 });
 export default colors;

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

@@ -1,37 +1,16 @@
-import { nextGenColors } from '../tokens/colorTokens';
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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) { _defineProperty(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; }
+import twoTone from './twoTone';
 export var iconWrapper = {
-  wrapper: {
-    orange: nextGenColors['orange-100'],
-    cyan: nextGenColors['cyan-100'],
-    green: nextGenColors['green-100'],
-    purple: nextGenColors['purple-100'],
-    pink: nextGenColors['pink-100'],
-    red: nextGenColors['red-100'],
-    yellow: nextGenColors['yellow-100'],
-    teal: nextGenColors['teal-100'],
-    blue: nextGenColors['blue-100'],
-    indigo: nextGenColors['indigo-100'],
-    lightBlue: nextGenColors['blue-100'],
-    lightPink: nextGenColors['pink-100'],
-    lightGreen: nextGenColors['green-100'],
-    lightYellow: nextGenColors['yellow-100'],
-    lightIndigo: nextGenColors['indigo-100']
-  },
-  icon: {
-    orange: nextGenColors['orange-800'],
-    cyan: nextGenColors['cyan-800'],
-    green: nextGenColors['green-800'],
-    purple: nextGenColors['purple-800'],
-    pink: nextGenColors['pink-800'],
-    red: nextGenColors['red-800'],
-    yellow: nextGenColors['yellow-800'],
-    teal: nextGenColors['teal-800'],
-    blue: nextGenColors['blue-600'],
-    indigo: nextGenColors['indigo-700'],
-    lightBlue: nextGenColors['blue-500'],
-    lightPink: nextGenColors['pink-600'],
-    lightGreen: nextGenColors['green-800'],
-    lightYellow: nextGenColors['yellow-800'],
-    lightIndigo: nextGenColors['indigo-700']
-  }
+  wrapper: _objectSpread({}, twoTone.bg),
+  icon: _objectSpread({}, twoTone.text)
 };

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

@@ -0,0 +1,38 @@
+import { nextGenColors } from '../tokens/colorTokens';
+var twoTone = {
+  bg: {
+    orange: nextGenColors['orange-100'],
+    cyan: nextGenColors['cyan-100'],
+    green: nextGenColors['green-100'],
+    purple: nextGenColors['purple-100'],
+    pink: nextGenColors['pink-100'],
+    red: nextGenColors['red-100'],
+    yellow: nextGenColors['yellow-100'],
+    teal: nextGenColors['teal-100'],
+    blue: nextGenColors['blue-100'],
+    indigo: nextGenColors['indigo-100'],
+    lightBlue: nextGenColors['blue-100'],
+    lightPink: nextGenColors['pink-100'],
+    lightGreen: nextGenColors['green-100'],
+    lightYellow: nextGenColors['yellow-100'],
+    lightIndigo: nextGenColors['indigo-100']
+  },
+  text: {
+    orange: nextGenColors['orange-800'],
+    cyan: nextGenColors['cyan-800'],
+    green: nextGenColors['green-800'],
+    purple: nextGenColors['purple-800'],
+    pink: nextGenColors['pink-800'],
+    red: nextGenColors['red-800'],
+    yellow: nextGenColors['yellow-800'],
+    teal: nextGenColors['teal-800'],
+    blue: nextGenColors['blue-600'],
+    indigo: nextGenColors['indigo-700'],
+    lightBlue: nextGenColors['blue-500'],
+    lightPink: nextGenColors['pink-600'],
+    lightGreen: nextGenColors['green-800'],
+    lightYellow: nextGenColors['yellow-800'],
+    lightIndigo: nextGenColors['indigo-700']
+  }
+};
+export default twoTone;

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

@@ -1,12 +1,13 @@
-var nextGenConvertedComponents = ['GridList', 'DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'StatusIcon', 'Callout', 'Table', 'TableBase', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],
-  MultivaluesField: ['Condensed', 'Condensed With Section'],
   PasswordField: ['Success'],
   TextField: ['Success'],
   OverlayPanel: ['Expandable'],
   DataTable: ['Default'],
+  Text: ['Default'],
+  MultivaluesField: ['Icon Slots In Badge'],
   Tabs: ['Vertical Orientation']
 };
 export var astroBlacklistStory = {
@@ -14,7 +15,9 @@ export var astroBlacklistStory = {
   NavBar: ['Onyx Default'],
   SearchField: ['Onyx With Filter'],
   Callout: ['Customizations'],
-  StatusIcon: ['Default', 'In Rocker Button']
+  StatusIcon: ['Default', 'In Rocker Button'],
+  Text: ['Onyx'],
+  Loader: ['Circular', 'CustomCircular']
 };
 export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];
 export default nextGenConvertedComponents;

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

@@ -0,0 +1,14 @@
+var copyButtonSize = 'sm';
+var breadcrumbIconSize = 'sm';
+var breadcrumbIconMargin = 'sm';
+var accordionItemMarginLeft = 'md';
+var pageHeaderTitleMargin = 'md';
+var defaultLoaderSize = 32;
+export default {
+  copyButtonSize: copyButtonSize,
+  breadcrumbIconSize: breadcrumbIconSize,
+  breadcrumbIconMargin: breadcrumbIconMargin,
+  accordionItemMarginLeft: accordionItemMarginLeft,
+  pageHeaderTitleMargin: pageHeaderTitleMargin,
+  defaultLoaderSize: defaultLoaderSize
+};

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

@@ -1,18 +1,25 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-var _MenuDown$MenuUp$stat;
+var _ErrorCircle$WarningI;
 import AlertCircleOutlineIcon from '@pingux/mdi-react/AlertCircleOutlineIcon';
 import AlertOutlineIcon from '@pingux/mdi-react/AlertOutlineIcon';
 import ArrowDownIcon from '@pingux/mdi-react/ArrowDownIcon';
 import ArrowUpIcon from '@pingux/mdi-react/ArrowUpIcon';
+import DefaultCircle from '@pingux/mdi-react/CheckboxBlankCircleOutlineIcon';
 import CheckCircleOutlineIcon from '@pingux/mdi-react/CheckCircleOutlineIcon';
 import ChevronDownIcon from '@pingux/mdi-react/ChevronDownIcon';
 import ChevronUpIcon from '@pingux/mdi-react/ChevronUpIcon';
 import CloseOctagonOutlineIcon from '@pingux/mdi-react/CloseOctagonOutlineIcon';
+import CreateOutlineIcon from '@pingux/mdi-react/CreateOutlineIcon';
 import DotsHorizontalIcon from '@pingux/mdi-react/DotsHorizontalIcon';
 import InformationOutlineIcon from '@pingux/mdi-react/InformationOutlineIcon';
 import { pingLogoHorizontalSmall } from '../../../../utils/devUtils/constants/logos';
 import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statuses';
-export default (_MenuDown$MenuUp$stat = {
+export default (_ErrorCircle$WarningI = {
+  ErrorCircle: AlertCircleOutlineIcon,
+  WarningIcon: AlertOutlineIcon,
+  DefaultCircle: DefaultCircle,
+  SuccessCircle: CheckCircleOutlineIcon,
+  CreateIcon: CreateOutlineIcon,
   MenuDown: ChevronDownIcon,
   MenuUp: ChevronUpIcon
-}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.INFO, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.CRITICAL, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MAJOR, ArrowUpIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MINOR, ArrowDownIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.WARNING_NEUTRAL, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.FATAL, CloseOctagonOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmall), _defineProperty(_MenuDown$MenuUp$stat, "listViewMenu", DotsHorizontalIcon), _defineProperty(_MenuDown$MenuUp$stat, "Ascending", ArrowUpIcon), _defineProperty(_MenuDown$MenuUp$stat, "Descending", ArrowDownIcon), _MenuDown$MenuUp$stat);
+}, _defineProperty(_ErrorCircle$WarningI, statuses.DEFAULT, InformationOutlineIcon), _defineProperty(_ErrorCircle$WarningI, statuses.ERROR, AlertCircleOutlineIcon), _defineProperty(_ErrorCircle$WarningI, statuses.SUCCESS, CheckCircleOutlineIcon), _defineProperty(_ErrorCircle$WarningI, statuses.WARNING, AlertOutlineIcon), _defineProperty(_ErrorCircle$WarningI, statusIcon.INFO, InformationOutlineIcon), _defineProperty(_ErrorCircle$WarningI, statusIcon.CRITICAL, AlertCircleOutlineIcon), _defineProperty(_ErrorCircle$WarningI, statusIcon.MAJOR, ArrowUpIcon), _defineProperty(_ErrorCircle$WarningI, statusIcon.MINOR, ArrowDownIcon), _defineProperty(_ErrorCircle$WarningI, statusIcon.WARNING_NEUTRAL, AlertOutlineIcon), _defineProperty(_ErrorCircle$WarningI, statusIcon.FATAL, CloseOctagonOutlineIcon), _defineProperty(_ErrorCircle$WarningI, "pingLogoHorizontalSmall", pingLogoHorizontalSmall), _defineProperty(_ErrorCircle$WarningI, "listViewMenu", DotsHorizontalIcon), _defineProperty(_ErrorCircle$WarningI, "Ascending", ArrowUpIcon), _defineProperty(_ErrorCircle$WarningI, "Descending", ArrowDownIcon), _ErrorCircle$WarningI);

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

@@ -1,10 +1,34 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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) { _defineProperty(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; }
+import customSizes from './customSizes';
 import icons from './icons';
 import styles from './styles';
 import tShirtSizes, { iconWrapperSizes } from './tShirtSizes';
-export var nextGenThemeValues = {
+var accordionItemDefaultLabelTag = 'h2';
+var iconBadgeCircleColor = 'badge.iconBadge';
+var activeColor = '#1a73e8';
+var backgroundBaseColor = 'white';
+var iFrameContentDivBackgroundColor = backgroundBaseColor;
+var defaultIconColor = 'gray-800';
+export var nextGenThemeValues = _objectSpread({
+  activeColor: activeColor,
+  backgroundBaseColor: backgroundBaseColor,
   styles: styles,
   icons: icons,
   tShirtSizes: tShirtSizes,
+  iconBadgeCircleColor: iconBadgeCircleColor,
   iconWrapperSizes: iconWrapperSizes,
+  defaultIconColor: defaultIconColor,
+  accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
+  iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
   rockerButtonGap: '0px'
-};
+}, customSizes);

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

@@ -1,11 +1,11 @@
 export default {
-  xxs: '.875rem',
+  xxs: '8px',
   'icon-100': '.875rem',
-  xs: '1.125rem',
+  xs: '15px',
   'icon-200': '1.125rem',
-  sm: '1.5rem',
+  sm: '20px',
   'icon-300': '1.5rem',
-  md: '2.25rem',
+  md: '25px',
   'icon-400': '2.25rem',
   'icon-500': '3rem',
   'icon-600': '3.75rem',

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

@@ -14,6 +14,7 @@ import colors from './colors/colors';
 import tShirtSizes from './customProperties/tShirtSizes';
 import { fieldControlWrapper, input } from './variants/input';
 import { label } from './variants/label';
+import { switchable } from './variants/switch';
 export var checkbox = {
   height: '19.25px',
   width: '19.25px',
@@ -63,6 +64,9 @@ export var comboBox = {
     borderWidth: '1px',
     borderRadius: '4px',
     height: '50px'
+  },
+  button: {
+    border: 'none !important'
   }
 };
 export var numberField = {
@@ -96,5 +100,6 @@ export default {
   select: select,
   radio: radio,
   search: search,
+  "switch": switchable,
   numberField: numberField
 };

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

@@ -36,7 +36,7 @@ var nextGenTheme = {
   fontSizes: fontSizes,
   fontWeights: fontWeights,
   lineHeights: {
-    body: '1.5',
+    body: '1.6',
     md: '1.75'
   },
   text: newText,

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

@@ -9,7 +9,7 @@ export var fontSizes = {
     'lg': "calc(".concat(sizes.avatar.lg, " * .4)"),
     'xl': "calc(".concat(sizes.avatar.xl, " * .4)")
   },
-  'xs': "".concat(fontSizeBase * 0.8, "rem"),
+  'xs': '11px',
   'sm': '0.875rem',
   'md': "".concat(fontSizeBase * 1, "rem"),
   'lg': "".concat(fontSizeBase * 1.25, "rem"),
@@ -17,4 +17,4 @@ export var fontSizes = {
   'xx': "".concat(fontSizeBase * 1.75, "rem"),
   'xxx': "".concat(fontSizeBase * 2.25, "rem")
 };
-export var fontWeights = (_fontWeights = {}, _defineProperty(_fontWeights, -1, 300), _defineProperty(_fontWeights, 0, 400), _defineProperty(_fontWeights, 1, 400), _defineProperty(_fontWeights, 2, 600), _defineProperty(_fontWeights, 3, 600), _fontWeights);
+export var fontWeights = (_fontWeights = {}, _defineProperty(_fontWeights, -1, 300), _defineProperty(_fontWeights, 0, 400), _defineProperty(_fontWeights, 1, 500), _defineProperty(_fontWeights, 2, 600), _defineProperty(_fontWeights, 3, 700), _fontWeights);

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

@@ -0,0 +1,18 @@
+var accordion = {
+  '&:not(:last-of-type)': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'border.base'
+  },
+  pb: 'lg'
+};
+var body = {
+  py: 'sm'
+};
+var header = {
+  p: 'sm'
+};
+export default {
+  accordion: accordion,
+  body: body,
+  header: header
+};

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

@@ -15,9 +15,7 @@ var badgeFont = {
   fontWeight: 2
 };
 var badgeIconStyle = {
-  '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'inherit'
-  }),
+  '& span': _objectSpread({}, badgeFont),
   '& button': {
     alignSelf: 'center',
     p: '0',