@sellmate/design-system 1.0.49 → 1.0.51

package/dist/cjs/{sd-button_4.cjs.entry.js → sd-button_5.cjs.entry.js}

@@ -1,22 +1,22 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
-var component_button = require('./component.button-BKa5OPya.js');
-var resolveColor = require('./resolveColor-Di1RNekE.js');
-var tooltipArrow = require('./tooltipArrow-Mb2Dhc7T.js');
+var index = require('./index-BQt-JC6r.js');
+var component_button = require('./component.button-DUsddONR.js');
+var resolveColor = require('./resolveColor-LhfOKtTZ.js');
+var tooltipArrow = require('./tooltipArrow-CRCpqOYA.js');
 
 const sdButtonCss = () => `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-radius-default, 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-xs-height, 24px);--sd-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-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-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-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-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-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-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-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-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-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-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);background:var(--sd-button-bg-disabled, #E1E1E1);color:var(--sd-button-content-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}`;
 
 const ICON_SIZES = {
-    xs: Number(component_button.buttonTokens.size.xs.icon),
-    sm: Number(component_button.buttonTokens.size.sm.icon),
-    md: Number(component_button.buttonTokens.size.md.icon),
-    lg: Number(component_button.buttonTokens.size.lg.icon),
+    xs: Number(component_button.buttonTokens.xs.icon),
+    sm: Number(component_button.buttonTokens.sm.icon),
+    md: Number(component_button.buttonTokens.md.icon),
+    lg: Number(component_button.buttonTokens.lg.icon),
 };
 const SdButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.click = index.createEvent(this, "sdClick");
+        this.click = index.createEvent(this, "sdClick", 7);
     }
     get el() { return index.getElement(this); }
     variant = 'primary';
