@pingux/astro 2.106.0-alpha.2 → 2.106.0

package/lib/cjs/components/AIComponents/Suggestions/Suggestion.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SuggestionProps } from '../../../types/suggestions';
+declare const Suggestion: (props: SuggestionProps) => React.JSX.Element;
+export default Suggestion;

package/lib/cjs/components/AIComponents/Suggestions/Suggestion.js

@@ -0,0 +1,46 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["isFullScreen", "text", "textProps", "iconProps"];
+var Suggestion = function Suggestion(props) {
+  var isFullScreen = props.isFullScreen,
+    text = props.text,
+    textProps = props.textProps,
+    iconProps = props.iconProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  if (isFullScreen) {
+    return (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({
+      variant: "cards.suggestionColumn",
+      tabIndex: "0"
+    }, others), (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
+      icon: _PlusIcon["default"]
+    }, iconProps)), (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({
+      variant: "suggestion"
+    }, textProps), text));
+  }
+  return (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({
+    variant: "cards.suggestionRow",
+    isRow: true,
+    alignItems: "center",
+    tabIndex: "0"
+  }, others), (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({
+    variant: "suggestion"
+  }, textProps), text), (0, _react2.jsx)(_index.Box, {
+    variant: "suggestion.iconContainer"
+  }, (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
+    icon: _PlusIcon["default"]
+  }, iconProps))));
+};
+var _default = Suggestion;
+exports["default"] = _default;

package/lib/cjs/components/AIComponents/Suggestions/Suggestions.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SuggestionsProps } from '../../../types/suggestions';
+declare const Suggestions: (props: SuggestionsProps) => React.JSX.Element;
+export default Suggestions;

package/lib/cjs/components/AIComponents/Suggestions/Suggestions.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../../hooks");
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "isFullScreen", "className"];
+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 Suggestions = function Suggestions(props) {
+  var children = props.children,
+    isFullScreen = props.isFullScreen,
+    className = props.className,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      isFullScreen: isFullScreen
+    }),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, others, {
+    className: classNames,
+    isRow: isFullScreen,
+    variant: "suggestions"
+  }), (0, _map["default"])(_react.Children).call(_react.Children, children, function (child) {
+    return (0, _react2.jsx)(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].cloneElement(child, {
+      isFullScreen: isFullScreen
+    }));
+  }));
+};
+var _default = Suggestions;
+exports["default"] = _default;

package/lib/cjs/components/AIComponents/Suggestions/Suggestions.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: (props: import("../../../types/suggestions").SuggestionsProps) => React.JSX.Element;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const FullScreen: () => React.JSX.Element;

package/lib/cjs/components/AIComponents/Suggestions/Suggestions.stories.js

