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

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/components/ListViewItem/ListViewItem.stories.js

@@ -15,6 +15,7 @@ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon
 var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _ = require("../..");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _images = require("../../utils/devUtils/constants/images");
 var _chartData = require("./controls/chart/chartData");
 var _ListViewItem = _interopRequireDefault(require("./ListViewItem.mdx"));
@@ -59,6 +60,12 @@ var Default = function Default() {
   }));
 };
 exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem["default"]
+  }
+};
 var WithSubtext = function WithSubtext() {
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
@@ -69,6 +76,12 @@ var WithSubtext = function WithSubtext() {
   }));
 };
 exports.WithSubtext = WithSubtext;
+WithSubtext.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withSubText
+  }
+};
 var WithImage = function WithImage() {
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
@@ -83,13 +96,18 @@ var WithImage = function WithImage() {
   }));
 };
 exports.WithImage = WithImage;
+WithImage.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withImage
+  }
+};
 var WithControls = function WithControls() {
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
       icon: _FormSelectIcon["default"],
       text: 'Fons Vernall'
-    },
-    "aria-label": "Fons Vernall"
+    }
   }, (0, _react2.jsx)(_.ListViewItemEditButton, {
     "aria-label": "edit-icon"
   }), (0, _react2.jsx)(_.ListViewItemSwitchField, {
@@ -103,6 +121,12 @@ var WithControls = function WithControls() {
   }, "Delete user"))));
 };
 exports.WithControls = WithControls;
+WithControls.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withControls
+  }
+};
 var WithRightOfDataSlot = function WithRightOfDataSlot() {
   var renderRightOfData = (0, _react2.jsx)(_.Box, {
     isRow: true,
@@ -132,6 +156,12 @@ var WithRightOfDataSlot = function WithRightOfDataSlot() {
   }, "Delete user"))));
 };
 exports.WithRightOfDataSlot = WithRightOfDataSlot;
+WithRightOfDataSlot.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withRightOfDataSlot
+  }
+};
 var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
   var renderLeftOfData = (0, _react2.jsx)(_.Box, {
     mx: "sm",
@@ -161,6 +191,12 @@ var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
   }, "Delete user"))));
 };
 exports.WithLeftOfDataSlot = WithLeftOfDataSlot;
+WithLeftOfDataSlot.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withLeftOfDataSlot
+  }
+};
 var WithCharts = function WithCharts() {
   var containerRef = (0, _react.useRef)();
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
@@ -190,6 +226,12 @@ var WithCharts = function WithCharts() {
   }, "Delete user"))));
 };
 exports.WithCharts = WithCharts;
+WithCharts.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withCharts
+  }
+};
 var WithExtraLongText = function WithExtraLongText() {
   var renderRightOfData = (0, _react2.jsx)(_.Box, {
     isRow: true,
@@ -219,4 +261,10 @@ var WithExtraLongText = function WithExtraLongText() {
     key: "delete"
   }, "Delete user"))));
 };
-exports.WithExtraLongText = WithExtraLongText;
+exports.WithExtraLongText = WithExtraLongText;
+WithExtraLongText.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem.withExtraLongText
+  }
+};

package/lib/cjs/components/ListViewItem/controls/ListViewItemEditButton.js

@@ -24,10 +24,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * to ListItemEditButton.
 */var ListViewItemEditButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_.Box, {
-    ref: ref
+    ref: ref,
+    ml: "sm"
   }, (0, _react2.jsx)(_.IconButton, props, (0, _react2.jsx)(_.Icon, {
     icon: _CreateIcon["default"],
-    size: "sm"
+    size: "md"
   })));
 });
 ListViewItemEditButton.propTypes = _iconButtonAttributes.iconButtonPropTypes;

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;