@sellmate/design-system 0.0.8 → 0.0.10

package/dist/collection/components/sd-badge/sd-badge.js

@@ -0,0 +1,88 @@
+import { Host, h } from "@stencil/core";
+import { resolveColor } from "../../utils/color";
+export class SdBadge {
+    size = 'md';
+    color = 'brilliantblue_75';
+    label = '';
+    render() {
+        const resolvedColor = resolveColor(this.color);
+        return (h(Host, { key: 'b4c9fd99102b52d0769cbc1be393620f90077e20' }, h("div", { key: '99c7f6ec6a83273c37cf036fa129d57747c9046d', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '9d45fad015f4b601adba40e42354252d72bb6fd4', class: "sd-badge__dot" }), h("div", { key: 'c1aebc967cdcbfa0bb8a7f350e668f0ccd7d5a02', class: "sd-badge__label" }, this.label))));
+    }
+    static get is() { return "sd-badge"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md'",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'brilliantblue_75'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            }
+        };
+    }
+}
+//# sourceMappingURL=sd-badge.js.map

package/dist/collection/components/sd-badge/sd-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-badge.js","sourceRoot":"","sources":["../../../src/components/sd-badge/sd-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,MAAM,OAAO,OAAO;IACX,IAAI,GAAgB,IAAI,CAAC;IACzB,KAAK,GAAW,kBAAkB,CAAC;IACnC,KAAK,GAAW,EAAE,CAAC;IAE3B,MAAM;QACL,MAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE/C,OAAO,CACN,EAAC,IAAI;YACJ,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,kBAAkB,EAAE,aAAa,EAAE;gBAC1F,4DAAK,KAAK,EAAC,eAAe,GAAO;gBACjC,4DAAK,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC1C,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\n@Component({\r\n tag: 'sd-badge',\r\n styleUrl: 'sd-badge.scss',\r\n scoped: true,\r\n})\r\nexport class SdBadge {\r\n @Prop() size: 'sm' | 'md' = 'md';\r\n @Prop() color: string = 'brilliantblue_75';\r\n @Prop() label: string = '';\r\n\r\n render() {\r\n  const resolvedColor = resolveColor(this.color);\r\n\r\n  return (\r\n   <Host>\r\n    <div class={`sd-badge sd-badge--${this.size}`} style={{ '--sd-badge-color': resolvedColor }}>\r\n     <div class=\"sd-badge__dot\"></div>\r\n     <div class=\"sd-badge__label\">{this.label}</div>\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"]}

package/dist/collection/components/sd-checkbox/sd-checkbox.js

@@ -60,7 +60,7 @@ export class SdCheckbox {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (h(Host, { key: 'bad008e2f4b4bbc0c1c46b525ee16b9852c3267f' }, h("label", { key: 'bf03af829477bbd34b5e119dcc769b8c0c8d661b', class: this.getCheckboxClasses() }, h("input", { key: 'b543615e4371db97140e9eec5cfd01316b6cc944', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: this.handleChange }), h("div", { key: 'cd5d958422878d37fad90bfc7ce5a99adb668f9d', class: "sd-checkbox__bg", style: this.checkboxStyle }, this.isChecked ? (h("sd-icon", { name: "check", size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && h("span", { key: 'f1ad9310808024cb6d0f716dfc4cf06e056aba74', class: "sd-checkbox__label" }, this.label))));
+        return (h(Host, { key: '126d946853dc962cf660a9dbae2c002b7c003606' }, h("label", { key: 'cb1a6a8e427bf199789e3fe594fd01a5f618c0eb', class: this.getCheckboxClasses() }, h("input", { key: '701bb2f8e0434b81f762d36e8b16704e982c6028', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: this.handleChange }), h("div", { key: 'cb03ca961f3118d86b3679a1ae179cf9d90cfa6c', class: "sd-checkbox__bg", style: this.checkboxStyle }, this.isChecked ? (h("sd-icon", { name: "check", size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && h("span", { key: '208435a51caac8190ab8a7fae0a0e98cb6d38ea3', class: "sd-checkbox__label" }, this.label))));
     }
     static get is() { return "sd-checkbox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sd-date-picker/sd-date-picker.js

@@ -74,9 +74,9 @@ export class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: '7f25fe19940087b6a8d4ec2639dd84833034bc72', class: "sd-date-picker" }, h("sd-input", { key: 'c2d0eeba3dcb13142a38d29943eb71911cb9fd86', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: '4bd4950a7e6ee0f0fe8b43c9897473dec079bccd', class: "sd-date-picker" }, h("sd-input", { key: 'cd093c5f36a8bf73bcc1d2d8b2d4a32621e4ef02', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '86660591177b91d9ea9463619631af973eb94b8e', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '9f38b78302db746379968d10905be4cad44219e9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '295539c5374bddc50b6947c7e451ad5c563fe94a', class: "sd-date-picker__menu" }, h("div", { key: '43f91099cd421ee1d11433579cb0db7ae46c381e', class: "sd-date-picker__header" }, h("div", { key: 'fdeb6f059903e81cf18f917ef076f15f040f746b', class: "year-nav" }, h("button", { key: 'a539fa46145bde41dd4b17da48b1a80ee62cf97e', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'fc4cde6dcb1b536bf86b58576fd6c32048c13e61', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '6d9d60a0d6f57c82aa94422b2e1096ab8cf60322', class: "year-nav__current" }, this.currentYear), h("button", { key: '047cc4c2ac9707f632ac2987cfc3ed7aa0a23486', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '37bbc1ec4412806ecd97a06e025227f0f83facd8', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '6a8d98d2a0e49b0fc9d07eb098d9d8e6dc4f705a', class: "month-nav" }, h("button", { key: '300151b8e212025f221ef8b4e7c5da32b0fd13ca', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: 'b9a5822af1de65d2e79338680143fceeebf8292a', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'fd3c22b6eb4d10ce0df5097709d55e6426d070a8', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '4e8bcb9708a9aec649aa111b705b10c8f485a4d0', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '943df568d382c139e77d5b17bc5f32657b190cbc', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '8de6da2b112c68ca61197e16ed512013e25ce668', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '649cfdd71aa7275ff0b3f90e13cadfcd78acff68', class: "sd-date-picker__body" }, [
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '20051be0ceb09a2660c8aacd3f3d7c8d9d78d6e0', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '0045590cea11da3ea09ffb382fa7d0db5eb10e26', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '16b035b6b9c9ae6edd9c27bf49f81fbab52f2c0a', class: "sd-date-picker__menu" }, h("div", { key: 'a38e25d987606453c42cd1bc4f79c98a0264c479', class: "sd-date-picker__header" }, h("div", { key: '935ef106ab55ae4d2a28f2991a3a10221921524a', class: "year-nav" }, h("button", { key: '19cb5c006e4cb5ae32dde8c05a75a0df83dde359', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '6f2d8be5371e8ffcc774baba20ed4b776f8bb18c', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'cb9df4bc1594ccb8e7536b625a84a30a2e7dfa12', class: "year-nav__current" }, this.currentYear), h("button", { key: '5dd87a18292f29dc6b3b66ecc8c2f1dfaa70feb1', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'cf9e278457d72be2dd4b939448c47f6d79c57930', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '4afb13f370c9d17542f980f2da72cba9b66d1d22', class: "month-nav" }, h("button", { key: '101b4163c3ab4edc48f5ee0342a7a6bf99bde2c3', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '973e065893ac2cc9385a2b1e7ec327b25456e8a6', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '81228496944a8df087b91c5a0532a4c4e6acc722', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '8c0812d9d1f4617422c3d11ed3cd9e66cef2ef7f', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '3085b6eaaaa768dd9fc3ff4f1b2d91eef8846dbe', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: 'd837807d4a1de792bafd24950e61b6feb0948b2b', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '085b9e8190f7b46184c3e9b1de90e98c96b75f17', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js

@@ -137,9 +137,9 @@ export class SdDateRangePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: '4af937257ba809f3a46e53cbdfd93ed811bff28f', class: "sd-date-range-picker" }, h("sd-input", { key: 'ae47eca04301a2ec14d97e421b663697ecba35e3', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: '8aea2d5a46c733661022aa5925c87ccbebb5187e', class: "sd-date-range-picker" }, h("sd-input", { key: '17b95dcfb188bdde813e69e0cd281e900e3418d4', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '1b146d7f4c2ca35241a74eb2c0eb045c56a3b8ec', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'f12a79e23e611b34148cbc4477505c5521fc9b99', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '19f65644f08c55aca12f20da6ecb93ac2190fd5a', class: "sd-date-range-picker__menu" }, h("div", { key: '02b29d14d319144bcf43f660a2815873b0ad8ba9', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '77e91e8603595770203d55a25afb5091b3389620', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '7d17fc7a981ef911f5673976a2a7d6dffb186b60', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '16e43058070b9fe8f81b975b1be1a8b8b0a64fa6', class: "header-label" }, this.prevYear), h("button", { key: '401d711456467b751094fcb02e6fb5ddc3bde978', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '8b8c486b7bd921dc374ae252ca233daa09c854c4', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '3875858b39253f58781d05fb94f9029ecf70e866', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '9cb55e06cc6954eb94396d7801b516bfb8c27509', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'a77b900f2c4d91f8b3b473b131d261e0e0bca64f', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '2512ef3cede9630f5eeeed4aeaa49b1e7d204bfc', class: "sd-date-range-picker__menu" }, h("div", { key: 'efa249182fe69e088cd49603426ecbf8488bc90a', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'a4b40a969bcfe08fa0426864ca31db94b5bb7c6c', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '078faf6ed904b7dd7ca20e0d30767946d75cefce', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '1582407b137ce57eb3cc0d3f62d6d50dace58be9', class: "header-label" }, this.prevYear), h("button", { key: 'dd13bad24056346098e9c780520c75611e34cbf3', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '9871ce23b9d3074a0e581ee8731f19beb910ecac', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'bd3cf7fb8735d66e9944f1232fcf205d95ff8f99', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===

package/dist/collection/components/sd-guide/sd-guide.js

@@ -66,7 +66,7 @@ export class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
-        return (h(Host, { key: 'eb3873c0f3c38208bb1c7bceea0c16748d10123e', style: this.getGuideStyle() }, h("sd-button", { key: '7aa64a9d56ea64516680fc52226d738a20fb24bb', ref: el => (this.guideRef = el), class: this.getGuideClasses(), variant: "outline", label: SdGuide.guideTitle[this.type], size: "md", color: "var(--guide-color)", icon: iconName, iconColor: iconColor, iconSize: iconSize, iconStyle: { marginRight: '4px' }, buttonStyle: {
+        return (h(Host, { key: '6b9aef7f8ac24d20f19b0007aa6b13de124db93a', style: this.getGuideStyle() }, h("sd-button", { key: '84f1e008e5583d33e008c3c6676b221795af447f', ref: el => (this.guideRef = el), class: this.getGuideClasses(), variant: "outline", label: SdGuide.guideTitle[this.type], size: "md", color: "var(--guide-color)", icon: iconName, iconColor: iconColor, iconSize: iconSize, iconStyle: { marginRight: '4px' }, buttonStyle: {
                 height: '28px',
                 minHeight: '28px',
                 padding: '4px 12px',
@@ -76,7 +76,7 @@ export class SdGuide {
                 fontSize: '12px',
                 fontWeight: '400',
                 backgroundColor: 'var(--guide-background)',
-            }, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '8c8d401cf365376553e3c23abec6f43823e89217', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 24] }, h("div", { key: 'ac6a0acd0ab0e8ff9d51954fc81ae4bd0f2091ff', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '52c6e7cce6c0525f20ddea26c759c36c614671ab', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true, buttonStyle: { padding: '0px', minHeight: '0px' }, onSdClick: this.closeDropdown }), h("div", { key: 'fa1a7b0f0fdd97aa65bba2ba5dee724dd774c296', class: "sd-guide__popup__header" }, h("sd-icon", { key: '7d786d08caf15673e33c3c8de73410978104aaff', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'd31e03e34ebab5c32fd4d123f954ce9ef67c3fc9', class: "sd-guide__popup__title" }, this.popupTitle || SdGuide.guideTitle[this.type])), h("ul", { key: 'a294ecc2bf1b20252191711f20aa10098b9d0175', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            }, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '094c0ed48f8cd5e4ad9b39749c5b9e38de776df9', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 24] }, h("div", { key: 'c4723cff1757f411b3ec5c618ece202195893062', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'a76bd5368390414f8ab3733902780b39d4bfb3ac', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true, buttonStyle: { padding: '0px', minHeight: '0px' }, onSdClick: this.closeDropdown }), h("div", { key: '56b1e56be7accd939b47d8942c0796214215b9a1', class: "sd-guide__popup__header" }, h("sd-icon", { key: '4c0eee1fb46488a0fc69e767536d8a0abc0465c3', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '82159861a5f0dead314dde0648441099fbed1b33', class: "sd-guide__popup__title" }, this.popupTitle || SdGuide.guideTitle[this.type])), h("ul", { key: '656631755547012c689a434aa0db3f6f3676dc2f', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/collection/components/sd-icon/sd-icon.js

@@ -25,7 +25,7 @@ export class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '9d53cc78e1433e03e0329dc59b2fcb704dfc5229', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'f2e0c3c9eec1efb16a6aa703ae7e112b89a90876', color: this.resolvedColor })));
+        return (h("i", { key: 'e9b6db9025ea08dd24e82dc0f37090109b707a12', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '03592c460972f9ea07cb6b86c8dcbbf1f52bb9ff', color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sd-input/sd-input.js

@@ -89,11 +89,11 @@ export class SdInput {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h(Host, { key: '17b45c8fff6a50fefba8852188d76aae5e494117', style: inputWidth }, this.label && h("div", { key: '9cad02ee97a3685372a5de808d94f2d78b6f1931', class: "sd-input__label" }, this.label), h("label", { key: 'd1df0ccc07e76291876b072d26feeace34abbae7', class: {
+        return (h(Host, { key: 'a98bd133a5e00feaea2c3d2a4ef8e63a9e9e1dc5', style: inputWidth }, this.label && h("div", { key: 'c5bce4ee152a83f1e34a63a7e347c449f27e568e', class: "sd-input__label" }, this.label), h("label", { key: '77c9bf2b1bad3839afef09a55c170924355b4ec9', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '3af4ceb58d0f96abb383e0829f7256b81a6f94ec', name: "prefix" }), h("input", { key: '8f78d01452e39ab362eb6031564f26df6998dfe4', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: 'f4f0d0aa8185c277e22524e698275987034fc053', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '61cd69cb8c562fcd88ce0138e52ee505d9d9e641', name: "close", color: "#888", style: { marginRight: '-4px', marginLeft: '8px', cursor: 'pointer' }, onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: 'a81d4ae208787b2a74a000cc1baf3e288cc42132', name: "prefix" }), h("input", { key: 'fc5141f2364ca939e0a8ed7425143f5c1ecab572', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: 'deabb72ce63756290ba752774a207c65f2bf287f', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '8e62dc1e4a17d12ae26c01ffe5c3ac40da516a46', name: "close", color: "#888", style: { marginRight: '-4px', marginLeft: '8px', cursor: 'pointer' }, onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);

package/dist/collection/components/sd-pagination/sd-pagination.js

@@ -73,12 +73,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: '4a54f4fb07b16bb6334e975967865d225a8d88e0', class: this.paginationClasses }, h("div", { key: 'a7054470cf94b30af967883072cf2af9eab5fb8d', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: '1065ad3060754151c2097d130a2317ed6c064a6f', class: this.paginationClasses }, h("div", { key: '86aae86adce4d262b49190d06130b6f5b17dd52a', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '2b785eca4e7dd7b18f850cf90f92418d283171e2', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '6615badfef07e61393bc4519fb784ef84191f784', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-popover/sd-popover.js

@@ -31,11 +31,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'd15f1b55b6b397676fc9c96c48cef500ae84993b' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: 'eea0f3aeab811cfd1b228088517756de85b801d9', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '9db5d4ce6fc5e3f4b9358864c36c45b7958f15be', class: {
+        return (h(Fragment, { key: 'ddc099859685637ced58820f2dd8e2cb73a13594' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '07e0fc27a7898027dc1fb3d9652b220ed29dc47d', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '63c8601759b01f4e4522c1ebf06210e5e6f73554', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '938a3f683ee00bb8b57d2b38229b137c60fb2fee', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '70b4e58bd7d4e78ee82fbb54010e6b1cc369cb47' })), h("div", { key: 'f2b022d3b324a55fd39a224273d956a43fa778cf', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '0b6ad274cdc12dccaec60a1ae295ebf6cd908aa5', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '484c18a44b8a8bcd6ec850cbfa293b45acc55696', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '3e7eb1384a12ebf6be3f7da1bd76979957b41310', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '87189dde9bf5ace19a53f35d4dab68c7fd5790f6', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: 'f4c1685ce30e7e15ed5d16faa4157489ae7d8bbb', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: 'c299090e57d4e0f1d5ee87957c6c271ec63940a2', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'b54e63b3748a9251a66da6a9615ba9d8c9cf3818' })), h("div", { key: '3ce1c182e29c77363f929517ceb782c99dbc3a28', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'e81679dca07a190c54b27b6435c25efb5788b027', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '5793115acdb1723b507f3b31a00157a2b90b16bb', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '4f4f4e6d9eab6321737d0be88752ba9be875998e', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'a17d12565b7327676ab1637988cfa30a0c9ed35f', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: 'c3c451b2ff7a3c640c236fb43b9d831f62e0d858', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-portal/sd-portal.js

@@ -92,7 +92,7 @@ export class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: 'b1a22a7a0865bf3984f79148dd6c97fce0268ca4' });
+        return h("slot", { key: '1cd6fdea1437dfb749536e76cd5edb8622d0d8c8' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h("div", { key: '6a41bb20544e864db75ec58455aacdf4a5411b2e', class: {
+        return (h("div", { key: '420ae30f1928e9051c5078b778e0eefb1ccd8ad7', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

package/dist/collection/components/sd-tooltip/sd-tooltip.js

@@ -27,11 +27,11 @@ export class SdTooltip {
             : {
                 onClick: () => (console.log('click tooltip'), (this.showTooltip = !this.showTooltip)),
             };
-        return (h(Fragment, { key: '8acd661f796fc9c006e966c1667a46752205ed48' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '4437a6b3df82731ebea80649c5e75ec203554dbd', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '43f186e6eb64b019359815b5cb43e50972ed782b', class: {
+        return (h(Fragment, { key: '94936b10ef4b9b926ac61b81365fba1cd426248f' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: 'f162a5a2bf99f6538c671323cbde58d3adaffb31', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '34e9846aa2e8e04de06e994b61ff1c84c62af8b8', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
-            } }, h("i", { key: '811ebc90e1dcee2e2c88357419009c017badcf6f', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '8907d113ccc956c3bc1e1dca2267f992ccd94d09' })), h("div", { key: '22fbfd6b6ce6c5efe4f75f9e4d208b05ea945783', class: "sd-tooltip-menu__content" }, h("slot", { key: '7c953be946fb90b8e4512eacd6da913000a75f19' }, this.el.textContent)), this.useClose && (h("div", { key: '039dd932a468cb7419beec5d929514c4866d7992', class: "sd-tooltip-menu__close-button" }, h("button", { key: '4edc7ea5cec0cb8023a3aa848cc208a8379b5fbb', onClick: () => this.handleClose() }, h("sd-icon", { key: '51ecdb054e7b34dd6872b14964034c1e1e870ff6', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, h("i", { key: 'dcd5009ae7acbb7421076f2dd5f74f039a9db4c7', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '80c198c65d5e2eaece8dbdf71a2dfd287b638bcf' })), h("div", { key: 'bc1392c0a4926ea5ca89d657d151a2dd812ba1fe', class: "sd-tooltip-menu__content" }, h("slot", { key: '038ce320d51e6a405c3d7d00256a5ca1cc82569c' }, this.el.textContent)), this.useClose && (h("div", { key: '435453a6e4d04fae3f44dc9691e2e546e0e34fae', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'b4f0eec2e85eeaad94a4b8da31350f09d01285fb', onClick: () => this.handleClose() }, h("sd-icon", { key: '9e0943a7104d7445ec56ed1286310f0c5d303082', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get is() { return "sd-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js

@@ -143,7 +143,7 @@ export class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '3a845f83619e1bff0b6b67abddd7fc21cb47e2ba' });
+        return h("slot", { key: 'da351ee1e01b2329ab453245f4272758f1f3889e' });
     }
     static get is() { return "sd-tooltip-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js

@@ -8,8 +8,4 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 export { format } from './utils/utils';
-// Export Next.js utilities
-export { defineCustomElements, waitForStencilHydration, initStencilForNextjs, CLIENT_ONLY_COMPONENTS, isClientOnlyComponent, } from './utils/next-react-wrapper';
-// Export hydration utilities
-export { renderStencilComponents, hydrateStencilComponents, STENCIL_CONFIG, } from './utils/next-hydrate';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAMvC,2BAA2B;AAC3B,OAAO,EACN,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,GACrB,MAAM,4BAA4B,CAAC;AAEpC,6BAA6B;AAC7B,OAAO,EACN,uBAAuB,EACvB,wBAAwB,EACxB,cAAc,GACd,MAAM,sBAAsB,CAAC","sourcesContent":["/**\r\n * @fileoverview entry point for your component library\r\n *\r\n * This is the entry point for your component library. Use this file to export utilities,\r\n * constants or data structure that accompany your components.\r\n *\r\n * DO NOT use this file to export your components. Instead, use the recommended approaches\r\n * to consume components of this package as outlined in the `README.md`.\r\n */\r\n\r\nexport { format } from './utils/utils';\r\nexport type * from './components.d.ts';\r\n\r\n// Export sd-table types\r\nexport type { SdTableSortDir, SdTableColumn, Row } from './components/sd-table/sd-table';\r\n\r\n// Export Next.js utilities\r\nexport {\r\n defineCustomElements,\r\n waitForStencilHydration,\r\n initStencilForNextjs,\r\n CLIENT_ONLY_COMPONENTS,\r\n isClientOnlyComponent,\r\n} from './utils/next-react-wrapper';\r\n\r\n// Export hydration utilities\r\nexport {\r\n renderStencilComponents,\r\n hydrateStencilComponents,\r\n STENCIL_CONFIG,\r\n} from './utils/next-hydrate';\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC","sourcesContent":["/**\r\n * @fileoverview entry point for your component library\r\n *\r\n * This is the entry point for your component library. Use this file to export utilities,\r\n * constants or data structure that accompany your components.\r\n *\r\n * DO NOT use this file to export your components. Instead, use the recommended approaches\r\n * to consume components of this package as outlined in the `README.md`.\r\n */\r\n\r\nexport { format } from './utils/utils';\r\nexport type * from './components.d.ts';\r\n\r\n// Export sd-table types\r\nexport type { SdTableSortDir, SdTableColumn, Row } from './components/sd-table/sd-table';\r\n"]}

package/dist/components/index.js

@@ -1,123 +1,10 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-D_I5tXD6.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-CLODAhOA.js';
 
 function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
 
-/**
- * Next.js에서 Stencil 컴포넌트 사용을 위한 유틸리티 함수들
- */
-/**
- * 클라이언트 사이드에서만 Stencil 컴포넌트를 로드하는 함수
- */
-const defineCustomElements = async () => {
-    if (typeof window !== 'undefined') {
-        const { defineCustomElements } = await import('./p-dBol_ZO8.js');
-        await defineCustomElements();
-    }
-};
-/**
- * Stencil 컴포넌트가 hydrate되었는지 확인하는 함수
- */
-const waitForStencilHydration = (element, timeout = 5000) => {
-    return new Promise(resolve => {
-        if (element.hasAttribute('hydrated')) {
-            resolve(true);
-            return;
-        }
-        const observer = new MutationObserver(() => {
-            if (element.hasAttribute('hydrated')) {
-                observer.disconnect();
-                resolve(true);
-            }
-        });
-        observer.observe(element, {
-            attributes: true,
-            attributeFilter: ['hydrated'],
-        });
-        // 타임아웃 설정
-        setTimeout(() => {
-            observer.disconnect();
-            resolve(false);
-        }, timeout);
-    });
-};
-/**
- * Next.js에서 Stencil 컴포넌트 초기화를 위한 설정
- */
-const initStencilForNextjs = () => {
-    if (typeof window !== 'undefined') {
-        // 전역 설정
-        window.stencil = {
-            ...(window.stencil || {}),
-            hydrateFlag: 'hydrated',
-        };
-    }
-};
-/**
- * SSR에서 제외할 컴포넌트 목록
- */
-const CLIENT_ONLY_COMPONENTS = ['sd-date-picker', 'sd-date-range-picker'];
-/**
- * 컴포넌트가 클라이언트 전용인지 확인
- */
-const isClientOnlyComponent = (tagName) => {
-    return CLIENT_ONLY_COMPONENTS.includes(tagName);
-};
-
-/**
- * Next.js SSR을 위한 서버사이드 렌더링 함수
- * @param html HTML 문자열
- * @returns 렌더링된 HTML 문자열
- */
-async function renderStencilComponents(html) {
-    // 서버 환경에서만 hydrate 모듈을 동적으로 import
-    if (typeof window === 'undefined') {
-        try {
-            const { renderToString } = await import('./p-BjTJkvEh.js');
-            const results = await renderToString(html, {
-                prettyHtml: false,
-                removeUnusedStyles: true,
-                clientHydrateAnnotations: true,
-            });
-            return results.html || html;
-        }
-        catch (error) {
-            console.warn('Failed to render Stencil components on server:', error);
-            return html;
-        }
-    }
-    return html;
-}
-/**
- * Next.js 클라이언트사이드 하이드레이션 함수
- * @param document HTML 문서 객체
- */
-async function hydrateStencilComponents(document) {
-    // 클라이언트 환경에서만 hydrate 모듈을 동적으로 import
-    if (typeof window !== 'undefined') {
-        try {
-            const { hydrateDocument } = await import('./p-BjTJkvEh.js');
-            await hydrateDocument(document, {
-                runtimeLogging: false,
-            });
-        }
-        catch (error) {
-            console.warn('Failed to hydrate Stencil components on client:', error);
-        }
-    }
-}
-/**
- * Next.js에서 Stencil 컴포넌트 사용을 위한 설정
- */
-const STENCIL_CONFIG = {
-    // 컴포넌트가 hydrate되었는지 확인하는 속성
-    hydratedAttribute: 'hydrated',
-    // SSR에서 제외할 컴포넌트들 (클라이언트에서만 렌더링)
-    clientOnlyComponents: ['sd-date-picker', 'sd-date-range-picker'],
-};
-
-export { CLIENT_ONLY_COMPONENTS, STENCIL_CONFIG, defineCustomElements, format, hydrateStencilComponents, initStencilForNextjs, isClientOnlyComponent, renderStencilComponents, waitForStencilHydration };
+export { format };
 //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":"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","names":[],"sources":["src/utils/utils.ts","src/utils/next-react-wrapper.tsx","src/utils/next-hydrate.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\r\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\r\n}\r\n","/**\r\n * Next.js에서 Stencil 컴포넌트 사용을 위한 유틸리티 함수들\r\n */\r\n\r\n/**\r\n * 클라이언트 사이드에서만 Stencil 컴포넌트를 로드하는 함수\r\n */\r\nexport const defineCustomElements = async () => {\r\n if (typeof window !== 'undefined') {\r\n  const { defineCustomElements } = await import('../../loader');\r\n  await defineCustomElements();\r\n }\r\n};\r\n\r\n/**\r\n * Stencil 컴포넌트가 hydrate되었는지 확인하는 함수\r\n */\r\nexport const waitForStencilHydration = (element: HTMLElement, timeout = 5000): Promise<boolean> => {\r\n return new Promise(resolve => {\r\n  if (element.hasAttribute('hydrated')) {\r\n   resolve(true);\r\n   return;\r\n  }\r\n\r\n  const observer = new MutationObserver(() => {\r\n   if (element.hasAttribute('hydrated')) {\r\n    observer.disconnect();\r\n    resolve(true);\r\n   }\r\n  });\r\n\r\n  observer.observe(element, {\r\n   attributes: true,\r\n   attributeFilter: ['hydrated'],\r\n  });\r\n\r\n  // 타임아웃 설정\r\n  setTimeout(() => {\r\n   observer.disconnect();\r\n   resolve(false);\r\n  }, timeout);\r\n });\r\n};\r\n\r\n/**\r\n * Next.js에서 Stencil 컴포넌트 초기화를 위한 설정\r\n */\r\nexport const initStencilForNextjs = () => {\r\n if (typeof window !== 'undefined') {\r\n  // 전역 설정\r\n  (window as any).stencil = {\r\n   ...((window as any).stencil || {}),\r\n   hydrateFlag: 'hydrated',\r\n  };\r\n }\r\n};\r\n\r\n/**\r\n * SSR에서 제외할 컴포넌트 목록\r\n */\r\nexport const CLIENT_ONLY_COMPONENTS = ['sd-date-picker', 'sd-date-range-picker'];\r\n\r\n/**\r\n * 컴포넌트가 클라이언트 전용인지 확인\r\n */\r\nexport const isClientOnlyComponent = (tagName: string): boolean => {\r\n return CLIENT_ONLY_COMPONENTS.includes(tagName);\r\n};\r\n","/**\r\n * Next.js SSR을 위한 서버사이드 렌더링 함수\r\n * @param html HTML 문자열\r\n * @returns 렌더링된 HTML 문자열\r\n */\r\nexport async function renderStencilComponents(html: string): Promise<string> {\r\n // 서버 환경에서만 hydrate 모듈을 동적으로 import\r\n if (typeof window === 'undefined') {\r\n  try {\r\n   const { renderToString } = await import('../../hydrate');\r\n   const results = await renderToString(html, {\r\n    prettyHtml: false,\r\n    removeUnusedStyles: true,\r\n    clientHydrateAnnotations: true,\r\n   });\r\n\r\n   return results.html || html;\r\n  } catch (error) {\r\n   console.warn('Failed to render Stencil components on server:', error);\r\n   return html;\r\n  }\r\n }\r\n\r\n return html;\r\n}\r\n\r\n/**\r\n * Next.js 클라이언트사이드 하이드레이션 함수\r\n * @param document HTML 문서 객체\r\n */\r\nexport async function hydrateStencilComponents(document: Document): Promise<void> {\r\n // 클라이언트 환경에서만 hydrate 모듈을 동적으로 import\r\n if (typeof window !== 'undefined') {\r\n  try {\r\n   const { hydrateDocument } = await import('../../hydrate');\r\n   await hydrateDocument(document, {\r\n    runtimeLogging: false,\r\n   });\r\n  } catch (error) {\r\n   console.warn('Failed to hydrate Stencil components on client:', error);\r\n  }\r\n }\r\n}\r\n\r\n/**\r\n * Next.js에서 Stencil 컴포넌트 사용을 위한 설정\r\n */\r\nexport const STENCIL_CONFIG = {\r\n // 컴포넌트가 hydrate되었는지 확인하는 속성\r\n hydratedAttribute: 'hydrated',\r\n\r\n // SSR에서 제외할 컴포넌트들 (클라이언트에서만 렌더링)\r\n clientOnlyComponents: ['sd-date-picker', 'sd-date-range-picker'],\r\n};\r\n"],"version":3}
+{"file":"index.js","mappings":";;SAAgB,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa,EAAA;AACnE,IAAA,OAAO,CAAC,KAAK,IAAI,EAAE,KAAK,MAAM,GAAG,CAAI,CAAA,EAAA,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,CAAI,CAAA,EAAA,IAAI,EAAE,GAAG,EAAE,CAAC;AAChF;;;;","names":[],"sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\r\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\r\n}\r\n"],"version":3}