@sellmate/design-system 1.0.78 → 1.2.0

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, a as getElement, h } from './index-Cnwbjz1F.js';
-import { s as systemTokens } from './system-CZ4ltUOw.js';
+import { r as registerInstance, a as getElement, h } from './index-0U6dRjlq.js';
+import { s as systemTokens } from './system-GBlVDmy4.js';
 
 const guide = {
 	button: {
@@ -13,7 +13,6 @@ const guide = {
 			lineHeight: "20"
 		},
 		icon: {
-			size: "16",
 			"default": "#00973C",
 			active: "#FFFFFF"
 		},
@@ -74,7 +73,6 @@ const GUIDE_CONFIG = {
         fontSize: `${button.typography.fontSize}px`,
         fontWeight: button.typography.fontWeight,
         lineHeight: `${button.typography.lineHeight}px`,
-        iconSize: Number(button.icon.size),
         iconColorDefault: button.icon.default,
         iconColorActive: button.icon.active,
         iconColorNotion: NOTION_ICON_COLOR,
@@ -106,7 +104,7 @@ const GUIDE_CONFIG = {
     },
 };
 
-const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-button-radius-sm, 4px);transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:var(--sd-button-button-border-width-default, 1px) solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-button-border-disabled, #CCCCCC);background:var(--sd-button-button-bg-disabled, #E1E1E1);color:var(--sd-button-button-text-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide .sd-guide__button .sd-button{min-height:var(--sd-guide-button-height);padding:0 var(--sd-guide-button-padding-x);border-radius:var(--sd-guide-button-radius);border:var(--sd-guide-button-border-width) solid var(--sd-guide-button-border-color);background:var(--sd-guide-button-bg-default);color:var(--sd-guide-button-text-default) !important;transition:none;display:flex;align-items:center;gap:var(--sd-guide-button-gap)}.sd-guide .sd-guide__button .sd-button .sd-button__content{color:var(--sd-guide-button-text-default) !important;gap:var(--sd-guide-button-gap)}.sd-guide .sd-guide__button .sd-button .sd-button__content .sd-button__label{margin-left:0;color:var(--sd-guide-button-text-default) !important;font-size:var(--sd-guide-button-font-size);font-weight:var(--sd-guide-button-font-weight);line-height:var(--sd-guide-button-line-height)}.sd-guide .sd-guide__button--active .sd-button{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--active .sd-button .sd-button__content{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--active .sd-button .sd-button__content .sd-button__label{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--type-tip.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-tip);border-color:var(--sd-guide-button-bg-tip)}.sd-guide .sd-guide__button--type-notion.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-notion);border-color:var(--sd-guide-button-bg-notion)}.sd-guide__popup{position:relative;padding:var(--sd-guide-contents-padding-y) var(--sd-guide-contents-padding-x);border-radius:var(--sd-guide-contents-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:var(--sd-guide-contents-title-gap);margin-bottom:var(--sd-guide-contents-gap)}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;margin-bottom:0;font-size:var(--sd-guide-contents-title-font-size);font-weight:var(--sd-guide-contents-title-font-weight);line-height:var(--sd-guide-contents-title-line-height);color:var(--sd-guide-contents-text-color)}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height)}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height);margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-1:not(:first-child){margin-top:var(--sd-guide-contents-row-gap)}.sd-guide__popup__list__item--depth-2{margin-top:var(--sd-guide-contents-body-gap)}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
+const sdGuideCss = () => `@charset "UTF-8";sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide .sd-guide__button .sd-button{min-height:var(--sd-guide-button-height);padding:0 var(--sd-guide-button-padding-x);border-radius:var(--sd-guide-button-radius);border:var(--sd-guide-button-border-width) solid var(--sd-guide-button-border-color);background:var(--sd-guide-button-bg-default);color:var(--sd-guide-button-text-default) !important;transition:none;display:flex;align-items:center;gap:var(--sd-guide-button-gap);--sd-button-bg-hover:var(--sd-guide-button-bg-default);--sd-button-current-icon:var(--sd-guide-button-icon-color-default)}.sd-guide .sd-guide__button .sd-button .sd-button__content{color:var(--sd-guide-button-text-default) !important;gap:var(--sd-guide-button-gap)}.sd-guide .sd-guide__button .sd-button .sd-button__content .sd-button__label{margin-left:0;color:var(--sd-guide-button-text-default) !important;font-size:var(--sd-guide-button-font-size);font-weight:var(--sd-guide-button-font-weight);line-height:var(--sd-guide-button-line-height)}.sd-guide .sd-guide__button--type-notion .sd-button{--sd-button-current-icon:var(--sd-guide-button-icon-color-notion)}.sd-guide .sd-guide__button--active .sd-button{color:var(--sd-guide-button-text-active) !important;--sd-button-current-icon:var(--sd-guide-button-icon-color-active)}.sd-guide .sd-guide__button--active .sd-button .sd-button__content{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--active .sd-button .sd-button__content .sd-button__label{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--type-tip.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-tip);border-color:var(--sd-guide-button-bg-tip);--sd-button-bg-hover:var(--sd-guide-button-bg-tip)}.sd-guide .sd-guide__button--type-notion.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-notion);border-color:var(--sd-guide-button-bg-notion);--sd-button-bg-hover:var(--sd-guide-button-bg-notion)}.sd-guide__popup{position:relative;padding:var(--sd-guide-contents-padding-y) var(--sd-guide-contents-padding-x);border-radius:var(--sd-guide-contents-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:var(--sd-guide-contents-title-gap);margin-bottom:var(--sd-guide-contents-gap)}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;margin-bottom:0;font-size:var(--sd-guide-contents-title-font-size);font-weight:var(--sd-guide-contents-title-font-weight);line-height:var(--sd-guide-contents-title-line-height);color:var(--sd-guide-contents-text-color)}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height)}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height);margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-1:not(:first-child){margin-top:var(--sd-guide-contents-row-gap)}.sd-guide__popup__list__item--depth-2{margin-top:var(--sd-guide-contents-body-gap)}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
 
 const DEFAULT_LABEL_BY_TYPE = {
     tip: '활용 TIP',
@@ -131,7 +129,7 @@ const SdGuide = class {
     guideRef;
     handleClickGuide = () => {
         if (this.type === 'notion') {
-            if (this.url) {
+            if (this.url !== '') {
                 window.open(this.url, '_blank', 'noopener,noreferrer');
             }
             return;
@@ -158,6 +156,9 @@ const SdGuide = class {
             '--sd-guide-button-bg-notion': button.bgNotion,
             '--sd-guide-button-text-default': button.textDefault,
             '--sd-guide-button-text-active': button.textActive,
+            '--sd-guide-button-icon-color-default': button.iconColorDefault,
+            '--sd-guide-button-icon-color-active': button.iconColorActive,
+            '--sd-guide-button-icon-color-notion': button.iconColorNotion,
             '--sd-guide-contents-padding-x': contents.paddingX,
             '--sd-guide-contents-padding-y': contents.paddingY,
             '--sd-guide-contents-gap': contents.gap,
@@ -175,20 +176,19 @@ const SdGuide = class {
         };
     }
     render() {
-        const { button, contents } = GUIDE_CONFIG;
+        const { contents } = GUIDE_CONFIG;
         const isActive = this.popupShow;
         const isNotion = (this.type ?? 'tip') === 'notion';
         const defaultLabel = DEFAULT_LABEL_BY_TYPE[this.type ?? 'tip'];
         const iconName = ICON_BY_TYPE[this.type ?? 'tip'];
-        const buttonIconDefault = isNotion ? button.iconColorNotion : button.iconColorDefault;
         const popupIconColor = isNotion ? contents.iconColorNotion : contents.iconColor;
         const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
         if (isActive)
             buttonClasses.push('sd-guide__button--active');
-        return (h("div", { key: '4b9aa8bafd13828a4ec29d726f7276fab3042f2d', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: 'e3a17c594d111e95d0cb42dd8315174ccf4dd908', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), variant: isActive ? 'primary' : 'outline', label: this.label || defaultLabel, size: "sm", icon: iconName, iconColor: isActive ? button.iconColorActive : buttonIconDefault, iconSize: button.iconSize, noHover: isActive, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: 'b57b09779ec23220eb466f710d55e678c913fe24', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'e62ca3a49a4976861a3e485166c8376a71286aba', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '837625b5ab61bd9383cf5329bea66ceb97ef3bac', class: "sd-guide__popup", style: {
+        return (h("div", { key: '0003572d8025680df033b2619ad11d99ccc25a35', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: '01e15b072764f4244778c727445887326792ea45', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: 'd7fbe96ae73c3b35ce8ca673d19924b8b7503aae', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'e87cec81959c4c84a33c4c50fd40796d12ff7f4d', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '94499ea9e42b93fcec490a7ab9d7d9cccc7c1021', class: "sd-guide__popup", style: {
                 ...this.guideStyle,
-                width: this.popupWidth ? this.popupWidth + 'px' : '426px',
-            } }, h("sd-ghost-button", { key: '0e3057af64b47e20234269c0e2bf07664b8b3b13', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '544e3508d232229b4d1edd82fdefa58457cc595a', class: "sd-guide__popup__header" }, h("sd-icon", { key: '234fb04df972a50fa8deb1cacc6e34fab678d27b', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: '454d5ee4cdfc2a343d64e79dc642a2aee07ed448', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '875d5f5587808e5189e77ca02e55e8d7be1125da', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+                width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
+            } }, h("sd-ghost-button", { key: '712dc57cd85bd6929a2a1ef8221d29f46ecca686', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: 'd53aadc5d766fde09a6463c7e114030c37617545', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'dcb1fef4b2024f2b4584dc10c2dc54b28a0ce752', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: '00860dda925f2d9670a7f9e261241f3698dd513e', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '8676741e6998ed10ba39148cfff1f101fda8daa3', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/esm/sd-key-value-table.entry.js

@@ -0,0 +1,228 @@
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
+import { s as systemTokens } from './system-GBlVDmy4.js';
+import { t as tableTokens } from './component.table-BnfUIhUj.js';
+
+const t = tableTokens.table;
+const KEY_VALUE_TABLE_LAYOUT = {
+    rowHeight: Number(t.keyValue.height),
+    thWidth: 120,
+    borderRadius: Number(t.radius),
+    paddingX: Number(t.body.paddingX),
+    paddingY: Number(t.keyValue.body.padding),
+    helpIconSize: 16,
+    requiredIconSize: 12,
+    gap: Number(t.header.gap),
+    labelGap: Number(t.content.gap),
+    borderWidth: Number(t.border.width),
+    searchPaddingX: Number(t.keyValue.search.paddingX),
+};
+const KEY_VALUE_TABLE_COLORS = {
+    border: t.border.color,
+    thBg: t.header.bg,
+    thLabel: systemTokens.color.fg.primary,
+    required: systemTokens.color.fg.accent,
+    helpIcon: systemTokens.color.fg.success,
+    tdBg: systemTokens.color.bg.frame,
+    tdText: systemTokens.color.fg.primary,
+    searchBg: t.keyValue.search.bg,
+};
+const KEY_VALUE_TABLE_TYPOGRAPHY = {
+    labelFontFamily: t.header.typography.fontFamily,
+    labelFontSize: Number(t.header.typography.fontSize),
+    labelFontWeight: Number(t.header.typography.fontWeight),
+    labelLineHeight: Number(t.header.typography.lineHeight),
+    tdFontFamily: t.body.typography.fontFamily,
+    tdFontSize: Number(t.body.typography.fontSize),
+    tdFontWeight: Number(t.body.typography.fontWeight),
+    tdLineHeight: Number(t.body.typography.lineHeight),
+};
+
+const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--use-top{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding-y) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--use-top{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);padding:var(--sd-kvt-padding-y) var(--sd-kvt-padding-x);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
+
+const SdKeyValueTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "sdChange", 7);
+        this.searchEvent = createEvent(this, "sdSearch", 7);
+    }
+    /**
+     * 2차원 배열. 외부 배열 = row, 내부 배열 = 한 row에 들어가는 [th|td] field들.
+     * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
+     */
+    fields = [];
+    /**
+     * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
+     */
+    search = false;
+    /**
+     * true이면 테이블 상단 border-radius를 0으로 처리.
+     * 다른 요소(헤더, 탭 등) 하단에 붙여 쓸 때 사용.
+     */
+    useTop = false;
+    change;
+    searchEvent;
+    emit = (name, value) => {
+        this.change.emit({ name, value });
+    };
+    handleSearchClick = () => {
+        this.searchEvent.emit();
+    };
+    renderField(field) {
+        const onSdUpdate = (e) => this.emit(field.name, e.detail);
+        switch (field.type) {
+            case 'input':
+                return h("sd-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'textarea':
+                return h("sd-textarea", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'number-input':
+                return h("sd-number-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'select':
+                return h("sd-select", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'radio': {
+                const { value, direction, ...rest } = field.options ?? {};
+                return (h("sd-radio-group", { ...rest, value: value, direction: direction ?? 'horizontal', onSdUpdate: onSdUpdate }));
+            }
+            case 'checkbox': {
+                const { value, ...rest } = field.options ?? {};
+                return h("sd-checkbox", { ...rest, value: value, onSdUpdate: onSdUpdate });
+            }
+            case 'date-picker':
+                return h("sd-date-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'date-range-picker':
+                return (h("sd-date-range-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate }));
+            case 'file-picker':
+                return h("sd-file-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'text':
+            default:
+                return h("span", { class: "sd-key-value-table__text" }, field.options?.value ?? '');
+        }
+    }
+    renderHelpIcon(helpText) {
+        return (h("span", { class: "sd-key-value-table__help" }, h("sd-tooltip", { icon: "helpOutline", iconSize: KEY_VALUE_TABLE_LAYOUT.helpIconSize, color: KEY_VALUE_TABLE_COLORS.helpIcon, trigger: "hover" }, helpText)));
+    }
+    /**
+     * 같은 컬럼 인덱스의 thRowSpan에 의해 가려지는 위치를 자동 계산.
+     * `skip[r][c] === true` 이면 row r의 c번째 field는 th 셀을 렌더하지 않음.
+     */
+    computeAutoSkipTh() {
+        const skips = this.fields.map(row => row.map(() => false));
+        this.fields.forEach((row, r) => {
+            row.forEach((f, c) => {
+                const span = f.thRowSpan != null && f.thRowSpan > 1 ? f.thRowSpan : 1;
+                if (span <= 1)
+                    return;
+                for (let dr = 1; dr < span; dr++) {
+                    const targetRow = skips[r + dr];
+                    if (targetRow && c < targetRow.length) {
+                        targetRow[c] = true;
+                    }
+                }
+            });
+        });
+        return skips;
+    }
+    /**
+     * 모든 row를 훑어 전체 컬럼 수를 계산.
+     * th/td 자체와 thColSpan/tdColSpan, hideTh, thRowSpan(autoSkip)을 모두 반영.
+     */
+    computeMaxCols(autoSkip) {
+        let max = 0;
+        this.fields.forEach((row, r) => {
+            let cols = 0;
+            row.forEach((f, c) => {
+                let thCols;
+                if (f.hideTh)
+                    thCols = 0;
+                else if (autoSkip[r]?.[c])
+                    thCols = 1;
+                else
+                    thCols = f.thColSpan != null && f.thColSpan > 1 ? f.thColSpan : 1;
+                const tdCols = f.tdColSpan != null && f.tdColSpan > 1 ? f.tdColSpan : 1;
+                cols += thCols + tdCols;
+            });
+            if (cols > max)
+                max = cols;
+        });
+        return max;
+    }
+    renderTh(field, r, c) {
+        const thRowSpan = field.thRowSpan != null && field.thRowSpan > 1 ? field.thRowSpan : undefined;
+        const thColSpan = field.thColSpan != null && field.thColSpan > 1 ? field.thColSpan : undefined;
+        const classObj = { 'sd-key-value-table__th': true };
+        if (typeof field.thClass === 'string') {
+            classObj[field.thClass] = true;
+        }
+        else if (Array.isArray(field.thClass)) {
+            field.thClass.forEach(cls => (classObj[cls] = true));
+        }
+        return (h("th", { key: `th-${r}-${c}`, class: classObj, style: field.thStyle, scope: "row", rowSpan: thRowSpan, colSpan: thColSpan }, h("div", { class: "sd-key-value-table__th-inner" }, h("span", { class: "sd-key-value-table__label" }, field.label, field.required && (h("sd-icon", { class: "sd-key-value-table__required", name: "star", size: KEY_VALUE_TABLE_LAYOUT.requiredIconSize, color: KEY_VALUE_TABLE_COLORS.required, label: "required" }))), field.helpText && this.renderHelpIcon(field.helpText))));
+    }
+    renderTd(field, r, c) {
+        const tdRowSpan = field.tdRowSpan != null && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
+        const tdColSpan = field.tdColSpan != null && field.tdColSpan > 1 ? field.tdColSpan : undefined;
+        return (h("td", { key: `td-${r}-${c}`, class: "sd-key-value-table__td", rowSpan: tdRowSpan, colSpan: tdColSpan }, h("div", { class: "sd-key-value-table__td-inner" }, h("slot", { name: `field-${field.name}` }, this.renderField(field)))));
+    }
+    warnDuplicateNames() {
+        const seen = new Set();
+        const dups = new Set();
+        this.fields.forEach(row => row.forEach(f => {
+            if (seen.has(f.name))
+                dups.add(f.name);
+            else
+                seen.add(f.name);
+        }));
+        if (dups.size > 0) {
+            console.warn(`[sd-key-value-table] Duplicate field name(s) detected: ${[...dups].join(', ')}. ` +
+                `Slot names ("field-{name}") and sdChange events rely on unique names.`);
+        }
+    }
+    render() {
+        if (this.fields.length === 0)
+            return null;
+        const cssVars = {
+            '--sd-kvt-row-height': `${KEY_VALUE_TABLE_LAYOUT.rowHeight}px`,
+            '--sd-kvt-th-width': `${KEY_VALUE_TABLE_LAYOUT.thWidth}px`,
+            '--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
+            '--sd-kvt-padding-x': `${KEY_VALUE_TABLE_LAYOUT.paddingX}px`,
+            '--sd-kvt-padding-y': `${KEY_VALUE_TABLE_LAYOUT.paddingY}px`,
+            '--sd-kvt-gap': `${KEY_VALUE_TABLE_LAYOUT.gap}px`,
+            '--sd-kvt-label-gap': `${KEY_VALUE_TABLE_LAYOUT.labelGap}px`,
+            '--sd-kvt-border-width': `${KEY_VALUE_TABLE_LAYOUT.borderWidth}px`,
+            '--sd-kvt-border-color': KEY_VALUE_TABLE_COLORS.border,
+            '--sd-kvt-th-bg': KEY_VALUE_TABLE_COLORS.thBg,
+            '--sd-kvt-th-color': KEY_VALUE_TABLE_COLORS.thLabel,
+            '--sd-kvt-required-color': KEY_VALUE_TABLE_COLORS.required,
+            '--sd-kvt-td-bg': KEY_VALUE_TABLE_COLORS.tdBg,
+            '--sd-kvt-td-color': KEY_VALUE_TABLE_COLORS.tdText,
+            '--sd-kvt-label-font-family': KEY_VALUE_TABLE_TYPOGRAPHY.labelFontFamily,
+            '--sd-kvt-label-font-size': `${KEY_VALUE_TABLE_TYPOGRAPHY.labelFontSize}px`,
+            '--sd-kvt-label-font-weight': `${KEY_VALUE_TABLE_TYPOGRAPHY.labelFontWeight}`,
+            '--sd-kvt-label-line-height': `${KEY_VALUE_TABLE_TYPOGRAPHY.labelLineHeight}px`,
+            '--sd-kvt-td-font-family': KEY_VALUE_TABLE_TYPOGRAPHY.tdFontFamily,
+            '--sd-kvt-td-font-size': `${KEY_VALUE_TABLE_TYPOGRAPHY.tdFontSize}px`,
+            '--sd-kvt-td-font-weight': `${KEY_VALUE_TABLE_TYPOGRAPHY.tdFontWeight}`,
+            '--sd-kvt-td-line-height': `${KEY_VALUE_TABLE_TYPOGRAPHY.tdLineHeight}px`,
+            '--sd-kvt-search-bg': KEY_VALUE_TABLE_COLORS.searchBg,
+            '--sd-kvt-search-padding-x': `${KEY_VALUE_TABLE_LAYOUT.searchPaddingX}px`,
+        };
+        this.warnDuplicateNames();
+        const autoSkip = this.computeAutoSkipTh();
+        const maxCols = this.computeMaxCols(autoSkip);
+        const tableEl = (h("table", { class: {
+                'sd-key-value-table': true,
+                'sd-key-value-table--use-top': this.useTop,
+            }, style: cssVars }, h("colgroup", null, Array.from({ length: maxCols }, (_, i) => (h("col", { key: `col-${i}`, style: i % 2 === 0 ? { width: `${KEY_VALUE_TABLE_LAYOUT.thWidth}px` } : undefined })))), h("tbody", null, this.fields.map((row, r) => (h("tr", { class: "sd-key-value-table__row", key: `row-${r}` }, row.map((field, c) => {
+            const showTh = !field.hideTh && !autoSkip[r][c];
+            return [showTh ? this.renderTh(field, r, c) : null, this.renderTd(field, r, c)];
+        })))))));
+        if (!this.search)
+            return tableEl;
+        return (h("div", { class: {
+                'sd-key-value-table__wrapper': true,
+                'sd-key-value-table__wrapper--use-top': this.useTop,
+            }, style: cssVars }, tableEl, h("div", { class: "sd-key-value-table__search-panel" }, h("sd-button", { label: "\uAC80\uC0C9", name: "neutral_outline_md", onSdClick: this.handleSearchClick }))));
+    }
+};
+SdKeyValueTable.style = sdKeyValueTableCss();
+
+export { SdKeyValueTable as sd_key_value_table };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-Cnwbjz1F.js';
+import { r as registerInstance, h, H as Host } from './index-0U6dRjlq.js';
 import { p as progressTokens } from './component.progress-D1vaasIp.js';
-import { s as systemTokens } from './system-CZ4ltUOw.js';
+import { s as systemTokens } from './system-GBlVDmy4.js';
 
 const LINEAR_PROGRESS_COLORS = {
     track: progressTokens.progress.color.track,
@@ -47,7 +47,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: 'c7f2324ff98e1ec6e0d1d6c7a3328dd383a1abab', style: hostStyle }, h("div", { key: 'cff100404519c4114c0dd1240715beafb91acf1f', class: 'sd-linear-progress__track' }, h("div", { key: '1c7fdff123778a40cd0c3f3310141ac369205352', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'ae0b515a9bb9d5561d603fa8e88c144603af8af5', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: '5d7cdf9daccd9729729bec7bc65456b5727d4738', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: 'd131eeb581e33f40878b47541f662aca269a6759', class: 'sd-linear-progress__label' }, this.label)));
+        return (h(Host, { key: '58849d88024bc69ab0260bdf32f461fdfb87c93c', style: hostStyle }, h("div", { key: 'a4370fbc94bdf7b51d4a27f85ca86606c3770cdb', class: 'sd-linear-progress__track' }, h("div", { key: 'e270357433247981f8374a0345cb2d3ba8d4cfca', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'baa77fe44a7129330e8fe70b8aa2e8bc6fd4b703', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: '46a73b233ea34c1d9ac242140abe3b1e5831d484', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '91d5c9cc27960c7448706e641028bcc8f893b805', class: 'sd-linear-progress__label' }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();

package/dist/esm/sd-loading-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, h } from './index-0U6dRjlq.js';
 
 const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 999);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
 
@@ -16,10 +16,10 @@ const SdLoadingContainer = class {
         this.visible = false;
     }
     render() {
-        return (h("div", { key: 'a83b33262d59ecba12b7db9ed6bfe9f1fea4a54a', class: {
+        return (h("div", { key: '1c684984ec7203edb4206690026cf8085bfadcfb', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '64631929afd47606df0d397747495d2a11d62932', class: "sd-loading-container__backdrop" }), h("div", { key: '4a304e0fb66f720b57da1e4de03fa9aa5468d5d4', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '3981cb8e994384279a812864037a8e9cec34cc35', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '8adec0ef2424fa3ea30a58b27efa6344ada94070', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '42a7d3b6c0f562cbfd1a0928a3df4df3cc962299', class: "sd-loading-container__backdrop" }), h("div", { key: 'ce11d0950e5047eb47ae87f41bf7c049a2e18cbc', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'e6f63c78da63cf660942137e73cef389789e83b0', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '139b648a8a8007a050f6e81374930f92d676707c', class: "sd-loading-container__message" }, this.message)))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

package/dist/esm/sd-modal-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, a as getElement, h } from './index-0U6dRjlq.js';
 import { u as unregisterModal, r as registerModal, s as setModalInteractive, i as isTopInteractiveModal, a as requestCloseForModal } from './modal-stack-DRVnqiWc.js';
 
 const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
@@ -72,7 +72,7 @@ const SdModalContainer = class {
                     const current = this.entries.find(e => e.id === id);
                     if (!current || current.closing || !modalEl.isConnected)
                         return;
-                    this.entries = this.entries.map(e => e.id === id ? { ...e, backdropVisible: true } : e);
+                    this.entries = this.entries.map(e => (e.id === id ? { ...e, backdropVisible: true } : e));
                     modalEl.classList.add('sd-modal-container__modal--visible');
                 });
             });
@@ -264,7 +264,7 @@ const SdModalContainer = class {
         el.setAttribute(name, value);
     }
     render() {
-        if (!this.entries?.length)
+        if ((this.entries?.length ?? 0) === 0)
             return null;
         return (h("div", { class: "sd-modal-container" }, this.entries.map((entry, index) => (h("div", { key: entry.id, class: "sd-modal-container__layer", style: { zIndex: String(index + 1) }, "data-modal-id": entry.id, ref: el => {
                 if (el)