@sellmate/design-system 1.0.46 → 1.0.47

package/dist/cjs/sd-checkbox.cjs.entry.js

@@ -0,0 +1,181 @@
+'use strict';
+
+var index = require('./index-Qvv0fGgj.js');
+
+const checkbox = {
+	size: "16",
+	radius: "2",
+	borderWidth: "1",
+	gap: "8",
+	icon: "12",
+	typography: {
+		fontWeight: "400",
+		fontSize: "12",
+		lineHeight: "20"},
+	unchecked: {
+		bg: {
+			"default": "#FFFFFF",
+			hover: "#D9EAFF"
+		},
+		border: {
+			"default": "#AAAAAA",
+			hover: "#0075FF"
+		}
+	},
+	checked: {
+		bg: {
+			"default": "#0075FF"
+		},
+		icon: {
+			"default": "#FFFFFF",
+			disabled: "#888888"}},
+	label: {
+		"default": "#222222"},
+	bg: {
+		disabled: "#E1E1E1"
+	},
+	border: {
+		disabled: "#CCCCCC"
+	}
+};
+var checkboxTokens = {
+	checkbox: checkbox
+};
+
+const CHECKBOX_LAYOUT = {
+    size: checkboxTokens.checkbox.size,
+    radius: checkboxTokens.checkbox.radius,
+    borderWidth: checkboxTokens.checkbox.borderWidth,
+    gap: checkboxTokens.checkbox.gap,
+    iconSize: checkboxTokens.checkbox.icon,
+};
+const CHECKBOX_TYPOGRAPHY = {
+    fontSize: checkboxTokens.checkbox.typography.fontSize,
+    lineHeight: checkboxTokens.checkbox.typography.lineHeight,
+    fontWeight: checkboxTokens.checkbox.typography.fontWeight,
+};
+const CHECKBOX_COLORS = {
+    unchecked: {
+        bg: checkboxTokens.checkbox.unchecked.bg.default,
+        bgHover: checkboxTokens.checkbox.unchecked.bg.hover,
+        border: checkboxTokens.checkbox.unchecked.border.default,
+        borderHover: checkboxTokens.checkbox.unchecked.border.hover,
+    },
+    checked: {
+        bg: checkboxTokens.checkbox.checked.bg.default,
+        icon: checkboxTokens.checkbox.checked.icon.default,
+        iconDisabled: checkboxTokens.checkbox.checked.icon.disabled,
+    },
+    label: checkboxTokens.checkbox.label.default,
+    disabled: {
+        bg: checkboxTokens.checkbox.bg.disabled,
+        border: checkboxTokens.checkbox.border.disabled,
+    },
+};
+
+const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-line-height);line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-checkbox-gap);height:var(--sd-checkbox-line-height);max-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-checkbox .sd-checkbox>input:focus-visible+.sd-checkbox__bg{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-checkbox-checked-bg);outline:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border-color:var(--sd-checkbox-unchecked-border-hover);background:var(--sd-checkbox-unchecked-bg-hover)}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border-color:transparent;background:var(--sd-checkbox-disabled-bg)}sd-checkbox .sd-checkbox__bg{width:var(--sd-checkbox-size);height:var(--sd-checkbox-size);border-radius:var(--sd-checkbox-radius);border:var(--sd-checkbox-border-width) solid var(--sd-checkbox-unchecked-border);box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:var(--sd-checkbox-font-size);font-weight:var(--sd-checkbox-font-weight);color:var(--sd-checkbox-label-color);line-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border-color:var(--sd-checkbox-checked-bg);background:var(--sd-checkbox-checked-bg)}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:var(--sd-checkbox-unchecked-bg)}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}`;
+
+const SdCheckbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.update = index.createEvent(this, "sdUpdate");
+    }
+    get el() { return index.getElement(this); }
+    /** 현재 선택 상태 또는 배열 형태의 값 */
+    value;
+    /** 배열 모드에서의 개별 값 */
+    val;
+    /** 비활성화 여부 */
+    disabled = false;
+    /** 표시할 라벨 텍스트 */
+    label = '';
+    /** 내부 체크 상태 */
+    isChecked = false;
+    hasWarnedMissingVal = false;
+    inputEl;
+    /** 값 변경 이벤트 */
+    update;
+    componentWillLoad() {
+        this.updateCheckedState(this.value);
+    }
+    watchValueHandler(newValue) {
+        this.updateCheckedState(newValue);
+    }
+    get checkboxClasses() {
+        const classes = [
+            'sd-checkbox',
+            `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,
+        ];
+        if (this.disabled) {
+            classes.push('sd-checkbox--disabled');
+        }
+        return classes.join(' ');
+    }
+    updateCheckedState(value) {
+        if (value === null) {
+            this.isChecked = null;
+        }
+        else if (typeof value === 'boolean') {
+            this.isChecked = value;
+        }
+        else if (Array.isArray(value)) {
+            this.isChecked = this.val !== undefined && value.includes(this.val);
+        }
+        else {
+            this.isChecked = false;
+        }
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.isChecked === null;
+        }
+    }
+    handleChange = () => {
+        if (this.disabled)
+            return;
+        let newValue;
+        if (typeof this.value === 'boolean') {
+            newValue = !this.value;
+        }
+        else if (Array.isArray(this.value)) {
+            if (this.val === undefined && !this.hasWarnedMissingVal) {
+                console.warn('A "val" property is required when using an array for the "value" property.');
+                this.hasWarnedMissingVal = true;
+            }
+            const valueSet = new Set(this.value);
+            valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
+            newValue = Array.from(valueSet);
+        }
+        else {
+            newValue = !this.isChecked;
+        }
+        this.value = newValue;
+        this.update.emit(newValue);
+    };
+    render() {
+        const cssVars = {
+            '--sd-checkbox-size': `${CHECKBOX_LAYOUT.size}px`,
+            '--sd-checkbox-radius': `${CHECKBOX_LAYOUT.radius}px`,
+            '--sd-checkbox-border-width': `${CHECKBOX_LAYOUT.borderWidth}px`,
+            '--sd-checkbox-gap': `${CHECKBOX_LAYOUT.gap}px`,
+            '--sd-checkbox-font-size': `${CHECKBOX_TYPOGRAPHY.fontSize}px`,
+            '--sd-checkbox-line-height': `${CHECKBOX_TYPOGRAPHY.lineHeight}px`,
+            '--sd-checkbox-font-weight': CHECKBOX_TYPOGRAPHY.fontWeight,
+            '--sd-checkbox-unchecked-bg': CHECKBOX_COLORS.unchecked.bg,
+            '--sd-checkbox-unchecked-bg-hover': CHECKBOX_COLORS.unchecked.bgHover,
+            '--sd-checkbox-unchecked-border': CHECKBOX_COLORS.unchecked.border,
+            '--sd-checkbox-unchecked-border-hover': CHECKBOX_COLORS.unchecked.borderHover,
+            '--sd-checkbox-checked-bg': CHECKBOX_COLORS.checked.bg,
+            '--sd-checkbox-label-color': CHECKBOX_COLORS.label,
+            '--sd-checkbox-disabled-bg': CHECKBOX_COLORS.disabled.bg,
+            '--sd-checkbox-disabled-border': CHECKBOX_COLORS.disabled.border,
+        };
+        return (index.h("label", { key: 'b343ac293abfb6a7834cccc597cd30e56e3a161c', class: this.checkboxClasses, style: cssVars }, index.h("input", { key: '89d3c5ec214af16680f2111e5e85fcb228ff2223', type: "checkbox", ref: el => { this.inputEl = el; }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), index.h("div", { key: '8eef48a269cbbf8c479d60a53996b09cc4aa8f20', class: "sd-checkbox__bg" }, this.isChecked !== false ? (index.h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled ? CHECKBOX_COLORS.checked.iconDisabled : CHECKBOX_COLORS.checked.icon })) : null), this.label && index.h("span", { key: '43bf36ec3a3890f68ef699dbb73b48eb6a98451d', class: "sd-checkbox__label" }, this.label)));
+    }
+    static get watchers() { return {
+        "value": [{
+                "watchValueHandler": 0
+            }]
+    }; }
+};
+SdCheckbox.style = sdCheckboxCss();
+
+exports.sd_checkbox = SdCheckbox;

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

