@elicecontents/content-ui 1.0.3 → 1.0.4

package/cjs/components/layout/layout-pagination/LayoutPagination.js

@@ -14,11 +14,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var PaginationWrapper = /*#__PURE__*/_styled__default.default("div", {
   target: "e8oep9n0"
 })("production" === "production" ? {
-  name: "1m30dfz",
-  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;z-index:100;transform:translateY(-50%)"
+  name: "1mp32h2",
+  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;z-index:100;transform:translateY(-50%);pointer-events:none"
 } : {
-  name: "1m30dfz",
-  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;z-index:100;transform:translateY(-50%)",
+  name: "1mp32h2",
+  styles: "position:absolute;top:50%;left:10px;width:calc(100% - 20px);display:flex;justify-content:space-between;align-items:center;z-index:100;transform:translateY(-50%);pointer-events:none",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var LayoutPagination = function LayoutPagination(_ref) {

package/cjs/components/pagination-button/PaginationButton.d.ts

@@ -4,6 +4,7 @@ interface PaginationButtonProps {
     right?: boolean;
     onClick?: () => void;
     disabled?: boolean;
+    size?: number;
 }
 declare const PaginationButton: React.FC<PaginationButtonProps>;
 export default PaginationButton;

package/cjs/components/pagination-button/PaginationButton.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
+var useAIDTMediaQuery = require('../../hooks/useAIDTMediaQuery.js');
 var ArrowLeft = require('../../icons/ArrowLeft.js');
 var ArrowRight = require('../../icons/ArrowRight.js');
 require('tslib');
@@ -15,26 +16,46 @@ var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
 var Button = /*#__PURE__*/_styled__default.default("button", {
   target: "e16dnw7i0"
-})("width:60px;height:60px;display:flex;align-items:center;justify-content:center;border:none;background-color:", function (_ref) {
-  var disabled = _ref.disabled;
+})("width:", function (_ref) {
+  var size = _ref.size;
+  return size ? "".concat(size, "px") : "60px";
+}, ";height:", function (_ref2) {
+  var size = _ref2.size;
+  return size ? "".concat(size, "px") : "60px";
+}, ";display:flex;align-items:center;justify-content:center;border:none;pointer-events:auto;background-color:", function (_ref3) {
+  var disabled = _ref3.disabled;
   return disabled ? "#ddd" : "#fff";
-}, ";border-radius:40px;box-shadow:0px 0px 1px 0px rgba(0, 0, 0, 0.40),0px 8px 10px 0px rgba(0, 0, 0, 0.05),0px 8px 30px 0px rgba(0, 0, 0, 0.12);border-radius:40px;cursor:", function (_ref2) {
-  var disabled = _ref2.disabled;
+}, ";border-radius:40px;box-shadow:", function (_ref4) {
+  var isTablet = _ref4.isTablet;
+  return isTablet ? "none" : "0px 0px 1px 0px rgba(0, 0, 0, 0.40), 0px 8px 10px 0px rgba(0, 0, 0, 0.05), 0px 8px 30px 0px rgba(0, 0, 0, 0.12)";
+}, ";cursor:", function (_ref5) {
+  var disabled = _ref5.disabled;
   return disabled ? "not-allowed" : "pointer";
-}, ";&:hover{background-color:", function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? "#ddd" : "#e0e0e0";
+}, ";&:hover{background-color:", function (_ref6) {
+  var disabled = _ref6.disabled,
+    isTablet = _ref6.isTablet;
+  return isTablet ? disabled ? "#ddd" : "#e0e0e0" : "none";
 }, ";}");
-var PaginationButton = function PaginationButton(_ref4) {
-  var left = _ref4.left,
-    right = _ref4.right,
-    onClick = _ref4.onClick,
-    _ref4$disabled = _ref4.disabled,
-    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
+var PaginationButton = function PaginationButton(_ref7) {
+  var left = _ref7.left,
+    right = _ref7.right,
+    onClick = _ref7.onClick,
+    _ref7$disabled = _ref7.disabled,
+    disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
+    size = _ref7.size;
+  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isTablet = _useAIDTMediaQuery.isTablet;
+  console.log(isTablet);
   return jsxRuntime.jsxs(Button, {
     onClick: onClick,
     disabled: disabled,
-    children: [left && jsxRuntime.jsx(ArrowLeft.default, {}), right && jsxRuntime.jsx(ArrowRight.default, {})]
+    isTablet: isTablet,
+    size: size,
+    children: [left && jsxRuntime.jsx(ArrowLeft.default, {
+      size: size
+    }), right && jsxRuntime.jsx(ArrowRight.default, {
+      size: size
+    })]
   });
 };
 

package/cjs/components/question/Question.js

@@ -15,8 +15,8 @@ var StyledMark = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "e7imhnw0"
 })("align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:50%;border-style:dashed;border-width:0.125rem;border-color:", function (props) {
   var _a;
-  return (_a = props.borderColor) !== null && _a !== void 0 ? _a : tokenColorTemporary.point3Color;
-}, ";position:relative;::before{content:'';position:absolute;width:2rem;height:2rem;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:50%;background-color:", function (props) {
+  return (_a = props.borderColor) !== null && _a !== void 0 ? _a : tokenColorTemporary.primaryColor;
+}, ";position:relative;::before{content:'';position:absolute;width:1.75rem;height:1.75rem;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:50%;background-color:", function (props) {
   var _a;
   return (_a = props.contentColor) !== null && _a !== void 0 ? _a : tokenColorTemporary.KeyElementaryBg;
 }, ";}");
@@ -29,12 +29,12 @@ var EliceQuestion = function EliceQuestion(_ref) {
     direction: "row",
     gap: "1rem",
     children: [jsxRuntime.jsx(StyledMark, {
-      contentColor: theme.palette.primary.light,
+      contentColor: theme.palette.background["default"],
       borderColor: theme.palette.primary.main,
       children: jsxRuntime.jsxs(material.Typography, {
         fontWeight: 800,
-        fontSize: "1.5rem",
-        color: theme.palette.primary.main,
+        fontSize: "1.3rem",
+        color: tokenColorTemporary.primaryColor,
         position: "relative",
         children: ["Q", jsxRuntime.jsx("span", {
           style: {
@@ -44,8 +44,8 @@ var EliceQuestion = function EliceQuestion(_ref) {
         })]
       })
     }), jsxRuntime.jsx(material.Typography, {
-      color: theme.palette.primary.main,
-      variant: "h4",
+      color: theme.palette.grey[900],
+      variant: "subtitle1",
       children: question
     })]
   });

package/cjs/components/tokenColorTemporary.js

@@ -3,6 +3,7 @@
 // This is using token colors of blue-purple theme of Elice UI Content
 // https://www.figma.com/design/dtsncp7RSV7wMqPf3jiCvf/Design-System?node-id=51-10973&node-type=SECTION&t=gCjy5t3c42ojVpyW-0
 // TODO: apply theme;
+var primaryColor = '#5D6BB3';
 var secondaryColor = '#0A379B';
 var main200Color = '#BEC4E1';
 var main300Color = '#9EA6D1';
@@ -16,7 +17,6 @@ var textPrimaryColor = '#1E1E1E';
 var textSecondaryColor = '#363643';
 var textTeriaryColor = '#525265';
 var textQuaternaryColor = '#9FA0B1';
-var point3Color = '#8F68F6';
 var KeyElementaryBg = '#9BCAFF';
 
 exports.KeyElementaryBg = KeyElementaryBg;
@@ -28,7 +28,7 @@ exports.gray50Color = gray50Color;
 exports.main200Color = main200Color;
 exports.main300Color = main300Color;
 exports.main400Color = main400Color;
-exports.point3Color = point3Color;
+exports.primaryColor = primaryColor;
 exports.secondaryColor = secondaryColor;
 exports.textPrimaryColor = textPrimaryColor;
 exports.textQuaternaryColor = textQuaternaryColor;

package/cjs/icons/ReadyRecord.d.ts

@@ -0,0 +1,6 @@
+import { IconProps } from "./_types";
+declare const ReadyRecord: ({ size, outerColor, innerColor, ...other }: IconProps & {
+    outerColor?: string | undefined;
+    innerColor?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ReadyRecord;

package/cjs/icons/ReadyRecord.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ReadyRecord = function ReadyRecord(_a) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? 21 : _a$size,
+    _a$outerColor = _a.outerColor,
+    outerColor = _a$outerColor === void 0 ? "#FFF1F1" : _a$outerColor,
+    _a$innerColor = _a.innerColor,
+    innerColor = _a$innerColor === void 0 ? "white" : _a$innerColor,
+    other = tslib.__rest(_a, ["size", "outerColor", "innerColor"]);
+  return jsxRuntime.jsxs("svg", Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 21 21",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other, {
+    children: [jsxRuntime.jsx("path", {
+      d: "M10.5 1.75C8.17936 1.75 5.95376 2.67187 4.31282 4.31282C2.67187 5.95376 1.75 8.17936 1.75 10.5C1.75 12.8206 2.67187 15.0462 4.31282 16.6872C5.95376 18.3281 8.17936 19.25 10.5 19.25C12.8206 19.25 15.0462 18.3281 16.6872 16.6872C18.3281 15.0462 19.25 12.8206 19.25 10.5C19.25 8.17936 18.3281 5.95376 16.6872 4.31282C15.0462 2.67187 12.8206 1.75 10.5 1.75ZM10.5 18C6.365 18 3 14.635 3 10.5C3 6.365 6.365 3 10.5 3C14.635 3 18 6.365 18 10.5C18 14.635 14.635 18 10.5 18Z",
+      fill: outerColor
+    }), jsxRuntime.jsx("path", {
+      d: "M10.5 15.5C13.2614 15.5 15.5 13.2614 15.5 10.5C15.5 7.73858 13.2614 5.5 10.5 5.5C7.73858 5.5 5.5 7.73858 5.5 10.5C5.5 13.2614 7.73858 15.5 10.5 15.5Z",
+      fill: innerColor
+    })]
+  }));
+};
+
+exports.default = ReadyRecord;

package/cjs/icons/RecordPause.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "./_types";
+declare const RecordPause: ({ size, color, ...other }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default RecordPause;

package/cjs/icons/RecordPause.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+
+var RecordPause = function RecordPause(_a) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? 29 : _a$size,
+    _a$color = _a.color,
+    color = _a$color === void 0 ? "white" : _a$color,
+    other = tslib.__rest(_a, ["size", "color"]);
+  return jsxRuntime.jsx("svg", Object.assign({
+    width: size,
+    height: size * (28 / 29),
+    viewBox: "0 0 29 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other, {
+    children: jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M20 4.83333H9C6.97496 4.83333 5.33333 6.47496 5.33333 8.5V19.5C5.33333 21.525 6.97496 23.1667 9 23.1667H20C22.025 23.1667 23.6667 21.525 23.6667 19.5V8.5C23.6667 6.47496 22.025 4.83333 20 4.83333ZM9 3C5.96243 3 3.5 5.46243 3.5 8.5V19.5C3.5 22.5376 5.96243 25 9 25H20C23.0376 25 25.5 22.5376 25.5 19.5V8.5C25.5 5.46243 23.0376 3 20 3H9Z",
+      fill: color
+    })
+  }));
+};
+
+exports.default = RecordPause;

