@sellmate/design-system 1.0.37 → 1.0.39

package/dist/cjs/{sd-button_21.cjs.entry.js → sd-button_20.cjs.entry.js}

@@ -4,6 +4,7 @@ var index = require('./index-Qvv0fGgj.js');
 var component_button = require('./component.button-BjTPq93d.js');
 var useDatePicker = require('./useDatePicker-B8_GIuXI.js');
 var index$1 = require('./index-BUvXpPc3.js');
+var system = require('./system-lN7yOMPF.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
 var selectKeyboardNavigation = require('./select-keyboard-navigation-CErfIrGV.js');
 var tooltipArrow = require('./tooltipArrow-Mb2Dhc7T.js');
@@ -468,16 +469,16 @@ const SdDateRangePicker = class {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (index.h("div", { key: 'f96121cbdd02bd5dfafb47cee2c15084f53d77d2', class: {
+        return (index.h("div", { key: 'd76c5830570b080fe07fc01e9a3ea8f09ec1bf40', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, index.h("sd-input", { key: 'bf18d51662c7bbe16e831175eb1b5df93f7ed78d', 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() }, index.h("sd-icon", { key: '7fa976563de08e44b8c9572d9e9ec717285cabba', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '69abd97403ea83264b4408526d0423470421f877', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, index.h("div", { key: '50dfb1e8b63e12f7707c53fa73063b8a88563209', class: "sd-date-range-picker__menu" }, index.h("div", { key: '666f6d6b41853f47d26bccb598dec7bcf1af6a5a', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: 'af226c05c51de90e073730d7b9557024d55ceed6', type: "button", name: "prev", title: "Previous", onClick: () => {
+            } }, index.h("sd-input", { key: '3ecf2ccaa66e472037607fca63f29317a59e2f5d', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '317167fa8f25a25e869757dfdc6df63671caea57', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'f11baac3755a432b5c379a1b5a26590341136d68', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, index.h("div", { key: 'c0cbd599dd4fac9970f3aa9bd84594fffb394533', class: "sd-date-range-picker__menu" }, index.h("div", { key: 'caaaa777a14f77d421b5d547ee45d71731390f74', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: '6c5169b88ce2f6d132ae18f1944ab4dcae3ba304', type: "button", name: "prev", title: "Previous", onClick: () => {
                 this.setPrevYear(this.prevYear - 1);
                 this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, index.h("sd-icon", { key: '68a42e30d39305ff9d876389df1e26083cf170f8', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: 'b489964425b45cd993e474fe1c1f0c8a8e1fc2a5', class: "header-label" }, this.prevYear), index.h("button", { key: '4e4008ed5eaffec84a4ad17df60ab1753465d146', type: "button", name: "next", title: "Next", onClick: () => {
+            } }, index.h("sd-icon", { key: '19a1d47598e047faa63ad230e5470421e71ecc66', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: '8f6d4100f1de0b5c830cc2b7cf1479a7e87f77f5', class: "header-label" }, this.prevYear), index.h("button", { key: '56d402286b78e5be0c2d1cc3227afbc6e8b327c7', type: "button", name: "next", title: "Next", onClick: () => {
                 this.setPrevYear(this.prevYear + 1);
                 this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, index.h("sd-icon", { key: 'c6067f45fa602520dff886ea5c2c01c46c439f1d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '5cd806e75ade0161f3551bc99449b833bb2637be', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
+            } }, index.h("sd-icon", { key: '6d6faeb9a890643e8b4b79a40d5c71a4a0e488f6', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: 'a959a9309a6a6fe17f3cf4b813c865d0b0470722', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), index.h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), index.h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (index.h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index$1, Number(day))), type: this.getDateBoxType(this.formatDate(index$1, Number(day))), isToday: useDatePicker.today === this.formatDate(index$1, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index$1, Number(day))), inRange: this.isDateInRange(this.formatDate(index$1, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index$1, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index$1, Number(day)), onSdClick: () => this.handleDateClick(index$1, Number(day)), onSdMouseOver: () => this.handleDateHover(index$1, Number(day)) }))))))))))))));
     }
@@ -489,7 +490,24 @@ const SdDateRangePicker = class {
 };
 SdDateRangePicker.style = sdDateRangePickerCss();
 
-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-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-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px var(--sd-system-space-field-sm-padding-x);border:1px solid var(--sd-system-color-field-border-default);border-right:none;border-radius:var(--sd-system-radius-field-default) 0 0 var(--sd-system-radius-field-default);background-color:#F6F6F6}sd-field .sd-field__wrapper{width:100%;height:var(--sd-system-size-field-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;width:100%;height:100%;display:flex;flex:1;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-system-radius-field-default);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}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-system-color-field-border-danger);font-size:12px;line-height:20px;margin-top:4px}`;
+const field = {
+	addonLabel: {
+		paddingX: "12",
+		typography: {
+			fontWeight: "500",
+			fontSize: "12",
+			lineHeight: "20"},
+		bg: "#F6F6F6",
+		border: {
+			"default": "#AAAAAA",
+			disabled: "#CCCCCC"}
+	}
+};
+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;width:100%;height:100%;display:flex;flex:1;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-system-color-field-border-danger);font-size:12px;line-height:20px;margin-top:4px}`;
 
 const FORM_PARENT_TAGS = [
     'sd-select',
@@ -514,7 +532,7 @@ const SdField = class {
     status;
     // props - label
     label = '';
-    insideLabel = false;
+    addonLabel = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -610,20 +628,32 @@ const SdField = class {
         }
     }
     render() {
-        return (index.h("div", { key: '2fbaf36430425bac24666667a781dbf17c51da26', class: {
+        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: '54d2c495dbfb3a4e749b49fe770c3ed4b5f9f5ad', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
-                'sd-field--has-label-inside': !!this.label && this.insideLabel,
+                'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, index.h("div", { key: 'c6559295b6bd18dbdc44b180dd401236e3dc1470', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '9ed48bc10ffb0a9bacc66f39ed22b2acf3fe4686', class: {
+            }, style: addonCssVars }, index.h("div", { key: '7399b420af3adf54f3a1c7c3257e85453e17a9a1', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: 'db4915376244d14cfd63fcd07258de2c7d0e4c81', class: {
                 'sd-field__control': true,
-                'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, index.h("slot", { key: '4e94489e186763f5cc16af7d38108f7d36ae3f90' }))), this.errorMsg && index.h("div", { key: '48f9d3e519615ed357f397041053345af23b5eff', class: "sd-field__error-message" }, this.errorMsg)));
+                'sd-field__control--has-addon': !!addon,
+            } }, addon && (index.h("div", { key: 'f1dde4b40f69fd14a625ff93146b0837d02b2a78', class: "sd-field__addon" }, addon)), index.h("slot", { key: '44d3d67efa90d71eb9868de9a8a7fcdd373dfff8' }))), this.errorMsg && index.h("div", { key: '2923e6fd9be55fe20489e7b1b164afa719d86dfa', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
             return null;
-        return (index.h("label", { class: { 'sd-field__label': true, 'sd-field__label-inside': this.insideLabel } }, 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 ?? 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)))));
     }
 };
 SdField.style = sdFieldCss();
@@ -779,7 +809,7 @@ const SdFloatingPopover = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: 'ff0dbd7795ab2ee4f8ee89174b2b74fc2861f88e' });
+        return index.h("slot", { key: 'a49df03bd324a4d37ac077881c0df71603cd3c8f' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -2793,12 +2823,74 @@ const SdIcon = class {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (index.h("i", { key: '014f321ece25a6f20304f9d1be313b6f91e1bf03', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: '178cd4db5ef53690ebba2e70f94df5068953f97d', color: this.resolvedColor })));
+        return (index.h("i", { key: '62de720d781da34b7939d1ed6c3260dba41f3bd2', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: '5b4d068ad7db78ca7faee90e3712d383c9db3c49', color: this.resolvedColor })));
     }
 };
 SdIcon.style = sdIconCss();
 
-const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{border-radius:8px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2)}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#D8D8D8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:#333333;font-size:12px;line-height:20px;padding:0 8px}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:#888888}sd-input .sd-input__content .sd-input__native::placeholder{color:#AAAAAA}`;
+const input = {
+	sm: {
+		height: "28",
+		paddingX: "12",
+		gap: "8",
+		radius: "4",
+		typography: {
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"}
+	},
+	md: {
+		height: "36",
+		paddingX: "16",
+		gap: "12",
+		radius: "6",
+		typography: {
+			fontWeight: "400",
+			fontSize: "16",
+			lineHeight: "26"}
+	},
+	text: {
+		"default": "#222222",
+		placeholder: "#AAAAAA",
+		disabled: "#888888"},
+	icon: {
+		"default": "#888888"
+	}};
+var inputTokens = {
+	input: input
+};
+
+const sm = inputTokens.input.sm;
+const md = inputTokens.input.md;
+const INPUT_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        paddingX: sm.paddingX,
+        gap: sm.gap,
+        radius: sm.radius,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+    },
+    md: {
+        height: md.height,
+        paddingX: md.paddingX,
+        gap: md.gap,
+        radius: md.radius,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+    },
+};
+const INPUT_COLORS = {
+    text: inputTokens.input.text,
+    icon: inputTokens.input.icon,
+};
+const INPUT_ICON = {
+    iconSize: Number(system.systemTokens.size.field.icon),
+};
+
+const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{border-radius:8px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2)}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#D8D8D8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:var(--sd-input-text-color);font-size:var(--sd-input-font-size);line-height:var(--sd-input-line-height);font-weight:var(--sd-input-font-weight);padding:0 var(--sd-input-padding-x);gap:var(--sd-input-gap)}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native::placeholder{color:var(--sd-input-placeholder-color)}sd-input .sd-input__content .sd-input__clear-icon{flex-shrink:0;cursor:pointer}`;
 
 const SdInput = class {
     constructor(hostRef) {
@@ -2809,14 +2901,13 @@ const SdInput = class {
     }
     get host() { return index.getElement(this); }
     value = null;
-    //  @Prop() name?: string;
     type = 'text';
-    insideLabel = false;
+    size = 'sm';
+    addonLabel = '';
     placeholder = '입력해 주세요.';
     disabled = false;
     clearable = false;
-    width;
-    barcode = false;
+    width = '100%';
     rules = [];
     autoFocus = false;
     status;
@@ -2891,7 +2982,24 @@ const SdInput = class {
         }
     };
     render() {
-        return (index.h("sd-field", { key: '8f754517dbff851430ee7e5021e1372fa8764fb3', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("label", { key: '03379b8bbe840c767d71c17a2359330a74cb8cb0', class: "sd-input__content", style: { width: '100%' } }, index.h("slot", { key: '306fa5eaaf2005c62ac26c106a29267cf3cdc788', name: "prefix" }), index.h("input", { key: 'e7419f6ee67a0ffc01608951fe1879e049cc82e0', 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 }), index.h("slot", { key: '52dfe48624814da0de798a04f402fa32e8738168', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: 'e17b14e5f1f853767de59f1ab69f99699cd26238', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
+        const sizeTokens = INPUT_SIZE_MAP[this.size] ?? INPUT_SIZE_MAP.sm;
+        const resolvedWidth = /^\d+$/.test(this.width) ? `${this.width}px` : this.width;
+        const cssVars = {
+            // sd-input 자체 토큰
+            '--sd-input-font-size': `${sizeTokens.fontSize}px`,
+            '--sd-input-line-height': `${sizeTokens.lineHeight}px`,
+            '--sd-input-font-weight': sizeTokens.fontWeight,
+            '--sd-input-padding-x': `${sizeTokens.paddingX}px`,
+            '--sd-input-gap': `${sizeTokens.gap}px`,
+            '--sd-input-text-color': INPUT_COLORS.text.default,
+            '--sd-input-placeholder-color': INPUT_COLORS.text.placeholder,
+            '--sd-input-disabled-color': INPUT_COLORS.text.disabled,
+            '--sd-input-icon-color': INPUT_COLORS.icon.default,
+            // sd-field 시스템 변수 override (size별 높이/반경)
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+        };
+        return (index.h("sd-field", { key: '3b559e592e3bcc57072eda7b081f6dc42f34813c', name: this.name, label: this.label, addonLabel: this.addonLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: { width: resolvedWidth, ...cssVars } }, index.h("label", { key: '6da8d8636353f3287c45c85ac75ac0a6202296e9', class: "sd-input__content" }, index.h("slot", { key: '065e5cb193ba2e3e91380ffd32d9c84854540fe2', name: "prefix" }), index.h("input", { key: 'c549470eb09eee2605871495f53a271d9978811e', 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 }), index.h("slot", { key: 'd3259163d6aa2eef4346afa5f26c4d4ba722bf40', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: 'eaec3486b16a2b19e98e1c0629d8ca8dd284e8e7', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
             } })))));
@@ -2918,53 +3026,11 @@ const SdLoadingSpinner = class {
         return useDatePicker.resolveColor(this.color);
     }
     render() {
-        return (index.h(index.Fragment, { key: '649041f6be15a4db09b2b36b9057b5325a7de777' }, index.h("svg", { key: '35238cb61ca2d21ddf3d37c67d93ef14504eef72', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: '7466399358436ea959a0223109169b37f9fb0e55', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (index.h(index.Fragment, { key: '463ab22264fafc013af7a602066eb8ebed10ac05' }, index.h("svg", { key: '6b90c0c3448c309813038fb8281b4ed73b1145d3', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: 'aa553d712b98c3316c98b7e52b955b7185eaee20', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
 };
 SdLoadingSpinner.style = sdLoadingSpinnerCss();
 
-const sdModalCardCss = () => `sd-modal-card{display:block}sd-modal-card .sd-modal-card{position:relative;padding:40px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:white}sd-modal-card .sd-modal-card__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-modal-card .sd-modal-card sd-icon.sd-modal-card__icon{display:block;width:32px;height:32px;margin:0 auto 12px auto}sd-modal-card .sd-modal-card__title{color:var(--point-color);font-size:18px;font-weight:700;line-height:30px;text-align:center;margin:0 0 20px 0}sd-modal-card .sd-modal-card__message{color:#222222;font-weight:400;font-size:12px;line-height:22px;text-align:center;margin:0}sd-modal-card .sd-modal-card__button-container{display:flex;margin:32px auto 0 auto;justify-content:center;align-items:center;gap:8px}sd-modal-card .sd-modal-card__button-container.flex-column{flex-direction:column}sd-modal-card .sd-modal-card__button-container button.sd-modal-card__button{width:89px}`;
-
-const SdModalCard = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.close = index.createEvent(this, "sdClose");
-        this.confirm = index.createEvent(this, "sdConfirm");
-    }
-    type = 'info';
-    system = 'normal';
-    useCloseButton = true;
-    modalTitle = 'normal';
-    buttonFlexDirection = 'row';
-    buttonProps;
-    message = [];
-    sdClass = '';
-    close;
-    confirm;
-    get pointColor() {
-        if (this.type !== 'normal') {
-            return 'grey_95';
-        }
-        switch (this.system) {
-            case 'positive':
-                return useDatePicker.resolveColor('brilliantblue_75');
-            case 'negative':
-                return useDatePicker.resolveColor('red_75');
-            default:
-                return useDatePicker.resolveColor('grey_95');
-        }
-    }
-    get getModalClass() {
-        let modalClass = `sd-modal-card ${this.sdClass}`;
-        modalClass += ' ' + `sd-modal-card-${this.system}`;
-        return modalClass;
-    }
-    render() {
-        return (index.h("div", { key: '8a7b0028aa154399a6859b60b5db1cbd5af897a6', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (index.h("sd-icon", { key: '7c36b94468b1f076507d2c6633cb99f877c6b345', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (index.h("sd-icon", { key: 'bd9a8586d2275ff7d549c722b32fd77382a61c3e', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), index.h("h2", { key: 'ee3b7b8191825b8e42548d3340c26310f53159d7', class: "sd-modal-card__title" }, this.modalTitle), index.h("slot", { key: 'd5225b3b943018a84d31f85277c7c9243d9e0387' }, index.h("div", { key: 'bfa4e7ad9b56c7a8d679df8e1d4d9be01eba2846', class: `sd-modal-card__message-container` }, this.message.map(msg => (index.h("p", { class: "sd-modal-card__message" }, msg))))), index.h("div", { key: 'e028f4b7c8dfa77d4b85d06209fb4f95433ce3eb', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (index.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();
-
 const sdNumberInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}sd-number-input .sd-number-input{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border-radius:4px;color:#333333;font-size:12px;line-height:20px;position:relative}sd-number-input .sd-number-input .sd-number-input__input{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0;text-align:right}sd-number-input .sd-number-input .sd-number-input__input[disabled]{cursor:not-allowed;color:#888888}sd-number-input .sd-number-input .sd-number-input__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#AAAAAA}sd-number-input .sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}sd-number-input .sd-number-input .sd-number-input__buttons{padding:4px;display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button{width:20px;height:20px;border:none;border-radius:2px;background-color:#EFF6FF;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button:hover:not(:disabled){background-color:#E6F1FF}sd-number-input .sd-number-input .sd-number-input__button:disabled{background-color:#EEEEEE;cursor:not-allowed}sd-number-input .sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}sd-number-input .sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}sd-number-input .sd-number-input .sd-number-input__label{margin-bottom:8px;font-weight:500;color:#333333}sd-number-input:focus-within .sd-number-input__buttons{opacity:1;pointer-events:auto}sd-number-input:focus-within .sd-number-input{border-color:#0075FF;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}`;
 
 const SdNumberInput = class {
@@ -2982,7 +3048,7 @@ const SdNumberInput = class {
     useDecimal = false;
     value = null;
     label;
-    insideLabel = false;
+    addonLabel = '';
     placeholder = '입력해 주세요.';
     disabled = false;
     width;
@@ -3213,17 +3279,17 @@ const SdNumberInput = class {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (index.h("sd-field", { key: 'c3a485796694d2c210160197267b930772357976', 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 }, index.h("label", { key: '3b7ac29ad4ac268df76c1fe9c06d77064ee75230', class: {
+        return (index.h("sd-field", { key: '6e530f1a553adc3dfcf244f9d5119c4c3585105e', name: this.name, label: this.label, addonLabel: this.addonLabel, 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 }, index.h("label", { key: 'b3c548af3db1c15ef53d4dd1e171a5ba39b638f6', 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 }, index.h("input", { key: 'f8c9c5319e4793eb2be18a8a6d6bf36a2defb41e', 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 && (index.h("div", { key: '6e76bf90e33092abfe7cf6315edf389d157d3121', class: "sd-number-input__buttons" }, index.h("button", { key: 'd020a14949c547b1d0ad1fa6087c10f29c7aa341', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("input", { key: '0857278d2ef0c288bedd90adcea519bdc894417a', 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 && (index.h("div", { key: '5b58e8dcfb83db649aedb13faf556c9e6e5b5bb6', class: "sd-number-input__buttons" }, index.h("button", { key: '8cdd4eccb323e1e3974e5de0c99e5a622a36c41e', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '6d1c5d5b44027d58eb7460aab4369cead93d9555', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), index.h("button", { key: '093e027e89c05973d97bed7b2a547df4253fa99b', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '0d6d37ebbd7548484e6cf51a2dce962e52e74042', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), index.h("button", { key: '0da4636adfbd8918a5180d1f5abbc97d16664271', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '8eb8d91c84ce4d5b5a6c205018047291bf0f092c', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '16d62c22bcbfed3a7098780784b58376700f9a5b', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get watchers() { return {
         "value": [{
@@ -3311,12 +3377,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (index.h("div", { key: '9fe78e2e23e4f31e0979e2d04f80169e0e0dcc0e', class: this.paginationClasses }, index.h("div", { key: '257d3b64a41ebcfcf99c6385dc4f25fe8bef76d2', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (index.h("div", { key: '403af836a1c920164401029eb1e52339ddd4b69e', class: this.paginationClasses }, index.h("div", { key: '5b899b37cabe16ccef734f45a3ca8752b7f37b08', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.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)))), index.h("div", { key: '1f39f1c793802461d78fe946f814ef20e428b375', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '58e0c871da394403b7504c9a8293b63703ca55f0', class: "append-btns" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -3546,7 +3612,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: '5c8086dcde22ac632a914b2b7efb2b1b1f6147bd' });
+        return index.h("slot", { key: 'de500e5ee667c295313afda908429b55ed768969' });
     }
     static get watchers() { return {
         "open": [{
@@ -3585,7 +3651,7 @@ const SdRadio = class {
         this.update.emit(this.value);
     }
     render() {
-        return (index.h("div", { key: '54f13256c7d3af2ca702dcd8c63fbb50eb8f10cc', "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() }, index.h("label", { key: `radio-${this.val}` }, index.h("input", { key: '28c55d4f7612e37c3f5c715dc6c338826d203a9d', 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 && index.h("span", { key: 'e5a5b475e6f0b47fc77119cbf9eeca97338f71ff', class: "sd-radio-group__label" }, this.label || this.val))));
+        return (index.h("div", { key: '22f461c707a4493e9cd1c3249b8e9d7ba2e8c1d3', "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() }, index.h("label", { key: `radio-${this.val}` }, index.h("input", { key: 'fa3a86b504202c9d74038fba3d6dafc04632e2fb', 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 && index.h("span", { key: 'bc4e311599a3b9c4339dc07538a2e27149c3d816', class: "sd-radio-group__label" }, this.label || this.val))));
     }
 };
 SdRadio.style = sdRadioCss();
@@ -3613,7 +3679,7 @@ const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
     searchable = false;
     // props - label
     label = '';
-    insideLabel = false;
+    addonLabel = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -3731,7 +3797,7 @@ const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
         }
     };
     render() {
-        return (index.h("sd-field", { key: 'da4d19d27d49ba3be711e35bd8090602e3d96dbd', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: 'a0c5e55a1c31def2095b98f95b79fe877d114fb9', class: {
+        return (index.h("sd-field", { key: 'f7cd0c34188712a30389d07bde7edc7875e9923b', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '460a8a23247e24a02bd25470105598914029e205', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -3914,10 +3980,10 @@ const SdSelectDropdown = class {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (index.h("div", { key: '4f22112f05b66852b064a73f3d20ee0d633a6989', class: {
+        return (index.h("div", { key: 'aca6d4044905863975c944afb44f92df0d6f1568', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: 'e068422c6d4586dc833489a0d77f0a78a4f02ada', 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$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.isOptionSelected(option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: 'c87e4d9a391bf7b583bca1cda8930f977a1aec2c', 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$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.isOptionSelected(option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get watchers() { return {
         "filteredOptions": [{
@@ -3964,7 +4030,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (index.h("div", { key: '8d5d64e5888bca2e204168a58a9e8de65df44581', class: {
+        return (index.h("div", { key: 'e28519019fa39af328fe7f5a25f18bb227e4d622', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -4010,17 +4076,17 @@ const SdSelectSearchInput = class {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (index.h("div", { key: 'e4d9726c7c294a2c435cc4c9aaf6d2ada1fa58ff', class: {
+        return (index.h("div", { key: '2f4e9dfd95524f7d62f49f2cba50f14157d56fe3', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: '7be3654c2171a71ade6b61670a73d25a0f68cc9e', 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() }, index.h("sd-input", { key: '509714588ae43b950ea7abc8cd045aee9007e04c', 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();
-            } }, index.h("sd-icon", { key: 'e1746218cac13b6b935eacc27f524de78edd2684', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, index.h("sd-icon", { key: '1f13b6f332a930d7ffe515ccd4a77cf4e7e1af7f', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
 };
 SdSelectSearchInput.style = sdSelectSearchInputCss();
@@ -4793,16 +4859,16 @@ const SdTable = class {
         return (index.h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, index.h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (index.h(index.Fragment, { key: '6a598d709882ea40c4542ab0bf56d1f3319888f8' }, index.h("div", { key: 'd9f25c7e5f27a4b7fb53a8bd968a2ee23db6e45e', class: "sd-table__wrapper", style: {
+        return (index.h(index.Fragment, { key: 'f3e4930d36d080fd546dddc1e80190b831e93012' }, index.h("div", { key: 'ad2f798951631319190d93f83e25b87f871e58de', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, index.h("div", { key: 'c357870b7c3c25db8b694741d9ec14ced48f5410', class: "sd-table__container", style: {
+            } }, index.h("div", { key: 'c4b6d4080f1416d1c88ab1413c66848bdafe9019', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, index.h("div", { key: '026795a9da649ede82ad5da2b2b768715fb80b8e', class: {
+            } }, index.h("div", { key: '3aacc27970b0c6d8b700063c0af7c57175e2cb22', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (index.h("div", { key: '3f409eaba4247d1e1c87836ac6aa630cefdfa225', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: '1abdff39a17eb8c0fb504f015c141e024be6365d' }))), index.h("table", { key: '6d1756ec3a70b9745af61a036d9fb5c74b53a6aa', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (index.h("div", { key: 'cd249a22bc96a72e65f8f6bf5a2ab507a2a8905e', class: "sd-table__bottom" }, index.h("div", { key: '50cf6fa914b401dd0b6b00dbbfce36ab89c3d29a', class: "sd-table__no-data" }, index.h("slot", { key: '1c29270a15fca7d03e194dbca01d83c1eaed271e', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '94f994cdc3efeb3a410561d95ed19ff6391fa187', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'b82f322e289ed05439b301ec4564a4fdbfb786cd', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: 'e89fafbc92fcf3cf28d2058065321e580b5336d8', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (index.h("div", { key: '25fca304a4e8ebf43aeeff20de3e3446d25e1ffb', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: '48b0adad60cf422b884557b53097c28a4f0b8879' }))), index.h("table", { key: 'ec4328a1f43c865de642cc5814fbdef6a374b7e3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (index.h("div", { key: 'ba362ecb9fb8134a15ff3d0a3b8e6a523e94166a', class: "sd-table__bottom" }, index.h("div", { key: 'ca5c2e0b19a1e301ac159588436ef24eecfb6365', class: "sd-table__no-data" }, index.h("slot", { key: '68564a60a05833ba87743212d7189eef6e179fb4', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '88c3c7362234c20a60f6437ecd79d4c75b2caa6e', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'c3c8c435fcb752f2b1139981bb764cf4dfb153ab', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '03801039397a31321e5af96c2bd2d2900151240e', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
         "columns": [{
@@ -4920,10 +4986,10 @@ const SdTextarea = class {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (index.h("div", { key: '64730f4db9250e60c01ca42e38434dd024587b3f', class: {
+        return (index.h("div", { key: 'a8935e47e739b5231fb5e7d5402477a371457fcb', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: 'e82eb11720436687a0cc78f874f3cdc121e63850', class: "sd-textarea__content" }, index.h("textarea", { key: '9d7df9381b671c37d5af8d25d58d3891ca84ed80', 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() && (index.h("div", { key: '2c0bec6b959f0730e8aa56a4e1e8c5b50d1a3c8c', class: "sd-textarea__footer" }, this.helpText !== undefined && index.h("span", { key: 'fb8fb5005926e5d735af42154130365293b3ba30', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && index.h("span", { key: '17cdf2e1dc85296f2dd35651eedae68a721accbd', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: '7e1a3f00fc55fe0cfe760b41634302a5f95a9459', class: "sd-textarea__content" }, index.h("textarea", { key: '279aa51122c9d85f05ae7c9f0a21c7caeaec2b78', 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() && (index.h("div", { key: '3581c12a5225149ad37301432ca69773f7fbbbdf', class: "sd-textarea__footer" }, this.helpText !== undefined && index.h("span", { key: '4cb3088754f1c6e6c826c8466e34ac22475705a5', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && index.h("span", { key: '40e72285972449421a39e10a3fa0e82975e45c9c', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": [{
@@ -5007,14 +5073,14 @@ const SdTooltip = class {
             : {
                 onSdClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (index.h(index.Fragment, { key: '9e3f1d2d1acfe23ee3b4d5470b8daf1414d81866' }, this.label ? (index.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 })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-floating-portal", { key: 'd02f318408db0f2e397009a97b00d8fc863a0034', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, index.h("div", { key: '76688eeb4af24053988676af62275e1b16a33097', class: {
+        return (index.h(index.Fragment, { key: '1c731d4e69b06c764396692e4292c514eb02492a' }, this.label ? (index.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 })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-floating-portal", { key: '9ced53dea1ae6c33c091b170dd32b05a2f0d697f', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, index.h("div", { key: 'd06222bdc0db2497790f0c8d141d60308e453801', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.tooltipType}`]: true,
                 [`sd-floating-menu--${this.placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            } }, index.h("i", { key: '226ab42ebbadd1195c859a30f851e3426578c5e8', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'd4ee53550bf076481bd2f8124952fb0bdf18f944' })), index.h("div", { key: '3d9438ca57cc82a403659ea2b9c944d956928863', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            } }, index.h("i", { key: '49dc1d2025baea270d0886c11c10e0dda9fa09fd', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '9a00fbbff40c7f041b5914a35d0049ef1cf090d5' })), index.h("div", { key: 'd6169cacc0cd979b605fcfab1f68a395d1f01238', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
 };
 SdTooltip.style = sdTooltipCss();
@@ -5028,7 +5094,6 @@ exports.sd_floating_portal = SdFloatingPopover;
 exports.sd_icon = SdIcon;
 exports.sd_input = SdInput;
 exports.sd_loading_spinner = SdLoadingSpinner;
-exports.sd_modal_card = SdModalCard;
 exports.sd_number_input = SdNumberInput;
 exports.sd_pagination = SdPagination;
 exports.sd_portal = SdPortal;

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

@@ -11,7 +11,7 @@ const SdCard = class {
     bordered = false;
     sdClass = '';
     render() {
-        return (index.h(index.Fragment, { key: '5469668df656a5992d9b3ac2a166bc9e39b8619d' }, index.h("div", { key: '95b883e6cc86fcaa8add6cbd029b5e4d1ed2759c', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: 'a09be5de9f8e0edab7e60045dffb39e52f9c545f' }))));
+        return (index.h(index.Fragment, { key: '01df653d1718aab046ee74275f13c926fbf05573' }, index.h("div", { key: '82dcf247f0f718328fa4f1c3548becff1c1d6fd3', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: '33b518500426f3abd40ee4a5719c8f784bfeb65a' }))));
     }
 };
 SdCard.style = sdCardCss();