@sellmate/design-system 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellmate/design-system",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Sellmate Design System - Web Components Library built with Stencil",
   "keywords": [
     "web-components",

package/dist/cjs/resolveColor-B0hzQNLG.js

@@ -1,270 +0,0 @@
-'use strict';
-
-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;
-}
-
-exports.resolveColor = resolveColor;

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

@@ -1,143 +0,0 @@
-'use strict';
-
-var index = require('./index-Cw-78mnC.js');
-var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
-var resolveColor = require('./resolveColor-B0hzQNLG.js');
-
-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 DEFAULT_COLORS = [
-    'brilliantblue_75',
-    'red_60',
-    'green_65',
-    'orange_60',
-    'steelblue_65',
-    'yellow_45',
-    'oceanblue_65',
-    'olive_55',
-];
-const SdCalendar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.select = index.createEvent(this, "sdSelect", 7);
-        this.viewChange = index.createEvent(this, "sdViewChange", 7);
-    }
-    value = null;
-    selectable;
-    events;
-    eventColors;
-    currentYear;
-    currentMonth;
-    eventsRevision = 0;
-    select;
-    viewChange;
-    dateUtil = useDatePicker.useDatePicker();
-    componentWillLoad() {
-        this.initCalendar();
-    }
-    handleValueChange() {
-        this.initCalendar();
-    }
-    handleEventsChange() {
-        this.eventsRevision = this.eventsRevision + 1;
-    }
-    initCalendar() {
-        const base = this.value || useDatePicker.today;
-        const [year, month] = base.split('-').map(Number);
-        this.currentYear = year;
-        this.currentMonth = month;
-    }
-    get calendar() {
-        return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);
-    }
-    handleUpdateMonth(type) {
-        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, type);
-        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)
-            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;
-        }
-        return false;
-    }
-    getEventColor(eventName) {
-        if (this.eventColors?.[eventName] !== undefined && this.eventColors[eventName] !== '') {
-            return resolveColor.resolveColor(this.eventColors[eventName]);
-        }
-        const allEventNames = this.getAllEventNames();
-        const index = allEventNames.indexOf(eventName);
-        return resolveColor.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] ?? [];
-    }
-    render() {
-        const allEventNames = this.getAllEventNames();
-        return (index.h("div", { key: '3c3a6af518a3e96dd5d5d553ab2a00b9dd882221', class: "sd-calendar" }, index.h("div", { key: '660e96fcefe539b69ae7b69bb7a7eb209f40b02f', class: "sd-calendar__header" }, index.h("div", { key: '609b4d2e552adb526deefbf0719284c94ab01c21', class: "year-nav" }, index.h("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 });
-            } }, index.h("sd-icon", { key: 'ff62edabb67364704a4bfbcfc6f1658ad3d72408', name: "arrowLeft", size: "12", color: "grey_45" })), index.h("span", { key: '0829c746b8537196652e7c40b3babea14ae8053e', class: "year-nav__current" }, this.currentYear), index.h("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 });
-            } }, index.h("sd-icon", { key: '5546ced1930082c68035db8b506b6ef2e953e305', name: "arrowRight", size: "12", color: "grey_45" }))), index.h("div", { key: '1db95c9f31c1a11b58a6f1ce4a13b9d6388f7994', class: "month-nav" }, index.h("button", { key: '2c5659945f3e0807a57ba22eb34576184e6ebf50', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '7994e2bf63fc45ffb7d29b49ad279223a1a12a98', name: "arrowLeft", size: "12", color: "grey_45" })), index.h("span", { key: 'a8afd7592b3fba13a4560387bb759f4858273a85', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: 'b3d21b13823bd674c43c1782b66df38010fcfa59', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: '8605340fe8128b6a55328c97dc84481092009c76', name: "arrowRight", size: "12", color: "grey_45" })))), index.h("div", { key: '9312ff7f3af76aced7189f121c71ff252a92a71d', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("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 (index.h("div", { class: "sd-calendar__cell", key: `${day}_${idx}` }, index.h("sd-date-box", { date: day === 0 ? '' : Number(day), selected: this.value === formattedDate, isToday: useDatePicker.today === formattedDate, disabled: day === 0 ? true : this.isDisabledDate(formattedDate), onClick: !this.isDisabledDate(formattedDate) && day !== 0
-                    ? () => this.handleDateClick(Number(day))
-                    : undefined }), this.events !== undefined && (index.h("div", { class: "sd-calendar__dots" }, uniqueEvents.map(eventName => (index.h("span", { key: eventName, class: "sd-calendar__dot", style: { backgroundColor: this.getEventColor(eventName) } })))))));
-        })), allEventNames.length > 0 && (index.h("div", { key: '0556e06bcd0bab75b61c60181d9b203cb6ad4741', class: "sd-calendar__legend" }, allEventNames.map(name => (index.h("div", { key: name, class: "sd-calendar__legend-item" }, index.h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), index.h("span", { class: "sd-calendar__legend-label" }, name))))))));
-    }
-    static get watchers() { return {
-        "value": [{
-                "handleValueChange": 0
-            }],
-        "events": [{
-                "handleEventsChange": 0
-            }],
-        "eventColors": [{
-                "handleEventsChange": 0
-            }]
-    }; }
-};
-SdCalendar.style = sdCalendarCss();
-
-exports.sd_calendar = SdCalendar;

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

@@ -1,219 +0,0 @@
-'use strict';
-
-var index = require('./index-Cw-78mnC.js');
-var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
-var sdDatePicker_config = require('./sd-date-picker.config-CjvrFpYK.js');
-
-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}`;
-
-const SdDatePickerCalendar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.select = index.createEvent(this, "sdSelect", 7);
-        this.viewChange = index.createEvent(this, "sdViewChange", 7);
-    }
-    value = null;
-    selectable;
-    currentYear;
-    currentMonth;
-    select;
-    viewChange;
-    dateUtil = useDatePicker.useDatePicker();
-    componentWillLoad() {
-        this.syncViewFromValue();
-    }
-    handleValueChange() {
-        this.syncViewFromValue();
-    }
-    syncViewFromValue() {
-        const base = this.value || useDatePicker.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': sdDatePicker_config.CALENDAR_LAYOUT.bg,
-            '--calendar-padding': `${sdDatePicker_config.CALENDAR_LAYOUT.paddingXY}px`,
-            '--calendar-gap': `${sdDatePicker_config.CALENDAR_LAYOUT.gap}px`,
-            '--calendar-radius': `${sdDatePicker_config.CALENDAR_LAYOUT.radius}px`,
-            '--calendar-header-gap': `${sdDatePicker_config.CALENDAR_LAYOUT.header.gap}px`,
-            '--calendar-header-divider': sdDatePicker_config.CALENDAR_LAYOUT.header.divider,
-            '--calendar-header-font-size': `${sdDatePicker_config.CALENDAR_LAYOUT.header.fontSize}px`,
-            '--calendar-header-line-height': `${sdDatePicker_config.CALENDAR_LAYOUT.header.lineHeight}px`,
-            '--calendar-header-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.header.fontWeight,
-            '--calendar-week-font-size': `${sdDatePicker_config.CALENDAR_LAYOUT.week.fontSize}px`,
-            '--calendar-week-line-height': `${sdDatePicker_config.CALENDAR_LAYOUT.week.lineHeight}px`,
-            '--calendar-week-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.week.fontWeight,
-            '--calendar-week-color': sdDatePicker_config.CALENDAR_LAYOUT.week.color,
-            '--calendar-grid-row-gap': `${sdDatePicker_config.CALENDAR_LAYOUT.grid.rowGap}px`,
-            '--calendar-day-size': `${sdDatePicker_config.CALENDAR_LAYOUT.day.size}px`,
-            '--calendar-day-circle-size': `${sdDatePicker_config.CALENDAR_LAYOUT.day.circleSize}px`,
-            '--calendar-day-circle-radius': `${sdDatePicker_config.CALENDAR_LAYOUT.day.circleRadius}px`,
-            '--calendar-day-text': sdDatePicker_config.CALENDAR_LAYOUT.day.defaultText,
-            '--calendar-day-hover-text': sdDatePicker_config.CALENDAR_LAYOUT.day.hoverText,
-            '--calendar-day-hover-border': sdDatePicker_config.CALENDAR_LAYOUT.day.hoverBorder,
-            '--calendar-day-select-bg': sdDatePicker_config.CALENDAR_LAYOUT.day.selectBg,
-            '--calendar-day-select-text': sdDatePicker_config.CALENDAR_LAYOUT.day.selectText,
-            '--calendar-day-disabled-text': sdDatePicker_config.CALENDAR_LAYOUT.day.disabledText,
-            '--calendar-day-font-size': `${sdDatePicker_config.CALENDAR_LAYOUT.day.fontSize}px`,
-            '--calendar-day-line-height': `${sdDatePicker_config.CALENDAR_LAYOUT.day.lineHeight}px`,
-            '--calendar-day-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.day.fontWeight,
-            '--calendar-day-bold-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.day.boldFontWeight,
-        };
-        return (index.h("div", { key: '5fca5d51cbe5005cde3468c10f39397831371762', class: "sd-date-picker-calendar", style: cssVars }, index.h("div", { key: '5b6a101b463b455bfc70f9b92665fe308f45773d', class: "sd-date-picker-calendar__header" }, index.h("div", { key: '3fe7a4e416c632640371f9b3cb12baf72c7eab06', class: "sd-date-picker-calendar__nav-group" }, index.h("sd-ghost-button", { key: '1c71cf45dae23308ff901f08b606f0cfcdc7e5b4', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { key: 'aa9863d2cac5eb5d00a0d72570b216206b669f37', class: "sd-date-picker-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { key: '941118e0c3cd37ed5decb2e91cfa738221f74958', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("span", { key: 'e630c7269a617deeaa38cace0e2a91affb558688', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), index.h("div", { key: '45cfc135eeb6bf834cef92c1e36f2def4d7c2058', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, index.h("sd-ghost-button", { key: '98483c6626ea13cdb78be806feaa1748d60b6a1a', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { key: '9e6097a040679203117436966c246f00b94f5ff2', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), index.h("sd-ghost-button", { key: '0ab7ccdae8678bb909aca74f4189a4426e51ec0b', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), index.h("div", { key: '07763d55d00fd6c6b3523bbbb2e994a177a5b81c', class: "sd-date-picker-calendar__week" }, sdDatePicker_config.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), index.h("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 && useDatePicker.today === cell.date;
-            const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
-            return (index.h("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) }, index.h("span", { class: "sd-date-picker-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : '')));
-        }))));
-    }
-    static get watchers() { return {
-        "value": [{
-                "handleValueChange": 0
-            }]
-    }; }
-};
-SdDatePickerCalendar.style = sdDatePickerCalendarCss();
-
-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) {
-        index.registerInstance(this, hostRef);
-        this.triggerClick = index.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 = sdDatePicker_config.DATEPICKER_SIZE_MAP[this.size] ?? sdDatePicker_config.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
-                ? sdDatePicker_config.DATEPICKER_COLORS.text.disabled
-                : hasValue
-                    ? sdDatePicker_config.DATEPICKER_COLORS.text.default
-                    : sdDatePicker_config.DATEPICKER_COLORS.text.hint,
-            '--trigger-icon-color': this.disabled
-                ? sdDatePicker_config.DATEPICKER_COLORS.icon.disabled
-                : sdDatePicker_config.DATEPICKER_COLORS.icon.default,
-        };
-        return (index.h("div", { key: 'df53dd75ead71167d7089daab5718c7ff1c990ae', 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();
-                }
-            } }, index.h("sd-icon", { key: '76f41c99e1695eaa191cbc81ae057e65cb78e955', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), index.h("span", { key: '4e1a4b2b41737f05dc1a4e642d317f5fc93bf9b2', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
-    }
-};
-SdDatePickerTrigger.style = sdDatePickerTriggerCss();
-
-exports.sd_date_picker_calendar = SdDatePickerCalendar;
-exports.sd_date_picker_trigger = SdDatePickerTrigger;