@sellmate/design-system 1.2.0 → 1.3.0

package/hydrate/index.mjs

@@ -5336,7 +5336,7 @@ class SdActionModal {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (hAsync("div", { key: '278f81cf1f4ae0ca65ac6187b7fb31e4f12002f6', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: '7d110c9a1633f0db63c3d605f4422b90b9eb1a5c', class: "sd-action-modal__header" }, hAsync("h2", { key: 'd81100f64dec3a483d8f40b0be5069182de892c1', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'c90c38a33877c85837316d63aadfab5f4bee73dc', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '98ea6a6f21d1596fa22fb7a9b37bb1169dcc6b16', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: 'dd3429279996c79dec50aef0d77cfa21f4b0392b', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'c8621876c083c1026ddbecef875b4308ce85835e', class: "sd-action-modal__body" }, hAsync("slot", { key: 'bcf70a5bf4af9afdb421894a4cb2abeea0e277e9', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: 'bc783b531cc045c360680326f826cda3ccc1bd67', class: "sd-action-modal__footer" }, hAsync("div", { key: '20d6c7708bc3218b038c5cb4faddcc6fc58acee7', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '08703135da34bac499de135ed5b8e85eeb0fbc3a', name: "bottom-sub-content" })), hAsync("sd-button", { key: 'f384e5914a78fdfcfdd0bd3ad89f7bcf20c5f8d2', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (hAsync("div", { key: '7b59ff655bb9f7a6bc79bb948201a6a532c16b06', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: '3e141509dc7082e08f448043573de3a8bd8e7cf0', class: "sd-action-modal__header" }, hAsync("h2", { key: 'ba80634b72ce1168d2ab3aec12bdf2a6546ff08d', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'aed32008f0dcaa2deec098ca3c0c9cb1e8f6fb50', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '32a015a006cbcf26373c64a72e4131b878c53222', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '574d14cf2d0031dbf43cbb5999d4471a235ca72a', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: '713761da4ad2217c1d762fd56bc391ddc5c9cded', class: "sd-action-modal__body" }, hAsync("slot", { key: 'e224251b153d60cf35056b542c5d9925f4918b7f', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: '43d6e4ffed21704ac68689f0742f8d7a6456b0b6', class: "sd-action-modal__footer" }, hAsync("div", { key: 'bd9cce1c5b1fb02156008a4e76c65dc8cb4385aa', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '4de818c9ba8fcdb159963b9c9c7ce893fa3216da', name: "bottom-sub-content" })), hAsync("sd-button", { key: 'af9f4c1fd4c6bb482690c2545e0add53c308b95a', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
     }
     static get style() { return sdActionModalCss(); }
     static get cmpMeta() { return {
@@ -5388,7 +5388,7 @@ class SdBadge {
     color = 'blue';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (hAsync("div", { key: 'aba37986d6beea38fb1c5476f5187359ac2ebf0c', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'dd80e8d18c79eda021baf7a7f233222c9c2aa717', class: "sd-badge__dot" })));
+        return (hAsync("div", { key: '9ae835aba8a4acde4b918eceda00441ee2c22905', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'c3b648845b5c138026a82a6a2c483d2a56ed2aab', class: "sd-badge__dot" })));
     }
     static get style() { return sdBadgeCss(); }
     static get cmpMeta() { return {
@@ -5597,7 +5597,7 @@ class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (hAsync("sd-field", { key: '206beaac9acf7bf3e787b98c1e9bda602f1aa1d2', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: 'ab14cdc3e65faa72ce7c549234e40ca54f441c7d', class: "sd-barcode-input__content" }, hAsync("slot", { key: '7568acdee85fa0ae7440d7db65fd414fb1c27d1c', name: "prefix" }), hAsync("input", { key: '388b007eb7d830083e75e6b3016c412a6922bb1a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '8e8d4feee62108904eb766b1917ed1e20cacc83b', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: 'a9b158ebcdcb31009b13db624fb8c74d6252e20d', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (hAsync("sd-field", { key: '61eb9beceb57e58323c1477c71147607db834e71', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '9d4fa219af76d29b2d2e8443af1e66b980d62dd1', class: "sd-barcode-input__content" }, hAsync("slot", { key: '044bf2c4a6e79bb0d6b2a76398107b47d1237662', name: "prefix" }), hAsync("input", { key: '2522d0ded40b69c76872877bede00b1e4e5260d2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '8dc300df9f8bd7045f9c9e357925be3b7f2bdbb4', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '1b3cab2c7fe9caf973e7defff170f64b3fd35daa', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
@@ -6464,13 +6464,13 @@ class SdButton {
         const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
         const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
         const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
-        return (hAsync("button", { key: 'c9f4491915f6ba4fdbf54df19b008bd32edbf925', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (hAsync("button", { key: '3caa9dff467ec7efa748eecd736296500a222ecb', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-bg': config.color,
                 '--sd-button-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
                 '--sd-button-border': PRESET_BORDER_COLORS$1[preset],
                 '--sd-button-content': PRESET_CONTENT_COLORS$1[preset],
                 '--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, hAsync("span", { key: '44fc95645e6eea6aecee9978887f4309d9d31342', class: "sd-button__content" }, validIcon && (hAsync("sd-icon", { key: 'ae1d9a3e8eb40ed0aecac0e70af1341ac90767c8', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && hAsync("span", { key: 'ab7bbf916c3b0432db6313050d7facfe919794de', class: "sd-button__label" }, this.label), validRightIcon && (hAsync("sd-icon", { key: 'a533ef5439abe1729ccfacc9f8e44263b56434e5', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
+            }, onClick: this.handleClick }, hAsync("span", { key: 'cded66e4802956c29064cbdcc12b9dd1066a45c3', class: "sd-button__content" }, validIcon && (hAsync("sd-icon", { key: 'b989e3eb8661e16f052d5c7a292ea316a2b821df', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && hAsync("span", { key: '07695896bd8f11ca8753dcb171b5c7f0e7304c0d', class: "sd-button__label" }, this.label), validRightIcon && (hAsync("sd-icon", { key: 'bfd18c0a390a955d8de99789c86ce39fb605beae', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
     }
     static get style() { return sdButtonCss(); }
     static get cmpMeta() { return {
@@ -6547,422 +6547,387 @@ const useDatePicker = () => {
     return { formatDate, createCalendar, calculateYearMonth };
 };
 
-const primary = "#051D36";
-const secondary = "#555555";
-const accent = "#9C27B0";
-const positive = "#0075FF";
-const negative = "#E30000";
-const info = "#00CD52";
-const warning = "#F2C037";
-const caution_bg = "#FEF1F1";
-const caution_icon = "#FD9595";
-const header_alert = "#FF7A00";
-const white = "#FFFFFF";
-const black = "#000000";
-const grey_10 = "#F6F6F6";
-const grey_20 = "#EEEEEE";
-const grey_25 = "#E5E5E5";
-const grey_30 = "#E1E1E1";
-const grey_35 = "#D8D8D8";
-const grey_45 = "#CCCCCC";
-const grey_50 = "#BBBBBB";
-const grey_55 = "#AAAAAA";
-const grey_60 = "#999999";
-const grey_65 = "#888888";
-const grey_70 = "#737373";
-const grey_80 = "#555555";
-const grey_85 = "#444444";
-const grey_90 = "#333333";
-const grey_95 = "#222222";
-const grey_05 = "#F9F9F9";
-const red_15 = "#FCEFEF";
-const red_20 = "#FCE6E6";
-const red_30 = "#FFD3D3";
-const red_45 = "#FFB5B5";
-const red_60 = "#FF7C7C";
-const red_70 = "#FB4444";
-const red_75 = "#E30000";
-const red_75_006 = "#E30000";
-const red_80 = "#AD0000";
-const red_85 = "#820000";
-const red_90 = "#5E0000";
-const red_95 = "#440000";
-const red_99 = "#220000";
-const orange_10 = "#FEF1EA";
-const orange_20 = "#FFEAD7";
-const orange_35 = "#FFD5AF";
-const orange_45 = "#FFBC81";
-const orange_55 = "#FFA452";
-const orange_60 = "#FF7F22";
-const orange_65 = "#FF6B00";
-const orange_75 = "#CE4900";
-const orange_85 = "#9B3700";
-const orange_90 = "#752A00";
-const orange_95 = "#4D1B00";
-const orange_99 = "#2F1100";
-const yellow_10 = "#FFF7DD";
-const yellow_20 = "#FEF1C4";
-const yellow_25 = "#FFE99E";
-const yellow_30 = "#FEE17C";
-const yellow_40 = "#FFD643";
-const yellow_45 = "#FFC700";
-const yellow_50 = "#EBB110";
-const yellow_60 = "#CA9612";
-const yellow_70 = "#916C0D";
-const yellow_80 = "#6C5002";
-const yellow_90 = "#453602";
-const yellow_95 = "#322700";
-const olive_10 = "#FBFBBF";
-const olive_15 = "#FAFAA1";
-const olive_20 = "#F6F65F";
-const olive_30 = "#EEEE37";
-const olive_45 = "#DDDD12";
-const olive_55 = "#C7C700";
-const olive_65 = "#A5A500";
-const olive_70 = "#838300";
-const olive_80 = "#636300";
-const olive_90 = "#454500";
-const olive_95 = "#2C2C00";
-const olive_05 = "#FEFED9";
-const green_15 = "#E8F9EF";
-const green_25 = "#D4FAE3";
-const green_45 = "#ACF4C9";
-const green_55 = "#6DE39C";
-const green_65 = "#2BCE6C";
-const green_70 = "#12B553";
-const green_75 = "#00973C";
-const green_80 = "#007B31";
-const green_85 = "#006629";
-const green_90 = "#00461C";
-const green_95 = "#003013";
-const green_99 = "#001D0B";
-const steelblue_10 = "#ECF8FD";
-const steelblue_25 = "#D9F2FD";
-const steelblue_45 = "#A4E2FD";
-const steelblue_60 = "#50BFF0";
-const steelblue_65 = "#229FD7";
-const steelblue_70 = "#128FC7";
-const steelblue_75 = "#066D9B";
-const steelblue_80 = "#06587D";
-const steelblue_85 = "#033F59";
-const steelblue_90 = "#032D40";
-const steelblue_95 = "#02212F";
-const steelblue_99 = "#021A25";
-const oceanblue_15 = "#EAF5FE";
-const oceanblue_25 = "#D5EBFE";
-const oceanblue_50 = "#9CD1FC";
-const oceanblue_60 = "#5CB0F3";
-const oceanblue_65 = "#1F8AE1";
-const oceanblue_70 = "#006AC1";
-const oceanblue_75 = "#025497";
-const oceanblue_80 = "#004177";
-const oceanblue_85 = "#07284A";
-const oceanblue_90 = "#051D36";
-const oceanblue_95 = "#03172D";
-const oceanblue_99 = "#011428";
-const brilliantblue_10 = "#EFF6FF";
-const brilliantblue_20 = "#E6F1FF";
-const brilliantblue_25 = "#D9EAFF";
-const brilliantblue_40 = "#BBDAFF";
-const brilliantblue_50 = "#93C4FF";
-const brilliantblue_60 = "#64ABFF";
-const brilliantblue_70 = "#2D8DFF";
-const brilliantblue_75 = "#0075FF";
-const brilliantblue_80 = "#005CC9";
-const brilliantblue_85 = "#004290";
-const brilliantblue_90 = "#002B5E";
-const brilliantblue_95 = "#001B39";
-const brilliantblue_99 = "#001226";
-const brilliantblue_05 = "#F5FAFF";
-var rawColors = {
-	primary: primary,
-	secondary: secondary,
-	accent: accent,
-	positive: positive,
-	negative: negative,
-	info: info,
-	warning: warning,
-	caution_bg: caution_bg,
-	caution_icon: caution_icon,
-	header_alert: header_alert,
-	white: white,
-	black: black,
-	grey_10: grey_10,
-	grey_20: grey_20,
-	grey_25: grey_25,
-	grey_30: grey_30,
-	grey_35: grey_35,
-	grey_45: grey_45,
-	grey_50: grey_50,
-	grey_55: grey_55,
-	grey_60: grey_60,
-	grey_65: grey_65,
-	grey_70: grey_70,
-	grey_80: grey_80,
-	grey_85: grey_85,
-	grey_90: grey_90,
-	grey_95: grey_95,
-	grey_05: grey_05,
-	red_15: red_15,
-	red_20: red_20,
-	red_30: red_30,
-	red_45: red_45,
-	red_60: red_60,
-	red_70: red_70,
-	red_75: red_75,
-	red_75_006: red_75_006,
-	red_80: red_80,
-	red_85: red_85,
-	red_90: red_90,
-	red_95: red_95,
-	red_99: red_99,
-	orange_10: orange_10,
-	orange_20: orange_20,
-	orange_35: orange_35,
-	orange_45: orange_45,
-	orange_55: orange_55,
-	orange_60: orange_60,
-	orange_65: orange_65,
-	orange_75: orange_75,
-	orange_85: orange_85,
-	orange_90: orange_90,
-	orange_95: orange_95,
-	orange_99: orange_99,
-	yellow_10: yellow_10,
-	yellow_20: yellow_20,
-	yellow_25: yellow_25,
-	yellow_30: yellow_30,
-	yellow_40: yellow_40,
-	yellow_45: yellow_45,
-	yellow_50: yellow_50,
-	yellow_60: yellow_60,
-	yellow_70: yellow_70,
-	yellow_80: yellow_80,
-	yellow_90: yellow_90,
-	yellow_95: yellow_95,
-	olive_10: olive_10,
-	olive_15: olive_15,
-	olive_20: olive_20,
-	olive_30: olive_30,
-	olive_45: olive_45,
-	olive_55: olive_55,
-	olive_65: olive_65,
-	olive_70: olive_70,
-	olive_80: olive_80,
-	olive_90: olive_90,
-	olive_95: olive_95,
-	olive_05: olive_05,
-	green_15: green_15,
-	green_25: green_25,
-	green_45: green_45,
-	green_55: green_55,
-	green_65: green_65,
-	green_70: green_70,
-	green_75: green_75,
-	green_80: green_80,
-	green_85: green_85,
-	green_90: green_90,
-	green_95: green_95,
-	green_99: green_99,
-	steelblue_10: steelblue_10,
-	steelblue_25: steelblue_25,
-	steelblue_45: steelblue_45,
-	steelblue_60: steelblue_60,
-	steelblue_65: steelblue_65,
-	steelblue_70: steelblue_70,
-	steelblue_75: steelblue_75,
-	steelblue_80: steelblue_80,
-	steelblue_85: steelblue_85,
-	steelblue_90: steelblue_90,
-	steelblue_95: steelblue_95,
-	steelblue_99: steelblue_99,
-	oceanblue_15: oceanblue_15,
-	oceanblue_25: oceanblue_25,
-	oceanblue_50: oceanblue_50,
-	oceanblue_60: oceanblue_60,
-	oceanblue_65: oceanblue_65,
-	oceanblue_70: oceanblue_70,
-	oceanblue_75: oceanblue_75,
-	oceanblue_80: oceanblue_80,
-	oceanblue_85: oceanblue_85,
-	oceanblue_90: oceanblue_90,
-	oceanblue_95: oceanblue_95,
-	oceanblue_99: oceanblue_99,
-	brilliantblue_10: brilliantblue_10,
-	brilliantblue_20: brilliantblue_20,
-	brilliantblue_25: brilliantblue_25,
-	brilliantblue_40: brilliantblue_40,
-	brilliantblue_50: brilliantblue_50,
-	brilliantblue_60: brilliantblue_60,
-	brilliantblue_70: brilliantblue_70,
-	brilliantblue_75: brilliantblue_75,
-	brilliantblue_80: brilliantblue_80,
-	brilliantblue_85: brilliantblue_85,
-	brilliantblue_90: brilliantblue_90,
-	brilliantblue_95: brilliantblue_95,
-	brilliantblue_99: brilliantblue_99,
-	brilliantblue_05: brilliantblue_05
+const datepicker = {
+	sm: {
+		height: "28",
+		paddingX: "12",
+		gap: "8",
+		icon: "16",
+		typography: {
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"},
+		radius: "4"
+	},
+	md: {
+		height: "36",
+		paddingX: "16",
+		gap: "12",
+		icon: "20",
+		typography: {
+			fontWeight: "400",
+			fontSize: "14",
+			lineHeight: "24"
+		},
+		radius: "6"
+	},
+	border: {
+		"default": "#AAAAAA",
+		focus: "#0075FF"},
+	bg: {
+		"default": "#FFFFFF"},
+	icon: {
+		"default": "#888888",
+		disabled: "#BBBBBB"
+	},
+	text: {
+		"default": "#222222",
+		hint: "#555555",
+		disabled: "#888888"
+	},
+	calendar: {
+		bg: "#FFFFFF",
+		paddingXY: "24",
+		gap: "12",
+		radius: "8",
+		header: {
+			gap: "8",
+			divider: "#E1E1E1",
+			typography: {
+				fontWeight: "500",
+				fontSize: "14",
+				lineHeight: "24"
+			}
+		},
+		week: {
+			typography: {
+				fontWeight: "400",
+				fontSize: "12",
+				lineHeight: "20"},
+			color: "#888888"
+		},
+		grid: {
+			rowGap: "4"
+		},
+		day: {
+			width: "40",
+			circle: {
+				size: "32",
+				radius: "9999"
+			},
+			"default": {
+				text: "#222222"
+			},
+			hover: {
+				text: "#222222",
+				border: "#0075FF"
+			},
+			select: {
+				bg: "#0075FF",
+				text: "#FFFFFF"
+			},
+			disabled: {
+				text: "#BBBBBB"
+			},
+			typography: {
+				"default": {
+					fontWeight: "400",
+					fontSize: "14",
+					lineHeight: "24"
+				},
+				bold: {
+					fontWeight: "700"}
+			},
+			dot: {
+				size: "6",
+				gap: "2",
+				paddingY: "4"
+			}
+		},
+		range: {
+			bg: "#D9EAFF",
+			height: "32",
+			panelGap: "24",
+			divider: "#E1E1E1"},
+		legend: {
+			typography: {
+				fontWeight: "400",
+				fontSize: "11",
+				lineHeight: "18"},
+			gap: "4",
+			group: {
+				gap: "12"
+			}
+		}
+	}
+};
+var datepickerTokens = {
+	datepicker: datepicker
 };
 
-const colors = rawColors;
-// 주어진 문자열이 color.json의 키이면 매핑된 HEX를 반환하고,
-// 아닐 경우 원문 그대로를 반환합니다. 값이 falsy면 기본 색상으로 대체합니다.
-function resolveColor(input, fallback = '#025497') {
-    if (input === null || input === undefined || input === '')
-        return fallback;
-    const mapped = colors[input];
-    return mapped !== undefined && mapped !== '' ? mapped : input;
-}
+const CALENDAR_LAYOUT = {
+    bg: datepickerTokens.datepicker.calendar.bg,
+    paddingXY: datepickerTokens.datepicker.calendar.paddingXY,
+    gap: datepickerTokens.datepicker.calendar.gap,
+    radius: datepickerTokens.datepicker.calendar.radius,
+    header: {
+        gap: datepickerTokens.datepicker.calendar.header.gap,
+        divider: datepickerTokens.datepicker.calendar.header.divider,
+        fontSize: datepickerTokens.datepicker.calendar.header.typography.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.header.typography.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.header.typography.fontWeight,
+    },
+    week: {
+        fontSize: datepickerTokens.datepicker.calendar.week.typography.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.week.typography.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.week.typography.fontWeight,
+        color: datepickerTokens.datepicker.calendar.week.color,
+    },
+    grid: {
+        rowGap: datepickerTokens.datepicker.calendar.grid.rowGap,
+    },
+    day: {
+        size: datepickerTokens.datepicker.calendar.day.width,
+        circleSize: datepickerTokens.datepicker.calendar.day.circle.size,
+        circleRadius: datepickerTokens.datepicker.calendar.day.circle.radius,
+        defaultText: datepickerTokens.datepicker.calendar.day.default.text,
+        hoverText: datepickerTokens.datepicker.calendar.day.hover.text,
+        hoverBorder: datepickerTokens.datepicker.calendar.day.hover.border,
+        selectBg: datepickerTokens.datepicker.calendar.day.select.bg,
+        selectText: datepickerTokens.datepicker.calendar.day.select.text,
+        disabledText: datepickerTokens.datepicker.calendar.day.disabled.text,
+        fontSize: datepickerTokens.datepicker.calendar.day.typography.default.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.day.typography.default.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.day.typography.default.fontWeight,
+        boldFontWeight: datepickerTokens.datepicker.calendar.day.typography.bold.fontWeight,
+        dot: {
+            size: datepickerTokens.datepicker.calendar.day.dot.size,
+            gap: datepickerTokens.datepicker.calendar.day.dot.gap,
+            paddingY: datepickerTokens.datepicker.calendar.day.dot.paddingY,
+        },
+    },
+    legend: {
+        fontSize: datepickerTokens.datepicker.calendar.legend.typography.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.legend.typography.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.legend.typography.fontWeight,
+        gap: datepickerTokens.datepicker.calendar.legend.gap,
+        groupGap: datepickerTokens.datepicker.calendar.legend.group.gap,
+    },
+};
+const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
 
-const sdCalendarCss = () => `.sd-calendar.sc-sd-calendar{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;background:white}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav.sc-sd-calendar,.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav.sc-sd-calendar{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav.sc-sd-calendar button.sc-sd-calendar,.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav.sc-sd-calendar button.sc-sd-calendar{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav__current.sc-sd-calendar{width:40px;text-align:center}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav__current.sc-sd-calendar{width:100px;text-align:center}.sd-calendar.sc-sd-calendar .sd-calendar__days.sc-sd-calendar{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-calendar.sc-sd-calendar .sd-calendar__days.sc-sd-calendar .day.sc-sd-calendar{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-calendar.sc-sd-calendar .sd-calendar__body.sc-sd-calendar{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));grid-auto-rows:min-content}.sd-calendar.sc-sd-calendar .sd-calendar__cell.sc-sd-calendar{display:flex;flex-direction:column;align-items:center}.sd-calendar.sc-sd-calendar .sd-calendar__dots.sc-sd-calendar{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;align-items:center;min-height:8px;max-width:28px}.sd-calendar.sc-sd-calendar .sd-calendar__dot.sc-sd-calendar{width:5px;height:5px;border-radius:50%;display:inline-block}.sd-calendar.sc-sd-calendar .sd-calendar__legend.sc-sd-calendar{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:16px;padding:12px 5px 0;border-top:1px solid #E5E5E5}.sd-calendar.sc-sd-calendar .sd-calendar__legend-item.sc-sd-calendar{display:flex;align-items:center;gap:4px}.sd-calendar.sc-sd-calendar .sd-calendar__legend-dot.sc-sd-calendar{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}.sd-calendar.sc-sd-calendar .sd-calendar__legend-label.sc-sd-calendar{font-size:11px;color:#888888;line-height:1}`;
+const sdCalendarCss = () => `sd-calendar{display:block}sd-calendar .sd-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);width:328px;min-height:328px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-calendar .sd-calendar__header{display:flex;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-calendar .sd-calendar__nav-group-month{width:100%}sd-calendar .sd-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-calendar .sd-calendar__label-month{width:100%}sd-calendar .sd-calendar__divider{display:inline-block;width:1px;height:16px;background:var(--calendar-header-divider)}sd-calendar .sd-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-calendar .sd-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-calendar .sd-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-calendar .sd-calendar__day{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;width:var(--calendar-day-size);min-height:var(--calendar-day-circle-size);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__day-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-calendar .sd-calendar__day:not(:disabled):hover .sd-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-calendar .sd-calendar__day--today .sd-calendar__day-circle{font-weight:700}sd-calendar .sd-calendar__day--selected .sd-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--selected:not(:disabled):hover .sd-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--disabled{color:var(--calendar-day-disabled-text);background:none !important;cursor:not-allowed}sd-calendar .sd-calendar__day--empty{visibility:hidden;pointer-events:none}sd-calendar .sd-calendar__dot-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--calendar-day-dot-gap);width:100%;padding-top:var(--calendar-day-dot-padding-y);padding-bottom:var(--calendar-day-dot-padding-y)}sd-calendar .sd-calendar__dot{display:inline-block;width:var(--calendar-day-dot-size);height:var(--calendar-day-dot-size);border-radius:50%}sd-calendar .sd-calendar__divider-bottom{display:block;width:100%;height:1px;background:var(--calendar-header-divider)}sd-calendar .sd-calendar__legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:var(--calendar-legend-group-gap);row-gap:4px;font-size:var(--calendar-legend-font-size);line-height:var(--calendar-legend-line-height);font-weight:var(--calendar-legend-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__legend-item{display:inline-flex;align-items:center;gap:var(--calendar-legend-gap)}sd-calendar .sd-calendar__legend-dot{display:inline-block;width:var(--calendar-day-dot-size);height:var(--calendar-day-dot-size);border-radius:50%;flex-shrink:0}sd-calendar .sd-calendar__legend-label{display:inline-block}`;
 
-const DEFAULT_COLORS = [
-    'brilliantblue_75',
-    'red_60',
-    'green_65',
-    'orange_60',
-    'steelblue_65',
-    'yellow_45',
-    'oceanblue_65',
-    'olive_55',
-];
 class SdCalendar {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.select = createEvent(this, "sdSelect", 7);
+        this.update = createEvent(this, "sdUpdate", 7);
         this.viewChange = createEvent(this, "sdViewChange", 7);
     }
     value = null;
     selectable;
     events;
-    eventColors;
     currentYear;
     currentMonth;
-    eventsRevision = 0;
-    select;
+    update;
     viewChange;
     dateUtil = useDatePicker();
+    _eventMapCache;
+    get eventMap() {
+        const cache = this._eventMapCache;
+        if (cache && cache.src === this.events)
+            return cache.map;
+        const map = new Map();
+        (this.events ?? []).forEach(g => g.dates.forEach(d => {
+            const arr = map.get(d) ?? [];
+            arr.push({ color: g.color, label: g.label });
+            map.set(d, arr);
+        }));
+        this._eventMapCache = { src: this.events, map };
+        return map;
+    }
+    get legendItems() {
+        const seen = new Set();
+        const out = [];
+        (this.events ?? []).forEach(g => {
+            const key = `${g.color}|${g.label}`;
+            if (seen.has(key))
+                return;
+            seen.add(key);
+            out.push({ color: g.color, label: g.label });
+        });
+        return out;
+    }
     componentWillLoad() {
-        this.initCalendar();
+        this.syncViewFromValue();
     }
     handleValueChange() {
-        this.initCalendar();
-    }
-    handleEventsChange() {
-        this.eventsRevision = this.eventsRevision + 1;
+        this.syncViewFromValue();
     }
-    initCalendar() {
+    syncViewFromValue() {
         const base = this.value || today;
         const [year, month] = base.split('-').map(Number);
         this.currentYear = year;
         this.currentMonth = month;
     }
-    get calendar() {
-        return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);
+    formatDate(year, month, day) {
+        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    }
+    get cells() {
+        const year = this.currentYear;
+        const month = this.currentMonth;
+        const firstDayIndex = new Date(year, month - 1, 1).getDay();
+        const daysInCurrent = new Date(year, month, 0).getDate();
+        const prevMonth = month === 1 ? 12 : month - 1;
+        const prevYear = month === 1 ? year - 1 : year;
+        const daysInPrev = new Date(prevYear, prevMonth, 0).getDate();
+        const nextMonth = month === 12 ? 1 : month + 1;
+        const nextYear = month === 12 ? year + 1 : year;
+        const cells = [];
+        for (let i = firstDayIndex - 1; i >= 0; i--) {
+            const day = daysInPrev - i;
+            cells.push({
+                date: this.formatDate(prevYear, prevMonth, day),
+                day,
+                inCurrentMonth: false,
+            });
+        }
+        for (let day = 1; day <= daysInCurrent; day++) {
+            cells.push({
+                date: this.formatDate(year, month, day),
+                day,
+                inCurrentMonth: true,
+            });
+        }
+        const remaining = (7 - (cells.length % 7)) % 7;
+        for (let day = 1; day <= remaining; day++) {
+            cells.push({
+                date: this.formatDate(nextYear, nextMonth, day),
+                day,
+                inCurrentMonth: false,
+            });
+        }
+        return cells;
+    }
+    emitViewChange() {
+        this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
     }
-    handleUpdateMonth(type) {
-        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, type);
+    goPrevYear = (event) => {
+        event.stopPropagation();
+        this.currentYear -= 1;
+        this.emitViewChange();
+    };
+    goNextYear = (event) => {
+        event.stopPropagation();
+        this.currentYear += 1;
+        this.emitViewChange();
+    };
+    goPrevMonth = (event) => {
+        event.stopPropagation();
+        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'prev');
         this.currentYear = newYear;
         this.currentMonth = newMonth;
-        this.viewChange.emit({ year: newYear, month: newMonth });
-    }
-    handleDateClick(day) {
-        if (day === 0)
-            return;
-        const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);
-        this.value = date;
-        this.select.emit(date);
-    }
-    isDisabledDate(date) {
-        if (this.selectable === undefined)
+        this.emitViewChange();
+    };
+    goNextMonth = (event) => {
+        event.stopPropagation();
+        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'next');
+        this.currentYear = newYear;
+        this.currentMonth = newMonth;
+        this.emitViewChange();
+    };
+    isDisabled(date) {
+        if (!this.selectable)
             return false;
-        const [startSelectable, endSelectable] = this.selectable;
-        if (startSelectable !== '' && endSelectable !== '') {
-            return date < startSelectable || date > endSelectable;
-        }
-        if (startSelectable !== '') {
-            return date < startSelectable;
-        }
-        if (endSelectable !== '') {
-            return date > endSelectable;
-        }
+        const [start, end] = this.selectable;
+        if (start !== '' && date < start)
+            return true;
+        if (end !== '' && date > end)
+            return true;
         return false;
     }
-    getEventColor(eventName) {
-        if (this.eventColors?.[eventName] !== undefined && this.eventColors[eventName] !== '') {
-            return resolveColor(this.eventColors[eventName]);
-        }
-        const allEventNames = this.getAllEventNames();
-        const index = allEventNames.indexOf(eventName);
-        return resolveColor(DEFAULT_COLORS[index % DEFAULT_COLORS.length]);
-    }
-    getAllEventNames() {
-        const names = new Set();
-        if (this.eventColors) {
-            for (const name of Object.keys(this.eventColors)) {
-                names.add(name);
-            }
-        }
-        if (this.events) {
-            for (const dateEvents of Object.values(this.events)) {
-                for (const name of dateEvents) {
-                    names.add(name);
-                }
-            }
-        }
-        return Array.from(names);
-    }
-    getEventsForDate(date) {
-        return this.events?.[date] ?? [];
+    handleDayClick(cell) {
+        if (this.isDisabled(cell.date))
+            return;
+        this.value = cell.date;
+        this.update.emit(cell.date);
     }
     render() {
-        const allEventNames = this.getAllEventNames();
-        return (hAsync("div", { key: '3c3a6af518a3e96dd5d5d553ab2a00b9dd882221', class: "sd-calendar" }, hAsync("div", { key: '660e96fcefe539b69ae7b69bb7a7eb209f40b02f', class: "sd-calendar__header" }, hAsync("div", { key: '609b4d2e552adb526deefbf0719284c94ab01c21', class: "year-nav" }, hAsync("button", { key: 'dc80f2e4fa441b9ed2e0a475f7982e7339c0cda7', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
-                this.currentYear = this.currentYear - 1;
-                this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, hAsync("sd-icon", { key: 'ff62edabb67364704a4bfbcfc6f1658ad3d72408', name: "arrowLeft", size: "12", color: "grey_45" })), hAsync("span", { key: '0829c746b8537196652e7c40b3babea14ae8053e', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: '3d288e5091445f2ed429de4aebb0d03f29eb6cc8', type: "button", name: "next-year", title: "Next Year", onClick: () => {
-                this.currentYear = this.currentYear + 1;
-                this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, hAsync("sd-icon", { key: '5546ced1930082c68035db8b506b6ef2e953e305', name: "arrowRight", size: "12", color: "grey_45" }))), hAsync("div", { key: '1db95c9f31c1a11b58a6f1ce4a13b9d6388f7994', class: "month-nav" }, hAsync("button", { key: '2c5659945f3e0807a57ba22eb34576184e6ebf50', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '7994e2bf63fc45ffb7d29b49ad279223a1a12a98', name: "arrowLeft", size: "12", color: "grey_45" })), hAsync("span", { key: 'a8afd7592b3fba13a4560387bb759f4858273a85', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: 'b3d21b13823bd674c43c1782b66df38010fcfa59', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: '8605340fe8128b6a55328c97dc84481092009c76', name: "arrowRight", size: "12", color: "grey_45" })))), hAsync("div", { key: '9312ff7f3af76aced7189f121c71ff252a92a71d', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: 'cb93d417204b3bad65074e06e491038fe06b1389', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
-            ...this.calendar.prevMonthDays,
-            ...this.calendar.days,
-            ...this.calendar.afterMonthDays,
-        ].map((day, idx) => {
-            const formattedDate = this.dateUtil.formatDate(this.currentYear, this.currentMonth, Number(day));
-            const dateEvents = day !== 0 ? this.getEventsForDate(formattedDate) : [];
-            const uniqueEvents = [...new Set(dateEvents)];
-            return (hAsync("div", { class: "sd-calendar__cell", key: `${day}_${idx}` }, hAsync("sd-date-box", { date: day === 0 ? '' : Number(day), selected: this.value === formattedDate, isToday: today === formattedDate, disabled: day === 0 ? true : this.isDisabledDate(formattedDate), onClick: !this.isDisabledDate(formattedDate) && day !== 0
-                    ? () => this.handleDateClick(Number(day))
-                    : undefined }), this.events !== undefined && (hAsync("div", { class: "sd-calendar__dots" }, uniqueEvents.map(eventName => (hAsync("span", { key: eventName, class: "sd-calendar__dot", style: { backgroundColor: this.getEventColor(eventName) } })))))));
-        })), allEventNames.length > 0 && (hAsync("div", { key: '0556e06bcd0bab75b61c60181d9b203cb6ad4741', class: "sd-calendar__legend" }, allEventNames.map(name => (hAsync("div", { key: name, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), hAsync("span", { class: "sd-calendar__legend-label" }, name))))))));
+        const cssVars = {
+            '--calendar-bg': CALENDAR_LAYOUT.bg,
+            '--calendar-padding': `${CALENDAR_LAYOUT.paddingXY}px`,
+            '--calendar-gap': `${CALENDAR_LAYOUT.gap}px`,
+            '--calendar-radius': `${CALENDAR_LAYOUT.radius}px`,
+            '--calendar-header-gap': `${CALENDAR_LAYOUT.header.gap}px`,
+            '--calendar-header-divider': CALENDAR_LAYOUT.header.divider,
+            '--calendar-header-font-size': `${CALENDAR_LAYOUT.header.fontSize}px`,
+            '--calendar-header-line-height': `${CALENDAR_LAYOUT.header.lineHeight}px`,
+            '--calendar-header-font-weight': CALENDAR_LAYOUT.header.fontWeight,
+            '--calendar-week-font-size': `${CALENDAR_LAYOUT.week.fontSize}px`,
+            '--calendar-week-line-height': `${CALENDAR_LAYOUT.week.lineHeight}px`,
+            '--calendar-week-font-weight': CALENDAR_LAYOUT.week.fontWeight,
+            '--calendar-week-color': CALENDAR_LAYOUT.week.color,
+            '--calendar-grid-row-gap': `${CALENDAR_LAYOUT.grid.rowGap}px`,
+            '--calendar-day-size': `${CALENDAR_LAYOUT.day.size}px`,
+            '--calendar-day-circle-size': `${CALENDAR_LAYOUT.day.circleSize}px`,
+            '--calendar-day-circle-radius': `${CALENDAR_LAYOUT.day.circleRadius}px`,
+            '--calendar-day-text': CALENDAR_LAYOUT.day.defaultText,
+            '--calendar-day-hover-text': CALENDAR_LAYOUT.day.hoverText,
+            '--calendar-day-hover-border': CALENDAR_LAYOUT.day.hoverBorder,
+            '--calendar-day-select-bg': CALENDAR_LAYOUT.day.selectBg,
+            '--calendar-day-select-text': CALENDAR_LAYOUT.day.selectText,
+            '--calendar-day-disabled-text': CALENDAR_LAYOUT.day.disabledText,
+            '--calendar-day-font-size': `${CALENDAR_LAYOUT.day.fontSize}px`,
+            '--calendar-day-line-height': `${CALENDAR_LAYOUT.day.lineHeight}px`,
+            '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
+            '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
+            '--calendar-day-dot-size': `${CALENDAR_LAYOUT.day.dot.size}px`,
+            '--calendar-day-dot-gap': `${CALENDAR_LAYOUT.day.dot.gap}px`,
+            '--calendar-day-dot-padding-y': `${CALENDAR_LAYOUT.day.dot.paddingY}px`,
+            '--calendar-legend-font-size': `${CALENDAR_LAYOUT.legend.fontSize}px`,
+            '--calendar-legend-line-height': `${CALENDAR_LAYOUT.legend.lineHeight}px`,
+            '--calendar-legend-font-weight': CALENDAR_LAYOUT.legend.fontWeight,
+            '--calendar-legend-gap': `${CALENDAR_LAYOUT.legend.gap}px`,
+            '--calendar-legend-group-gap': `${CALENDAR_LAYOUT.legend.groupGap}px`,
+        };
+        const eventMap = this.eventMap;
+        const legend = this.legendItems;
+        return (hAsync("div", { key: '66c0bec57c13af12b05f2e90fbc5e1674ab052c8', class: "sd-calendar", style: cssVars }, hAsync("div", { key: '4df4f1c6d1ddcbe1478a69a481a228e66fc33c0a', class: "sd-calendar__header" }, hAsync("div", { key: '378c04444b3ddcc7df92ecce0f49056e919cd8e5', class: "sd-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '47426c62a26b05a9db58144acc33770713e7fce4', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '3b32e76a8a35705d820803c0b747829370079324', class: "sd-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '2e890a2cea91c9f49a03f0db3a4b943c707e312e', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '795bb8452e75303c25a8dc6d95f819f1e42f7f49', class: "sd-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '6df460ec38917c51eff851732c7f37b7e09475f6', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '36ef9dfdcfac5d9da08d05ca357fc9ec4100af4f', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: 'b2e0cc74570724c0d97fb2afbcb775c0794583af', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '4c45467356411f7a5d137c19931d8fc62084c742', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'e1637a39795fb44bd33d138c8b244cc15b5f85f6', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-calendar__week-cell" }, label)))), hAsync("div", { key: '45642dc93b1373dc760f64ba74dd931e651279dd', class: "sd-calendar__grid" }, this.cells.map(cell => {
+            const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
+            const isToday = cell.inCurrentMonth && today === cell.date;
+            const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
+            const dayEvents = cell.inCurrentMonth ? eventMap.get(cell.date) : undefined;
+            return (hAsync("button", { type: "button", key: cell.date, class: {
+                    'sd-calendar__day': true,
+                    'sd-calendar__day--empty': !cell.inCurrentMonth,
+                    'sd-calendar__day--today': isToday,
+                    'sd-calendar__day--selected': isSelected,
+                    'sd-calendar__day--disabled': isDisabled,
+                }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, hAsync("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), dayEvents && dayEvents.length > 0 && (hAsync("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents.map((ev, i) => (hAsync("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
+        })), legend.length > 0 && [
+            hAsync("span", { key: '0872cb7627db7d33721fbd1e1c9a601bd3c6c3e1', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
+            hAsync("div", { key: 'd9c6be0684720aa9d2af24b2d0cf372a036dc8d5', class: "sd-calendar__legend" }, legend.map(item => (hAsync("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), hAsync("span", { class: "sd-calendar__legend-label" }, item.label))))),
+        ]));
     }
     static get watchers() { return {
         "value": [{
                 "handleValueChange": 0
-            }],
-        "events": [{
-                "handleEventsChange": 0
-            }],
-        "eventColors": [{
-                "handleEventsChange": 0
             }]
     }; }
     static get style() { return sdCalendarCss(); }
     static get cmpMeta() { return {
-        "$flags$": 514,
+        "$flags$": 512,
         "$tagName$": "sd-calendar",
         "$members$": {
-            "value": [1537],
+            "value": [1025],
             "selectable": [16],
             "events": [16],
-            "eventColors": [16],
             "currentYear": [32],
-            "currentMonth": [32],
-            "eventsRevision": [32]
+            "currentMonth": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["value", "value"]]
+        "$attrsToReflect$": []
     }; }
 }
 
@@ -6975,7 +6940,7 @@ class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (hAsync(Fragment, { key: '2700ffa3af5b6b35882c396a838d9da2e866ee4b' }, hAsync("div", { key: '3d3aeaac318fc089c42ae4348bc72015d4476276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'e72f00bc8c209644baf5f431ce485fb5b691f354' }))));
+        return (hAsync(Fragment, { key: '61c364f88b03eb56b60c660a58533f417d209e6a' }, hAsync("div", { key: 'dee3671e757c273ffec06a15a0191a798280522c', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'f991bf5df95f8c1bac417aa4e70f40cf68624fb8' }))));
     }
     static get style() { return sdCardCss(); }
     static get cmpMeta() { return {
@@ -7179,13 +7144,13 @@ class SdCheckbox {
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (hAsync("label", { key: '6b1ad950ce2f0b8e734efab6889a46064f7ef32a', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: 'ee2fd70d61db2a5de6eab26dc07128e6158540e5', type: "checkbox", ref: el => {
+        return (hAsync("label", { key: '6fb506c448a5968d403f779d113fd60857901982', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: 'fb08f531416255b8886d2bd2c21c3f62e8a9d47d', 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' }), hAsync("div", { key: '234e0e4100da6f1a5f65fb4f32cb4d8e1ba018fd', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
+            }, 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' }), hAsync("div", { key: 'e49eb38375ba680e08510f83a15ce8a6bbecd4b8', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
                 ? CHECKBOX_COLORS.checked.iconDisabled
                 : this.inverse
                     ? CHECKBOX_COLORS.checked.iconInverse
-                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '15afb8e3b31201febd15bb85d24ee9c9b246d1d0', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '92bc308561b0a7653926d751d029d80c38844b07', class: "sd-checkbox__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{
@@ -7499,7 +7464,7 @@ class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (hAsync("span", { key: '0addb8566b639d05921b9320b99abab7f1d67899', class: {
+        return (hAsync("span", { key: '3cd683af3aed7cc6e549c5fc5da1e00cda2dc2a0', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,
@@ -7652,7 +7617,7 @@ class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (hAsync(Host, { key: 'f92bf4d6e4f1133c4465a4fec7b2bad4549a6d06', style: hostStyle }, hAsync("svg", { key: '669fa503cc6007f48f35474b08e4359de695026d', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: '020c7d840a6592d7705b65b14d27e3b5752629bf', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: 'e409da4a5c34adcd8744f16040ae9d5d6019a415', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: '91c0b91e69293b67c8a0ad67a6d4b9e9db5c6d4a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: '03a5bee22a2e2f1b4ba75dbeca2ef5b4b9840aeb', class: "sd-circle-progress__label" }, this.label)));
+        return (hAsync(Host, { key: 'd4ace6f784fd64a45baa746870a84a88b4911cf8', style: hostStyle }, hAsync("svg", { key: '08aef376ac746abf1a9b404e37703a862f956a08', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: '42411ef6f92f6427309d92dfad84ad7dc8f8c3bb', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: 'a0ae53ce4dfd557e980155cd0ff22ba064fe32dc', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: '0917cfd3aa460872fa4c35da61530e01080d6937', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: '051756bc7b20e87205b21c735b2827a81c2a17c9', class: "sd-circle-progress__label" }, this.label)));
     }
     static get style() { return sdCircleProgressCss(); }
     static get cmpMeta() { return {
@@ -7768,9 +7733,9 @@ class SdConfirmModal {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (hAsync("div", { key: '234455d93cbf02e5e70f78803914a8d91fbc4506', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: '298f5279400b19159a8c08d2c739ab27cf88811c', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '41d01e92ff59cea05a367797ebde71cd13baed1f', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'd6b65e3a858a96f628602101adaaee2b62727df4', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'ed708bffc95467faabf70a9c2beec46fc1ba090c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'e7a996bef926fa3741ed9f2ecc930a6961f4c6e4', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: 'b4ab9cc0cf91166d4e34a7b4726d62c3463a9766', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (hAsync("div", { key: '6dc337947f7c05799cf7c97d45b0df84c7976196', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'b584cc4bc00191f8488be7265249922110d57d90', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '470716bef879befd1d6746bc27c10fb74d61a2b6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '5b0113f13b219a2e14c5d45397c293baafc28a2c', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'cee18d1afde384523ca0f96f4138b8854f89cb5c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'b9466be3cbb635c9b8c0a50d7023b70fa31d9f0f', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: 'f3ea52c0261a63e75b42175c2e7c602e02f82636', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '1dd63a93ecd0eae9ecfb61a3b98f1e6d1ac2b4b3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: 'e22a5fc951054808bc70962e104eb3951b65ca61', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: 'c1f23f043eead651e71943c7e76585b9b7fe964a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '63952e8b1c2d912fed6489760c97a787eaf2a90d', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: 'fa33e4f68a1c36e197ff6a6f5629005fbbebcbc3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: '378162e9e44cefc4e61113ba927545040e6a6c6c', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: '8fb93a086c4a42063f53ed533be2774de31db81e', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '304c80915c9a7a685bddcf2d5edf4f56119860e8', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get style() { return sdConfirmModalCss(); }
     static get cmpMeta() { return {
@@ -7816,156 +7781,55 @@ class SdDateBox {
     click;
     mouseOver;
     handleClickDate() {
-        if (this.disabled || this.date === undefined || this.date === '' || this.date === 0)
-            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 (hAsync("div", { key: 'ce4341db137de36e872a0e166bd89c33ac1ba91b', 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(), onKeyDown: e => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    this.handleClickDate();
-                }
-            }, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, hAsync("div", { key: 'e641ed011f8e7e55cc589f566163899b26503717', class: "sd-date-box__content" }, hAsync("div", { key: 'e15a5fce460757d5cf486ec0678c2e604beab4db', class: "sd-date-box__label" }, this.date))));
-    }
-    static get style() { return sdDateBoxCss(); }
-    static get cmpMeta() { return {
-        "$flags$": 514,
-        "$tagName$": "sd-date-box",
-        "$members$": {
-            "date": [8],
-            "disabled": [4],
-            "selected": [4],
-            "isStartDate": [4, "is-start-date"],
-            "isEndDate": [4, "is-end-date"],
-            "isToday": [4, "is-today"],
-            "inRange": [4, "in-range"],
-            "type": [1]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const datepicker = {
-	sm: {
-		height: "28",
-		paddingX: "12",
-		gap: "8",
-		icon: "16",
-		typography: {
-			fontWeight: "400",
-			fontSize: "12",
-			lineHeight: "20"},
-		radius: "4"
-	},
-	md: {
-		height: "36",
-		paddingX: "16",
-		gap: "12",
-		icon: "20",
-		typography: {
-			fontWeight: "400",
-			fontSize: "14",
-			lineHeight: "24"
-		},
-		radius: "6"
-	},
-	border: {
-		"default": "#AAAAAA",
-		focus: "#0075FF"},
-	bg: {
-		"default": "#FFFFFF"},
-	icon: {
-		"default": "#888888",
-		disabled: "#BBBBBB"
-	},
-	text: {
-		"default": "#222222",
-		hint: "#555555",
-		disabled: "#888888"
-	},
-	calendar: {
-		bg: "#FFFFFF",
-		paddingXY: "24",
-		gap: "12",
-		radius: "8",
-		header: {
-			gap: "8",
-			divider: "#E1E1E1",
-			typography: {
-				fontWeight: "500",
-				fontSize: "14",
-				lineHeight: "24"
-			}
-		},
-		week: {
-			typography: {
-				fontWeight: "400",
-				fontSize: "12",
-				lineHeight: "20"},
-			color: "#888888"
-		},
-		grid: {
-			rowGap: "4"
-		},
-		day: {
-			width: "40",
-			circle: {
-				size: "32",
-				radius: "9999"
-			},
-			"default": {
-				text: "#222222"
-			},
-			hover: {
-				text: "#222222",
-				border: "#0075FF"
-			},
-			select: {
-				bg: "#0075FF",
-				text: "#FFFFFF"
-			},
-			disabled: {
-				text: "#BBBBBB"
-			},
-			typography: {
-				"default": {
-					fontWeight: "400",
-					fontSize: "14",
-					lineHeight: "24"
-				},
-				bold: {
-					fontWeight: "700"}
-			}},
-		range: {
-			bg: "#D9EAFF",
-			height: "32",
-			panelGap: "24",
-			divider: "#E1E1E1"}}
-};
-var datepickerTokens = {
-	datepicker: datepicker
-};
+        if (this.disabled || this.date === undefined || this.date === '' || this.date === 0)
+            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 (hAsync("div", { key: 'ab09e8112e18b04dab2d171fa6dbd8554d11e57b', 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(), onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClickDate();
+                }
+            }, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, hAsync("div", { key: 'b7e418536d6de86ae4e8042a0fc59dece42f7489', class: "sd-date-box__content" }, hAsync("div", { key: '41f2b2136cc60e2d1a6664852a3fadf30413de0f', class: "sd-date-box__label" }, this.date))));
+    }
+    static get style() { return sdDateBoxCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 514,
+        "$tagName$": "sd-date-box",
+        "$members$": {
+            "date": [8],
+            "disabled": [4],
+            "selected": [4],
+            "isStartDate": [4, "is-start-date"],
+            "isEndDate": [4, "is-end-date"],
+            "isToday": [4, "is-today"],
+            "inRange": [4, "in-range"],
+            "type": [1]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
 
 const sm$3 = datepickerTokens.datepicker.sm;
 const md$3 = datepickerTokens.datepicker.md;
@@ -7997,44 +7861,6 @@ const DATEPICKER_COLORS = {
     icon: datepickerTokens.datepicker.icon,
     text: datepickerTokens.datepicker.text,
 };
-const CALENDAR_LAYOUT = {
-    bg: datepickerTokens.datepicker.calendar.bg,
-    paddingXY: datepickerTokens.datepicker.calendar.paddingXY,
-    gap: datepickerTokens.datepicker.calendar.gap,
-    radius: datepickerTokens.datepicker.calendar.radius,
-    header: {
-        gap: datepickerTokens.datepicker.calendar.header.gap,
-        divider: datepickerTokens.datepicker.calendar.header.divider,
-        fontSize: datepickerTokens.datepicker.calendar.header.typography.fontSize,
-        lineHeight: datepickerTokens.datepicker.calendar.header.typography.lineHeight,
-        fontWeight: datepickerTokens.datepicker.calendar.header.typography.fontWeight,
-    },
-    week: {
-        fontSize: datepickerTokens.datepicker.calendar.week.typography.fontSize,
-        lineHeight: datepickerTokens.datepicker.calendar.week.typography.lineHeight,
-        fontWeight: datepickerTokens.datepicker.calendar.week.typography.fontWeight,
-        color: datepickerTokens.datepicker.calendar.week.color,
-    },
-    grid: {
-        rowGap: datepickerTokens.datepicker.calendar.grid.rowGap,
-    },
-    day: {
-        size: datepickerTokens.datepicker.calendar.day.width,
-        circleSize: datepickerTokens.datepicker.calendar.day.circle.size,
-        circleRadius: datepickerTokens.datepicker.calendar.day.circle.radius,
-        defaultText: datepickerTokens.datepicker.calendar.day.default.text,
-        hoverText: datepickerTokens.datepicker.calendar.day.hover.text,
-        hoverBorder: datepickerTokens.datepicker.calendar.day.hover.border,
-        selectBg: datepickerTokens.datepicker.calendar.day.select.bg,
-        selectText: datepickerTokens.datepicker.calendar.day.select.text,
-        disabledText: datepickerTokens.datepicker.calendar.day.disabled.text,
-        fontSize: datepickerTokens.datepicker.calendar.day.typography.default.fontSize,
-        lineHeight: datepickerTokens.datepicker.calendar.day.typography.default.lineHeight,
-        fontWeight: datepickerTokens.datepicker.calendar.day.typography.default.fontWeight,
-        boldFontWeight: datepickerTokens.datepicker.calendar.day.typography.bold.fontWeight,
-    },
-};
-const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
 
 const sdDatePickerCss = () => `sd-date-picker{display:inline-flex}sd-date-picker sd-portal{display:none}sd-date-picker .sd-date-picker{position:relative;width:100%;height:100%}`;
 
@@ -8111,6 +7937,7 @@ class SdDatePicker {
         }
     };
     handleSelect = (e) => {
+        e.stopPropagation();
         this.closeDropdown();
         this.value = e.detail;
         const nextValue = this.value;
@@ -8134,9 +7961,9 @@ class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (hAsync("sd-field", { key: '7678d58f741276e9848e05759f5c41f576e7fe66', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '8b3d615b241860ec1fb314fa0eeef5f51ea32f43', class: "sd-date-picker", ref: el => {
+        return (hAsync("sd-field", { key: '825c845ea1ada63a9f21cfc43aad04a598325c13', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'b9dd1a8df29f340ad67331dbebd3ec71b79d128a', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("sd-date-picker-trigger", { key: '43185c67462cf0cb559c918e5f709723bf4d5aee', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '2cf151b52b3117de9c4d55bbc3c045b0a7b614e9', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: '9f77742d034dcb462eb1c4546b2c2a367544f97e', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, hAsync("sd-date-picker-trigger", { key: 'b9bed57fa4a2b06b004ec5a1b723ed5af25fda19', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '776e0ce183edd9c7903ce1a75208addc47c20408', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: 'f86b502f6b17ee9ff262c1a64e1b0e24defc1660', value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -8162,193 +7989,21 @@ class SdDatePicker {
             "errorMessage": [1, "error-message"],
             "rules": [16],
             "error": [1028],
-            "icon": [16],
-            "labelTooltip": [1, "label-tooltip"],
-            "labelTooltipProps": [16],
-            "name": [1],
-            "isOpen": [32],
-            "isAnimatingOut": [32],
-            "focused": [32],
-            "hovered": [32],
-            "sdValidate": [64],
-            "sdReset": [64],
-            "sdResetValidate": [64]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["size", "size"], ["placeholder", "placeholder"], ["disabled", "disabled"]]
-    }; }
-}
-
-const sdDatePickerCalendarCss = () => `sd-date-picker-calendar{display:block}sd-date-picker-calendar .sd-date-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:328px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-picker-calendar .sd-date-picker-calendar__header{display:flex;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-picker-calendar .sd-date-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-picker-calendar .sd-date-picker-calendar__nav-group-month{width:100%}sd-date-picker-calendar .sd-date-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-picker-calendar .sd-date-picker-calendar__label-month{width:100%}sd-date-picker-calendar .sd-date-picker-calendar__divider{display:inline-block;width:1px;height:16px;background:var(--calendar-header-divider)}sd-date-picker-calendar .sd-date-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-picker-calendar .sd-date-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-picker-calendar .sd-date-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-picker-calendar .sd-date-picker-calendar__day{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:32px;padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-picker-calendar .sd-date-picker-calendar__day-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-picker-calendar .sd-date-picker-calendar__day:not(:disabled):hover .sd-date-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-picker-calendar .sd-date-picker-calendar__day--today .sd-date-picker-calendar__day-circle{font-weight:700}sd-date-picker-calendar .sd-date-picker-calendar__day--selected .sd-date-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-picker-calendar .sd-date-picker-calendar__day--selected:not(:disabled):hover .sd-date-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-picker-calendar .sd-date-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);background:none !important;cursor:not-allowed}sd-date-picker-calendar .sd-date-picker-calendar__day--empty{visibility:hidden;pointer-events:none}`;
-
-class SdDatePickerCalendar {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.select = createEvent(this, "sdSelect", 7);
-        this.viewChange = createEvent(this, "sdViewChange", 7);
-    }
-    value = null;
-    selectable;
-    currentYear;
-    currentMonth;
-    select;
-    viewChange;
-    dateUtil = useDatePicker();
-    componentWillLoad() {
-        this.syncViewFromValue();
-    }
-    handleValueChange() {
-        this.syncViewFromValue();
-    }
-    syncViewFromValue() {
-        const base = this.value || today;
-        const [year, month] = base.split('-').map(Number);
-        this.currentYear = year;
-        this.currentMonth = month;
-    }
-    formatDate(year, month, day) {
-        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
-    }
-    get cells() {
-        const year = this.currentYear;
-        const month = this.currentMonth;
-        const firstDayIndex = new Date(year, month - 1, 1).getDay();
-        const daysInCurrent = new Date(year, month, 0).getDate();
-        const prevMonth = month === 1 ? 12 : month - 1;
-        const prevYear = month === 1 ? year - 1 : year;
-        const daysInPrev = new Date(prevYear, prevMonth, 0).getDate();
-        const nextMonth = month === 12 ? 1 : month + 1;
-        const nextYear = month === 12 ? year + 1 : year;
-        const cells = [];
-        for (let i = firstDayIndex - 1; i >= 0; i--) {
-            const day = daysInPrev - i;
-            cells.push({
-                date: this.formatDate(prevYear, prevMonth, day),
-                day,
-                inCurrentMonth: false,
-            });
-        }
-        for (let day = 1; day <= daysInCurrent; day++) {
-            cells.push({
-                date: this.formatDate(year, month, day),
-                day,
-                inCurrentMonth: true,
-            });
-        }
-        const remaining = (7 - (cells.length % 7)) % 7;
-        for (let day = 1; day <= remaining; day++) {
-            cells.push({
-                date: this.formatDate(nextYear, nextMonth, day),
-                day,
-                inCurrentMonth: false,
-            });
-        }
-        return cells;
-    }
-    emitViewChange() {
-        this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-    }
-    goPrevYear = (event) => {
-        event.stopPropagation();
-        this.currentYear -= 1;
-        this.emitViewChange();
-    };
-    goNextYear = (event) => {
-        event.stopPropagation();
-        this.currentYear += 1;
-        this.emitViewChange();
-    };
-    goPrevMonth = (event) => {
-        event.stopPropagation();
-        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'prev');
-        this.currentYear = newYear;
-        this.currentMonth = newMonth;
-        this.emitViewChange();
-    };
-    goNextMonth = (event) => {
-        event.stopPropagation();
-        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'next');
-        this.currentYear = newYear;
-        this.currentMonth = newMonth;
-        this.emitViewChange();
-    };
-    isDisabled(date) {
-        if (!this.selectable)
-            return false;
-        const [start, end] = this.selectable;
-        if (start !== '' && date < start)
-            return true;
-        if (end !== '' && date > end)
-            return true;
-        return false;
-    }
-    handleDayClick(cell) {
-        if (this.isDisabled(cell.date))
-            return;
-        this.select.emit(cell.date);
-    }
-    render() {
-        const cssVars = {
-            '--calendar-bg': CALENDAR_LAYOUT.bg,
-            '--calendar-padding': `${CALENDAR_LAYOUT.paddingXY}px`,
-            '--calendar-gap': `${CALENDAR_LAYOUT.gap}px`,
-            '--calendar-radius': `${CALENDAR_LAYOUT.radius}px`,
-            '--calendar-header-gap': `${CALENDAR_LAYOUT.header.gap}px`,
-            '--calendar-header-divider': CALENDAR_LAYOUT.header.divider,
-            '--calendar-header-font-size': `${CALENDAR_LAYOUT.header.fontSize}px`,
-            '--calendar-header-line-height': `${CALENDAR_LAYOUT.header.lineHeight}px`,
-            '--calendar-header-font-weight': CALENDAR_LAYOUT.header.fontWeight,
-            '--calendar-week-font-size': `${CALENDAR_LAYOUT.week.fontSize}px`,
-            '--calendar-week-line-height': `${CALENDAR_LAYOUT.week.lineHeight}px`,
-            '--calendar-week-font-weight': CALENDAR_LAYOUT.week.fontWeight,
-            '--calendar-week-color': CALENDAR_LAYOUT.week.color,
-            '--calendar-grid-row-gap': `${CALENDAR_LAYOUT.grid.rowGap}px`,
-            '--calendar-day-size': `${CALENDAR_LAYOUT.day.size}px`,
-            '--calendar-day-circle-size': `${CALENDAR_LAYOUT.day.circleSize}px`,
-            '--calendar-day-circle-radius': `${CALENDAR_LAYOUT.day.circleRadius}px`,
-            '--calendar-day-text': CALENDAR_LAYOUT.day.defaultText,
-            '--calendar-day-hover-text': CALENDAR_LAYOUT.day.hoverText,
-            '--calendar-day-hover-border': CALENDAR_LAYOUT.day.hoverBorder,
-            '--calendar-day-select-bg': CALENDAR_LAYOUT.day.selectBg,
-            '--calendar-day-select-text': CALENDAR_LAYOUT.day.selectText,
-            '--calendar-day-disabled-text': CALENDAR_LAYOUT.day.disabledText,
-            '--calendar-day-font-size': `${CALENDAR_LAYOUT.day.fontSize}px`,
-            '--calendar-day-line-height': `${CALENDAR_LAYOUT.day.lineHeight}px`,
-            '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
-            '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
-        };
-        return (hAsync("div", { key: '5fca5d51cbe5005cde3468c10f39397831371762', class: "sd-date-picker-calendar", style: cssVars }, hAsync("div", { key: '5b6a101b463b455bfc70f9b92665fe308f45773d', class: "sd-date-picker-calendar__header" }, hAsync("div", { key: '3fe7a4e416c632640371f9b3cb12baf72c7eab06', class: "sd-date-picker-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '1c71cf45dae23308ff901f08b606f0cfcdc7e5b4', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: 'aa9863d2cac5eb5d00a0d72570b216206b669f37', class: "sd-date-picker-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '941118e0c3cd37ed5decb2e91cfa738221f74958', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: 'e630c7269a617deeaa38cace0e2a91affb558688', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '45cfc135eeb6bf834cef92c1e36f2def4d7c2058', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '98483c6626ea13cdb78be806feaa1748d60b6a1a', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '9e6097a040679203117436966c246f00b94f5ff2', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '0ab7ccdae8678bb909aca74f4189a4426e51ec0b', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: '07763d55d00fd6c6b3523bbbb2e994a177a5b81c', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), hAsync("div", { key: '0304efaa140a8dba320e0e6791ef886bc77ac57b', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
-            const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
-            const isToday = cell.inCurrentMonth && today === cell.date;
-            const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
-            return (hAsync("button", { type: "button", key: cell.date, class: {
-                    'sd-date-picker-calendar__day': true,
-                    'sd-date-picker-calendar__day--empty': !cell.inCurrentMonth,
-                    'sd-date-picker-calendar__day--today': isToday,
-                    'sd-date-picker-calendar__day--selected': isSelected,
-                    'sd-date-picker-calendar__day--disabled': isDisabled,
-                }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, hAsync("span", { class: "sd-date-picker-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : '')));
-        }))));
-    }
-    static get watchers() { return {
-        "value": [{
-                "handleValueChange": 0
-            }]
-    }; }
-    static get style() { return sdDatePickerCalendarCss(); }
-    static get cmpMeta() { return {
-        "$flags$": 512,
-        "$tagName$": "sd-date-picker-calendar",
-        "$members$": {
-            "value": [1],
-            "selectable": [16],
-            "currentYear": [32],
-            "currentMonth": [32]
+            "icon": [16],
+            "labelTooltip": [1, "label-tooltip"],
+            "labelTooltipProps": [16],
+            "name": [1],
+            "isOpen": [32],
+            "isAnimatingOut": [32],
+            "focused": [32],
+            "hovered": [32],
+            "sdValidate": [64],
+            "sdReset": [64],
+            "sdResetValidate": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["size", "size"], ["placeholder", "placeholder"], ["disabled", "disabled"]]
     }; }
 }
 
@@ -8391,7 +8046,7 @@ class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (hAsync("div", { key: 'df53dd75ead71167d7089daab5718c7ff1c990ae', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (hAsync("div", { key: '57a23626b1a392be20dccead71b792590fab61b8', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -8399,7 +8054,7 @@ class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, hAsync("sd-icon", { key: '76f41c99e1695eaa191cbc81ae057e65cb78e955', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '4e1a4b2b41737f05dc1a4e642d317f5fc93bf9b2', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, hAsync("sd-icon", { key: 'd4bb58eb97f9f2b98c27315547a85b019530ce5e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '25222882fa966eb5d6ead15e62b65af26586afbd', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get style() { return sdDatePickerTriggerCss(); }
     static get cmpMeta() { return {
@@ -8528,9 +8183,9 @@ class SdDateRangePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (hAsync("sd-field", { key: '1c335b82235bc829f26b06d01c967d81268fc348', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '495f6e88d01bc6f19e57e04152e84bff2d0415d4', class: "sd-date-range-picker", ref: el => {
+        return (hAsync("sd-field", { key: '89eaeb8978796508650aec5f3ccdeb7df16fb6f4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'f3ce583e53edbc451ab6c0592c0ab2ed87e07a06', class: "sd-date-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("sd-date-picker-trigger", { key: '59c2d6ecdd7724e361ac4f6222d34d9ceca7ffd3', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '5ba7ab62c1205823fba496e984f4819dbb89064d', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: 'e6f84d99a4ceebee972900fd56593c18497cba9d', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, hAsync("sd-date-picker-trigger", { key: '53086fd3d15dc2c05364a66fdf767e09c6c19fac', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '5ee1499ee9a224a9c653095e9914ed20cbaca2a1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: '7c7479dacf57c996a708435857d2b5f7900509fd', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -8819,7 +8474,7 @@ class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (hAsync(Fragment, { key: '71f25effececd0b83d9b33201230dc615ba87a30' }, hAsync("div", { key: 'f075474fb0be9f8e8562a013532b3cdbaadee069', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '4dfa1d65b971f7d80f0799482c8ce41522200a94', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '20149f97a5115115cc49894383ca7f989ba2b904', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (hAsync(Fragment, { key: 'f871d59077f63aa2f7d1bbe857a9ff095331c82d' }, hAsync("div", { key: '47f4782b315450f07bccec8697d8e98a83e44faf', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: 'cf0eb07920b298f2fce001cc8246d51e1174c27d', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'e1d060092eb3b73c890bf0d62f6485ca2a09e187', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{
@@ -9180,7 +8835,7 @@ class SdDropdownButton extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (hAsync("div", { key: 'bef9cb5da07e02dd2a2a69f17bb71114045adace', class: "sd-dropdown-button" }, hAsync("button", { key: 'bfc671cd3d3cf8221886d7453674a2c07699440e', 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 (hAsync("div", { key: 'ac9063bf34834043d2c786b81fa487f004d54462', class: "sd-dropdown-button" }, hAsync("button", { key: 'cff62ed70794e18627b03c22d54accab9248b235', 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-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -9190,10 +8845,10 @@ class SdDropdownButton extends BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, hAsync("span", { key: '17bf00861dd721cbd41de9c92db9e58e2eb7399e', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: '218fe7ed965155abbf13e39c907b0c4e1a40004a', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: '17014bf0654e35a1665e36a9a65fa3f067b9f1b8', class: {
+            } }, hAsync("span", { key: '8c3c382c1b23f63be23936cca44175950fd636b8', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: '4b1e74dd6b5c680e07ef3b8391279ef4d9bb750d', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: '1018c43a428abe211536f4f3f8069b70a7ff1845', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, hAsync("sd-icon", { key: '89a4c971bbb929a1ed39048f390dbf63c92a4408', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, hAsync("sd-icon", { key: '64248aa427db42e8c8ef65d806befaeab0943059', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -9466,20 +9121,20 @@ class SdField {
                     : {}),
             }
             : {};
-        return (hAsync("div", { key: 'e7424031b85af429369fc9097f9cf7f5f2fd78e2', class: {
+        return (hAsync("div", { key: 'fa7d46fb1cdfa572c19fe5014c5f2df6579537fa', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: 'bc5d3ca5c30a93da12db8268a77cc29b8df1aea6', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '8ca4e32e27efce441f2b6afed9a0688190396da7', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '92d544710c5f49f17342c2c5d9f4e499e995b3b2', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '1740f6d0c385311cf714b7e64fd7f5513f758c3e', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, hAsync("div", { key: '8d63e16a5acc4e09c58ae7ad27ec8dc9707075dc', class: {
+                : {} }, hAsync("div", { key: '1364e46db78dc55b1139035296d2e6f33cb8fbb6', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && hAsync("div", { key: 'bffe6c058ea37692dd03d59983b62f4488e76ce1', class: "sd-field__addon" }, addon), hAsync("slot", { key: '448c1a5a607f9aec68303afb736a4d360bf30452' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && hAsync("div", { key: '638c670ec084e51af7d9ec566c93e00a3d158eef', class: "sd-field__addon" }, addon), hAsync("slot", { key: 'e1b00ee9db0a0e8dade33166dc908183304bc37f' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -9965,7 +9620,7 @@ class SdFloatingPopover {
         }
     }
     render() {
-        return hAsync("slot", { key: 'b70d70c2ed9d18a191c939b84d5728eb1c450fd0' });
+        return hAsync("slot", { key: 'c4543ebf24c83fc67bdda0340adb00f02761b62e' });
     }
     static get style() { return sdFloatingPortalCss(); }
     static get cmpMeta() { return {
@@ -10061,7 +9716,7 @@ class SdForm {
         this.sdSubmit.emit();
     }
     render() {
-        return (hAsync("form", { key: '197851b7d0ac6af39be67a2b5d2846370cc3ed39', onSubmit: e => this.onSubmit(e), class: this.formClass }, hAsync("slot", { key: '33adfc4e9d40aa48b22755a98429ab8e0a32792f' })));
+        return (hAsync("form", { key: 'd64dc85bce08da6a18f7dac5038a89f8bd7b5f01', onSubmit: e => this.onSubmit(e), class: this.formClass }, hAsync("slot", { key: 'a0c6d177cc4c656369714ff0ebc5269255d2c2b5' })));
     }
     static get cmpMeta() { return {
         "$flags$": 772,
@@ -10240,7 +9895,7 @@ class SdGhostButton {
             ? GHOST_BUTTON_DISABLED_COLORS[intent]
             : GHOST_BUTTON_CONTENT_COLORS[intent];
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
-        return (hAsync("button", { key: '789d7ad03fd9fd3164bd76b4490c06d1a2ed5ca0', class: {
+        return (hAsync("button", { key: '0707c0067aded10ea53bffbca0dbddbfdef35dc6', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -10249,7 +9904,7 @@ class SdGhostButton {
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, hAsync("sd-icon", { key: '0cac7bcc4b6ad28d88c9ab4bc30e59dd92f45992', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, hAsync("sd-icon", { key: 'c362f7da310fc5b20fbbf0b08da4959b6f4a5374', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get style() { return sdGhostButtonCss(); }
     static get cmpMeta() { return {
@@ -10371,124 +10026,391 @@ const GUIDE_CONFIG = {
     },
 };
 
-const sdGuideCss = () => `@charset "UTF-8";sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide .sd-guide__button .sd-button{min-height:var(--sd-guide-button-height);padding:0 var(--sd-guide-button-padding-x);border-radius:var(--sd-guide-button-radius);border:var(--sd-guide-button-border-width) solid var(--sd-guide-button-border-color);background:var(--sd-guide-button-bg-default);color:var(--sd-guide-button-text-default) !important;transition:none;display:flex;align-items:center;gap:var(--sd-guide-button-gap);--sd-button-bg-hover:var(--sd-guide-button-bg-default);--sd-button-current-icon:var(--sd-guide-button-icon-color-default)}.sd-guide .sd-guide__button .sd-button .sd-button__content{color:var(--sd-guide-button-text-default) !important;gap:var(--sd-guide-button-gap)}.sd-guide .sd-guide__button .sd-button .sd-button__content .sd-button__label{margin-left:0;color:var(--sd-guide-button-text-default) !important;font-size:var(--sd-guide-button-font-size);font-weight:var(--sd-guide-button-font-weight);line-height:var(--sd-guide-button-line-height)}.sd-guide .sd-guide__button--type-notion .sd-button{--sd-button-current-icon:var(--sd-guide-button-icon-color-notion)}.sd-guide .sd-guide__button--active .sd-button{color:var(--sd-guide-button-text-active) !important;--sd-button-current-icon:var(--sd-guide-button-icon-color-active)}.sd-guide .sd-guide__button--active .sd-button .sd-button__content{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--active .sd-button .sd-button__content .sd-button__label{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--type-tip.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-tip);border-color:var(--sd-guide-button-bg-tip);--sd-button-bg-hover:var(--sd-guide-button-bg-tip)}.sd-guide .sd-guide__button--type-notion.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-notion);border-color:var(--sd-guide-button-bg-notion);--sd-button-bg-hover:var(--sd-guide-button-bg-notion)}.sd-guide__popup{position:relative;padding:var(--sd-guide-contents-padding-y) var(--sd-guide-contents-padding-x);border-radius:var(--sd-guide-contents-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:var(--sd-guide-contents-title-gap);margin-bottom:var(--sd-guide-contents-gap)}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;margin-bottom:0;font-size:var(--sd-guide-contents-title-font-size);font-weight:var(--sd-guide-contents-title-font-weight);line-height:var(--sd-guide-contents-title-line-height);color:var(--sd-guide-contents-text-color)}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height)}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height);margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-1:not(:first-child){margin-top:var(--sd-guide-contents-row-gap)}.sd-guide__popup__list__item--depth-2{margin-top:var(--sd-guide-contents-body-gap)}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
-
-const DEFAULT_LABEL_BY_TYPE = {
-    tip: '활용 TIP',
-    notion: '사용법 안내',
-};
-const ICON_BY_TYPE = {
-    tip: 'helpOutline',
-    notion: 'notion',
-};
-class SdGuide {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    type = 'tip';
-    label = '';
-    message = '';
-    url = '';
-    popupTitle = '';
-    popupWidth;
-    popupShow = false;
-    guideRef;
-    handleClickGuide = () => {
-        if (this.type === 'notion') {
-            if (this.url !== '') {
-                window.open(this.url, '_blank', 'noopener,noreferrer');
-            }
-            return;
-        }
-        this.popupShow = !this.popupShow;
-    };
-    closeDropdown = () => {
-        this.popupShow = false;
-    };
-    get guideStyle() {
-        const { button, contents } = GUIDE_CONFIG;
-        return {
-            '--sd-guide-button-height': button.height,
-            '--sd-guide-button-padding-x': button.paddingX,
-            '--sd-guide-button-radius': button.radius,
-            '--sd-guide-button-gap': button.gap,
-            '--sd-guide-button-font-size': button.fontSize,
-            '--sd-guide-button-font-weight': button.fontWeight,
-            '--sd-guide-button-line-height': button.lineHeight,
-            '--sd-guide-button-border-width': button.borderWidth,
-            '--sd-guide-button-border-color': button.borderColor,
-            '--sd-guide-button-bg-default': button.bgDefault,
-            '--sd-guide-button-bg-tip': button.bgTip,
-            '--sd-guide-button-bg-notion': button.bgNotion,
-            '--sd-guide-button-text-default': button.textDefault,
-            '--sd-guide-button-text-active': button.textActive,
-            '--sd-guide-button-icon-color-default': button.iconColorDefault,
-            '--sd-guide-button-icon-color-active': button.iconColorActive,
-            '--sd-guide-button-icon-color-notion': button.iconColorNotion,
-            '--sd-guide-contents-padding-x': contents.paddingX,
-            '--sd-guide-contents-padding-y': contents.paddingY,
-            '--sd-guide-contents-gap': contents.gap,
-            '--sd-guide-contents-row-gap': contents.rowGap,
-            '--sd-guide-contents-body-gap': contents.bodyGap,
-            '--sd-guide-contents-title-gap': contents.titleGap,
-            '--sd-guide-contents-radius': contents.radius,
-            '--sd-guide-contents-title-font-size': contents.titleFontSize,
-            '--sd-guide-contents-title-font-weight': contents.titleFontWeight,
-            '--sd-guide-contents-title-line-height': contents.titleLineHeight,
-            '--sd-guide-contents-body-font-size': contents.bodyFontSize,
-            '--sd-guide-contents-body-font-weight': contents.bodyFontWeight,
-            '--sd-guide-contents-body-line-height': contents.bodyLineHeight,
-            '--sd-guide-contents-text-color': contents.textColor,
-        };
-    }
-    render() {
-        const { contents } = GUIDE_CONFIG;
-        const isActive = this.popupShow;
-        const isNotion = (this.type ?? 'tip') === 'notion';
-        const defaultLabel = DEFAULT_LABEL_BY_TYPE[this.type ?? 'tip'];
-        const iconName = ICON_BY_TYPE[this.type ?? 'tip'];
-        const popupIconColor = isNotion ? contents.iconColorNotion : contents.iconColor;
-        const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
-        if (isActive)
-            buttonClasses.push('sd-guide__button--active');
-        return (hAsync("div", { key: '0003572d8025680df033b2619ad11d99ccc25a35', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: '01e15b072764f4244778c727445887326792ea45', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: 'd7fbe96ae73c3b35ce8ca673d19924b8b7503aae', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: 'e87cec81959c4c84a33c4c50fd40796d12ff7f4d', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '94499ea9e42b93fcec490a7ab9d7d9cccc7c1021', class: "sd-guide__popup", style: {
-                ...this.guideStyle,
-                width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
-            } }, hAsync("sd-ghost-button", { key: '712dc57cd85bd6929a2a1ef8221d29f46ecca686', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: 'd53aadc5d766fde09a6463c7e114030c37617545', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: 'dcb1fef4b2024f2b4584dc10c2dc54b28a0ce752', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: '00860dda925f2d9670a7f9e261241f3698dd513e', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: '8676741e6998ed10ba39148cfff1f101fda8daa3', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
-    }
-    // 현재 2depth까지만 스타일 적용
-    renderListItem(message, depth = 0) {
-        const listItems = [];
-        if (Array.isArray(message)) {
-            const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
-            listItems.push(...depthMsg.flat());
-        }
-        else {
-            listItems.push(this.renderLi(message, depth));
-        }
-        return listItems;
-    }
-    renderLi = (message, depth) => {
-        return (hAsync("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, hAsync("p", { innerHTML: message })));
-    };
-    static get style() { return sdGuideCss(); }
-    static get cmpMeta() { return {
-        "$flags$": 512,
-        "$tagName$": "sd-guide",
-        "$members$": {
-            "type": [513],
-            "label": [513],
-            "message": [1],
-            "url": [1],
-            "popupTitle": [1, "popup-title"],
-            "popupWidth": [2, "popup-width"],
-            "popupShow": [32]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["type", "type"], ["label", "label"]]
-    }; }
+const sdGuideCss = () => `@charset "UTF-8";sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide .sd-guide__button .sd-button{min-height:var(--sd-guide-button-height);padding:0 var(--sd-guide-button-padding-x);border-radius:var(--sd-guide-button-radius);border:var(--sd-guide-button-border-width) solid var(--sd-guide-button-border-color);background:var(--sd-guide-button-bg-default);color:var(--sd-guide-button-text-default) !important;transition:none;display:flex;align-items:center;gap:var(--sd-guide-button-gap);--sd-button-bg-hover:var(--sd-guide-button-bg-default);--sd-button-current-icon:var(--sd-guide-button-icon-color-default)}.sd-guide .sd-guide__button .sd-button .sd-button__content{color:var(--sd-guide-button-text-default) !important;gap:var(--sd-guide-button-gap)}.sd-guide .sd-guide__button .sd-button .sd-button__content .sd-button__label{margin-left:0;color:var(--sd-guide-button-text-default) !important;font-size:var(--sd-guide-button-font-size);font-weight:var(--sd-guide-button-font-weight);line-height:var(--sd-guide-button-line-height)}.sd-guide .sd-guide__button--type-notion .sd-button{--sd-button-current-icon:var(--sd-guide-button-icon-color-notion)}.sd-guide .sd-guide__button--active .sd-button{color:var(--sd-guide-button-text-active) !important;--sd-button-current-icon:var(--sd-guide-button-icon-color-active)}.sd-guide .sd-guide__button--active .sd-button .sd-button__content{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--active .sd-button .sd-button__content .sd-button__label{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--type-tip.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-tip);border-color:var(--sd-guide-button-bg-tip);--sd-button-bg-hover:var(--sd-guide-button-bg-tip)}.sd-guide .sd-guide__button--type-notion.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-notion);border-color:var(--sd-guide-button-bg-notion);--sd-button-bg-hover:var(--sd-guide-button-bg-notion)}.sd-guide__popup{position:relative;padding:var(--sd-guide-contents-padding-y) var(--sd-guide-contents-padding-x);border-radius:var(--sd-guide-contents-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:var(--sd-guide-contents-title-gap);margin-bottom:var(--sd-guide-contents-gap)}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;margin-bottom:0;font-size:var(--sd-guide-contents-title-font-size);font-weight:var(--sd-guide-contents-title-font-weight);line-height:var(--sd-guide-contents-title-line-height);color:var(--sd-guide-contents-text-color)}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height)}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height);margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-1:not(:first-child){margin-top:var(--sd-guide-contents-row-gap)}.sd-guide__popup__list__item--depth-2{margin-top:var(--sd-guide-contents-body-gap)}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
+
+const DEFAULT_LABEL_BY_TYPE = {
+    tip: '활용 TIP',
+    notion: '사용법 안내',
+};
+const ICON_BY_TYPE = {
+    tip: 'helpOutline',
+    notion: 'notion',
+};
+class SdGuide {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    type = 'tip';
+    label = '';
+    message = '';
+    url = '';
+    popupTitle = '';
+    popupWidth;
+    popupShow = false;
+    guideRef;
+    handleClickGuide = () => {
+        if (this.type === 'notion') {
+            if (this.url !== '') {
+                window.open(this.url, '_blank', 'noopener,noreferrer');
+            }
+            return;
+        }
+        this.popupShow = !this.popupShow;
+    };
+    closeDropdown = () => {
+        this.popupShow = false;
+    };
+    get guideStyle() {
+        const { button, contents } = GUIDE_CONFIG;
+        return {
+            '--sd-guide-button-height': button.height,
+            '--sd-guide-button-padding-x': button.paddingX,
+            '--sd-guide-button-radius': button.radius,
+            '--sd-guide-button-gap': button.gap,
+            '--sd-guide-button-font-size': button.fontSize,
+            '--sd-guide-button-font-weight': button.fontWeight,
+            '--sd-guide-button-line-height': button.lineHeight,
+            '--sd-guide-button-border-width': button.borderWidth,
+            '--sd-guide-button-border-color': button.borderColor,
+            '--sd-guide-button-bg-default': button.bgDefault,
+            '--sd-guide-button-bg-tip': button.bgTip,
+            '--sd-guide-button-bg-notion': button.bgNotion,
+            '--sd-guide-button-text-default': button.textDefault,
+            '--sd-guide-button-text-active': button.textActive,
+            '--sd-guide-button-icon-color-default': button.iconColorDefault,
+            '--sd-guide-button-icon-color-active': button.iconColorActive,
+            '--sd-guide-button-icon-color-notion': button.iconColorNotion,
+            '--sd-guide-contents-padding-x': contents.paddingX,
+            '--sd-guide-contents-padding-y': contents.paddingY,
+            '--sd-guide-contents-gap': contents.gap,
+            '--sd-guide-contents-row-gap': contents.rowGap,
+            '--sd-guide-contents-body-gap': contents.bodyGap,
+            '--sd-guide-contents-title-gap': contents.titleGap,
+            '--sd-guide-contents-radius': contents.radius,
+            '--sd-guide-contents-title-font-size': contents.titleFontSize,
+            '--sd-guide-contents-title-font-weight': contents.titleFontWeight,
+            '--sd-guide-contents-title-line-height': contents.titleLineHeight,
+            '--sd-guide-contents-body-font-size': contents.bodyFontSize,
+            '--sd-guide-contents-body-font-weight': contents.bodyFontWeight,
+            '--sd-guide-contents-body-line-height': contents.bodyLineHeight,
+            '--sd-guide-contents-text-color': contents.textColor,
+        };
+    }
+    render() {
+        const { contents } = GUIDE_CONFIG;
+        const isActive = this.popupShow;
+        const isNotion = (this.type ?? 'tip') === 'notion';
+        const defaultLabel = DEFAULT_LABEL_BY_TYPE[this.type ?? 'tip'];
+        const iconName = ICON_BY_TYPE[this.type ?? 'tip'];
+        const popupIconColor = isNotion ? contents.iconColorNotion : contents.iconColor;
+        const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
+        if (isActive)
+            buttonClasses.push('sd-guide__button--active');
+        return (hAsync("div", { key: '9d5ad3049230e61d1aae3cd9270dd84f89fb5b1c', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: 'ac55b4d96f64695a0fbfedf7bf0e451b7afdc499', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: 'df51b29383f7449720d8700387bb44fbd4dbebba', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '265390b48b9d37e9c7f92e19ef124da3faae6590', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: 'b45c101ac8dd6e4d490661b377979226335defa2', class: "sd-guide__popup", style: {
+                ...this.guideStyle,
+                width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
+            } }, hAsync("sd-ghost-button", { key: 'd91722fedd8cd4f74e673964c90b1840ccfcd8e1', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: 'b7bb7ffa79363939f4b6144d48732e686ec5e365', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: 'cfe42d9139cdae8a90ce81af3dbc7636dc56b380', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: '9724df2304c13c36e21a6e1ef3be7d4b0f5e5454', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: '8f5eec181c32b7d0220963ce57e82e952094ad36', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+    }
+    // 현재 2depth까지만 스타일 적용
+    renderListItem(message, depth = 0) {
+        const listItems = [];
+        if (Array.isArray(message)) {
+            const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
+            listItems.push(...depthMsg.flat());
+        }
+        else {
+            listItems.push(this.renderLi(message, depth));
+        }
+        return listItems;
+    }
+    renderLi = (message, depth) => {
+        return (hAsync("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, hAsync("p", { innerHTML: message })));
+    };
+    static get style() { return sdGuideCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 512,
+        "$tagName$": "sd-guide",
+        "$members$": {
+            "type": [513],
+            "label": [513],
+            "message": [1],
+            "url": [1],
+            "popupTitle": [1, "popup-title"],
+            "popupWidth": [2, "popup-width"],
+            "popupShow": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["type", "type"], ["label", "label"]]
+    }; }
+}
+
+const primary = "#051D36";
+const secondary = "#555555";
+const accent = "#9C27B0";
+const positive = "#0075FF";
+const negative = "#E30000";
+const info = "#00CD52";
+const warning = "#F2C037";
+const caution_bg = "#FEF1F1";
+const caution_icon = "#FD9595";
+const header_alert = "#FF7A00";
+const white = "#FFFFFF";
+const black = "#000000";
+const grey_10 = "#F6F6F6";
+const grey_20 = "#EEEEEE";
+const grey_25 = "#E5E5E5";
+const grey_30 = "#E1E1E1";
+const grey_35 = "#D8D8D8";
+const grey_45 = "#CCCCCC";
+const grey_50 = "#BBBBBB";
+const grey_55 = "#AAAAAA";
+const grey_60 = "#999999";
+const grey_65 = "#888888";
+const grey_70 = "#737373";
+const grey_80 = "#555555";
+const grey_85 = "#444444";
+const grey_90 = "#333333";
+const grey_95 = "#222222";
+const grey_05 = "#F9F9F9";
+const red_15 = "#FCEFEF";
+const red_20 = "#FCE6E6";
+const red_30 = "#FFD3D3";
+const red_45 = "#FFB5B5";
+const red_60 = "#FF7C7C";
+const red_70 = "#FB4444";
+const red_75 = "#E30000";
+const red_75_006 = "#E30000";
+const red_80 = "#AD0000";
+const red_85 = "#820000";
+const red_90 = "#5E0000";
+const red_95 = "#440000";
+const red_99 = "#220000";
+const orange_10 = "#FEF1EA";
+const orange_20 = "#FFEAD7";
+const orange_35 = "#FFD5AF";
+const orange_45 = "#FFBC81";
+const orange_55 = "#FFA452";
+const orange_60 = "#FF7F22";
+const orange_65 = "#FF6B00";
+const orange_75 = "#CE4900";
+const orange_85 = "#9B3700";
+const orange_90 = "#752A00";
+const orange_95 = "#4D1B00";
+const orange_99 = "#2F1100";
+const yellow_10 = "#FFF7DD";
+const yellow_20 = "#FEF1C4";
+const yellow_25 = "#FFE99E";
+const yellow_30 = "#FEE17C";
+const yellow_40 = "#FFD643";
+const yellow_45 = "#FFC700";
+const yellow_50 = "#EBB110";
+const yellow_60 = "#CA9612";
+const yellow_70 = "#916C0D";
+const yellow_80 = "#6C5002";
+const yellow_90 = "#453602";
+const yellow_95 = "#322700";
+const olive_10 = "#FBFBBF";
+const olive_15 = "#FAFAA1";
+const olive_20 = "#F6F65F";
+const olive_30 = "#EEEE37";
+const olive_45 = "#DDDD12";
+const olive_55 = "#C7C700";
+const olive_65 = "#A5A500";
+const olive_70 = "#838300";
+const olive_80 = "#636300";
+const olive_90 = "#454500";
+const olive_95 = "#2C2C00";
+const olive_05 = "#FEFED9";
+const green_15 = "#E8F9EF";
+const green_25 = "#D4FAE3";
+const green_45 = "#ACF4C9";
+const green_55 = "#6DE39C";
+const green_65 = "#2BCE6C";
+const green_70 = "#12B553";
+const green_75 = "#00973C";
+const green_80 = "#007B31";
+const green_85 = "#006629";
+const green_90 = "#00461C";
+const green_95 = "#003013";
+const green_99 = "#001D0B";
+const steelblue_10 = "#ECF8FD";
+const steelblue_25 = "#D9F2FD";
+const steelblue_45 = "#A4E2FD";
+const steelblue_60 = "#50BFF0";
+const steelblue_65 = "#229FD7";
+const steelblue_70 = "#128FC7";
+const steelblue_75 = "#066D9B";
+const steelblue_80 = "#06587D";
+const steelblue_85 = "#033F59";
+const steelblue_90 = "#032D40";
+const steelblue_95 = "#02212F";
+const steelblue_99 = "#021A25";
+const oceanblue_15 = "#EAF5FE";
+const oceanblue_25 = "#D5EBFE";
+const oceanblue_50 = "#9CD1FC";
+const oceanblue_60 = "#5CB0F3";
+const oceanblue_65 = "#1F8AE1";
+const oceanblue_70 = "#006AC1";
+const oceanblue_75 = "#025497";
+const oceanblue_80 = "#004177";
+const oceanblue_85 = "#07284A";
+const oceanblue_90 = "#051D36";
+const oceanblue_95 = "#03172D";
+const oceanblue_99 = "#011428";
+const brilliantblue_10 = "#EFF6FF";
+const brilliantblue_20 = "#E6F1FF";
+const brilliantblue_25 = "#D9EAFF";
+const brilliantblue_40 = "#BBDAFF";
+const brilliantblue_50 = "#93C4FF";
+const brilliantblue_60 = "#64ABFF";
+const brilliantblue_70 = "#2D8DFF";
+const brilliantblue_75 = "#0075FF";
+const brilliantblue_80 = "#005CC9";
+const brilliantblue_85 = "#004290";
+const brilliantblue_90 = "#002B5E";
+const brilliantblue_95 = "#001B39";
+const brilliantblue_99 = "#001226";
+const brilliantblue_05 = "#F5FAFF";
+var rawColors = {
+	primary: primary,
+	secondary: secondary,
+	accent: accent,
+	positive: positive,
+	negative: negative,
+	info: info,
+	warning: warning,
+	caution_bg: caution_bg,
+	caution_icon: caution_icon,
+	header_alert: header_alert,
+	white: white,
+	black: black,
+	grey_10: grey_10,
+	grey_20: grey_20,
+	grey_25: grey_25,
+	grey_30: grey_30,
+	grey_35: grey_35,
+	grey_45: grey_45,
+	grey_50: grey_50,
+	grey_55: grey_55,
+	grey_60: grey_60,
+	grey_65: grey_65,
+	grey_70: grey_70,
+	grey_80: grey_80,
+	grey_85: grey_85,
+	grey_90: grey_90,
+	grey_95: grey_95,
+	grey_05: grey_05,
+	red_15: red_15,
+	red_20: red_20,
+	red_30: red_30,
+	red_45: red_45,
+	red_60: red_60,
+	red_70: red_70,
+	red_75: red_75,
+	red_75_006: red_75_006,
+	red_80: red_80,
+	red_85: red_85,
+	red_90: red_90,
+	red_95: red_95,
+	red_99: red_99,
+	orange_10: orange_10,
+	orange_20: orange_20,
+	orange_35: orange_35,
+	orange_45: orange_45,
+	orange_55: orange_55,
+	orange_60: orange_60,
+	orange_65: orange_65,
+	orange_75: orange_75,
+	orange_85: orange_85,
+	orange_90: orange_90,
+	orange_95: orange_95,
+	orange_99: orange_99,
+	yellow_10: yellow_10,
+	yellow_20: yellow_20,
+	yellow_25: yellow_25,
+	yellow_30: yellow_30,
+	yellow_40: yellow_40,
+	yellow_45: yellow_45,
+	yellow_50: yellow_50,
+	yellow_60: yellow_60,
+	yellow_70: yellow_70,
+	yellow_80: yellow_80,
+	yellow_90: yellow_90,
+	yellow_95: yellow_95,
+	olive_10: olive_10,
+	olive_15: olive_15,
+	olive_20: olive_20,
+	olive_30: olive_30,
+	olive_45: olive_45,
+	olive_55: olive_55,
+	olive_65: olive_65,
+	olive_70: olive_70,
+	olive_80: olive_80,
+	olive_90: olive_90,
+	olive_95: olive_95,
+	olive_05: olive_05,
+	green_15: green_15,
+	green_25: green_25,
+	green_45: green_45,
+	green_55: green_55,
+	green_65: green_65,
+	green_70: green_70,
+	green_75: green_75,
+	green_80: green_80,
+	green_85: green_85,
+	green_90: green_90,
+	green_95: green_95,
+	green_99: green_99,
+	steelblue_10: steelblue_10,
+	steelblue_25: steelblue_25,
+	steelblue_45: steelblue_45,
+	steelblue_60: steelblue_60,
+	steelblue_65: steelblue_65,
+	steelblue_70: steelblue_70,
+	steelblue_75: steelblue_75,
+	steelblue_80: steelblue_80,
+	steelblue_85: steelblue_85,
+	steelblue_90: steelblue_90,
+	steelblue_95: steelblue_95,
+	steelblue_99: steelblue_99,
+	oceanblue_15: oceanblue_15,
+	oceanblue_25: oceanblue_25,
+	oceanblue_50: oceanblue_50,
+	oceanblue_60: oceanblue_60,
+	oceanblue_65: oceanblue_65,
+	oceanblue_70: oceanblue_70,
+	oceanblue_75: oceanblue_75,
+	oceanblue_80: oceanblue_80,
+	oceanblue_85: oceanblue_85,
+	oceanblue_90: oceanblue_90,
+	oceanblue_95: oceanblue_95,
+	oceanblue_99: oceanblue_99,
+	brilliantblue_10: brilliantblue_10,
+	brilliantblue_20: brilliantblue_20,
+	brilliantblue_25: brilliantblue_25,
+	brilliantblue_40: brilliantblue_40,
+	brilliantblue_50: brilliantblue_50,
+	brilliantblue_60: brilliantblue_60,
+	brilliantblue_70: brilliantblue_70,
+	brilliantblue_75: brilliantblue_75,
+	brilliantblue_80: brilliantblue_80,
+	brilliantblue_85: brilliantblue_85,
+	brilliantblue_90: brilliantblue_90,
+	brilliantblue_95: brilliantblue_95,
+	brilliantblue_99: brilliantblue_99,
+	brilliantblue_05: brilliantblue_05
+};
+
+const colors = rawColors;
+// 주어진 문자열이 color.json의 키이면 매핑된 HEX를 반환하고,
+// 아닐 경우 원문 그대로를 반환합니다. 값이 falsy면 기본 색상으로 대체합니다.
+function resolveColor(input, fallback = '#025497') {
+    if (input === null || input === undefined || input === '')
+        return fallback;
+    const mapped = colors[input];
+    return mapped !== undefined && mapped !== '' ? mapped : input;
 }
 
 const sdIconCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}`;
@@ -10689,12 +10611,12 @@ class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (hAsync("sd-field", { key: 'a81aefc3060587c77acf9f6de9f26f7f421b4c91', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '7486a081cceed565d2624125e74cbde4a97a4d5c', class: "sd-input__content" }, hAsync("slot", { key: 'cf65ff444baddbf20004ae3ef80c5a54564d7d6f', name: "prefix" }), hAsync("input", { key: '468d342c1cd6f60f7ad573a8c4b0acd4d7424e13', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '5de289a0767297fc1952dbcb26bbe256f2f0d6c4', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '2ef30f443a82492f1cdd56f812651605b4057fa2', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (hAsync("sd-field", { key: 'c24b885ef9ca21fb69c1b67f2619896d4bd56155', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '45a5669d2c8d7d571f50152f81139cedc8a2db3b', class: "sd-input__content" }, hAsync("slot", { key: 'c1d032ee22344725e1d041c2351dd7785a8b6b5d', name: "prefix" }), hAsync("input", { key: '8433abb36e666a7546870a9e3b77325e9c39551a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '9f5eef3c48f88b90be2c821b1d43e2e9a9f91441', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '62ab3e8e02a9db5424e573542dc10bde5a9fc4b8', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: 'a8cd4f37a0cea5512e080748310032256af9187d', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '0a16665e73a674c7208c7f488b50442c353e3fde', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.passwordVisible = !this.passwordVisible;
@@ -11102,7 +11024,7 @@ class SdLinearProgress {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (hAsync(Host, { key: '58849d88024bc69ab0260bdf32f461fdfb87c93c', style: hostStyle }, hAsync("div", { key: 'a4370fbc94bdf7b51d4a27f85ca86606c3770cdb', class: 'sd-linear-progress__track' }, hAsync("div", { key: 'e270357433247981f8374a0345cb2d3ba8d4cfca', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'baa77fe44a7129330e8fe70b8aa2e8bc6fd4b703', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: '46a73b233ea34c1d9ac242140abe3b1e5831d484', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: '91d5c9cc27960c7448706e641028bcc8f893b805', class: 'sd-linear-progress__label' }, this.label)));
+        return (hAsync(Host, { key: '6fb48662dc2c921237a387c748bbc529ba5ea77f', style: hostStyle }, hAsync("div", { key: 'e8fa0fdf4ac3ceeaae74fff6194c1f66b9138bc7', class: 'sd-linear-progress__track' }, hAsync("div", { key: '7016850214e73fc6a9079e8f54674976d0320adf', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: '154b18f54d79ddbacf720370dc9ace94508c6667', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: '555e41d961ad7d061ac71347e998641d104f499d', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'f90f3df3b959aee549fab33a62a85d6df6ba8410', class: 'sd-linear-progress__label' }, this.label)));
     }
     static get style() { return sdLinearProgressCss(); }
     static get cmpMeta() { return {
@@ -11136,10 +11058,10 @@ class SdLoadingContainer {
         this.visible = false;
     }
     render() {
-        return (hAsync("div", { key: '1c684984ec7203edb4206690026cf8085bfadcfb', class: {
+        return (hAsync("div", { key: '08675a9dc0b1c11c42fb65a414f0fed88d03f1b0', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '42a7d3b6c0f562cbfd1a0928a3df4df3cc962299', class: "sd-loading-container__backdrop" }), hAsync("div", { key: 'ce11d0950e5047eb47ae87f41bf7c049a2e18cbc', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'e6f63c78da63cf660942137e73cef389789e83b0', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: '139b648a8a8007a050f6e81374930f92d676707c', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '4a10e9009d824bef1bf2f9930941931dc1fef43a', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '88edd1c19f5d22057e1e14f1e6bd10e23f45ec7b', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'b9c67678d799e429ec6cb2d3094da7bcc4cea150', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: 'ce016465e9d8b20f2121e8846bff75bbad5d7d94', class: "sd-loading-container__message" }, this.message)))));
     }
     static get style() { return sdLoadingContainerCss(); }
     static get cmpMeta() { return {
@@ -11235,7 +11157,7 @@ class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (hAsync(Host, { key: 'a653095ef804a24fbc3c4a0e65d22971b537a9bf', style: hostStyle }, hAsync("div", { key: '38a1a83501a707de8a431b38cd3e5525565fca5d', class: "sd-loading-modal" }, hAsync("div", { key: '81ddeebfffa70bcc84fc3b2a02fb3d70441645c4', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: 'db87e7d46fcc6bfd07ce4191819e5e28051489b7', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: '20134aca743319ea4e03e1b8a0359b92a3bdb0af', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: 'c6951624f69519d712bfdd619fd6b22216ecad87', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (hAsync(Host, { key: '3d792e07772b93de139fa505f061004b037ed05b', style: hostStyle }, hAsync("div", { key: '8b63d47c502bdd66f893a484c4af36d2e8302081', class: "sd-loading-modal" }, hAsync("div", { key: '5b35a93e1aed2e8d9f5eebfcbe0222c4f38b5536', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '591bae1563f4b5c5dc8bce22161d99929fb18ce5', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: '577acd55fb35229459990f7f1ca4f710c26c51d4', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: 'cda4f1b9a8bee1897efb53671c0f715858377ba7', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get style() { return sdLoadingModalCss(); }
     static get cmpMeta() { return {
@@ -12026,15 +11948,15 @@ class SdNumberInput {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (hAsync("sd-field", { key: '543a3fa5d759f4c64222e4eeca4de142296f663e', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '8d71a794e1c25f661d8260756f26ee6a47016aa9', class: {
+        return (hAsync("sd-field", { key: '3ed260707f7e1b1a88d1407bb4b3c1965b302bcf', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '889cd4055b46e0727aed2b78f2a8bbeeca88cfed', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (hAsync("button", { key: 'aaa21a743b73b1251780a9e03f40bef5765508d7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'c94aa4c4dfb344de8c87b506eca7b02e7ffd8b0a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (hAsync("button", { key: '5213f04a1db8a779762ae41672fd016388a06aa7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '76910ba2b46a78eb2e4aaf7241eeb7aa1223c92a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '11b2efa4d6a665f03135adbb6a30b496deea820d', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: 'b58452e12a222c7adb0dd7be810db874788e63b0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '273b809ff5bd5ebb2e8cd09a9df3f6f84167aeb2', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '72917348a5ded30f5d8c4066af8e56d50de67db0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && hAsync("span", { key: 'c71e6fa80e99b9551d927b0958696dee2f278d85', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: '620477a2710b32cba13433e7fd2c2ae59a20ce3c', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'adb263a5d16743641429c611a006192677a2c0e0', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && hAsync("span", { key: '232aa43852396a617e49403d30b4514aaf896740', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: 'f9dab4cd21deb933e72a8ad906cafbbf1cae1e5a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '73208aca8e5e9be431ba03b4755053c74ec70296', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -12241,13 +12163,13 @@ class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (hAsync("div", { key: '0a99cc2b09de2f2a893fe88eaee535dc2f39505d', class: {
+        return (hAsync("div", { key: '251d9b3bcff3cf985d62b1a8717f622d209b3fa1', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, hAsync("div", { key: 'ba4e726a23e572c788c8c68689e656a07f21f46e', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, hAsync("div", { key: 'd143917676ccd97c1f4fc8e7220857d543efa5fd', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'e3276583ab382b988ac2961e8c67c431d5c4495e', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'e58053cef21c57d88f5b1357101507418b2db002', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss(); }
     static get cmpMeta() { return {
@@ -12328,17 +12250,17 @@ class SdPopover {
         const leftLink = this.leftLink;
         const button = this.button;
         const hasFooter = !!leftLink || !!button;
-        return (hAsync(Fragment, { key: '15b78d688d095fb15d5e6188dc848593bfec842e' }, this.label !== '' ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (hAsync("sd-floating-portal", { key: 'c77807f72410fb9c96a94e06fa9bb953ef934b4d', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, hAsync("div", { key: 'dfffd8eada595286469c17ed549d60539d9b3ca6', class: {
+        return (hAsync(Fragment, { key: 'b50da46efd85cdb48f66b24c591ab662a9fd62cb' }, this.label !== '' ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (hAsync("sd-floating-portal", { key: 'a31d6c00a9b61826fa412247f603d78874a3dba6', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, hAsync("div", { key: '11020f31a14dbb7325b30ebc48315b344662cf43', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${placement}`]: true,
                 [menuClass]: menuClass !== '',
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, hAsync("i", { key: '0852ebe804a7e305383f58dae7e0088f2456f53a', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'c470c8ccebdb920b1c14940dffe11ad619560fb7' })), hAsync("div", { key: 'fcca2e3bc61cd64110e86da4ee483dc5b1101b7c', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: 'fad331bcd9c73e72ed013826db69badd8b7a069f', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (hAsync("div", { key: 'c83d0be758758fc720d1c3d00aaa8f0cb865cf12', class: "sd-floating-menu__messages" }, messages.map((message, i) => (hAsync("div", { key: `msg-${i}` }, message))))), hasFooter && (hAsync("div", { key: '821a434f478d8aee61e81026ccc37f75579e290e', class: {
+            } }, hAsync("i", { key: '51b35ade68a68c92b7488b97f2b1808d7fcf33e5', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'd491c997e07a2bb2d4a3ad3624d5098457f91c05' })), hAsync("div", { key: '19bfc90b0c5da4fe736aad3b8b2061ac58d8efb4', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '31875711b7cd54c0c48f0017ac94365c3cc97821', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (hAsync("div", { key: '9c78a748831045f96fe48fd2ae9dcd85b1335aa0', class: "sd-floating-menu__messages" }, messages.map((message, i) => (hAsync("div", { key: `msg-${i}` }, message))))), hasFooter && (hAsync("div", { key: '787f0d2ac133bef9f72ce248b943b0ff9883db9e', class: {
                 'sd-floating-menu__buttons': true,
                 'sd-floating-menu__buttons--with-link': !!leftLink,
-            } }, leftLink && (hAsync("sd-text-link", { key: '4b28ebf22197453c403066daf97d8925b0a4a8e1', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (hAsync("sd-button", { key: 'af8bdfa4a994bafa9b7329e149b62480d5f3d97c', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), this.useClose && (hAsync("sd-ghost-button", { key: 'a8031ecc0aa0721adab17031019a079bc2bdce88', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
+            } }, leftLink && (hAsync("sd-text-link", { key: '2000a926c2c808e6ee51f47905fadf8847553bfe', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (hAsync("sd-button", { key: 'cca9d6bef231fe4c469d8895fefa8b6d5855a57c', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), this.useClose && (hAsync("sd-ghost-button", { key: '032461787d74367ea047c088e08704ce7409f74b', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
     }
     static get style() { return sdPopoverCss(); }
     static get cmpMeta() { return {
@@ -12471,7 +12393,7 @@ class SdPopup {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (hAsync("div", { key: '15e86848fe487b9df5b09a91e5319b35d7332a6e', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: 'd8281c73a80fe5a4b8ce3ca219e967932b0ec1d3', class: "sd-popup__header" }, hAsync("h2", { key: '31031d3988bae465e023cc94713fb39ef9299250', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'dfa941b0dc100b55fc08ab8cb9fce2835aaa62a5', class: "sd-popup__body" }, hAsync("slot", { key: 'd7532a39c61746e8f517973e6fd4f7f3ac10fae0' })), this.useFooter && (hAsync("footer", { key: 'aacedcc4c2f2e4336449bc0fbafc9f67d70cc763', class: "sd-popup__footer" }, hAsync("div", { key: '8f093e0a8c24b03fa28e872b025cb159006d3449', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '11e2cd175c7ae3151408ca7e564df0a37d6eebb5', name: "footer-left" })), hAsync("sd-button", { key: '49b98d39181bd30392b7388dc7acc66caaca6038', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (hAsync("div", { key: '0c9f1cd261fa533044309342cfbaae8f5b87ae31', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: 'd8aa4db4d150419f5653fd93e204cc4bd865c35e', class: "sd-popup__header" }, hAsync("h2", { key: 'fce95fce48a91c3a2b60f0b1169113cd2ff157d6', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'c730895828c14a6a80fe6bebecb08f386cc84a78', class: "sd-popup__body" }, hAsync("slot", { key: 'f3402c32fdc55794fb2c877a41c9f73e3c0d6d9f' })), this.useFooter && (hAsync("footer", { key: '4b04ebc0dccc07dd9466c06c940d3444346603ba', class: "sd-popup__footer" }, hAsync("div", { key: '78b35347121652d647e3601e6c6164e8e21288ca', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '98836c28e7de97466cf4285c0458a8709c3788bb', name: "footer-left" })), hAsync("sd-button", { key: 'd9ab45765c66a2f86aec2df9fc056fa1f4605259', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
     static get style() { return sdPopupCss(); }
     static get cmpMeta() { return {
@@ -12714,7 +12636,7 @@ class SdPortal {
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: '8b728e4a9a97cb1c4dbdaf8b6a6d85b37fc07af7' });
+        return hAsync("slot", { key: '1f46253fe0f70fda84643e8d3025c1fd47090f5c' });
     }
     static get watchers() { return {
         "open": [{
@@ -12854,7 +12776,7 @@ class SdRadio {
             '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
             '--sd-radio-label-color': RADIO_COLORS.label,
         };
-        return (hAsync("label", { key: 'bbbca45f706514a12be434ba877de0bd0f82c944', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("input", { key: 'e2cacd52037790cfe2d0eacacb975864858f73f8', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), hAsync("span", { key: 'bfbfdcb93536cef9fecbf1cc3a5dc5c2adbf5dd0', class: "sd-radio__circle" }), this.label && hAsync("span", { key: '04c8d1e8de88bbb8d4041ebbbda00f58f8dc460c', class: "sd-radio__label" }, this.label)));
+        return (hAsync("label", { key: '2b7819249e5070a22b626530011db4a8e56194f1', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("input", { key: '233699a7c3bc13708d43ca3719f61edf53836c83', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), hAsync("span", { key: 'eb665c5f8c6202b66b65b6b120f144970fba0a38', class: "sd-radio__circle" }), this.label && hAsync("span", { key: '3d0db13e083bacb4cb7ace9129fcfcd61f18dfc7', class: "sd-radio__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{
@@ -13053,7 +12975,7 @@ class SdRadioButton {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (hAsync("div", { key: '0eef3b536855ef3883628ce92a5dcb2846976d86', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (hAsync("div", { key: 'd1f572315ee66c5defebc4386e815fb21928b548', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button__label" }, option.label)));
@@ -13105,7 +13027,7 @@ class SdRadioGroup {
         return classes.join(' ');
     }
     render() {
-        return (hAsync("div", { key: 'c5404526e6a21258d616f6459499b636a6636384', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+        return (hAsync("div", { key: '3bb952a72d5bccd1ad4842d9554efe6c69829773', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
             return (hAsync("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }
@@ -13392,15 +13314,15 @@ class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (hAsync("sd-field", { key: '668df27ea03b5c2479f89649c494375bacd762ec', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (hAsync("sd-field", { key: 'c433e21047632ae1e7901e11f6f9d83070f8d83c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, hAsync("div", { key: '7d391d2c0719c165e9d19f5fdc34d39c374401e9', class: "sd-select", ref: el => {
+            } }, hAsync("div", { key: 'f04f2f331c27745035c35d96d5262398065589a8', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("sd-select-trigger", { key: 'b09a0f9dcb0071b79a21c8184deb7d07ba54185f', ref: el => {
+            } }, hAsync("sd-select-trigger", { key: 'b66e83ff248618c815b155f27445f3da9e91361b', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '2ae67c5e98c66c2a74ba96f4602ea14d53dd0177', ...portalProps }, hAsync("sd-select-listbox", { key: '97ee517fa777abd4926f8105fd046e39dfeeb5ff', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'bd5b46d8e4849d235e39a9d9cfc549fdbe260076', ...portalProps }, hAsync("sd-select-listbox", { key: '81266da14ee4e59b4cedd4b364c18fea4d3c4f7f', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -13692,7 +13614,7 @@ class SdSelectListItem {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        hAsync("div", { key: '8382966892edc2a46602733400aa579d0caa3128', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        hAsync("div", { key: '93e8bf04e69d9e6f066952570ed06076bdd17e57', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -13702,7 +13624,7 @@ class SdSelectListItem {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'f8d1bb696416265861cc3b61ca1dcaec52dc2d4a', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: '0ce20554fb96ad650104a98d779f3ff64fabe381', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '4d2d8f5bd63373906544882ff5852134e3ecd4d3', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '2b6a17361c2e5c65c6dac21895ef397cadeec9a3', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: '158e45d52b3b5394f7c4e2ffff97d23f83ce5e49', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '48adac9df92cd19f5e2b39bed828a9ad7c22c945', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get style() { return sdSelectListItemCss(); }
     static get cmpMeta() { return {
@@ -13770,15 +13692,15 @@ class SdSelectListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (hAsync("div", { key: '6872376ea0f47c256273f751fad367f2c49a9160', class: {
+        return (hAsync("div", { key: '0b8e55a2f39d72bc6fc5c7d8c6262c9fffb52ba7', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, hAsync("div", { key: 'f6c872e0252b6d7ba81f49938a4f5a647f0fb486', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '49f10ed222e855ef6f0f5f12a65a74e1fec95bb5', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '76d88aa4ce7eee598db2709d2d5442465b1798cb', ref: el => {
+            } }, hAsync("div", { key: '30c4f5d6c8002579da129cebb06c026c278fb555', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: 'be9076a1fd6d7fd9a1990fd9e32aebd04c1bc4b4', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: 'c9400184f607d0385e5e8c25615e1a955256c6f4', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: 'e94d1661c6ed26754d4ee7e186808ebd9f057ec9', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: 'dcb18eff068dea3fcb9144c4dfd4500806f68753', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
                 'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: 'ad89b3421ec345f47c8d67d78f20cae86869d4c1', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: 'beb2cf23258aa1eaff2c9fdb63dae99570691af1', name: "close", size: 12, color: "#888888" })))));
     }
     static get style() { return sdSelectListItemSearchCss(); }
     static get cmpMeta() { return {
@@ -14149,9 +14071,9 @@ class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (hAsync("div", { key: '8c9b1a4471bf4e535c5f156d087e1b9be76ad903', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '4cc596a1ac21c9b258d5db07ecb15d566179d743', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '977e15c7987ca387cf30783741f99b322150627b', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (hAsync("div", { key: '4173255a866459bf0aeb98d517263d12f1c39fa5', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '79e7d48d7234ebfd32d3cd242822dfa93a73c151', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '22981c1e049d0d526af06bb5b563de5130c14477', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: 'dada5a6662b2d3fa63ed11ab1c82561d5e2d2400', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '7acd37c5663bb101d6853cbd6629a78d402d6cde', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -14232,7 +14154,7 @@ class SdSelectTrigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (hAsync("div", { key: '67cb0ffaf0197a3ad12c402810317801ce69d4a1', ref: el => {
+        return (hAsync("div", { key: '6694f35a396f368d5df9860db30d817beddb8bec', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -14243,7 +14165,7 @@ class SdSelectTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '4c28c852054fd7b09e5c45c9eb13882540f66553', class: "sd-select-trigger__content" }, hAsync("span", { key: 'df415c9ac8d00a58e5539c8c655f12ebd49208a4', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), hAsync("sd-icon", { key: '429008e1edaf778e8a85f945a681cd675f2489b7', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: 'd8ff247ca362a8fc3677d9803261343a1e891298', class: "sd-select-trigger__content" }, hAsync("span", { key: 'cd81a7c7c135372aad80fa9391b160337632643c', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), hAsync("sd-icon", { key: '838c12e2a9ce06036eee766ffd2f88f3215b8420', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));
@@ -14365,7 +14287,7 @@ class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (hAsync("label", { key: 'a37c1387905456007de46a6050616b025ad06b37', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '5fcc9f72e177956e015e4cb009936edc60c4c3ec', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: 'bf1fa22a94b2b245a2ddf805df4cd1c204524710', class: "sd-switch__track" }, hAsync("div", { key: '11dafcd812c560acb7a63f7267f40f8ed67da95b', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '6609d2e33e82e843ffd5bbb2d2010de3e299f081', class: "sd-switch__label" }, this.label)));
+        return (hAsync("label", { key: 'ebb195a1bb93ae476b4bf3e697623809d626eed6', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: 'a6de6298d35c54ad83dc6285b90e67c8d3564d15', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '7881f46be572edcfc82888564a7f85ad4207dd8e', class: "sd-switch__track" }, hAsync("div", { key: 'c08c9d5894a6f9ddf3ecdaaa9253628478479043', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '4e01b185502829d8fb647d3eafaaf6565489b2f3', class: "sd-switch__label" }, this.label)));
     }
     static get style() { return sdSwitchCss(); }
     static get cmpMeta() { return {
@@ -15323,25 +15245,25 @@ class SdTable {
             '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
         };
-        return (hAsync(Host, { key: 'f7d92943fcb354f69d99c1e4fd37749cc06185c7', style: hostStyle }, hAsync("div", { key: '53d6ac0eedc2c2a56c05bf5a751be43bc18f9fe7', class: "sd-table__container", style: {
+        return (hAsync(Host, { key: '02d716bdac3832710bf58d63741aeeb4b04d434b', style: hostStyle }, hAsync("div", { key: '88faad346e032ca727375889aa0552a330f5799a', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': effectiveTableHeight,
                 '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
-            } }, hAsync("div", { key: 'b85980b8307b2a50ee1554262d025b58bad42e87', class: {
+            } }, hAsync("div", { key: '783934f349e0da5bab77cbb44cc12f0dfeb9ec71', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
-            } }, hAsync("div", { key: 'acf9816ceaaea06b807056606d684befebe9dcd0', class: {
+            } }, hAsync("div", { key: 'd3a76ad0e853c6adf16df633c0e0b7f5bb580f24', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (hAsync("div", { key: '8a1a18cbf500a8e9ad519438a59e084186d9f339', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '443ffcfb06edbae8ac94be7e8e5a94c1e2b68588', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '3aefe27935a816df9658ec89adf261d11c0e8e77', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: 'db89a7d1cbbf041bdd30be9e0a205147073891e2', class: "sd-table__no-data" }, hAsync("div", { key: 'a9bf47e80db21c30ffa651b03b203e5e205134c9', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (hAsync("div", { key: 'cc77ce58ff0eebf3fc1d7dd9dbf11578f94d4dd1', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: 'bda7ed774342089a23d13b49a506b04527026275', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: 'f2ce89d0ae9eefe0f0f8509e477756cb74dbef86', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: '84d739563123d0f0fc33166b1a6e80021ba06e1c', class: "sd-table__no-data" }, hAsync("div", { key: '3507f718a25b79c44fdf283fb41356ab72f2a384', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, hAsync("slot", { key: '20f0c0b43534ef344864bf2450abb4c2a8fb704b', name: "no-data" }, hAsync("span", { key: 'a19688e4da7961e7c828694124819c4e60a6700f' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '2b03aa5c5d59e0ac85051f90a022b59b8dbb871a', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, hAsync("slot", { key: '818129819b2ff4a6f9fc1224dc59a9aa5861296d', name: "no-data" }, hAsync("span", { key: 'c03cfb713e6dadd5ab4c60d7d27fd502d7aa9348' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '8864714a828069985bac6535bc40cbb043dfcb28', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (hAsync("div", { key: 'dc4a0132898490ef7e87e26a75fca8e3b2056a49', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '9030b0965e8d2c1a54fce07cfc4067f49edb2375', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '0d95ba3138da081d6c15202748ff3db1e23def01', value: this.useInternalPagination
+            !this.useVirtualScroll && (hAsync("div", { key: 'bdac4b4d551152ec7ee0cdc31bfb992748836928', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '2c60fff7f8ac3a3bd22da2173b8a9187bb686ddf', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '7a662f58e13c15e705341773570f899f503f12c0', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -15633,7 +15555,7 @@ class SdTabs {
         };
     }
     render() {
-        return (hAsync("div", { key: 'dd4377850ef052d22b6eb790b7766a3521a41c1c', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (hAsync("div", { key: '880f1aa80c29f2d578ffe2d5e5e5e0c008c898d3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (hAsync("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {
@@ -15869,7 +15791,7 @@ class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (hAsync("span", { key: 'bcf16350c162da2907ddf4ac53924d016a2457dd', class: "sd-tag", style: {
+        return (hAsync("span", { key: '57f3c3f9ad53059fabff205cb44ffa3d1da9a711', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -15879,7 +15801,7 @@ class SdTag {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '248f9d8df1ff10af3c533580203cac1f816d8000', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '3360f36d18f073cd24699b6b8db2e731fda351ac', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
     static get style() { return sdTagCss(); }
     static get cmpMeta() { return {
@@ -15947,9 +15869,9 @@ class SdTbody {
         }
     }
     render() {
-        return (hAsync(Host, { key: '5b55bfd73916ff1402329375de1e1fc2a7629cbd', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'a09a532d1510166a36d592c2e59ec1765803bbbe', class: { tbody: true } }, [
+        return (hAsync(Host, { key: 'bdb686445ce324c6254891a385d6175c8cac06df', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '21a7772f0d43a358d9ae17459f0ff296324bfd82', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            hAsync("slot", { key: 'da3827a9c2fe7a74ec3cb3eb8dee3ab039ea0535' }),
+            hAsync("slot", { key: 'e38d8fe5d67a91d3fa5a25be98195da104660005' }),
             this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -16115,7 +16037,7 @@ class SdTd {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'ececfaf265a550ee38c5c2cc2ddd2875352deb10', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'c4a43f9affc1938d882e63e91ac90d570efffa37' })));
+        return (hAsync(Host, { key: '7d51ea5f02ba2df099f4440be26c2f0be8a73a6b', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '9a6a634e2bcd206ec9099c6be738c3853d0cbebf' })));
     }
     static get watchers() { return {
         "field": [{
@@ -16238,7 +16160,7 @@ class SdTextLink {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (hAsync("span", { key: '284a073ec6aca3ad91bffe084c3b84813df58772', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (hAsync("span", { key: '11d2153cc91818c1214e21ffa14bd08249ad1116', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -16246,13 +16168,13 @@ class SdTextLink {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, this.icon && (hAsync("sd-icon", { key: '1e2021703a766769aa647f418fb4b287039d58a5', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: 'a25f207b8bf5bc2c221f0b370159b61ba2f27040', class: labelClassName }, this.label), this.useArrow && (hAsync("span", { key: 'f273671ee796224bada0d2d27fc58ff893c433e7', class: "sd-text-link__arrow", style: {
+            } }, this.icon && (hAsync("sd-icon", { key: '23972d53b4968c9bdef9b54dfa785e658ba117ef', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '5e99a6c1151093929086ec4398b93d7db590d959', class: labelClassName }, this.label), this.useArrow && (hAsync("span", { key: 'b814759278cefe229a5321556374438f281ce0f3', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, hAsync("sd-icon", { key: '2e499bf0c1cd57d1ffb90999daa1c38d0cf43df8', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, hAsync("sd-icon", { key: 'dfe3286eaeef9a176f5ff1a69950713e2712a550', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
     static get style() { return sdTextLinkCss(); }
     static get cmpMeta() { return {
@@ -16399,7 +16321,7 @@ class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (hAsync("sd-field", { key: '64595853405ae2a66231229516e93a74a4340ef0', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'b7cddedc733c83d4c50234559c02c5f220634008', class: "sd-textarea__content" }, hAsync("textarea", { key: '2d1b852e6ba7b913901c07fce36ce30598f15e12', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (hAsync("sd-field", { key: '404175c94949c2510082df905c53e97ab835369c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'ca92dfe613b2c006ecc4021bb2f07a2e4b04239a', class: "sd-textarea__content" }, hAsync("textarea", { key: 'a6d2bbdb9c88766182728cf3eb30ce7691fb048f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{
@@ -16615,16 +16537,16 @@ class SdThead {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (hAsync(Host, { key: '424fa72b833a94bce945ae50e8445cbed0527025', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: '1a5704d78992b553c5db5ba92bb3814de7c19898', class: {
+        return (hAsync(Host, { key: 'c2852fc7d6fe9e8116fabbbcc140f4db8319bfdc', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: '970cb1c96145326f38b79636a72982b0e9c81fa0', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, hAsync("tr", { key: '1369ff7c99a5691bcd5fa54af4f7c02ff41dceb3', class: "tr" }, this._selectable && (hAsync("th", { key: '72159c6f8ef28b0b93790e180cb9b12345727525', class: {
+            } }, hAsync("tr", { key: '839fb6e9fd68ef10dea1f1d470a6b3e707475a8d', class: "tr" }, this._selectable && (hAsync("th", { key: 'd669372261627013bc1b39157139d180b3d1a6c1', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '1c5c035346fc6d13d956475480374a8bd93d3d6d', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '6263984430b4aa53e6ac24fb0f6a6c05838a71d5', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
@@ -16775,12 +16697,12 @@ class SdToast {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (hAsync("div", { key: 'edab2d1d8ac8222a988d38279f1a002281454f51', style: {
+        return (hAsync("div", { key: 'db3ffaf51dc96c39c05558017f25929c679a59df', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, hAsync("div", { key: '8dd98dd58cdf003ce031e5ae96b749a037333ce1', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '2b78cbc4fe96cc00d444fb49956da1fe245993ef', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '679852c9a19046ce1d2c9a0cdb4346f6e23c77fb', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: '2798bd2392e9fc3c4c0375d894572da13d3d7e25', class: "sd-toast__content" }, hAsync("span", { key: '76ab798742baa63b21bda60867cbeb5aa20f7957', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '6eb61ca5737f9af06ad63cfcef671e46ecc8de47', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '6c1ad7d494c7cc218b1058fec1ed3e42af0c83fc', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '32dd9adcc951a3a852bf20540376bd4d7ced7526', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, hAsync("div", { key: '92344f5bb95b0d4787591207f2e017d7dd177091', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '991db58b2cb019dd3a787e000e9d8813014bbb09', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '24d53cd77fdea82ec07663a8968493ec2b794751', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: '70cfad4ef389cca798be9baeac99bfc41efcc615', class: "sd-toast__content" }, hAsync("span", { key: '5927023435b17dc25ee07630fc4ae4568aadd9b9', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '410c024fd81ebcc78175c1855a86f590566d1a81', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: 'd85287e7ef796a11f850a0ce5cde87f5881fa5c9', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '55a6bf6457bd89254f6eb01072d46a0edbb8b510', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
     static get style() { return sdToastCss(); }
     static get cmpMeta() { return {
@@ -17033,7 +16955,7 @@ class SdToastContainer {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (hAsync("div", { key: '4cf4413f350c2a1adc475c567d874252b1786e91', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (hAsync("div", { key: 'bc3c9591b6453eed7df462841e29784c29b3aeef', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {
@@ -17191,7 +17113,7 @@ class SdToggle {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (hAsync("label", { key: '0b8273ed8f8efae70de32b92671bbd1353e877dc', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '2ec9909142463f8ba556ad885cb7f97bedad6b31', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (hAsync("label", { key: 'b16577aa25863a9dc337314d9059328799c1cd1e', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '6130825b74df8a573f4e062671fd694508759e82', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get style() { return sdToggleCss(); }
     static get cmpMeta() { return {
@@ -17321,14 +17243,14 @@ class SdTooltip {
         const hasLabel = this.label !== undefined && this.label !== '';
         const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
-        return (hAsync(Fragment, { key: 'cd01d5f5e9c1c542268d455d97b1bdfe1a2eef2c' }, hAsync("div", { key: '2b883efa4f4ea16b2a544fc43059a139f68e32c1', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '4d69c1582c3a2fab1fae2e29a4b41999d5dded95', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '8e94b33ba40231b26174b28a63d7748649f4d729', ref: el => (this.menuEl = el), class: {
+        return (hAsync(Fragment, { key: 'ef33f9f183820d684f2805e40134a81f7149fc16' }, hAsync("div", { key: 'dd931825c55b0ee748c7ef45f15be0d6de37ad23', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '443dbbe8f0b9a66aaae9b8482a3f615d2d41e8ec', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '040bde0321b1fd35014db976aeaddc515d87c807', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '535deacc918ec41135ff1c1e24ea5b32b59a4b54', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'c2c70e6360e78f7287acd40a815c558610bf66fa' })), hAsync("div", { key: '9569fbe5648df9c74e7d00b28f91fe8dfa6f6df3', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'e802c09cc13ec3db29704197fa402588bf97d670', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'b698fbdba2cee74955f65ed7b04abeea8ccabee5' })), hAsync("div", { key: '97e856c543a8cdb880daae9ed0e461f5fd0f2b44', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get style() { return sdTooltipCss(); }
     static get cmpMeta() { return {
@@ -17698,7 +17620,6 @@ registerComponents([
   SdConfirmModal,
   SdDateBox,
   SdDatePicker,
-  SdDatePickerCalendar,
   SdDatePickerTrigger,
   SdDateRangePicker,
   SdDateRangePickerCalendar,