@pingux/astro 2.238.0-alpha.0 → 2.239.0-alpha.0

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

@@ -1,5 +1,3 @@
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-var _icons;
 import AlertCircleOutlineIcon from '@pingux/mdi-react/AlertCircleOutlineIcon';
 import AlertOutlineIcon from '@pingux/mdi-react/AlertOutlineIcon';
 import CheckCircleOutlineIcon from '@pingux/mdi-react/CheckCircleOutlineIcon';
@@ -12,5 +10,69 @@ import TransitConnection from '@pingux/mdi-react/TransitConnectionVariantIcon';
 import { pingLogoHorizontalSmall } from '../../../../utils/devUtils/constants/logos';
 import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statuses';
 import { Aic, PamIcon, Protect } from '../../astro/customProperties/navBarIcons';
-var icons = (_icons = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, statuses.DEFAULT, 'info'), statuses.ERROR, 'error'), statuses.SUCCESS, 'check_circle'), statuses.WARNING, 'warning'), statusIcon.CRITICAL, 'error'), statusIcon.FATAL, 'dangerous'), statusIcon.INFO, 'info'), statusIcon.MAJOR, 'arrow_upward'), statusIcon.MINOR, 'arrow_downward'), statusIcon.WARNING_NEUTRAL, 'warning'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "aic", Aic), "applicationsIcon", 'apps'), "Ascending", 'arrow_upward'), "authenticationIcon", 'check_circle'), "clipboard", 'content_paste'), "CreateIcon", 'edit'), "daVinci", 'account_tree'), "DefaultCircle", 'circle'), "Descending", 'arrow_downward'), "popoverMenuIcon", 'more_horiz'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "ErrorCircle", 'error'), "HomeIcon", 'home'), "integrationsIcon", 'widgets'), "Lock", 'lock'), "listViewMenu", 'more_horiz'), "mdiAccountCog", 'manage_accounts'), "mdiAccountMultiple", 'group'), "mdiEarth", Settings), "mdiEmoticonHappyOutline", EmoticonHappy), "mdiFingerprint", 'fingerprint'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "mdiPlayCircleIcon", 'play_circle'), "mdiScaleBalance", 'balance'), "mdiShoCard", 'id_card'), "mdiTransitConnectionVariant", TransitConnection), "mdiViewDashboard", 'dashboard'), "mdiWeb", 'globe'), "MenuDown", 'keyboard_arrow_down'), "MenuRight", 'keyboard_arrow_right'), "MenuUp", 'keyboard_arrow_up'), "tabPickerDown", 'keyboard_arrow_down'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "tabPickerUp", 'keyboard_arrow_up'), "monitoringIcon", ShowChartIcon), "openInNew", 'open_in_new'), "overviewIcon", 'dashboard'), "p1verify", 'person_check'), "pam", PamIcon), "PingAuthorize", 'key'), "pingLogoHorizontalSmall", pingLogoHorizontalSmall), "protect", Protect), "rocketLaunchIcon", 'rocket_launch'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_icons, "shareFeedbackIcon", 'chat'), "shieldStar", ShieldStarOutlineIcon), "SuccessCircle", 'check_circle'), "userExperienceIcon", 'palette'), "WarningIcon", 'warning'), "CameraOutlineIcon", 'photo_camera'), "ImageOutlineIcon", 'image'), "helpHint", 'info'), "ModalCloseIcon", 'close'), "errorCalloutBadge", AlertCircleOutlineIcon), _defineProperty(_defineProperty(_defineProperty(_icons, "infoCalloutBadge", InformationCircleOutlineIcon), "successCalloutBadge", CheckCircleOutlineIcon), "warningCalloutBadge", AlertOutlineIcon));
+const icons = {
+  [statuses.DEFAULT]: 'info',
+  [statuses.ERROR]: 'error',
+  [statuses.SUCCESS]: 'check_circle',
+  [statuses.WARNING]: 'warning',
+  [statusIcon.CRITICAL]: 'error',
+  [statusIcon.FATAL]: 'dangerous',
+  [statusIcon.INFO]: 'info',
+  [statusIcon.MAJOR]: 'arrow_upward',
+  [statusIcon.MINOR]: 'arrow_downward',
+  [statusIcon.WARNING_NEUTRAL]: 'warning',
+  aic: Aic,
+  applicationsIcon: 'apps',
+  Ascending: 'arrow_upward',
+  authenticationIcon: 'check_circle',
+  clipboard: 'content_paste',
+  CreateIcon: 'edit',
+  daVinci: 'account_tree',
+  DefaultCircle: 'circle',
+  Descending: 'arrow_downward',
+  popoverMenuIcon: 'more_horiz',
+  ErrorCircle: 'error',
+  HomeIcon: 'home',
+  integrationsIcon: 'widgets',
+  Lock: 'lock',
+  listViewMenu: 'more_horiz',
+  mdiAccountCog: 'manage_accounts',
+  mdiAccountMultiple: 'group',
+  mdiEarth: Settings,
+  mdiEmoticonHappyOutline: EmoticonHappy,
+  mdiFingerprint: 'fingerprint',
+  mdiPlayCircleIcon: 'play_circle',
+  mdiScaleBalance: 'balance',
+  mdiShoCard: 'id_card',
+  mdiTransitConnectionVariant: TransitConnection,
+  mdiViewDashboard: 'dashboard',
+  mdiWeb: 'globe',
+  MenuDown: 'keyboard_arrow_down',
+  MenuRight: 'keyboard_arrow_right',
+  MenuUp: 'keyboard_arrow_up',
+  tabPickerDown: 'keyboard_arrow_down',
+  tabPickerUp: 'keyboard_arrow_up',
+  monitoringIcon: ShowChartIcon,
+  openInNew: 'open_in_new',
+  overviewIcon: 'dashboard',
+  p1verify: 'person_check',
+  pam: PamIcon,
+  PingAuthorize: 'key',
+  pingLogoHorizontalSmall,
+  protect: Protect,
+  rocketLaunchIcon: 'rocket_launch',
+  shareFeedbackIcon: 'chat',
+  shieldStar: ShieldStarOutlineIcon,
+  SuccessCircle: 'check_circle',
+  userExperienceIcon: 'palette',
+  WarningIcon: 'warning',
+  CameraOutlineIcon: 'photo_camera',
+  ImageOutlineIcon: 'image',
+  helpHint: 'info',
+  ModalCloseIcon: 'close',
+  errorCalloutBadge: AlertCircleOutlineIcon,
+  infoCalloutBadge: InformationCircleOutlineIcon,
+  successCalloutBadge: CheckCircleOutlineIcon,
+  warningCalloutBadge: AlertOutlineIcon
+};
 export default icons;

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

