@sellmate/design-system 1.8.0 → 1.10.0

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

@@ -0,0 +1,272 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { n as nanoid } from './index-CCwNgVmC.js';
+import { C as CHIP_TYPOGRAPHY, a as CHIP_COLORS, b as CHIP_LAYOUT } from './sd-chip.config-DDj5KTBF.js';
+
+const chipInput = {
+	sm: {
+		minHeight: "36",
+		paddingX: "12",
+		paddingY: "6",
+		radius: "4",
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"}
+	},
+	md: {
+		minHeight: "40",
+		paddingX: "16",
+		paddingY: "8",
+		radius: "6",
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "400",
+			fontSize: "14",
+			lineHeight: "24"
+		}
+	},
+	chip: {
+		gap: "8"
+	},
+	text: {
+		placeholder: "#AAAAAA"
+	}
+};
+var chipInputTokens = {
+	chipInput: chipInput
+};
+
+const sm = chipInputTokens.chipInput.sm;
+const md = chipInputTokens.chipInput.md;
+const CHIP_INPUT_SIZE_MAP = {
+    sm: {
+        minHeight: sm.minHeight,
+        paddingX: sm.paddingX,
+        paddingY: sm.paddingY,
+        radius: sm.radius,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+        fontFamily: sm.typography.fontFamily,
+    },
+    md: {
+        minHeight: md.minHeight,
+        paddingX: md.paddingX,
+        paddingY: md.paddingY,
+        radius: md.radius,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+        fontFamily: md.typography.fontFamily,
+    },
+};
+const CHIP_INPUT_COLORS = {
+    text: {
+        placeholder: chipInputTokens.chipInput.text.placeholder,
+    },
+};
+const CHIP_INPUT_LAYOUT = {
+    chipGap: `${chipInputTokens.chipInput.chip.gap}px`,
+};
+const CHIP_INPUT_RESET = {
+    dividerColor: '#E1E1E1', // TODO: 토큰 반영 후 교체
+    iconColor: '#888888', // TODO: 토큰 반영 후 교체 (grey_65)
+    labelColor: '#555555', // TODO: 토큰 반영 후 교체 (grey_70)
+};
+
+const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}`;
+
+const SdChipInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.focusEvent = createEvent(this, "sdFocus", 7);
+        this.blurEvent = createEvent(this, "sdBlur", 7);
+    }
+    get host() { return getElement(this); }
+    values = [];
+    errors = [];
+    size = 'sm';
+    disabled = false;
+    placeholder = '입력해 주세요.';
+    name = nanoid();
+    rules = [];
+    error = false;
+    useReset = false;
+    // sd-field props
+    label = '';
+    labelWidth = '';
+    hint = '';
+    errorMessage = '';
+    width = '';
+    status;
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    internalValues = [];
+    internalErrors = [];
+    focused = false;
+    hovered = false;
+    inputValue = '';
+    inputEl;
+    formField;
+    get value() {
+        return this.internalValues;
+    }
+    valuesChanged(newValues) {
+        this.internalValues = [...(newValues ?? [])];
+    }
+    errorsChanged(newErrors) {
+        if (Array.isArray(newErrors)) {
+            this.internalErrors = [...newErrors];
+        }
+    }
+    componentWillLoad() {
+        this.internalValues = [...(this.values ?? [])];
+        if (Array.isArray(this.errors)) {
+            this.internalErrors = [...this.errors];
+        }
+    }
+    getChipError(index) {
+        if (typeof this.errors === 'function') {
+            return this.errors(this.internalValues[index] ?? '');
+        }
+        return this.internalErrors[index] ?? false;
+    }
+    update;
+    focusEvent;
+    blurEvent;
+    async sdValidate() {
+        return this.formField?.sdValidate();
+    }
+    async sdReset() {
+        return this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        return this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        return this.formField?.sdFocus();
+    }
+    handleChipUpdate = (index, newValue) => {
+        if (newValue.trim() === '') {
+            this.handleChipRemove(index);
+            return;
+        }
+        const next = [...this.internalValues];
+        next[index] = newValue;
+        this.internalValues = next;
+        this.values = next;
+        this.update.emit(next);
+    };
+    handleChipRemove = (index) => {
+        const next = this.internalValues.filter((_, i) => i !== index);
+        this.internalValues = next;
+        this.values = next;
+        if (Array.isArray(this.errors)) {
+            const nextErrors = this.internalErrors.filter((_, i) => i !== index);
+            this.internalErrors = nextErrors;
+            this.errors = nextErrors;
+        }
+        this.update.emit(next);
+        this.inputEl?.focus();
+    };
+    handleKeyDown = (event) => {
+        const input = event.target;
+        if (event.key === 'Enter' && !event.isComposing && input.value.trim() !== '') {
+            event.preventDefault();
+            const next = [...this.internalValues, input.value.trim()];
+            this.internalValues = next;
+            this.values = next;
+            input.value = '';
+            this.inputValue = '';
+            this.update.emit(next);
+        }
+        else if (event.key === 'Backspace' && input.value === '' && this.internalValues.length > 0) {
+            event.preventDefault();
+            const next = this.internalValues.slice(0, -1);
+            const nextErrors = this.internalErrors.slice(0, -1);
+            this.internalValues = next;
+            this.internalErrors = nextErrors;
+            this.values = next;
+            this.errors = nextErrors;
+            this.update.emit(next);
+        }
+    };
+    handleInput = (event) => {
+        this.inputValue = event.target.value;
+    };
+    handleFocus = () => {
+        this.focused = true;
+        this.focusEvent.emit();
+    };
+    handleBlur = () => {
+        this.focused = false;
+        this.blurEvent.emit();
+    };
+    handleContainerClick = () => {
+        if (!this.disabled) {
+            this.inputEl?.focus();
+        }
+    };
+    handleResetInput = () => {
+        this.internalValues = [];
+        this.internalErrors = [];
+        this.values = [];
+        if (Array.isArray(this.errors)) {
+            this.errors = [];
+        }
+        this.update.emit([]);
+        this.inputEl?.focus();
+    };
+    render() {
+        const sizeTokens = CHIP_INPUT_SIZE_MAP[this.size] ?? CHIP_INPUT_SIZE_MAP.sm;
+        const cssVars = {
+            [`--sd-system-size-field-${this.size}-height`]: 'auto',
+            [`--sd-system-radius-field-${this.size}`]: `${sizeTokens.radius}px`,
+            '--sd-chip-input-min-height': `${sizeTokens.minHeight}px`,
+            '--sd-chip-input-padding-x': `${sizeTokens.paddingX}px`,
+            '--sd-chip-input-padding-y': `${sizeTokens.paddingY}px`,
+            '--sd-chip-input-font-size': `${sizeTokens.fontSize}px`,
+            '--sd-chip-input-line-height': `${sizeTokens.lineHeight}px`,
+            '--sd-chip-input-font-weight': sizeTokens.fontWeight,
+            '--sd-chip-input-font-family': sizeTokens.fontFamily,
+            '--sd-chip-input-chip-gap': CHIP_INPUT_LAYOUT.chipGap,
+            '--sd-chip-input-placeholder-color': CHIP_INPUT_COLORS.text.placeholder,
+            '--sd-chip-input-reset-gap': CHIP_INPUT_LAYOUT.chipGap,
+            '--sd-chip-input-divider-color': CHIP_INPUT_RESET.dividerColor,
+            '--sd-chip-input-field-height': CHIP_LAYOUT.height,
+            '--sd-chip-input-field-padding-x': CHIP_LAYOUT.paddingX,
+            '--sd-chip-input-field-radius': CHIP_LAYOUT.radius,
+            '--sd-chip-input-field-border-width': CHIP_LAYOUT.borderWidth,
+            '--sd-chip-input-field-bg': CHIP_COLORS.bg.default,
+            '--sd-chip-input-field-border-color': 'transparent',
+            '--sd-chip-input-field-content': CHIP_COLORS.content.focus,
+            '--sd-chip-input-field-font-size': CHIP_TYPOGRAPHY.focus.fontSize,
+            '--sd-chip-input-field-font-weight': CHIP_TYPOGRAPHY.focus.fontWeight,
+            '--sd-chip-input-field-line-height': CHIP_TYPOGRAPHY.focus.lineHeight,
+            '--sd-chip-input-field-font-family': CHIP_TYPOGRAPHY.focus.fontFamily,
+        };
+        return (h("sd-field", { key: 'cfff85a1732e23052fb2c736512f48f5653c4e1a', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '872d73f015e8aa79a9afcf1592372b3ba3bbb9a5', class: "sd-chip-input", onClick: this.handleContainerClick }, this.internalValues.map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.disabled, onSdUpdate: (e) => this.handleChipUpdate(i, e.detail), onSdRemove: () => this.handleChipRemove(i), onSdFocus: () => {
+                this.focused = true;
+            }, onSdBlur: () => {
+                this.focused = false;
+            } }))), h("div", { key: '33746a3ce014b5d28329c193d93d8bf1fc4957a6', class: {
+                'sd-chip-input__field': true,
+                'sd-chip-input__field--filled': this.inputValue !== '',
+                'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
+            }, "data-value": this.inputValue !== '' ? this.inputValue : this.internalValues.length === 0 ? this.placeholder : '' }, h("input", { key: '74b1e76b3123c371fffe344d922ff42801f028e7', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur })), this.useReset && this.internalValues.length > 0 && (h("div", { key: '3343b3d3fed05856739675d802115f7e5b2ea110', class: "sd-chip-input__reset" }, this.inputValue === '' && h("span", { key: 'c0398e9c476309964c132b3647dd95cd2a65d948', class: "sd-chip-input__divider" }), h("sd-text-link", { key: 'e00af312380d40e8b6a3c9a463cea796146632a1', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput }))))));
+    }
+    static get watchers() { return {
+        "values": [{
+                "valuesChanged": 0
+            }],
+        "errors": [{
+                "errorsChanged": 0
+            }]
+    }; }
+};
+SdChipInput.style = sdChipInputCss();
+
+export { SdChipInput as sd_chip_input };

package/dist/esm/sd-chip.config-DDj5KTBF.js

@@ -0,0 +1,67 @@
+const chip = {
+	height: "24",
+	paddingX: "8",
+	gap: "4",
+	radius: "9999",
+	typography: {
+		"default": {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "500",
+			lineHeight: "20"
+		},
+		focus: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "400",
+			lineHeight: "20"
+		}
+	},
+	bg: {
+		"default": "#F6F6F6",
+		error: "#FCEFEF"},
+	content: {
+		"default": "#555555",
+		error: "#E30000",
+		focus: "#222222"},
+	border: {
+		width: "1"
+	}
+};
+var chipTokens = {
+	chip: chip
+};
+
+const CHIP_LAYOUT = {
+    height: `${chipTokens.chip.height}px`,
+    paddingX: `${chipTokens.chip.paddingX}px`,
+    gap: `${chipTokens.chip.gap}px`,
+    radius: `${chipTokens.chip.radius}px`,
+    borderWidth: `${chipTokens.chip.border.width}px`,
+};
+const CHIP_COLORS = {
+    bg: {
+        default: chipTokens.chip.bg.default,
+        error: chipTokens.chip.bg.error,
+    },
+    content: {
+        default: chipTokens.chip.content.default,
+        error: chipTokens.chip.content.error,
+        focus: chipTokens.chip.content.focus,
+    }};
+const CHIP_TYPOGRAPHY = {
+    default: {
+        fontFamily: chipTokens.chip.typography.default.fontFamily,
+        fontSize: `${chipTokens.chip.typography.default.fontSize}px`,
+        fontWeight: chipTokens.chip.typography.default.fontWeight,
+        lineHeight: `${chipTokens.chip.typography.default.lineHeight}px`,
+    },
+    focus: {
+        fontFamily: chipTokens.chip.typography.focus.fontFamily,
+        fontSize: `${chipTokens.chip.typography.focus.fontSize}px`,
+        fontWeight: chipTokens.chip.typography.focus.fontWeight,
+        lineHeight: `${chipTokens.chip.typography.focus.lineHeight}px`,
+    },
+};
+
+export { CHIP_TYPOGRAPHY as C, CHIP_COLORS as a, CHIP_LAYOUT as b };

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

@@ -1,81 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DNWwGHho.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { C as CHIP_TYPOGRAPHY, a as CHIP_COLORS, b as CHIP_LAYOUT } from './sd-chip.config-DDj5KTBF.js';
 
-const chip = {
-	height: "24",
-	paddingX: "8",
-	gap: "4",
-	radius: "9999",
-	typography: {
-		"default": {
-			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
-			fontSize: "12",
-			fontWeight: "500",
-			lineHeight: "20"
-		},
-		focus: {
-			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
-			fontSize: "12",
-			fontWeight: "400",
-			lineHeight: "20"
-		}
-	},
-	bg: {
-		"default": "#F6F6F6",
-		error: "#FCEFEF",
-		focus: "#FFFFFF"
-	},
-	content: {
-		"default": "#888888",
-		error: "#E30000",
-		focus: "#555555"
-	},
-	border: {
-		focus: "#E1E1E1",
-		width: "1"
-	}
-};
-var chipTokens = {
-	chip: chip
-};
-
-const CHIP_LAYOUT = {
-    height: `${chipTokens.chip.height}px`,
-    paddingX: `${chipTokens.chip.paddingX}px`,
-    gap: `${chipTokens.chip.gap}px`,
-    radius: `${chipTokens.chip.radius}px`,
-    borderWidth: `${chipTokens.chip.border.width}px`,
-};
-const CHIP_COLORS = {
-    bg: {
-        default: chipTokens.chip.bg.default,
-        error: chipTokens.chip.bg.error,
-        focus: chipTokens.chip.bg.focus,
-    },
-    content: {
-        default: chipTokens.chip.content.default,
-        error: chipTokens.chip.content.error,
-        focus: chipTokens.chip.content.focus,
-    },
-    border: {
-        focus: chipTokens.chip.border.focus,
-    },
-};
-const CHIP_TYPOGRAPHY = {
-    default: {
-        fontFamily: chipTokens.chip.typography.default.fontFamily,
-        fontSize: `${chipTokens.chip.typography.default.fontSize}px`,
-        fontWeight: chipTokens.chip.typography.default.fontWeight,
-        lineHeight: `${chipTokens.chip.typography.default.lineHeight}px`,
-    },
-    focus: {
-        fontFamily: chipTokens.chip.typography.focus.fontFamily,
-        fontSize: `${chipTokens.chip.typography.focus.fontSize}px`,
-        fontWeight: chipTokens.chip.typography.focus.fontWeight,
-        lineHeight: `${chipTokens.chip.typography.focus.lineHeight}px`,
-    },
-};
-
-const sdChipCss = () => `sd-chip{display:inline-flex;width:fit-content;height:fit-content}sd-chip .sd-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-chip-gap);height:var(--sd-chip-height);padding:0 var(--sd-chip-padding-x);border-radius:var(--sd-chip-radius);background:var(--sd-chip-bg);color:var(--sd-chip-content);border:var(--sd-chip-border-width) solid var(--sd-chip-border-color);font-family:var(--sd-chip-font-family);font-size:var(--sd-chip-font-size);font-weight:var(--sd-chip-font-weight);line-height:var(--sd-chip-line-height);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}sd-chip .sd-chip--editable:not(.sd-chip--focus){cursor:text}sd-chip .sd-chip--disabled{cursor:not-allowed;opacity:0.6}sd-chip .sd-chip__label{display:inline-flex;align-items:center;min-width:0}sd-chip .sd-chip__input{display:inline-block;min-width:1ch;outline:none;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:text}sd-chip .sd-chip__input:empty::before{content:attr(data-placeholder);color:inherit;opacity:0.6;pointer-events:none}sd-chip .sd-chip__remove{flex-shrink:0}`;
+const sdChipCss = () => `sd-chip{display:inline-flex;width:fit-content;max-width:100%;height:fit-content}sd-chip .sd-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-chip-gap);max-width:100%;height:var(--sd-chip-height);padding:0 var(--sd-chip-padding-x);border-radius:var(--sd-chip-radius);background:var(--sd-chip-bg);color:var(--sd-chip-content);border:var(--sd-chip-border-width) solid var(--sd-chip-border-color);font-family:var(--sd-chip-font-family);font-size:var(--sd-chip-font-size);font-weight:var(--sd-chip-font-weight);line-height:var(--sd-chip-line-height);box-sizing:border-box;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none}sd-chip .sd-chip--editable:not(.sd-chip--focus){cursor:text}sd-chip .sd-chip--disabled{cursor:not-allowed;opacity:0.6}sd-chip .sd-chip__label{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis}sd-chip .sd-chip__input{display:inline-block;min-width:1ch;outline:none;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:text}sd-chip .sd-chip__input:empty::before{content:attr(data-placeholder);color:inherit;opacity:0.6;pointer-events:none}sd-chip .sd-chip__remove{flex-shrink:0}`;
 
 const SdChip = class {
     constructor(hostRef) {
@@ -210,10 +136,12 @@ const SdChip = class {
     handleInputKeyDown = (event) => {
         if (event.key === 'Enter') {
             event.preventDefault();
+            event.stopPropagation();
             this.commitEdit();
         }
         else if (event.key === 'Escape') {
             event.preventDefault();
+            event.stopPropagation();
             this.cancelEdit();
         }
     };
@@ -274,22 +202,22 @@ const SdChip = class {
     }
     render() {
         const state = this.resolveState();
-        const typography = state === 'focus' ? CHIP_TYPOGRAPHY.focus : CHIP_TYPOGRAPHY.default;
+        const typography = CHIP_TYPOGRAPHY.default;
         const cssVars = {
             '--sd-chip-height': CHIP_LAYOUT.height,
             '--sd-chip-padding-x': CHIP_LAYOUT.paddingX,
             '--sd-chip-gap': CHIP_LAYOUT.gap,
             '--sd-chip-radius': CHIP_LAYOUT.radius,
             '--sd-chip-border-width': CHIP_LAYOUT.borderWidth,
-            '--sd-chip-bg': CHIP_COLORS.bg[state],
-            '--sd-chip-content': CHIP_COLORS.content[state],
-            '--sd-chip-border-color': state === 'focus' ? CHIP_COLORS.border.focus : 'transparent',
+            '--sd-chip-bg': state === 'error' ? CHIP_COLORS.bg.error : CHIP_COLORS.bg.default,
+            '--sd-chip-content': state === 'error' ? CHIP_COLORS.content.error : CHIP_COLORS.content.default,
+            '--sd-chip-border-color': 'transparent',
             '--sd-chip-font-family': typography.fontFamily,
             '--sd-chip-font-size': typography.fontSize,
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: '6503611c9cb03be2de4fc09398e2ce1b34b8ab10', class: {
+        return (h("span", { key: 'e1c1386f3143f4830256784853c1d931706a6beb', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-DNWwGHho.js';
+import { r as registerInstance, h, H as Host } from './index-BpO2YWvq.js';
 import { p as progressTokens } from './component.progress-D1vaasIp.js';
 import { s as systemTokens } from './system-j2khhcHY.js';
 
@@ -70,7 +70,7 @@ const SdCircleProgress = class {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '9a4424e79b095c240b2dd53c8655b9a4cccaf581', style: hostStyle }, h("svg", { key: '37ca87d4c4aa6ab6b84a4301225d775f1998c0c1', 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: '372f7031310dddba431323b0527c273311a498e3', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'def6ff7573e4c4a08648f35f7cb545d6b8064f6d', 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: '13d6345672fdafaf6a1e1eef9f5987179a99c3ae', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'c42e2fa2826284017e530e967975e45277ae9ee3', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '46d74c0edb5a5e8cd0472c83efc45a0efaf353b4', style: hostStyle }, h("svg", { key: '34117c89eb180370a215807e614ad08f4f72b517', 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: '08ac6f011b6a4b6744ddcf437b1e0a5b96abfc6e', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '5ae0a53ce10bd5a8b2f316ebd00d3ee28c4336d6', 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: 'fd52ee1947d41b2117c9ea6e4cc9a448799342e3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'a58776c4ef67eb900eba97ff4fed138c8f5e8452', class: "sd-circle-progress__label" }, this.label)));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-DNWwGHho.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-BpO2YWvq.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 import { m as modalTokens } from './component.modal-DOXMJi-V.js';
 
@@ -100,9 +100,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: 'c41a58f13b95da7f1f0aea3620abf239dcb116b6', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'bdc1bc374934c2f9745f567b4e6ffd55ec3675ce', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'ff16ebde448157e657eb74e1b0c5f4a331cf396a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'd718b2ae6f6e92f8c77ec821b78924ffbe267d12', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'a3909abde84c4d6987c9036a705cba4aa7d01ea6', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '29a4bf80ab75d973544c0a29c87133c9ef8a5aab', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: '93eb2c75728cf26969a229a876f9217b4e00c63a', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '4d3ce0662b2d860a4ed6ae3c8177ae75dae4fb92', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '7c406d59c2470b610a187bf45aa5cd4ab5c6b26b', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '10e3d2c8a87a728df4e3f3be7dfab96475738e2b', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '9cc844c8cefb2fd0dc96871b55fc1c7c6e41c526', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'bbaa81a02c067d66c4cc19cf805b7a6939231311', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '31734f096eee6e6a9be770eafa43066c8e763608', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: 'a10838fb7c7081fdaa85cdaa33f92ef30c00a888', 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: '730fd073ade9b8788de77d36fc4aeddd0b304c07', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '059fd87fb39b8e2976fcb671c7dd78310324119f', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '6b320645505c099783a4a6704e96e9261054c7dc', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'd6a4554a7db861ae7afc610a629591224946d990', 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: '540f3bb73aa61a1a2a041eba9a22a198c7772914', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '1944aeb4d140c779d0af1304160a86c5056335a8', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'efd463686d98e9d2edc3e1cd7b4f54d8da4fef56', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'b9033fb98acf3de36b7fb3e1969ccf5a7becef39', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -186,7 +186,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: 'e1161a16a56cddedc8e4bb76370bdf456d90e15a', style: hostStyle }, h("div", { key: 'e01979e4636465afa4b960ffdb9722f645386dca', class: "sd-loading-modal" }, h("div", { key: '1c1ecc05d20f58084c0d6f8048b17cd84f446edb', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (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: '6793b86562b67699c59fd83fb0d6ee7378f6d991', 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: '75036f7d88be636987de2fe999c00d338fa352d5', class: "sd-loading-modal__button" }, h("sd-button", { key: '91f30470702df2be7256d451cc80d27e86510d2e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '17636253239532d90e596f20d84795fe2e65508d', style: hostStyle }, h("div", { key: '2f925afceca4102049d7876ab4d1e33fa1ef5ef7', class: "sd-loading-modal" }, h("div", { key: '0598cff340210ca9ec5e28fb1992cbbc1b8e5a06', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (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: '3d699238c19ee66fd3afc72194133a865501cc08', 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: 'd454a168360cd23a3e71482d67ee81d8eabdec58', class: "sd-loading-modal__button" }, h("sd-button", { key: '0aa26dc830d1c4827f2ee0ca0bfdf4bb8cd2c9f5', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DNWwGHho.js';
+import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
 
 const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
 

package/dist/esm/{sd-date-picker.config-CGEE3DkI.js → sd-date-picker.config-6dvDZPGx.js}

@@ -1,4 +1,5 @@
-import { d as datepickerTokens } from './component.datepicker-BQn6le_Y.js';
+import { d as datepickerTokens } from './component.datepicker-laVsm9VM.js';
+import { f as fieldTokens } from './component.field-BOJJ_sQS.js';
 
 const sm = datepickerTokens.datepicker.sm;
 const md = datepickerTokens.datepicker.md;
@@ -28,7 +29,10 @@ const DATEPICKER_COLORS = {
     border: datepickerTokens.datepicker.border,
     bg: datepickerTokens.datepicker.bg,
     icon: datepickerTokens.datepicker.icon,
-    text: datepickerTokens.datepicker.text,
+    text: {
+        ...datepickerTokens.datepicker.text,
+        hint: fieldTokens.field.hint.color,
+    },
 };
 
 export { DATEPICKER_COLORS as D, DATEPICKER_SIZE_MAP as a };