@elicecontents/content-ui 1.0.9 → 1.0.10-rc.0

package/cjs/components/chat/Chat.js

@@ -10,8 +10,9 @@ var material = require('@mui/material');
 require('tslib');
 var Micro = require('../../icons/Micro.js');
 var Reset = require('../../icons/Reset.js');
-var Send = require('../../icons/Send.js');
+var SendArrow = require('../../icons/SendArrow.js');
 var IconButton = require('../icon-button/IconButton.js');
+var AIAvatar = require('../../assets/AIAvatar.png.js');
 var AssistantAvatar = require('./AssistantAvatar.js');
 var UserAvatar = require('./UserAvatar.js');
 var TypingIndicator = require('./TypingIndicator.js');
@@ -23,7 +24,7 @@ var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 var StyledChatContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "e1i7zt4"
+  target: "e1i7zt6"
 })("position:relative;max-height:100%;height:", function (_ref) {
   var height = _ref.height;
   return height !== null && height !== void 0 ? height : 'fit-content';
@@ -35,7 +36,7 @@ var StyledChatContainer = /*#__PURE__*/_styled__default.default(material.Stack,
   return backgroundImage && "\n    background-image: url(".concat(backgroundImage, ");\n    background-size: cover;\n    background-position: center;\n  ");
 }, ";");
 var StyledScrollBarStack = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "e1i7zt3"
+  target: "e1i7zt5"
 })("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref4) {
   var theme = _ref4.theme;
   return theme.palette.grey[200];
@@ -47,7 +48,7 @@ var StyledScrollBarStack = /*#__PURE__*/_styled__default.default(material.Stack,
   return theme.palette.secondary.main;
 }, ";}");
 var StyledInput = /*#__PURE__*/_styled__default.default(material.Input, {
-  target: "e1i7zt2"
+  target: "e1i7zt4"
 })("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref7) {
   var theme = _ref7.theme;
   return theme.palette.secondary.main;
@@ -65,7 +66,7 @@ var StyledInput = /*#__PURE__*/_styled__default.default(material.Input, {
   return theme.palette.secondary.main;
 }, ";}");
 var StyledMessage = /*#__PURE__*/_styled__default.default(material.Typography, {
-  target: "e1i7zt1"
+  target: "e1i7zt3"
 })("color:", function (_ref12) {
   var isAssistant = _ref12.isAssistant,
     theme = _ref12.theme;
@@ -79,7 +80,7 @@ var StyledMessage = /*#__PURE__*/_styled__default.default(material.Typography, {
   return isAssistant ? theme.palette.grey[50] : theme.palette.primary.light;
 }, ";border-radius:1rem;white-space:pre-wrap;padding:0.75rem;margin-bottom:16px;");
 var RecordingOverlay = /*#__PURE__*/_styled__default.default("div", {
-  target: "e1i7zt0"
+  target: "e1i7zt2"
 })("production" === "production" ? {
   name: "1805g3a",
   styles: "position:absolute;top:0;left:24px;width:calc(100% - 48px);height:calc(100% - 24px);background-color:rgba(0, 0, 0, 0.4);z-index:999;backdrop-filter:blur(1px);border-radius:0 0 1.125rem 1.125rem"
@@ -88,6 +89,26 @@ var RecordingOverlay = /*#__PURE__*/_styled__default.default("div", {
   styles: "position:absolute;top:0;left:24px;width:calc(100% - 48px);height:calc(100% - 24px);background-color:rgba(0, 0, 0, 0.4);z-index:999;backdrop-filter:blur(1px);border-radius:0 0 1.125rem 1.125rem",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
+var EmptyMessageContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
+  target: "e1i7zt1"
+})("production" === "production" ? {
+  name: "1bdo6l4",
+  styles: "display:flex;justify-content:center;align-items:center;height:100%;gap:1rem"
+} : {
+  name: "1bdo6l4",
+  styles: "display:flex;justify-content:center;align-items:center;height:100%;gap:1rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var AIAvatarImage = /*#__PURE__*/_styled__default.default("img", {
+  target: "e1i7zt0"
+})("production" === "production" ? {
+  name: "1l4h0oe",
+  styles: "width:120px;height:120px;flex-shrink:0"
+} : {
+  name: "1l4h0oe",
+  styles: "width:120px;height:120px;flex-shrink:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var _EliceChat = function EliceChat(_ref15) {
   var _ref15$placeholder = _ref15.placeholder,
     placeholder = _ref15$placeholder === void 0 ? "AI와 대화를 시작해 보세요" : _ref15$placeholder,
@@ -188,11 +209,15 @@ _EliceChat.MessageList = function (_ref16) {
     height: height,
     children: [isRecord && jsxRuntime.jsx(RecordingOverlay, {
       onClick: setIsRecord
-    }), messages.length === 0 ? jsxRuntime.jsx(material.Typography, {
-      color: theme.palette.text.disabled,
-      fontSize: "2rem",
-      fontWeight: 700,
-      children: "AI\uC640 \uB300\uD654\uB97C \uC2DC\uC791\uD574 \uBCF4\uC138\uC694"
+    }), messages.length === 0 ? jsxRuntime.jsxs(EmptyMessageContainer, {
+      children: [jsxRuntime.jsx(AIAvatarImage, {
+        src: AIAvatar.default,
+        alt: "Ai-avatar"
+      }), jsxRuntime.jsx(material.Typography, {
+        color: theme.palette.text.disabled,
+        variant: "subtitle1",
+        children: "AI\uC640 \uB300\uD654\uB97C \uC2DC\uC791\uD574 \uBCF4\uC138\uC694"
+      })]
     }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [messages.map(function (msg, index) {
         if (msg.role === "system") return null;
@@ -267,14 +292,20 @@ _EliceChat.InputArea = function (_ref17) {
           onRecord();
           onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(true);
         },
-        children: jsxRuntime.jsx(Micro.default, {})
+        children: jsxRuntime.jsx(Micro.default, {
+          color: theme.palette.secondary.main
+        })
       }), jsxRuntime.jsx(IconButton.default, {
         onClick: onReset,
-        children: jsxRuntime.jsx(Reset.default, {})
+        children: jsxRuntime.jsx(Reset.default, {
+          color: theme.palette.secondary.main
+        })
       }), jsxRuntime.jsx(IconButton.default, {
         onClick: onSend,
         disabled: !value.trim(),
-        children: jsxRuntime.jsx(Send.default, {})
+        children: jsxRuntime.jsx(SendArrow.default, {
+          color: theme.palette.secondary.main
+        })
       })]
     })
   });

package/cjs/components/layout/Footer/LayoutFooterPaging.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { SxProps, Theme } from "@mui/material";
 export interface LayoutFooterPagingProps {
     currentPage: number;
     totalPage: number;
@@ -6,6 +7,7 @@ export interface LayoutFooterPagingProps {
     onNext?: () => void;
     allowPrev?: boolean;
     allowNext?: boolean;
+    sx?: SxProps<Theme>;
 }
 declare const LayoutFooterPaging: React.FC<LayoutFooterPagingProps>;
 export default LayoutFooterPaging;

package/cjs/components/layout/Footer/LayoutFooterPaging.js

@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var FooterContainer = /*#__PURE__*/_styled__default.default("div", {
+var FooterContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "ecog5a42"
 })("production" === "production" ? {
   name: "vw5qh8",
@@ -43,11 +43,13 @@ var LayoutFooterPaging = function LayoutFooterPaging(_ref3) {
     _ref3$allowPrev = _ref3.allowPrev,
     allowPrev = _ref3$allowPrev === void 0 ? true : _ref3$allowPrev,
     _ref3$allowNext = _ref3.allowNext,
-    allowNext = _ref3$allowNext === void 0 ? true : _ref3$allowNext;
+    allowNext = _ref3$allowNext === void 0 ? true : _ref3$allowNext,
+    sx = _ref3.sx;
   var theme = material.useTheme();
   var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
     isTablet = _useAIDTMediaQuery.isTablet;
   return jsxRuntime.jsxs(FooterContainer, {
+    sx: sx,
     children: [isTablet && jsxRuntime.jsx(PaginationButton.default, {
       left: true,
       onClick: onPrev,

package/cjs/components/layout/Footer/LayoutFooterSubmit.d.ts

@@ -1,3 +1,4 @@
+import { SxProps, Theme } from "@mui/material";
 export interface LayoutFooterSubmitProps {
     isRollback?: boolean;
     isSubmit?: boolean;
@@ -7,6 +8,7 @@ export interface LayoutFooterSubmitProps {
     rollbackText?: string;
     onRollback?: () => void;
     onSubmit?: () => void;
+    sx?: SxProps<Theme>;
 }
-declare const LayoutFooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, onRollback, }: LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayoutFooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, onRollback, sx, }: LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
 export default LayoutFooterSubmit;

package/cjs/components/layout/Footer/LayoutFooterSubmit.js

@@ -18,10 +18,12 @@ var LayoutFooterSubmit = function LayoutFooterSubmit(_ref) {
     submitText = _ref.submitText,
     rollbackText = _ref.rollbackText,
     onSubmit = _ref.onSubmit,
-    onRollback = _ref.onRollback;
+    onRollback = _ref.onRollback,
+    sx = _ref.sx;
   return jsxRuntime.jsxs(material.Stack, {
     direction: "row",
     spacing: 1,
+    sx: sx,
     children: [isRollback && jsxRuntime.jsx(Button.default, {
       disabled: disableRollback,
       variant: "outlined",

package/cjs/components/layout/Header/LayoutHeaderSubTitle.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
+import { SxProps, Theme } from "@mui/material";
 export interface LayoutHeaderSubTitleProps {
     children: React.ReactNode;
+    sx?: SxProps<Theme>;
 }
-declare const LayoutHeaderSubTitle: ({ children }: LayoutHeaderSubTitleProps) => JSX.Element;
+declare const LayoutHeaderSubTitle: ({ children, sx }: LayoutHeaderSubTitleProps) => JSX.Element;
 export default LayoutHeaderSubTitle;

package/cjs/components/layout/Header/LayoutHeaderSubTitle.js

@@ -22,7 +22,8 @@ var StyledPopup = material.styled(menu.Menu.Popup)(_templateObject || (_template
 var StyledMenuItem = material.styled(menu.Menu.Item)(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: column;\n"])));
 var StyledMoreTrigger = material.styled(menu.Menu.Trigger)(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  border: none;\n  background-color: #fff;\n  padding: 0;\n"])));
 var LayoutHeaderSubTitle = function LayoutHeaderSubTitle(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    sx = _ref.sx;
   var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     menuOpen = _useState2[0],
@@ -33,6 +34,7 @@ var LayoutHeaderSubTitle = function LayoutHeaderSubTitle(_ref) {
     direction: "row",
     spacing: 2,
     alignItems: "center",
+    sx: sx,
     children: isTablet ? jsxRuntime.jsxs(menu.Menu.Root, {
       open: menuOpen,
       onOpenChange: setMenuOpen,

package/cjs/components/layout/Header/LayoutHeaderTitle.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
+import { SxProps, Theme } from "@mui/material";
 export interface LayoutHeaderTitleProps {
     children?: React.ReactNode;
     titleComponent?: React.ReactNode;
+    sx?: SxProps<Theme>;
 }
-declare const LayoutHeaderTitle: ({ children, titleComponent }: LayoutHeaderTitleProps) => JSX.Element;
+declare const LayoutHeaderTitle: ({ children, titleComponent, sx }: LayoutHeaderTitleProps) => JSX.Element;
 export default LayoutHeaderTitle;

package/cjs/components/layout/Header/LayoutHeaderTitle.js

@@ -29,7 +29,8 @@ var Title = /*#__PURE__*/_styled__default.default(material.Typography, {
 });
 var LayoutHeaderTitle = function LayoutHeaderTitle(_ref2) {
   var children = _ref2.children,
-    titleComponent = _ref2.titleComponent;
+    titleComponent = _ref2.titleComponent,
+    sx = _ref2.sx;
   var theme = material.useTheme();
   if (titleComponent) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -38,6 +39,7 @@ var LayoutHeaderTitle = function LayoutHeaderTitle(_ref2) {
   }
   return jsxRuntime.jsx(StyledTitle, {
     bgColor: theme.palette.secondary.main,
+    sx: sx,
     children: typeof children === "string" ? jsxRuntime.jsx(Title, {
       variant: "h1",
       children: children

package/cjs/components/layout/Layout.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { SxProps, Theme } from "@mui/material";
 export interface EliceLayoutProps {
     children: React.ReactNode;
     backgroundImage?: string;
@@ -8,31 +9,37 @@ export interface EliceLayoutProps {
     allowPrev?: boolean;
     allowNext?: boolean;
     onlyPage?: boolean;
+    sx?: SxProps<Theme>;
 }
 type Alignment = "left" | "center" | "right";
-declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor, onlyPage }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
-    HeaderContainer: ({ children }: {
+declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor, onlyPage, sx }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
+    HeaderContainer: ({ children, sx }: {
         children: React.ReactNode;
+        sx?: SxProps<Theme> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    HeaderTitle: ({ children, titleComponent }: import("./Header").LayoutHeaderTitleProps) => JSX.Element;
-    HeaderSubTitle: ({ children }: import("./Header").LayoutHeaderSubTitleProps) => JSX.Element;
-    ContentContainer: ({ children }: {
+    HeaderTitle: ({ children, titleComponent, sx }: import("./Header").LayoutHeaderTitleProps) => JSX.Element;
+    HeaderSubTitle: ({ children, sx }: import("./Header").LayoutHeaderSubTitleProps) => JSX.Element;
+    ContentContainer: ({ children, sx }: {
         children: React.ReactNode;
+        sx?: SxProps<Theme> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    Subtitle: ({ children, alignment, justifyContent }: {
+    Subtitle: ({ children, alignment, justifyContent, sx }: {
         children: React.ReactNode;
         alignment?: Alignment | undefined;
         justifyContent?: string | undefined;
+        sx?: SxProps<Theme> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ children, alignment, justifyContent }: {
+    Content: ({ children, alignment, justifyContent, sx, }: {
         children: React.ReactNode;
         alignment?: Alignment | undefined;
         justifyContent?: string | undefined;
+        sx?: SxProps<Theme> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    FooterContainer: ({ children }: {
+    FooterContainer: ({ children, sx }: {
         children: React.ReactNode;
+        sx?: SxProps<Theme> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     FooterPaging: React.FC<import("./Footer").LayoutFooterPagingProps>;
-    FooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, onRollback, }: import("./Footer").LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
+    FooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, onRollback, sx, }: import("./Footer").LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default EliceLayout;

package/cjs/components/layout/Layout.js

@@ -112,7 +112,8 @@ var EliceLayout = Object.assign(function (_ref14) {
     backgroundImage = _ref14.backgroundImage,
     backgroundColor = _ref14.backgroundColor,
     _ref14$onlyPage = _ref14.onlyPage,
-    onlyPage = _ref14$onlyPage === void 0 ? false : _ref14$onlyPage;
+    onlyPage = _ref14$onlyPage === void 0 ? false : _ref14$onlyPage,
+    sx = _ref14.sx;
   var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
     isTablet = _useAIDTMediaQuery.isTablet,
     isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
@@ -129,6 +130,7 @@ var EliceLayout = Object.assign(function (_ref14) {
       isMiniTablet: isMiniTablet,
       backgroundImage: backgroundImage,
       backgroundColor: backgroundColor,
+      sx: sx,
       children: [!onlyPage && !isTablet && jsxRuntime.jsx(LayoutPagination.default, {
         onPrev: onPrev,
         onNext: onNext,
@@ -139,15 +141,18 @@ var EliceLayout = Object.assign(function (_ref14) {
   });
 }, {
   HeaderContainer: function HeaderContainer(_ref15) {
-    var children = _ref15.children;
+    var children = _ref15.children,
+      sx = _ref15.sx;
     return jsxRuntime.jsx(_HeaderContainer, {
+      sx: sx,
       children: children
     });
   },
   HeaderTitle: LayoutHeaderTitle.default,
   HeaderSubTitle: LayoutHeaderSubTitle.default,
   ContentContainer: function ContentContainer(_ref16) {
-    var children = _ref16.children;
+    var children = _ref16.children,
+      sx = _ref16.sx;
     var theme = material.useTheme();
     var contentRef = React__default.default.useRef(null);
     var context = React__default.default.useContext(EliceLayoutContext);
@@ -189,6 +194,7 @@ var EliceLayout = Object.assign(function (_ref14) {
     return jsxRuntime.jsxs(_ContentContainer, {
       ref: contentRef,
       theme: theme,
+      sx: sx,
       children: [children, hasScroll && !isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
         children: jsxRuntime.jsx(ScrollMoreIcon.default, {
           size: 32,
@@ -203,7 +209,8 @@ var EliceLayout = Object.assign(function (_ref14) {
       _ref17$alignment = _ref17.alignment,
       alignment = _ref17$alignment === void 0 ? "left" : _ref17$alignment,
       _ref17$justifyContent = _ref17.justifyContent,
-      justifyContent = _ref17$justifyContent === void 0 ? "flex-start" : _ref17$justifyContent;
+      justifyContent = _ref17$justifyContent === void 0 ? "flex-start" : _ref17$justifyContent,
+      sx = _ref17.sx;
     var context = React__default.default.useContext(EliceLayoutContext);
     if (!context) {
       throw new Error("EliceLayout components must be used within an EliceLayout provider.");
@@ -213,6 +220,7 @@ var EliceLayout = Object.assign(function (_ref14) {
       isSticky: isScrollActive,
       alignment: alignment,
       justifyContent: justifyContent,
+      sx: sx,
       children: children
     });
   },
@@ -221,19 +229,20 @@ var EliceLayout = Object.assign(function (_ref14) {
       _ref18$alignment = _ref18.alignment,
       alignment = _ref18$alignment === void 0 ? "left" : _ref18$alignment,
       _ref18$justifyContent = _ref18.justifyContent,
-      justifyContent = _ref18$justifyContent === void 0 ? "flex-start" : _ref18$justifyContent;
+      justifyContent = _ref18$justifyContent === void 0 ? "flex-start" : _ref18$justifyContent,
+      sx = _ref18.sx;
     return jsxRuntime.jsx(_Content, {
       alignment: alignment,
       justifyContent: justifyContent,
-      children: jsxRuntime.jsx(material.Typography, {
-        variant: "body1",
-        children: children
-      })
+      sx: sx,
+      children: children
     });
   },
   FooterContainer: function FooterContainer(_ref19) {
-    var children = _ref19.children;
+    var children = _ref19.children,
+      sx = _ref19.sx;
     return jsxRuntime.jsx(_FooterContainer, {
+      sx: sx,
       children: children
     });
   },

package/cjs/icons/SendArrow.d.ts

@@ -0,0 +1,4 @@
+declare const SendArrow: ({ color }: {
+    color?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SendArrow;

package/cjs/icons/SendArrow.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+var SendArrow = function SendArrow(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'currentColor' : _ref$color;
+  return jsxRuntime.jsx("svg", {
+    width: "22",
+    height: "23",
+    viewBox: "0 0 22 23",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsxRuntime.jsxs("g", {
+      children: [jsxRuntime.jsx("path", {
+        d: "M1.69775 11.3023L11.0001 2L20.3024 11.3023",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }), jsxRuntime.jsx("path", {
+        d: "M11 22L11 3.39535",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      })]
+    })
+  });
+};
+
+exports.default = SendArrow;

package/cjs/icons/index.d.ts

@@ -16,3 +16,4 @@ export { default as RecordPause } from './RecordPause';
 export { default as Recording } from './Recording';
 export { default as ReadyRecord } from './ReadyRecord';
 export { default as RecordPlay } from './RecordPlay';
+export { default as SendArrow } from './SendArrow';

package/cjs/icons/index.js

@@ -18,6 +18,7 @@ var RecordPause = require('./RecordPause.js');
 var Recording = require('./Recording.js');
 var ReadyRecord = require('./ReadyRecord.js');
 var RecordPlay = require('./RecordPlay.js');
+var SendArrow = require('./SendArrow.js');
 
 
 
@@ -39,3 +40,4 @@ exports.RecordPause = RecordPause.default;
 exports.Recording = Recording.default;
 exports.ReadyRecord = ReadyRecord.default;
 exports.RecordPlay = RecordPlay.default;
+exports.SendArrow = SendArrow.default;

package/cjs/index.js

@@ -44,6 +44,7 @@ var RecordPause = require('./icons/RecordPause.js');
 var Recording = require('./icons/Recording.js');
 var ReadyRecord = require('./icons/ReadyRecord.js');
 var RecordPlay = require('./icons/RecordPlay.js');
+var SendArrow = require('./icons/SendArrow.js');
 require('@mui/material');
 var mint = require('./tokens/colors/mint.js');
 var bluepurple = require('./tokens/colors/bluepurple.js');
@@ -102,6 +103,7 @@ exports.RecordPause = RecordPause.default;
 exports.Recording = Recording.default;
 exports.ReadyRecord = ReadyRecord.default;
 exports.RecordPlay = RecordPlay.default;
+exports.SendArrow = SendArrow.default;
 exports.mint = mint.mint;
 exports.bluepurple = bluepurple.bluepurple;
 exports.gray = gray.gray;

package/es/components/chat/Chat.js

@@ -2,7 +2,8 @@ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBab
 import _styled from '@emotion/styled/base';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
-import { useTheme, Stack, Typography, Input } from '@mui/material';
+import { Stack, useTheme, Typography, Input } from '@mui/material';
+import img from '../../assets/AIAvatar.png.js';
 import AssistantAvatar from './AssistantAvatar.js';
 import UserAvatar from './UserAvatar.js';
 import TypingIndicator from './TypingIndicator.js';
@@ -10,11 +11,11 @@ import EliceRecorder from '../recorder/Recorder.js';
 import EliceIconButton from '../icon-button/IconButton.js';
 import Micro from '../../icons/Micro.js';
 import Reset from '../../icons/Reset.js';
-import Send from '../../icons/Send.js';
+import SendArrow from '../../icons/SendArrow.js';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 var StyledChatContainer = /*#__PURE__*/_styled(Stack, {
-  target: "e1i7zt4"
+  target: "e1i7zt6"
 })("position:relative;max-height:100%;height:", function (_ref) {
   var height = _ref.height;
   return height !== null && height !== void 0 ? height : 'fit-content';
@@ -26,7 +27,7 @@ var StyledChatContainer = /*#__PURE__*/_styled(Stack, {
   return backgroundImage && "\n    background-image: url(".concat(backgroundImage, ");\n    background-size: cover;\n    background-position: center;\n  ");
 }, ";");
 var StyledScrollBarStack = /*#__PURE__*/_styled(Stack, {
-  target: "e1i7zt3"
+  target: "e1i7zt5"
 })("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref4) {
   var theme = _ref4.theme;
   return theme.palette.grey[200];
@@ -38,7 +39,7 @@ var StyledScrollBarStack = /*#__PURE__*/_styled(Stack, {
   return theme.palette.secondary.main;
 }, ";}");
 var StyledInput = /*#__PURE__*/_styled(Input, {
-  target: "e1i7zt2"
+  target: "e1i7zt4"
 })("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref7) {
   var theme = _ref7.theme;
   return theme.palette.secondary.main;
@@ -56,7 +57,7 @@ var StyledInput = /*#__PURE__*/_styled(Input, {
   return theme.palette.secondary.main;
 }, ";}");
 var StyledMessage = /*#__PURE__*/_styled(Typography, {
-  target: "e1i7zt1"
+  target: "e1i7zt3"
 })("color:", function (_ref12) {
   var isAssistant = _ref12.isAssistant,
     theme = _ref12.theme;
@@ -70,7 +71,7 @@ var StyledMessage = /*#__PURE__*/_styled(Typography, {
   return isAssistant ? theme.palette.grey[50] : theme.palette.primary.light;
 }, ";border-radius:1rem;white-space:pre-wrap;padding:0.75rem;margin-bottom:16px;");
 var RecordingOverlay = /*#__PURE__*/_styled("div", {
-  target: "e1i7zt0"
+  target: "e1i7zt2"
 })("production" === "production" ? {
   name: "1805g3a",
   styles: "position:absolute;top:0;left:24px;width:calc(100% - 48px);height:calc(100% - 24px);background-color:rgba(0, 0, 0, 0.4);z-index:999;backdrop-filter:blur(1px);border-radius:0 0 1.125rem 1.125rem"
@@ -79,6 +80,26 @@ var RecordingOverlay = /*#__PURE__*/_styled("div", {
   styles: "position:absolute;top:0;left:24px;width:calc(100% - 48px);height:calc(100% - 24px);background-color:rgba(0, 0, 0, 0.4);z-index:999;backdrop-filter:blur(1px);border-radius:0 0 1.125rem 1.125rem",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
+var EmptyMessageContainer = /*#__PURE__*/_styled(Stack, {
+  target: "e1i7zt1"
+})("production" === "production" ? {
+  name: "1bdo6l4",
+  styles: "display:flex;justify-content:center;align-items:center;height:100%;gap:1rem"
+} : {
+  name: "1bdo6l4",
+  styles: "display:flex;justify-content:center;align-items:center;height:100%;gap:1rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var AIAvatarImage = /*#__PURE__*/_styled("img", {
+  target: "e1i7zt0"
+})("production" === "production" ? {
+  name: "1l4h0oe",
+  styles: "width:120px;height:120px;flex-shrink:0"
+} : {
+  name: "1l4h0oe",
+  styles: "width:120px;height:120px;flex-shrink:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var _EliceChat = function EliceChat(_ref15) {
   var _ref15$placeholder = _ref15.placeholder,
     placeholder = _ref15$placeholder === void 0 ? "AI와 대화를 시작해 보세요" : _ref15$placeholder,
@@ -179,11 +200,15 @@ _EliceChat.MessageList = function (_ref16) {
     height: height,
     children: [isRecord && jsx(RecordingOverlay, {
       onClick: setIsRecord
-    }), messages.length === 0 ? jsx(Typography, {
-      color: theme.palette.text.disabled,
-      fontSize: "2rem",
-      fontWeight: 700,
-      children: "AI\uC640 \uB300\uD654\uB97C \uC2DC\uC791\uD574 \uBCF4\uC138\uC694"
+    }), messages.length === 0 ? jsxs(EmptyMessageContainer, {
+      children: [jsx(AIAvatarImage, {
+        src: img,
+        alt: "Ai-avatar"
+      }), jsx(Typography, {
+        color: theme.palette.text.disabled,
+        variant: "subtitle1",
+        children: "AI\uC640 \uB300\uD654\uB97C \uC2DC\uC791\uD574 \uBCF4\uC138\uC694"
+      })]
     }) : jsxs(Fragment, {
       children: [messages.map(function (msg, index) {
         if (msg.role === "system") return null;
@@ -258,14 +283,20 @@ _EliceChat.InputArea = function (_ref17) {
           onRecord();
           onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(true);
         },
-        children: jsx(Micro, {})
+        children: jsx(Micro, {
+          color: theme.palette.secondary.main
+        })
       }), jsx(EliceIconButton, {
         onClick: onReset,
-        children: jsx(Reset, {})
+        children: jsx(Reset, {
+          color: theme.palette.secondary.main
+        })
       }), jsx(EliceIconButton, {
         onClick: onSend,
         disabled: !value.trim(),
-        children: jsx(Send, {})
+        children: jsx(SendArrow, {
+          color: theme.palette.secondary.main
+        })
       })]
     })
   });

package/es/components/layout/Footer/LayoutFooterPaging.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { SxProps, Theme } from "@mui/material";
 export interface LayoutFooterPagingProps {
     currentPage: number;
     totalPage: number;
@@ -6,6 +7,7 @@ export interface LayoutFooterPagingProps {
     onNext?: () => void;
     allowPrev?: boolean;
     allowNext?: boolean;
+    sx?: SxProps<Theme>;
 }
 declare const LayoutFooterPaging: React.FC<LayoutFooterPagingProps>;
 export default LayoutFooterPaging;

package/es/components/layout/Footer/LayoutFooterPaging.js

@@ -1,11 +1,11 @@
 import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useTheme, Typography } from '@mui/material';
+import { Stack, useTheme, Typography } from '@mui/material';
 import useAIDTMediaQuery from '../../../hooks/useAIDTMediaQuery.js';
 import PaginationButton from '../../pagination-button/PaginationButton.js';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var FooterContainer = /*#__PURE__*/_styled("div", {
+var FooterContainer = /*#__PURE__*/_styled(Stack, {
   target: "ecog5a42"
 })("production" === "production" ? {
   name: "vw5qh8",
@@ -35,11 +35,13 @@ var LayoutFooterPaging = function LayoutFooterPaging(_ref3) {
     _ref3$allowPrev = _ref3.allowPrev,
     allowPrev = _ref3$allowPrev === void 0 ? true : _ref3$allowPrev,
     _ref3$allowNext = _ref3.allowNext,
-    allowNext = _ref3$allowNext === void 0 ? true : _ref3$allowNext;
+    allowNext = _ref3$allowNext === void 0 ? true : _ref3$allowNext,
+    sx = _ref3.sx;
   var theme = useTheme();
   var _useAIDTMediaQuery = useAIDTMediaQuery(),
     isTablet = _useAIDTMediaQuery.isTablet;
   return jsxs(FooterContainer, {
+    sx: sx,
     children: [isTablet && jsx(PaginationButton, {
       left: true,
       onClick: onPrev,

package/es/components/layout/Footer/LayoutFooterSubmit.d.ts

@@ -1,3 +1,4 @@
+import { SxProps, Theme } from "@mui/material";
 export interface LayoutFooterSubmitProps {
     isRollback?: boolean;
     isSubmit?: boolean;
@@ -7,6 +8,7 @@ export interface LayoutFooterSubmitProps {
     rollbackText?: string;
     onRollback?: () => void;
     onSubmit?: () => void;
+    sx?: SxProps<Theme>;
 }
-declare const LayoutFooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, onRollback, }: LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayoutFooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, onRollback, sx, }: LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
 export default LayoutFooterSubmit;

package/es/components/layout/Footer/LayoutFooterSubmit.js

@@ -14,10 +14,12 @@ var LayoutFooterSubmit = function LayoutFooterSubmit(_ref) {
     submitText = _ref.submitText,
     rollbackText = _ref.rollbackText,
     onSubmit = _ref.onSubmit,
-    onRollback = _ref.onRollback;
+    onRollback = _ref.onRollback,
+    sx = _ref.sx;
   return jsxs(Stack, {
     direction: "row",
     spacing: 1,
+    sx: sx,
     children: [isRollback && jsx(EliceButton, {
       disabled: disableRollback,
       variant: "outlined",

package/es/components/layout/Header/LayoutHeaderSubTitle.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
+import { SxProps, Theme } from "@mui/material";
 export interface LayoutHeaderSubTitleProps {
     children: React.ReactNode;
+    sx?: SxProps<Theme>;
 }
-declare const LayoutHeaderSubTitle: ({ children }: LayoutHeaderSubTitleProps) => JSX.Element;
+declare const LayoutHeaderSubTitle: ({ children, sx }: LayoutHeaderSubTitleProps) => JSX.Element;
 export default LayoutHeaderSubTitle;

package/es/components/layout/Header/LayoutHeaderSubTitle.js

@@ -13,7 +13,8 @@ var StyledPopup = styled(Menu.Popup)(_templateObject || (_templateObject = _tagg
 var StyledMenuItem = styled(Menu.Item)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: column;\n"])));
 var StyledMoreTrigger = styled(Menu.Trigger)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border: none;\n  background-color: #fff;\n  padding: 0;\n"])));
 var LayoutHeaderSubTitle = function LayoutHeaderSubTitle(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    sx = _ref.sx;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     menuOpen = _useState2[0],
@@ -24,6 +25,7 @@ var LayoutHeaderSubTitle = function LayoutHeaderSubTitle(_ref) {
     direction: "row",
     spacing: 2,
     alignItems: "center",
+    sx: sx,
     children: isTablet ? jsxs(Menu.Root, {
       open: menuOpen,
       onOpenChange: setMenuOpen,

package/es/components/layout/Header/LayoutHeaderTitle.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
+import { SxProps, Theme } from "@mui/material";
 export interface LayoutHeaderTitleProps {
     children?: React.ReactNode;
     titleComponent?: React.ReactNode;
+    sx?: SxProps<Theme>;
 }
-declare const LayoutHeaderTitle: ({ children, titleComponent }: LayoutHeaderTitleProps) => JSX.Element;
+declare const LayoutHeaderTitle: ({ children, titleComponent, sx }: LayoutHeaderTitleProps) => JSX.Element;
 export default LayoutHeaderTitle;

package/es/components/layout/Header/LayoutHeaderTitle.js

@@ -21,7 +21,8 @@ var Title = /*#__PURE__*/_styled(Typography, {
 });
 var LayoutHeaderTitle = function LayoutHeaderTitle(_ref2) {
   var children = _ref2.children,
-    titleComponent = _ref2.titleComponent;
+    titleComponent = _ref2.titleComponent,
+    sx = _ref2.sx;
   var theme = useTheme();
   if (titleComponent) {
     return jsx(Fragment, {
@@ -30,6 +31,7 @@ var LayoutHeaderTitle = function LayoutHeaderTitle(_ref2) {
   }
   return jsx(StyledTitle, {
     bgColor: theme.palette.secondary.main,
+    sx: sx,
     children: typeof children === "string" ? jsx(Title, {
       variant: "h1",
       children: children

package/es/components/layout/Layout.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { SxProps, Theme } from "@mui/material";
 export interface EliceLayoutProps {
     children: React.ReactNode;
     backgroundImage?: string;
@@ -8,31 +9,37 @@ export interface EliceLayoutProps {
     allowPrev?: boolean;
     allowNext?: boolean;
     onlyPage?: boolean;
+    sx?: SxProps<Theme>;
 }
 type Alignment = "left" | "center" | "right";
-declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor, onlyPage }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
-    HeaderContainer: ({ children }: {
+declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor, onlyPage, sx }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
+    HeaderContainer: ({ children, sx }: {
         children: React.ReactNode;
+        sx?: SxProps<Theme> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    HeaderTitle: ({ children, titleComponent }: import("./Header").LayoutHeaderTitleProps) => JSX.Element;
-    HeaderSubTitle: ({ children }: import("./Header").LayoutHeaderSubTitleProps) => JSX.Element;
-    ContentContainer: ({ children }: {
+    HeaderTitle: ({ children, titleComponent, sx }: import("./Header").LayoutHeaderTitleProps) => JSX.Element;
+    HeaderSubTitle: ({ children, sx }: import("./Header").LayoutHeaderSubTitleProps) => JSX.Element;
+    ContentContainer: ({ children, sx }: {
         children: React.ReactNode;
+        sx?: SxProps<Theme> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    Subtitle: ({ children, alignment, justifyContent }: {
+    Subtitle: ({ children, alignment, justifyContent, sx }: {
         children: React.ReactNode;
         alignment?: Alignment | undefined;
         justifyContent?: string | undefined;
+        sx?: SxProps<Theme> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ children, alignment, justifyContent }: {
+    Content: ({ children, alignment, justifyContent, sx, }: {
         children: React.ReactNode;
         alignment?: Alignment | undefined;
         justifyContent?: string | undefined;
+        sx?: SxProps<Theme> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    FooterContainer: ({ children }: {
+    FooterContainer: ({ children, sx }: {
         children: React.ReactNode;
+        sx?: SxProps<Theme> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     FooterPaging: React.FC<import("./Footer").LayoutFooterPagingProps>;
-    FooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, onRollback, }: import("./Footer").LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
+    FooterSubmit: ({ isRollback, isSubmit, disableRollback, disableSubmit, submitText, rollbackText, onSubmit, onRollback, sx, }: import("./Footer").LayoutFooterSubmitProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default EliceLayout;

package/es/components/layout/Layout.js

@@ -2,7 +2,7 @@ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBab
 import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
-import { Stack, Button, Typography, useTheme } from '@mui/material';
+import { Stack, Button, useTheme } from '@mui/material';
 import useAIDTMediaQuery from '../../hooks/useAIDTMediaQuery.js';
 import ScrollMoreIcon from '../../icons/ScrollMoreIcon.js';
 import LayoutPagination from './layout-pagination/LayoutPagination.js';
@@ -103,7 +103,8 @@ var EliceLayout = Object.assign(function (_ref14) {
     backgroundImage = _ref14.backgroundImage,
     backgroundColor = _ref14.backgroundColor,
     _ref14$onlyPage = _ref14.onlyPage,
-    onlyPage = _ref14$onlyPage === void 0 ? false : _ref14$onlyPage;
+    onlyPage = _ref14$onlyPage === void 0 ? false : _ref14$onlyPage,
+    sx = _ref14.sx;
   var _useAIDTMediaQuery = useAIDTMediaQuery(),
     isTablet = _useAIDTMediaQuery.isTablet,
     isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
@@ -120,6 +121,7 @@ var EliceLayout = Object.assign(function (_ref14) {
       isMiniTablet: isMiniTablet,
       backgroundImage: backgroundImage,
       backgroundColor: backgroundColor,
+      sx: sx,
       children: [!onlyPage && !isTablet && jsx(LayoutPagination, {
         onPrev: onPrev,
         onNext: onNext,
@@ -130,15 +132,18 @@ var EliceLayout = Object.assign(function (_ref14) {
   });
 }, {
   HeaderContainer: function HeaderContainer(_ref15) {
-    var children = _ref15.children;
+    var children = _ref15.children,
+      sx = _ref15.sx;
     return jsx(_HeaderContainer, {
+      sx: sx,
       children: children
     });
   },
   HeaderTitle: LayoutHeaderTitle,
   HeaderSubTitle: LayoutHeaderSubTitle,
   ContentContainer: function ContentContainer(_ref16) {
-    var children = _ref16.children;
+    var children = _ref16.children,
+      sx = _ref16.sx;
     var theme = useTheme();
     var contentRef = React.useRef(null);
     var context = React.useContext(EliceLayoutContext);
@@ -180,6 +185,7 @@ var EliceLayout = Object.assign(function (_ref14) {
     return jsxs(_ContentContainer, {
       ref: contentRef,
       theme: theme,
+      sx: sx,
       children: [children, hasScroll && !isScrollActive && jsx(ScrollMoreButton, {
         children: jsx(ScrollMoreIcon, {
           size: 32,
@@ -194,7 +200,8 @@ var EliceLayout = Object.assign(function (_ref14) {
       _ref17$alignment = _ref17.alignment,
       alignment = _ref17$alignment === void 0 ? "left" : _ref17$alignment,
       _ref17$justifyContent = _ref17.justifyContent,
-      justifyContent = _ref17$justifyContent === void 0 ? "flex-start" : _ref17$justifyContent;
+      justifyContent = _ref17$justifyContent === void 0 ? "flex-start" : _ref17$justifyContent,
+      sx = _ref17.sx;
     var context = React.useContext(EliceLayoutContext);
     if (!context) {
       throw new Error("EliceLayout components must be used within an EliceLayout provider.");
@@ -204,6 +211,7 @@ var EliceLayout = Object.assign(function (_ref14) {
       isSticky: isScrollActive,
       alignment: alignment,
       justifyContent: justifyContent,
+      sx: sx,
       children: children
     });
   },
@@ -212,19 +220,20 @@ var EliceLayout = Object.assign(function (_ref14) {
       _ref18$alignment = _ref18.alignment,
       alignment = _ref18$alignment === void 0 ? "left" : _ref18$alignment,
       _ref18$justifyContent = _ref18.justifyContent,
-      justifyContent = _ref18$justifyContent === void 0 ? "flex-start" : _ref18$justifyContent;
+      justifyContent = _ref18$justifyContent === void 0 ? "flex-start" : _ref18$justifyContent,
+      sx = _ref18.sx;
     return jsx(_Content, {
       alignment: alignment,
       justifyContent: justifyContent,
-      children: jsx(Typography, {
-        variant: "body1",
-        children: children
-      })
+      sx: sx,
+      children: children
     });
   },
   FooterContainer: function FooterContainer(_ref19) {
-    var children = _ref19.children;
+    var children = _ref19.children,
+      sx = _ref19.sx;
     return jsx(_FooterContainer, {
+      sx: sx,
       children: children
     });
   },

package/es/icons/SendArrow.d.ts

@@ -0,0 +1,4 @@
+declare const SendArrow: ({ color }: {
+    color?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SendArrow;

package/es/icons/SendArrow.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SendArrow = function SendArrow(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'currentColor' : _ref$color;
+  return jsx("svg", {
+    width: "22",
+    height: "23",
+    viewBox: "0 0 22 23",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsxs("g", {
+      children: [jsx("path", {
+        d: "M1.69775 11.3023L11.0001 2L20.3024 11.3023",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }), jsx("path", {
+        d: "M11 22L11 3.39535",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      })]
+    })
+  });
+};
+
+export { SendArrow as default };

package/es/icons/index.d.ts

@@ -16,3 +16,4 @@ export { default as RecordPause } from './RecordPause';
 export { default as Recording } from './Recording';
 export { default as ReadyRecord } from './ReadyRecord';
 export { default as RecordPlay } from './RecordPlay';
+export { default as SendArrow } from './SendArrow';

package/es/icons/index.js

@@ -16,3 +16,4 @@ export { default as RecordPause } from './RecordPause.js';
 export { default as Recording } from './Recording.js';
 export { default as ReadyRecord } from './ReadyRecord.js';
 export { default as RecordPlay } from './RecordPlay.js';
+export { default as SendArrow } from './SendArrow.js';

package/es/index.js

@@ -39,6 +39,7 @@ export { default as RecordPause } from './icons/RecordPause.js';
 export { default as Recording } from './icons/Recording.js';
 export { default as ReadyRecord } from './icons/ReadyRecord.js';
 export { default as RecordPlay } from './icons/RecordPlay.js';
+export { default as SendArrow } from './icons/SendArrow.js';
 export { createAIDTTheme } from './theme/createAIDTTheme.js';
 export { mint } from './tokens/colors/mint.js';
 export { bluepurple } from './tokens/colors/bluepurple.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elicecontents/content-ui",
-  "version": "1.0.9",
+  "version": "1.0.10-rc.0",
   "description": "A set of UI components for creating content of Elice",
   "author": "Elice <contact@elice.io>",
   "license": "UNLICENSED",