@sellmate/design-system 1.0.61 → 1.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system",
- "version": "1.0.61",
+ "version": "1.0.63",
  "description": "Sellmate Design System - Web Components Library built with Stencil",
  "keywords": [
   "web-components",
@@ -60,7 +60,7 @@
   "generate": "stencil generate",
   "storybook": "storybook dev -p 6006",
   "build-storybook": "storybook build",
-  "chromatic": "npx chromatic --project-token=chpt_d022d502c83da77"
+  "chromatic": "npx chromatic --project-token=chpt_01fe2963e7b8982"
  },
  "devDependencies": {
   "@chromatic-com/storybook": "^4.1.1",

package/readme.md

@@ -58,7 +58,7 @@ defineCustomElements();
 - **sd-input** - Input field component
 - **sd-checkbox** - Checkbox component
 - **sd-select** - Select dropdown component
-- **sd-table** - Data table component
+- **sd-table-backup** - Data table component
 - **sd-tag** - Tag/badge component
 - **sd-icon** - Icon component
 - **sd-tooltip** - Tooltip component

package/dist/cjs/app-globals-V2Kpy_OQ.js

@@ -1,5 +0,0 @@
-'use strict';
-
-const globalScripts = () => {};
-
-exports.globalScripts = globalScripts;

package/dist/cjs/sd-confirm-modal.cjs.entry.js

@@ -1,106 +0,0 @@
-'use strict';
-
-var index = require('./index-BQt-JC6r.js');
-var component_modal = require('./component.modal-DmQUWbve.js');
-
-const CONFIRM_MODAL_DEFAULT_BUTTON = {
-    positive: 'primary_md',
-    negative: 'danger_md',
-    default: 'neutral_outline_md',
-};
-const CONFIRM_MODAL_ICON_MAP = {
-    positive: 'notificationOutline',
-    negative: 'warningOutline',
-    default: null,
-};
-const CONFIRM_MODAL_ICON_COLOR = {
-    positive: component_modal.modalTokens.modal.confirm.positive.icon,
-    negative: component_modal.modalTokens.modal.confirm.negative.icon,
-    default: '',
-};
-const TITLE_ICON_SIZE = Number(component_modal.modalTokens.modal.confirm.title.icon);
-const SUB_BUTTON_PRESET = 'neutral_outline_md';
-
-const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:12px;right:12px}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:22px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:32px}`;
-
-const SdConfirmModal = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.close = index.createEvent(this, "sdClose", 7);
-        this.cancel = index.createEvent(this, "sdCancel", 7);
-        this.ok = index.createEvent(this, "sdOk", 7);
-    }
-    get el() { return index.getElement(this); }
-    hasSlottedContent = false;
-    customContentRef;
-    slotObserver;
-    type = 'positive';
-    modalTitle = '';
-    titleClass = '';
-    topMessage = [];
-    bottomMessage = [];
-    mainButtonName;
-    mainButtonLabel = '확인';
-    subButtonLabel = '';
-    tagPreset = 'square_sm_grey';
-    tagLabel = '';
-    slotLabel = '';
-    tagContents;
-    close;
-    cancel;
-    ok;
-    componentWillLoad() {
-        this.syncHasSlottedContent();
-    }
-    componentDidLoad() {
-        if (typeof MutationObserver === 'undefined')
-            return;
-        this.slotObserver = new MutationObserver(() => this.syncHasSlottedContent());
-        this.slotObserver.observe(this.el, {
-            childList: true,
-            characterData: true,
-        });
-    }
-    componentDidRender() {
-        if (this.customContentRef && this.tagContents instanceof HTMLElement) {
-            if (typeof this.customContentRef.replaceChildren === 'function') {
-                this.customContentRef.replaceChildren(this.tagContents);
-            }
-            else {
-                this.customContentRef.innerHTML = '';
-                this.customContentRef.appendChild(this.tagContents);
-            }
-        }
-    }
-    disconnectedCallback() {
-        this.slotObserver?.disconnect();
-    }
-    get resolvedMainButton() {
-        return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.type];
-    }
-    get hasTagContent() {
-        return !!(this.tagLabel || this.slotLabel);
-    }
-    get showContentBox() {
-        return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
-    }
-    syncHasSlottedContent() {
-        const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
-            node.classList.contains('sd-confirm-modal')) &&
-            (node.nodeType === Node.ELEMENT_NODE ||
-                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
-        if (hasSlottedContent !== this.hasSlottedContent) {
-            this.hasSlottedContent = hasSlottedContent;
-        }
-    }
-    render() {
-        const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
-        const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (index.h("div", { key: '5a81aa943cbaf554e665b5030c1c46e6aedc0a38', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: 'd4d48c22ce5cd3895adb6e48688907f7c9d4202a', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: 'da157d4699b67cb75d25ee8d5da6694e13b874e4', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: '4362cd4581cec25b4fd9b88206cc21f5ffa68ca9', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: '2169cdc63bc9affb0149e50f0fb94d08ec371bf5', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '3f51315daed6bf8bce81137d8621c26b1960dac3', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: '5826cd4b28b8b4c38f28bea030a43f32a2a4203e', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
-                this.customContentRef = el;
-            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: 'a28bacaafc973b8b5d8be998c49d4b203f7ecc19', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '791db1eb69ba9ef56fa0298d7539cde55b08e2ac', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: '08407e3d972c6828f58020be94aa81a93f5e0e8c', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button-v2", { key: '6ef6528e54d2fe81ad96a546512a8a49b17f67d5', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
-    }
-};
-SdConfirmModal.style = sdConfirmModalCss();
-
-exports.sd_confirm_modal = SdConfirmModal;

package/dist/cjs/sd-loading-spinner_3.cjs.entry.js

@@ -1,283 +0,0 @@
-'use strict';
-
-var index = require('./index-BQt-JC6r.js');
-var resolveColor = require('./resolveColor-LhfOKtTZ.js');
-var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
-var selectKeyboardNavigation = require('./select-keyboard-navigation-CErfIrGV.js');
-var index$1 = require('./index-BUvXpPc3.js');
-
-const sdLoadingSpinnerCss = () => `sd-loading-spinner{display:inline-flex;width:fit-content;height:fit-content;align-items:center}sd-loading-spinner .sd-loading-spinner{animation:sd-loading-spin 2s linear infinite;transform-origin:center center}sd-loading-spinner .sd-loading-spinner .path{animation:sd-loading-spin-path 1.5s ease-in-out infinite}@keyframes sd-loading-spin{0%{transform:rotate3d(0, 0, 1, 0deg)}25%{transform:rotate3d(0, 0, 1, 90deg)}50%{transform:rotate3d(0, 0, 1, 180deg)}75%{transform:rotate3d(0, 0, 1, 270deg)}100%{transform:rotate3d(0, 0, 1, 359deg)}}@keyframes sd-loading-spin-path{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}`;
-
-const SdLoadingSpinner = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    color = '#0075ff';
-    get resolvedColor() {
-        return resolveColor.resolveColor(this.color);
-    }
-    render() {
-        return (index.h(index.Fragment, { key: 'a86933f554042c2d4b18836d37bb762d17080202' }, index.h("svg", { key: 'd0f301366f4b28855bf609dc048fdc7d76fd0433', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: '64068446f4a6ec1892a00ca92da7a3f1f566891c', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
-    }
-};
-SdLoadingSpinner.style = sdLoadingSpinnerCss();
-
-const sdPaginationCss = () => `.sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #006AC1;border-radius:14px}.sd-pagination .append-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .append-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .append-btns button:hover{border:1px solid #006AC1;border-radius:14px}.sd-pagination .pagination-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;outline:none;border:none;cursor:pointer;height:26px;color:#555555;width:var(--pagination-btn-width, 26px)}.sd-pagination .pagination-btn--selected{background-color:#006AC1;color:white}.sd-pagination .pagination-btn:hover{border:1px solid #006AC1}.sd-pagination--simple .pagination-info{line-height:26px;display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.sd-pagination--simple .pagination-info .current-page,.sd-pagination--simple .pagination-info .last-page{padding:0 2px}`;
-
-const BUTTON_WIDTH = {
-    1: 26,
-    2: 36,
-    3: 42,
-    4: 50,
-    5: 58,
-};
-const PER_PAGE = 10;
-const SdPagination = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.pageChange = index.createEvent(this, "sdPageChange", 7);
-    }
-    currentPage = 1;
-    lastPage = 1;
-    simple = false;
-    pageChange;
-    get paginationClasses() {
-        const classes = ['sd-pagination'];
-        if (this.simple) {
-            classes.push('sd-pagination--simple');
-        }
-        return classes.join(' ');
-    }
-    get pageNumbers() {
-        const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
-        const end = Math.min(start + PER_PAGE - 1, this.lastPage);
-        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-    }
-    get buttonWidth() {
-        const lastPageNum = this.pageNumbers.at(-1) ?? 1;
-        const maxPageLength = lastPageNum.toString().length;
-        return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
-    }
-    handlePageChange(page) {
-        if (page < 1 || page > this.lastPage)
-            return;
-        this.currentPage = page;
-        this.pageChange.emit(page);
-    }
-    handleGroupChange(direction) {
-        const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
-        const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
-        this.handlePageChange(newPage);
-    }
-    get isFirstGroup() {
-        return this.currentPage <= PER_PAGE;
-    }
-    get isLastGroup() {
-        const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
-        return startPageGroup + PER_PAGE - 1 >= this.lastPage;
-    }
-    renderPrevButtons() {
-        if (this.simple) {
-            if (this.currentPage <= 1)
-                return null;
-            return (index.h(index.Fragment, null, index.h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, index.h("sd-icon", { name: "chevronLeftEnd", size: "12", color: "#222222" })), index.h("button", { "aria-label": "Go to previous page", onClick: () => this.handlePageChange(this.currentPage - 1) }, index.h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
-        }
-        if (!this.isFirstGroup) {
-            return (index.h(index.Fragment, null, index.h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, index.h("sd-icon", { name: "chevronLeftEnd", size: "12", color: "#222222" })), index.h("button", { "aria-label": "Go to previous page group", onClick: () => this.handleGroupChange('backward') }, index.h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
-        }
-    }
-    renderNextButtons() {
-        if (this.simple) {
-            if (this.currentPage >= this.lastPage)
-                return null;
-            return (index.h(index.Fragment, null, index.h("button", { "aria-label": "Go to next page", onClick: () => this.handlePageChange(this.currentPage + 1) }, index.h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), index.h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, index.h("sd-icon", { name: "chevronRightEnd", size: "12", color: "#222222" }))));
-        }
-        if (!this.isLastGroup) {
-            return (index.h(index.Fragment, null, index.h("button", { "aria-label": "Go to next page group", onClick: () => this.handleGroupChange('forward') }, index.h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), index.h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, index.h("sd-icon", { name: "chevronRightEnd", size: "12", color: "#222222" }))));
-        }
-    }
-    render() {
-        return (index.h("div", { key: '910b6487f1d2b5581116a19e4bdf4514fe961922', class: this.paginationClasses }, index.h("div", { key: '1109809ea6c19088617f3ed4e3c878e60071084f', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
-                'pagination-btn': true,
-                'pagination-btn--selected': this.currentPage === n,
-            }, disabled: this.currentPage === n, style: {
-                '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '10a0645cba99193a64fbe1f2df90bef9b19da8d5', class: "append-btns" }, this.renderNextButtons())));
-    }
-};
-SdPagination.style = sdPaginationCss();
-
-const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
-
-const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
-    constructor(hostRef) {
-        super();
-        index.registerInstance(this, hostRef);
-        this.update = index.createEvent(this, "sdUpdate", 7);
-        this.dropDownShow = index.createEvent(this, "sdDropDownShow", 7);
-    }
-    get el() { return index.getElement(this); }
-    // props
-    value = null;
-    options = [];
-    placeholder = '선택';
-    optionPlaceholder = '선택지가 없습니다.';
-    width = '200px';
-    dropdownHeight = '260px';
-    autoFocus = false;
-    disabled = false;
-    clearable = false;
-    searchable = false;
-    // props - label
-    label = '';
-    addonLabel = '';
-    icon = undefined;
-    labelTooltip = '';
-    labelTooltipProps = null;
-    // props - form
-    rules = [];
-    error = false;
-    // props - custom slots
-    optionRenderer;
-    // states
-    isOpen = false;
-    itemIndex = -1;
-    isScrolled = false;
-    // events
-    update;
-    dropDownShow;
-    selectRef;
-    triggerRef;
-    formField;
-    filteredOptions = [];
-    dropDownWidth = '200px';
-    name = index$1.nanoid();
-    async sdOpen() {
-        this.isOpen = true;
-    }
-    async sdValidate() {
-        this.formField?.sdValidate();
-    }
-    async sdReset() {
-        this.formField?.sdReset();
-    }
-    async sdResetValidate() {
-        this.formField?.sdResetValidation();
-    }
-    async sdFocus() {
-        this.formField?.sdFocus();
-    }
-    async isOpenChanged() {
-        // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
-        this.onDropdownToggle(this.isOpen);
-        this.dropDownShow?.emit({ isOpen: this.isOpen });
-        if (this.isOpen === false) {
-            await this.formField?.sdValidate();
-        }
-    }
-    componentWillLoad() {
-        this.filteredOptions = this.options;
-        this.dropDownWidth = this.width;
-        this.initializeEvent();
-    }
-    componentDidLoad() {
-        if (this.autoFocus) {
-            this.selectRef?.focus();
-        }
-    }
-    // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
-    componentDidRender() {
-        const trigger = this.triggerRef;
-        const rect = trigger?.getBoundingClientRect();
-        this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
-    }
-    disconnectedCallback() {
-        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
-    }
-    handleDocumentClick(event) {
-        if (!this.selectRef?.contains(event.target)) {
-            this.isOpen = false;
-        }
-    }
-    handleDocumentKeydown(keyboardEvent) {
-        keyboardEvent.stopPropagation();
-        const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
-        if (!targetKey.includes(keyboardEvent.key))
-            return;
-        keyboardEvent.preventDefault();
-        switch (keyboardEvent.key) {
-            case 'ArrowDown':
-            case 'ArrowUp':
-                const keyboardNavigation = new selectKeyboardNavigation.SelectKeyboardNavigation(this.searchable, this.filteredOptions);
-                const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
-                this.itemIndex = nextIndex;
-                break;
-            case 'Enter':
-                const selectedOption = this.filteredOptions[this.itemIndex];
-                if (selectedOption && !selectedOption.disabled) {
-                    this.value = selectedOption.value;
-                    this.isOpen = false;
-                }
-                break;
-            case 'Escape':
-                this.isOpen = false;
-                break;
-        }
-    }
-    getSelectedOption() {
-        return this.options.find(option => option.value === this.value);
-    }
-    closeDropdown() {
-        this.isOpen = false;
-    }
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        if (!this.disabled) {
-            this.isOpen = !this.isOpen;
-            this.dropDownShow?.emit({ isOpen: this.isOpen });
-        }
-    };
-    handleOptionClick = (detail) => {
-        const { option, event } = detail;
-        event.stopPropagation();
-        if (!option.disabled) {
-            this.value = option.value;
-            this.isOpen = false;
-            const selectedOption = this.getSelectedOption();
-            this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
-        }
-    };
-    render() {
-        return (index.h("sd-field", { key: '33f8a4e75ab20389213be5643f479b806e8e78c3', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '148f21e1a19cf4f4b9e61b4192d631d85dbc57a4', class: {
-                'sd-select': true,
-                'sd-select--disabled': this.disabled,
-                'sd-select--error': !!this.error,
-                'sd-select--label': !!this.label,
-            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
-    }
-    renderTrigger() {
-        const selectedOption = this.getSelectedOption();
-        return (index.h("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, index.h("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (index.h("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: async (event) => {
-                event.stopPropagation();
-                this.value = null;
-                await this.formField?.sdValidate();
-            } })), index.h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
-    }
-    renderDropdown() {
-        if (this.isOpen === false)
-            return null;
-        const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||
-            this.selectRef);
-        return (index.h("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, index.h("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
-    }
-    static get watchers() { return {
-        "isOpen": [{
-                "isOpenChanged": 0
-            }]
-    }; }
-};
-SdSelect.style = sdSelectCss();
-
-exports.sd_loading_spinner = SdLoadingSpinner;
-exports.sd_pagination = SdPagination;
-exports.sd_select = SdSelect;

package/dist/cjs/sd-radio-button-group.cjs.entry.js

@@ -1,57 +0,0 @@
-'use strict';
-
-var index = require('./index-BQt-JC6r.js');
-
-const sdRadioButtonGroupCss = () => `sd-radio-button-group{display:inline-flex;width:fit-content;height:fit-content}sd-radio-button-group .sd-radio-button-group{display:inline-flex;flex-flow:row nowrap;gap:0}sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option{display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #CCCCCC;background-color:white;color:#333333;font-weight:400;transition:all 0.2s ease;position:relative;-webkit-user-select:none;user-select:none}sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option input{display:none}sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option:not(:first-child){margin-left:-1px}sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option:first-child{border-radius:4px 0 0 4px}sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option:last-child{border-radius:0 4px 4px 0}sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option:only-child{border-radius:4px}sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option::after{content:attr(data-label);position:absolute;font-weight:400;transition:font-weight 0.2s ease}sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--selected):hover{background-color:#0075FF;color:white;border-color:#0075FF;z-index:2}sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--selected):hover::after{font-weight:500}sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--selected{border-color:#0075FF;color:#0075FF;background-color:white;z-index:1}sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--disabled{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed}sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option:has(input:disabled){cursor:not-allowed}sd-radio-button-group .sd-radio-button-group__label{-webkit-user-select:none;user-select:none;font-weight:500;visibility:hidden}sd-radio-button-group .sd-radio-button-group--sm .sd-radio-button-group__option{padding:4px 12px;font-size:12px;line-height:20px}sd-radio-button-group .sd-radio-button-group--md .sd-radio-button-group__option{padding:4px 20px;font-size:16px;line-height:26px}`;
-
-const SdRadioButtonGroup = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.change = index.createEvent(this, "sdUpdate", 7);
-    }
-    value;
-    options = [];
-    size = 'md';
-    disabled = false;
-    name;
-    change;
-    handleRadioChange = (optionValue, optionDisabled) => {
-        if (this.disabled || optionDisabled)
-            return;
-        this.value = optionValue;
-        this.change.emit(optionValue);
-    };
-    isOptionSelected(option) {
-        return this.value === option.value;
-    }
-    isOptionDisabled(option) {
-        return this.disabled || !!option.disabled;
-    }
-    getButtonClasses(option) {
-        const classes = [
-            'sd-radio-button-group__option',
-            this.isOptionSelected(option)
-                ? 'sd-radio-button-group__option--selected'
-                : 'sd-radio-button-group__option--unselected',
-        ];
-        if (this.isOptionDisabled(option)) {
-            classes.push('sd-radio-button-group__option--disabled');
-        }
-        return classes.join(' ');
-    }
-    getGroupClasses() {
-        const classes = ['sd-radio-button-group', `sd-radio-button-group--${this.size}`];
-        return classes.join(' ');
-    }
-    groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;
-    render() {
-        return (index.h("div", { key: '14c605d7b034dd83a33cdf34f58bf77201dfc74f', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
-            const isSelected = this.isOptionSelected(option);
-            const isDisabled = this.isOptionDisabled(option);
-            return (index.h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, index.h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && index.h("span", { class: "sd-radio-button-group__label" }, option.label)));
-        })));
-    }
-};
-SdRadioButtonGroup.style = sdRadioButtonGroupCss();
-
-exports.sd_radio_button_group = SdRadioButtonGroup;

package/dist/cjs/sd-select-v2-list-item_2.cjs.entry.js

@@ -1,150 +0,0 @@
-'use strict';
-
-var index = require('./index-BQt-JC6r.js');
-var sdSelectV2_config = require('./sd-select-v2.config-7xBJQhvx.js');
-
-const sdSelectV2ListItemCss = () => `sd-select-v2-list-item{display:block}sd-select-v2-list-item .sd-select-v2-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-v2-list-item .sd-select-v2-list-item--selectable{cursor:pointer}sd-select-v2-list-item .sd-select-v2-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-v2-list-item .sd-select-v2-list-item--depth2-group{font-weight:500}sd-select-v2-list-item .sd-select-v2-list-item--focused.sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-item--group){font-weight:700;color:var(--list-item-bg-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused{color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-v2-list-item .sd-select-v2-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-list-item .sd-select-v2-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-v2-list-item .sd-select-v2-list-item--group.sd-select-v2-list-item--focused .sd-select-v2-list-item__count{color:#ffffff}sd-select-v2-list-item .sd-select-v2-list-item__checkbox{flex-shrink:0}`;
-
-const SdSelectV2ListItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.listItemClick = index.createEvent(this, "sdListItemClick", 7);
-    }
-    option;
-    depth = 1;
-    isSelected = false;
-    isFocused = false;
-    useCheckbox = false;
-    countInfo;
-    listItemClick;
-    get isGroup() {
-        return !!this.option.children;
-    }
-    get isSelectable() {
-        return !this.isGroup || this.useCheckbox;
-    }
-    get depthKey() {
-        if (this.depth <= 1)
-            return 'depth1';
-        if (this.depth === 2)
-            return 'depth2';
-        return 'depth3';
-    }
-    get paddingLeft() {
-        return `${sdSelectV2_config.LIST_ITEM_LAYOUT.paddingLeft[this.depthKey]}px`;
-    }
-    handleClick = (e) => {
-        e.stopPropagation();
-        if (this.option.disabled || !this.isSelectable)
-            return;
-        this.listItemClick.emit(this.option);
-    };
-    handleCheckboxClick = (e) => {
-        e.stopPropagation();
-    };
-    handleCheckboxUpdate = (e) => {
-        e.stopPropagation();
-        if (this.option.disabled || !this.isSelectable)
-            return;
-        this.listItemClick.emit(this.option);
-    };
-    render() {
-        const isGroup = this.isGroup;
-        const isDepth1Group = isGroup && this.depth === 1;
-        const isDepth2Group = isGroup && this.depth === 2;
-        const cssVars = {
-            '--list-item-padding-y': `${sdSelectV2_config.LIST_ITEM_LAYOUT.paddingY}px`,
-            '--list-item-padding-left': this.paddingLeft,
-            '--list-item-padding-right': `${sdSelectV2_config.LIST_ITEM_LAYOUT.paddingRight}px`,
-            '--list-item-gap': `${sdSelectV2_config.LIST_ITEM_LAYOUT.gap}px`,
-            '--list-item-font-size': `${sdSelectV2_config.LIST_ITEM_TYPOGRAPHY.fontSize}px`,
-            '--list-item-line-height': `${sdSelectV2_config.LIST_ITEM_TYPOGRAPHY.lineHeight}px`,
-            '--list-item-font-weight': sdSelectV2_config.LIST_ITEM_TYPOGRAPHY.fontWeight,
-            '--list-item-bg': isDepth1Group
-                ? sdSelectV2_config.LIST_ITEM_COLORS.depth1.bg
-                : isDepth2Group
-                    ? sdSelectV2_config.LIST_ITEM_COLORS.depth2.bg
-                    : sdSelectV2_config.LIST_ITEM_COLORS.bg.default,
-            '--list-item-bg-hover': sdSelectV2_config.LIST_ITEM_COLORS.bg.hover,
-            '--list-item-color': sdSelectV2_config.LIST_ITEM_COLORS.content.default,
-            '--list-item-color-hover': sdSelectV2_config.LIST_ITEM_COLORS.content.hover,
-            '--list-item-color-disabled': sdSelectV2_config.LIST_ITEM_COLORS.content.disabled,
-        };
-        if (isDepth1Group) {
-            cssVars['--list-item-border-top'] = `${sdSelectV2_config.LIST_ITEM_COLORS.depth1.borderWidth}px solid ${sdSelectV2_config.LIST_ITEM_COLORS.depth1.border}`;
-        }
-        return (index.h("div", { key: '8cd297b8d4ff1a7ef5c64bcaefef9cc54b3de357', class: {
-                'sd-select-v2-list-item': true,
-                'sd-select-v2-list-item--group': isGroup,
-                'sd-select-v2-list-item--depth1-group': isDepth1Group,
-                'sd-select-v2-list-item--depth2-group': isDepth2Group,
-                'sd-select-v2-list-item--selected': this.isSelected === true,
-                'sd-select-v2-list-item--indeterminate': this.isSelected === null,
-                'sd-select-v2-list-item--focused': this.isFocused,
-                'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
-                'sd-select-v2-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '11597153f05d17fc172920a65d26d74b4b7aa239', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '1dc78dcbffc3f3826fac7a9a3b8aa300c3754de6', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '5b96136bc54b241359e60849ebd1e792eb749c0d', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
-    }
-};
-SdSelectV2ListItem.style = sdSelectV2ListItemCss();
-
-const sdSelectV2ListItemSearchCss = () => `sd-select-v2-list-item-search{display:block}sd-select-v2-list-item-search .sd-select-v2-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #CCCCCC;border-radius:4px;background:white}sd-select-v2-list-item-search .sd-select-v2-list-item-search__inner:focus-within{border-color:#0075FF}sd-select-v2-list-item-search .sd-select-v2-list-item-search__icon{flex-shrink:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input{flex:1;border:none;outline:none;font-size:12px;line-height:20px;color:#222222;background:transparent;min-width:0}sd-select-v2-list-item-search .sd-select-v2-list-item-search__input::placeholder{color:#AAAAAA}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:2px}sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear:hover{background:#F0F0F0}`;
-
-const SdSelectV2ListItemSearch = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.searchFilter = index.createEvent(this, "sdSearchFilter", 7);
-        this.searchFocus = index.createEvent(this, "sdSearchFocus", 7);
-    }
-    isScrolled = false;
-    searchText = '';
-    searchFilter;
-    searchFocus;
-    inputEl;
-    debounceTimer;
-    focusRafId;
-    componentDidLoad() {
-        requestAnimationFrame(() => {
-            this.focusRafId = requestAnimationFrame(() => {
-                this.inputEl?.focus();
-            });
-        });
-    }
-    async sdFocus() {
-        this.inputEl?.focus();
-    }
-    handleInput = (e) => {
-        this.searchText = e.target.value;
-        if (this.debounceTimer)
-            clearTimeout(this.debounceTimer);
-        this.debounceTimer = setTimeout(() => {
-            this.searchFilter.emit(this.searchText);
-        }, sdSelectV2_config.SEARCH_DEBOUNCE_MS);
-    };
-    handleClear = (e) => {
-        e.stopPropagation();
-        this.searchText = '';
-        if (this.debounceTimer)
-            clearTimeout(this.debounceTimer);
-        this.searchFilter.emit('');
-        this.inputEl?.focus();
-    };
-    disconnectedCallback() {
-        if (this.focusRafId)
-            cancelAnimationFrame(this.focusRafId);
-        if (this.debounceTimer)
-            clearTimeout(this.debounceTimer);
-    }
-    render() {
-        return (index.h("div", { key: '8ccebea10b658edba2c417893f2a939a7361ef1b', class: {
-                'sd-select-v2-list-item-search': true,
-                'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: '4007afb556220e746c2379f643afb38445345853', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: '1afc1ef8aa6f3d26ee1001212ac9ea7d0bf3d1e4', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: 'a32ddcc18a401217f1a624e544c56bd499b0f47e', ref: el => {
-                this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), this.searchText && (index.h("button", { key: '150d5aca71d6ac6277917177ed4e4e157e4ba33f', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.h("sd-icon", { key: 'f0397c023e5dd5972eb6dfd20f9fb1ac1027fb2f', name: "close", size: 12, color: "#888888" }))))));
-    }
-};
-SdSelectV2ListItemSearch.style = sdSelectV2ListItemSearchCss();
-
-exports.sd_select_v2_list_item = SdSelectV2ListItem;
-exports.sd_select_v2_list_item_search = SdSelectV2ListItemSearch;