@sellmate/design-system 1.0.25 → 1.0.27

package/dist/esm/{sd-button-v2.config-BWmcscrt.js → sd-button-v2.config-FpT7FqlI.js}

@@ -1,11 +1,10 @@
-import { b as buttonTokens } from './component.button-Dc4UTGgQ.js';
+import { b as buttonTokens } from './component.button-2CurSZ9q.js';
 
 const BUTTON_FOCUS_RING_COLOR = '#0075FF';
 const PRESET_DEFAULT_COLORS = {
     primary: buttonTokens.brand.strong.bg.default,
     secondary: buttonTokens.brand.subtle.bg.default,
     primary_outline: buttonTokens.brand.outline.bg.default,
-    neutral: buttonTokens.neutral.subtle.bg.default,
     neutral_outline: buttonTokens.neutral.outline.bg.default,
     danger: buttonTokens.danger.strong.bg.default,
     danger_outline: buttonTokens.danger.outline.bg.default,
@@ -26,11 +25,6 @@ const BUTTON_CONFIG = {
         size: 'xs',
         color: PRESET_DEFAULT_COLORS.primary_outline,
     },
-    neutral_xs: {
-        variant: 'primary',
-        size: 'xs',
-        color: PRESET_DEFAULT_COLORS.neutral,
-    },
     neutral_outline_xs: {
         variant: 'outline',
         size: 'xs',
@@ -61,11 +55,6 @@ const BUTTON_CONFIG = {
         size: 'sm',
         color: PRESET_DEFAULT_COLORS.primary_outline,
     },
-    neutral_sm: {
-        variant: 'primary',
-        size: 'sm',
-        color: PRESET_DEFAULT_COLORS.neutral,
-    },
     neutral_outline_sm: {
         variant: 'outline',
         size: 'sm',
@@ -96,11 +85,6 @@ const BUTTON_CONFIG = {
         size: 'md',
         color: PRESET_DEFAULT_COLORS.primary_outline,
     },
-    neutral_md: {
-        variant: 'primary',
-        size: 'md',
-        color: PRESET_DEFAULT_COLORS.neutral,
-    },
     neutral_outline_md: {
         variant: 'outline',
         size: 'md',
@@ -131,11 +115,6 @@ const BUTTON_CONFIG = {
         size: 'lg',
         color: PRESET_DEFAULT_COLORS.primary_outline,
     },
-    neutral_lg: {
-        variant: 'primary',
-        size: 'lg',
-        color: PRESET_DEFAULT_COLORS.neutral,
-    },
     neutral_outline_lg: {
         variant: 'outline',
         size: 'lg',
@@ -162,7 +141,6 @@ const PRESET_HOVER_BACKGROUNDS = {
     primary: buttonTokens.brand.strong.bg.hover,
     secondary: buttonTokens.brand.subtle.bg.hover,
     primary_outline: buttonTokens.brand.outline.bg.hover,
-    neutral: buttonTokens.neutral.subtle.bg.hover,
     neutral_outline: buttonTokens.neutral.outline.bg.hover,
     danger: buttonTokens.danger.strong.bg.hover,
     danger_outline: buttonTokens.danger.outline.bg.hover,
@@ -171,7 +149,6 @@ const PRESET_CONTENT_COLORS = {
     primary: buttonTokens.brand.strong.content,
     secondary: buttonTokens.brand.subtle.content,
     primary_outline: buttonTokens.brand.outline.content,
-    neutral: buttonTokens.neutral.subtle.content,
     neutral_outline: buttonTokens.neutral.outline.content,
     danger: buttonTokens.danger.strong.content,
     danger_outline: buttonTokens.danger.outline.content,
@@ -180,14 +157,12 @@ const PRESET_BORDER_COLORS = {
     primary: 'transparent',
     secondary: 'transparent',
     primary_outline: buttonTokens.brand.outline.border,
-    neutral: 'transparent',
     neutral_outline: buttonTokens.neutral.outline.border,
     danger: 'transparent',
     danger_outline: buttonTokens.danger.outline.border,
 };
-const DISABLED_CONTENT = buttonTokens.content.disabled;
 const SIZE_SUFFIX_PATTERN = /_(xs|sm|md|lg)$/;
 const isButtonV2Name = (value) => value in BUTTON_CONFIG;
 const getPresetName = (value) => value.replace(SIZE_SUFFIX_PATTERN, '');
 
-export { BUTTON_CONFIG as B, DISABLED_CONTENT as D, PRESET_CONTENT_COLORS as P, BUTTON_ICON_SIZES as a, BUTTON_FOCUS_RING_COLOR as b, PRESET_BORDER_COLORS as c, PRESET_HOVER_BACKGROUNDS as d, getPresetName as g, isButtonV2Name as i };
+export { BUTTON_CONFIG as B, PRESET_CONTENT_COLORS as P, BUTTON_ICON_SIZES as a, BUTTON_FOCUS_RING_COLOR as b, PRESET_BORDER_COLORS as c, PRESET_HOVER_BACKGROUNDS as d, getPresetName as g, isButtonV2Name as i };

package/dist/esm/sd-button-v2.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h } from './index-B8tGP77V.js';
-import { i as isButtonV2Name, g as getPresetName, B as BUTTON_CONFIG, D as DISABLED_CONTENT, P as PRESET_CONTENT_COLORS, a as BUTTON_ICON_SIZES, b as BUTTON_FOCUS_RING_COLOR, c as PRESET_BORDER_COLORS, d as PRESET_HOVER_BACKGROUNDS } from './sd-button-v2.config-BWmcscrt.js';
-import './component.button-Dc4UTGgQ.js';
+import { i as isButtonV2Name, g as getPresetName, B as BUTTON_CONFIG, a as BUTTON_ICON_SIZES, b as BUTTON_FOCUS_RING_COLOR, P as PRESET_CONTENT_COLORS, c as PRESET_BORDER_COLORS, d as PRESET_HOVER_BACKGROUNDS } from './sd-button-v2.config-FpT7FqlI.js';
+import './component.button-2CurSZ9q.js';
 
-const sdButtonV2Css = () => `sd-button-v2{display:inline-flex;width:fit-content;height:fit-content}.sd-button-v2{--sd-button-v2-height:34px;--sd-button-v2-padding-x:20px;--sd-button-v2-gap:8px;--sd-button-v2-font-family:inherit;--sd-button-v2-font-size:16px;--sd-button-v2-font-weight:500;--sd-button-v2-text-decoration:none;--sd-button-v2-label-min-width:auto;--sd-button-v2-icon-only-size:var(--sd-button-v2-height);--sd-button-v2-bg:#025497;--sd-button-v2-bg-hover:#004177;--sd-button-v2-border:transparent;--sd-button-v2-content:#ffffff;display:inline-flex;align-items:center;justify-content:center;min-height:var(--sd-button-v2-height);min-width:var(--sd-button-v2-min-width, auto);padding:0 var(--sd-button-v2-padding-x);border:var(--sd-button-border-width-default, 1px) solid var(--sd-button-v2-border);border-radius:var(--sd-button-radius-default, 4px);background:var(--sd-button-v2-bg);color:var(--sd-button-v2-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-button-v2-font-family);font-size:var(--sd-button-v2-font-size);font-weight:var(--sd-button-v2-font-weight);line-height:1;text-decoration:var(--sd-button-v2-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-button-v2:hover:not(.sd-button-v2--disabled){background:var(--sd-button-v2-bg-hover)}.sd-button-v2:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-button-v2-accent)}.sd-button-v2--xs{--sd-button-v2-height:var(--sd-button-xs-height, 24px);--sd-button-v2-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-button-v2-gap:var(--sd-button-xs-gap, 4px);--sd-button-v2-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-button-v2-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-xs-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-xs-width, var(--sd-button-v2-height))}.sd-button-v2--sm{--sd-button-v2-height:var(--sd-button-sm-height, 28px);--sd-button-v2-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-button-v2-gap:var(--sd-button-sm-gap, 6px);--sd-button-v2-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-button-v2-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-sm-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-sm-width, var(--sd-button-v2-height))}.sd-button-v2--md{--sd-button-v2-height:var(--sd-button-md-height, 34px);--sd-button-v2-padding-x:var(--sd-button-md-padding-x, 20px);--sd-button-v2-gap:var(--sd-button-md-gap, 8px);--sd-button-v2-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-button-v2-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-md-width, var(--sd-button-v2-height))}.sd-button-v2--lg{--sd-button-v2-height:var(--sd-button-lg-height, 62px);--sd-button-v2-padding-x:var(--sd-button-lg-padding-x, 28px);--sd-button-v2-gap:var(--sd-button-lg-gap, 12px);--sd-button-v2-font-family:var(--sd-button-lg-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-lg-typography-font-size, 18px);--sd-button-v2-font-weight:var(--sd-button-lg-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-lg-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-lg-width, var(--sd-button-v2-height))}.sd-button-v2--has-label{--sd-button-v2-min-width:var(--sd-button-v2-label-min-width, auto)}.sd-button-v2--icon-only{width:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));min-width:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));height:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));padding:0}.sd-button-v2--icon-only .sd-button-v2__content{gap:0}.sd-button-v2--disabled{border-color:var(--sd-button-border-disabled, #CCCCCC);background:var(--sd-button-bg-disabled, #E1E1E1);color:var(--sd-button-content-disabled, #888888);cursor:not-allowed}.sd-button-v2 .sd-button-v2__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-v2-gap)}.sd-button-v2 .sd-button-v2__label{font:inherit}`;
+const sdButtonV2Css = () => `sd-button-v2{display:inline-flex;width:fit-content;height:fit-content}.sd-button-v2{--sd-button-v2-height:34px;--sd-button-v2-padding-x:20px;--sd-button-v2-gap:8px;--sd-button-v2-font-family:inherit;--sd-button-v2-font-size:16px;--sd-button-v2-font-weight:500;--sd-button-v2-text-decoration:none;--sd-button-v2-label-min-width:auto;--sd-button-v2-icon-only-size:var(--sd-button-v2-height);--sd-button-v2-bg:$oceanblue_75;--sd-button-v2-bg-hover:$oceanblue_80;--sd-button-v2-border:transparent;--sd-button-v2-content:$white;--sd-button-v2-current-content:var(--sd-button-v2-content);display:inline-flex;align-items:center;justify-content:center;min-height:var(--sd-button-v2-height);min-width:var(--sd-button-v2-min-width, auto);padding:0 var(--sd-button-v2-padding-x);border:var(--sd-button-border-width-default, 1px) solid var(--sd-button-v2-border);border-radius:var(--sd-button-radius-default, 4px);background:var(--sd-button-v2-bg);color:var(--sd-button-v2-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-button-v2-font-family);font-size:var(--sd-button-v2-font-size);font-weight:var(--sd-button-v2-font-weight);line-height:1;text-decoration:var(--sd-button-v2-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-button-v2:hover:not(.sd-button-v2--disabled){background:var(--sd-button-v2-bg-hover)}.sd-button-v2:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-button-v2-accent)}.sd-button-v2--xs{--sd-button-v2-height:var(--sd-button-xs-height, 24px);--sd-button-v2-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-button-v2-gap:var(--sd-button-xs-gap, 4px);--sd-button-v2-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-button-v2-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-xs-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-xs-width, var(--sd-button-v2-height))}.sd-button-v2--sm{--sd-button-v2-height:var(--sd-button-sm-height, 28px);--sd-button-v2-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-button-v2-gap:var(--sd-button-sm-gap, 6px);--sd-button-v2-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-button-v2-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-sm-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-sm-width, var(--sd-button-v2-height))}.sd-button-v2--md{--sd-button-v2-height:var(--sd-button-md-height, 34px);--sd-button-v2-padding-x:var(--sd-button-md-padding-x, 20px);--sd-button-v2-gap:var(--sd-button-md-gap, 8px);--sd-button-v2-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-button-v2-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-md-width, var(--sd-button-v2-height))}.sd-button-v2--lg{--sd-button-v2-height:var(--sd-button-lg-height, 62px);--sd-button-v2-padding-x:var(--sd-button-lg-padding-x, 28px);--sd-button-v2-gap:var(--sd-button-lg-gap, 12px);--sd-button-v2-font-family:var(--sd-button-lg-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-lg-typography-font-size, 18px);--sd-button-v2-font-weight:var(--sd-button-lg-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-lg-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-lg-width, var(--sd-button-v2-height))}.sd-button-v2--has-label{--sd-button-v2-min-width:var(--sd-button-v2-label-min-width, auto)}.sd-button-v2--icon-only{width:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));min-width:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));height:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));padding:0}.sd-button-v2--icon-only .sd-button-v2__content{gap:0}.sd-button-v2--disabled{border-color:var(--sd-button-border-disabled, #CCCCCC);background:var(--sd-button-bg-disabled, #E1E1E1);--sd-button-v2-current-content:var(--sd-button-content-disabled, $grey_65);cursor:not-allowed}.sd-button-v2 .sd-button-v2__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-v2-gap)}.sd-button-v2 .sd-button-v2__label{font:inherit}`;
 
 const SdButtonV2 = class {
     constructor(hostRef) {
@@ -69,14 +69,13 @@ const SdButtonV2 = class {
         const hasLabel = Boolean(this.label);
         const iconOnly = !this.label && Boolean(this.icon);
         const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        const iconColor = this.disabled ? DISABLED_CONTENT : PRESET_CONTENT_COLORS[preset];
-        return (h("button", { key: '9adec3868e5337822463a5a37a741ef146a081be', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: '248e85751b7f7f1cdb770e4f4c1466fa8736f024', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
                 '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '849c90886e77e792e4e34ef064352361a29664f0', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '5c5bc61ab43aa17124337a7107a3e6ab82f566ae', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: iconColor })), this.label && h("span", { key: 'e2d1a5ce465f07310a4d03966609baaf7e968b0e', class: "sd-button-v2__label" }, this.label))));
+            }, onClick: this.handleClick }, h("span", { key: '0b68fdf9711cd26d6f143fec848d3e16e32c81e2', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '26bffa7135658f790e65a8b0aa32af055ea269f2', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-content)" })), this.label && h("span", { key: '5016092b05b4f068f823ae8dbd6a47ea23763086', class: "sd-button-v2__label" }, this.label))));
     }
 };
 SdButtonV2.style = sdButtonV2Css();

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragment, a as readTask } from './index-B8tGP77V.js';
-import { b as buttonTokens } from './component.button-Dc4UTGgQ.js';
-import { r as resolveColor } from './resolveColor-DUqcOPNn.js';
+import { b as buttonTokens } from './component.button-2CurSZ9q.js';
+import { r as resolveColor } from './resolveColor-CquSJNHV.js';
 import { u as useDatePicker, t as today } from './useDatePicker-DTrMR0rx.js';
 import { n as nanoid, S as SelectKeyboardNavigation } from './select-keyboard-navigation-xxEHPVkL.js';
 import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
@@ -371,10 +371,10 @@ const SdDateRangePicker = class {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (h("div", { key: '1862958ea2e972700ea83ed61f0285f09cf52c02', class: {
+        return (h("div", { key: '80ba555e36642dabe58a34a344ec751684307eb6', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, h("sd-input", { key: '808670f22b59401c0125dd1191a6180cc6f72799', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '123e8beb77c3fceaaa3a8d994f8a8539fe35d317', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '448c174030598565f910df316002d78bdfec3f89', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'b5cf493587c7831e59a6156df87cb56be6bd585b', class: "sd-date-range-picker__menu" }, h("div", { key: 'c044d5377d0d88affecaa61eec2a2239b87158d8', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'c497891fe1d06b8f6c1a79000edc0e4f4fd79735', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: 'ad899e9daec0752b744bc73e9cbd99c6a731b7db', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '595ac699adc90e8b15775ce47a2cda8bbc2f5c25', class: "header-label" }, this.prevYear), h("button", { key: '684ce75f14b08cd57ce6f019a1dfb3ab384b0c11', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '31dde7526d0ee3e7abf965eea6f825d557e7c745', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '3e70334c95d29f302f2dc6d1cb7fbb3603c74a48', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            } }, h("sd-input", { key: '12c5dca1cfad0dafee1531c62be818d4cd8f12c2', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'a62fa8ce117ff983062d5d39b927692c8088781d', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'e79962823af4c29121c18236d886199268a03eb3', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: '7c5fe668dabda4cf5219bcfd062997a8f5337cfa', class: "sd-date-range-picker__menu" }, h("div", { key: '33b5d471d9db5f703b6f846442e27dd5425775bb', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'd54d8f953be79447ee708404329178d9e1ad3a23', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '64444f120884efa30f9b58944cd9bc8918648aaf', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '0ae2129755ba9a30bb41522893bd1d27905e6666', class: "header-label" }, this.prevYear), h("button", { key: '7d8f3627e72869fd35e964e0c555680d47744f5c', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: 'caeb87d6cac5b5c89bc65c97d60f5b45b55becb1', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '958cd5ed27b2f1a72214c4e2426dc60349e65c50', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }
@@ -506,15 +506,15 @@ const SdField = class {
         }
     }
     render() {
-        return (h("div", { key: '9ed0e615761d5c76dff1e95318b131bde22cd376', class: {
+        return (h("div", { key: 'd92c9080fdf4c060dcded1c17af36bec35d3b6ce', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, h("div", { key: '6d051479c9874f3c765d50096db80c73c4fc461b', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '64ea18d481f0ad689ed984cd40837717fb37a751', class: {
+            } }, h("div", { key: '2c07af0bdc9490177d030b670e67a128563af488', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '5fa2079b2123688c0eab63780b55e70fe9f4a77b', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, h("slot", { key: '8e043b3e476e0d574612c892f6c8c0bca28c117f' }))), this.errorMsg && h("div", { key: '22d42bacdbdfe85dbe08395d21e59a06946986f5', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, h("slot", { key: '2b0b3240afe20e1759853928fcd2846d1321262b' }))), this.errorMsg && h("div", { key: 'f932da0af97a7d1e2253bdc5a64a8269fa55625d', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
@@ -524,7 +524,7 @@ const SdField = class {
 };
 SdField.style = sdFieldCss();
 
-const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 20px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;background:#07284A;color:#FFFFFF}.sd-floating-menu .sd-floating-menu__arrow{color:#07284A}.sd-floating-menu--default{background:#07284A;color:#FFFFFF}.sd-floating-menu--default .sd-floating-menu__arrow{color:#07284A}.sd-floating-menu--caution{background:#FCE6E6;color:#FB4444}.sd-floating-menu--caution .sd-floating-menu__arrow{color:#FCE6E6}.sd-floating-menu--notice{background:#FEF1EA;color:#FF6B00}.sd-floating-menu--notice .sd-floating-menu__arrow{color:#FEF1EA}.sd-floating-menu--accent{background:#E6F1FF;color:#0075FF}.sd-floating-menu--accent .sd-floating-menu__arrow{color:#E6F1FF}.sd-floating-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-7.2px;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-weight:700;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__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}`;
+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)}.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__close-button{position:absolute;top:12px;right:12px;padding:0;background:none;border:none;cursor:pointer}`;
 
 const SdFloatingPopover = class {
     constructor(hostRef) {
@@ -675,7 +675,7 @@ const SdFloatingPopover = class {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'fe02da5ce55072c8fa313e467967f2a1c18f86bb' });
+        return h("slot", { key: '770ec3be9d1e2b830eaebfde37a664feafc3da3b' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -2689,7 +2689,7 @@ const SdIcon = class {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '69b8654e2fd745282c1878306a5c464ba0995468', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '64b00309d5ad7787c4fbf2c200719fd74062ccbd', color: this.resolvedColor })));
+        return (h("i", { key: '1c418bee61e2b1e7286c15cb489953cd6969639c', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'cf93af4d1a911a6da2bef0cdfea104cb74627ec8', color: this.resolvedColor })));
     }
 };
 SdIcon.style = sdIconCss();
@@ -2787,7 +2787,7 @@ const SdInput = class {
         }
     };
     render() {
-        return (h("sd-field", { key: '7f32214220ee8dc3e830597b84f846096b48b305', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("label", { key: '71b1f7ce70d475e28f1d9f29c9a49b3f2f548f53', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: 'c0c92d686b4cee0930716a47a701459c3afc41ff', name: "prefix" }), h("input", { key: '1cdacf0a76d118c0711bae5b1263650c195db838', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '7786756fca59c02dfb159f10e2925f73b64f0366', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '82b24cae340687d7412ec5210548ad92e33be744', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '3db7e60bfcf01accd87d3cab199bdc4f9cd6314b', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("label", { key: 'ed629d14db71ca2e5e129dbbe6c960d1c4bafc31', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: '7504feda5598a7d784a83fb8cf5d0991bd3999bc', name: "prefix" }), h("input", { key: '06aef31e033ddf688f03c4752302f83b4ca54f77', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '3f933f1f844596b78bd5946833aa334840b65a01', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '972e64c5369057cf4a409e5456a0f1e92b578477', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
             } })))));
@@ -2814,7 +2814,7 @@ const SdLoadingSpinner = class {
         return resolveColor(this.color);
     }
     render() {
-        return (h(Fragment, { key: '2b60d18fe2f1dc23d90c5552202cdea60a91b2c0' }, h("svg", { key: 'd8e8716433c206019384899897b052d28d486f92', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: 'c9aaffe398dd40ccea3a2d8a89cb880e3eeb5a6d', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Fragment, { key: '5783716d94ef4a1dea295a4190660d98248c2ec4' }, h("svg", { key: '574752fdf4c55f4a77dcefac163e1e6651864963', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '2591fabc88f588079a9ea98f91126f20737827df', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
 };
 SdLoadingSpinner.style = sdLoadingSpinnerCss();
@@ -2856,7 +2856,7 @@ const SdModalCard = class {
         return modalClass;
     }
     render() {
-        return (h("div", { key: '0390932a29db512f09a47fbb030b1140410b6a73', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (h("sd-icon", { key: '338844b48a075507352a72a6f8784d912e1f51a0', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (h("sd-icon", { key: '5209a86ad65c6f255a37691897940d50b15d59e8', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '5586e88dd9882f89ccd3aff047435c7dc821cebc', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '0f12630ca6434885e4efc0810ae552dc0f0433b5' }, h("div", { key: '04af07e88d2b65274a3ca28b3975d496917f1139', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: 'b81e9fae8781fe8e57c54c0b51adc141c13c7ba8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (h("sd-button", { sdClass: `sd-modal-card__button ${button.class || ''}`, variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onSdClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit() }))))));
+        return (h("div", { key: 'f0adc3cc3df163622ebfb4ecf24f871c89f4b676', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (h("sd-icon", { key: 'e281e73d5a31e3f3c688f7fa67cc6dab49e9105b', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (h("sd-icon", { key: 'a8d93fa991ad43d4f602662de048f2677e6f15f6', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '1462056d43620a2f7db1f3e6b26a9a10576cceb8', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '9c3b4860e7c4940356aa17353c437e711163434b' }, h("div", { key: 'db17a4b60ddaab999b0ed8fca546c336b6f4b597', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: 'ada9c87b3cec0de87e795ed5de34d9b37acddd59', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (h("sd-button", { sdClass: `sd-modal-card__button ${button.class || ''}`, variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onSdClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit() }))))));
     }
 };
 SdModalCard.style = sdModalCardCss();
@@ -3109,17 +3109,17 @@ const SdNumberInput = class {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (h("sd-field", { key: 'e72a01e264aa4d680aa740f5098e3be9bb7ac8ac', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: '3006df4eaf22ecf7e9ad330270623ba7cbbf9c9a', class: {
+        return (h("sd-field", { key: '0e9e4da15a63aa6a3375b43757d607fcd087d55b', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: 'ed02f94f0d5f14161dbe951f72b66e7dc1603c47', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'e52177d9c7266a1630d9287fdc155f12a5dc7cca', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: '18f45963c22ee6a1cdd52e45b41191c3726328ce', class: "sd-number-input__buttons" }, h("button", { key: '73658fecb2300094b1880cae4595975b777b802a', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: '5e80258cf2146431deecf23919de347eb5c29fb2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: 'd8293f93d5bb0f9bc88e9702df590526238820ac', class: "sd-number-input__buttons" }, h("button", { key: '8c945155ccc8faaf3737fd8fc1bdeb7e3e5694ec', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'd2b4d8eb6b7f5dd30ba704c7d7b35051a5b0df7b', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: 'ddcd2255b7870657afbb6549cdc185a804aa3dbf', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '91d31a14ff787c6dbe35f40ff5eb9eff3d7b4e02', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '0d54618d34e3fd06b7b89496e8f825137f9dd7a2', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '971098976698154e8e644a93265dc746177c2ce0', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '44c1021a4f5588ff473f9dc7cc696ec4526d4abd', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get watchers() { return {
         "value": [{
@@ -3207,12 +3207,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (h("div", { key: '8ab0a0f2dfb17154eaba138aa0688606500be296', class: this.paginationClasses }, h("div", { key: '04b985f2d3e06ef35b18d6d375021499f36952f1', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: '3113faf5d75fa4a13e267653cae820035270e652', class: this.paginationClasses }, h("div", { key: 'a770afe37da389511bbfda99324e7794ffa299f5', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: 'c2ef87605487622bed06cac8d13d180f4af23e76', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '7e3842b531373d6485ae8912addea1aa531ca891', class: "append-btns" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -3267,7 +3267,7 @@ const SdPortal = class {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
             position: 'absolute',
-            zIndex: this.zIndex.toString(),
+            zIndex: (this.zIndex ?? 9999).toString(),
             transition: 'opacity 0.4s',
         });
         this.container.appendChild(this.wrapper);
@@ -3311,21 +3311,22 @@ const SdPortal = class {
                 width: window.innerWidth,
                 height: window.innerHeight,
             };
-            let top = parentRect.bottom + window.scrollY + this.offset[1];
-            let left = parentRect.left + window.scrollX + this.offset[0];
+            const offset = this.offset ?? [0, 4];
+            let top = parentRect.bottom + window.scrollY + offset[1];
+            let left = parentRect.left + window.scrollX + offset[0];
             // 화면 상하단 넘어갈 시 반전
-            if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {
-                top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];
+            if (parentRect.bottom + wrapperRect.height + offset[1] > viewport.height) {
+                top = parentRect.top + window.scrollY - wrapperRect.height - offset[1];
             }
             if (top < window.scrollY) {
-                top = parentRect.bottom + window.scrollY + this.offset[1];
+                top = parentRect.bottom + window.scrollY + offset[1];
             }
             // 화면 좌우측 넘어갈 시 반전
-            if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {
-                left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];
+            if (parentRect.left + wrapperRect.width + offset[0] > viewport.width) {
+                left = parentRect.right + window.scrollX - wrapperRect.width - offset[0];
             }
             if (left < 0) {
-                left = this.offset[0];
+                left = offset[0];
             }
             this.wrapper.style.top = `${top}px`;
             this.wrapper.style.left = `${left}px`;
@@ -3399,7 +3400,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'ceaa6bed28e3b1bd1a539091434fd7acee6a0e4b' });
+        return h("slot", { key: '5fe94d224d2a647a1e7cb3fed1a42073b45a2525' });
     }
     static get watchers() { return {
         "open": [{
@@ -3438,7 +3439,7 @@ const SdRadio = class {
         this.update.emit(this.value);
     }
     render() {
-        return (h("div", { key: 'e741533dcd0e3b51ed3ee5db0524f7a53fcb38fb', "aria-label": this.val || 'radio option', "aria-checked": String(this.val) === String(this.value) ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, h("label", { key: `radio-${this.val}` }, h("input", { key: '52156b763ae108d34dea926987aae73c5996f980', type: "radio", name: this.val, value: String(this.val), checked: String(this.val) === String(this.value), disabled: this.disabled, onInput: ({ detail }) => this.handleRadioChange(detail) }), this.val && h("span", { key: '148a63e8861da5639f5655afd6cbf63637348fc5', class: "sd-radio-group__label" }, this.label || this.val))));
+        return (h("div", { key: '4044958bc2fd4812508ffc65b3cc42bc1091470a', "aria-label": this.val || 'radio option', "aria-checked": String(this.val) === String(this.value) ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, h("label", { key: `radio-${this.val}` }, h("input", { key: 'f7ee60381c34f4e9fe22c90c1a982a14d1b87880', type: "radio", name: this.val, value: String(this.val), checked: String(this.val) === String(this.value), disabled: this.disabled, onInput: ({ detail }) => this.handleRadioChange(detail) }), this.val && h("span", { key: '276b647bdc90f33443f0aa98a0a056be5b7eaa5d', class: "sd-radio-group__label" }, this.label || this.val))));
     }
 };
 SdRadio.style = sdRadioCss();
@@ -3582,7 +3583,7 @@ const SdSelect = class extends BaseDropdownEvent {
         }
     };
     render() {
-        return (h("sd-field", { key: 'ad737ef5facfd4f2c8dfdbfc2c97010aa82ba39e', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'ecff910f0d0d6b02f29c2f21a4264b1a573a9170', class: {
+        return (h("sd-field", { key: '331489106e60e2304ef08ab8bb9e0b92f883c14f', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '790254f507e924fcb7a32620a2c0ea264f49a9ae', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -3765,10 +3766,10 @@ const SdSelectDropdown = class {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h("div", { key: '5e56cf091a3c3d510bf932933c33a8c3d85e23ef', class: {
+        return (h("div", { key: 'ff55e2e133114accc2641a0025bdcf551eda3511', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'd965a2a5f31507fb6dca30968edf6334d42b4160', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'bfcee14aa06a9a259dd8e67013ed1074c1f9c318', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get watchers() { return {
         "filteredOptions": [{
@@ -3815,7 +3816,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (h("div", { key: '2f88e7ffe5bce12bc3f352d47d0ebed51a1c69ac', class: {
+        return (h("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -3861,17 +3862,17 @@ const SdSelectSearchInput = class {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: 'da5faa18fac3c974dcfef4050efe580edcb1bb42', class: {
+        return (h("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'c469ef89d7600626b19ecd94416849825736ff9f', 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: '8e27f40e1b507f0c5cb2d4bde48750cd0089a9da', 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: '478a6adda3b53aabf614028bd57a8f987f93cdb6', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
 };
 SdSelectSearchInput.style = sdSelectSearchInputCss();
@@ -4644,16 +4645,16 @@ const SdTable = class {
         return (h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (h(Fragment, { key: 'd5568bc96a6ec0e973eda494deacceef6ec4bce9' }, h("div", { key: '8ec11dd8a4e0cd9f32a9dccd345711e64d10043a', class: "sd-table__wrapper", style: {
+        return (h(Fragment, { key: '882ded3f26849b023ade24914d2d88b7278a9d4a' }, h("div", { key: 'cdaaaed9dbda39eae701e2cbfa9f22fbcdc86cf1', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: 'f96bbc29c77f6aaa46467d375a8a457938a27e13', class: "sd-table__container", style: {
+            } }, h("div", { key: '818b1f6f742861fe8515b2fd8bb826bbe357100f', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: 'fe66db102a053e90ffe02d26a28ac225e90f1ea3', class: {
+            } }, h("div", { key: 'b9fd1c56e1ab374ee7da80a82e1b96a2f1584eea', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (h("div", { key: '0851750dd88030f05e413bbdb6a7911bbc259d00', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '557674426413df32198427509c8f50921b268212' }))), h("table", { key: 'f04e1c387e34523c3a77137b82457ace6aeeb74b', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: 'aca217244defe434eb44cea583e1b2d7b17431ef', class: "sd-table__bottom" }, h("div", { key: '19a1049a467f9aec618324b0268803ddfa52e0d5', class: "sd-table__no-data" }, h("slot", { key: 'a2170c15879dc9124eb41985e902c0119b5e45c1', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '6a12ce1409f35ff6ec9dd737829b4678b2ce2920', class: "sd-table__pagination" }, h("sd-pagination", { key: 'cec76c2c6f7dc276565e17f25ed42ea2f1578b02', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'f868e4f6fc8f67e00d25914b189a82d342cc767a', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (h("div", { key: '30521e8896081a62ea96391bf7bc7f20103fc3ed', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: 'db184565e08194d4f6a35da66aa011f0b7641d8a' }))), h("table", { key: 'c8585073a95c0391c14db74d54242998a648437d', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: '27d8471253fe0a1e6ee8637ed8aecaf1ce9071c2', class: "sd-table__bottom" }, h("div", { key: 'c35591b39ff87a55d38f9b0cb2b91fbd54081f0b', class: "sd-table__no-data" }, h("slot", { key: '0af141458219896bd93dbc7a195389d4a40cf654', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '981becdef62a000bd6d338428fa1e20b5205c77e', class: "sd-table__pagination" }, h("sd-pagination", { key: '47f042431c47d7dcdb3acfb2e4687d8c8e66ba6c', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '0f9edc63cf7e119c9dc1e343ec043c28b36ee83d', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
         "columns": [{
@@ -4771,10 +4772,10 @@ const SdTextarea = class {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (h("div", { key: '5f087de7fd28e3f5fa3315c37b8974e7f5878149', class: {
+        return (h("div", { key: 'b8d0496866829b85f6678f648ccc944d57b45378', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: 'fb9e5c4e98cadbf1a694bce4f9fed498bdc8e7cd', class: "sd-textarea__content" }, h("textarea", { key: 'b0414813c34a127becd94ec6fc2e516c375d8eea', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: 'fe3f278f3a7d438f8fce8ca4043e00ec0220efd6', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: '16d15de3ff1e49de16b67088d52f7f2848f2e283', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: '84b4adbd09b7af30dbc68b5f3e6473e97fe4c76e', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: 'b43d91b1c7381a2b6c7a0ab1437e43e32396419c', class: "sd-textarea__content" }, h("textarea", { key: '9b77710a8344db09172f57212c55db6a70ec96f2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: '67056ceb0778d11a607cfc1de9de9440c98bd165', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: 'bcdb6b7991cae0e68a21f04a53299952602e5039', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: '526ff7bcd19688f086ef1f129008b4849a8d3491', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": [{
@@ -4787,6 +4788,31 @@ const SdTextarea = class {
 };
 SdTextarea.style = sdTextareaCss();
 
+const tooltip = {
+	"default": {
+		bg: "#07284A",
+		content: "#FFFFFF"},
+	danger: {
+		bg: "#FCEFEF",
+		content: "#FB4444"},
+	warning: {
+		bg: "#FEF1EA",
+		content: "#FF6B00"},
+	accent: {
+		bg: "#E6F1FF",
+		content: "#0075FF"}
+};
+var tooltipTokens = {
+	tooltip: tooltip
+};
+
+const TOOLTIP_TYPE_CONFIG = {
+    default: { bg: tooltipTokens.tooltip.default.bg, content: tooltipTokens.tooltip.default.content },
+    danger: { bg: tooltipTokens.tooltip.danger.bg, content: tooltipTokens.tooltip.danger.content },
+    warning: { bg: tooltipTokens.tooltip.warning.bg, content: tooltipTokens.tooltip.warning.content },
+    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 SdTooltip = class {
@@ -4797,14 +4823,13 @@ const SdTooltip = class {
     trigger = 'hover';
     placement = 'top';
     color = '#01BB4B';
-    type = 'default';
+    tooltipType = 'default';
     icon = 'helpOutline';
     iconSize = 12;
     label = '';
     buttonSize = 'sm';
     buttonVariant = 'primary';
     noHover = true;
-    useClose = false;
     showTooltip = false;
     slotContentHTML = '';
     buttonEl;
@@ -4814,10 +4839,10 @@ const SdTooltip = class {
     componentWillLoad() {
         this.slotContentHTML = this.el.innerHTML;
         this.el.replaceChildren();
-        // 깜빡이는 현상을 막기 위해 기본으로 <sd-tooltip></sd-tooltip> hidden이 된 elment를 visible로 만들어줌
         this.el.classList.toggle('visible', true);
     }
     render() {
+        const typeConfig = TOOLTIP_TYPE_CONFIG[this.tooltipType] ?? TOOLTIP_TYPE_CONFIG.default;
         const handleTrigger = this.trigger === 'hover'
             ? {
                 onMouseEnter: () => (this.showTooltip = true),
@@ -4834,12 +4859,14 @@ const SdTooltip = class {
             : {
                 onSdClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: '1aefeca1e8e1e5da1ad3394dbc2cd5529c0ce854' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...buttonTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-floating-portal", { key: '65c83f4f0d03d17345e9c19b462dadb78f7ea83b', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, h("div", { key: 'ca2f15d29a5999842f39ef3bb5eefc6f8675e386', class: {
+        return (h(Fragment, { key: '59034499ad4215be8135ec8da7a86d09b2d6b295' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...buttonTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-floating-portal", { key: '53bae57a86e523feeba3d96246375dd62fa13b80', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, h("div", { key: '6d084515f879936e04f7210ae59e008bbe7e8dd6', class: {
                 'sd-floating-menu': true,
-                [`sd-floating-menu--${this.type}`]: true,
+                [`sd-floating-menu--${this.tooltipType}`]: true,
                 [`sd-floating-menu--${this.placement}`]: true,
-                'sd-floating-menu--with-close': this.useClose,
-            } }, h("i", { key: 'd118d136589ef1e421e03bae59b0a9d5bfbbb2ba', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '2a2e0599bcf1cd2261335d0c46297a7650ac30a2' })), h("div", { key: 'fced40f561dae6a81a9e5c9c4be44555db358745', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }), this.useClose && (h("div", { key: 'dec97887df051d3253f05f03190e145d0515b522', class: "sd-floating-menu__close-button" }, h("button", { key: '66cd01a3228a27abdc9e4d9e974fe90c91c6ad97', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: this.handleClose.bind(this) }, h("sd-icon", { key: 'bc179a3452f83d96a7a36ca12821c093f7f53527', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            }, style: {
+                '--sd-floating-bg': typeConfig.bg,
+                '--sd-floating-content': typeConfig.content,
+            } }, h("i", { key: '38a80cb95be6bbd79dca41c36a9e48764bc8d3e7', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'e501bc5eab4cbe38a7f6c37202e2f10dc7f480c1' })), h("div", { key: '99346441a1cffa893312c98132dd819047500b69', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

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

@@ -9,7 +9,7 @@ const SdCard = class {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: '3999f64f54054b3a1662fac4aacf9f6898acb957' }, h("div", { key: '666b8e849b92a5e75d259ff079237911fd591cdd', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'dc8f4ae80e9aca7a0aecaed81f45d40e7df2c067' }))));
+        return (h(Fragment, { key: '01df653d1718aab046ee74275f13c926fbf05573' }, h("div", { key: '82dcf247f0f718328fa4f1c3548becff1c1d6fd3', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: '33b518500426f3abd40ee4a5719c8f784bfeb65a' }))));
     }
 };
 SdCard.style = sdCardCss();

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

@@ -82,7 +82,7 @@ const SdDatePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (h("div", { key: 'cd2f9c240e1e67806d1d9334937a905330d29a1f', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '1d77404494bd1fadf15d82dfabecbf61b73e5da8', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '627b76b7d276cff34224a130bb2596ca6f2ff49e', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '9dd006a9051c22dd8084ae9cb72e82c9c0b9be2b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '5090eb945c7241f3224b3d2c7a5a96221cc46c04', class: "sd-date-picker__menu" }, h("div", { key: 'fa127745062937dfe4f04773b7d6afa74d13bd7a', class: "sd-date-picker__header" }, h("div", { key: '7c59917872614d1351a3dfe3783017bd6bc6b75c', class: "year-nav" }, h("button", { key: '9e27d2d76ca72820d57c2d9ebc40fa842129da22', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '17c8f872b7cfb2825d4c9528b5838487b97529f0', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '41999c78367c90bc4d1d9bfdeb6e3d29d44df2c2', class: "year-nav__current" }, this.currentYear), h("button", { key: '52953ec66118afd480e7ce6207a551f18b61ac6d', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'e740bcc2a23f4df850b4e2579ce0cae14419313c', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '7fac86c6405a3936a1f0bdb51e5ca61463ef463a', class: "month-nav" }, h("button", { key: '62e22a2063c7ea972bf74ea08af0d519a5250b3f', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: 'fa53cbb5f2e61a3b1f0807639ce2c81516a1ca57', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '57eb7eaf1e3a11ba69cf4ef4af9852541abd7902', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '08a783b73efd7a5df2638df7c8bcac5411b2e642', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '4a5bb4f4e6f3105fc9fda008eb51a47efe606b81', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '8dd540a7188716446b2e9bcda707d7458a2ea817', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'f2da8d2325cb2fb9cb89d9c93d850cefc62235bf', class: "sd-date-picker__body" }, [
+        return (h("div", { key: '3cef7a7c9eeb6008003a70c863817330f1f9327d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '410d7911e51728fa60553f3fc3c50c144b55714c', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '8f8911ccb8ce048d14550db0d693248d697dbd21', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '41cbcd7a67305abf795e49f2faad0cfb01dd0e92', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'b307cd035a8c99eeb2c0a5353f5131c218d800f9', class: "sd-date-picker__menu" }, h("div", { key: '7448c069921dad201e0b6701a260eb1fd4bfb217', class: "sd-date-picker__header" }, h("div", { key: 'ed1f0a9f59d528dd743f71c72106b8d7c0be07a4', class: "year-nav" }, h("button", { key: '364346026bfd1650b9ccb38fd9d996eea7486989', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'a256a1adc87cdb5f7876cb76183825d82d87de19', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '60110caede0ed656cfa58ae1200b08de7631abca', class: "year-nav__current" }, this.currentYear), h("button", { key: '07f8040d822605f4461fd80dd3910ebd973060b7', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '820cd76287e851cb2a25db93183a0d90e71dfd9d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '979262f63bb16e954a661b80e6cef155f329b651', class: "month-nav" }, h("button", { key: 'f9e93031b0b8e07067d1ff562bbb2f3d41a2a761', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '1202cfb15fb886fc31c495c1f6fd37eb990ba3a3', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'b29c00421943e45fed684e63dfebf895686f6d45', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '13eda140f8dbe92cb75ae288942f1e2fda3b2891', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '4ee850a4c9ae4a92e42df78d214ae5380c572dc4', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '13887a76bdea27522798fde506ad04851bb701aa', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'a887e352065fe18797104b2271920f98a8392775', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,