@@ -1,62 +1,52 @@
-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(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) { _defineProperty(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; }
 import { twotoneColorNames } from '../colors/twoTone';
 import customSizes from './customSizes';
 import icons from './icons';
 import styles from './styles';
 import tShirtSizes, { iconWrapperSizes } from './tShirtSizes';
-var accordionHoveredState = {
+const accordionHoveredState = {
   '&.is-hovered': {
     color: 'active',
     textDecoration: 'underline'
   }
 };
-var accordionItemDefaultLabelTag = 'h2';
-var iconBadgeCircleColor = 'backgroundBase';
-var activeColor = '#1a73e8';
-var backgroundBaseColor = 'white';
-var iFrameContentDivBackgroundColor = backgroundBaseColor;
-var defaultIconColor = 'gray-800';
-var defaultIconSize = 'sm';
-var buttonLoaderSize = 'sm';
-var badgeStyles = {
+const accordionItemDefaultLabelTag = 'h2';
+const iconBadgeCircleColor = 'backgroundBase';
+const activeColor = '#1a73e8';
+const backgroundBaseColor = 'white';
+const iFrameContentDivBackgroundColor = backgroundBaseColor;
+const defaultIconColor = 'gray-800';
+const defaultIconSize = 'sm';
+const buttonLoaderSize = 'sm';
+const badgeStyles = {
   blueBg: '#EAF2FD',
   greyBg: '#455469',
   blueText: '#155CBA',
   greyText: '#FFFFFF'
 };
-var linkSelectFieldWidth = '200px';
-var calendarIconSize = 'sm';
-var badgeTextFontSize = '75%';
-var navBarIconSize = '20px';
-export var nextGenThemeValues = _objectSpread({
-  accordionHoveredState: accordionHoveredState,
-  activeColor: activeColor,
-  navBarIconSize: navBarIconSize,
-  backgroundBaseColor: backgroundBaseColor,
-  styles: styles,
-  icons: icons,
-  tShirtSizes: tShirtSizes,
-  iconBadgeCircleColor: iconBadgeCircleColor,
+const linkSelectFieldWidth = '200px';
+const calendarIconSize = 'sm';
+const badgeTextFontSize = '75%';
+const navBarIconSize = '20px';
+export const nextGenThemeValues = {
+  accordionHoveredState,
+  activeColor,
+  navBarIconSize,
+  backgroundBaseColor,
+  styles,
+  icons,
+  tShirtSizes,
+  iconBadgeCircleColor,
   iconBadgeTwotoneColorNames: twotoneColorNames,
-  iconWrapperSizes: iconWrapperSizes,
-  defaultIconColor: defaultIconColor,
-  accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
-  iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
+  iconWrapperSizes,
+  defaultIconColor,
+  accordionItemDefaultLabelTag,
+  iFrameContentDivBackgroundColor,
   rockerButtonGap: '0px',
-  defaultIconSize: defaultIconSize,
-  calendarIconSize: calendarIconSize,
-  buttonLoaderSize: buttonLoaderSize,
-  badgeStyles: badgeStyles,
-  badgeTextFontSize: badgeTextFontSize,
-  linkSelectFieldWidth: linkSelectFieldWidth
-}, customSizes);
+  defaultIconSize,
+  calendarIconSize,
+  buttonLoaderSize,
+  badgeStyles,
+  badgeTextFontSize,
+  linkSelectFieldWidth,
+  ...customSizes
+};

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

@@ -16,7 +16,7 @@ export default {
   'icon-900': '96px',
   xsm: '16px'
 };
-export var iconWrapperSizes = {
+export const iconWrapperSizes = {
   xs: sizes.avatarFontSize.xs,
   sm: sizes.avatarFontSize.sm,
   md: sizes.avatarFontSize.md,

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

@@ -1,14 +1,3 @@
-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(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) { _defineProperty(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; }
 import { astroTokens } from '@pingux/onyx-tokens';
 import checkboxFieldGroup from '../../../components/CheckboxFieldGroup/CheckboxFieldGroup.styles';
 import { isSafari } from '../../safariAgent.js';
@@ -17,12 +6,12 @@ import tShirtSizes from './customProperties/tShirtSizes';
 import { fieldControlWrapper, input } from './variants/input';
 import { label } from './variants/label';
 import { switchable } from './variants/switch';
-export var checkboxField = {
+export const checkboxField = {
   container: {
     mb: 'xs'
   }
 };
-export var checkbox = {
+export const checkbox = {
   height: '16px',
   width: '16px',
   borderRadius: astroTokens.radius.checkbox.radius,
@@ -41,7 +30,7 @@ export var checkbox = {
     opacity: 0.5
   }
 };
-export var select = {
+export const select = {
   borderRadius: astroTokens.radius.input,
   borderColor: 'border.input',
   color: 'text.primary',
@@ -66,7 +55,7 @@ export var select = {
     }
   }
 };
-export var search = {
+export const search = {
   wrapper: {
     opacity: 1
   },
@@ -75,7 +64,7 @@ export var search = {
     ml: '20px'
   }
 };
-export var comboBox = {
+export const comboBox = {
   input: {
     borderStyle: 'solid',
     borderWidth: '1px',
@@ -89,10 +78,12 @@ export var comboBox = {
     right: astroTokens.spacing.input['padding-x']
   }
 };
-export var numberField = {
-  arrowsWrapper: _objectSpread({}, fieldControlWrapper)
+export const numberField = {
+  arrowsWrapper: {
+    ...fieldControlWrapper
+  }
 };
-export var radio = {
+export const radio = {
   base: {
     color: 'border.input',
     mr: 'md',
@@ -129,11 +120,12 @@ export var radio = {
     pl: '40px'
   }
 };
-export var radioGroupWrapper = {
+export const radioGroupWrapper = {
   rowGap: 'xs'
 };
-export var timeField = {
-  inputField: _objectSpread(_objectSpread({}, input), {}, {
+export const timeField = {
+  inputField: {
+    ...input,
     color: 'font.base',
     alignItems: 'center',
     justifyContent: 'center',
@@ -156,7 +148,7 @@ export var timeField = {
       borderColor: 'border.input',
       backgroundColor: 'disabled'
     }
-  }),
+  },
   segment: {
     px: '2px',
     textTransform: 'uppercase',
@@ -166,17 +158,17 @@ export var timeField = {
   }
 };
 export default {
-  input: input,
-  label: label,
-  checkboxField: checkboxField,
-  checkbox: checkbox,
-  checkboxFieldGroup: checkboxFieldGroup,
-  comboBox: comboBox,
-  select: select,
-  radio: radio,
-  radioGroupWrapper: radioGroupWrapper,
-  search: search,
-  "switch": switchable,
-  numberField: numberField,
-  timeField: timeField
+  input,
+  label,
+  checkboxField,
+  checkbox,
+  checkboxFieldGroup,
+  comboBox,
+  select,
+  radio,
+  radioGroupWrapper,
+  search,
+  switch: switchable,
+  numberField,
+  timeField
 };

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

@@ -1,16 +1,3 @@
-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";
-var _context;
-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 _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import { astroTokens } from '@pingux/onyx-tokens';
 import merge from 'deepmerge';
 import { themes } from '../../../utils/devUtils/constants/themes';
@@ -30,23 +17,23 @@ import forms from './forms';
 import sizes from './sizes';
 import spacing from './spacing';
 import { fontSizes, fontWeights } from './text';
-var breakpoints = ['0px', '576px', '768px', '992px', '1200px', '1600px'];
-var nextGenTheme = {
+const breakpoints = ['0px', '576px', '768px', '992px', '1200px', '1600px'];
+const nextGenTheme = {
   name: themes.NEXT_GEN,
-  colors: colors,
-  breakpoints: breakpoints,
-  buttons: buttons,
-  forms: forms,
-  fontSizes: fontSizes,
-  fontWeights: fontWeights,
+  colors,
+  breakpoints,
+  buttons,
+  forms,
+  fontSizes,
+  fontWeights,
   lineHeights: {
-    body: astroTokens["default"]['line-height'].base,
-    xs: astroTokens["default"]['line-height'].xs,
+    body: astroTokens.default['line-height'].base,
+    xs: astroTokens.default['line-height'].xs,
     sm: '1.4',
     md: '1.75'
   },
   text: newText,
-  icons: icons,
+  icons,
   fonts: {
     standard: '"Open Sans", sans-serif',
     body: '"Open Sans", sans-serif',
@@ -54,21 +41,22 @@ var nextGenTheme = {
     codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
   },
   shadows: {
-    standard: _concatInstanceProperty(_context = "0 ".concat(astroTokens.spacing.card.shadow.y, "px ")).call(_context, astroTokens.spacing.card.shadow.blur, "px 0 rgba(0, 0, 0, 0.13)")
+    standard: `0 ${astroTokens.spacing.card.shadow.y}px ${astroTokens.spacing.card.shadow.blur}px 0 rgba(0, 0, 0, 0.13)`
   },
-  sizes: sizes,
-  badges: badges,
-  navigationHeader: navigationHeader,
+  sizes,
+  badges,
+  navigationHeader,
   space: spacing,
-  links: links,
-  cards: cards,
-  variants: variants,
-  images: images,
+  links,
+  cards,
+  variants,
+  images,
   overrides: {
-    codeView: codeView
+    codeView
   }
 };
-var mergedTheme = merge(theme, nextGenTheme);
-export default _objectSpread(_objectSpread({}, mergedTheme), {}, {
-  breakpoints: breakpoints
-});
+const mergedTheme = merge(theme, nextGenTheme);
+export default {
+  ...mergedTheme,
+  breakpoints
+};

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

@@ -1,26 +1,26 @@
 import { astroTokens } from '@pingux/onyx-tokens';
-var sidenavWidth = 230;
-var halfSidenavWidth = sidenavWidth / 2;
-var sideNav = {
-  halfWidth: "".concat(halfSidenavWidth, "px")
+const sidenavWidth = 230;
+const halfSidenavWidth = sidenavWidth / 2;
+const sideNav = {
+  halfWidth: `${halfSidenavWidth}px`
 };
-var fontSizes = astroTokens["default"]['font-size'];
-var avatarLogo = {
+const fontSizes = astroTokens.default['font-size'];
+const avatarLogo = {
   sm: '14px',
   md: '20px',
   xmd: '24px',
   lg: '44px',
   xl: '54px'
 };
-var avatar = {
-  xs: "".concat(astroTokens.size.avatar.xs, "px"),
-  sm: "".concat(astroTokens.size.avatar.sm, "px"),
-  md: "".concat(astroTokens.size.avatar.md, "px"),
+const avatar = {
+  xs: `${astroTokens.size.avatar.xs}px`,
+  sm: `${astroTokens.size.avatar.sm}px`,
+  md: `${astroTokens.size.avatar.md}px`,
   xmd: '44px',
-  lg: "".concat(astroTokens.size.avatar.lg, "px"),
-  xl: "".concat(astroTokens.size.avatar.xl, "px")
+  lg: `${astroTokens.size.avatar.lg}px`,
+  xl: `${astroTokens.size.avatar.xl}px`
 };
-var avatarFontSize = {
+const avatarFontSize = {
   xs: fontSizes.avatar.xs,
   sm: fontSizes.avatar.sm,
   md: fontSizes.avatar.md,
@@ -28,11 +28,11 @@ var avatarFontSize = {
   lg: fontSizes.avatar.lg,
   xl: fontSizes.avatar.xl
 };
-var iconBadge = {
+const iconBadge = {
   md: '48px',
   xl: '104px'
 };
-var container = {
+const container = {
   xs: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
   sm: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
   md: ['100%', '100%', '720px', '960px', '1140px', '1540px'],
@@ -41,15 +41,15 @@ var container = {
   xx: ['100%', '100%', '100%', '100%', '100%', '1540px'],
   fluid: ['100%', '100%', '100%', '100%', '100%', '100%']
 };
-var icons = {
+const icons = {
   xxxl: '70px'
 };
 export default {
-  avatar: avatar,
-  avatarLogo: avatarLogo,
-  avatarFontSize: avatarFontSize,
-  container: container,
-  iconBadge: iconBadge,
-  icons: icons,
-  sideNav: sideNav
+  avatar,
+  avatarLogo,
+  avatarFontSize,
+  container,
+  iconBadge,
+  icons,
+  sideNav
 };

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

@@ -1,5 +1,5 @@
 import { astroTokens } from '@pingux/onyx-tokens';
-var scale = {
+const scale = {
   xs: astroTokens.spacing.xs,
   sm: astroTokens.spacing.sm,
   md: astroTokens.spacing.md,

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

@@ -1,12 +1,11 @@
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
 import CameraIrisIcon from '@pingux/mdi-react/CameraIrisIcon';
 import DeleteIcon from '@pingux/mdi-react/DeleteIcon';
 import { Avatar, Badge, Box, Button, Card, CheckboxField, Icon, IconButton, IconWrapper, Item, Menu, Messages, MultivaluesField, OverlayProvider, PopoverMenu, RadioField, RadioGroupField, SearchField, SelectField, Tab, Tabs, Text, TextAreaField, TextField } from '../../../../index';
 import statuses from '../../../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
-var items = [{
+const loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
+const items = [{
   id: 1,
   name: 'Aardvark',
   key: 'Aardvark'
@@ -35,13 +34,13 @@ var items = [{
   name: 'Shark',
   key: 'Shark'
 }];
-var textStyling = {
+const textStyling = {
   fontSize: 'md',
   fontWeight: 600
 };
-var avatarColors = ['orange', 'cyan', 'green', 'purple', 'pink', 'red', 'yellow', 'teal'];
-var badges = ['primary', 'default', 'success', 'danger', 'warning', 'info', 'dark'];
-var tabs = [{
+const avatarColors = ['orange', 'cyan', 'green', 'purple', 'pink', 'red', 'yellow', 'teal'];
+const badges = ['primary', 'default', 'success', 'danger', 'warning', 'info', 'dark'];
+const tabs = [{
   name: 'Tab 1',
   children: 'Tab 1 body'
 }, {
@@ -51,8 +50,8 @@ var tabs = [{
   name: 'Tab 3',
   children: 'Tab 3 body'
 }];
-var iconSizes = ['icon-50', 'icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'icon-600', 'icon-700', 'icon-800', 'icon-900'];
-var StickerSheetComponent = function StickerSheetComponent() {
+const iconSizes = ['icon-50', 'icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'icon-600', 'icon-700', 'icon-800', 'icon-900'];
+const StickerSheetComponent = () => {
   return ___EmotionJSX(Box, {
     sx: {
       backgroundColor: 'backgroundBase'
@@ -65,13 +64,11 @@ var StickerSheetComponent = function StickerSheetComponent() {
   }, ___EmotionJSX(MultivaluesField, {
     items: items,
     label: "Multivalues"
-  }, function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.key,
-      "data-id": item.name,
-      "aria-label": item.name
-    }, item.name);
-  })), ___EmotionJSX(Tabs, {
+  }, item => ___EmotionJSX(Item, {
+    key: item.key,
+    "data-id": item.name,
+    "aria-label": item.name
+  }, item.name))), ___EmotionJSX(Tabs, {
     items: tabs
   }, ___EmotionJSX(Tab, {
     key: "tab1",
@@ -85,7 +82,7 @@ var StickerSheetComponent = function StickerSheetComponent() {
     isRow: true,
     gap: "md",
     alignContent: "center"
-  }, _mapInstanceProperty(avatarColors).call(avatarColors, function (color) {
+  }, avatarColors.map(color => {
     return ___EmotionJSX(IconWrapper, {
       title: {
         name: 'trash can'
@@ -99,7 +96,7 @@ var StickerSheetComponent = function StickerSheetComponent() {
     isRow: true,
     gap: "md",
     alignContent: "center"
-  }, _mapInstanceProperty(avatarColors).call(avatarColors, function (color) {
+  }, avatarColors.map(color => {
     return ___EmotionJSX(IconWrapper, {
       title: {
         name: 'trash can'
@@ -114,7 +111,7 @@ var StickerSheetComponent = function StickerSheetComponent() {
     gap: "md",
     alignContent: "center",
     flexWrap: "wrap"
-  }, _mapInstanceProperty(avatarColors).call(avatarColors, function (color) {
+  }, avatarColors.map(color => {
     return ___EmotionJSX(IconWrapper, {
       title: {
         name: 'trash can'
@@ -129,7 +126,7 @@ var StickerSheetComponent = function StickerSheetComponent() {
     gap: "md",
     alignContent: "center",
     flexWrap: "wrap"
-  }, _mapInstanceProperty(iconSizes).call(iconSizes, function (size) {
+  }, iconSizes.map(size => {
     return ___EmotionJSX(Icon, {
       key: size,
       icon: CameraIrisIcon,
@@ -179,7 +176,7 @@ var StickerSheetComponent = function StickerSheetComponent() {
   }))), ___EmotionJSX(Box, {
     isRow: true,
     gap: "md"
-  }, _mapInstanceProperty(avatarColors).call(avatarColors, function (avatar) {
+  }, avatarColors.map(avatar => {
     return ___EmotionJSX(Avatar, {
       key: avatar,
       color: avatar,
@@ -189,7 +186,7 @@ var StickerSheetComponent = function StickerSheetComponent() {
   })), ___EmotionJSX(Box, {
     isRow: true,
     gap: "md"
-  }, _mapInstanceProperty(badges).call(badges, function (badge) {
+  }, badges.map(badge => {
     return ___EmotionJSX(Badge, {
       key: badge,
       variant: badge,

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

@@ -1,23 +1,28 @@
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import { astroTokens } from '@pingux/onyx-tokens';
 import sizes from './sizes';
-var fontSize = astroTokens["default"]['font-size'];
-var fontSizeBase = 0.9375;
-export var fontSizes = {
+const fontSize = astroTokens.default['font-size'];
+const fontSizeBase = 0.9375;
+export const fontSizes = {
   avatar: {
-    'sm': "calc(".concat(sizes.avatar.sm, " * .4)"),
-    'md': "calc(".concat(sizes.avatar.md, " * .4)"),
-    'lg': "calc(".concat(sizes.avatar.lg, " * .4)"),
-    'xl': "calc(".concat(sizes.avatar.xl, " * .4)")
+    'sm': `calc(${sizes.avatar.sm} * .4)`,
+    'md': `calc(${sizes.avatar.md} * .4)`,
+    'lg': `calc(${sizes.avatar.lg} * .4)`,
+    'xl': `calc(${sizes.avatar.xl} * .4)`
   },
   'xs': '11px',
-  'tiny': "".concat(fontSize.tiny, "px"),
-  'sm': "".concat(fontSize.small, "px"),
-  'small': "".concat(fontSize.small, "px"),
-  'md': "".concat(fontSizeBase * 1, "rem"),
-  'lg': "".concat(fontSizeBase * 1.25, "rem"),
-  'xl': "".concat(fontSizeBase * 1.5, "rem"),
-  'xx': "".concat(fontSizeBase * 1.75, "rem"),
-  'xxx': "".concat(fontSizeBase * 2.25, "rem")
+  'tiny': `${fontSize.tiny}px`,
+  'sm': `${fontSize.small}px`,
+  'small': `${fontSize.small}px`,
+  'md': `${fontSizeBase * 1}rem`,
+  'lg': `${fontSizeBase * 1.25}rem`,
+  'xl': `${fontSizeBase * 1.5}rem`,
+  'xx': `${fontSizeBase * 1.75}rem`,
+  'xxx': `${fontSizeBase * 2.25}rem`
 };
-export var fontWeights = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, -1, 300), 0, 400), 1, 500), 2, 600), 3, 700);
+export const fontWeights = {
+  [-1]: 300,
+  0: 400,
+  1: 500,
+  2: 600,
+  3: 700
+};