@elicecontents/content-ui 1.0.6 → 1.0.7

package/cjs/components/recorder/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var Recorder = require('./Recorder.js');
+
+
+
+exports.EliceRecorder = Recorder.default;

package/cjs/components/video/VideoPlayer.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface EliceVideoPlayerProps {
+    source: string;
+    autoPlay?: boolean;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onProgress?: (seconds: number) => void;
+    tracks?: {
+        src: string;
+        kind: string;
+        srclang: string;
+        label: string;
+    }[];
+    sx?: React.CSSProperties;
+    height?: string;
+    pageKey?: string;
+    videoKey?: string;
+}
+declare const EliceVideoPlayer: ({ source, autoPlay, onPlay, onPause, onEnded, onProgress, tracks, sx, height, videoKey, }: EliceVideoPlayerProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceVideoPlayer;

package/cjs/components/video/VideoPlayer.js

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+
+var EliceVideoPlayer = function EliceVideoPlayer(_ref) {
+  var source = _ref.source,
+    _ref$autoPlay = _ref.autoPlay,
+    autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
+    onPlay = _ref.onPlay,
+    onPause = _ref.onPause,
+    onEnded = _ref.onEnded,
+    onProgress = _ref.onProgress,
+    tracks = _ref.tracks,
+    sx = _ref.sx,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 'auto' : _ref$height,
+    videoKey = _ref.videoKey;
+  var videoRef = React.useRef(null);
+  var lastTime = React.useRef(videoKey ? Number(localStorage.getItem(videoKey)) || 0 : 0);
+  React.useEffect(function () {
+    var video = videoRef.current;
+    if (!video) return;
+    video.currentTime = lastTime.current;
+    var handlePlay = function handlePlay() {
+      return onPlay === null || onPlay === void 0 ? void 0 : onPlay();
+    };
+    var handlePause = function handlePause() {
+      return onPause === null || onPause === void 0 ? void 0 : onPause();
+    };
+    var handleEnded = function handleEnded() {
+      return onEnded === null || onEnded === void 0 ? void 0 : onEnded();
+    };
+    var handleTimeUpdate = function handleTimeUpdate() {
+      var seconds = video.currentTime;
+      onProgress === null || onProgress === void 0 ? void 0 : onProgress(seconds);
+      if (videoKey) {
+        localStorage.setItem(videoKey, seconds.toString());
+      }
+    };
+    video.addEventListener('play', handlePlay);
+    video.addEventListener('pause', handlePause);
+    video.addEventListener('ended', handleEnded);
+    video.addEventListener('timeupdate', handleTimeUpdate);
+    return function () {
+      video.removeEventListener('play', handlePlay);
+      video.removeEventListener('pause', handlePause);
+      video.removeEventListener('ended', handleEnded);
+      video.removeEventListener('timeupdate', handleTimeUpdate);
+    };
+  }, [videoKey, onPlay, onPause, onEnded, onProgress]);
+  return jsxRuntime.jsx(material.Stack, {
+    width: "100%",
+    height: height,
+    borderRadius: "1rem",
+    overflow: "hidden",
+    border: "1px solid #e0e0e0",
+    sx: Object.assign({
+      video: {
+        width: '100%',
+        height: '100%',
+        borderRadius: '1rem',
+        objectFit: 'cover'
+      }
+    }, sx),
+    children: jsxRuntime.jsxs("video", {
+      ref: videoRef,
+      controls: true,
+      autoPlay: autoPlay,
+      width: "100%",
+      crossOrigin: "anonymous",
+      children: [jsxRuntime.jsx("source", {
+        src: source,
+        type: "video/mp4"
+      }), tracks === null || tracks === void 0 ? void 0 : tracks.map(function (track, i) {
+        return jsxRuntime.jsx("track", {
+          src: track.src,
+          kind: track.kind,
+          srcLang: track.srclang,
+          label: track.label
+        }, i);
+      }), "Your browser does not support the video tag."]
+    })
+  });
+};
+
+exports.default = EliceVideoPlayer;

package/cjs/components/video/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EliceVideoPlayer } from './VideoPlayer';
+export type { EliceVideoPlayerProps } from './VideoPlayer';

