teachable-design-system 0.3.6 → 0.3.7

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 iconSizeBase64 = 'data:image/png;base64,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';
+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: iconSizeBase64, 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' }) }));