@sellmate/design-system 1.0.67 → 1.0.68

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

@@ -1,61 +1,194 @@
-import { r as registerInstance, a as getElement, h } from './index-Dcpqhs6V.js';
+import { r as registerInstance, a as getElement, h } from './index-BGyJgVXm.js';
+import { s as systemTokens } from './system-C-txBx-h.js';
 
-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 .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;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #00973C}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;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:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.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:#333333;font-size:12px;font-weight:400}.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:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
+const guide = {
+	button: {
+		height: "28",
+		paddingX: "12",
+		radius: "9999",
+		gap: "6",
+		typography: {
+			fontSize: "12",
+			fontWeight: "500",
+			lineHeight: "20"
+		},
+		icon: {
+			size: "16",
+			"default": "#00973C",
+			active: "#FFFFFF"
+		},
+		border: {
+			width: "1",
+			"default": "#E1E1E1"
+		},
+		bg: {
+			"default": "#FFFFFF",
+			tip: "#00973C",
+			notion: "#1F8AE1"
+		},
+		text: {
+			"default": "#222222",
+			active: "#FFFFFF"
+		}
+	},
+	contents: {
+		paddingX: "24",
+		paddingY: "20",
+		gap: "12",
+		title: {
+			gap: "8"
+		},
+		row: {
+			gap: "8"
+		},
+		body: {
+			gap: "2"
+		},
+		typography: {
+			title: {
+				fontWeight: "700",
+				fontSize: "16",
+				lineHeight: "26"
+			},
+			body: {
+				fontWeight: "400",
+				fontSize: "12",
+				lineHeight: "20"},
+			color: "#222222"
+		},
+		icon: "#00973C",
+		radius: "8"}
+};
+var guideTokens = {
+	guide: guide
+};
+
+const { button, contents} = guideTokens.guide;
+const NOTION_ICON_COLOR = systemTokens.color.content.primary;
+const GUIDE_CONFIG = {
+    button: {
+        height: `${button.height}px`,
+        paddingX: `${button.paddingX}px`,
+        radius: `${button.radius}px`,
+        gap: `${button.gap}px`,
+        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,
+        titleFontSize: `${contents.typography.title.fontSize}px`,
+        titleFontWeight: contents.typography.title.fontWeight,
+        titleLineHeight: `${contents.typography.title.lineHeight}px`,
+        bodyFontSize: `${contents.typography.body.fontSize}px`,
+        bodyFontWeight: contents.typography.body.fontWeight,
+        bodyLineHeight: `${contents.typography.body.lineHeight}px`,
+        textColor: contents.typography.color,
+    },
+};
 
-const GUIDE_LABEL = {
-    help: '활용 TIP',
-    pdf: 'PDF Guide',
-    youtube: 'Video Guide',
+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 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',
 };
 const SdGuide = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     get el() { return getElement(this); }
-    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) {

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Dcpqhs6V.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BGyJgVXm.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
-import { i as inputTokens } from './component.textinput-CJwbBrt5.js';
+import { i as inputTokens } from './component.textinput-ByhWX2NK.js';
 
 const sm = inputTokens.textinput.sm;
 const md = inputTokens.textinput.md;
@@ -147,12 +147,12 @@ const SdInput = class {
             '--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;
@@ -193,17 +193,17 @@ const SdSelectSearchInput = class {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: '36003b7e0e7d8a3df224b18257d4d6b1712d47da', class: {
+        return (h("div", { key: '2629fd8c13f67bc89c3b66f5f8aa14f2fb2e5fcd', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '3b6f80d033a7903cb8e3692a2eebe0ab991e8d68', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'f49cccdb49d0b2b861b0836dd654b7ab353b48ce', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, h("sd-icon", { key: '7c453e87ba6b384c5be7bb142697ba43c0d1a20b', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '773f5638821c73c20435f747c3dea5b6684b89eb', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
 };
 SdSelectSearchInput.style = sdSelectSearchInputCss();

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-Dcpqhs6V.js';
+import { r as registerInstance, h } from './index-BGyJgVXm.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, 10000);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}`;
+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}`;
 
 const SdLoadingContainer = class {
     constructor(hostRef) {
@@ -16,10 +16,10 @@ const SdLoadingContainer = class {
         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)))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();