package/cjs/components/video/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var VideoPlayer = require('./VideoPlayer.js');
+
+
+
+exports.EliceVideoPlayer = VideoPlayer.default;

package/cjs/icons/NumbersIcon.d.ts

@@ -4,6 +4,8 @@ interface NumbersIconProps {
     color?: string;
     textColor?: string;
     pathColor?: string;
+    customBackgroundPath?: string;
+    type?: 'default' | 'spark';
 }
-declare const NumbersIcon: ({ value, size, color, textColor, pathColor, }: NumbersIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const NumbersIcon: ({ value, size, type, color, textColor, pathColor, customBackgroundPath, }: NumbersIconProps) => import("react/jsx-runtime").JSX.Element;
 export default NumbersIcon;

package/cjs/icons/NumbersIcon.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var material = require('@mui/material');
 
+var backgroundPaths = {
+  spark: "M60 42.4274C60 42.4274 46.7999 45.2863 42.4263 60C42.4263 60 31.0711 52.6884 17.5737 60C17.5737 60 14.7148 46.7999 0 42.4263C0 42.4263 7.31164 31.0711 0 17.5737C0 17.5737 13.2001 14.7148 17.5737 0C17.5737 0 28.9289 7.31164 42.4263 0C42.4263 0 45.2852 13.2001 60 17.5737C60 17.5737 52.6884 28.9289 60 42.4263V42.4274Z"
+  // 추가 배경이 있다면 여기에 계속 추가
+};
 // ✅ 숫자 및 문자별 `path` 값을 정적으로 저장
 var numberPaths = {
   "1": "M25.7758 31.16H21.3838V16.376L16.9678 19.064V14.84L22.1038 11.864H25.7758V31.16Z",
@@ -26,19 +30,35 @@ var NumbersIcon = function NumbersIcon(_ref) {
   var value = _ref.value,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 45 : _ref$size,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
     color = _ref.color,
     textColor = _ref.textColor,
     _ref$pathColor = _ref.pathColor,
-    pathColor = _ref$pathColor === void 0 ? "#fff" : _ref$pathColor;
+    pathColor = _ref$pathColor === void 0 ? "#fff" : _ref$pathColor,
+    customBackgroundPath = _ref.customBackgroundPath;
   var theme = material.useTheme();
   var path = numberPaths[value.toString()];
+  var fillColor = color || theme.palette.primary.main;
+  var textFill = textColor || theme.palette.text.primary;
+  var resolvedBackgroundPath = customBackgroundPath || (type !== "default" ? backgroundPaths[type] : undefined);
   return jsxRuntime.jsxs("svg", {
     width: size,
     height: size,
     viewBox: "0 0 45 45",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: [jsxRuntime.jsx("circle", {
+    children: [resolvedBackgroundPath ? jsxRuntime.jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 60 60",
+      fill: "none",
+      children: jsxRuntime.jsx("path", {
+        d: resolvedBackgroundPath,
+        fill: fillColor
+      })
+    }) : jsxRuntime.jsx("circle", {
       cx: "22.5",
       cy: "22.5",
       r: "22.5",
@@ -52,7 +72,7 @@ var NumbersIcon = function NumbersIcon(_ref) {
       dominantBaseline: "middle",
       textAnchor: "middle",
       fontSize: size * 0.5,
-      fill: textColor || theme.palette.text.primary,
+      fill: textFill,
       fontFamily: "Arial, sans-serif",
       fontWeight: "bold",
       children: value

package/cjs/index.js

@@ -20,6 +20,9 @@ var SubtitleButton = require('./components/subtitle-button/SubtitleButton.js');
 var BaseInput = require('./components/base-input/BaseInput.js');
 var Modal = require('./components/Modal/Modal.js');
 var RecorderChat = require('./components/recorder-chat/RecorderChat.js');
+var VideoPlayer = require('./components/video/VideoPlayer.js');
+var Recorder = require('./components/recorder/Recorder.js');
+var Audio = require('./components/audio/Audio.js');
 var createAIDTTheme = require('./theme/createAIDTTheme.js');
 var index = require('./tokens/colors/index.js');
 var breakpoints = require('./tokens/breakpoints/breakpoints.js');
@@ -75,6 +78,9 @@ exports.EliceSubButton = SubtitleButton.default;
 exports.BaseInput = BaseInput.default;
 exports.EliceModal = Modal.default;
 exports.EliceRecorderChat = RecorderChat.default;
+exports.EliceVideoPlayer = VideoPlayer.default;
+exports.EliceRecorder = Recorder.default;
+exports.EliceAudioPlayer = Audio.default;
 exports.createAIDTTheme = createAIDTTheme.createAIDTTheme;
 exports.colors = index;
 exports.breakpoints = breakpoints.breakpoints;

package/cjs/typography/typography.d.ts

@@ -41,6 +41,17 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
             fontSize: string;
         };
     };
+    subtitle3: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:1200px)": {
+            fontSize: string;
+        };
+        "@media (max-width:512px)": {
+            fontSize: string;
+        };
+    };
     body1: {
         fontSize: string;
         fontWeight: number;

package/cjs/typography/typography.js

@@ -62,6 +62,15 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       fontSize: '22px'
     }),
     subtitle2: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
+      fontSize: '24px',
+      fontWeight: 700,
+      lineHeight: '160%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '24px'
+    }), "@media (max-width:512px)", {
+      fontSize: '18px'
+    }),
+    subtitle3: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
       fontSize: '20px',
       fontWeight: 700,
       lineHeight: '140%'

package/es/components/audio/Audio.d.ts

@@ -0,0 +1,5 @@
+export interface EliceAudioPlayerProps {
+    src: string;
+}
+declare const EliceAudioPlayer: ({ src }: EliceAudioPlayerProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceAudioPlayer;

package/es/components/audio/Audio.js

@@ -0,0 +1,83 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { Stack, LinearProgress } from '@mui/material';
+import PauseIcon from './Pause.js';
+import PlayIcon from './Play.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 PlayerButton = /*#__PURE__*/_styled("button", {
+  target: "e90no0w0"
+})("production" === "production" ? {
+  name: "thmcur",
+  styles: "display:flex;background-color:transparent!important;border:none"
+} : {
+  name: "thmcur",
+  styles: "display:flex;background-color:transparent!important;border:none",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var EliceAudioPlayer = function EliceAudioPlayer(_ref) {
+  var src = _ref.src;
+  var audioRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPlaying = _useState2[0],
+    setIsPlaying = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    progress = _useState4[0],
+    setProgress = _useState4[1];
+  var togglePlay = function togglePlay() {
+    var audio = audioRef.current;
+    if (!audio) return;
+    if (isPlaying) {
+      audio.pause();
+    } else {
+      audio.play();
+    }
+  };
+  useEffect(function () {
+    var audio = audioRef.current;
+    if (!audio) return;
+    var handlePlay = function handlePlay() {
+      return setIsPlaying(true);
+    };
+    var handlePause = function handlePause() {
+      return setIsPlaying(false);
+    };
+    var handleTimeUpdate = function handleTimeUpdate() {
+      var percent = audio.currentTime / audio.duration * 100;
+      setProgress(percent);
+    };
+    audio.addEventListener('play', handlePlay);
+    audio.addEventListener('pause', handlePause);
+    audio.addEventListener('timeupdate', handleTimeUpdate);
+    return function () {
+      audio.removeEventListener('play', handlePlay);
+      audio.removeEventListener('pause', handlePause);
+      audio.removeEventListener('timeupdate', handleTimeUpdate);
+    };
+  }, []);
+  return jsxs(Stack, {
+    spacing: 1,
+    alignItems: "center",
+    direction: "row",
+    children: [jsx("audio", {
+      ref: audioRef,
+      src: src,
+      preload: "auto"
+    }), jsx(PlayerButton, {
+      onClick: togglePlay,
+      children: isPlaying ? jsx(PauseIcon, {}) : jsx(PlayIcon, {})
+    }), jsx(LinearProgress, {
+      variant: "determinate",
+      value: progress,
+      sx: {
+        width: '200px'
+      }
+    })]
+  });
+};
+
+export { EliceAudioPlayer as default };

package/es/components/audio/Pause.d.ts

@@ -0,0 +1,5 @@
+declare const PauseIcon: ({ width, height }: {
+    width?: number | undefined;
+    height?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default PauseIcon;

package/es/components/audio/Pause.js

@@ -0,0 +1,89 @@
+import _styled from '@emotion/styled/base';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTheme } from '@mui/material';
+
+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 IconWrapper = /*#__PURE__*/_styled("button", {
+  target: "e1qsg1m10"
+})("production" === "production" ? {
+  name: "6skc8s",
+  styles: "padding:0;border:none;background:transparent;cursor:pointer;&:active svg rect{fill:#7c85b8;}&:active svg path{fill:#f0f0f0;}"
+} : {
+  name: "6skc8s",
+  styles: "padding:0;border:none;background:transparent;cursor:pointer;&:active svg rect{fill:#7c85b8;}&:active svg path{fill:#f0f0f0;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var PauseIcon = function PauseIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 40 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 40 : _ref$height;
+  var theme = useTheme();
+  return jsx(IconWrapper, {
+    pressColor: theme.palette.secondary.main,
+    children: jsxs("svg", {
+      width: width,
+      height: height,
+      viewBox: "0 0 54 54",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [jsx("g", {
+        filter: "url(#filter0_i_593_3904)",
+        children: jsx("rect", {
+          width: "54",
+          height: "54",
+          rx: "16",
+          fill: theme.palette.primary.main
+        })
+      }), jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M20 17.75H22C23.2426 17.75 24.25 18.7574 24.25 20V34C24.25 35.2426 23.2426 36.25 22 36.25H20C18.7574 36.25 17.75 35.2426 17.75 34V20C17.75 18.7574 18.7574 17.75 20 17.75ZM16 20C16 17.7909 17.7909 16 20 16H22C24.2091 16 26 17.7909 26 20V34C26 36.2091 24.2091 38 22 38H20C17.7909 38 16 36.2091 16 34V20ZM32 17.75H34C35.2426 17.75 36.25 18.7574 36.25 20V34C36.25 35.2427 35.2426 36.25 34 36.25H32C30.7573 36.25 29.75 35.2427 29.75 34V20C29.75 18.7574 30.7573 17.75 32 17.75ZM28 20C28 17.7909 29.7908 16 32 16H34C36.2091 16 38 17.7909 38 20V34C38 36.2092 36.2091 38 34 38H32C29.7908 38 28 36.2092 28 34V20Z",
+        fill: "white"
+      }), jsx("defs", {
+        children: jsxs("filter", {
+          id: "filter0_i_593_3904",
+          x: "0",
+          y: "0",
+          width: "55",
+          height: "55",
+          filterUnits: "userSpaceOnUse",
+          colorInterpolationFilters: "sRGB",
+          children: [jsx("feFlood", {
+            floodOpacity: "0",
+            result: "BackgroundImageFix"
+          }), jsx("feBlend", {
+            mode: "normal",
+            "in": "SourceGraphic",
+            in2: "BackgroundImageFix",
+            result: "shape"
+          }), jsx("feColorMatrix", {
+            "in": "SourceAlpha",
+            type: "matrix",
+            values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+            result: "hardAlpha"
+          }), jsx("feOffset", {
+            dx: "1",
+            dy: "1"
+          }), jsx("feGaussianBlur", {
+            stdDeviation: "3.3"
+          }), jsx("feComposite", {
+            in2: "hardAlpha",
+            operator: "arithmetic",
+            k2: "-1",
+            k3: "1"
+          }), jsx("feColorMatrix", {
+            type: "matrix",
+            values: "0 0 0 0 0.912047 0 0 0 0 0.912047 0 0 0 0 0.940267 0 0 0 1 0"
+          }), jsx("feBlend", {
+            mode: "normal",
+            in2: "shape",
+            result: "effect1_innerShadow_593_3904"
+          })]
+        })
+      })]
+    })
+  });
+};
+
+export { PauseIcon as default };

package/es/components/audio/Play.d.ts

@@ -0,0 +1,5 @@
+declare const PlayIcon: ({ width, height }: {
+    width?: number | undefined;
+    height?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default PlayIcon;

package/es/components/audio/Play.js

@@ -0,0 +1,87 @@
+import _styled from '@emotion/styled/base';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTheme } from '@mui/material';
+
+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 IconWrapper = /*#__PURE__*/_styled("button", {
+  target: "e15psp4j0"
+})("production" === "production" ? {
+  name: "6skc8s",
+  styles: "padding:0;border:none;background:transparent;cursor:pointer;&:active svg rect{fill:#7c85b8;}&:active svg path{fill:#f0f0f0;}"
+} : {
+  name: "6skc8s",
+  styles: "padding:0;border:none;background:transparent;cursor:pointer;&:active svg rect{fill:#7c85b8;}&:active svg path{fill:#f0f0f0;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var PlayIcon = function PlayIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 40 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 40 : _ref$height;
+  var theme = useTheme();
+  return jsx(IconWrapper, {
+    pressColor: theme.palette.secondary.main,
+    children: jsxs("svg", {
+      width: width,
+      height: height,
+      viewBox: "0 0 54 54",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [jsx("g", {
+        filter: "url(#filter0_i_274_7284)",
+        children: jsx("rect", {
+          width: "54",
+          height: "54",
+          rx: "16",
+          fill: theme.palette.primary.main
+        })
+      }), jsx("path", {
+        d: "M37.1161 29.0649C37.5038 28.8516 37.8228 28.5325 38.0361 28.1448C38.6571 27.0157 38.2452 25.5969 37.1161 24.9759L20.9578 16.0888C20.6133 15.8993 20.2265 15.8 19.8333 15.8C18.5447 15.8 17.5 16.8447 17.5 18.1333V35.9074C17.5 36.3006 17.5994 36.6874 17.7888 37.0319C18.4099 38.161 19.8287 38.5729 20.9578 37.9519L37.1161 29.0649ZM19.5417 17.6317L36.5963 27.0133L19.5417 36.3942V17.6317Z",
+        fill: "white"
+      }), jsx("defs", {
+        children: jsxs("filter", {
+          id: "filter0_i_274_7284",
+          x: "0",
+          y: "0",
+          width: "55",
+          height: "55",
+          filterUnits: "userSpaceOnUse",
+          colorInterpolationFilters: "sRGB",
+          children: [jsx("feFlood", {
+            floodOpacity: "0",
+            result: "BackgroundImageFix"
+          }), jsx("feBlend", {
+            mode: "normal",
+            "in": "SourceGraphic",
+            in2: "BackgroundImageFix",
+            result: "shape"
+          }), jsx("feColorMatrix", {
+            "in": "SourceAlpha",
+            type: "matrix",
+            values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+            result: "hardAlpha"
+          }), jsx("feOffset", {
+            dx: "1",
+            dy: "1"
+          }), jsx("feGaussianBlur", {
+            stdDeviation: "3.3"
+          }), jsx("feComposite", {
+            in2: "hardAlpha",
+            operator: "arithmetic",
+            k2: "-1",
+            k3: "1"
+          }), jsx("feColorMatrix", {
+            type: "matrix",
+            values: "0 0 0 0 0.912047 0 0 0 0 0.912047 0 0 0 0 0.940267 0 0 0 1 0"
+          }), jsx("feBlend", {
+            mode: "normal",
+            in2: "shape",
+            result: "effect1_innerShadow_274_7284"
+          })]
+        })
+      })]
+    })
+  });
+};
+
+export { PlayIcon as default };

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

@@ -0,0 +1,2 @@
+export { default as EliceAudioPlayer } from './Audio';
+export type { EliceAudioPlayerProps } from './Audio';

package/es/components/audio/index.js

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

package/es/components/base-input/BaseInput.d.ts

@@ -1,12 +1,14 @@
 import React from "react";
+export type BaseInputType = "normal" | "area";
 export interface BaseInputProps {
     value: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
     children?: React.ReactNode;
-    isDisabled: boolean;
+    isDisabled?: boolean;
+    inputType: BaseInputType;
 }
-declare const BaseInput: (({ value, onChange, placeholder, children, isDisabled, }: BaseInputProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const BaseInput: (({ value, onChange, placeholder, children, isDisabled, inputType, }: BaseInputProps) => import("react/jsx-runtime").JSX.Element) & {
     LeftElement: ({ children }: {
         children?: React.ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;

package/es/components/base-input/BaseInput.js

@@ -5,14 +5,17 @@ import { useTheme } from '@mui/material';
 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 BaseInputContainer = /*#__PURE__*/_styled("div", {
   target: "e8c2rcu3"
-})("production" === "production" ? {
-  name: "phlljc",
-  styles: "display:flex;align-items:center;gap:8px;width:100%"
-} : {
-  name: "phlljc",
-  styles: "display:flex;align-items:center;gap:8px;width:100%",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+})("display:flex;align-items:center;gap:8px;width:100%;border:", function (_ref) {
+  var type = _ref.type,
+    borderColor = _ref.borderColor;
+  return type !== "normal" ? "1px solid ".concat(borderColor) : "none";
+}, ";border-radius:", function (_ref2) {
+  var type = _ref2.type;
+  return type !== "normal" ? "1.5rem" : "none";
+}, ";padding:", function (_ref3) {
+  var type = _ref3.type;
+  return type !== "normal" ? "1.375rem 1.5rem" : "none";
+}, ";");
 var BaseInputContent = /*#__PURE__*/_styled("div", {
   target: "e8c2rcu2"
 })("production" === "production" ? {
@@ -35,21 +38,25 @@ var InputText = /*#__PURE__*/_styled("input", {
 });
 var UnderLineDivider = /*#__PURE__*/_styled("div", {
   target: "e8c2rcu0"
-})("width:100%;height:2px;background-color:", function (_ref) {
-  var theme = _ref.theme;
+})("width:100%;height:2px;background-color:", function (_ref4) {
+  var theme = _ref4.theme;
   return theme.palette.primary.main;
 }, ";");
 // ✅ 합성 컴포넌트 패턴 적용
-var BaseInput = Object.assign(function (_ref2) {
-  var value = _ref2.value,
-    onChange = _ref2.onChange,
-    _ref2$placeholder = _ref2.placeholder,
-    placeholder = _ref2$placeholder === void 0 ? "Enter text..." : _ref2$placeholder,
-    children = _ref2.children,
-    _ref2$isDisabled = _ref2.isDisabled,
-    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled;
+var BaseInput = Object.assign(function (_ref5) {
+  var value = _ref5.value,
+    onChange = _ref5.onChange,
+    _ref5$placeholder = _ref5.placeholder,
+    placeholder = _ref5$placeholder === void 0 ? "Enter text..." : _ref5$placeholder,
+    children = _ref5.children,
+    _ref5$isDisabled = _ref5.isDisabled,
+    isDisabled = _ref5$isDisabled === void 0 ? false : _ref5$isDisabled,
+    _ref5$inputType = _ref5.inputType,
+    inputType = _ref5$inputType === void 0 ? "normal" : _ref5$inputType;
   var theme = useTheme();
   return jsxs(BaseInputContainer, {
+    type: inputType,
+    borderColor: theme.palette.secondary.main,
     children: [children && jsx("div", {
       children: children
     }), " ", jsxs(BaseInputContent, {
@@ -64,8 +71,8 @@ var BaseInput = Object.assign(function (_ref2) {
     })]
   });
 }, {
-  LeftElement: function LeftElement(_ref3) {
-    var children = _ref3.children;
+  LeftElement: function LeftElement(_ref6) {
+    var children = _ref6.children;
     return jsx(Fragment, {
       children: children
     });

package/es/components/index.d.ts

@@ -20,3 +20,6 @@ export * from './subtitle-button';
 export * from './base-input';
 export * from './Modal';
 export * from './recorder-chat';
+export * from './video';
+export * from './recorder';
+export * from './audio';

package/es/components/index.js

@@ -18,3 +18,6 @@ export { default as EliceSubButton } from './subtitle-button/SubtitleButton.js';
 export { default as BaseInput } from './base-input/BaseInput.js';
 export { default as EliceModal } from './Modal/Modal.js';
 export { default as EliceRecorderChat } from './recorder-chat/RecorderChat.js';
+export { default as EliceVideoPlayer } from './video/VideoPlayer.js';
+export { default as EliceRecorder } from './recorder/Recorder.js';
+export { default as EliceAudioPlayer } from './audio/Audio.js';

package/es/components/recorder/Recorder.d.ts

@@ -0,0 +1,6 @@
+export interface EliceRecorderProps {
+    onAudioReady: (file: File) => void;
+    onTransform?: () => void;
+}
+declare const EliceRecorder: ({ onAudioReady, onTransform }: EliceRecorderProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceRecorder;