@pingux/astro 2.129.0-alpha.4 → 2.129.0-alpha.6

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

@@ -6,10 +6,10 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.iconWrapperSizes = exports["default"] = void 0;
 var _default = {
-  xxs: 9,
-  xs: 15,
-  sm: 20,
-  md: 25
+  xxs: '9px',
+  xs: '15px',
+  sm: '20px',
+  md: '25px'
 };
 exports["default"] = _default;
 var iconWrapperSizes = {

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

@@ -13,6 +13,7 @@ export declare const astroBlacklistStory: {
     DataTable: string[];
     NavBar: string[];
     SearchField: string[];
+    Callout: string[];
 };
 export declare const nextGenOnlyComponents: string[];
 export default nextGenConvertedComponents;

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

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['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', 'Table', 'TableBase'];
+var nextGenConvertedComponents = ['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', 'Callout', 'Table', 'TableBase'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],
@@ -20,7 +20,8 @@ exports.componentSpecificNextGenBlacklist = componentSpecificNextGenBlacklist;
 var astroBlacklistStory = {
   DataTable: ['Onyx Default'],
   NavBar: ['Onyx Default'],
-  SearchField: ['Onyx With Filter']
+  SearchField: ['Onyx With Filter'],
+  Callout: ['Customizations']
 };
 exports.astroBlacklistStory = astroBlacklistStory;
 var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];

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

@@ -3728,6 +3728,39 @@ declare const _default: {
                 color: string;
             };
         };
+        callout: {
+            base: {
+                width: string;
+                backgroundColor: string;
+                lineHeight: string;
+                p: string;
+                border: string;
+                borderLeft: string;
+                borderLeftColor: string;
+                borderRadius: string;
+                alignItems: string;
+                color: string;
+                '&.is-success, > .is-success': {
+                    borderColor: string;
+                    borderLeftColor: string;
+                };
+                '&.is-warning, > .is-warning': {
+                    borderColor: string;
+                    borderLeftColor: string;
+                };
+                '&.is-error, > .is-error': {
+                    borderColor: string;
+                    borderLeftColor: string;
+                };
+            };
+            icon: {
+                ml: string;
+                mr: string;
+                minWidth: string;
+                width: string;
+                height: string;
+            };
+        };
         table: {
             container: {
                 overflow: string;

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

@@ -0,0 +1,34 @@
+declare const _default: {
+    base: {
+        width: string;
+        backgroundColor: string;
+        lineHeight: string;
+        p: string;
+        border: string;
+        borderLeft: string;
+        borderLeftColor: string;
+        borderRadius: string;
+        alignItems: string;
+        color: string;
+        '&.is-success, > .is-success': {
+            borderColor: string;
+            borderLeftColor: string;
+        };
+        '&.is-warning, > .is-warning': {
+            borderColor: string;
+            borderLeftColor: string;
+        };
+        '&.is-error, > .is-error': {
+            borderColor: string;
+            borderLeftColor: string;
+        };
+    };
+    icon: {
+        ml: string;
+        mr: string;
+        minWidth: string;
+        width: string;
+        height: string;
+    };
+};
+export default _default;

package/lib/cjs/styles/themes/next-gen/variants/callout.js

@@ -0,0 +1,45 @@
+"use strict";
+
+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"] = void 0;
+var _tShirtSizes = _interopRequireDefault(require("../customProperties/tShirtSizes"));
+var base = {
+  width: '100%',
+  backgroundColor: 'background.secondary',
+  lineHeight: 'md',
+  p: 'md',
+  border: 'none',
+  borderLeft: '5px solid',
+  borderLeftColor: 'active',
+  borderRadius: '.25rem',
+  alignItems: 'flex-start',
+  color: 'text.primary',
+  '&.is-success, > .is-success': {
+    borderColor: 'unset',
+    borderLeftColor: 'success.bright'
+  },
+  '&.is-warning, > .is-warning': {
+    borderColor: 'unset',
+    borderLeftColor: 'warning.bright'
+  },
+  '&.is-error, > .is-error': {
+    borderColor: 'unset',
+    borderLeftColor: 'critical.bright'
+  }
+};
+var icon = {
+  ml: '0',
+  mr: 'md',
+  minWidth: "".concat(_tShirtSizes["default"].sm, " !important"),
+  width: "".concat(_tShirtSizes["default"].sm, " !important"),
+  height: "".concat(_tShirtSizes["default"].sm, " !important")
+};
+var _default = {
+  base: base,
+  icon: icon
+};
+exports["default"] = _default;

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

@@ -1328,6 +1328,39 @@ declare const _default: {
             color: string;
         };
     };
+    callout: {
+        base: {
+            width: string;
+            backgroundColor: string;
+            lineHeight: string;
+            p: string;
+            border: string;
+            borderLeft: string;
+            borderLeftColor: string;
+            borderRadius: string;
+            alignItems: string;
+            color: string;
+            '&.is-success, > .is-success': {
+                borderColor: string;
+                borderLeftColor: string;
+            };
+            '&.is-warning, > .is-warning': {
+                borderColor: string;
+                borderLeftColor: string;
+            };
+            '&.is-error, > .is-error': {
+                borderColor: string;
+                borderLeftColor: string;
+            };
+        };
+        icon: {
+            ml: string;
+            mr: string;
+            minWidth: string;
+            width: string;
+            height: string;
+        };
+    };
     table: {
         container: {
             overflow: string;

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

@@ -19,6 +19,7 @@ var _Skeleton = _interopRequireDefault(require("../../../../components/Skeleton/
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
 var _avatar = require("./avatar");
 var _button = _interopRequireDefault(require("./button"));
+var _callout = _interopRequireDefault(require("./callout"));
 var _dataTable = require("./dataTable");
 var _footer = require("./footer");
 var _iconWrapper = _interopRequireDefault(require("./iconWrapper"));
@@ -392,6 +393,7 @@ var _default = {
   tooltip: _tooltip["default"],
   footer: _footer.footer,
   loader: loader,
+  callout: _callout["default"],
   table: _table.table,
   tableBase: _tableBase.tableBase
 };

package/lib/cjs/types/callout.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { IconProps } from './icon';
 import { Status } from './item';
 import { DOMAttributes, StyleProps } from './shared';
 export interface CalloutProps extends StyleProps, DOMAttributes {
     status?: Status;
     icon?: React.ReactNode;
+    iconProps?: IconProps;
 }

package/lib/components/Button/Button.stories.js

@@ -207,4 +207,9 @@ ColorBlockButton.parameters = {
     type: 'figma',
     url: FIGMA_LINKS.button.colorBlockButton
   }
+};
+export var Filter = function Filter() {
+  return ___EmotionJSX(Button, {
+    variant: "filter"
+  }, "Filter Text");
 };

package/lib/components/Button/Buttons.styles.js

@@ -182,6 +182,13 @@ var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-pressed': _objectSpread({}, defaultActive),
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
+var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
+  px: 'sm',
+  borderColor: 'neutral.80',
+  height: 40,
+  color: 'active',
+  display: 'flex'
+});
 var colorBlock = {
   bg: 'neutral.95',
   border: '1px solid',
@@ -296,5 +303,6 @@ export default {
   primaryWithIcon: primaryWithIcon,
   quiet: quiet,
   success: success,
-  withIcon: withIcon
+  withIcon: withIcon,
+  filter: filter
 };

package/lib/components/Callout/Callout.js

@@ -1,32 +1,24 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-var _excluded = ["children", "status", "icon"];
+var _excluded = ["children", "status", "icon", "className", "iconProps"];
 var _calloutProps;
 import React, { forwardRef } from 'react';
 import { Box } from '../..';
+import { useStatusClasses } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { NoticeIcon } from '../Icon/NoticeIcon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CALLOUT_TEST_ID = 'CalloutTestId';
 var calloutProps = (_calloutProps = {}, _defineProperty(_calloutProps, statuses.DEFAULT, {
-  color: 'text.secondary',
-  variant: 'callout.base'
+  color: 'text.secondary'
 }), _defineProperty(_calloutProps, statuses.ERROR, {
-  color: 'critical.bright',
-  variant: 'callout.error'
+  color: 'critical.bright'
 }), _defineProperty(_calloutProps, statuses.SUCCESS, {
-  color: 'success.bright',
-  variant: 'callout.success'
+  color: 'success.bright'
 }), _defineProperty(_calloutProps, statuses.WARNING, {
-  color: 'warning.bright',
-  variant: 'callout.warning'
+  color: 'warning.bright'
 }), _calloutProps);
-var defaultIconProps = {
-  mr: 'md',
-  ml: 'md',
-  size: 'md'
-};
 
 /**
  Please note, Callout is a static component, the [Messages](./?path=/docs/components-messages)
@@ -39,18 +31,24 @@ var Callout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$status = _ref.status,
     status = _ref$status === void 0 ? statuses.DEFAULT : _ref$status,
     icon = _ref.icon,
+    className = _ref.className,
+    iconProps = _ref.iconProps,
     others = _objectWithoutProperties(_ref, _excluded);
+  var _useStatusClasses = useStatusClasses(className, _defineProperty({}, "is-".concat(status), true)),
+    statusClasses = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     "data-testid": CALLOUT_TEST_ID,
     isRow: true,
     role: "note",
-    variant: calloutProps[status].variant
+    variant: "callout.base",
+    className: statusClasses
   }, others), icon || ___EmotionJSX(NoticeIcon, _extends({
     color: calloutProps[status].color,
     status: status,
+    variant: "callout.icon",
     "aria-label": "".concat(status, "-icon")
-  }, defaultIconProps)), children);
+  }, iconProps)), children);
 });
 Callout.displayName = 'Callout';
 export default Callout;

package/lib/components/Callout/Callout.stories.js

@@ -12,6 +12,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 React from 'react';
 import CheckBoldIcon from '@pingux/mdi-react/CheckBoldIcon';
+import LightbulbOutlineIcon from '@pingux/mdi-react/LightbulbOutlineIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Callout, Icon, Link, Text } from '../../index';
@@ -49,6 +50,19 @@ Default.parameters = {
     url: FIGMA_LINKS.callout["default"]
   }
 };
+export var Customizations = function Customizations() {
+  return ___EmotionJSX(Callout, {
+    icon: ___EmotionJSX(Icon, {
+      icon: LightbulbOutlineIcon,
+      size: "sm",
+      color: "teal-500",
+      mr: "md"
+    }),
+    sx: {
+      borderLeftColor: 'teal-500'
+    }
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
+};
 export var ErrorStatus = function ErrorStatus(args) {
   return ___EmotionJSX(Callout, _extends({
     status: statuses.ERROR
@@ -86,6 +100,14 @@ WithLink.parameters = {
   design: {
     type: 'figma',
     url: FIGMA_LINKS.callout.withLink
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
   }
 };
 export var Warning = function Warning(args) {

package/lib/components/Callout/Callout.styles.js

@@ -1,34 +1,29 @@
-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 tShirtSizes from '../../styles/themes/astro/customProperties/tShirtSizes';
 var base = {
   alignItems: 'center',
   border: '1px solid',
   borderColor: 'text.secondary',
   fontSize: 'md',
   p: '15px 12px 15px 0',
-  width: '600px'
+  width: '600px',
+  '&.is-success, > .is-success': {
+    borderColor: 'success.bright'
+  },
+  '&.is-warning, > .is-warning': {
+    borderColor: 'warning.bright'
+  },
+  '&.is-error, > .is-error': {
+    borderColor: 'critical.bright'
+  }
+};
+var icon = {
+  mr: 'md',
+  ml: 'md',
+  minWidth: "".concat(tShirtSizes.md, " !important"),
+  width: "".concat(tShirtSizes.md, " !important"),
+  height: "".concat(tShirtSizes.md, " !important")
 };
-var error = _objectSpread(_objectSpread({}, base), {}, {
-  borderColor: 'critical.bright'
-});
-var success = _objectSpread(_objectSpread({}, base), {}, {
-  borderColor: 'success.bright'
-});
-var warning = _objectSpread(_objectSpread({}, base), {}, {
-  borderColor: 'warning.bright'
-});
 export default {
   base: base,
-  error: error,
-  success: success,
-  warning: warning
+  icon: icon
 };

package/lib/components/Callout/stories/CalloutNextGenComponent.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import LightbulbOutlineIcon from '@pingux/mdi-react/LightbulbOutlineIcon';
+import { Box, Callout, Icon, Text } from '../../..';
+import statuses from '../../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var CalloutNextGenComponent = function CalloutNextGenComponent() {
+  return ___EmotionJSX(Box, {
+    gap: "md"
+  }, ___EmotionJSX(Callout, null, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.")), ___EmotionJSX(Callout, {
+    status: statuses.SUCCESS
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.")), ___EmotionJSX(Callout, {
+    status: statuses.WARNING
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.")), ___EmotionJSX(Callout, {
+    status: statuses.ERROR
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.")), ___EmotionJSX(Callout, {
+    status: statuses.SUCCESS,
+    icon: ___EmotionJSX(Icon, {
+      icon: LightbulbOutlineIcon,
+      size: "sm",
+      color: "success.bright",
+      mr: "md"
+    })
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.")));
+};

package/lib/components/Callout/stories/NextGenCallout.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenTheme } from '../../..';
+import { CalloutNextGenComponent } from './CalloutNextGenComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Callout'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(CalloutNextGenComponent, null));
+};

package/lib/components/Callout/stories/NextGenDarkCallout.chomatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenDarkTheme } from '../../..';
+import { CalloutNextGenComponent } from './CalloutNextGenComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Dark Callout'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    themeOverrides: [NextGenDarkTheme]
+  }, ___EmotionJSX(CalloutNextGenComponent, null));
+};

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

@@ -0,0 +1,27 @@
+var base = {
+  color: 'text.secondary',
+  '> span': {
+    color: 'text.secondary'
+  },
+  '& > svg > path': {
+    fill: 'text.secondary'
+  },
+  '&.is-success, > .is-success': {
+    '& > svg > path': {
+      fill: 'text.secondary'
+    }
+  },
+  '&.is-warning, > .is-warning': {
+    '& > svg > path': {
+      fill: 'text.secondary'
+    }
+  },
+  '&.is-error, > .is-error': {
+    '& > svg > path': {
+      fill: 'text.secondary'
+    }
+  }
+};
+export default {
+  base: base
+};

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

@@ -1,4 +1,5 @@
 import { avatar } from './avatar';
+import callout from './callout';
 import { footer } from './footer';
 import iconBadge from './iconBadge';
 import { listView, listViewItem, lisViewItemChart } from './listview';
@@ -117,6 +118,7 @@ export default {
       }
     }
   },
+  callout: callout,
   table: {
     caption: {
       color: 'text.secondary'

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

@@ -1,8 +1,8 @@
 export default {
-  xxs: 9,
-  xs: 15,
-  sm: 20,
-  md: 25
+  xxs: '9px',
+  xs: '15px',
+  sm: '20px',
+  md: '25px'
 };
 export var iconWrapperSizes = {
   sm: 18,

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

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['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', 'Table', 'TableBase'];
+var nextGenConvertedComponents = ['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', 'Callout', 'Table', 'TableBase'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],
@@ -12,7 +12,8 @@ export var componentSpecificNextGenBlacklist = {
 export var astroBlacklistStory = {
   DataTable: ['Onyx Default'],
   NavBar: ['Onyx Default'],
-  SearchField: ['Onyx With Filter']
+  SearchField: ['Onyx With Filter'],
+  Callout: ['Customizations']
 };
 export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];
 export default nextGenConvertedComponents;

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

@@ -0,0 +1,36 @@
+import tShirtSizes from '../customProperties/tShirtSizes';
+var base = {
+  width: '100%',
+  backgroundColor: 'background.secondary',
+  lineHeight: 'md',
+  p: 'md',
+  border: 'none',
+  borderLeft: '5px solid',
+  borderLeftColor: 'active',
+  borderRadius: '.25rem',
+  alignItems: 'flex-start',
+  color: 'text.primary',
+  '&.is-success, > .is-success': {
+    borderColor: 'unset',
+    borderLeftColor: 'success.bright'
+  },
+  '&.is-warning, > .is-warning': {
+    borderColor: 'unset',
+    borderLeftColor: 'warning.bright'
+  },
+  '&.is-error, > .is-error': {
+    borderColor: 'unset',
+    borderLeftColor: 'critical.bright'
+  }
+};
+var icon = {
+  ml: '0',
+  mr: 'md',
+  minWidth: "".concat(tShirtSizes.sm, " !important"),
+  width: "".concat(tShirtSizes.sm, " !important"),
+  height: "".concat(tShirtSizes.sm, " !important")
+};
+export default {
+  base: base,
+  icon: icon
+};

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

@@ -14,6 +14,7 @@ import skeleton from '../../../../components/Skeleton/Skeleton.styles';
 import codeView from '../codeView/codeView';
 import { avatar } from './avatar';
 import button from './button';
+import callout from './callout';
 import { dataTable } from './dataTable';
 import { footer } from './footer';
 import iconWrapper from './iconWrapper';
@@ -383,6 +384,7 @@ export default {
   tooltip: tooltip,
   footer: footer,
   loader: loader,
+  callout: callout,
   table: table,
   tableBase: tableBase
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.129.0-alpha.4",
+  "version": "2.129.0-alpha.6",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",