teachable-design-system 0.3.2 → 0.3.4

package/dist/index.esm.js

@@ -2,10 +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 element from './assets/icons/checked.png';
-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
@@ -862,6 +859,11 @@ const CheckBox = ({ size, select, state, onClick }) => {
     return (jsxs(Wrapper$1, { size: size, select: select, state: state, onClick: handleClick, children: [select === "on" && (jsx(CheckIcon, { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M20 6L9 17L4 12", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })), select === "indeterminate" && jsx(DashIcon, { state: state })] }));
 };
 
+// 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 arrowDownIconBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAACimHc4AAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAPhSURBVHgB7du9UtRQFAfwcxOcQSs6lQVZfYIdEEVGnGynHXR24hMonR3Y0YlPID4BUjlWuygwgKjrGyzflMyoOA4k13v4cHAlyR1zk9zd+f8aYLlFcs7enPyzs0QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnBga8Yv+gV6IWx+fI50qGCErI87yObz/9GZLknbxUd9r8kY+LizVqIf39g6WA3IqqWMfRC4Km/YvuWK1a3aMEHEpIFf/FmeKzYnDoVvoHB1tmN/xTfCZptO1HME4JJW6AOpDhc17tUE2YMblV88LnEIi2mb+Kf0IKOUoJJW9AuOJB4FeauQl87AdBUFGlLlJKDOwA+Triv3wCMyU1J6jJ8GyLLb6gN5RQ4gb4B20T6kgiBq4suTykm8z3/dji13kIU0KJG1CrVfd8xxkhIeqhi9SQ7rs99IqaRK86VqneOKELuPjCLSe9A2IuGbC7Wd+73H19VnWTB3LY5aZ0tVCkna21ObJY76174+re/GnogtPiL1XrZICRBjBuQldnYU4K56H6s/28NerEPJubcFx8ORGxRO12946p4jNjDWDb2xu7he5ry+r+bDRsDTehs7tY39lc+0oW6bt974kq/mTUGuHIB5+X3hsNmMZvQ1eX5qvSoceRiwI5fXPgrkeW6Ls1NKzu5qai1ggRjPG5kWFGd8Cpnc31WqFwTb3ZhRe6SIrhrp6ud9sbG7uUI065khwOWu1ha9TOeL66sjBJKUilAWx7a70a04R2GTj3e7pvzG6q+UE54KDlk3irKnwlbM1x8ecnKCWJH8bFUdt7Wv14FLGkfsFxy0sGB5sOrZQr5MtPy/NPKUWpN4CpDFBpeGDXeBg1/5Jj5L5ax9ET3P3gS1TxhaDq6vKHMqUszWdBf/i/3BGb0rJOyj28yMecvkwaYFNazjLl6khtCDeyIS1nnXJ1ZNYAlmdaziPl6si0ASyPtJxXytWRyQxolGVazjPl6sh8B5zKIi3nnXJ15NYAlmZatiHl6sgkiMUxnZZtSbk6rGmAibRsW8rVkesQbpQkLduYcnVY1QD2P2nZ1pSrw5oh3IhDmAxEJXKRo9K0VDslLmg5spxX0IpjbQNY78DQqAgo0RPSo5S7vDBFlrLuEnSWVlqOkHfK1WF1A5hGWj6XDSlXh/UNYNyEzkLPdfWr3ncOOOWuzD+jJmD1DGgUn5btSrk6rAliOmLTsmUpV0dTNSAyLVuYcnU0VQMYhylfOOWzTeDLjo0pt+XxBy6t8D00AAAAAAAAAAAAAAAAAAAAAABoLb8BS/4k9NIcvNQAAAAASUVORK5CYII=';
+const iconSizeBase64 = 'data:image/png;base64,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';
+
 const getButtonSize = (size) => {
     switch (size) {
         case 'small':
@@ -1026,7 +1028,7 @@ const StyledOption = styled.div `
 	${props => getOptionSize(props.size)}
 
 
-    ${({ isSelected }) => isSelected && css `
+	${({ isSelected }) => isSelected && css `
 		background: ${colors$1.action["secondary-selected"]};
 		color: ${colors$1.text.secondary};
 
@@ -1036,7 +1038,7 @@ const StyledOption = styled.div `
         content: '';
         width: 16px;
         height: 16px;
-        background-image: url(${element});
+        background-image: url(${checkedIconBase64});
         background-size: cover;
         background-repeat: no-repeat;
         position: absolute;
@@ -1044,9 +1046,7 @@ const StyledOption = styled.div `
         top: 50%;
         transform: translateY(-50%);
     }
-	`}
-	
-	&:hover {
+	`}	&:hover {
 		background: ${colors$1.action["secondary-hover"]};
 	}
 	&:active {
@@ -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] }), "\t\t\t\t\t\t", 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' }) }));