@pingux/astro 2.104.0-alpha.3 → 2.104.0-alpha.4

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

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

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

@@ -0,0 +1,34 @@
+"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 _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["state", "triggerRef", "isExpanded", "setIsExpanded", "onPanelClose", "children", "headerProps"];
+var AIPanel = function AIPanel(props) {
+  var state = props.state,
+    triggerRef = props.triggerRef,
+    isExpanded = props.isExpanded,
+    setIsExpanded = props.setIsExpanded,
+    onPanelClose = props.onPanelClose,
+    children = props.children,
+    headerProps = props.headerProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, (0, _extends2["default"])({
+    isTransitioning: state === null || state === void 0 ? void 0 : state.isTransitioning,
+    isOpen: state.isOpen,
+    state: state,
+    triggerRef: triggerRef,
+    size: isExpanded ? 'full' : 'small',
+    variant: "overlayPanel.aiPanelContainer"
+  }, others), children));
+};
+var _default = AIPanel;
+exports["default"] = _default;

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

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

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

@@ -0,0 +1,107 @@
+"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"] = exports.Default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _AutoAwesomeOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AutoAwesomeOutlineIcon"));
+var _DotsHorizontalIcon = _interopRequireDefault(require("@pingux/mdi-react/DotsHorizontalIcon"));
+var _hooks = require("../../../hooks");
+var _index = require("../../../index");
+var _AIPanel = _interopRequireDefault(require("./AIPanel"));
+var _AIPanelHeader = _interopRequireDefault(require("./AIPanelHeader"));
+var _react2 = require("@emotion/react");
+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 _default = {
+  component: _AIPanel["default"],
+  title: 'AI Components/AI Panel'
+};
+exports["default"] = _default;
+var AIMenuPopover = function AIMenuPopover() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  return (0, _react2.jsx)(_index.PopoverMenu, {
+    isOpen: isOpen,
+    onOpenChange: setIsOpen
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "more options"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _DotsHorizontalIcon["default"],
+    size: "sm",
+    title: {
+      name: 'Dots Vertical Icon'
+    }
+  })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_index.Item, {
+    key: "edit"
+  }, "Edit"), (0, _react2.jsx)(_index.Item, {
+    key: "duplicate"
+  }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+    key: "delete",
+    textValue: "delete"
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "critical.bright"
+  }, "Delete"))));
+};
+var Default = function Default() {
+  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)({
+      transitionDuration: 1000
+    }),
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
+  var triggerRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
+  var onPanelClose = function onPanelClose() {
+    state.close();
+    onClose();
+  };
+  var setIsPanelExpanded = function setIsPanelExpanded() {
+    setIsExpanded(!isExpanded);
+  };
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      maxWidth: state.isOpen ? 'calc(100% - 420px)' : '100%',
+      transition: '.4s all ease'
+    }
+  }, (0, _react2.jsx)(_index.Button, {
+    ref: triggerRef,
+    onPress: state.open,
+    "aria-expanded": state.isOpen,
+    variant: "aiChat",
+    title: "open ai chat panel"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _AutoAwesomeOutlineIcon["default"]
+  }), "Open Panel"), (0, _react2.jsx)(_AIPanel["default"], {
+    state: state,
+    triggerRef: triggerRef,
+    isExpanded: isExpanded,
+    setIsExpanded: setIsPanelExpanded,
+    onPanelClose: onPanelClose
+  }, (0, _react2.jsx)(_AIPanelHeader["default"], {
+    slots: {
+      menuSlot: (0, _react2.jsx)(AIMenuPopover, null)
+    },
+    isExpanded: isExpanded,
+    setIsExpanded: setIsPanelExpanded,
+    onPanelClose: onPanelClose
+  }), (0, _react2.jsx)(_index.Box, {
+    gap: "md",
+    py: "md",
+    minHeight: "100%",
+    maxWidth: "768px",
+    alignSelf: "center"
+  }, "AI Component Children will render here")));
+};
+exports.Default = Default;

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

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

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

@@ -0,0 +1,105 @@
+"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");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../../hooks");
+var _index = require("../../../index");
+var _testWrapper = require("../../../utils/testUtils/testWrapper");
+var _AIPanel = _interopRequireDefault(require("./AIPanel"));
+var _AIPanelHeader = _interopRequireDefault(require("./AIPanelHeader"));
+var _react2 = require("@emotion/react");
+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 testId = 'test-overlayPanel';
+var closeButtonId = 'close-button';
+var defaultProps = {
+  'data-testid': testId
+};
+var slotText = 'slot text';
+var AIMenuPopover = function AIMenuPopover() {
+  return (0, _react2.jsx)("p", null, slotText);
+};
+var Component = function Component(props) {
+  var slots = props.slots;
+  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)({
+      transitionDuration: 1000
+    }),
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
+  var triggerRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var onPanelClose = function onPanelClose() {
+    state.close();
+    onClose();
+  };
+  var setIsPanelExpanded = function setIsPanelExpanded() {
+    setIsExpanded(!isExpanded);
+  };
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      maxWidth: state.isOpen ? 'calc(100% - 420px)' : '100%',
+      transition: '.4s all ease'
+    }
+  }, (0, _react2.jsx)(_index.Button, {
+    ref: triggerRef,
+    onPress: state.open,
+    "aria-expanded": state.isOpen
+  }, "Open Panel"), (0, _react2.jsx)(_AIPanel["default"], (0, _extends2["default"])({
+    triggerRef: triggerRef,
+    isExpanded: isExpanded,
+    setIsExpanded: setIsPanelExpanded,
+    onPanelClose: onPanelClose
+  }, defaultProps, {
+    state: state
+  }), (0, _react2.jsx)(_AIPanelHeader["default"], {
+    slots: slots,
+    isExpanded: isExpanded,
+    setIsExpanded: setIsPanelExpanded,
+    onPanelClose: onPanelClose
+  }), "AI Component Children will render here"));
+};
+test('AIPanel renders correctly', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(Component, null));
+  expect(_testWrapper.screen.getByText('Open Panel')).toBeInTheDocument();
+});
+test('AIPanel opens and closes correctly', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(Component, null));
+  var openButton = _testWrapper.screen.getByText('Open Panel');
+  _testWrapper.fireEvent.click(openButton);
+  expect(_testWrapper.screen.getByTestId(testId)).toBeInTheDocument();
+  var closeButton = _testWrapper.screen.getByTestId(closeButtonId);
+  _testWrapper.fireEvent.click(closeButton);
+  expect(_testWrapper.screen.queryByTestId(testId)).not.toHaveClass('is-open');
+});
+test('AIPanel expands and collapses correctly', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(Component, null));
+  var openButton = _testWrapper.screen.getByText('Open Panel');
+  _testWrapper.fireEvent.click(openButton);
+  expect(_testWrapper.screen.getByTestId(testId)).toBeInTheDocument();
+  var expandButton = _testWrapper.screen.getByTestId('expand-button');
+  _testWrapper.fireEvent.click(expandButton);
+  expect(_testWrapper.screen.getByTestId(testId)).toHaveClass('is-full');
+  _testWrapper.fireEvent.click(expandButton);
+  expect(_testWrapper.screen.getByTestId(testId)).not.toHaveClass('is-full');
+});
+test('AIPanel menuSlot renders correctly', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(Component, {
+    slots: {
+      menuSlot: (0, _react2.jsx)(AIMenuPopover, null)
+    }
+  }));
+  var openButton = _testWrapper.screen.getByText('Open Panel');
+  _testWrapper.fireEvent.click(openButton);
+  expect(_testWrapper.screen.getByTestId(testId)).toBeInTheDocument();
+  var thisSlot = _testWrapper.screen.getByText(slotText);
+  expect(thisSlot).toBeInTheDocument();
+});

package/lib/cjs/components/AIComponents/AIPanel/AIPanelHeader.d.ts

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

package/lib/cjs/components/AIComponents/AIPanel/AIPanelHeader.js

@@ -0,0 +1,56 @@
+"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 _react = _interopRequireDefault(require("react"));
+var _ArrowCollapseIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowCollapseIcon"));
+var _ArrowTopRightBottomLeftIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowTopRightBottomLeftIcon"));
+var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var AIPanelHeader = function AIPanelHeader(props) {
+  var setIsExpanded = props.setIsExpanded,
+    isExpanded = props.isExpanded,
+    onPanelClose = props.onPanelClose,
+    slots = props.slots,
+    expandButtonProps = props.expandButtonProps,
+    closeButtonProps = props.closeButtonProps;
+  var toggleExpanded = function toggleExpanded() {
+    if (setIsExpanded) {
+      setIsExpanded(!isExpanded);
+    }
+  };
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "aiPanelHeader"
+  }, "AI Assistant"), (0, _react2.jsx)(_index.Box, {
+    sx: {
+      ml: 'auto',
+      mr: '0px'
+    },
+    isRow: true,
+    alignItems: "center",
+    gap: "xs"
+  }, (slots === null || slots === void 0 ? void 0 : slots.menuSlot) && slots.menuSlot, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
+    onPress: toggleExpanded,
+    "data-testid": "expand-button",
+    title: "toggle panel expansion"
+  }, expandButtonProps), (0, _react2.jsx)(_index.Icon, {
+    icon: isExpanded ? _ArrowCollapseIcon["default"] : _ArrowTopRightBottomLeftIcon["default"]
+  })), (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
+    onPress: onPanelClose,
+    title: "close panel",
+    "data-testid": "close-button"
+  }, closeButtonProps), (0, _react2.jsx)(_index.Icon, {
+    icon: _CloseIcon["default"]
+  }))));
+};
+var _default = AIPanelHeader;
+exports["default"] = _default;

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

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

package/lib/cjs/components/AIComponents/AIPanel/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, "AIPanelHeader", {
+  enumerable: true,
+  get: function get() {
+    return _AIPanelHeader["default"];
+  }
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _AIPanel["default"];
+  }
+});
+var _AIPanel = _interopRequireDefault(require("./AIPanel"));
+var _AIPanelHeader = _interopRequireDefault(require("./AIPanelHeader"));

package/lib/cjs/index.d.ts

@@ -6,6 +6,8 @@ export { default as AccordionGroup } from './components/AccordionGroup';
 export * from './components/AccordionGroup';
 export { default as AccordionItem } from './components/AccordionItem';
 export * from './components/AccordionItem';
+export { default as AIPanel } from './components/AIComponents/AIPanel/AIPanel';
+export { default as AIPanelHeader } from './components/AIComponents/AIPanel/AIPanelHeader';
 export { default as Prompt } from './components/AIComponents/Prompt';
 export { default as Response } from './components/AIComponents/Response';
 export { default as ResponseAttachment } from './components/AIComponents/Response/ResponseAttachment';

package/lib/cjs/index.js

@@ -16,6 +16,8 @@ var _exportNames = {
   AccordionGridItem: true,
   AccordionGroup: true,
   AccordionItem: true,
+  AIPanel: true,
+  AIPanelHeader: true,
   Prompt: true,
   Response: true,
   ResponseAttachment: true,
@@ -147,6 +149,18 @@ var _exportNames = {
   DataTableHeader: true,
   DataTableRow: true
 };
+_Object$defineProperty(exports, "AIPanel", {
+  enumerable: true,
+  get: function get() {
+    return _AIPanel["default"];
+  }
+});
+_Object$defineProperty(exports, "AIPanelHeader", {
+  enumerable: true,
+  get: function get() {
+    return _AIPanelHeader["default"];
+  }
+});
 _Object$defineProperty(exports, "AccordionGridGroup", {
   enumerable: true,
   get: function get() {
@@ -999,6 +1013,8 @@ _forEachInstanceProperty(_context4 = _Object$keys(_AccordionItem)).call(_context
     }
   });
 });
+var _AIPanel = _interopRequireDefault(require("./components/AIComponents/AIPanel/AIPanel"));
+var _AIPanelHeader = _interopRequireDefault(require("./components/AIComponents/AIPanel/AIPanelHeader"));
 var _Prompt = _interopRequireDefault(require("./components/AIComponents/Prompt"));
 var _Response = _interopRequireDefault(require("./components/AIComponents/Response"));
 var _ResponseAttachment = _interopRequireDefault(require("./components/AIComponents/Response/ResponseAttachment"));

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

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

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

@@ -894,6 +894,54 @@ declare const _default: {
                 };
             };
         };
+        aiChat: {
+            maxWidth: string;
+            gap: string;
+            border: string;
+            backgroundColor: string;
+            color: string;
+            path: {
+                fill: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-hovered': {
+                backgroundColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            display: string;
+            borderColor: string;
+            alignItems: string;
+            justifyContent: string;
+            minWidth: string;
+            cursor: string;
+            fontFamily: string;
+            fontSize: string;
+            flexGrow: string;
+            fontWeight: number;
+            textAlign: string;
+            verticalAlign: string;
+            lineHeight: number;
+            borderRadius: string;
+            px: string;
+            py: string;
+            height: string;
+            '&.is-disabled': {
+                opacity: number;
+            };
+            transition: string;
+        };
     };
     forms: {
         input: import("theme-ui").ThemeUICSSObject;
@@ -1039,6 +1087,12 @@ declare const _default: {
         md: string;
     };
     text: {
+        aiPanelHeader: {
+            fontFamily: string;
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
         h1: {
             fontSize: string;
             fontWeight: number;
@@ -1085,6 +1139,12 @@ declare const _default: {
             fontWeight: string;
             letterSpacing: string;
         };
+        suggestion: {
+            fontSize: string;
+            fontFamily: string;
+            color: string;
+            lineHeight: string;
+        };
         modalTitle: {
             fontSize: string;
             fontWeight: string;
@@ -2310,6 +2370,41 @@ declare const _default: {
         overlayPanel: {
             container: {
                 backgroundColor: string;
+                border: string;
+            };
+            aiPanelContainer: {
+                backgroundColor: string;
+                border: string;
+                borderLeft: string;
+                position: string;
+                overflowY: string;
+                top: number;
+                bottom: number;
+                alignItems: string;
+                justifyContent: string;
+                boxShadow: string;
+                display: string;
+                opacity: number;
+                right: string;
+                transition: string;
+                maxWidth: string;
+                p: string;
+                '&.is-small': {
+                    width: string;
+                };
+                '&.is-full': {
+                    width: string;
+                };
+                '&.is-open.is-transitioning': {
+                    right: number;
+                    opacity: number;
+                };
+            };
+            body: {
+                gap: string;
+                minHeight: string;
+                maxWidth: string;
+                alignSelf: string;
             };
             innerPanel: {
                 backgroundColor: string;

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

@@ -662,5 +662,53 @@ declare const buttons: {
             };
         };
     };
+    aiChat: {
+        maxWidth: string;
+        gap: string;
+        border: string;
+        backgroundColor: string;
+        color: string;
+        path: {
+            fill: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+            path: {
+                fill: string;
+            };
+        };
+        display: string;
+        borderColor: string;
+        alignItems: string;
+        justifyContent: string;
+        minWidth: string;
+        cursor: string;
+        fontFamily: string;
+        fontSize: string;
+        flexGrow: string;
+        fontWeight: number;
+        textAlign: string;
+        verticalAlign: string;
+        lineHeight: number;
+        borderRadius: string;
+        px: string;
+        py: string;
+        height: string;
+        '&.is-disabled': {
+            opacity: number;
+        };
+        transition: string;
+    };
 };
 export default buttons;

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

@@ -160,6 +160,33 @@ var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
   display: 'inline-flex',
   color: 'white'
 });
+var aiChat = _objectSpread(_objectSpread({}, withIcon), {}, {
+  maxWidth: 'fit-content',
+  gap: 'sm',
+  border: 'none',
+  backgroundColor: 'transparent',
+  color: 'text.primary',
+  path: {
+    fill: 'text.primary'
+  },
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'primary',
+    outlineOffset: '3px'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'gray-100',
+    path: {
+      fill: 'dark'
+    }
+  },
+  '&.is-pressed': {
+    backgroundColor: '#d5dfe8 !important',
+    path: {
+      fill: 'dark'
+    }
+  }
+});
 var baseIconButton = {
   cursor: 'pointer',
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
@@ -281,7 +308,8 @@ var buttons = {
   withIcon: withIcon,
   primaryWithIcon: primaryWithIcon,
   iconButtons: iconButtons,
-  modalCloseButton: modalCloseButton
+  modalCloseButton: modalCloseButton,
+  aiChat: aiChat
 };
 var _default = buttons;
 exports["default"] = _default;

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

@@ -1,4 +1,10 @@
 export declare const text: {
+    aiPanelHeader: {
+        fontFamily: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+    };
     h1: {
         fontSize: string;
         fontWeight: number;
@@ -45,6 +51,12 @@ export declare const text: {
         fontWeight: string;
         letterSpacing: string;
     };
+    suggestion: {
+        fontSize: string;
+        fontFamily: string;
+        color: string;
+        lineHeight: string;
+    };
     modalTitle: {
         fontSize: string;
         fontWeight: string;

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

@@ -55,7 +55,7 @@ var hTags = {
     fontSize: 'xs'
   }
 };
-var text = _objectSpread({
+var text = _objectSpread(_objectSpread({
   sideNavHeader: {
     py: 'sm',
     lineHeight: 'body',
@@ -65,6 +65,12 @@ var text = _objectSpread({
     fontWeight: '1',
     letterSpacing: '1px'
   },
+  suggestion: {
+    fontSize: 'md',
+    fontFamily: 'standard',
+    color: 'text.primary',
+    lineHeight: '24px'
+  },
   modalTitle: {
     fontSize: '20px',
     fontWeight: '2',
@@ -101,5 +107,12 @@ var text = _objectSpread({
       display: 'list-item'
     }
   }
-}, hTags);
+}, hTags), {}, {
+  aiPanelHeader: {
+    fontFamily: 'standard',
+    color: 'text.primary',
+    fontSize: 'lg',
+    fontWeight: 2
+  }
+});
 exports.text = text;

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

@@ -839,6 +839,41 @@ declare const _default: {
     overlayPanel: {
         container: {
             backgroundColor: string;
+            border: string;
+        };
+        aiPanelContainer: {
+            backgroundColor: string;
+            border: string;
+            borderLeft: string;
+            position: string;
+            overflowY: string;
+            top: number;
+            bottom: number;
+            alignItems: string;
+            justifyContent: string;
+            boxShadow: string;
+            display: string;
+            opacity: number;
+            right: string;
+            transition: string;
+            maxWidth: string;
+            p: string;
+            '&.is-small': {
+                width: string;
+            };
+            '&.is-full': {
+                width: string;
+            };
+            '&.is-open.is-transitioning': {
+                right: number;
+                opacity: number;
+            };
+        };
+        body: {
+            gap: string;
+            minHeight: string;
+            maxWidth: string;
+            alignSelf: string;
         };
         innerPanel: {
             backgroundColor: string;

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

@@ -266,7 +266,42 @@ var dataTable = {
 };
 var overlayPanel = {
   container: {
-    backgroundColor: 'background.base'
+    backgroundColor: 'background.base',
+    border: 'none'
+  },
+  aiPanelContainer: {
+    backgroundColor: 'background.base',
+    border: 'none',
+    borderLeft: 'none',
+    position: 'fixed',
+    overflowY: 'scroll',
+    top: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '-2px 0px 2px 1px rgba(37, 55, 70, 0.15)',
+    display: 'flex !important',
+    opacity: 0,
+    right: '-50%',
+    transition: 'all 500ms',
+    maxWidth: '100%',
+    p: 'lg',
+    '&.is-small': {
+      width: '420px'
+    },
+    '&.is-full': {
+      width: 'container.full'
+    },
+    '&.is-open.is-transitioning': {
+      right: 0,
+      opacity: 1
+    }
+  },
+  body: {
+    gap: 'md',
+    minHeight: '100%',
+    maxWidth: '768px',
+    alignSelf: 'center'
   },
   innerPanel: {
     backgroundColor: 'background.base'

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { BoxProps } from './box';
+import { IconButtonProps } from './iconButton';
+import { OverlayPanelProps, OverlayPanelState } from './overlayPanel';
+interface SharedAIPanelProps {
+    isExpanded?: boolean;
+    setIsExpanded?: (isExpanded: boolean) => void;
+    onPanelClose?: () => void;
+}
+export interface AIPanelProps extends OverlayPanelProps, SharedAIPanelProps {
+    headerProps?: object;
+    state: OverlayPanelState;
+}
+export interface AIPanelHeaderProps extends BoxProps, SharedAIPanelProps {
+    onClose?: () => void;
+    setIsExpanded?: (isExpanded: boolean) => void;
+    isExpanded?: boolean;
+    onPanelClose?: () => void;
+    expandButtonProps?: IconButtonProps;
+    closeButtonProps?: IconButtonProps;
+    slots?: {
+        menuSlot?: React.ReactNode;
+    };
+}
+export {};

package/lib/cjs/types/aiPanel.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/cjs/types/overlayPanel.d.ts

@@ -5,6 +5,9 @@ import { UseOverlayPanelStateReturnOnClose } from '../hooks/useOverlayPanelState
 import { TestingAttributes } from './shared/test';
 import { BoxProps } from './box';
 import { PanelSize } from './shared';
+export interface OverlayPanelState extends OverlayTriggerState {
+    isTransitioning?: boolean;
+}
 export interface OverlayPanelProps extends BoxProps, TestingAttributes {
     /** Sets the open state of the menu. */
     isOpen?: boolean;
@@ -19,5 +22,5 @@ export interface OverlayPanelProps extends BoxProps, TestingAttributes {
     triggerRef?: React.RefObject<HTMLButtonElement>;
     /** Inline styling prop for item */
     sx?: ThemeUICSSObject;
-    state?: OverlayTriggerState;
+    state?: OverlayPanelState;
 }

package/lib/components/AIComponents/AIPanel/AIPanel.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["state", "triggerRef", "isExpanded", "setIsExpanded", "onPanelClose", "children", "headerProps"];
+import React from 'react';
+import { OverlayPanel, OverlayProvider } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var AIPanel = function AIPanel(props) {
+  var state = props.state,
+    triggerRef = props.triggerRef,
+    isExpanded = props.isExpanded,
+    setIsExpanded = props.setIsExpanded,
+    onPanelClose = props.onPanelClose,
+    children = props.children,
+    headerProps = props.headerProps,
+    others = _objectWithoutProperties(props, _excluded);
+  return ___EmotionJSX(OverlayProvider, null, (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, _extends({
+    isTransitioning: state === null || state === void 0 ? void 0 : state.isTransitioning,
+    isOpen: state.isOpen,
+    state: state,
+    triggerRef: triggerRef,
+    size: isExpanded ? 'full' : 'small',
+    variant: "overlayPanel.aiPanelContainer"
+  }, others), children));
+};
+export default AIPanel;

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

@@ -0,0 +1,92 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import AutoAwesomeIcon from '@pingux/mdi-react/AutoAwesomeOutlineIcon';
+import DotsIcon from '@pingux/mdi-react/DotsHorizontalIcon';
+import { useOverlayPanelState } from '../../../hooks';
+import { Box, Button, Icon, IconButton, Item, Menu, PopoverMenu, Text } from '../../../index';
+import AIPanel from './AIPanel';
+import AIPanelHeader from './AIPanelHeader';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  component: AIPanel,
+  title: 'AI Components/AI Panel'
+};
+var AIMenuPopover = function AIMenuPopover() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  return ___EmotionJSX(PopoverMenu, {
+    isOpen: isOpen,
+    onOpenChange: setIsOpen
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "more options"
+  }, ___EmotionJSX(Icon, {
+    icon: DotsIcon,
+    size: "sm",
+    title: {
+      name: 'Dots Vertical Icon'
+    }
+  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+    key: "edit"
+  }, "Edit"), ___EmotionJSX(Item, {
+    key: "duplicate"
+  }, "Duplicate"), ___EmotionJSX(Item, {
+    key: "delete",
+    textValue: "delete"
+  }, ___EmotionJSX(Text, {
+    color: "critical.bright"
+  }, "Delete"))));
+};
+export var Default = function Default() {
+  var _useOverlayPanelState = useOverlayPanelState({
+      transitionDuration: 1000
+    }),
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
+  var triggerRef = useRef(null);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
+  var onPanelClose = function onPanelClose() {
+    state.close();
+    onClose();
+  };
+  var setIsPanelExpanded = function setIsPanelExpanded() {
+    setIsExpanded(!isExpanded);
+  };
+  return ___EmotionJSX(Box, {
+    sx: {
+      maxWidth: state.isOpen ? 'calc(100% - 420px)' : '100%',
+      transition: '.4s all ease'
+    }
+  }, ___EmotionJSX(Button, {
+    ref: triggerRef,
+    onPress: state.open,
+    "aria-expanded": state.isOpen,
+    variant: "aiChat",
+    title: "open ai chat panel"
+  }, ___EmotionJSX(Icon, {
+    icon: AutoAwesomeIcon
+  }), "Open Panel"), ___EmotionJSX(AIPanel, {
+    state: state,
+    triggerRef: triggerRef,
+    isExpanded: isExpanded,
+    setIsExpanded: setIsPanelExpanded,
+    onPanelClose: onPanelClose
+  }, ___EmotionJSX(AIPanelHeader, {
+    slots: {
+      menuSlot: ___EmotionJSX(AIMenuPopover, null)
+    },
+    isExpanded: isExpanded,
+    setIsExpanded: setIsPanelExpanded,
+    onPanelClose: onPanelClose
+  }), ___EmotionJSX(Box, {
+    gap: "md",
+    py: "md",
+    minHeight: "100%",
+    maxWidth: "768px",
+    alignSelf: "center"
+  }, "AI Component Children will render here")));
+};

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

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import { useOverlayPanelState } from '../../../hooks';
+import { Box, Button } from '../../../index';
+import { fireEvent, render, screen } from '../../../utils/testUtils/testWrapper';
+import AIPanel from './AIPanel';
+import AIPanelHeader from './AIPanelHeader';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-overlayPanel';
+var closeButtonId = 'close-button';
+var defaultProps = {
+  'data-testid': testId
+};
+var slotText = 'slot text';
+var AIMenuPopover = function AIMenuPopover() {
+  return ___EmotionJSX("p", null, slotText);
+};
+var Component = function Component(props) {
+  var slots = props.slots;
+  var _useOverlayPanelState = useOverlayPanelState({
+      transitionDuration: 1000
+    }),
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
+  var triggerRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var onPanelClose = function onPanelClose() {
+    state.close();
+    onClose();
+  };
+  var setIsPanelExpanded = function setIsPanelExpanded() {
+    setIsExpanded(!isExpanded);
+  };
+  return ___EmotionJSX(Box, {
+    sx: {
+      maxWidth: state.isOpen ? 'calc(100% - 420px)' : '100%',
+      transition: '.4s all ease'
+    }
+  }, ___EmotionJSX(Button, {
+    ref: triggerRef,
+    onPress: state.open,
+    "aria-expanded": state.isOpen
+  }, "Open Panel"), ___EmotionJSX(AIPanel, _extends({
+    triggerRef: triggerRef,
+    isExpanded: isExpanded,
+    setIsExpanded: setIsPanelExpanded,
+    onPanelClose: onPanelClose
+  }, defaultProps, {
+    state: state
+  }), ___EmotionJSX(AIPanelHeader, {
+    slots: slots,
+    isExpanded: isExpanded,
+    setIsExpanded: setIsPanelExpanded,
+    onPanelClose: onPanelClose
+  }), "AI Component Children will render here"));
+};
+test('AIPanel renders correctly', function () {
+  render(___EmotionJSX(Component, null));
+  expect(screen.getByText('Open Panel')).toBeInTheDocument();
+});
+test('AIPanel opens and closes correctly', function () {
+  render(___EmotionJSX(Component, null));
+  var openButton = screen.getByText('Open Panel');
+  fireEvent.click(openButton);
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+  var closeButton = screen.getByTestId(closeButtonId);
+  fireEvent.click(closeButton);
+  expect(screen.queryByTestId(testId)).not.toHaveClass('is-open');
+});
+test('AIPanel expands and collapses correctly', function () {
+  render(___EmotionJSX(Component, null));
+  var openButton = screen.getByText('Open Panel');
+  fireEvent.click(openButton);
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+  var expandButton = screen.getByTestId('expand-button');
+  fireEvent.click(expandButton);
+  expect(screen.getByTestId(testId)).toHaveClass('is-full');
+  fireEvent.click(expandButton);
+  expect(screen.getByTestId(testId)).not.toHaveClass('is-full');
+});
+test('AIPanel menuSlot renders correctly', function () {
+  render(___EmotionJSX(Component, {
+    slots: {
+      menuSlot: ___EmotionJSX(AIMenuPopover, null)
+    }
+  }));
+  var openButton = screen.getByText('Open Panel');
+  fireEvent.click(openButton);
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+  var thisSlot = screen.getByText(slotText);
+  expect(thisSlot).toBeInTheDocument();
+});

package/lib/components/AIComponents/AIPanel/AIPanelHeader.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import CollapseIcon from '@pingux/mdi-react/ArrowCollapseIcon';
+import OpenIcon from '@pingux/mdi-react/ArrowTopRightBottomLeftIcon';
+import CloseIcon from '@pingux/mdi-react/CloseIcon';
+import { Box, Icon, IconButton, Text } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var AIPanelHeader = function AIPanelHeader(props) {
+  var setIsExpanded = props.setIsExpanded,
+    isExpanded = props.isExpanded,
+    onPanelClose = props.onPanelClose,
+    slots = props.slots,
+    expandButtonProps = props.expandButtonProps,
+    closeButtonProps = props.closeButtonProps;
+  var toggleExpanded = function toggleExpanded() {
+    if (setIsExpanded) {
+      setIsExpanded(!isExpanded);
+    }
+  };
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Text, {
+    variant: "aiPanelHeader"
+  }, "AI Assistant"), ___EmotionJSX(Box, {
+    sx: {
+      ml: 'auto',
+      mr: '0px'
+    },
+    isRow: true,
+    alignItems: "center",
+    gap: "xs"
+  }, (slots === null || slots === void 0 ? void 0 : slots.menuSlot) && slots.menuSlot, ___EmotionJSX(IconButton, _extends({
+    onPress: toggleExpanded,
+    "data-testid": "expand-button",
+    title: "toggle panel expansion"
+  }, expandButtonProps), ___EmotionJSX(Icon, {
+    icon: isExpanded ? CollapseIcon : OpenIcon
+  })), ___EmotionJSX(IconButton, _extends({
+    onPress: onPanelClose,
+    title: "close panel",
+    "data-testid": "close-button"
+  }, closeButtonProps), ___EmotionJSX(Icon, {
+    icon: CloseIcon
+  }))));
+};
+export default AIPanelHeader;

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

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

package/lib/index.js

@@ -10,6 +10,8 @@ export { default as AccordionGroup } from './components/AccordionGroup';
 export * from './components/AccordionGroup';
 export { default as AccordionItem } from './components/AccordionItem';
 export * from './components/AccordionItem';
+export { default as AIPanel } from './components/AIComponents/AIPanel/AIPanel';
+export { default as AIPanelHeader } from './components/AIComponents/AIPanel/AIPanelHeader';
 export { default as Prompt } from './components/AIComponents/Prompt';
 export { default as Response } from './components/AIComponents/Response';
 export { default as ResponseAttachment } from './components/AIComponents/Response/ResponseAttachment';

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

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

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

@@ -153,6 +153,33 @@ var primaryWithIcon = _objectSpread(_objectSpread({}, primary), {}, {
   display: 'inline-flex',
   color: 'white'
 });
+var aiChat = _objectSpread(_objectSpread({}, withIcon), {}, {
+  maxWidth: 'fit-content',
+  gap: 'sm',
+  border: 'none',
+  backgroundColor: 'transparent',
+  color: 'text.primary',
+  path: {
+    fill: 'text.primary'
+  },
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'primary',
+    outlineOffset: '3px'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'gray-100',
+    path: {
+      fill: 'dark'
+    }
+  },
+  '&.is-pressed': {
+    backgroundColor: '#d5dfe8 !important',
+    path: {
+      fill: 'dark'
+    }
+  }
+});
 var baseIconButton = {
   cursor: 'pointer',
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
@@ -274,6 +301,7 @@ var buttons = {
   withIcon: withIcon,
   primaryWithIcon: primaryWithIcon,
   iconButtons: iconButtons,
-  modalCloseButton: modalCloseButton
+  modalCloseButton: modalCloseButton,
+  aiChat: aiChat
 };
 export default buttons;

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

@@ -48,7 +48,7 @@ var hTags = {
     fontSize: 'xs'
   }
 };
-export var text = _objectSpread({
+export var text = _objectSpread(_objectSpread({
   sideNavHeader: {
     py: 'sm',
     lineHeight: 'body',
@@ -58,6 +58,12 @@ export var text = _objectSpread({
     fontWeight: '1',
     letterSpacing: '1px'
   },
+  suggestion: {
+    fontSize: 'md',
+    fontFamily: 'standard',
+    color: 'text.primary',
+    lineHeight: '24px'
+  },
   modalTitle: {
     fontSize: '20px',
     fontWeight: '2',
@@ -94,4 +100,11 @@ export var text = _objectSpread({
       display: 'list-item'
     }
   }
-}, hTags);
+}, hTags), {}, {
+  aiPanelHeader: {
+    fontFamily: 'standard',
+    color: 'text.primary',
+    fontSize: 'lg',
+    fontWeight: 2
+  }
+});

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

@@ -257,7 +257,42 @@ var dataTable = {
 };
 var overlayPanel = {
   container: {
-    backgroundColor: 'background.base'
+    backgroundColor: 'background.base',
+    border: 'none'
+  },
+  aiPanelContainer: {
+    backgroundColor: 'background.base',
+    border: 'none',
+    borderLeft: 'none',
+    position: 'fixed',
+    overflowY: 'scroll',
+    top: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '-2px 0px 2px 1px rgba(37, 55, 70, 0.15)',
+    display: 'flex !important',
+    opacity: 0,
+    right: '-50%',
+    transition: 'all 500ms',
+    maxWidth: '100%',
+    p: 'lg',
+    '&.is-small': {
+      width: '420px'
+    },
+    '&.is-full': {
+      width: 'container.full'
+    },
+    '&.is-open.is-transitioning': {
+      right: 0,
+      opacity: 1
+    }
+  },
+  body: {
+    gap: 'md',
+    minHeight: '100%',
+    maxWidth: '768px',
+    alignSelf: 'center'
   },
   innerPanel: {
     backgroundColor: 'background.base'

package/lib/types/aiPanel.js

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

package/package.json

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