@@ -0,0 +1,49 @@
+"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.FullScreen = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../../index");
+var _Suggestion = _interopRequireDefault(require("./Suggestion"));
+var _Suggestions = _interopRequireDefault(require("./Suggestions"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Ai Components/Suggestions',
+  component: _Suggestions["default"]
+};
+exports["default"] = _default;
+var lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+var Default = function Default() {
+  return (0, _react2.jsx)(_index.AstroWrapper, {
+    theme: _index.NextGenTheme
+  }, (0, _react2.jsx)(_Suggestions["default"], null, (0, _react2.jsx)(_Suggestion["default"], {
+    text: lorem
+  }), (0, _react2.jsx)(_Suggestion["default"], {
+    text: lorem
+  }), (0, _react2.jsx)(_Suggestion["default"], {
+    text: lorem
+  }), (0, _react2.jsx)(_Suggestion["default"], {
+    text: lorem
+  })));
+};
+exports.Default = Default;
+var FullScreen = function FullScreen() {
+  return (0, _react2.jsx)(_index.AstroWrapper, {
+    theme: _index.NextGenTheme
+  }, (0, _react2.jsx)(_Suggestions["default"], {
+    isFullScreen: true
+  }, (0, _react2.jsx)(_Suggestion["default"], {
+    text: lorem
+  }), (0, _react2.jsx)(_Suggestion["default"], {
+    text: lorem
+  }), (0, _react2.jsx)(_Suggestion["default"], {
+    text: lorem
+  }), (0, _react2.jsx)(_Suggestion["default"], {
+    text: lorem
+  })));
+};
+exports.FullScreen = FullScreen;

package/lib/cjs/components/AIComponents/Suggestions/Suggestions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/AIComponents/Suggestions/Suggestions.test.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _defineProperty = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _testWrapper = require("../../../utils/testUtils/testWrapper");
+var _Suggestion = _interopRequireDefault(require("./Suggestion"));
+var _Suggestions = _interopRequireDefault(require("./Suggestions"));
+var _react2 = require("@emotion/react");
+var containerTestId = 'suggestions-container';
+var defaultProps = {
+  isFullScreen: false,
+  'data-testid': containerTestId
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_.AstroProvider, {
+    theme: _.NextGenTheme
+  }, (0, _react2.jsx)(_Suggestions["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_Suggestion["default"], {
+    text: "Suggestion 1"
+  }))));
+};
+test('Suggestions component renders correctly', function () {
+  (0, _defineProperty["default"])(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(function (query) {
+      return {
+        matches: query === '(max-width: 993px)',
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn()
+      };
+    })
+  });
+  getComponent();
+  expect(_testWrapper.screen.getAllByText('Suggestion 1')[0]).toBeInTheDocument();
+});
+test('Suggestions component applies isFullScreen prop correctly', function () {
+  getComponent({
+    isFullScreen: true
+  });
+  var suggestions = _testWrapper.screen.getByTestId(containerTestId);
+  expect(suggestions).toHaveClass('is-full-screen');
+});

package/lib/cjs/components/AIComponents/Suggestions/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Suggestion } from './Suggestion';
+export { default } from './Suggestions';

package/lib/cjs/components/AIComponents/Suggestions/index.js

@@ -0,0 +1,21 @@
+"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
+});
+_Object$defineProperty(exports, "Suggestion", {
+  enumerable: true,
+  get: function get() {
+    return _Suggestion["default"];
+  }
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Suggestions["default"];
+  }
+});
+var _Suggestion = _interopRequireDefault(require("./Suggestion"));
+var _Suggestions = _interopRequireDefault(require("./Suggestions"));

package/lib/cjs/index.d.ts

@@ -14,6 +14,8 @@ export { default as ResponseAttachment } from './components/AIComponents/Respons
 export { default as ResponseList } from './components/AIComponents/Response/ResponseList';
 export { default as ResponseText } from './components/AIComponents/Response/ResponseText';
 export { default as ResponseToolbar } from './components/AIComponents/Response/ResponseToolbar';
+export { default } from './components/AIComponents/Suggestions';
+export { default as Suggestion } from './components/AIComponents/Suggestions/Suggestion';
 export { default as ArrayField } from './components/ArrayField';
 export * from './components/ArrayField';
 export { default as AstroWrapper } from './components/AstroProvider';

package/lib/cjs/index.js

@@ -24,6 +24,7 @@ var _exportNames = {
   ResponseList: true,
   ResponseText: true,
   ResponseToolbar: true,
+  Suggestion: true,
   ArrayField: true,
   AstroWrapper: true,
   AstroProvider: true,
@@ -841,6 +842,12 @@ _Object$defineProperty(exports, "SuccessCalloutBadge", {
     return _SuccessCalloutBadge["default"];
   }
 });
+_Object$defineProperty(exports, "Suggestion", {
+  enumerable: true,
+  get: function get() {
+    return _Suggestion["default"];
+  }
+});
 _Object$defineProperty(exports, "Switch", {
   enumerable: true,
   get: function get() {
@@ -955,6 +962,12 @@ _Object$defineProperty(exports, "WarningCalloutBadge", {
     return _WarningCalloutBadge["default"];
   }
 });
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Suggestions["default"];
+  }
+});
 _Object$defineProperty(exports, "useOverlayPosition", {
   enumerable: true,
   get: function get() {
@@ -1035,6 +1048,8 @@ var _ResponseAttachment = _interopRequireDefault(require("./components/AICompone
 var _ResponseList = _interopRequireDefault(require("./components/AIComponents/Response/ResponseList"));
 var _ResponseText = _interopRequireDefault(require("./components/AIComponents/Response/ResponseText"));
 var _ResponseToolbar = _interopRequireDefault(require("./components/AIComponents/Response/ResponseToolbar"));
+var _Suggestions = _interopRequireDefault(require("./components/AIComponents/Suggestions"));
+var _Suggestion = _interopRequireDefault(require("./components/AIComponents/Suggestions/Suggestion"));
 var _ArrayField = _interopRequireWildcard(require("./components/ArrayField"));
 _forEachInstanceProperty(_context5 = _Object$keys(_ArrayField)).call(_context5, function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -50,6 +50,7 @@ declare const colors: {
         base: string;
         secondary: string;
         card: string;
+        suggestion: string;
     };
     iconWrapper: {
         wrapper: {

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

@@ -108,7 +108,8 @@ var overrides = {
 var background = {
   base: 'white',
   secondary: _colorTokens.nextGenColors['gray-100'],
-  card: _colorTokens.nextGenColors['blue-100']
+  card: _colorTokens.nextGenColors['blue-100'],
+  suggestion: '#ecf0f5'
 };
 var card = {
   blue: _colorTokens.nextGenColors['blue-100'],

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

@@ -17,7 +17,7 @@ var componentSpecificNextGenBlacklist = {
   OverlayPanel: ['Expandable']
 };
 exports.componentSpecificNextGenBlacklist = componentSpecificNextGenBlacklist;
-var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response'];
+var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions'];
 exports.nextGenOnlyComponents = nextGenOnlyComponents;
 var _default = nextGenConvertedComponents;
 exports["default"] = _default;

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

@@ -38,6 +38,7 @@ declare const _default: {
             base: string;
             secondary: string;
             card: string;
+            suggestion: string;
         };
         iconWrapper: {
             wrapper: {
@@ -1806,6 +1807,44 @@ declare const _default: {
             fontWeight: number;
             flex: string;
         };
+        suggestionColumn: {
+            display: string;
+            backgroundColor: string;
+            borderRadius: string;
+            p: string;
+            '&.is-hovered': {
+                cursor: string;
+                backgroundColor: string;
+            };
+            gap: string;
+            flexGrow: number;
+            transition: string;
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+                backgroundColor: string;
+            };
+        };
+        suggestionRow: {
+            display: string;
+            backgroundColor: string;
+            borderRadius: string;
+            p: string;
+            '&.is-hovered': {
+                cursor: string;
+                backgroundColor: string;
+            };
+            gap: string;
+            flexGrow: number;
+            transition: string;
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+                backgroundColor: string;
+            };
+        };
     };
     variants: {
         navBar: {
@@ -2480,6 +2519,22 @@ declare const _default: {
                 backgroundColor: string;
             };
         };
+        suggestions: {
+            justifyContent: string;
+            gap: string;
+            flexDirection: string;
+            '&.is-full-screen': {
+                gap: string;
+                flexDirection: string;
+            };
+        };
+        suggestion: {
+            iconContainer: {
+                ml: string;
+                mr: string;
+                minWidth: string;
+            };
+        };
         response: {
             iconWrapper: {
                 border: string;

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

@@ -72,5 +72,43 @@ declare const _default: {
         fontWeight: number;
         flex: string;
     };
+    suggestionColumn: {
+        display: string;
+        backgroundColor: string;
+        borderRadius: string;
+        p: string;
+        '&.is-hovered': {
+            cursor: string;
+            backgroundColor: string;
+        };
+        gap: string;
+        flexGrow: number;
+        transition: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+            backgroundColor: string;
+        };
+    };
+    suggestionRow: {
+        display: string;
+        backgroundColor: string;
+        borderRadius: string;
+        p: string;
+        '&.is-hovered': {
+            cursor: string;
+            backgroundColor: string;
+        };
+        gap: string;
+        flexGrow: number;
+        transition: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+            backgroundColor: string;
+        };
+    };
 };
 export default _default;

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

@@ -57,11 +57,37 @@ var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
     bg: 'default'
   }
 });
+var baseSuggestion = {
+  backgroundColor: 'light',
+  borderRadius: '4px',
+  p: 'md',
+  '&.is-hovered': {
+    cursor: 'pointer',
+    backgroundColor: 'background.suggestion'
+  },
+  gap: 'md',
+  flexGrow: 1,
+  transition: 'all .2s ease',
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'focus',
+    outlineOffset: '0px',
+    backgroundColor: 'background.suggestion'
+  }
+};
+var suggestionRow = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
+  display: 'flex'
+});
+var suggestionColumn = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
+  display: 'flex'
+});
 var _default = {
   interactive: interactive,
   dark: dark,
   light: light,
   activeCard: activeCard,
-  container: container
+  container: container,
+  suggestionColumn: suggestionColumn,
+  suggestionRow: suggestionRow
 };
 exports["default"] = _default;

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

@@ -0,0 +1,8 @@
+declare const _default: {
+    iconContainer: {
+        ml: string;
+        mr: string;
+        minWidth: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,16 @@
+"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 iconContainer = {
+  ml: 'auto',
+  mr: '0px',
+  minWidth: '25px'
+};
+var _default = {
+  iconContainer: iconContainer
+};
+exports["default"] = _default;

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

@@ -0,0 +1,10 @@
+declare const _default: {
+    justifyContent: string;
+    gap: string;
+    flexDirection: string;
+    '&.is-full-screen': {
+        gap: string;
+        flexDirection: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,17 @@
+"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 _default = {
+  justifyContent: 'space-between',
+  gap: 'sm',
+  flexDirection: 'column',
+  '&.is-full-screen': {
+    gap: 'lg',
+    flexDirection: 'row'
+  }
+};
+exports["default"] = _default;

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

@@ -879,6 +879,22 @@ declare const _default: {
             backgroundColor: string;
         };
     };
+    suggestions: {
+        justifyContent: string;
+        gap: string;
+        flexDirection: string;
+        '&.is-full-screen': {
+            gap: string;
+            flexDirection: string;
+        };
+    };
+    suggestion: {
+        iconContainer: {
+            ml: string;
+            mr: string;
+            minWidth: string;
+        };
+    };
     response: {
         iconWrapper: {
             border: string;

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

@@ -24,6 +24,8 @@ var _messages = require("./messages");
 var _navbar = require("./navbar");
 var _prompt = _interopRequireDefault(require("./prompt"));
 var _response = _interopRequireDefault(require("./response"));
+var _suggestion = _interopRequireDefault(require("./suggestion"));
+var _suggestions = _interopRequireDefault(require("./suggestions"));
 var _tabs = require("./tabs");
 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; }
@@ -328,6 +330,8 @@ var _default = {
   menu: _menu.menu,
   iconWrapper: _iconWrapper["default"],
   overlayPanel: overlayPanel,
+  suggestions: _suggestions["default"],
+  suggestion: _suggestion["default"],
   response: _response["default"]
 };
 exports["default"] = _default;

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

@@ -0,0 +1,13 @@
+import { BoxProps } from './box';
+import { CardProps } from './card';
+import { IconProps } from './icon';
+import { TextProps } from './text';
+export interface SuggestionProps extends CardProps {
+    iconProps?: IconProps;
+    textProps?: TextProps;
+    text: string;
+    isFullScreen?: boolean;
+}
+export interface SuggestionsProps extends BoxProps {
+    isFullScreen?: boolean;
+}

package/lib/cjs/types/suggestions.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/AIComponents/Suggestions/Suggestion.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["isFullScreen", "text", "textProps", "iconProps"];
+import React from 'react';
+import PlusIcon from '@pingux/mdi-react/PlusIcon';
+import { Box, Card, Icon, Text } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Suggestion = function Suggestion(props) {
+  var isFullScreen = props.isFullScreen,
+    text = props.text,
+    textProps = props.textProps,
+    iconProps = props.iconProps,
+    others = _objectWithoutProperties(props, _excluded);
+  if (isFullScreen) {
+    return ___EmotionJSX(Card, _extends({
+      variant: "cards.suggestionColumn",
+      tabIndex: "0"
+    }, others), ___EmotionJSX(Icon, _extends({
+      icon: PlusIcon
+    }, iconProps)), ___EmotionJSX(Text, _extends({
+      variant: "suggestion"
+    }, textProps), text));
+  }
+  return ___EmotionJSX(Card, _extends({
+    variant: "cards.suggestionRow",
+    isRow: true,
+    alignItems: "center",
+    tabIndex: "0"
+  }, others), ___EmotionJSX(Text, _extends({
+    variant: "suggestion"
+  }, textProps), text), ___EmotionJSX(Box, {
+    variant: "suggestion.iconContainer"
+  }, ___EmotionJSX(Icon, _extends({
+    icon: PlusIcon
+  }, iconProps))));
+};
+export default Suggestion;

package/lib/components/AIComponents/Suggestions/Suggestions.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "isFullScreen", "className"];
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { Children } from 'react';
+import { useStatusClasses } from '../../../hooks';
+import { Box } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Suggestions = function Suggestions(props) {
+  var children = props.children,
+    isFullScreen = props.isFullScreen,
+    className = props.className,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useStatusClasses = useStatusClasses(className, {
+      isFullScreen: isFullScreen
+    }),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(Box, _extends({}, others, {
+    className: classNames,
+    isRow: isFullScreen,
+    variant: "suggestions"
+  }), _mapInstanceProperty(Children).call(Children, children, function (child) {
+    return ___EmotionJSX(React.Fragment, null, /*#__PURE__*/React.cloneElement(child, {
+      isFullScreen: isFullScreen
+    }));
+  }));
+};
+export default Suggestions;

package/lib/components/AIComponents/Suggestions/Suggestions.stories.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { AstroWrapper, NextGenTheme } from '../../../index';
+import Suggestion from './Suggestion';
+import Suggestions from './Suggestions';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Ai Components/Suggestions',
+  component: Suggestions
+};
+var lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+export var Default = function Default() {
+  return ___EmotionJSX(AstroWrapper, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(Suggestions, null, ___EmotionJSX(Suggestion, {
+    text: lorem
+  }), ___EmotionJSX(Suggestion, {
+    text: lorem
+  }), ___EmotionJSX(Suggestion, {
+    text: lorem
+  }), ___EmotionJSX(Suggestion, {
+    text: lorem
+  })));
+};
+export var FullScreen = function FullScreen() {
+  return ___EmotionJSX(AstroWrapper, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(Suggestions, {
+    isFullScreen: true
+  }, ___EmotionJSX(Suggestion, {
+    text: lorem
+  }), ___EmotionJSX(Suggestion, {
+    text: lorem
+  }), ___EmotionJSX(Suggestion, {
+    text: lorem
+  }), ___EmotionJSX(Suggestion, {
+    text: lorem
+  })));
+};

package/lib/components/AIComponents/Suggestions/Suggestions.test.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import React from 'react';
+import { AstroProvider, NextGenTheme } from '../../..';
+import { render, screen } from '../../../utils/testUtils/testWrapper';
+import Suggestion from './Suggestion';
+import Suggestions from './Suggestions';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var containerTestId = 'suggestions-container';
+var defaultProps = {
+  isFullScreen: false,
+  'data-testid': containerTestId
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(AstroProvider, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(Suggestions, _extends({}, defaultProps, props), ___EmotionJSX(Suggestion, {
+    text: "Suggestion 1"
+  }))));
+};
+test('Suggestions component renders correctly', function () {
+  _Object$defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(function (query) {
+      return {
+        matches: query === '(max-width: 993px)',
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn()
+      };
+    })
+  });
+  getComponent();
+  expect(screen.getAllByText('Suggestion 1')[0]).toBeInTheDocument();
+});
+test('Suggestions component applies isFullScreen prop correctly', function () {
+  getComponent({
+    isFullScreen: true
+  });
+  var suggestions = screen.getByTestId(containerTestId);
+  expect(suggestions).toHaveClass('is-full-screen');
+});