@@ -1,25 +1,7 @@
 'use strict';
 
 var index = require('./index-Qvv0fGgj.js');
-
-const modal = {
-	confirm: {
-		title: {
-			icon: "32"},
-		positive: {
-			icon: "#0075FF"
-		},
-		negative: {
-			icon: "#E30000"
-		}
-	},
-	close: {
-		size: "20",
-		color: "#888888"
-	}};
-var modalTokens = {
-	modal: modal
-};
+var component_modal = require('./component.modal-CtW5Gmy5.js');
 
 const CONFIRM_MODAL_DEFAULT_BUTTON = {
     positive: 'primary_md',
@@ -32,13 +14,13 @@ const CONFIRM_MODAL_ICON_MAP = {
     default: null,
 };
 const CONFIRM_MODAL_ICON_COLOR = {
-    positive: modalTokens.modal.confirm.positive.icon,
-    negative: modalTokens.modal.confirm.negative.icon,
+    positive: component_modal.modalTokens.modal.confirm.positive.icon,
+    negative: component_modal.modalTokens.modal.confirm.negative.icon,
     default: '',
 };
-const TITLE_ICON_SIZE = Number(modalTokens.modal.confirm.title.icon);
-const CLOSE_ICON_SIZE = Number(modalTokens.modal.close.size);
-const CLOSE_ICON_COLOR = modalTokens.modal.close.color;
+const TITLE_ICON_SIZE = Number(component_modal.modalTokens.modal.confirm.title.icon);
+const CLOSE_ICON_SIZE = Number(component_modal.modalTokens.modal.close.size);
+const CLOSE_ICON_COLOR = component_modal.modalTokens.modal.close.color;
 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:16px;right:16px;cursor:pointer}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}`;
@@ -47,6 +29,7 @@ const SdConfirmModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.close = index.createEvent(this, "sdClose");
+        this.cancel = index.createEvent(this, "sdCancel");
         this.ok = index.createEvent(this, "sdOk");
     }
     get el() { return index.getElement(this); }
@@ -66,6 +49,7 @@ const SdConfirmModal = class {
     slotLabel = '';
     tagContents;
     close;
+    cancel;
     ok;
     componentWillLoad() {
         this.syncHasSlottedContent();
@@ -114,9 +98,9 @@ const SdConfirmModal = class {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (index.h("div", { key: '9dd835c1020a29e99257690b5d4d6038b13fe5e4', class: "sd-confirm-modal" }, index.h("sd-icon", { key: '17fea9642aabb047a8017c37beffe3e0b64707c2', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '5198d65dbac64b483f63f8a65f7cad987a14e24b', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: '045887b2224ed46f4d6158a2d3ffc25261a0156d', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: '7f9ce8c5bef7a8f9ee580671ccdb79c093066ee3', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: 'ac533ca4a1dc011d0bbb0c5c72c14228f680741a', 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: '2fde04429ca9efb0b9ae30116e9a0fd7f57b904e', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (index.h("div", { key: '7f4965b642b3963fd3d0614b3e8b3fae8e8ae179', class: "sd-confirm-modal" }, index.h("sd-icon", { key: '4c2479d3afbc4c900dc4d329a8aaa04b6f520bb3', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: 'ec3f165135429b8a409e304bedff32897bd6566a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: 'd2aae4878396d9bd714db26847ecad677e7a4cfb', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: '76b9c1fcfaae36edbd56c4d494013829456def98', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '636b0c6ce6bcba2722fae64ed582d90ce4f25367', 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: '1000f4f7e2674025ce3d220461828ab95e28eea8', 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: '5f97a8bf91a60b553b21d80f4b133d2c79e97ba6', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '4cde2779f11b274d71b90dd75584f8ccd9d3044d', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: '9e64571f556c6cfdb9c69dc70e54a2f4bdec7bb6', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), index.h("sd-button-v2", { key: 'dd86f7cce973862d94e26910341995f743e1944b', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+            } })) : (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: '3c6c0141dc0807725b92e824ccdedf3609d46484', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: 'fc73a08c85231570f72a9899ffee5cbd0c8882ba', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: 'dcbf92525246d05e57896340c3ef5761a574a08f', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button-v2", { key: '146c0b3c0183773ba03c2bde150add46618f181b', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();

package/dist/cjs/sd-date-box.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var index = require('./index-Qvv0fGgj.js');
+
+const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
+
+const SdDateBox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.click = index.createEvent(this, "sdClick");
+        this.mouseOver = index.createEvent(this, "sdMouseOver");
+    }
+    date = null;
+    disabled = false;
+    selected = false;
+    isStartDate = false;
+    isEndDate = false;
+    isToday = false;
+    inRange = false;
+    type = '';
+    click;
+    mouseOver;
+    handleClickDate() {
+        if (this.disabled || !this.date)
+            return;
+        if (typeof this.date === 'string')
+            return;
+        this.click?.emit(this.date);
+    }
+    handleHoverDate() {
+        if (typeof this.date === 'string')
+            return;
+        this.mouseOver?.emit(this.date);
+    }
+    render() {
+        return (index.h("div", { key: 'b14dd7c9806828807cdfc232420a30c816ffbeb2', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+                'sd-date-box': true,
+                'sd-hoverable': !this.disabled || !this.selected || this.type === '',
+                'sd-date-box--disabled': this.disabled,
+                'sd-date-box--selected': this.selected,
+                'sd-date-box--today': this.isToday,
+                'sd-date-box--start-date': this.isStartDate,
+                'sd-date-box--end-date': this.isEndDate,
+                'sd-date-box--in-range': this.inRange,
+                'sd-date-box--type-start': this.type === 'start',
+                'sd-date-box--type-end': this.type === 'end',
+            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, index.h("div", { key: 'acb1a2d51d018913e39f8fd1fc54ab85c4ce6957', class: "sd-date-box__content" }, index.h("div", { key: '8c9445e4268cd254d76297ac1e775697d889f721', class: "sd-date-box__label" }, this.date))));
+    }
+};
+SdDateBox.style = sdDateBoxCss();
+
+exports.sd_date_box = SdDateBox;

package/dist/cjs/sd-date-picker.cjs.entry.js

@@ -37,7 +37,7 @@ const SdDatePicker = class {
         this.viewChange.emit(e.detail);
     };
     render() {
-        return (index.h("div", { key: '308b6e499027b7316199713cddb8253308cee41d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.h("sd-input", { key: '37afc5dd38a77e9e1a3c80df8c589cd1ee6f6185', ref: el => (this.inputEl = el), value: this.value, addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '91ca438a2ca3795d10a7671a6fc807eca11c4943', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '85bb2503ec3e9d928e572835a5a750a12972af70', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '9b8ccf203b013189df1ad9ecad9f5956a5dd7cef', class: "sd-date-picker__menu" }, index.h("sd-calendar", { key: 'b314b4c809cd4675d97892a5873fed8fdfb2b046', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
+        return (index.h("div", { key: '160bd9b2bbd9d223d4df341ed2fbba79c1701c13', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.h("sd-input", { key: 'cf7c72c144f1222308eb936a14d1786863019126', ref: el => (this.inputEl = el), value: this.value, addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '8651ba1d36749667f53e9f064b973cb336389ab3', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '6ee759cf5cbb0afc4cd8adf704a489ef6cffc8f9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '96c038fea5102ffd780fd296534cc294bd1c6912', class: "sd-date-picker__menu" }, index.h("sd-calendar", { key: 'bc8d14f98d5d56e6775f083e4096d1113c28a658', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
     }
 };
 SdDatePicker.style = sdDatePickerCss();

package/dist/cjs/sd-date-range-picker.cjs.entry.js

@@ -0,0 +1,203 @@
+'use strict';
+
+var index = require('./index-Qvv0fGgj.js');
+var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
+
+const addDays = (inputDate, days) => {
+    const [year, month, day] = inputDate.split('-').map(Number);
+    const date = new Date(year, month - 1, day); // month는 0부터 시작하므로 -1
+    // 날짜 계산
+    date.setDate(date.getDate() + days);
+    // yyyy-mm-dd 형식으로 변환
+    const resultYear = date.getFullYear();
+    const resultMonth = String(date.getMonth() + 1).padStart(2, '0');
+    const resultDay = String(date.getDate()).padStart(2, '0');
+    return `${resultYear}-${resultMonth}-${resultDay}`;
+};
+
+const sdDateRangePickerCss = () => `sd-date-range-picker.sc-sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .date-icon.sc-sd-date-range-picker{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-field__control.sc-sd-date-range-picker{min-width:210px}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{margin-left:17px !important}.sd-date-range-picker__menu.sc-sd-date-range-picker{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker .header-label.sc-sd-date-range-picker{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker{width:266px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.sc-sd-date-range-picker{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-prev.sc-sd-date-range-picker{left:5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-next.sc-sd-date-range-picker{right:5px;left:auto}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker .day.sc-sd-date-range-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-body.sc-sd-date-range-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .separator.sc-sd-date-range-picker{width:1px;background-color:#D8D8D8}`;
+
+const SdDateRangePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.update = index.createEvent(this, "sdUpdate");
+        this.viewChange = index.createEvent(this, "sdViewChange");
+    }
+    get el() { return index.getElement(this); }
+    value = ['', ''];
+    label;
+    selectable;
+    maxRange;
+    disabled = false;
+    placeholder = '';
+    isOpen = false;
+    dateRange = this.value;
+    hoverDate = '';
+    prevYear = Number(this.dateRange[0].split('-')[0]);
+    prevMonth = Number(this.dateRange[0].split('-')[1]);
+    update;
+    viewChange;
+    inputEl;
+    dateUtil = useDatePicker.useDatePicker();
+    tempDateRange = ['', ''];
+    componentWillLoad() {
+        this.syncFromValue(this.value);
+    }
+    onValueChange(newValue) {
+        this.dateRange = [...newValue];
+    }
+    syncFromValue(value) {
+        this.dateRange = [...value];
+        this.resetCalendarByDateRange(value);
+    }
+    /* ----------------------------------
+     * Calendar View Logic
+     * ---------------------------------- */
+    resetCalendarByDateRange(range) {
+        // this.dateRange = this.value;
+        const start = range[0] || useDatePicker.today;
+        const end = range[1] || start;
+        const [startYear, startMonth] = start.split('-').map(Number);
+        const [todayYear, todayMonth] = useDatePicker.today.split('-').map(Number);
+        if (end <= useDatePicker.today) {
+            // A. 완전 과거 검색(당월 포함X): 좌측 = 시작월 / 우측 = 종료월
+            this.prevYear = startYear;
+            this.prevMonth = startMonth;
+        }
+        else if (start < useDatePicker.today && end > useDatePicker.today) {
+            // B. 과거~미래 걸침(당월 포함O): 좌측 = 오늘의 달
+            this.prevYear = todayYear;
+            this.prevMonth = todayMonth;
+        }
+        else {
+            // C. 완전 미래 검색(당월 포함X): 좌측 = 시작월
+            this.prevYear = startYear;
+            this.prevMonth = startMonth;
+        }
+    }
+    get nextYear() {
+        return this.prevMonth === 12 ? this.prevYear + 1 : this.prevYear;
+    }
+    get nextMonth() {
+        return this.prevMonth === 12 ? 1 : this.prevMonth + 1;
+    }
+    get prevCalendar() {
+        return this.dateUtil.createCalendar(this.prevYear, this.prevMonth);
+    }
+    get nextCalendar() {
+        return this.dateUtil.createCalendar(this.nextYear, this.nextMonth);
+    }
+    setPrevYear(year) {
+        this.prevYear = year;
+    }
+    setPrevMonth(month) {
+        this.prevMonth = month;
+    }
+    updateYearMonth(type) {
+        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.prevYear, this.prevMonth, type);
+        this.setPrevYear(newYear);
+        this.setPrevMonth(newMonth);
+        this.viewChange.emit({ year: newYear, month: newMonth });
+    }
+    setHoverDate(date) {
+        this.hoverDate = date;
+    }
+    setDateRange(dateRange) {
+        this.dateRange = dateRange;
+    }
+    /* ----------------------------------
+     * UI Helpers
+     * ---------------------------------- */
+    formatDate(index, day) {
+        return this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, day);
+    }
+    getDateBoxType(date) {
+        const [start, end] = this.dateRange;
+        if (date === start)
+            return end ? 'start' : this.hoverDate < this.dateRange[0] ? 'end' : 'start';
+        if (date === end)
+            return 'end';
+        return '';
+    }
+    isDateInRange(date) {
+        const [start, end] = this.dateRange;
+        // 1. 날짜 범위가 완전히 선택된 경우
+        if (start && end) {
+            return date >= start && date <= end;
+        }
+        // 2. hover 상태의 날짜 범위를 확인
+        if (!this.hoverDate || !start || end) {
+            return false;
+        }
+        // 3. dateRange[0]과 hoverDate를 기준으로 범위 계산
+        const [from, to] = start <= this.hoverDate ? [start, this.hoverDate] : [this.hoverDate, start];
+        return date >= from && date <= to;
+    }
+    isDisabledDate(date) {
+        const [start, end] = this.dateRange;
+        if (this.maxRange && start && !end) {
+            const minDate = addDays(start, -this.maxRange);
+            const maxDate = addDays(start, this.maxRange);
+            return !(minDate <= date && date <= maxDate);
+        }
+        if (!this.selectable || !this.selectable[0] || !this.selectable[1]) {
+            return false;
+        }
+        return !(date >= this.selectable[0] && date <= this.selectable[1]);
+    }
+    /* ----------------------------------
+     * Interaction
+     * ---------------------------------- */
+    openMenu() {
+        if (this.disabled)
+            return;
+        this.tempDateRange = [...this.dateRange];
+        this.resetCalendarByDateRange(this.dateRange);
+        this.isOpen = true;
+    }
+    closeMenu = () => {
+        if (!this.dateRange[0] || !this.dateRange[1]) {
+            this.dateRange = [...this.tempDateRange];
+        }
+        this.isOpen = false;
+    };
+    handleDateClick(index, day) {
+        this.setHoverDate('');
+        const selectedDate = this.formatDate(index, day);
+        if (!this.dateRange[0] || !!this.dateRange[1] || selectedDate < this.dateRange[0]) {
+            this.setDateRange([selectedDate, '']);
+            return; // 아직 완료 아님
+        }
+        const newRange = [this.dateRange[0], selectedDate];
+        this.setDateRange(newRange);
+        this.value = newRange;
+        this.update.emit?.(newRange);
+        this.isOpen = false;
+    }
+    handleDateHover(index, day) {
+        const hoverDate = this.formatDate(index, day);
+        this.setHoverDate(hoverDate);
+    }
+    render() {
+        return (index.h("div", { key: 'ed71379abf9d60bfa21c9888ba0f84f543bc0fe2', class: {
+                'sd-date-range-picker': true,
+                'sd-date-range-picker--disabled': this.disabled,
+            } }, index.h("sd-input", { key: 'd9b4269ee29ddf23dd80b5bcad2ded0d5edae8a6', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'a30448daa738ee75925974735f7a9948a47761e1', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '553abd0af76848be54788518507fbf0cc20db111', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, index.h("div", { key: '152fb19e5c8dbd5e5f978b11868cc71b382255d8', class: "sd-date-range-picker__menu" }, index.h("div", { key: '5d290d39d6aa8cc0d3a4394ac2f1d4bc93428bb3', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: 'b20caad91457bda87690629aa3fc34d4d2c5a673', type: "button", name: "prev", title: "Previous", onClick: () => {
+                this.setPrevYear(this.prevYear - 1);
+                this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
+            } }, index.h("sd-icon", { key: '5f0e8014992b7269aed7d97a4a56263349c90afa', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: 'f324d84e338aa2779e471a123fc7b5220900389d', class: "header-label" }, this.prevYear), index.h("button", { key: '18e331eb0c8fe3cc1eba2b718433ca7f7ec17b3e', type: "button", name: "next", title: "Next", onClick: () => {
+                this.setPrevYear(this.prevYear + 1);
+                this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
+            } }, index.h("sd-icon", { key: '1ec935fbbb3ecbafb42df34905f62753dfd49da2', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '47af9712b96158741a3fed052f4b1eb7bca08eef', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
+            ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
+            : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), index.h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), index.h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (index.h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index$1, Number(day))), type: this.getDateBoxType(this.formatDate(index$1, Number(day))), isToday: useDatePicker.today === this.formatDate(index$1, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index$1, Number(day))), inRange: this.isDateInRange(this.formatDate(index$1, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index$1, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index$1, Number(day)), onSdClick: () => this.handleDateClick(index$1, Number(day)), onSdMouseOver: () => this.handleDateHover(index$1, Number(day)) }))))))))))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+SdDateRangePicker.style = sdDateRangePickerCss();
+
+exports.sd_date_range_picker = SdDateRangePicker;