@@ -61,13 +61,25 @@ const SdButton = class {
         const buttonClasses = this.getButtonClasses();
         // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
         const resolvedColor = resolveColor.resolveColor(this.color);
-        return (index.h("button", { key: 'b1436c0cdf0267446df9cd022df68a8a6c349ca5', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, index.h("div", { key: '70f9450410dbc7b2603679cda397bc8f211928b1', class: "sd-button__content" }, this.icon && (index.h("sd-icon", { key: 'ab09632262d175e8dc9a31df4e673470d128b274', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && index.h("div", { key: 'c33e565c9108996ab4a3d84b5beaf1d8acbd5700', class: "sd-button__label" }, this.label), this.iconRight && (index.h("sd-icon", { key: '112a9649b77e7eb67198d0bf7bf407e9f7f71cd5', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
+        return (index.h("button", { key: '079f66bd47a67c5e7cf95ff6b0b6a10aa84697d5', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, index.h("div", { key: '78c7b1b6b7828fe93c5a2752fbaf41b0b8c17cb2', class: "sd-button__content" }, this.icon && (index.h("sd-icon", { key: '3f0afbeec89e0064f404d4967870516c87f35ac2', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && index.h("div", { key: '319ac39031f4118489d88eec50eb590067422f87', class: "sd-button__label" }, this.label), this.iconRight && (index.h("sd-icon", { key: '3e25e709e39ffbaceec0863c4fc5c54b8d34d5e1', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
     }
 };
 SdButton.style = sdButtonCss();
 
 const field = {
+	label: {
+		sm: {
+			height: "28",
+			gap: "6",
+			icon: "12",
+			typography: {
+				fontWeight: "700",
+				fontSize: "12",
+				lineHeight: "20"
+			}
+		}},
 	addonLabel: {
+		gap: "6",
 		paddingX: "12",
 		typography: {
 			fontWeight: "500",
@@ -77,14 +89,16 @@ const field = {
 		bg: "#F6F6F6",
 		border: {
 			"default": "#AAAAAA",
-			disabled: "#CCCCCC"}
+			disabled: "#CCCCCC",
+			width: "1"
+		}
 	}
 };
 var fieldTokens = {
 	field: field
 };
 
-const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid var(--sd-system-color-field-border-hover) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:var(--sd-system-space-field-sm-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:6px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:var(--sd-system-color-field-text-default);white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:1px solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-system-radius-field-sm) - 1px) 0 0 calc(var(--sd-system-radius-field-sm) - 1px)}sd-field .sd-field__wrapper{width:100%;height:var(--sd-system-size-field-sm-height);display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:100%;display:flex;flex:1;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-system-radius-field-sm);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid #2BCE6C !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-input-text-error-message);font-size:var(--sd-textinput-input-error-message-typography-font-size);line-height:var(--sd-textinput-input-error-message-typography-line-height);margin-top:var(--sd-textinput-input-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-input-text-hint);font-size:var(--sd-textinput-input-hint-typography-font-size);line-height:var(--sd-textinput-input-hint-typography-line-height);margin-top:var(--sd-textinput-input-contents-gap)}`;
+const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid var(--sd-system-color-field-border-hover) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;height:var(--sd-field-label-height);margin-right:var(--sd-system-space-field-sm-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap)}sd-field .sd-field--has-addon .sd-field__control{gap:var(--sd-field-addon-gap)}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-system-radius-field-sm) - 1px) 0 0 calc(var(--sd-system-radius-field-sm) - 1px)}sd-field .sd-field__wrapper{width:100%;height:var(--sd-system-size-field-sm-height);display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:100%;display:flex;flex:1;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-system-radius-field-sm);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-input-text-error-message);font-size:var(--sd-textinput-input-error-message-typography-font-size);line-height:var(--sd-textinput-input-error-message-typography-line-height);margin-top:var(--sd-textinput-input-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-input-text-hint);font-size:var(--sd-textinput-input-hint-typography-font-size);line-height:var(--sd-textinput-input-hint-typography-line-height);margin-top:var(--sd-textinput-input-contents-gap)}`;
 
 const FORM_PARENT_TAGS = [
     'sd-select',
@@ -95,6 +109,7 @@ const FORM_PARENT_TAGS = [
     'sd-textarea',
     'sd-number-input',
     'sd-select-v2',
+    'sd-file-picker',
 ];
 const SdField = class {
     constructor(hostRef) {
@@ -211,42 +226,59 @@ const SdField = class {
     render() {
         const addon = this.addonLabel;
         const addonTokens = fieldTokens.field.addonLabel;
-        const addonCssVars = addon ? {
-            '--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
-            '--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
-            '--sd-field-addon-line-height': `${addonTokens.typography.lineHeight}px`,
-            '--sd-field-addon-font-weight': addonTokens.typography.fontWeight,
-            '--sd-field-addon-bg': addonTokens.bg,
-            '--sd-field-addon-border-color': this.disabled
-                ? addonTokens.border.disabled
-                : addonTokens.border.default,
-        } : {};
-        return (index.h("div", { key: 'cb0844dfad82a3287253598ace0e70e761ca2cdd', class: {
+        const labelTokens = fieldTokens.field.label.sm;
+        const labelCssVars = this.label
+            ? {
+                '--sd-field-label-height': `${labelTokens.height}px`,
+                '--sd-field-label-gap': `${labelTokens.gap}px`,
+                '--sd-field-label-font-size': `${labelTokens.typography.fontSize}px`,
+                '--sd-field-label-line-height': `${labelTokens.typography.lineHeight}px`,
+                '--sd-field-label-font-weight': labelTokens.typography.fontWeight,
+            }
+            : {};
+        const addonCssVars = addon
+            ? {
+                '--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
+                '--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
+                '--sd-field-addon-line-height': `${addonTokens.typography.lineHeight}px`,
+                '--sd-field-addon-font-weight': addonTokens.typography.fontWeight,
+                '--sd-field-addon-bg': addonTokens.bg,
+                '--sd-field-addon-border-color': this.disabled
+                    ? addonTokens.border.disabled
+                    : addonTokens.border.default,
+                '--sd-field-addon-gap': `${addonTokens.gap}px`,
+                '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
+            }
+            : {};
+        return (index.h("div", { key: 'e37722a9afbd78654328954262d4bc458634170a', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: addonCssVars }, index.h("div", { key: '788b8352737f10eec26195931cd22a405607b2af', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: 'e3164e47bbeec19e7b150c3e2a7ef75a96896db4', class: {
+            }, style: { ...labelCssVars, ...addonCssVars } }, index.h("div", { key: '38440e5f21fba28ff49fd00bfd20189af9c43707', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: 'b6d65e0db6667cbe9b4dd85ec72f9ecd08afa291', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            }, style: this.width ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width, flex: 'none' } : {} }, addon && (index.h("div", { key: '12baae30b329494312e8fe3160556717f1f8d979', class: "sd-field__addon" }, addon)), index.h("slot", { key: 'f231342560a5b45448ddc6ad370cce414ca68052' }))), (this.errorMsg || this.errorMessage)
-            ? index.h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)
-            : this.hint && index.h("div", { class: "sd-field__hint" }, this.hint)));
+            }, style: this.width
+                ? {
+                    width: typeof this.width === 'number' ? `${this.width}px` : this.width,
+                    flex: 'none',
+                }
+                : {} }, addon && index.h("div", { key: '71a50d839dbbd7075c1f7f7b2daad0308ebc1225', class: "sd-field__addon" }, addon), index.h("slot", { key: '5c0696834e82eddde81c6603d26373a745a1febb' }))), this.errorMsg || this.errorMessage ? (index.h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && index.h("div", { class: "sd-field__hint" }, this.hint))));
     }
     renderLabel(label) {
         if (!label)
             return null;
-        return (index.h("label", { class: "sd-field__label" }, this.icon && (index.h("sd-icon", { name: this.icon.name, size: this.icon.size ?? 10, color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), index.h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (index.h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, index.h("div", { slot: "content" }, this.labelTooltip)))));
+        return (index.h("label", { class: "sd-field__label" }, this.icon && (index.h("sd-icon", { name: this.icon.name, size: this.icon.size ?? Number(fieldTokens.field.label.sm.icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), index.h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (index.h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
     }
 };
 SdField.style = sdFieldCss();
 
-const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);animation:sd-floating-fade-in 0.35s ease-out}.sd-floating-menu--top{animation-name:sd-floating-slide-top}.sd-floating-menu--bottom{animation-name:sd-floating-slide-bottom}.sd-floating-menu--left{animation-name:sd-floating-slide-left}.sd-floating-menu--right{animation-name:sd-floating-slide-right}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-floating-menu__content .sd-floating-menu__buttons--1{justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--2{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu--closing{animation:sd-floating-fade-out 0.15s ease-in forwards}.sd-floating-menu--closing.sd-floating-menu--top{animation-name:sd-floating-slide-out-top}.sd-floating-menu--closing.sd-floating-menu--bottom{animation-name:sd-floating-slide-out-bottom}.sd-floating-menu--closing.sd-floating-menu--left{animation-name:sd-floating-slide-out-left}.sd-floating-menu--closing.sd-floating-menu--right{animation-name:sd-floating-slide-out-right}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px;padding:0;background:none;border:none;cursor:pointer}@keyframes sd-floating-fade-out{from{opacity:1}to{opacity:0}}@keyframes sd-floating-slide-out-top{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes sd-floating-slide-out-bottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes sd-floating-slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes sd-floating-slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes sd-floating-fade-in{from{opacity:0}to{opacity:1}}@keyframes sd-floating-slide-top{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-bottom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-left{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes sd-floating-slide-right{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}`;
+const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);animation:sd-floating-fade-in 0.35s ease-out}.sd-floating-menu--top{animation-name:sd-floating-slide-top}.sd-floating-menu--bottom{animation-name:sd-floating-slide-bottom}.sd-floating-menu--left{animation-name:sd-floating-slide-left}.sd-floating-menu--right{animation-name:sd-floating-slide-right}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-floating-menu__content .sd-floating-menu__buttons--1{justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--2{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu--closing{animation:sd-floating-fade-out 0.15s ease-in forwards}.sd-floating-menu--closing.sd-floating-menu--top{animation-name:sd-floating-slide-out-top}.sd-floating-menu--closing.sd-floating-menu--bottom{animation-name:sd-floating-slide-out-bottom}.sd-floating-menu--closing.sd-floating-menu--left{animation-name:sd-floating-slide-out-left}.sd-floating-menu--closing.sd-floating-menu--right{animation-name:sd-floating-slide-out-right}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px}@keyframes sd-floating-fade-out{from{opacity:1}to{opacity:0}}@keyframes sd-floating-slide-out-top{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes sd-floating-slide-out-bottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes sd-floating-slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes sd-floating-slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes sd-floating-fade-in{from{opacity:0}to{opacity:1}}@keyframes sd-floating-slide-top{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-bottom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-left{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes sd-floating-slide-right{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}`;
 
 const SdFloatingPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.close = index.createEvent(this, "sdClose");
+        this.close = index.createEvent(this, "sdClose", 7);
     }
     get el() { return index.getElement(this); }
     to = 'body';
@@ -392,11 +424,154 @@ const SdFloatingPopover = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: '4eecedc457f691ec888cd27da4f28aef73d14f73' });
+        return index.h("slot", { key: '025daba88b77d9e250893b20261bfce08f37e332' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
 
+const ghostButton = {
+	xxs: {
+		size: "16",
+		icon: "12"
+	},
+	xs: {
+		size: "24",
+		icon: "16"
+	},
+	sm: {
+		size: "28",
+		icon: "20"
+	},
+	md: {
+		size: "36",
+		icon: "24"
+	},
+	lg: {
+		size: "62",
+		icon: "36"
+	},
+	radius: "4",
+	hover: {
+		opacity: "5%"
+	},
+	icon: {
+		disabled: "#BBBBBB"
+	},
+	"default": {
+		content: "#888888",
+		hover: {
+			bg: "#222222"
+		}
+	},
+	danger: {
+		content: "#E30000",
+		hover: {
+			bg: "#E30000"
+		}
+	},
+	action: {
+		content: "#025497",
+		hover: {
+			bg: "#0075FF"
+		}
+	}
+};
+var ghostButtonTokens = {
+	ghostButton: ghostButton
+};
+
+const GHOST_BUTTON_FOCUS_RING_COLOR = '#0075FF';
+const GHOST_BUTTON_SIZES = {
+    xxs: {
+        size: Number(ghostButtonTokens.ghostButton.xxs.size),
+        icon: Number(ghostButtonTokens.ghostButton.xxs.icon),
+    },
+    xs: {
+        size: Number(ghostButtonTokens.ghostButton.xs.size),
+        icon: Number(ghostButtonTokens.ghostButton.xs.icon),
+    },
+    sm: {
+        size: Number(ghostButtonTokens.ghostButton.sm.size),
+        icon: Number(ghostButtonTokens.ghostButton.sm.icon),
+    },
+    md: {
+        size: Number(ghostButtonTokens.ghostButton.md.size),
+        icon: Number(ghostButtonTokens.ghostButton.md.icon),
+    },
+    lg: {
+        size: Number(ghostButtonTokens.ghostButton.lg.size),
+        icon: Number(ghostButtonTokens.ghostButton.lg.icon),
+    },
+};
+const GHOST_BUTTON_RADIUS = Number(ghostButtonTokens.ghostButton.radius);
+const GHOST_BUTTON_HOVER_OPACITY = ghostButtonTokens.ghostButton.hover.opacity;
+const GHOST_BUTTON_CONTENT_COLORS = {
+    default: ghostButtonTokens.ghostButton.default.content,
+    danger: ghostButtonTokens.ghostButton.danger.content,
+    action: ghostButtonTokens.ghostButton.action.content,
+};
+const GHOST_BUTTON_HOVER_BG_COLORS = {
+    default: ghostButtonTokens.ghostButton.default.hover.bg,
+    danger: ghostButtonTokens.ghostButton.danger.hover.bg,
+    action: ghostButtonTokens.ghostButton.action.hover.bg,
+};
+const GHOST_BUTTON_DISABLED_ICON = ghostButtonTokens.ghostButton.icon.disabled;
+
+const sdGhostButtonCss = () => `sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}`;
+
+const SdGhostButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.click = index.createEvent(this, "sdClick", 7);
+    }
+    icon;
+    size = 'sm';
+    intent = 'default';
+    ariaLabel = '';
+    disabled = false;
+    click;
+    hasWarnedMissingAriaLabel = false;
+    handleClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.click.emit(event);
+    };
+    componentWillRender() {
+        this.warnIfMissingAriaLabel();
+    }
+    warnIfMissingAriaLabel() {
+        const missing = !this.ariaLabel.trim();
+        if (!missing) {
+            this.hasWarnedMissingAriaLabel = false;
+            return;
+        }
+        if (this.hasWarnedMissingAriaLabel)
+            return;
+        console.warn(`[sd-ghost-button] icon-only buttons require \`ariaLabel\`. Received icon="${this.icon}".`);
+        this.hasWarnedMissingAriaLabel = true;
+    }
+    render() {
+        const sizeConfig = GHOST_BUTTON_SIZES[this.size];
+        const contentColor = this.disabled
+            ? GHOST_BUTTON_DISABLED_ICON
+            : GHOST_BUTTON_CONTENT_COLORS[this.intent];
+        const accessibleName = this.ariaLabel.trim() || undefined;
+        return (index.h("button", { key: '8d6aa7e82d3e3f31638e98870283723fdb87e0e2', 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}px`,
+                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
+                '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
+                '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
+            }, onClick: this.handleClick }, index.h("sd-icon", { key: 'd858b173e3f93c49703b31cde6be4fa81440ae7a', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+    }
+};
+SdGhostButton.style = sdGhostButtonCss();
+
 const tooltip = {
 	"default": {
 		bg: "#07284A",
@@ -422,7 +597,7 @@ const TOOLTIP_TYPE_CONFIG = {
     accent: { bg: tooltipTokens.tooltip.accent.bg, content: tooltipTokens.tooltip.accent.content },
 };
 
-const sdTooltipCss = () => `sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}`;
+const sdTooltipCss = () => `sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip-trigger{display:inline-flex;position:relative;cursor:pointer;align-items:center;justify-content:center}`;
 
 const SdTooltip = class {
     constructor(hostRef) {
@@ -507,14 +682,14 @@ const SdTooltip = class {
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
-        return (index.h(index.Fragment, { key: '7e3dfc0d59b38a483e8384ed52d70e0f4f4f7131' }, index.h("div", { key: '19b2b9ad1f936ea356baec15b0b3cb45c983cd47', class: this.sdClass, ...divTrigger }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: '4cfb1f9a16c962fd75bc8b419ea1b76495b32926', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, index.h("div", { key: '81f043186ed76dc205c87facea044aecc92222ad', ref: el => (this.menuEl = el), class: {
+        return (index.h(index.Fragment, { key: '45662c35d1eb8cd1f23e0c62646a02fd244fee13' }, index.h("div", { key: '7f04bfcc31aecad132ce95eeb1a6d936f79189ee', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: '95c16d600733dca5f40d06b222b422bd48ddb2dd', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, index.h("div", { key: '84b63cb44fbe9e7a81e033acde6be32b72ed24ba', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, index.h("i", { key: '6fa21e81b5de268176ea49c02c7712f8c916ba2e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '3592d2d2306257b778ecd2092a140c3926792c89' })), index.h("div", { key: '0439204e3e8ba3f05b48929ee1db0dadff5d586c', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, index.h("i", { key: 'c05e9ecb128e780f3596e8e17b6796255e21b61e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'fa56346eb836456d4a646cd2d3959e2c4c98c2d7' })), index.h("div", { key: '926e918d55db0f79e5e776b341fe4d0d6b0bf574', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
 };
 SdTooltip.style = sdTooltipCss();
@@ -522,4 +697,5 @@ SdTooltip.style = sdTooltipCss();
 exports.sd_button = SdButton;
 exports.sd_field = SdField;
 exports.sd_floating_portal = SdFloatingPopover;
+exports.sd_ghost_button = SdGhostButton;
 exports.sd_tooltip = SdTooltip;

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
-var resolveColor = require('./resolveColor-Di1RNekE.js');
+var resolveColor = require('./resolveColor-LhfOKtTZ.js');
 
 const sdCalendarCss = () => `.sd-calendar.sc-sd-calendar{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;background:white}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav.sc-sd-calendar,.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav.sc-sd-calendar{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav.sc-sd-calendar button.sc-sd-calendar,.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav.sc-sd-calendar button.sc-sd-calendar{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav__current.sc-sd-calendar{width:40px;text-align:center}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav__current.sc-sd-calendar{width:100px;text-align:center}.sd-calendar.sc-sd-calendar .sd-calendar__days.sc-sd-calendar{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-calendar.sc-sd-calendar .sd-calendar__days.sc-sd-calendar .day.sc-sd-calendar{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-calendar.sc-sd-calendar .sd-calendar__body.sc-sd-calendar{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));grid-auto-rows:min-content}.sd-calendar.sc-sd-calendar .sd-calendar__cell.sc-sd-calendar{display:flex;flex-direction:column;align-items:center}.sd-calendar.sc-sd-calendar .sd-calendar__dots.sc-sd-calendar{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;align-items:center;min-height:8px;max-width:28px}.sd-calendar.sc-sd-calendar .sd-calendar__dot.sc-sd-calendar{width:5px;height:5px;border-radius:50%;display:inline-block}.sd-calendar.sc-sd-calendar .sd-calendar__legend.sc-sd-calendar{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:16px;padding:12px 5px 0;border-top:1px solid #E5E5E5}.sd-calendar.sc-sd-calendar .sd-calendar__legend-item.sc-sd-calendar{display:flex;align-items:center;gap:4px}.sd-calendar.sc-sd-calendar .sd-calendar__legend-dot.sc-sd-calendar{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}.sd-calendar.sc-sd-calendar .sd-calendar__legend-label.sc-sd-calendar{font-size:11px;color:#888888;line-height:1}`;
 
@@ -19,8 +19,8 @@ const DEFAULT_COLORS = [
 const SdCalendar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.select = index.createEvent(this, "sdSelect");
-        this.viewChange = index.createEvent(this, "sdViewChange");
+        this.select = index.createEvent(this, "sdSelect", 7);
+        this.viewChange = index.createEvent(this, "sdViewChange", 7);
     }
     value = null;
     selectable;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 
 const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #E1E1E1}`;
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 
 const checkbox = {
 	size: "16",
@@ -78,7 +78,7 @@ const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-
 const SdCheckbox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.update = index.createEvent(this, "sdUpdate");
+        this.update = index.createEvent(this, "sdUpdate", 7);
     }
     get el() { return index.getElement(this); }
     /** 현재 선택 상태 또는 배열 형태의 값 */

package/dist/cjs/sd-confirm-modal.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
-var component_modal = require('./component.modal-CtW5Gmy5.js');
+var index = require('./index-BQt-JC6r.js');
+var component_modal = require('./component.modal-DmQUWbve.js');
 
 const CONFIRM_MODAL_DEFAULT_BUTTON = {
     positive: 'primary_md',
@@ -19,18 +19,16 @@ const CONFIRM_MODAL_ICON_COLOR = {
     default: '',
 };
 const TITLE_ICON_SIZE = Number(component_modal.modalTokens.modal.confirm.title.icon);
-const CLOSE_ICON_SIZE = Number(component_modal.modalTokens.modal.close.size);
-const CLOSE_ICON_COLOR = component_modal.modalTokens.modal.close.color;
 const SUB_BUTTON_PRESET = 'neutral_outline_md';
 
-const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:22px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:32px}`;
+const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:12px;right:12px}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:22px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:32px}`;
 
 const SdConfirmModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.close = index.createEvent(this, "sdClose");
-        this.cancel = index.createEvent(this, "sdCancel");
-        this.ok = index.createEvent(this, "sdOk");
+        this.close = index.createEvent(this, "sdClose", 7);
+        this.cancel = index.createEvent(this, "sdCancel", 7);
+        this.ok = index.createEvent(this, "sdOk", 7);
     }
     get el() { return index.getElement(this); }
     hasSlottedContent = false;
@@ -98,9 +96,9 @@ const SdConfirmModal = class {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (index.h("div", { key: '7f4965b642b3963fd3d0614b3e8b3fae8e8ae179', class: "sd-confirm-modal" }, index.h("sd-icon", { key: '4c2479d3afbc4c900dc4d329a8aaa04b6f520bb3', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: 'ec3f165135429b8a409e304bedff32897bd6566a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: 'd2aae4878396d9bd714db26847ecad677e7a4cfb', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: '76b9c1fcfaae36edbd56c4d494013829456def98', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '636b0c6ce6bcba2722fae64ed582d90ce4f25367', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: '1000f4f7e2674025ce3d220461828ab95e28eea8', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (index.h("div", { key: '8c4e6a948ffb27ea597dfc9d200b689c2667404a', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: '4acc52151149bdaf882e097fc12cae7ea10303c4', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '95ba699cf46bb6eaefdca98f37b45eef38e3e8b2', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: 'bb58b92c976751935ba4984f46a41edf0ee7ecb9', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'eccfb9b1f1c87e75a4a768802720b5f3468f167a', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '4c318650406ed9e75cc584ad3262d3782425fe31', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: 'f19744c657f73883ecafcbddc6b69e055e4694ec', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '3c6c0141dc0807725b92e824ccdedf3609d46484', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: 'fc73a08c85231570f72a9899ffee5cbd0c8882ba', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: 'dcbf92525246d05e57896340c3ef5761a574a08f', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button-v2", { key: '146c0b3c0183773ba03c2bde150add46618f181b', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '32cdf1a8ad4289cde89c13d1d250bc93f9392c73', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '1ced06b3bbc49593b9709fad227adcc3119e895b', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: 'cc7f45c6e6d3e0f925f581eff030e20dc0c40163', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button-v2", { key: '78d55d4d0f2e2aae9d2692bbc142cf74d8d1795b', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();

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

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

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

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 
 const sdDatePickerCss = () => `.sd-date-picker.sc-sd-date-picker{width:100%;display:inline-block}.sd-date-picker.sc-sd-date-picker .sd-date-picker--disabled.sc-sd-date-picker .date-icon.sc-sd-date-picker{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker.sc-sd-date-picker .sd-date-picker__input.sc-sd-date-picker{text-align:center !important}.sd-date-picker__menu.sc-sd-date-picker{border-radius:8px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2)}`;
 
 const SdDatePicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.update = index.createEvent(this, "sdUpdate");
-        this.viewChange = index.createEvent(this, "sdViewChange");
+        this.update = index.createEvent(this, "sdUpdate", 7);
+        this.viewChange = index.createEvent(this, "sdViewChange", 7);
     }
     get el() { return index.getElement(this); }
     value = null;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
 
 const addDays = (inputDate, days) => {
@@ -20,8 +20,8 @@ const sdDateRangePickerCss = () => `sd-date-range-picker.sc-sd-date-range-picker
 const SdDateRangePicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.update = index.createEvent(this, "sdUpdate");
-        this.viewChange = index.createEvent(this, "sdViewChange");
+        this.update = index.createEvent(this, "sdUpdate", 7);
+        this.viewChange = index.createEvent(this, "sdViewChange", 7);
     }
     get el() { return index.getElement(this); }
     value = ['', ''];

package/dist/cjs/sd-dropdown-button.cjs.entry.js

@@ -1,10 +1,21 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
-var sdButtonV2_config = require('./sd-button-v2.config-CQoTThio.js');
-var component_button = require('./component.button-BKa5OPya.js');
-var system = require('./system-lN7yOMPF.js');
+var sdButtonV2_config = require('./sd-button-v2.config-B4___nhv.js');
+var component_button = require('./component.button-DUsddONR.js');
+
+const color = {
+	bg: {
+		accent: {
+			"default": "#0075FF"}},
+	content: {
+		secondary: "#555555",
+		inverse: "#FFFFFF"
+	}};
+var systemTokens = {
+	color: color
+};
 
 const DROPDOWN_BUTTON_NAMES = Object.keys(sdButtonV2_config.BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
 const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, sdButtonV2_config.BUTTON_CONFIG[name]]));
@@ -24,9 +35,9 @@ const PRESET_DIVIDER_COLORS = {
     danger: component_button.buttonTokens.danger.strong.dropdown.divider,
     danger_outline: PRESET_BORDER_COLORS.danger_outline,
 };
-const MENU_ITEM_COLOR = system.systemTokens.color.content.secondary;
-const MENU_ITEM_ACTIVE_BACKGROUND = system.systemTokens.color.bg.accent.default;
-const MENU_ITEM_ACTIVE_COLOR = system.systemTokens.color.content.inverse;
+const MENU_ITEM_COLOR = systemTokens.color.content.secondary;
+const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
+const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.content.inverse;
 const PRESET_MENU_ITEM_COLORS = {
     primary: MENU_ITEM_COLOR,
     secondary: MENU_ITEM_COLOR,
@@ -63,8 +74,8 @@ const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
-        this.click = index.createEvent(this, "sdClick");
-        this.dropDownShow = index.createEvent(this, "sdDropDownShow");
+        this.click = index.createEvent(this, "sdClick", 7);
+        this.dropDownShow = index.createEvent(this, "sdDropDownShow", 7);
     }
     get el() { return index.getElement(this); }
     name = 'primary_sm';