package/lib/components/AIComponents/Suggestions/index.js

@@ -0,0 +1,2 @@
+export { default as Suggestion } from './Suggestion';
+export { default } from './Suggestions';

package/lib/index.js

@@ -18,6 +18,8 @@ export { default as ResponseAttachment } from './components/AIComponents/Respons
 export { default as ResponseList } from './components/AIComponents/Response/ResponseList';
 export { default as ResponseText } from './components/AIComponents/Response/ResponseText';
 export { default as ResponseToolbar } from './components/AIComponents/Response/ResponseToolbar';
+export { default } from './components/AIComponents/Suggestions';
+export { default as Suggestion } from './components/AIComponents/Suggestions/Suggestion';
 export { default as ArrayField } from './components/ArrayField';
 export * from './components/ArrayField';
 export { default as AstroWrapper } from './components/AstroProvider';

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

@@ -98,7 +98,8 @@ var overrides = {
 var background = {
   base: 'white',
   secondary: nextGenColors['gray-100'],
-  card: nextGenColors['blue-100']
+  card: nextGenColors['blue-100'],
+  suggestion: '#ecf0f5'
 };
 var card = {
   blue: nextGenColors['blue-100'],

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

@@ -9,5 +9,5 @@ export var componentSpecificNextGenBlacklist = {
   TextField: ['Success'],
   OverlayPanel: ['Expandable']
 };
-export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response'];
+export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions'];
 export default nextGenConvertedComponents;

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

@@ -49,10 +49,36 @@ var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
     bg: 'default'
   }
 });
+var baseSuggestion = {
+  backgroundColor: 'light',
+  borderRadius: '4px',
+  p: 'md',
+  '&.is-hovered': {
+    cursor: 'pointer',
+    backgroundColor: 'background.suggestion'
+  },
+  gap: 'md',
+  flexGrow: 1,
+  transition: 'all .2s ease',
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'focus',
+    outlineOffset: '0px',
+    backgroundColor: 'background.suggestion'
+  }
+};
+var suggestionRow = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
+  display: 'flex'
+});
+var suggestionColumn = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
+  display: 'flex'
+});
 export default {
   interactive: interactive,
   dark: dark,
   light: light,
   activeCard: activeCard,
-  container: container
+  container: container,
+  suggestionColumn: suggestionColumn,
+  suggestionRow: suggestionRow
 };

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

@@ -0,0 +1,8 @@
+var iconContainer = {
+  ml: 'auto',
+  mr: '0px',
+  minWidth: '25px'
+};
+export default {
+  iconContainer: iconContainer
+};

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

@@ -0,0 +1,9 @@
+export default {
+  justifyContent: 'space-between',
+  gap: 'sm',
+  flexDirection: 'column',
+  '&.is-full-screen': {
+    gap: 'lg',
+    flexDirection: 'row'
+  }
+};

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

@@ -19,6 +19,8 @@ import { message } from './messages';
 import { navBar } from './navbar';
 import prompt from './prompt';
 import response from './response';
+import suggestion from './suggestion';
+import suggestions from './suggestions';
 import { menuTab, tab, tabs } from './tabs';
 var fieldHelperText = {
   title: {
@@ -319,5 +321,7 @@ export default {
   menu: menu,
   iconWrapper: iconWrapper,
   overlayPanel: overlayPanel,
+  suggestions: suggestions,
+  suggestion: suggestion,
   response: response
 };

package/lib/types/suggestions.js

@@ -0,0 +1 @@
+export {};

package/package.json

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