package/cjs/icons/RecordPlay.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "./_types";
+declare const RecordPlay: ({ size, color, ...other }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default RecordPlay;

package/cjs/icons/RecordPlay.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+
+var RecordPlay = function RecordPlay(_a) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? 28 : _a$size,
+    _a$color = _a.color,
+    color = _a$color === void 0 ? "white" : _a$color,
+    other = tslib.__rest(_a, ["size", "color"]);
+  return jsxRuntime.jsx("svg", Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 28 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other, {
+    children: jsxRuntime.jsx("path", {
+      d: "M23.1161 16.0649C23.5038 15.8516 23.8228 15.5325 24.0361 15.1448C24.6571 14.0157 24.2452 12.5969 23.1161 11.9759L6.95781 3.08882C6.61331 2.89934 6.22651 2.79999 5.83333 2.79999C4.54467 2.79999 3.5 3.84466 3.5 5.13332V22.9074C3.5 23.3006 3.59935 23.6874 3.78883 24.0319C4.40986 25.161 5.82866 25.5729 6.95781 24.9519L23.1161 16.0649ZM5.54167 4.63165L22.5963 14.0133L5.54167 23.3942V4.63165Z",
+      fill: color
+    })
+  }));
+};
+
+exports.default = RecordPlay;

package/cjs/icons/Recording.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from "./_types";
+declare const Recording: ({ size, color, squareColor, ...other }: IconProps & {
+    squareColor?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Recording;

package/cjs/icons/Recording.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Recording = function Recording(_a) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? 21 : _a$size,
+    _a$color = _a.color,
+    color = _a$color === void 0 ? "#FFB1AF" : _a$color,
+    _a$squareColor = _a.squareColor,
+    squareColor = _a$squareColor === void 0 ? "#FF5D58" : _a$squareColor,
+    other = tslib.__rest(_a, ["size", "color", "squareColor"]);
+  return jsxRuntime.jsxs("svg", Object.assign({
+    width: size,
+    height: size,
+    viewBox: "0 0 21 21",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other, {
+    children: [jsxRuntime.jsx("path", {
+      d: "M10.5 1.75C8.17936 1.75 5.95376 2.67187 4.31282 4.31282C2.67187 5.95376 1.75 8.17936 1.75 10.5C1.75 12.8206 2.67187 15.0462 4.31282 16.6872C5.95376 18.3281 8.17936 19.25 10.5 19.25C12.8206 19.25 15.0462 18.3281 16.6872 16.6872C18.3281 15.0462 19.25 12.8206 19.25 10.5C19.25 8.17936 18.3281 5.95376 16.6872 4.31282C15.0462 2.67187 12.8206 1.75 10.5 1.75ZM10.5 18C6.365 18 3 14.635 3 10.5C3 6.365 6.365 3 10.5 3C14.635 3 18 6.365 18 10.5C18 14.635 14.635 18 10.5 18Z",
+      fill: color
+    }), jsxRuntime.jsx("rect", {
+      x: "6.3335",
+      y: "6.33337",
+      width: "8.33333",
+      height: "8.33333",
+      rx: "2",
+      fill: squareColor
+    })]
+  }));
+};
+
+exports.default = Recording;

package/cjs/icons/index.d.ts

@@ -12,3 +12,7 @@ export { default as QuestionBubble } from './QuestionBubble';
 export { default as SearchIcon } from './SearchIcon';
 export { default as MoreColumn } from './MoreColumn';
 export { default as NumbersIcon } from './Numbers';
+export { default as RecordPause } from './RecordPause';
+export { default as Recording } from './Recording';
+export { default as ReadyRecord } from './ReadyRecord';
+export { default as RecordPlay } from './RecordPlay';

package/cjs/icons/index.js

@@ -14,6 +14,10 @@ var QuestionBubble = require('./QuestionBubble.js');
 var SearchIcon = require('./SearchIcon.js');
 var MoreColumn = require('./MoreColumn.js');
 var Numbers = require('./Numbers.js');
+var RecordPause = require('./RecordPause.js');
+var Recording = require('./Recording.js');
+var ReadyRecord = require('./ReadyRecord.js');
+var RecordPlay = require('./RecordPlay.js');
 
 
 
@@ -31,3 +35,7 @@ exports.QuestionBubble = QuestionBubble.default;
 exports.SearchIcon = SearchIcon.default;
 exports.MoreColumn = MoreColumn.default;
 exports.NumbersIcon = Numbers.default;
+exports.RecordPause = RecordPause.default;
+exports.Recording = Recording.default;
+exports.ReadyRecord = ReadyRecord.default;
+exports.RecordPlay = RecordPlay.default;

package/cjs/index.js

@@ -18,6 +18,7 @@ var AIDTTypography = require('./components/AIDTTypography/AIDTTypography.js');
 var AdaptiveImage = require('./components/AdaptiveImage/AdaptiveImage.js');
 var SubtitleButton = require('./components/subtitle-button/SubtitleButton.js');
 var BaseInput = require('./components/base-input/BaseInput.js');
+var Modal = require('./components/Modal/Modal.js');
 var createAIDTTheme = require('./theme/createAIDTTheme.js');
 var index = require('./tokens/colors/index.js');
 var breakpoints = require('./tokens/breakpoints/breakpoints.js');
@@ -35,6 +36,10 @@ var QuestionBubble = require('./icons/QuestionBubble.js');
 var SearchIcon = require('./icons/SearchIcon.js');
 var MoreColumn = require('./icons/MoreColumn.js');
 var Numbers = require('./icons/Numbers.js');
+var RecordPause = require('./icons/RecordPause.js');
+var Recording = require('./icons/Recording.js');
+var ReadyRecord = require('./icons/ReadyRecord.js');
+var RecordPlay = require('./icons/RecordPlay.js');
 require('@mui/material');
 var mint = require('./tokens/colors/mint.js');
 var bluepurple = require('./tokens/colors/bluepurple.js');
@@ -67,6 +72,7 @@ exports.AIDTTypography = AIDTTypography.default;
 exports.EliceImage = AdaptiveImage.default;
 exports.EliceSubButton = SubtitleButton.default;
 exports.BaseInput = BaseInput.default;
+exports.EliceModal = Modal.default;
 exports.createAIDTTheme = createAIDTTheme.createAIDTTheme;
 exports.colors = index;
 exports.breakpoints = breakpoints.breakpoints;
@@ -84,6 +90,10 @@ exports.QuestionBubble = QuestionBubble.default;
 exports.SearchIcon = SearchIcon.default;
 exports.MoreColumn = MoreColumn.default;
 exports.NumbersIcon = Numbers.default;
+exports.RecordPause = RecordPause.default;
+exports.Recording = Recording.default;
+exports.ReadyRecord = ReadyRecord.default;
+exports.RecordPlay = RecordPlay.default;
 exports.mint = mint.mint;
 exports.bluepurple = bluepurple.bluepurple;
 exports.gray = gray.gray;

package/es/components/Modal/Modal.d.ts

@@ -0,0 +1,9 @@
+import type { ModalProps } from '@mui/material';
+export type EliceModalProps = {
+    open: boolean;
+    handleClose: () => void;
+    iconClose?: boolean;
+    fontFamily?: string;
+} & ModalProps;
+declare const EliceModal: (props: EliceModalProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceModal;

package/es/components/Modal/Modal.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import { Modal, Box, Stack, Typography } from '@mui/material';
+
+var EliceModal = function EliceModal(props) {
+  var open = props.open,
+    handleClose = props.handleClose,
+    children = props.children,
+    _props$iconClose = props.iconClose,
+    iconClose = _props$iconClose === void 0 ? false : _props$iconClose;
+  return jsx(Modal, {
+    open: open,
+    onClose: handleClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    children: jsxs(Box, {
+      sx: Object.assign({
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        maxWidth: '95vw',
+        minWidth: '80vw',
+        bgcolor: '#F4F6FF',
+        borderRadius: '2.6rem',
+        padding: '2.4rem 3.2rem 2.4rem 3.2rem',
+        outline: 'none'
+      }, props.sx),
+      children: [iconClose && jsx(Stack, {
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "flex-end",
+        children: jsx(HighlightOffIcon, {
+          onClick: handleClose,
+          sx: {
+            width: '2.7rem',
+            height: '2.7rem',
+            cursor: 'pointer'
+          },
+          color: "secondary"
+        })
+      }), jsx(Typography, {
+        variant: 'body1',
+        children: children
+      })]
+    })
+  });
+};
+
+export { EliceModal as default };

package/es/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EliceModal } from './Modal';
+export type { EliceModalProps } from './Modal';

package/es/components/Modal/index.js

@@ -0,0 +1 @@
+export { default as EliceModal } from './Modal.js';

package/es/components/answer-feedback/Correct.js

@@ -17,7 +17,7 @@ var Correct = function Correct() {
         fill: "#31A54C"
       }), jsx("path", {
         d: "M305 156.143C305 164.614 304.235 172.935 302.836 181.045L135.835 299.693C66.9728 288.285 14.4545 228.363 14.4545 156.143C14.4545 75.7613 79.5038 10.6182 159.727 10.6182C239.951 10.6182 305 75.7614 305 156.143Z",
-        stroke: "".concat((_a = theme.palette.primary.main) !== null && _a !== void 0 ? _a : '##9BCAFF'),
+        stroke: "".concat((_a = theme.palette.primary.main) !== null && _a !== void 0 ? _a : '#9BCAFF'),
         "stroke-width": "12"
       })]
     }), jsx("path", {
@@ -27,7 +27,7 @@ var Correct = function Correct() {
       "stroke-width": "4"
     }), jsx("path", {
       d: "M143.208 284.443C166.87 215.233 237.326 174.982 308.673 185.469L223.146 245.734L137.618 306C138.921 298.786 140.756 291.589 143.208 284.443Z",
-      fill: "".concat((_b = theme.palette.primary.main) !== null && _b !== void 0 ? _b : '##9BCAFF')
+      fill: "".concat((_b = theme.palette.primary.main) !== null && _b !== void 0 ? _b : '#9BCAFF')
     }), jsx("defs", {
       children: jsxs("filter", {
         id: "filter0_d_596_8851",

package/es/components/answer-feedback/Incorrect.js

@@ -17,7 +17,7 @@ var Incorrect = function Incorrect() {
         fill: "url(#paint0_linear_596_8855)"
       }), jsx("path", {
         d: "M305 156.143C305 164.614 304.235 172.935 302.836 181.045L135.835 299.693C66.9728 288.285 14.4545 228.363 14.4545 156.143C14.4545 75.7613 79.5038 10.6182 159.727 10.6182C239.951 10.6182 305 75.7614 305 156.143Z",
-        stroke: "".concat((_a = theme.palette.primary.main) !== null && _a !== void 0 ? _a : '##9BCAFF'),
+        stroke: "".concat((_a = theme.palette.primary.main) !== null && _a !== void 0 ? _a : '#9BCAFF'),
         "stroke-width": "12"
       })]
     }), jsxs("mask", {
@@ -50,7 +50,7 @@ var Incorrect = function Incorrect() {
       mask: "url(#path-3-outside-1_596_8855)"
     }), jsx("path", {
       d: "M143.208 284.443C166.87 215.233 237.326 174.982 308.673 185.469L137.618 306C138.921 298.786 140.756 291.589 143.208 284.443Z",
-      fill: "".concat((_b = theme.palette.primary.main) !== null && _b !== void 0 ? _b : '##9BCAFF')
+      fill: "".concat((_b = theme.palette.primary.main) !== null && _b !== void 0 ? _b : '#9BCAFF')
     }), jsxs("defs", {
       children: [jsxs("filter", {
         id: "filter0_d_596_8855",

package/es/components/chat/Chat.d.ts

@@ -11,18 +11,20 @@ export interface EliceChatProps {
     onChange: (text: string) => void;
     onSend: (text: string) => void;
     onRecord?: () => void;
+    height?: string;
     onTranscribingChange?: (value: boolean) => void;
     isLoadingMessage?: boolean;
 }
 declare const EliceChat: {
-    ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, isLoadingMessage, }: EliceChatProps): import("react/jsx-runtime").JSX.Element;
-    MessageList({ messages, isLoadingMessage, scrollRef, }: {
+    ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, isLoadingMessage, height, }: EliceChatProps): import("react/jsx-runtime").JSX.Element;
+    MessageList({ messages, isLoadingMessage, scrollRef, height, }: {
         messages: {
             role: "system" | "user" | "assistant";
             content: string;
         }[];
         isLoadingMessage?: boolean | undefined;
         scrollRef: React.RefObject<HTMLDivElement>;
+        height?: string | undefined;
     }): import("react/jsx-runtime").JSX.Element;
     InputArea({ placeHolder, value, onChange, onSend, onReset, onRecord, onTranscribingChange, }: {
         placeHolder: string;