@sellmate/design-system 1.2.0 → 1.4.0

package/dist/esm/sd-button_2.entry.js

@@ -1,6 +1,5 @@
 import { h, r as registerInstance, c as createEvent } from './index-0U6dRjlq.js';
 import { i as isButtonName, g as getPresetName, B as BUTTON_CONFIG, a as BUTTON_ICON_SIZES, b as BUTTON_FOCUS_RING_COLOR, P as PRESET_CONTENT_COLORS, c as PRESET_BORDER_COLORS, d as PRESET_HOVER_BACKGROUNDS } from './sd-button.config-BDjErF_K.js';
-import { r as resolveColor } from './resolveColor-Ce0cmS4R.js';
 
 const Add = (props) => {
     const { size = 24, ...rest } = props;
@@ -559,17 +558,284 @@ const SdButton = class {
         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 (h("button", { key: 'c9f4491915f6ba4fdbf54df19b008bd32edbf925', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("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[preset],
                 '--sd-button-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '44fc95645e6eea6aecee9978887f4309d9d31342', class: "sd-button__content" }, validIcon && (h("sd-icon", { key: 'ae1d9a3e8eb40ed0aecac0e70af1341ac90767c8', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && h("span", { key: 'ab7bbf916c3b0432db6313050d7facfe919794de', class: "sd-button__label" }, this.label), validRightIcon && (h("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 }, h("span", { key: 'cded66e4802956c29064cbdcc12b9dd1066a45c3', class: "sd-button__content" }, validIcon && (h("sd-icon", { key: 'b989e3eb8661e16f052d5c7a292ea316a2b821df', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && h("span", { key: '07695896bd8f11ca8753dcb171b5c7f0e7304c0d', class: "sd-button__label" }, this.label), validRightIcon && (h("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)" })))));
     }
 };
 SdButton.style = sdButtonCss();
 
+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)}`;
 
 const SdIcon = class {

package/dist/esm/sd-calendar_2.entry.js

@@ -0,0 +1,260 @@
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
+import { u as useDatePicker, t as today, W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './useDatePicker-D5RmWGOp.js';
+import { a as DATEPICKER_SIZE_MAP, D as DATEPICKER_COLORS } from './sd-date-picker.config-CGEE3DkI.js';
+import './component.datepicker-BQn6le_Y.js';
+
+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);box-sizing:border-box;width:100%;min-height:14px;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 SdCalendar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.viewChange = createEvent(this, "sdViewChange", 7);
+    }
+    value = null;
+    selectable;
+    events;
+    currentYear;
+    currentMonth;
+    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.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.value = cell.date;
+        this.update.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,
+            '--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;
+        const hasEvents = (this.events?.length ?? 0) > 0;
+        return (h("div", { key: '79cfdb58f8d44085c87cfea6458e60654bfa09bb', class: "sd-calendar", style: cssVars }, h("div", { key: '065620bcd155de11ef2272720de57ef6fcd9fd20', class: "sd-calendar__header" }, h("div", { key: 'ae27c8fe51c44137932b18cc83b64dcce7e2bbaa', class: "sd-calendar__nav-group" }, h("sd-ghost-button", { key: '8207f6d77705999419f451db032c059564ea0c17', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: 'b5bf63784dd06c3ce5a4d4c5514fea22efb08793', class: "sd-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '14512de68825e3b158704c3084306029ade8fcc1', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: 'e37eb90d72c2e64b8ebb1da4ddf3fccb7ff18cc3', class: "sd-calendar__divider", "aria-hidden": "true" }), h("div", { key: '07b1696b663ddb992e5a8d8b5ab98205ba136d9d', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, h("sd-ghost-button", { key: 'b742889a44643d3e4d3b6da90784923c40e5a07f', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: 'c97402106312c3a6eb220798263ba818419e7d27', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '55411b1328acb781d71a7a84996d2a29886612cd', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: 'd10b03d31be412b545999d7e70bd9a349e5f1880', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), h("div", { key: '0b8f82db3753fe08435b07dee695d49a192786c0', 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 (h("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) }, h("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (h("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (h("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
+        })), legend.length > 0 && [
+            h("span", { key: 'a837c5956da658561fcbd2e646b0abbb0fa84a20', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
+            h("div", { key: '190b9947e5ecd627fad03b40c58c2e0c8719daaa', class: "sd-calendar__legend" }, legend.map(item => (h("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { class: "sd-calendar__legend-label" }, item.label))))),
+        ]));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
+};
+SdCalendar.style = sdCalendarCss();
+
+const sdDatePickerTriggerCss = () => `sd-date-picker-trigger{display:block;width:100%;height:100%}sd-date-picker-trigger .sd-date-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-date-picker-trigger .sd-date-picker-trigger--disabled{cursor:not-allowed}sd-date-picker-trigger .sd-date-picker-trigger__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-date-picker-trigger .sd-date-picker-trigger__text{flex:1;min-width:var(--trigger-text-min-width, 80px);font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
+
+const SdDatePickerTrigger = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.triggerClick = createEvent(this, "sdTriggerClick", 7);
+    }
+    displayText = '';
+    placeholder = 'YYYY-MM-DD';
+    disabled = false;
+    size = 'sm';
+    triggerClick;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.triggerClick.emit();
+    };
+    render() {
+        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.sm;
+        const hasValue = this.displayText !== '';
+        const textMinWidth = this.size === 'md' ? 104 : 80;
+        const cssVars = {
+            '--trigger-padding-x': `${sizeTokens.paddingX}px`,
+            '--trigger-gap': `${sizeTokens.gap}px`,
+            '--trigger-icon-size': `${sizeTokens.iconSize}px`,
+            '--trigger-font-size': `${sizeTokens.fontSize}px`,
+            '--trigger-line-height': `${sizeTokens.lineHeight}px`,
+            '--trigger-font-weight': sizeTokens.fontWeight,
+            '--trigger-radius': `${sizeTokens.radius}px`,
+            '--trigger-text-min-width': `${textMinWidth}px`,
+            '--trigger-text-color': this.disabled
+                ? DATEPICKER_COLORS.text.disabled
+                : hasValue
+                    ? DATEPICKER_COLORS.text.default
+                    : DATEPICKER_COLORS.text.hint,
+            '--trigger-icon-color': this.disabled
+                ? DATEPICKER_COLORS.icon.disabled
+                : DATEPICKER_COLORS.icon.default,
+        };
+        return (h("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 => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            } }, h("sd-icon", { key: 'd4bb58eb97f9f2b98c27315547a85b019530ce5e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '25222882fa966eb5d6ead15e62b65af26586afbd', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+    }
+};
+SdDatePickerTrigger.style = sdDatePickerTriggerCss();
+
+export { SdCalendar as sd_calendar, SdDatePickerTrigger as sd_date_picker_trigger };

package/dist/esm/sd-card.entry.js

@@ -9,7 +9,7 @@ const SdCard = class {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: '2700ffa3af5b6b35882c396a838d9da2e866ee4b' }, h("div", { key: '3d3aeaac318fc089c42ae4348bc72015d4476276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'e72f00bc8c209644baf5f431ce485fb5b691f354' }))));
+        return (h(Fragment, { key: '61c364f88b03eb56b60c660a58533f417d209e6a' }, h("div", { key: 'dee3671e757c273ffec06a15a0191a798280522c', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'f991bf5df95f8c1bac417aa4e70f40cf68624fb8' }))));
     }
 };
 SdCard.style = sdCardCss();

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

@@ -188,13 +188,13 @@ const SdCheckbox = class {
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (h("label", { key: '6b1ad950ce2f0b8e734efab6889a46064f7ef32a', class: this.checkboxClasses, style: cssVars }, h("input", { key: 'ee2fd70d61db2a5de6eab26dc07128e6158540e5', type: "checkbox", ref: el => {
+        return (h("label", { key: '6fb506c448a5968d403f779d113fd60857901982', class: this.checkboxClasses, style: cssVars }, h("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' }), h("div", { key: '234e0e4100da6f1a5f65fb4f32cb4d8e1ba018fd', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("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' }), h("div", { key: 'e49eb38375ba680e08510f83a15ce8a6bbecd4b8', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("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 && h("span", { key: '15afb8e3b31201febd15bb85d24ee9c9b246d1d0', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: '92bc308561b0a7653926d751d029d80c38844b07', class: "sd-checkbox__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{

package/dist/esm/sd-chip.entry.js

@@ -289,7 +289,7 @@ const SdChip = class {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: '0addb8566b639d05921b9320b99abab7f1d67899', class: {
+        return (h("span", { key: '3cd683af3aed7cc6e549c5fc5da1e00cda2dc2a0', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,

package/dist/esm/sd-circle-progress.entry.js

@@ -70,7 +70,7 @@ const SdCircleProgress = class {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: 'f92bf4d6e4f1133c4465a4fec7b2bad4549a6d06', style: hostStyle }, h("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" }, h("circle", { key: '020c7d840a6592d7705b65b14d27e3b5752629bf', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("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 && (h("span", { key: '91c0b91e69293b67c8a0ad67a6d4b9e9db5c6d4a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '03a5bee22a2e2f1b4ba75dbeca2ef5b4b9840aeb', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: 'd4ace6f784fd64a45baa746870a84a88b4911cf8', style: hostStyle }, h("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" }, h("circle", { key: '42411ef6f92f6427309d92dfad84ad7dc8f8c3bb', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("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 && (h("span", { key: '0917cfd3aa460872fa4c35da61530e01080d6937', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '051756bc7b20e87205b21c735b2827a81c2a17c9', class: "sd-circle-progress__label" }, this.label)));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();

package/dist/esm/sd-confirm-modal_2.entry.js

@@ -99,9 +99,9 @@ const SdConfirmModal = class {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: '234455d93cbf02e5e70f78803914a8d91fbc4506', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '298f5279400b19159a8c08d2c739ab27cf88811c', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '41d01e92ff59cea05a367797ebde71cd13baed1f', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'd6b65e3a858a96f628602101adaaee2b62727df4', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'ed708bffc95467faabf70a9c2beec46fc1ba090c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'e7a996bef926fa3741ed9f2ecc930a6961f4c6e4', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'b4ab9cc0cf91166d4e34a7b4726d62c3463a9766', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '6dc337947f7c05799cf7c97d45b0df84c7976196', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'b584cc4bc00191f8488be7265249922110d57d90', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '470716bef879befd1d6746bc27c10fb74d61a2b6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '5b0113f13b219a2e14c5d45397c293baafc28a2c', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'cee18d1afde384523ca0f96f4138b8854f89cb5c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'b9466be3cbb635c9b8c0a50d7023b70fa31d9f0f', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'f3ea52c0261a63e75b42175c2e7c602e02f82636', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '1dd63a93ecd0eae9ecfb61a3b98f1e6d1ac2b4b3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: 'e22a5fc951054808bc70962e104eb3951b65ca61', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'c1f23f043eead651e71943c7e76585b9b7fe964a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '63952e8b1c2d912fed6489760c97a787eaf2a90d', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'fa33e4f68a1c36e197ff6a6f5629005fbbebcbc3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '378162e9e44cefc4e61113ba927545040e6a6c6c', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '8fb93a086c4a42063f53ed533be2774de31db81e', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '304c80915c9a7a685bddcf2d5edf4f56119860e8', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -184,7 +184,7 @@ const SdLoadingModal = class {
             '--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 (h(Host, { key: 'a653095ef804a24fbc3c4a0e65d22971b537a9bf', style: hostStyle }, h("div", { key: '38a1a83501a707de8a431b38cd3e5525565fca5d', class: "sd-loading-modal" }, h("div", { key: '81ddeebfffa70bcc84fc3b2a02fb3d70441645c4', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: 'db87e7d46fcc6bfd07ce4191819e5e28051489b7', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: '20134aca743319ea4e03e1b8a0359b92a3bdb0af', class: "sd-loading-modal__button" }, h("sd-button", { key: 'c6951624f69519d712bfdd619fd6b22216ecad87', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '3d792e07772b93de139fa505f061004b037ed05b', style: hostStyle }, h("div", { key: '8b63d47c502bdd66f893a484c4af36d2e8302081', class: "sd-loading-modal" }, h("div", { key: '5b35a93e1aed2e8d9f5eebfcbe0222c4f38b5536', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '591bae1563f4b5c5dc8bce22161d99929fb18ce5', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: '577acd55fb35229459990f7f1ca4f710c26c51d4', class: "sd-loading-modal__button" }, h("sd-button", { key: 'cda4f1b9a8bee1897efb53671c0f715858377ba7', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();