@sellmate/design-system 1.0.66 → 1.0.68

package/dist/collection/components/sd-field/sd-field.js

@@ -163,20 +163,20 @@ export class SdField {
                 '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
             }
             : {};
-        return (h("div", { key: 'f12b2e13ac8152d1e688f903a60a8fa670e99065', class: {
+        return (h("div", { key: 'af5531a8bad5b8685f56748ce55044927f061903', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '79f7a40b5e1ee95bb9075b0855e22261cd8adc6a', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '54b5bbfbe18df48c40cc30ec3d6761ccd8e446cc', class: "sd-field__main", style: this.width
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '82f2472c0ccc778a982bbf6164edfdc1629a9eb1', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '42dd86d80718b245402b42376d28810745cf2154', class: "sd-field__main", style: this.width
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: '39542908287175ade4d6e0f1acd2cb1f03c9e2a1', class: {
+                : {} }, h("div", { key: '0c80a69019f7b14c5f19eeb21f751c885df4c82b', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            } }, addon && h("div", { key: '236650de53d1d1951f26586aa0d22f0f267fc411', class: "sd-field__addon" }, addon), h("slot", { key: '41df3dca21aa68d3324617891f2555f1c488a61b' })), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && h("div", { key: 'c3b9fac0b4586ba5697af8a7cfe7a6aec01b0e52', class: "sd-field__addon" }, addon), h("slot", { key: 'f7e087e3b3927708fd28919dba9e6edf4e1d317b' })), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (!label)

package/dist/collection/components/sd-file-picker/sd-file-picker.css

@@ -57,7 +57,7 @@ sd-file-picker {
   top: calc(100% - 4px);
   left: 50%;
   transform: translate(-50%);
-  z-index: 1000;
+  z-index: 998;
   white-space: nowrap;
   padding: 8px 12px;
   background: rgba(0, 0, 0, 0.8);

package/dist/collection/components/sd-file-picker/sd-file-picker.js

@@ -170,7 +170,7 @@ export class SdFilePicker {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { icon: "close", size: "xxs", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { class: "sd-file-picker__tooltip" }, displayText))));
         if (this.inline) {
             return (h("div", { class: {
                     'sd-file-picker--inline': true,

package/dist/collection/components/sd-floating-portal/sd-floating-portal.js

@@ -4,7 +4,7 @@ export class SdFloatingPopover {
     to = 'body';
     parentRef = null;
     offset = [0, 0];
-    zIndex = 10000;
+    zIndex = 998;
     placement = 'bottom';
     open = false;
     close;
@@ -62,7 +62,7 @@ export class SdFloatingPopover {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
             position: 'absolute',
-            zIndex: (this.zIndex ?? 10000).toString(),
+            zIndex: (this.zIndex ?? 998).toString(),
             transition: 'opacity 0.4s',
             top: '-9999px',
             left: '-9999px',
@@ -92,18 +92,22 @@ export class SdFloatingPopover {
             switch (this.placement) {
                 case 'top':
                     top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
-                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    left =
+                        rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
                     break;
                 case 'bottom':
                     top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;
-                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    left =
+                        rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
                     break;
                 case 'left':
-                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    top =
+                        rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
                     left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
                     break;
                 case 'right':
-                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    top =
+                        rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
                     left = rect.right + window.scrollX + offsetX + ARROW_SIZE;
                     break;
             }
@@ -144,7 +148,7 @@ export class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '4dafb853b2a82e541f59056d2fedf08a6fa040ba' });
+        return h("slot", { key: 'f463fadca5060ebc995d8115575404611b94fb11' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {
@@ -243,7 +247,7 @@ export class SdFloatingPopover {
                 "setter": false,
                 "reflect": false,
                 "attribute": "z-index",
-                "defaultValue": "10000"
+                "defaultValue": "998"
             },
             "placement": {
                 "type": "string",

package/dist/collection/components/sd-ghost-button/sd-ghost-button.js

@@ -32,19 +32,19 @@ export class SdGhostButton {
     render() {
         const sizeConfig = GHOST_BUTTON_SIZES[this.size];
         const contentColor = this.disabled
-            ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
-            : GHOST_BUTTON_CONTENT_COLORS[this.intent];
+            ? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
+            : GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (h("button", { key: 'eccb34969779d75bcd77dd6ae12cb99a419af121', class: {
+        return (h("button", { key: '690151271d15b4a3e07b47021f368647cc9daf62', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
                 '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
-                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
+                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: '4ae160e73b72b0b4aa40947c126419b1016c81d3', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: '9769fff9f694e7d1fa2cba94fa8e80498d0afe2e', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-guide/sd-guide.config.js

@@ -0,0 +1,48 @@
+import guideTokens from "../../tokens/generated/component.guide.json";
+import systemTokens from "../../tokens/generated/system.json";
+const { button, contents, gap } = guideTokens.guide;
+const NOTION_ICON_COLOR = systemTokens.color.content.primary;
+export const GUIDE_CONFIG = {
+    gap: `${gap}px`,
+    button: {
+        height: `${button.height}px`,
+        paddingX: `${button.paddingX}px`,
+        radius: `${button.radius}px`,
+        gap: `${button.gap}px`,
+        fontFamily: button.typography.fontFamily,
+        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,
+        borderWidth: `${button.border.width}px`,
+        borderColor: button.border.default,
+        bgDefault: button.bg.default,
+        bgTip: button.bg.tip,
+        bgNotion: button.bg.notion,
+        textDefault: button.text.default,
+        textActive: button.text.active,
+    },
+    contents: {
+        paddingX: `${contents.paddingX}px`,
+        paddingY: `${contents.paddingY}px`,
+        gap: `${contents.gap}px`,
+        rowGap: `${contents.row.gap}px`,
+        bodyGap: `${contents.body.gap}px`,
+        titleGap: `${contents.title.gap}px`,
+        radius: `${contents.radius}px`,
+        iconColor: contents.icon,
+        iconColorNotion: NOTION_ICON_COLOR,
+        titleFontFamily: contents.typography.title.fontFamily,
+        titleFontSize: `${contents.typography.title.fontSize}px`,
+        titleFontWeight: contents.typography.title.fontWeight,
+        titleLineHeight: `${contents.typography.title.lineHeight}px`,
+        bodyFontFamily: contents.typography.body.fontFamily,
+        bodyFontSize: `${contents.typography.body.fontSize}px`,
+        bodyFontWeight: contents.typography.body.fontWeight,
+        bodyLineHeight: `${contents.typography.body.lineHeight}px`,
+        textColor: contents.typography.color,
+    },
+};

package/dist/collection/components/sd-guide/sd-guide.css

@@ -177,38 +177,58 @@ sd-guide {
   height: fit-content;
   width: fit-content;
 }
-sd-guide .sd-guide {
+
+.sd-guide {
   display: inline-flex;
   align-items: center;
   height: fit-content;
   width: fit-content;
 }
-sd-guide .sd-guide .sd-button {
-  padding: 0 16px 0 12px;
-  border-radius: 16px;
-  color: #333333 !important;
+.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;
-  transition: none;
+  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 .sd-button .sd-button__content {
-  color: #333333 !important;
+.sd-guide .sd-guide__button--active .sd-button {
+  color: var(--sd-guide-button-text-active) !important;
 }
-sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label {
-  color: #333333 !important;
-  margin-left: 4px;
+.sd-guide .sd-guide__button--active .sd-button .sd-button__content {
+  color: var(--sd-guide-button-text-active) !important;
 }
-sd-guide .sd-guide--active .sd-button {
-  border: 1px solid #00973C;
+.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--active .sd-button .sd-button__content .sd-button__label {
-  color: white !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: 20px 32px;
-  border-radius: 8px;
+  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;
 }
@@ -220,15 +240,16 @@ sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label {
 .sd-guide__popup__header {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
+  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;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 26px;
-  color: #333333;
+  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%;
@@ -240,9 +261,10 @@ sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label {
   width: 100%;
   align-items: start;
   list-style: none;
-  color: #333333;
-  font-size: 12px;
-  font-weight: 400;
+  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%;
@@ -258,13 +280,20 @@ sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label {
   display: block;
   content: "-";
   width: 6px;
-  color: #333333;
-  font-size: 12px;
-  font-weight: 400;
+  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: "•";
 }

package/dist/collection/components/sd-guide/sd-guide.js

@@ -1,55 +1,83 @@
 import { h } from "@stencil/core";
-const GUIDE_LABEL = {
-    help: '활용 TIP',
-    pdf: 'PDF Guide',
-    youtube: 'Video Guide',
+import { GUIDE_CONFIG } from "./sd-guide.config";
+const DEFAULT_LABEL_BY_TYPE = {
+    tip: '활용 TIP',
     notion: '사용법 안내',
-    event: 'Event Button',
 };
-const GUIDE_ICON = {
-    help: {
-        name: 'helpOutline',
-        size: 20,
-        color: 'green_75',
-    },
-    pdf: { name: 'pdf', size: 20, color: 'red_75' },
-    youtube: { name: 'youtube', size: 20, color: 'red_75' },
-    notion: { name: 'notion', size: 16, color: 'black' },
-    event: { name: 'event', size: 16, color: 'brilliantblue_70' },
+const ICON_BY_TYPE = {
+    tip: 'helpOutline',
+    notion: 'notion',
 };
 export class SdGuide {
     el;
-    type = 'help';
+    type = 'tip';
     label = '';
     message = '';
-    guideUrl = '';
+    url = '';
     popupTitle = '';
     popupWidth;
     popupShow = false;
     guideRef;
     handleClickGuide = () => {
-        if (this.type === 'help') {
-            this.popupShow = !this.popupShow;
+        if (this.type === 'notion') {
+            if (this.url) {
+                window.open(this.url, '_blank', 'noopener,noreferrer');
+            }
             return;
         }
-        if (this.guideUrl) {
-            window.open(this.guideUrl, '_blank');
-        }
+        this.popupShow = !this.popupShow;
     };
-    get guideClass() {
-        const classes = ['sd-guide', `sd-guide--${this.type}`];
-        if (this.popupShow)
-            classes.push('sd-guide--active');
-        return classes.join(' ');
-    }
     closeDropdown = () => {
         this.popupShow = false;
     };
+    get guideStyle() {
+        const { button, contents } = GUIDE_CONFIG;
+        return {
+            '--sd-guide-button-height': button.height,
+            '--sd-guide-button-padding-x': button.paddingX,
+            '--sd-guide-button-radius': button.radius,
+            '--sd-guide-button-gap': button.gap,
+            '--sd-guide-button-font-size': button.fontSize,
+            '--sd-guide-button-font-weight': button.fontWeight,
+            '--sd-guide-button-line-height': button.lineHeight,
+            '--sd-guide-button-border-width': button.borderWidth,
+            '--sd-guide-button-border-color': button.borderColor,
+            '--sd-guide-button-bg-default': button.bgDefault,
+            '--sd-guide-button-bg-tip': button.bgTip,
+            '--sd-guide-button-bg-notion': button.bgNotion,
+            '--sd-guide-button-text-default': button.textDefault,
+            '--sd-guide-button-text-active': button.textActive,
+            '--sd-guide-contents-padding-x': contents.paddingX,
+            '--sd-guide-contents-padding-y': contents.paddingY,
+            '--sd-guide-contents-gap': contents.gap,
+            '--sd-guide-contents-row-gap': contents.rowGap,
+            '--sd-guide-contents-body-gap': contents.bodyGap,
+            '--sd-guide-contents-title-gap': contents.titleGap,
+            '--sd-guide-contents-radius': contents.radius,
+            '--sd-guide-contents-title-font-size': contents.titleFontSize,
+            '--sd-guide-contents-title-font-weight': contents.titleFontWeight,
+            '--sd-guide-contents-title-line-height': contents.titleLineHeight,
+            '--sd-guide-contents-body-font-size': contents.bodyFontSize,
+            '--sd-guide-contents-body-font-weight': contents.bodyFontWeight,
+            '--sd-guide-contents-body-line-height': contents.bodyLineHeight,
+            '--sd-guide-contents-text-color': contents.textColor,
+        };
+    }
     render() {
-        const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h("div", { key: '0f70d3686c37c029635c93a8ad8f937fb2ca73c2', class: "sd-guide", style: {
-                '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: 'f07235cc53a908237af2f13a98f325340c83fd0e', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '9c5ade0db41a02a343bb77bc1dcb44d12dba6c04', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'd59caf4107b678ce132accfe9f392c3cfa6b35f4', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '22aa97a939e27454dec067effc6911aea6ace2a4', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '6bf404b6718bbd036acff51101538d967a2cd642', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: 'a63aa9263715f57f2e8bf977c4849f868803a704', class: "sd-guide__popup__header" }, h("sd-icon", { key: '8ba1969ada651d3226058bb9095ae8b794be1759', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '41dd2533e146eae12ee7367a243e819362597761', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'b45bfd9ff793f0c0860789d16c1c17fef2ad01d5', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+        const { button, 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: {
+                ...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))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -84,11 +112,12 @@ export class SdGuide {
                 "mutable": false,
                 "complexType": {
                     "original": "GuideType",
-                    "resolved": "\"event\" | \"help\" | \"notion\" | \"pdf\" | \"youtube\"",
+                    "resolved": "\"notion\" | \"tip\"",
                     "references": {
                         "GuideType": {
-                            "location": "global",
-                            "id": "global::GuideType"
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-guide/sd-guide.tsx",
+                            "id": "src/components/sd-guide/sd-guide.tsx::GuideType"
                         }
                     }
                 },
@@ -100,9 +129,9 @@ export class SdGuide {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "type",
-                "defaultValue": "'help'"
+                "defaultValue": "'tip'"
             },
             "label": {
                 "type": "string",
@@ -120,7 +149,7 @@ export class SdGuide {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label",
                 "defaultValue": "''"
             },
@@ -144,7 +173,7 @@ export class SdGuide {
                 "attribute": "message",
                 "defaultValue": "''"
             },
-            "guideUrl": {
+            "url": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -161,7 +190,7 @@ export class SdGuide {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "guide-url",
+                "attribute": "url",
                 "defaultValue": "''"
             },
             "popupTitle": {

package/dist/collection/components/sd-input/sd-input.js

@@ -111,12 +111,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: 'a72ce8674fb761de7cd188e99cc19d5f3731a899', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: 'e5cbdbc2b233bda57488ead19401d277891301ae', class: "sd-input__content" }, h("slot", { key: 'a327005770df94ef61f2e08071e77407a24b7b5c', name: "prefix" }), h("input", { key: '36301cd586151b8c607e14715b26fca467f68c13', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '532e201860db0709572502aa4275fc9251e1aeb1', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: 'cc6132852c65f0597cbe25751c7246b1cdad3096', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'ed32da716dabccac9c67061086a3eb821f49afd5', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: 'c8297e261baee31b8508e0912004edd7fe85f115', class: "sd-input__content" }, h("slot", { key: '615b28bb1f239a1ead1cad888edde9b59358837b', name: "prefix" }), h("input", { key: 'd1231386b264dbb8b38bf920c48c59474417a492', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '97f7c084a17674d52c43255b334ddeb61cf743ad', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: 'f35a0872ac6f44e41716b0bf9f93f7a000445bf6', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'fd3d567346cf5771ec28c73f15cdf0db15835766', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: '0fdf74595057997c7d2f5f0f3ba6b75c340c2965', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;

package/dist/collection/components/sd-loading-container/sd-loading-container.config.js

@@ -1 +1 @@
-export const LOADING_CONTAINER_DEFAULT_Z_INDEX = 10000;
+export const LOADING_CONTAINER_DEFAULT_Z_INDEX = 999;

package/dist/collection/components/sd-loading-container/sd-loading-container.css

@@ -4,7 +4,7 @@ sd-loading-container .sd-loading-container {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: var(--sd-loading-container-z-index, 10000);
+  z-index: var(--sd-loading-container-z-index, 999);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.2s ease, visibility 0s linear 0.2s;

package/dist/collection/components/sd-loading-container/sd-loading-container.js

@@ -10,10 +10,10 @@ export class SdLoadingContainer {
         this.visible = false;
     }
     render() {
-        return (h("div", { key: 'e4578e196ebd4ee69d424fe85c9bf651bc3382f7', class: {
+        return (h("div", { key: '8236579ed01f703fb105576c2fd575b157b3aa76', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'ae9fae9408f9b69591554ca105abb2ece362db00', class: "sd-loading-container__backdrop" }), h("div", { key: '27d0c6518dacbb664cebb2fc76c9ceb14b2b3aac', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'ace74d2550a2ddb579c61e6f8daaaf64915e8666', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'af059ecdadf7b3b3c0a0437cbc4264ff550fa3c6', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '176473a839add91a86d207544e9cc5862b13d04f', class: "sd-loading-container__backdrop" }), h("div", { key: '2776ed326caa6870a79b94079ff6e778ee560b02', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '6977bfd46e06e9c13492a15b5081c98446770de5', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '7cea458c498a4682b1d4d5f07e059ed8e4905df0', class: "sd-loading-container__message" }, this.message)))));
     }
     static get is() { return "sd-loading-container"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-loading-modal/sd-loading-modal.js

@@ -3,6 +3,7 @@ import { LOADING_MODAL_BUTTON_PRESET, LOADING_MODAL_COLORS, LOADING_MODAL_DEFAUL
 export class SdLoadingModal {
     state = 'loading';
     message = '';
+    useButton = false;
     buttonLabel = '';
     width;
     height;
@@ -41,7 +42,7 @@ export class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: 'dcc53b3421a88970ce4ad8258285a896da0e400c', style: hostStyle }, h("div", { key: 'bb2319b861392c8a88587b7654f2c6227b226cc7', class: "sd-loading-modal" }, h("div", { key: 'f3064846c06d2cd1e9d2474dc16fe80773c4a8f7', class: "sd-loading-modal__content" }, this.state === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("p", { key: '932c71930b4484d652266f85556e7eb2195a81c9', class: "sd-loading-modal__message" }, this.resolvedMessage), h("div", { key: 'e06cfa7729b72f881789d573f38116ac5086e062', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: '63684aa367e552df0e020ce4766d6c34c1361427', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick })))));
+        return (h(Host, { key: '8ecd5db2ffde201dd0c7d3c58b1da6b85b5a4116', style: hostStyle }, h("div", { key: '61f79b16b22d5ab4bb4dca03f88568174cfcfb1f', class: "sd-loading-modal" }, h("div", { key: 'bc373cfebab5949bee9c024bd86ca92d8294ff7b', class: "sd-loading-modal__content" }, this.state === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("p", { key: 'e9015b9c9813b1968c8ca7991d654761eb3ee9b3', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (h("div", { key: '4ed941961611fe9533bd2b989c9b68ef6c7ca741', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: '13f4c5ef5ad5285d846716e5dd72d9f2565c08f9', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get is() { return "sd-loading-modal"; }
     static get originalStyleUrls() {
@@ -103,6 +104,26 @@ export class SdLoadingModal {
                 "attribute": "message",
                 "defaultValue": "''"
             },
+            "useButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "use-button",
+                "defaultValue": "false"
+            },
             "buttonLabel": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/sd-modal-container/sd-modal-container.css

@@ -4,10 +4,16 @@ sd-modal-container {
 sd-modal-container .sd-modal-container {
   position: fixed;
   inset: 0;
-  z-index: var(--sd-modal-container-z-index, 9999);
+  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;
@@ -15,23 +21,18 @@ sd-modal-container .sd-modal-container__backdrop {
   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__content {
+sd-modal-container .sd-modal-container__modal {
   position: relative;
   z-index: 1;
-  display: grid;
-  place-items: center;
-}
-sd-modal-container .sd-modal-container__content > * {
-  grid-row: 1;
-  grid-column: 1;
-}
-sd-modal-container .sd-modal-container__modal {
   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 {