package/dist/cjs/sd-dropdown-button.cjs.entry.js

@@ -246,7 +246,7 @@ const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (index.h("div", { key: 'bdaf7f90ca47cc650fb60ed95b7e6ddeb688feaf', class: "sd-dropdown-button" }, index.h("button", { key: 'eb31263b21ddcd07e6a59c17ddb88af6906136b4', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (index.h("div", { key: '7398f76731b0d11fffe9b4f5353630e59c183b66', class: "sd-dropdown-button" }, index.h("button", { key: '811a86ae4fcf25b76025f6e0168d5915a893edd9', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
@@ -257,10 +257,10 @@ const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_CONTENT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, index.h("span", { key: 'b9501cbab79d5472e9680528282191d97fb9c579', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: '83c6b1e937bb7f7d676561d607e8223d05897715', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: '58b1ed6195672372ecd180c9567bc74aeefb1db9', class: {
+            } }, index.h("span", { key: 'adcf634bd7c325ec746635c153edf4b9e3d7b677', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: '533dfeaf615784543c802b825e8640cd2c873de2', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: '200c1133e33e8c2cae4f20ff442ca247fef2764b', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, index.h("sd-icon", { key: 'd7dfe4aef651f4f55ed661f1d84850009a61bb2e', name: "arrowDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, index.h("sd-icon", { key: 'e8ebd083b1d3c1375eb51cf5e2757df3bbb759a5', name: "chevronDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/cjs/sd-file-picker.cjs.entry.js

@@ -100,15 +100,15 @@ const SdFilePicker = class {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (index.h("div", { key: '3133b2f12d79b36a0f21bbb1d93ae738f35611ce', class: {
+        return (index.h("div", { key: '70152265f5fc43ddcda4318545698a58ee116b67', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("input", { key: '56bad5fd0fbd58effe130828312a2b199a132e3b', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), index.h("sd-icon", { key: 'b1bba7f527e177a51939c98eefe0ca7b84dada7e', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { key: '3a8717611a8716c64a028e5f2c8ac1784797e68c', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("input", { key: '138e570a3660e8e79790da78a1527ff6eed8d313', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), index.h("sd-icon", { key: '1d81730bd5fd82dda6e73ae86a62e9c4c0e0470a', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { key: '4a433e8403beb6e953cd64726306df16e7560daa', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (index.h("sd-icon", { key: 'd05a21388823cc596d8c2f9e31f3fc39a2b84d09', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { key: '24c65a0b7743fa66d44d24cc12bfff46172d620e', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (index.h("sd-icon", { key: 'be2c64f7d28d6fe5c4146508f1544a3bb9fa6c8f', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { key: '42659b157f11b26d7abd740b4a3761ad3dbf0b0a', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-guide.cjs.entry.js

@@ -55,9 +55,9 @@ const SdGuide = class {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (index.h("div", { key: 'd6736d62ad87e750ed147e48d36d05e4304dae2b', class: "sd-guide", style: {
+        return (index.h("div", { key: '89499e72eef00e3ec8a18f3cdafa4a204653c22f', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, index.h("sd-button", { key: '430e29a73b5bc5380f33773a13c53bc7d6f86590', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: '2b68fd8e9b67c831d212a90c0863551e022de7da', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '735de560510986e014611a2388b4eda55412282f', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: '33f612c4c2241f539a84eee6ab8d5ae8d7f933bd', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '6770783357a95ade4f1037f55397394b64624e2b', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: '1f5d49db7e830f14937db99348f0e1f2332db377', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '69faeb8e2de8e4d4895e0cd0938a027bcff2277b', name: "helpOutline", size: 24, color: "green_65" }), index.h("h3", { key: 'c87c814502da7534382cf72b2bc2ab30003d7803', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: '73a66a5a39d0b7c5eb9f4076eafdc0a8bf067deb', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, index.h("sd-button", { key: '20b7c0b5ec7ac13075db533c63c99ff8140a8a80', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: 'db9fcfe211fc1b35f1111d09fa3c6d105b08bb62', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '8bd28388e0492bd909e440c0ddf8850aeb2abc92', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: '3ac75e22a37abaf94422acb66be7056a4ecad289', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '2bef90a771e50f1f31823b6eca7f890645b329a8', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: '603e334f19b7ce0afaddfdbe9890f58071bd6638', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '219dd58caf462d77b814828e1ba61a6f958acba3', name: "helpOutline", size: 24, color: "green_65" }), index.h("h3", { key: 'f225bdf560d43079c87c9345e09f134ef27cf1d4', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: '2fb791f2392f0d38554f5a688660eae90ff34f9f', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {