@pingux/astro 2.112.0-alpha.1 → 2.112.0-alpha.3

package/lib/cjs/components/DataTable/DataTableBadge.js

@@ -11,9 +11,6 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
-var _AlertIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertIcon"));
-var _CheckIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckIcon"));
 var _index = require("../../index");
 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); }
@@ -25,53 +22,29 @@ var DataTableBadge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var componentProps = {
     'Pending': {
       badgeProps: {
-        variant: 'dataTable.pending'
-      },
-      iconProps: {
-        icon: _CheckIcon["default"]
+        variant: 'activeStatusBadge'
       }
     },
     'Failed': {
       badgeProps: {
-        variant: 'dataTable.failed'
-      },
-      iconProps: {
-        icon: _AlertIcon["default"],
-        title: {
-          name: 'Alert Icon'
-        }
+        variant: 'warningStatusBadge'
       }
     },
     'Rejected': {
       badgeProps: {
-        variant: 'dataTable.rejected'
-      },
-      iconProps: {
-        icon: _AlertCircleIcon["default"],
-        title: {
-          name: 'Alert Circle Icon'
-        }
+        variant: 'criticalStatusBadge'
       }
     },
     'Approved': {
       badgeProps: {
-        variant: 'dataTable.approved'
-      },
-      iconProps: {
-        icon: _CheckIcon["default"],
-        title: {
-          name: 'Check Icon'
-        }
+        variant: 'healthyStatusBadge'
       }
     }
   };
   return (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({
     label: cell,
     ref: ref
-  }, cell && componentProps[cell].badgeProps), cell && cell !== 'Pending' && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
-    mr: "xs",
-    size: "14px"
-  }, cell && componentProps[cell].iconProps)));
+  }, cell && componentProps[cell].badgeProps));
 });
 var _default = DataTableBadge;
 exports["default"] = _default;

package/lib/cjs/components/DataTable/DataTableBadge.test.js

@@ -23,7 +23,6 @@ test('renders component with rejected label', function () {
     cell: cell
   });
   expect(_react2.screen.queryByText('Rejected')).toBeInTheDocument();
-  expect(_react2.screen.queryByText('Alert Circle Icon')).toBeInTheDocument();
 });
 test('renders component with pending label', function () {
   var cell = 'Pending';
@@ -38,7 +37,6 @@ test('renders component with failed label', function () {
     cell: cell
   });
   expect(_react2.screen.queryByText('Failed')).toBeInTheDocument();
-  expect(_react2.screen.queryByText('Alert Icon')).toBeInTheDocument();
 });
 test('renders component with null cell', function () {
   var cell = null;

package/lib/cjs/components/Loader/Loader.js

@@ -14,11 +14,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
-var _excluded = ["size"];
+var _excluded = ["size", "dotProps"];
 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 Loader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var size = props.size,
+    dotProps = props.dotProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
@@ -28,13 +29,13 @@ var Loader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     role: "alert",
     "aria-live": "assertive",
     "aria-label": "Loading in progress"
-  }, others), (0, _react2.jsx)(_Box["default"], {
+  }, others), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "loader.dotLeft"
-  }), (0, _react2.jsx)(_Box["default"], {
+  }, dotProps)), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "loader.dotCenter"
-  }), (0, _react2.jsx)(_Box["default"], {
+  }, dotProps)), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "loader.dotRight"
-  }));
+  }, dotProps)));
 });
 var _default = Loader;
 exports["default"] = _default;

package/lib/cjs/index.d.ts

@@ -16,6 +16,7 @@ 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 as ResponseToolbarIcon } from './components/AIComponents/Response/ResponseToolbarIcon';
 export { default as Suggestions } from './components/AIComponents/Suggestions';
 export { default as Suggestion } from './components/AIComponents/Suggestions/Suggestion';
 export { default as ArrayField } from './components/ArrayField';

package/lib/cjs/index.js

@@ -26,6 +26,7 @@ var _exportNames = {
   ResponseList: true,
   ResponseText: true,
   ResponseToolbar: true,
+  ResponseToolbarIcon: true,
   Suggestions: true,
   Suggestion: true,
   ArrayField: true,
@@ -798,6 +799,12 @@ _Object$defineProperty(exports, "ResponseToolbar", {
     return _ResponseToolbar["default"];
   }
 });
+_Object$defineProperty(exports, "ResponseToolbarIcon", {
+  enumerable: true,
+  get: function get() {
+    return _ResponseToolbarIcon["default"];
+  }
+});
 _Object$defineProperty(exports, "RockerButton", {
   enumerable: true,
   get: function get() {
@@ -1072,6 +1079,7 @@ 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 _ResponseToolbarIcon = _interopRequireDefault(require("./components/AIComponents/Response/ResponseToolbarIcon"));
 var _Suggestions = _interopRequireDefault(require("./components/AIComponents/Suggestions"));
 var _Suggestion = _interopRequireDefault(require("./components/AIComponents/Suggestions/Suggestion"));
 var _ArrayField = _interopRequireWildcard(require("./components/ArrayField"));

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

@@ -783,6 +783,39 @@ declare const _default: {
                 transition: string;
                 outline: string;
             };
+            responseToolbar: {
+                '&.is-not-loaded': {
+                    display: string;
+                };
+                display: string;
+                cursor: string;
+                transition: string;
+                outline: string;
+                borderRadius: string;
+                border: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+                '&.is-hovered': {
+                    backgroundColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-pressed': {
+                    backgroundColor: string;
+                    borderColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+            };
             modalCloseButton: {
                 position: string;
                 top: number;

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

@@ -550,6 +550,39 @@ declare const buttons: {
             transition: string;
             outline: string;
         };
+        responseToolbar: {
+            '&.is-not-loaded': {
+                display: string;
+            };
+            display: string;
+            cursor: string;
+            transition: string;
+            outline: string;
+            borderRadius: string;
+            border: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-hovered': {
+                backgroundColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
         modalCloseButton: {
             position: string;
             top: number;

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

@@ -250,6 +250,12 @@ var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   nextGen: _objectSpread({}, onyxIconButton),
   onyx: _objectSpread({}, onyxIconButton),
+  responseToolbar: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    '&.is-not-loaded': {
+      display: 'none'
+    },
+    display: 'inline-flex'
+  }),
   modalCloseButton: modalCloseButton,
   badge: {
     deleteButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {

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

@@ -1,4 +1,5 @@
 import { IconSize, StyleProps } from './shared';
+import { BoxProps } from '.';
 export interface LoaderProps extends StyleProps {
     /**
      * Color key from theme or string value.
@@ -6,4 +7,5 @@ export interface LoaderProps extends StyleProps {
     */
     color?: string;
     size?: IconSize;
+    dotProps?: BoxProps;
 }

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

@@ -20,22 +20,22 @@ export interface ResponseAttachmentProps extends SharedResponseProps {
     iconProps?: IconProps;
     parentIndex?: number;
     className?: string;
+    text: string;
 }
 export interface ResponseListProps extends SharedResponseProps, BoxProps {
     children: ReactNode[];
     parentIndex?: number;
     delay?: number;
 }
-export interface ResponseProps {
+export interface ResponseProps extends BoxProps {
     containerProps?: BoxProps;
     iconProps?: IconProps;
     textProps?: ResponseTextProps;
     iconWrapperProps?: IconWrapperProps;
     shouldStartAnimation?: boolean;
-    children: ReactNode[];
     delay?: number;
 }
-export interface ResponseToolbarProps extends SharedResponseProps {
+export interface ResponseToolbarProps extends BoxProps, SharedResponseProps {
     readButtonProps?: IconButtonProps;
     copyButtonProps?: IconButtonProps;
     goodButtonProps?: IconButtonProps;
@@ -44,5 +44,12 @@ export interface ResponseToolbarProps extends SharedResponseProps {
     containerProps?: BoxProps;
     parentIndex?: number;
     className?: string;
+    delay?: number;
+    children: ReactNode[];
+}
+export interface ResponseToolbarIconProps extends IconButtonProps, SharedResponseProps {
+    delay?: number;
+    parentIndex?: number;
+    iconProps?: IconProps;
 }
 export {};

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
 import CopyIcon from '@pingux/mdi-react/ContentCopyIcon';
 import TextIcon from '@pingux/mdi-react/TextIcon';
@@ -11,6 +12,7 @@ import ResponseAttachment from './ResponseAttachment';
 import ResponseList from './ResponseList';
 import ResponseText from './ResponseText';
 import ResponseToolbar from './ResponseToolbar';
+import ResponseToolbarIcon from './ResponseToolbarIcon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Ai Components/Response',
@@ -18,28 +20,22 @@ export default {
 };
 var testText = 'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet';
 export var Default = function Default(args) {
-  var toolBarProps = {
-    readButtonProps: {
-      title: 'Read aloud',
-      icon: VolumeHighIcon
-    },
-    copyButtonProps: {
-      title: 'Copy',
-      icon: CopyIcon
-    },
-    goodButtonProps: {
-      title: 'Good Response',
-      icon: ThumbUpOutlineIcon
-    },
-    badButtonProps: {
-      title: 'Bad Response',
-      icon: ThumbDownOutlineIcon
-    },
-    rephraseButtonProps: {
-      title: 'Rephrase Answer',
-      icon: TextIcon
-    }
-  };
+  var icons = [{
+    title: 'Read aloud',
+    icon: VolumeHighIcon
+  }, {
+    title: 'Copy',
+    icon: CopyIcon
+  }, {
+    title: 'Good Response',
+    icon: ThumbUpOutlineIcon
+  }, {
+    title: 'Bad Response',
+    icon: ThumbDownOutlineIcon
+  }, {
+    title: 'Rephrase Answer',
+    icon: TextIcon
+  }];
   var delay = 20;
   return ___EmotionJSX(AstroWrapper, _extends({}, args, {
     themeOverrides: [NextGenTheme]
@@ -47,7 +43,9 @@ export var Default = function Default(args) {
     delay: delay
   }, ___EmotionJSX(ResponseText, {
     text: testText
-  }), ___EmotionJSX(ResponseAttachment, null), ___EmotionJSX(ResponseText, {
+  }), ___EmotionJSX(ResponseAttachment, {
+    text: "Attachment Text"
+  }), ___EmotionJSX(ResponseText, {
     text: testText
   }), ___EmotionJSX(ResponseText, {
     text: testText
@@ -68,5 +66,7 @@ export var Default = function Default(args) {
     text: "list item 3"
   })), ___EmotionJSX(ResponseText, {
     text: "follow up text"
-  }), ___EmotionJSX(ResponseToolbar, toolBarProps)));
+  }), ___EmotionJSX(ResponseToolbar, null, _mapInstanceProperty(icons).call(icons, function (icon) {
+    return ___EmotionJSX(ResponseToolbarIcon, icon);
+  }))));
 };

package/lib/components/AIComponents/Response/Response.test.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import AccountGroupIcon from '@pingux/mdi-react/AccountGroupIcon';
-import AccountIcon from '@pingux/mdi-react/AccountIcon';
-import LockIcon from '@pingux/mdi-react/LockIcon';
-import SearchIcon from '@pingux/mdi-react/SearchIcon';
-import TagIcon from '@pingux/mdi-react/TagIcon';
+import CopyIcon from '@pingux/mdi-react/ContentCopyIcon';
+import TextIcon from '@pingux/mdi-react/TextIcon';
+import ThumbDownOutlineIcon from '@pingux/mdi-react/ThumbDownOutlineIcon';
+import ThumbUpOutlineIcon from '@pingux/mdi-react/ThumbUpOutlineIcon';
+import VolumeHighIcon from '@pingux/mdi-react/VolumeHighIcon';
 
 import { act, render, screen } from '../../../utils/testUtils/testWrapper';
 
@@ -12,6 +12,7 @@ import ResponseAttachment from './ResponseAttachment';
 import ResponseList from './ResponseList';
 import ResponseText from './ResponseText';
 import ResponseToolbar from './ResponseToolbar';
+import ResponseToolBarIcon from './ResponseToolbarIcon';
 
 const delay = 100;
 
@@ -24,28 +25,24 @@ const nextText = 'nextText';
 const attachmentWrapperId = 'wrapper-id';
 const toolbarId = 'id';
 
-const customProps = {
-  readButtonProps: {
-    title: 'Read aloud test',
-    icon: AccountGroupIcon,
-  },
-  copyButtonProps: {
-    title: 'Copy test',
-    icon: AccountIcon,
-  },
-  goodButtonProps: {
-    title: 'Good Response test',
-    icon: LockIcon,
-  },
-  badButtonProps: {
-    title: 'Bad Response test',
-    icon: SearchIcon,
-  },
-  rephraseButtonProps: {
-    title: 'Rephrase Answer test',
-    icon: TagIcon,
-  },
-};
+const attachmentText = 'Attachment Text';
+
+const icons = [{
+  title: 'Read aloud test',
+  icon: VolumeHighIcon,
+}, {
+  title: 'Copy test',
+  icon: CopyIcon,
+}, {
+  title: 'Good Response test',
+  icon: ThumbUpOutlineIcon,
+}, {
+  title: 'Bad Response test',
+  icon: ThumbDownOutlineIcon,
+}, {
+  title: 'Rephrase Answer test',
+  icon: TextIcon,
+}];
 
 const defaultProps = {
   containerProps: {
@@ -80,25 +77,25 @@ const getComponentWithList = props => render(
 const getComponentWithToolbar = props => render(
   <Response {...defaultProps} {...props}>
     <ResponseText text={defaultProps.text} />
-    <ResponseToolbar data-testid={toolbarId} />
+    <ResponseToolbar data-testid={toolbarId}>
+      {icons.map(icon => {
+        return (
+          <ResponseToolBarIcon key={icon.title} {...icon} />
+        );
+      })}
+    </ResponseToolbar>
+    <ResponseText text={defaultProps.text} />
   </Response>,
 );
 
 const getComponentWithAttachment = props => render(
   <Response {...defaultProps} {...props}>
     <ResponseText text={defaultProps.text} />
-    <ResponseAttachment wrapperProps={{ 'data-testid': attachmentWrapperId }} />
+    <ResponseAttachment text={attachmentText} wrapperProps={{ 'data-testid': attachmentWrapperId }} />
     <ResponseText text={defaultProps.text} />
   </Response>,
 );
 
-const getComponentWithToolbarCustomProps = props => render(
-  <Response {...defaultProps} {...props}>
-    <ResponseText text={defaultProps.text} />
-    <ResponseToolbar data-testid={toolbarId} {...customProps} />
-  </Response>,
-);
-
 test('component renders', () => {
   getComponent();
   const container = screen.getByTestId('container');
@@ -166,13 +163,19 @@ test('ResponseToolbar renders correctly', async () => {
     act(() => { jest.advanceTimersByTime(100); });
   }
   expect(toolbar).not.toHaveClass('is-not-loaded');
+  for (let i = 1; i < icons.length + 1; i += 1) {
+    act(() => { jest.advanceTimersByTime(100); });
+    expect(screen.getByTitle(icons[i - 1].title)).toBeInTheDocument();
+    expect(screen.getByTitle(icons[i - 1].title)).not.toHaveClass('is-not-loaded');
+  }
+  act(() => { jest.advanceTimersByTime(2000); });
 });
 
 test('ResponseAttachment renders correctly', async () => {
   getComponentWithAttachment();
   act(() => { jest.advanceTimersByTime(10); });
 
-  expect(screen.getByText('Attachment text')).toBeInTheDocument();
+  expect(screen.getByText(attachmentText)).toBeInTheDocument();
   const wrapper = screen.getByTestId(attachmentWrapperId);
   expect(wrapper).toHaveClass('is-not-loaded');
   for (let i = 1; i < defaultProps.text.length + 1; i += 1) {
@@ -180,36 +183,3 @@ test('ResponseAttachment renders correctly', async () => {
   }
   expect(wrapper).not.toHaveClass('is-not-loaded');
 });
-
-test('ResponseAttachment renders correctly, with custom props', async () => {
-  getComponentWithToolbarCustomProps();
-  act(() => { jest.advanceTimersByTime(10); });
-
-  expect(screen.getByTitle('Read aloud test')).toBeInTheDocument();
-  expect(screen.getByTitle('Copy test')).toBeInTheDocument();
-  expect(screen.getByTitle('Good Response test')).toBeInTheDocument();
-  expect(screen.getByTitle('Bad Response test')).toBeInTheDocument();
-  expect(screen.getByTitle('Rephrase Answer test')).toBeInTheDocument();
-});
-
-test('ResponseToolbar conditional rendering of IconButton based on title prop', async () => {
-  render(
-    <Response {...defaultProps}>
-      <ResponseText text={defaultProps.text} />
-      <ResponseToolbar
-        data-testid={toolbarId}
-        readButtonProps={{ title: 'Read aloud' }}
-        copyButtonProps={{ title: '' }}
-        goodButtonProps={{ title: 'Good Response' }}
-        badButtonProps={{ title: '' }}
-        rephraseButtonProps={{ title: 'Rephrase Answer' }}
-      />
-    </Response>,
-  );
-
-  expect(screen.getByTitle('Read aloud')).toBeInTheDocument();
-  expect(screen.queryByTitle('Copy')).not.toBeInTheDocument();
-  expect(screen.getByTitle('Good Response')).toBeInTheDocument();
-  expect(screen.queryByTitle('Bad Response')).not.toBeInTheDocument();
-  expect(screen.getByTitle('Rephrase Answer')).toBeInTheDocument();
-});

package/lib/components/AIComponents/Response/ResponseAttachment.js

@@ -12,7 +12,8 @@ var ResponseAttachment = function ResponseAttachment(props) {
     iconProps = props.iconProps,
     className = props.className,
     animationIndex = props.animationIndex,
-    shouldStartAnimation = props.shouldStartAnimation;
+    shouldStartAnimation = props.shouldStartAnimation,
+    text = props.text;
   var isLoaded = useRef(false);
   useEffect(function () {
     if (shouldStartAnimation && setAnimationIndex && animationIndex !== undefined && isLoaded.current === false) {
@@ -35,6 +36,6 @@ var ResponseAttachment = function ResponseAttachment(props) {
     title: {
       name: 'attachment icon'
     }
-  }, iconProps)), ___EmotionJSX(Text, textProps, "Attachment text"));
+  }, iconProps)), ___EmotionJSX(Text, textProps, text));
 };
 export default ResponseAttachment;

package/lib/components/AIComponents/Response/ResponseToolbar.js

@@ -1,44 +1,35 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["parentIndex", "setAnimationIndex", "readButtonProps", "copyButtonProps", "goodButtonProps", "badButtonProps", "rephraseButtonProps", "className", "shouldStartAnimation", "animationIndex"];
-import React, { useEffect, useRef } from 'react';
-import CopyIcon from '@pingux/mdi-react/ContentCopyIcon';
-import TextIcon from '@pingux/mdi-react/TextIcon';
-import ThumbDownOutlineIcon from '@pingux/mdi-react/ThumbDownOutlineIcon';
-import ThumbUpOutlineIcon from '@pingux/mdi-react/ThumbUpOutlineIcon';
-import VolumeHighIcon from '@pingux/mdi-react/VolumeHighIcon';
+var _excluded = ["parentIndex", "setAnimationIndex", "children", "className", "shouldStartAnimation", "animationIndex", "delay"];
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { Children, useEffect, useRef, useState } from 'react';
 import { useStatusClasses } from '../../../hooks';
-import { Box, Icon, IconButton } from '../../../index';
+import { Box } from '../../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var ResponseToolbarIcon = function ResponseToolbarIcon(props) {
-  var title = props.title,
-    icon = props.icon;
-  return ___EmotionJSX(IconButton, {
-    title: title
-  }, ___EmotionJSX(Icon, {
-    icon: icon,
-    title: {
-      name: title
-    }
-  }));
-};
 var ResponseToolbar = function ResponseToolbar(props) {
   var parentIndex = props.parentIndex,
     setAnimationIndex = props.setAnimationIndex,
-    readButtonProps = props.readButtonProps,
-    copyButtonProps = props.copyButtonProps,
-    goodButtonProps = props.goodButtonProps,
-    badButtonProps = props.badButtonProps,
-    rephraseButtonProps = props.rephraseButtonProps,
+    children = props.children,
     className = props.className,
     shouldStartAnimation = props.shouldStartAnimation,
     animationIndex = props.animationIndex,
+    delay = props.delay,
     others = _objectWithoutProperties(props, _excluded);
   var isLoaded = useRef(false);
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  useEffect(function () {
+    if (index === (children === null || children === void 0 ? void 0 : children.length) && animationIndex !== undefined && setAnimationIndex) {
+      setAnimationIndex(animationIndex + 1);
+    }
+  }, [setAnimationIndex, index, shouldStartAnimation, animationIndex, children === null || children === void 0 ? void 0 : children.length]);
   useEffect(function () {
     if (shouldStartAnimation && setAnimationIndex && animationIndex !== undefined && isLoaded.current === false) {
       isLoaded.current = true;
-      setAnimationIndex(animationIndex + 1);
+      setIndex(0);
     }
   }, [setAnimationIndex, parentIndex, shouldStartAnimation, animationIndex]);
   var _useStatusClasses = useStatusClasses(className, {
@@ -50,16 +41,13 @@ var ResponseToolbar = function ResponseToolbar(props) {
     gap: "sm",
     variant: "response.toolbar",
     className: classNames
-  }, others), (readButtonProps === null || readButtonProps === void 0 ? void 0 : readButtonProps.title) && ___EmotionJSX(ResponseToolbarIcon, _extends({
-    icon: VolumeHighIcon
-  }, readButtonProps)), (copyButtonProps === null || copyButtonProps === void 0 ? void 0 : copyButtonProps.title) && ___EmotionJSX(ResponseToolbarIcon, _extends({
-    icon: CopyIcon
-  }, copyButtonProps)), (goodButtonProps === null || goodButtonProps === void 0 ? void 0 : goodButtonProps.title) && ___EmotionJSX(ResponseToolbarIcon, _extends({
-    icon: ThumbUpOutlineIcon
-  }, goodButtonProps)), (badButtonProps === null || badButtonProps === void 0 ? void 0 : badButtonProps.title) && ___EmotionJSX(ResponseToolbarIcon, _extends({
-    icon: ThumbDownOutlineIcon
-  }, badButtonProps)), (rephraseButtonProps === null || rephraseButtonProps === void 0 ? void 0 : rephraseButtonProps.title) && ___EmotionJSX(ResponseToolbarIcon, _extends({
-    icon: TextIcon
-  }, rephraseButtonProps)));
+  }, others), _mapInstanceProperty(Children).call(Children, children, function (child, i) {
+    return ___EmotionJSX(React.Fragment, null, /*#__PURE__*/React.cloneElement(child, {
+      setAnimationIndex: setIndex,
+      animationIndex: i,
+      parentIndex: index,
+      delay: delay
+    }));
+  }));
 };
 export default ResponseToolbar;