teachable-design-system 0.3.6 → 0.3.8

package/dist/index.esm.js

@@ -2,9 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import arrowDownIcon from '../../assets/icons/arrow-down.png';
 import { Eye, EyeOff, ChevronUp, ChevronDown, Copy, ClipboardPaste, Trash2, XCircle } from 'lucide-react';
-import icon from '../../assets/icons/icon_size.png';
 
 const colors$1 = {
     //mode
@@ -863,6 +861,8 @@ const CheckBox = ({ size, select, state, onClick }) => {
 
 // Auto-generated base64 encoded icons
 const checkedIconBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASJSURBVHgB7ZtBTttAFIbfOHGalk0uUImqF2h3JVRtuEE5QWHXHSBB1R1mRyGosOsOegLoCQgCQndwg0bqBbIAmsSJp/MMbqAlnmdnPIns+TYg/JJYf+b3vHnvAWAwGAwGg8FgMBgiw8BwD7u8MseY9xZ/59w6cuuble2HxRsBbyhWn9Nu93OccKvcuMHbxxJ6Yadac5kOvs8Dgc+Verv4nHsL5i+vO5eKg1xkBBcVXnyYZh8WQkIVBF4yAgs/qHUpCSoMuZF7AQnl5Vfh0MjyKXQy6kmkB0brihyOLEyLthFzLLgTr4i681wpJZTIrIM260LTs3FpYQCbzQLSuZ3V/yuLEzrzUPqtuh8VkcgXyXHdXFsOANWTiIZkT8NHUysKDCfM/sEJuBghkSkDfuow7hNC1Vm29QYjLloBi111lIUkxgtbt1KsOEMmMgFhlEU+/OVkc1boBmRDQP+sCrBJCydYNyISAaF1ZzhfVugGpF5Bq3TzALMQg1QJSrStW385VffMCYpBqAanWfVyYcCAmqT3KFV8vVzwPpMUCC9h8S9L3CH99SvE8Jj2uySotFPKQQiiVFrQuk1RaKKTOwtRKy7DW7b9PylBRJI1Cqiys07r990sJuq0bQF6B2LkXDeYFDrDoVzREx17U1XZchTczDBTrMga11qna+yU/A6/dK7xB5285SHTsGfDdG9uMFmp/g9n5eVBMjhLkD9wA/zDgciX3tAy9X/UjGAE3RVJvT3yxRUno5/bxxgEohrQCGecVSYgzqpWI/Q3VRdIoqExjHHv64xfQCDpDZX8jDjQB85y09Bn3FgvTK/IjlAKSLJJGgSRg53jrAHcwSqzYXOZ0iJhkkTQKZAu37e6suCNazexWREx9IAGS6m/Egf4MrG03O3ZX3BCj7WRCREx9VIs4LtYNiHUSKUwt74lXvicFS0ZkI392GR8P4avPnyqobz4DDcTahTtn1Tng8I0UjCOyilYi2boWV54wDyJ2GoMicuA7pGB/zvjqvFjx5/FigV8AybpYaTmp1kATQ+WBbn0L54qJlQ0+6XV6h3FFxCFwyq5rKay0UCAd5cIQR7iaOMrhs7RCCC/xHn9nP3/zvds4IT8Tsb8hHhlfZXGi0rLUOt6ogUaUnERuc63EVqKu/kYclB3lkhKRWiTVbd2AoS18F9V2xpyPM0+ad47Cuv3PVozKlai7vxGHRJpKKKI4Oy/RolHE7vlEeeXF3b+Ou3X795AgRZH4eqJqTQxv2sBmcEZF5RB40iTeVIojoguwL119ojrUPq0mXiyQkXhfGJ9P2AkTv1LyvpIL/JzQ34Ak+htx0NJYRxG5WFlAE5GClkoLBa19YVEMwE4e7qyxCws6Ky0UtI52iB7yxbArUUeRNAraZ2NQRMvLv8SVBNEZG+sGjGy0wz9liESZEzYMZNysGzCy6azWj/UG83Iz1JU4btYNGOl4G1VEHAIfN+sGjHw+UCbisEPgSTMWA5Z3RLxXecHTBlpXVUMqCcZuPtDPFXPeJO9ZDTfm/24YDAaDwWAwGAwGg8FgSI4/sGgQo9TbTtsAAAAASUVORK5CYII=';
+const arrowUpIconBase64 = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDEuNjY2OTlDMTQuNjAyMyAxLjY2Njk5IDE4LjMzMyA1LjM5NzY2IDE4LjMzMyAxMEMxOC4zMzMgMTQuNjAyNCAxNC42MDIzIDE4LjMzMyAxMCAxOC4zMzNDNS4zOTc2MyAxOC4zMzMgMS42NjY5OSAxNC42MDI0IDEuNjY2OTkgMTBDMS42NjY5OSA1LjM5NzY3IDUuMzk3NjIgMS42NjY5OSAxMCAxLjY2Njk5Wk0xMCAzQzYuMTM0MDEgMyAzIDYuMTM0MDQgMyAxMEMzIDEzLjg2NiA2LjEzNDAxIDE3IDEwIDE3QzEzLjg2NiAxNyAxNyAxMy44NjYgMTcgMTBDMTcgNi4xMzQwNCAxMy44NjYgMyAxMCAzWk05LjUzMzIgNy41MzMyQzkuNzkzNTYgNy4yNzI5IDEwLjIxNjIgNy4yNzI4NyAxMC40NzY2IDcuNTMzMkwxMy4zMDQ3IDEwLjM2MjNDMTMuNTY0OCAxMC42MjI3IDEzLjU2NDkgMTEuMDQ0NCAxMy4zMDQ3IDExLjMwNDdDMTMuMDQ0NCAxMS41NjUgMTIuNjIyNyAxMS41NjQ4IDEyLjM2MjMgMTEuMzA0N0wxMC4wMDQ5IDguOTQ3MjdMNy42NDc0NiAxMS4zMDQ3QzcuMzg3MTEgMTEuNTY0OSA2Ljk2NTM4IDExLjU2NSA2LjcwNTA4IDExLjMwNDdDNi40NDQ3NyAxMS4wNDQ0IDYuNDQ0ODcgMTAuNjIyNyA2LjcwNTA4IDEwLjM2MjNMOS41MzMyIDcuNTMzMloiIGZpbGw9IiMzMzM2M0QiLz4KPC9zdmc+Cg==';
+const arrowDownIconBase64 = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi40NDUyIDcuMDA0MTNDMTYuNzE4OSA3LjI1MDQyIDE2Ljc0MTEgNy42NzE5NCAxNi40OTQ4IDcuOTQ1NjNMMTAuNDk1NSAxNC42MTIzQzEwLjM2OTEgMTQuNzUyOCAxMC4xODg5IDE0LjgzMyA5Ljk5OTk0IDE0LjgzM0M5LjgxMDk1IDE0LjgzMyA5LjYzMDgzIDE0Ljc1MjggOS41MDQ0IDE0LjYxMjNMMy41MDQzOSA3Ljk0NTY2QzMuMjU4MDkgNy42NzE5OCAzLjI4MDI3IDcuMjUwNDYgMy41NTM5NSA3LjAwNDE1QzMuODI3NjIgNi43NTc4NCA0LjI0OTE1IDYuNzgwMDMgNC40OTU0NSA3LjA1MzdMOS45OTk5IDEzLjE2OThMMTUuNTAzNyA3LjA1MzczQzE1Ljc1IDYuNzgwMDQgMTYuMTcxNSA2Ljc1Nzg0IDE2LjQ0NTIgNy4wMDQxM1oiIGZpbGw9IiMzMzM2M0QiLz4KPC9zdmc+Cg==';
 
 const getButtonSize = (size) => {
     switch (size) {
@@ -1072,7 +1072,7 @@ function Dropdown({ size, options, onSelect, label, placeholder, width }) {
         onSelect?.(option);
         setOpen(false);
     };
-    return (jsxs("div", { style: { position: 'relative' }, children: [jsx(StyledLabel, { children: label }), jsx(StyledDropDown, { onClick: () => setOpen((prev) => !prev), size: size, width: width, isOpen: open, children: jsxs(StyledBox, { children: [jsx(StyledText, { size: size, isOpen: open, children: selected ?? placeholder }), jsx(StyledIcon$1, { size: size, children: jsx("img", { src: arrowDownIcon, alt: "dropdown icon", style: { width: '100%', height: '100%' } }) })] }) }), open && (jsx(StyledOptions, { ref: ref, size: size, children: options?.map((option) => (jsx(StyledOption, { onClick: () => handleSelect(option), size: size, isSelected: option === selected, children: option }, option))) }))] }));
+    return (jsxs("div", { style: { position: 'relative' }, children: [jsx(StyledLabel, { children: label }), jsx(StyledDropDown, { onClick: () => setOpen((prev) => !prev), size: size, width: width, isOpen: open, children: jsxs(StyledBox, { children: [jsx(StyledText, { size: size, isOpen: open, children: selected ?? placeholder }), jsx(StyledIcon$1, { size: size, children: jsx("img", { src: arrowDownIconBase64, alt: "dropdown icon", style: { width: '100%', height: '100%' } }) })] }) }), open && (jsx(StyledOptions, { ref: ref, size: size, children: options?.map((option) => (jsx(StyledOption, { onClick: () => handleSelect(option), size: size, isSelected: option === selected, children: option }, option))) }))] }));
 }
 
 const getInputSizeStyle = (size) => {
@@ -1293,7 +1293,7 @@ function Sidebar({ buttonStyle, description, title }) {
         newState[index] = !newState[index]; // 현재 인덱스 toggle
         setOpenSections(newState);
     };
-    return (jsxs(StyledSidebar, { children: [jsx(StyledDescription, { children: title.map((item, index) => (jsxs(StyledDisclosure, { children: [jsxs(StyledTitle, { onClick: () => toggleSection(index), style: { cursor: 'pointer' }, children: [jsx(StyledIcon, { src: icon, alt: "icon", isOpen: openSections[index] }), item] }), openSections[index] && (jsx(StyledOpenContents, { children: description[index].map((option, i) => (jsx(StyledOpenContentsText, { children: option }, i))) }))] }))) }), buttonStyle === 'start' ? jsx(StartButton, {}) : buttonStyle === 'middle' ? jsx(MiddleButton, {}) : buttonStyle === 'end' ? jsx(EndButton, {}) : jsx(MiddleButton, {})] }));
+    return (jsxs(StyledSidebar, { children: [jsx(StyledDescription, { children: title.map((item, index) => (jsxs(StyledDisclosure, { children: [jsxs(StyledTitle, { onClick: () => toggleSection(index), style: { cursor: 'pointer' }, children: [jsx(StyledIcon, { src: arrowUpIconBase64, alt: "icon", isOpen: openSections[index] }), item] }), openSections[index] && (jsx(StyledOpenContents, { children: description[index].map((option, i) => (jsx(StyledOpenContentsText, { children: option }, i))) }))] }))) }), buttonStyle === 'start' ? jsx(StartButton, {}) : buttonStyle === 'middle' ? jsx(MiddleButton, {}) : buttonStyle === 'end' ? jsx(EndButton, {}) : jsx(MiddleButton, {})] }));
 }
 function StartButton() {
     return (jsx(StyledButtonArea, { children: jsx(Button, { size: 'small', type: 'primary', label: '\uB2E4\uC74C\uC73C\uB85C', width: '240px', height: '40px' }) }));