@sellmate/design-system 1.0.16 → 1.0.18

package/dist/components/p-DjZ8vXCq.js

@@ -1,285 +0,0 @@
-import { p as proxyCustomElement, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-CXuU38Gz.js';
-import { n as nanoid } from './p-CCwNgVmC.js';
-import { d as defineCustomElement$b } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$a } from './p-Cd145I-2.js';
-import { d as defineCustomElement$9 } from './p-C2pN-_wD.js';
-import { d as defineCustomElement$8 } from './p-BdgLMKjb.js';
-import { d as defineCustomElement$7 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$6 } from './p-xfqZA_70.js';
-import { d as defineCustomElement$5 } from './p-D16-dM6f.js';
-import { d as defineCustomElement$4 } from './p-CkzAorp3.js';
-import { d as defineCustomElement$3 } from './p-Dv4dN3Y5.js';
-import { d as defineCustomElement$2 } from './p-CFHNnfIq.js';
-import { d as defineCustomElement$1 } from './p-CiNjpVRK.js';
-
-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 = /*@__PURE__*/ proxyCustomElement(class SdSelect extends BaseDropdownEvent {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.update = createEvent(this, "sdUpdate");
-        this.dropDownShow = createEvent(this, "sdDropDownShow");
-    }
-    get el() { return this; }
-    // props
-    value = null;
-    options = [];
-    placeholder = '선택';
-    optionPlaceholder = '옵션이 없습니다.';
-    width = '200px';
-    dropdownHeight = '260px';
-    autoFocus = false;
-    disabled = false;
-    clearable = false;
-    searchable = false;
-    // props - label
-    label = '';
-    insideLabel = false;
-    useLabelRequired = false;
-    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 = this.options;
-    dropDownWidth = this.width;
-    name = 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.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
-    }
-    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(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 (h("sd-field", { key: '3eecb395a34ace6342ea78c95775c2dee4332c6f', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '002ce6f8214c57f6bddcef82d5bf711d24b47d5c', 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 (h("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, h("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (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();
-            } })), 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 (h("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, 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"]
-    }; }
-    static get style() { return sdSelectCss(); }
-}, [768, "sd-select", {
-        "value": [1032],
-        "options": [1040],
-        "placeholder": [1],
-        "optionPlaceholder": [1, "option-placeholder"],
-        "width": [1],
-        "dropdownHeight": [1, "dropdown-height"],
-        "autoFocus": [4, "auto-focus"],
-        "disabled": [4],
-        "clearable": [4],
-        "searchable": [4],
-        "label": [1],
-        "insideLabel": [4, "inside-label"],
-        "useLabelRequired": [4, "use-label-required"],
-        "labelTooltip": [1, "label-tooltip"],
-        "labelTooltipProps": [16],
-        "rules": [16],
-        "error": [4],
-        "optionRenderer": [16],
-        "isOpen": [32],
-        "itemIndex": [32],
-        "isScrolled": [32],
-        "sdOpen": [64],
-        "sdValidate": [64],
-        "sdReset": [64],
-        "sdResetValidate": [64],
-        "sdFocus": [64]
-    }, undefined, {
-        "isOpen": ["isOpenChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-select", "sd-button", "sd-checkbox", "sd-field", "sd-floating-portal", "sd-icon", "sd-input", "sd-portal", "sd-select-dropdown", "sd-select-option", "sd-select-search-input", "sd-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-select":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdSelect);
-            }
-            break;
-        case "sd-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$b();
-            }
-            break;
-        case "sd-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$a();
-            }
-            break;
-        case "sd-field":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$9();
-            }
-            break;
-        case "sd-floating-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$8();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "sd-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "sd-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "sd-select-dropdown":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "sd-select-option":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "sd-select-search-input":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "sd-tooltip":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SdSelect as S, defineCustomElement as d };
-//# sourceMappingURL=p-DjZ8vXCq.js.map
-
-//# sourceMappingURL=p-DjZ8vXCq.js.map

package/dist/components/p-DjZ8vXCq.js.map

@@ -1 +0,0 @@
-{"file":"p-DjZ8vXCq.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/sd-select/sd-select.scss?tag=sd-select","src/components/sd-select/sd-select.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select {\n display: inline-flex;\n flex-flow: column nowrap;\n\n height: fit-content;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n  outline: none !important;\n }\n\n .sd-select {\n  width: 100%;\n\n  .sd-select__trigger {\n   padding: 4px 28px 4px 12px;\n   display: flex;\n   width: 100%;\n   height: 100%;\n   align-items: center;\n\n   .sd-select__value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: 20px;\n    font-size: 12px;\n    font-weight: 400;\n    text-align: left;\n   }\n\n   .sd-select__clear {\n    margin: 0 4px;\n    width: 8px;\n    height: 8px;\n    background-color: transparent;\n    outline: none;\n    border: none;\n   }\n  }\n\n  .sd-select__arrow {\n   position: absolute;\n   top: 8px;\n   right: 8px;\n   width: 12px;\n   height: 12px;\n   color: $grey_65;\n   transition: transform 0.3s ease;\n   margin-left: 8px;\n\n   &--open {\n    transform: rotate(180deg);\n   }\n  }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n State,\n h,\n Element,\n Watch,\n Method,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { Rule } from '../../components';\nimport { nanoid } from 'nanoid/non-secure';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdUpdate: {\n  value: string | number | null;\n  option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdUpdate: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - label\n @Prop() label: string = '';\n @Prop() insideLabel: boolean = false;\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n // props - form\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n name = nanoid();\n\n @Method()\n async sdOpen() {\n  this.isOpen = true;\n }\n\n @Method()\n async sdValidate() {\n  this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n  this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n  this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n  this.formField?.sdFocus();\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n  this.onDropdownToggle(this.isOpen);\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n  if (this.isOpen === false) {\n   await this.formField?.sdValidate();\n  }\n }\n\n componentWillLoad() {\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n  if (this.autoFocus) {\n   this.selectRef?.focus();\n  }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n  const trigger = this.triggerRef;\n  const rect = trigger?.getBoundingClientRect();\n  this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n protected handleDocumentClick(event: Event): void {\n  if (!this.selectRef?.contains(event.target as Node)) {\n   this.isOpen = false;\n  }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n  keyboardEvent.stopPropagation();\n  const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n  if (!targetKey.includes(keyboardEvent.key)) return;\n\n  keyboardEvent.preventDefault();\n  switch (keyboardEvent.key) {\n   case 'ArrowDown':\n   case 'ArrowUp':\n    const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n    const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n    this.itemIndex = nextIndex;\n    break;\n   case 'Enter':\n    const selectedOption = this.filteredOptions[this.itemIndex];\n    if (selectedOption && !selectedOption.disabled) {\n     this.value = selectedOption.value;\n     this.isOpen = false;\n    }\n    break;\n   case 'Escape':\n    this.isOpen = false;\n    break;\n  }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n  return this.options.find(option => option.value === this.value);\n }\n\n closeDropdown() {\n  this.isOpen = false;\n }\n\n handleTriggerClick = (event: Event) => {\n  event.stopPropagation();\n\n  if (!this.disabled) {\n   this.isOpen = !this.isOpen;\n   this.dropDownShow?.emit({ isOpen: this.isOpen });\n  }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n  const { option, event } = detail;\n  event.stopPropagation();\n\n  if (!option.disabled) {\n   this.value = option.value;\n   this.isOpen = false;\n\n   const selectedOption = this.getSelectedOption();\n   this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n  }\n };\n\n render() {\n  return (\n   <sd-field\n    label={this.label}\n    name={this.name}\n    rules={this.rules}\n    error={this.error}\n    disabled={this.disabled}\n    useLabelRequired={this.useLabelRequired}\n    insideLabel={this.insideLabel}\n    labelTooltip={this.labelTooltip}\n    labelTooltipProps={this.labelTooltipProps}\n    ref={el => (this.formField = el)}\n   >\n    <div\n     class={{\n      'sd-select': true,\n      'sd-select--disabled': this.disabled,\n      'sd-select--error': !!this.error,\n      'sd-select--label': !!this.label,\n     }}\n     ref={el => (this.selectRef = el)}\n    >\n     {this.renderTrigger()}\n     {this.renderDropdown()}\n    </div>\n   </sd-field>\n  );\n }\n\n private renderTrigger() {\n  const selectedOption = this.getSelectedOption();\n  return (\n   <div\n    class=\"sd-select__trigger\"\n    tabindex={this.disabled ? -1 : 0}\n    onClick={this.handleTriggerClick}\n    ref={el => (this.triggerRef = el)}\n   >\n    <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n    {this.clearable && selectedOption && !this.disabled && (\n     <sd-icon\n      key=\"clear-icon\"\n      name=\"close\"\n      size={10}\n      color=\"#888\"\n      class=\"sd-select__clear\"\n      onClick={async event => {\n       event.stopPropagation();\n       this.value = null;\n       await this.formField?.sdValidate();\n      }}\n     ></sd-icon>\n    )}\n\n    <sd-icon\n     key=\"arrow-icon\"\n     name=\"arrowDown\"\n     color=\"#888\"\n     class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n    ></sd-icon>\n   </div>\n  );\n }\n\n private renderDropdown() {\n  if (this.isOpen === false) return null;\n\n  const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||\n   this.selectRef) as HTMLElement;\n\n  return (\n   <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n    <sd-select-dropdown\n     value={this.value}\n     options={this.options}\n     itemIndex={this.itemIndex}\n     width={this.dropDownWidth}\n     dropdownHeight={this.dropdownHeight}\n     searchable={this.searchable}\n     optionPlaceholder={this.optionPlaceholder}\n     onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n     onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n    ></sd-select-dropdown>\n   </sd-portal>\n  );\n }\n}\n"],"version":3}

package/dist/components/p-Dv4dN3Y5.js

@@ -1,97 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { d as defineCustomElement$2 } from './p-Cd145I-2.js';
-import { d as defineCustomElement$1 } from './p-zvhzq4Sw.js';
-
-const sdSelectOptionCss = () => `sd-select-option{display:block;height:fit-content;line-height:0}sd-select-option .sd-select__option{display:flex;padding:4px 12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option .sd-select__option__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option .sd-select__option--focused{background-color:#e6f1ff}sd-select-option .sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox),sd-select-option .sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox){color:#0075ff;font-weight:700}sd-select-option .sd-select__option--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option .sd-select__option:hover:not(.sd-select__option--disabled){background-color:#0075ff;color:white}`;
-
-const SdSelectOption = /*@__PURE__*/ proxyCustomElement(class SdSelectOption extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.optionClick = createEvent(this, "optionClick");
-    }
-    get el() { return this; }
-    option;
-    index;
-    isSelected = false;
-    isFocused = false;
-    optionStyle;
-    disabled = false;
-    useCheckbox = false;
-    isHovered = false;
-    async sdIsDisabled() {
-        return !!this.option.disabled;
-    }
-    optionClick;
-    handleClick = (event) => {
-        event.stopPropagation();
-        if (!this.option.disabled && !this.disabled) {
-            this.optionClick.emit({
-                option: this.option,
-                index: this.index,
-                event,
-            });
-        }
-    };
-    render() {
-        return (h("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', class: {
-                'sd-select__option': true,
-                'sd-select__option--selected': this.isSelected,
-                'sd-select__option--disabled': !!this.option.disabled,
-                'sd-select__option--focused': this.isFocused,
-                'sd-select__option--use-checkbox': this.useCheckbox,
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: this.handleClick }, this.useCheckbox ? (h("div", { class: "sd-select__option__checkbox-wrapper" }, h("sd-checkbox", { value: this.isSelected, disabled: this.option.disabled,
-            //   checkboxStyle={
-            //    !this.isSelected
-            //     ? { borderColor: '#888' }
-            //     : this.isHovered
-            //       ? { borderColor: 'white' }
-            //       : { borderColor: '#0075ff' }
-            //   }
-            onClick: e => {
-                e.preventDefault();
-                this.handleClick(e);
-            } }), h("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label)));
-    }
-    static get style() { return sdSelectOptionCss(); }
-}, [768, "sd-select-option", {
-        "option": [16],
-        "index": [2],
-        "isSelected": [4, "is-selected"],
-        "isFocused": [4, "is-focused"],
-        "optionStyle": [16],
-        "disabled": [4],
-        "useCheckbox": [4, "use-checkbox"],
-        "isHovered": [32],
-        "sdIsDisabled": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-select-option", "sd-checkbox", "sd-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-select-option":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdSelectOption);
-            }
-            break;
-        case "sd-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SdSelectOption as S, defineCustomElement as d };
-//# sourceMappingURL=p-Dv4dN3Y5.js.map
-
-//# sourceMappingURL=p-Dv4dN3Y5.js.map

package/dist/components/p-Dv4dN3Y5.js.map

@@ -1 +0,0 @@
-{"file":"p-Dv4dN3Y5.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,8zBAA8zB,CAAC;;MCOn1B,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAGlB,IAAA,MAAM;AACN,IAAA,KAAK;IACL,UAAU,GAAY,KAAK;IAC3B,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAE3B,SAAS,GAAY,KAAK;AAGnC,IAAA,MAAM,YAAY,GAAA;AACjB,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;;AAGrB,IAAA,WAAW;AAMZ,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;QAC3C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;;AAEJ,KAAC;IAED,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,mBAAmB,EAAE,IAAI;gBACzB,6BAA6B,EAAE,IAAI,CAAC,UAAU;AAC9C,gBAAA,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBACrD,4BAA4B,EAAE,IAAI,CAAC,SAAS;gBAC5C,iCAAiC,EAAE,IAAI,CAAC,WAAW;AACnD,aAAA,EACD,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,EACX,YAAA,EAAA,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,EAExB,EAAA,IAAI,CAAC,WAAW,IAChB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qCAAqC,EAAA,EAC/C,CAAA,CAAA,aAAA,EAAA,EACC,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;;;;;;;;YAQ9B,OAAO,EAAE,CAAC,IAAG;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;AACpB,aAAC,EACa,CAAA,EACf,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAE,EAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,CAC3D,KAEN,IAAI,CAAC,MAAM,CAAC,KAAK,CACjB,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-option/sd-select-option.scss?tag=sd-select-option","src/components/sd-select/sd-select-option/sd-select-option.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-option {\n display: block;\n height: fit-content;\n line-height: 0;\n .sd-select__option {\n  display: flex;\n  padding: 4px 12px;\n  font-size: 12px;\n  line-height: 20px;\n  cursor: pointer;\n\n  &__checkbox-wrapper {\n   display: flex;\n   width: 100%;\n   column-gap: 8px;\n   align-items: center;\n   overflow: hidden;\n   white-space: nowrap;\n   text-overflow: ellipsis;\n  }\n\n  &--focused {\n   background-color: $brilliantblue_20;\n  }\n\n  &--selected,\n  &--focused {\n   &:not(:hover):not(.sd-select__option--use-checkbox) {\n    color: $brilliantblue_75;\n    font-weight: 700;\n   }\n  }\n\n  &--disabled {\n   color: $grey_55;\n   cursor: not-allowed;\n  }\n\n  &:hover {\n   &:not(.sd-select__option--disabled) {\n    background-color: $brilliantblue_75;\n    color: white;\n   }\n  }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport type { SelectOption } from '../../../types/select';\n\n@Component({\n tag: 'sd-select-option',\n styleUrl: 'sd-select-option.scss',\n})\nexport class SdSelectOption {\n @Element() el!: HTMLElement;\n\n @Prop() option!: SelectOption;\n @Prop() index!: number;\n @Prop() isSelected: boolean = false;\n @Prop() isFocused: boolean = false;\n @Prop() optionStyle?: { [key: string]: string };\n @Prop() disabled: boolean = false;\n @Prop() useCheckbox: boolean = false;\n\n @State() isHovered: boolean = false;\n\n @Method()\n async sdIsDisabled(): Promise<boolean> {\n  return !!this.option.disabled;\n }\n\n @Event() optionClick!: EventEmitter<{\n  option: SelectOption;\n  index: number;\n  event: MouseEvent;\n }>;\n\n private handleClick = (event: MouseEvent) => {\n  event.stopPropagation();\n\n  if (!this.option.disabled && !this.disabled) {\n   this.optionClick.emit({\n    option: this.option,\n    index: this.index,\n    event,\n   });\n  }\n };\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select__option': true,\n     'sd-select__option--selected': this.isSelected,\n     'sd-select__option--disabled': !!this.option.disabled,\n     'sd-select__option--focused': this.isFocused,\n     'sd-select__option--use-checkbox': this.useCheckbox,\n    }}\n    onMouseEnter={() => (this.isHovered = true)}\n    onMouseLeave={() => (this.isHovered = false)}\n    style={this.optionStyle}\n    data-index={this.index}\n    onClick={this.handleClick}\n   >\n    {this.useCheckbox ? (\n     <div class=\"sd-select__option__checkbox-wrapper\">\n      <sd-checkbox\n       value={this.isSelected}\n       disabled={this.option.disabled}\n       //   checkboxStyle={\n       //    !this.isSelected\n       //     ? { borderColor: '#888' }\n       //     : this.isHovered\n       //       ? { borderColor: 'white' }\n       //       : { borderColor: '#0075ff' }\n       //   }\n       onClick={e => {\n        e.preventDefault();\n        this.handleClick(e);\n       }}\n      ></sd-checkbox>\n      <span class=\"sd-select__option-label\">{this.option.label}</span>\n     </div>\n    ) : (\n     this.option.label\n    )}\n   </div>\n  );\n }\n}\n"],"version":3}

package/dist/components/p-GS-rEltm.js

@@ -1,41 +0,0 @@
-import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-CR2Jbl0B.js';
-import { r as resolveColor } from './p-DcGvp3RM.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 = /*@__PURE__*/ proxyCustomElement(class SdLoadingSpinner extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    color = '#0075ff';
-    get resolvedColor() {
-        return resolveColor(this.color);
-    }
-    render() {
-        return (h(Fragment, { key: 'c3b3448fcc65334af3246f80157b195ec5595afe' }, h("svg", { key: '24701b65d17e56434cf46b72dbd5acec208b5dc8', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: 'e19c68c082348d36eecd05fa561eee91182349f2', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
-    }
-    static get style() { return sdLoadingSpinnerCss(); }
-}, [768, "sd-loading-spinner", {
-        "color": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-loading-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-loading-spinner":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdLoadingSpinner);
-            }
-            break;
-    } });
-}
-
-export { SdLoadingSpinner as S, defineCustomElement as d };
-//# sourceMappingURL=p-GS-rEltm.js.map
-
-//# sourceMappingURL=p-GS-rEltm.js.map

package/dist/components/p-GS-rEltm.js.map

@@ -1 +0,0 @@
-{"file":"p-GS-rEltm.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,qtBAAqtB,CAAC;;MCO5uB,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;IACpB,KAAK,GAAY,SAAS;AAElC,IAAA,IAAY,aAAa,GAAA;AACxB,QAAA,OAAO,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGhC,MAAM,GAAA;QACL,QACC,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACR,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EAEpC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAC,MAAM,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EAAA,mBAAA,EACE,IAAI,EAAA,CACb,CACL,CACI;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-loading-spinner/sd-loading-spinner.scss?tag=sd-loading-spinner","src/components/sd-loading-spinner/sd-loading-spinner.tsx"],"sourcesContent":["sd-loading-spinner {\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n align-items: center;\n\n .sd-loading-spinner {\n  animation: sd-loading-spin 2s linear infinite;\n  transform-origin: center center;\n  .path {\n   animation: sd-loading-spin-path 1.5s ease-in-out infinite;\n  }\n\n  @keyframes sd-loading-spin {\n   0% {\n    transform: rotate3d(0, 0, 1, 0deg);\n   }\n   25% {\n    transform: rotate3d(0, 0, 1, 90deg);\n   }\n   50% {\n    transform: rotate3d(0, 0, 1, 180deg);\n   }\n   75% {\n    transform: rotate3d(0, 0, 1, 270deg);\n   }\n   100% {\n    transform: rotate3d(0, 0, 1, 359deg);\n   }\n  }\n\n  @keyframes sd-loading-spin-path {\n   0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n   }\n   50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n   }\n\n   100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n   }\n  }\n }\n}\n","import { Component, Fragment, Prop, h } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\n@Component({\n tag: 'sd-loading-spinner',\n styleUrl: 'sd-loading-spinner.scss',\n})\nexport class SdLoadingSpinner {\n @Prop() color?: string = '#0075ff';\n\n private get resolvedColor(): string {\n  return resolveColor(this.color);\n }\n\n render() {\n  return (\n   <Fragment>\n    <svg\n     class=\"sd-loading-spinner\"\n     width=\"72px\"\n     height=\"72px\"\n     viewBox=\"25 25 50 50\"\n     style={{ color: this.resolvedColor }}\n    >\n     <circle\n      class=\"path\"\n      cx=\"50\"\n      cy=\"50\"\n      r=\"20\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"5\"\n      stroke-miterlimit=\"10\"\n     ></circle>\n    </svg>\n   </Fragment>\n  );\n }\n}\n"],"version":3}

package/dist/components/p-hwPQdJr0.js.map

@@ -1 +0,0 @@
-{"file":"p-hwPQdJr0.js","mappings":";;AAEa,MAAA,YAAY,GAAG,CAAC,KAAe,MAC3C,CACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,EAAA,EAET,CACC,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,iHAAiH,EACnH,IAAI,EAAC,cAAc,EAAA,CAClB,CACG;;;;","names":[],"sources":["src/components/assets/tooltipArrow.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\nexport const TooltipArrow = (props: SVGProps) => (\n <svg\n  width=\"16\"\n  height=\"12\"\n  viewBox=\"0 0 16 12\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  {...props}\n >\n  <path\n   d=\"M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z\"\n   fill=\"currentColor\"\n  />\n </svg>\n);\n"],"version":3}

package/dist/components/p-lbT0o9hE.js

@@ -1,92 +0,0 @@
-import { p as proxyCustomElement, H, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { r as resolveColor } from './p-DcGvp3RM.js';
-import { d as defineCustomElement$1 } from './p-zvhzq4Sw.js';
-
-const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}`;
-
-const ICON_SIZES = {
-    xs: 12,
-    sm: 16,
-    md: 20,
-    lg: 24,
-};
-const SdButton = /*@__PURE__*/ proxyCustomElement(class SdButton extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    get el() { return this; }
-    variant = 'primary';
-    size = 'sm';
-    color = '#025497';
-    label = '';
-    disabled = false;
-    type = 'button';
-    icon;
-    iconColor;
-    iconSize;
-    iconRight;
-    noHover = false;
-    class = '';
-    getButtonClasses() {
-        const classes = ['sd-button'];
-        classes.push(`sd-button--${this.variant}`);
-        classes.push(`sd-button--${this.size}`);
-        classes.push(`sd-button--color-${this.color}`);
-        if (this.disabled) {
-            classes.push('sd-button--disabled');
-        }
-        if (!this.label && (this.icon || this.iconRight)) {
-            classes.push('sd-button--icon-only');
-        }
-        if (this.noHover) {
-            classes.push('sd-button--no-hover');
-        }
-        return classes.join(' ');
-    }
-    render() {
-        const buttonClasses = this.getButtonClasses();
-        // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
-        const resolvedColor = resolveColor(this.color);
-        return (h("button", { key: '9b92f98528d06453492eab68bb6137bcaefbf656', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor } }, h("div", { key: 'a7dae76ec9112b95c2ee765cb2f9b0b4fe5f705a', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '71784bfcb2d08c77305a70311192dfc2c059ff0a', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: 'bc4b7dec430602765e98fa484d397b141686d8e7', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '26744c6ace43cbbfc9758a8fdf0174b49f24cd2c', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
-    }
-    static get style() { return sdButtonCss(); }
-}, [768, "sd-button", {
-        "variant": [1],
-        "size": [1],
-        "color": [1],
-        "label": [1],
-        "disabled": [4],
-        "type": [1],
-        "icon": [1],
-        "iconColor": [1, "icon-color"],
-        "iconSize": [2, "icon-size"],
-        "iconRight": [1, "icon-right"],
-        "noHover": [4, "no-hover"],
-        "class": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-button", "sd-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-button":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdButton);
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SdButton as S, defineCustomElement as d };
-//# sourceMappingURL=p-lbT0o9hE.js.map
-
-//# sourceMappingURL=p-lbT0o9hE.js.map

package/dist/components/p-lbT0o9hE.js.map

@@ -1 +0,0 @@
-{"file":"p-lbT0o9hE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-button/sd-button.scss?tag=sd-button","src/components/sd-button/sd-button.tsx"],"sourcesContent":["@import 'variables';\n\nsd-button {\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n}\n\n.sd-button {\n text-decoration: none;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.2s ease-in-out;\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n -webkit-user-select: none;\n user-select: none;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n &--xs {\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 20px;\n  min-height: 24px;\n }\n &--sm {\n  padding: 0 12px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 20px;\n  min-height: 28px;\n }\n &--md {\n  padding: 0 20px;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 26px;\n  min-height: 34px;\n }\n &--lg {\n  padding: 0 28px;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 30px;\n  min-height: 62px;\n }\n &--primary {\n  background-color: var(--button-color);\n  color: white;\n  transition: filter 0.2s ease;\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: #000000;\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.25;\n  }\n }\n\n &--outline {\n  background: white;\n  border: 1px solid var(--button-color);\n  color: var(--button-color);\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: var(--button-color);\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.15;\n  }\n\n  .sd-button__content {\n   position: relative;\n   z-index: 1;\n  }\n }\n &--ghost {\n  background-color: transparent;\n  color: var(--button-color);\n  border-color: transparent;\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: var(--button-color);\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.15;\n  }\n\n  .sd-button__content {\n   position: relative;\n   z-index: 1;\n  }\n }\n &--disabled {\n  border: 1px solid $grey_45;\n  background: $grey_30;\n  color: $grey_65;\n  cursor: not-allowed !important;\n }\n &--icon-only {\n  padding: 0;\n  width: fit-content;\n  height: fit-content;\n  aspect-ratio: 1 / 1;\n }\n &--no-hover {\n  &:hover::before {\n   opacity: 0 !important;\n  }\n }\n\n .sd-button__content {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n\n  z-index: 1;\n  font-weight: 500;\n }\n}\n\n// /* Focus styles */\n// .sd-button:focus-visible {\n//  outline: 2px solid $primary;\n//  outline-offset: 2px;\n// }\n\n// /* High contrast mode support */\n// @media (prefers-contrast: high) {\n//  .sd-button {\n//   border-width: 2px;\n//  }\n// }\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\n xs: 12,\n sm: 16,\n md: 20,\n lg: 24,\n};\n\n@Component({\n tag: 'sd-button',\n styleUrl: 'sd-button.scss',\n})\nexport class SdButton {\n @Element() el!: HTMLElement;\n\n @Prop() variant?: ButtonVariant = 'primary';\n @Prop() size: ButtonSize = 'sm';\n @Prop() color: string = '#025497';\n @Prop() label: string = '';\n @Prop() disabled: boolean = false;\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n @Prop() icon?: IconName;\n @Prop() iconColor?: string;\n @Prop() iconSize?: number;\n @Prop() iconRight?: IconName;\n @Prop() noHover: boolean = false;\n @Prop() class: string = '';\n\n private getButtonClasses(): string {\n  const classes = ['sd-button'];\n\n  classes.push(`sd-button--${this.variant}`);\n  classes.push(`sd-button--${this.size}`);\n  classes.push(`sd-button--color-${this.color}`);\n\n  if (this.disabled) {\n   classes.push('sd-button--disabled');\n  }\n\n  if (!this.label && (this.icon || this.iconRight)) {\n   classes.push('sd-button--icon-only');\n  }\n\n  if (this.noHover) {\n   classes.push('sd-button--no-hover');\n  }\n\n  return classes.join(' ');\n }\n\n render() {\n  const buttonClasses = this.getButtonClasses();\n  // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\n  const resolvedColor = resolveColor(this.color);\n\n  return (\n   <button\n    class={`${buttonClasses} ${this.class}`}\n    type={this.type}\n    disabled={this.disabled}\n    style={{ '--button-color': resolvedColor }}\n   >\n    <div class=\"sd-button__content\">\n     {this.icon && (\n      <sd-icon\n       class=\"sd-button__icon sd-button__icon--left\"\n       name={this.icon}\n       size={this.iconSize ?? ICON_SIZES[this.size!]}\n       color={this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor)}\n      ></sd-icon>\n     )}\n\n     {this.label && <div class=\"sd-button__label\">{this.label}</div>}\n\n     {this.iconRight && (\n      <sd-icon\n       class=\"sd-button__icon sd-button__icon--right\"\n       name={this.iconRight}\n       size={ICON_SIZES[this.size!]}\n       color={this.variant === 'primary' ? '#fff' : resolvedColor}\n      ></sd-icon>\n     )}\n    </div>\n   </button>\n  );\n }\n}\n"],"version":3}