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

package/lib/cjs/components/Callout/Callout.js

@@ -14,33 +14,25 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _ = require("../..");
+var _hooks = require("../../hooks");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _NoticeIcon = require("../Icon/NoticeIcon");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "status", "icon"];
+var _excluded = ["children", "status", "icon", "className", "iconProps"];
 var _calloutProps;
 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 CALLOUT_TEST_ID = 'CalloutTestId';
 exports.CALLOUT_TEST_ID = CALLOUT_TEST_ID;
 var calloutProps = (_calloutProps = {}, (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].DEFAULT, {
-  color: 'text.secondary',
-  variant: 'callout.base'
+  color: 'text.secondary'
 }), (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].ERROR, {
-  color: 'critical.bright',
-  variant: 'callout.error'
+  color: 'critical.bright'
 }), (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].SUCCESS, {
-  color: 'success.bright',
-  variant: 'callout.success'
+  color: 'success.bright'
 }), (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].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)
@@ -53,18 +45,24 @@ var Callout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _ref$status = _ref.status,
     status = _ref$status === void 0 ? _statuses["default"].DEFAULT : _ref$status,
     icon = _ref.icon,
+    className = _ref.className,
+    iconProps = _ref.iconProps,
     others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])({}, "is-".concat(status), true)),
+    statusClasses = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     ref: ref,
     "data-testid": CALLOUT_TEST_ID,
     isRow: true,
     role: "note",
-    variant: calloutProps[status].variant
+    variant: "callout.base",
+    className: statusClasses
   }, others), icon || (0, _react2.jsx)(_NoticeIcon.NoticeIcon, (0, _extends2["default"])({
     color: calloutProps[status].color,
     status: status,
+    variant: "callout.icon",
     "aria-label": "".concat(status, "-icon")
-  }, defaultIconProps)), children);
+  }, iconProps)), children);
 });
 Callout.displayName = 'Callout';
 var _default = Callout;

package/lib/cjs/components/Callout/Callout.stories.d.ts

@@ -4,6 +4,7 @@ import { CalloutProps } from '../../types/callout';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: StoryFn<CalloutProps>;
+export declare const Customizations: () => React.JSX.Element;
 export declare const ErrorStatus: StoryFn;
 export declare const Success: StoryFn;
 export declare const WithLink: {
@@ -13,6 +14,14 @@ export declare const WithLink: {
             type: string;
             url: string;
         };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
     };
 };
 export declare const Warning: StoryFn;

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

@@ -12,11 +12,12 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithLink = exports.WithCustomIcon = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = void 0;
+exports["default"] = exports.WithLink = exports.WithCustomIcon = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = exports.Customizations = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _CheckBoldIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckBoldIcon"));
+var _LightbulbOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/LightbulbOutlineIcon"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
@@ -56,6 +57,20 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.callout["default"]
   }
 };
+var Customizations = function Customizations() {
+  return (0, _react2.jsx)(_index.Callout, {
+    icon: (0, _react2.jsx)(_index.Icon, {
+      icon: _LightbulbOutlineIcon["default"],
+      size: "sm",
+      color: "teal-500",
+      mr: "md"
+    }),
+    sx: {
+      borderLeftColor: 'teal-500'
+    }
+  }, (0, _react2.jsx)(_index.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."));
+};
+exports.Customizations = Customizations;
 var ErrorStatus = function ErrorStatus(args) {
   return (0, _react2.jsx)(_index.Callout, (0, _extends2["default"])({
     status: _statuses["default"].ERROR
@@ -96,6 +111,14 @@ WithLink.parameters = {
   design: {
     type: 'figma',
     url: _figmaLinks.FIGMA_LINKS.callout.withLink
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
   }
 };
 var Warning = function Warning(args) {

package/lib/cjs/components/Callout/Callout.styles.d.ts

@@ -6,30 +6,22 @@ declare const _default: {
         fontSize: string;
         p: string;
         width: string;
+        '&.is-success, > .is-success': {
+            borderColor: string;
+        };
+        '&.is-warning, > .is-warning': {
+            borderColor: string;
+        };
+        '&.is-error, > .is-error': {
+            borderColor: string;
+        };
     };
-    error: {
-        borderColor: string;
-        alignItems: string;
-        border: string;
-        fontSize: string;
-        p: string;
-        width: string;
-    };
-    success: {
-        borderColor: string;
-        alignItems: string;
-        border: string;
-        fontSize: string;
-        p: string;
-        width: string;
-    };
-    warning: {
-        borderColor: string;
-        alignItems: string;
-        border: string;
-        fontSize: string;
-        p: string;
+    icon: {
+        mr: string;
+        ml: string;
+        minWidth: string;
         width: string;
+        height: string;
     };
 };
 export default _default;

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

@@ -1,42 +1,38 @@
 "use strict";
 
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/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) { (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 _tShirtSizes = _interopRequireDefault(require("../../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["default"].md, " !important"),
+  width: "".concat(_tShirtSizes["default"].md, " !important"),
+  height: "".concat(_tShirtSizes["default"].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'
-});
 var _default = {
   base: base,
-  error: error,
-  success: success,
-  warning: warning
+  icon: icon
 };
 exports["default"] = _default;

package/lib/cjs/components/Callout/stories/CalloutNextGenComponent.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CalloutNextGenComponent: () => React.JSX.Element;

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

@@ -0,0 +1,33 @@
+"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.CalloutNextGenComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LightbulbOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/LightbulbOutlineIcon"));
+var _ = require("../../..");
+var _statuses = _interopRequireDefault(require("../../../utils/devUtils/constants/statuses"));
+var _react2 = require("@emotion/react");
+var CalloutNextGenComponent = function CalloutNextGenComponent() {
+  return (0, _react2.jsx)(_.Box, {
+    gap: "md"
+  }, (0, _react2.jsx)(_.Callout, null, (0, _react2.jsx)(_.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.")), (0, _react2.jsx)(_.Callout, {
+    status: _statuses["default"].SUCCESS
+  }, (0, _react2.jsx)(_.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.")), (0, _react2.jsx)(_.Callout, {
+    status: _statuses["default"].WARNING
+  }, (0, _react2.jsx)(_.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.")), (0, _react2.jsx)(_.Callout, {
+    status: _statuses["default"].ERROR
+  }, (0, _react2.jsx)(_.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.")), (0, _react2.jsx)(_.Callout, {
+    status: _statuses["default"].SUCCESS,
+    icon: (0, _react2.jsx)(_.Icon, {
+      icon: _LightbulbOutlineIcon["default"],
+      size: "sm",
+      color: "success.bright",
+      mr: "md"
+    })
+  }, (0, _react2.jsx)(_.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.")));
+};
+exports.CalloutNextGenComponent = CalloutNextGenComponent;

package/lib/cjs/components/Callout/stories/NextGenCallout.chromatic.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

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

@@ -0,0 +1,22 @@
+"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"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _CalloutNextGenComponent = require("./CalloutNextGenComponent");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx Callout'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    theme: _.NextGenTheme
+  }, (0, _react2.jsx)(_CalloutNextGenComponent.CalloutNextGenComponent, null));
+};
+exports.Default = Default;

package/lib/cjs/components/Callout/stories/NextGenDarkCallout.chomatic.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

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

@@ -0,0 +1,22 @@
+"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"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _CalloutNextGenComponent = require("./CalloutNextGenComponent");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx Dark Callout'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    themeOverrides: [_.NextGenDarkTheme]
+  }, (0, _react2.jsx)(_CalloutNextGenComponent.CalloutNextGenComponent, null));
+};
+exports.Default = Default;

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

@@ -6,9 +6,6 @@ export declare const baseState: {
     isCustom: boolean;
 };
 declare const useGetTheme: () => {
-    styles: {
-        navButtonEstHeight: number;
-    };
     icons: {
         [x: number]: import("@pingux/mdi-react").MdiReactIconComponentType;
         MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
@@ -16,49 +13,14 @@ declare const useGetTheme: () => {
         pingLogoHorizontalSmall: import("react").JSX.Element;
         listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
     };
+    styles: {
+        navButtonEstHeight: number;
+    };
     tShirtSizes: {
         xxs: string;
-        'icon-100': string;
         xs: string;
-        'icon-200': string;
         sm: string;
-        'icon-300': string;
         md: string;
-        'icon-400': string;
-        'icon-500': string;
-        'icon-600': string;
-        'icon-700': string;
-        'icon-800': string;
-        'icon-900': string;
-    };
-    iconWrapperSizes: {
-        sm: number;
-        md: number;
-        lg: number;
-    };
-    themeState: {
-        isOnyx: boolean;
-        isAstro: boolean;
-        isOnyxDark: boolean;
-        isCustom: boolean;
-    };
-    name: string;
-} | {
-    icons: {
-        [x: number]: import("@pingux/mdi-react").MdiReactIconComponentType;
-        MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
-        MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
-        pingLogoHorizontalSmall: import("react").JSX.Element;
-        listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
-    };
-    styles: {
-        navButtonEstHeight: number;
-    };
-    tShirtSizes: {
-        xxs: number;
-        xs: number;
-        sm: number;
-        md: number;
     };
     iconWrapperSizes: {
         sm: number;

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

@@ -0,0 +1,27 @@
+declare const _default: {
+    base: {
+        color: string;
+        '> span': {
+            color: string;
+        };
+        '& > svg > path': {
+            fill: string;
+        };
+        '&.is-success, > .is-success': {
+            '& > svg > path': {
+                fill: string;
+            };
+        };
+        '&.is-warning, > .is-warning': {
+            '& > svg > path': {
+                fill: string;
+            };
+        };
+        '&.is-error, > .is-error': {
+            '& > svg > path': {
+                fill: string;
+            };
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+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'
+    }
+  }
+};
+var _default = {
+  base: base
+};
+exports["default"] = _default;

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

@@ -474,6 +474,32 @@ declare const _default: {
             };
         };
     };
+    callout: {
+        base: {
+            color: string;
+            '> span': {
+                color: string;
+            };
+            '& > svg > path': {
+                fill: string;
+            };
+            '&.is-success, > .is-success': {
+                '& > svg > path': {
+                    fill: string;
+                };
+            };
+            '&.is-warning, > .is-warning': {
+                '& > svg > path': {
+                    fill: string;
+                };
+            };
+            '&.is-error, > .is-error': {
+                '& > svg > path': {
+                    fill: string;
+                };
+            };
+        };
+    };
     table: {
         caption: {
             color: string;

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

@@ -7,6 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _avatar = require("./avatar");
+var _callout = _interopRequireDefault(require("./callout"));
 var _footer = require("./footer");
 var _iconBadge = _interopRequireDefault(require("./iconBadge"));
 var _listview = require("./listview");
@@ -125,6 +126,7 @@ var _default = {
       }
     }
   },
+  callout: _callout["default"],
   table: {
     caption: {
       color: 'text.secondary'

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

@@ -11,10 +11,10 @@ export declare const astroThemeValues: {
         navButtonEstHeight: number;
     };
     tShirtSizes: {
-        xxs: number;
-        xs: number;
-        sm: number;
-        md: number;
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
     };
     iconWrapperSizes: {
         sm: number;

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

@@ -1,8 +1,8 @@
 declare const _default: {
-    xxs: number;
-    xs: number;
-    sm: number;
-    md: number;
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
 };
 export default _default;
 export declare const iconWrapperSizes: {

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/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.5",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",