@sellmate/design-system 1.0.38 → 1.0.39

package/dist/cjs/sd-select-group.cjs.entry.js

@@ -28,7 +28,7 @@ const SdSelectGroup = class extends baseDropdownEvent.BaseDropdownEvent {
     searchable = false;
     // props - label
     label = '';
-    insideLabel = false;
+    addonLabel = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -275,7 +275,7 @@ const SdSelectGroup = class extends baseDropdownEvent.BaseDropdownEvent {
         });
     }
     render() {
-        return (index.h("sd-field", { key: '343870c96352644f1f32570296473d2f06a65750', 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), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '05d7ced4e332e5ab2f66b44b517f4e59b12ecf64', class: {
+        return (index.h("sd-field", { key: '2ff7d25f8fd9724fead7722757f174610d7c084d', 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), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '57d0ff569579bb56810891a8e50a89e8b82096ac', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

package/dist/cjs/sd-select-multiple.cjs.entry.js

@@ -155,7 +155,7 @@ const SdSelectMultiple = class extends baseDropdownEvent.BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (index.h("sd-field", { key: '8de4ef57a8dd1c6f2fd6ab9ae22fe4df3e99ed16', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '8b57b5500a152853db07de205ab006f7a92f30a8', class: {
+        return (index.h("sd-field", { key: '022f39a42986c29f8cab7f6801a7d2e4bbd5aaa5', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '93e4dd74f1b0ad76429f37c5fe6a9cffb98697d5', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/cjs/sd-select-option-group.cjs.entry.js

@@ -48,7 +48,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (index.h("div", { key: '7581caff61d1257d653b6f58b8d76c21225b3cc5', class: {
+        return (index.h("div", { key: '70ab9a558faf068cfc4eb0a5f6a29453ceedc6ec', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -57,10 +57,10 @@ const SdSelectOptionGroup = class {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: 'ddb33f6afaa6bc6d6dd3dc494f6ec74b9c023a42', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '14f2c7fc347718d2909e5006bf2500a9a51b0a66', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: 'ca5dc0033231ab204a8688f98453742cdbde7d26', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: 'bba6cb9fe649f6eda82ba287f73d0142e02c53c2', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: '99415ed662cc2f8f29d31e3811eb4496f8fcac47', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'a3c7dc6455a94ecd4587f8b13b4d1f10e3b58819', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), index.h("span", { key: '7d03c080b7f5b92881389bfec787015a6ac55fa1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '7066453f92eac7549569db6854e3dc32515d80b9', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();

package/dist/cjs/sd-select-v2-list-item_2.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Qvv0fGgj.js');
-var sdSelectV2_config = require('./sd-select-v2.config-DedHbMz4.js');
+var sdSelectV2_config = require('./sd-select-v2.config-DZrPJ6OS.js');
 
 const sdSelectV2ListItemCss = () => `sd-select-v2-list-item{display:block}sd-select-v2-list-item .sd-select-v2-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-v2-list-item .sd-select-v2-list-item--selectable{cursor:pointer}sd-select-v2-list-item .sd-select-v2-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-v2-list-item .sd-select-v2-list-item--depth2-group{font-weight:500}sd-select-v2-list-item .sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled):hover{background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--focused.sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-item--group){font-weight:700;color:var(--list-item-bg-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:hover,sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused{color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-v2-list-item .sd-select-v2-list-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-list-item .sd-select-v2-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-v2-list-item .sd-select-v2-list-item__checkbox{flex-shrink:0}`;
 
@@ -73,7 +73,7 @@ const SdSelectV2ListItem = class {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${sdSelectV2_config.LIST_ITEM_COLORS.depth1.borderWidth}px solid ${sdSelectV2_config.LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (index.h("div", { key: '0abaaaf9e87dd7faa5ca7566d54367fc1a883d6e', class: {
+        return (index.h("div", { key: '1e828b28202b9d22cc02dff0550e37e506167f90', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -83,7 +83,7 @@ const SdSelectV2ListItem = class {
                 'sd-select-v2-list-item--focused': this.isFocused,
                 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-v2-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: 'd2b00059ae0792d7d162e8ea7c8f35640ab6086f', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '588434f01076bc963ca733eabf62a74795788c07', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '6238cac7c3da53813eb8e65f98167874947625af', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '7f49b89aff1a269944551664bc8a51447b5b2f7e', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '51aad2d06ecdf11968f3f13c632081a663a3d200', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '1c1f5cd51460863ce41c8980dcc65cd2bb7bfee5', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectV2ListItem.style = sdSelectV2ListItemCss();
@@ -145,12 +145,12 @@ const SdSelectV2ListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '0b97d37d739a22f488b313cfcc6e210c19cd3b7f', class: {
+        return (index.h("div", { key: 'e7bd315d17d554aa63346f44eb8b2661994b49aa', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: 'c0667cb553c481507149baa6da6b07cdc3ed69c4', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: '0a9f76e5f8bb9a202ca921d076552f7ca8868528', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: 'ac3dffc2b22f14ed356c92f64f8d1d46e57040f7', ref: el => {
+            } }, index.h("div", { key: 'ee332050907bc7e9004ff27e3f79cf816e7a44e7', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: 'ccd929d161ba92ef4e8b008cee8866815c21f430', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: 'b10e1dcf4bee6df78e917c9e4c31563e0466f38e', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => this.searchFocus.emit() }), this.searchText && (index.h("button", { key: 'c81a0a057ad862603c3ccb627102182898fd004f', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.h("sd-icon", { key: 'b65fcc15d27b3feafba27944dada2c9ed844b870', name: "close", size: 12, color: "#888888" }))))));
+            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => this.searchFocus.emit() }), this.searchText && (index.h("button", { key: 'fa2ee3033cff6b707a409ada6982ed596492c81d', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.h("sd-icon", { key: '0e2cab7ca1a11c1ce60e74ac435dc55fbc375438', name: "close", size: 12, color: "#888888" }))))));
     }
 };
 SdSelectV2ListItemSearch.style = sdSelectV2ListItemSearchCss();

package/dist/cjs/sd-select-v2-listbox_2.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Qvv0fGgj.js');
-var sdSelectV2_config = require('./sd-select-v2.config-DedHbMz4.js');
+var sdSelectV2_config = require('./sd-select-v2.config-DZrPJ6OS.js');
 
 const sdSelectV2ListboxCss = () => `sd-select-v2-listbox{display:block}sd-select-v2-listbox .sd-select-v2-listbox{display:flex;flex-direction:column;min-width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);width:fit-content;border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden}sd-select-v2-listbox .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:var(--listbox-padding-bottom)}sd-select-v2-listbox .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
 
@@ -132,12 +132,12 @@ const SdSelectV2Listbox = class {
             '--listbox-radius': `${sdSelectV2_config.LIST_BOX_LAYOUT.radius}px`,
             '--listbox-padding-bottom': `${sdSelectV2_config.LIST_BOX_LAYOUT.paddingBottom}px`,
         };
-        return (index.h("div", { key: '0f92a96e763d00ee241cdca62b3b7ccad90c811a', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: '7c85122be46cc77db8c28c8b3cf072bfd445d56d', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '08a4a00208e70bc77cddec12f6ad71ed8cad0071', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll }, this.isEmpty ? (index.h("div", { class: "sd-select-v2-listbox__empty" }, sdSelectV2_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick })))))));
+        return (index.h("div", { key: 'b64bc66e7f9a356e3f0cf752cba3a3c9de1928c5', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: '2444bdda4e2a83008d175ba9867ecad01da5ed25', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '6307a0fd5480c006248dee44c4e1b54dd5749895', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll }, this.isEmpty ? (index.h("div", { class: "sd-select-v2-listbox__empty" }, sdSelectV2_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick })))))));
     }
 };
 SdSelectV2Listbox.style = sdSelectV2ListboxCss();
 
-const sdSelectV2TriggerCss = () => `sd-select-v2-trigger{display:block;width:100%;height:100%}sd-select-v2-trigger .sd-select-v2-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-v2-trigger .sd-select-v2-trigger--disabled{cursor:not-allowed}sd-select-v2-trigger .sd-select-v2-trigger__addon{display:flex;align-items:center;padding:0 var(--trigger-padding-x);background:var(--trigger-addon-bg);border-right:1px solid var(--trigger-addon-border-color);font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap}sd-select-v2-trigger .sd-select-v2-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-v2-trigger .sd-select-v2-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-trigger .sd-select-v2-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-v2-trigger .sd-select-v2-trigger__icon--open{transform:rotate(180deg)}`;
+const sdSelectV2TriggerCss = () => `sd-select-v2-trigger{display:block;width:100%;height:100%}sd-select-v2-trigger .sd-select-v2-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-v2-trigger .sd-select-v2-trigger--disabled{cursor:not-allowed}sd-select-v2-trigger .sd-select-v2-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-v2-trigger .sd-select-v2-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-trigger .sd-select-v2-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-v2-trigger .sd-select-v2-trigger__icon--open{transform:rotate(180deg)}`;
 
 const SdSelectV2Trigger = class {
     constructor(hostRef) {
@@ -148,7 +148,6 @@ const SdSelectV2Trigger = class {
     placeholder = '선택';
     disabled = false;
     isOpen = false;
-    addonLabel = '';
     triggerClick;
     handleClick = () => {
         if (this.disabled)
@@ -169,16 +168,12 @@ const SdSelectV2Trigger = class {
                     ? sdSelectV2_config.SELECT_COLORS.text.default
                     : sdSelectV2_config.SELECT_COLORS.icon.default,
             '--trigger-icon-color': this.disabled ? sdSelectV2_config.SELECT_COLORS.icon.disabled : sdSelectV2_config.SELECT_COLORS.icon.default,
-            '--trigger-addon-bg': sdSelectV2_config.SELECT_COLORS.addonLabel.bg,
-            '--trigger-addon-border-color': this.disabled
-                ? sdSelectV2_config.SELECT_COLORS.addonLabel.border.disabled
-                : sdSelectV2_config.SELECT_COLORS.addonLabel.border.default,
         };
-        return (index.h("div", { key: '00f76c08c517d52499f1c75315ba1d9b0f7f6a06', class: {
+        return (index.h("div", { key: '4fe2634aee7071ed48348b19dc367b1af88fd6d9', class: {
                 'sd-select-v2-trigger': true,
                 'sd-select-v2-trigger--open': this.isOpen,
                 'sd-select-v2-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.addonLabel && (index.h("div", { key: 'bca73972b68ae98abc92cb882f65ef5622fc6d49', class: "sd-select-v2-trigger__addon" }, this.addonLabel)), index.h("div", { key: 'ae66f445590c28064b8cdf0d4048c1c009759291', class: "sd-select-v2-trigger__content" }, index.h("span", { key: 'e08841d7f17a24142f652d3929017786c37ad486', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: '5e4ea15d1ec3e066daff92ecf012087789ba7b87', name: "arrowDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick }, index.h("div", { key: 'e0f71cdd91c6e04ebe5543fb2bc87d7331735da6', class: "sd-select-v2-trigger__content" }, index.h("span", { key: '3abfbc0541569c68870addc16a7d3439d7189ab5', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: '8fcb187f67be75cf03c0f0bde42121cba0b16a47', name: "arrowDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-v2-trigger__icon': true,
                 'sd-select-v2-trigger__icon--open': this.isOpen,
             } }))));

package/dist/cjs/sd-select-v2.cjs.entry.js

@@ -77,7 +77,7 @@ const SdSelectV2 = class {
         return found?.label ?? '';
     }
     flattenOptions(options) {
-        return options.flatMap(o => o.children ? this.flattenOptions(o.children) : [o]);
+        return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
     }
     collectLeaves(option) {
         if (!option.children)
@@ -160,8 +160,8 @@ const SdSelectV2 = class {
             this.isOpen = true;
         }
     };
-    emitUpdate(value, option) {
-        this.update.emit(this.emitValue ? value : { value, option });
+    emitUpdate(value) {
+        this.update.emit(value);
     }
     handleOptionSelect = (option) => {
         if (this.isMulti) {
@@ -169,7 +169,7 @@ const SdSelectV2 = class {
         }
         else {
             this.value = this.emitValue ? option.value : option;
-            this.emitUpdate(this.value, option);
+            this.emitUpdate(this.value);
             this.closeDropdown();
         }
     };
@@ -191,7 +191,7 @@ const SdSelectV2 = class {
                 newSelected = [...selected, ...toAdd];
             }
             this.value = this.toMultiValue(newSelected);
-            this.emitUpdate(this.value, newSelected);
+            this.emitUpdate(this.value);
         }
         else {
             const exists = selected.some(s => s.value === option.value);
@@ -199,7 +199,7 @@ const SdSelectV2 = class {
                 ? selected.filter(s => s.value !== option.value)
                 : [...selected, option];
             this.value = this.toMultiValue(newSelected);
-            this.emitUpdate(this.value, newSelected);
+            this.emitUpdate(this.value);
         }
     }
     connectedCallback() {
@@ -215,9 +215,20 @@ const SdSelectV2 = class {
             open: this.isOpen,
             parentRef: this.triggerRef,
             viewportPadding: SdSelectV2.VIEWPORT_PADDING,
-            onSdClose: () => { this.closeDropdown(); },
+            onSdClose: () => {
+                this.closeDropdown();
+            },
         };
-        return (index.h("sd-field", { key: 'e87b15f9a6698de2ea29104540c8864f3cdb2b3c', name: this.fieldName || this.internalName, label: this.label, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => { this.hovered = true; }, onMouseLeave: () => { this.hovered = false; }, style: { width: /^\d+$/.test(this.width) ? `${this.width}px` : this.width, minWidth: '80px' } }, index.h("div", { key: '06762f1ec63d1a7a5a52a3fb80bdd22deb2d5447', class: "sd-select-v2", ref: el => { this.triggerRef = el; } }, index.h("sd-select-v2-trigger", { key: 'ec9a3721ff4f6fb3c762728f7ee339caab3486ab', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, addonLabel: this.addonLabel, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '57c0e77f7f55b98c0df60028aa7fc52bb0575925', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'acc04cc0ed76920a7bbb95f3b61936cd0b415c61', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+        return (index.h("sd-field", { key: '4e3e1aa95a4e566948bf63526763cf0125fc6564', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+                this.hovered = true;
+            }, onMouseLeave: () => {
+                this.hovered = false;
+            }, style: {
+                width: /^\d+$/.test(this.width) ? `${this.width}px` : this.width,
+                minWidth: '80px',
+            } }, index.h("div", { key: '661fd9580419ef011386750aa1356b4ab1f19fed', class: "sd-select-v2", ref: el => {
+                this.triggerRef = el;
+            } }, index.h("sd-select-v2-trigger", { key: '5d267da7bc6c0b2cf0031416f541dad3cd1cf861', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'd5a8edf2cc94d9271bc4369022ffe3801650dbd4', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'c1051423145b1a9aaea420635b3ae596d5983011', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/cjs/{sd-select-v2.config-DedHbMz4.js → sd-select-v2.config-DZrPJ6OS.js}

@@ -14,13 +14,6 @@ const select = {
 	text: {
 		"default": "#222222",
 		disabled: "#888888"
-	},
-	addonLabel: {
-		bg: "#F6F6F6",
-		border: {
-			"default": "#AAAAAA",
-			disabled: "#CCCCCC"
-		}
 	}};
 var selectTokens = {
 	select: select
@@ -87,13 +80,6 @@ const SELECT_COLORS = {
         default: selectTokens.select.text.default,
         disabled: selectTokens.select.text.disabled,
     },
-    addonLabel: {
-        bg: selectTokens.select.addonLabel.bg,
-        border: {
-            default: selectTokens.select.addonLabel.border.default,
-            disabled: selectTokens.select.addonLabel.border.disabled,
-        },
-    },
 };
 // ── ListItem Tokens ──
 const LIST_ITEM_LAYOUT = {

package/dist/cjs/system-lN7yOMPF.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const size = {
+	field: {
+		icon: "12"}
+};
+const color = {
+	bg: {
+		accent: {
+			"default": "#0075FF"}},
+	content: {
+		secondary: "#555555",
+		inverse: "#FFFFFF"
+	}};
+var systemTokens = {
+	size: size,
+	color: color
+};
+
+exports.systemTokens = systemTokens;

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

@@ -13,7 +13,7 @@ export class SdConfirmModal {
     mainButtonName;
     mainButtonLabel = '확인';
     subButtonLabel = '';
-    tagPreset;
+    tagPreset = 'square_sm_grey';
     tagLabel = '';
     slotLabel = '';
     tagContents;
@@ -49,7 +49,7 @@ export class SdConfirmModal {
         return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.type];
     }
     get hasTagContent() {
-        return !!(this.tagLabel && this.tagPreset);
+        return !!(this.tagLabel || this.slotLabel);
     }
     get showContentBox() {
         return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
@@ -66,9 +66,9 @@ export class SdConfirmModal {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (h("div", { key: '79b2bc6c82470f18097f709af199379b7f9c33e9', class: "sd-confirm-modal" }, h("sd-icon", { key: '20d09afc087d1f1d293295dfda2b7c0b65fca032', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), h("sd-icon", { key: '7ef48200946dceef27e32bf51e2e57ee7db9e5c8', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor }), h("h2", { key: '7937da9ba581a59b6d33cef5c63ccaf01714cc71', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'ded09b7f81f990fd5b4ce7bb78eebf4578012b41', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '25b0ad2313003f0fa5a119d63e80d1a96e1af5f5', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '51d76d5923a384ac82d1e4a463981ab25655037d', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '6fc7e6c41e74e44c1eb6228375a8230ffa46dab5', class: "sd-confirm-modal" }, h("sd-icon", { key: '79e901efb1b32fdd8d7be3bd8f33eb2d606cd25c', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), h("sd-icon", { key: '8d80711f1ddea567a388b0ad7c76608f0d794fde', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor }), h("h2", { key: '47dcfe8774e2d14d4edc8d1c23fff413146119e6', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'fb18833bd9f5cb858f2f5b05b7b45d5e0f3cdb72', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '9d158176578cb4374fe1ca37b62b4d61e81df6a1', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '4f781266ecdd43ac51195e1ee473d67d2bcff681', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.hasTagContent && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '8ef574ff752ccee7ba28cb4824fc7968bb86b344', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: 'bd5e3dc0bd36c33a7b47ce328121427d44d53a86', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'ff8c7487883f2a4c740baa8966e641975bc4ba14', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: '176cfe2404deb3d57e4a87206a339f797536b51c', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '04baced447a0cf11406df52b734f73ea39ff00d2', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '7054a3388d93610b21152c4c3df34445b7b64cdd', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '25fdec9094700beaf4d6fa0dee15920d6c3c294a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: '7611e5b0a187b1588026308220b09e3239f59463', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {
@@ -257,7 +257,7 @@ export class SdConfirmModal {
                 "mutable": false,
                 "complexType": {
                     "original": "TagName",
-                    "resolved": "\"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_green\" | \"pill_md_grey\" | \"pill_md_indigo\" | \"pill_md_orange\" | \"pill_md_red\" | \"pill_md_yellow\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_green\" | \"pill_sm_grey\" | \"pill_sm_indigo\" | \"pill_sm_orange\" | \"pill_sm_red\" | \"pill_sm_yellow\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_green\" | \"pill_xs_grey\" | \"pill_xs_indigo\" | \"pill_xs_orange\" | \"pill_xs_red\" | \"pill_xs_yellow\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_green\" | \"square_md_grey\" | \"square_md_indigo\" | \"square_md_orange\" | \"square_md_red\" | \"square_md_yellow\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_green\" | \"square_sm_grey\" | \"square_sm_indigo\" | \"square_sm_orange\" | \"square_sm_red\" | \"square_sm_yellow\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_green\" | \"square_xs_grey\" | \"square_xs_indigo\" | \"square_xs_orange\" | \"square_xs_red\" | \"square_xs_yellow\" | undefined",
+                    "resolved": "\"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_green\" | \"pill_md_grey\" | \"pill_md_indigo\" | \"pill_md_orange\" | \"pill_md_red\" | \"pill_md_yellow\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_green\" | \"pill_sm_grey\" | \"pill_sm_indigo\" | \"pill_sm_orange\" | \"pill_sm_red\" | \"pill_sm_yellow\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_green\" | \"pill_xs_grey\" | \"pill_xs_indigo\" | \"pill_xs_orange\" | \"pill_xs_red\" | \"pill_xs_yellow\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_green\" | \"square_md_grey\" | \"square_md_indigo\" | \"square_md_orange\" | \"square_md_red\" | \"square_md_yellow\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_green\" | \"square_sm_grey\" | \"square_sm_indigo\" | \"square_sm_orange\" | \"square_sm_red\" | \"square_sm_yellow\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_green\" | \"square_xs_grey\" | \"square_xs_indigo\" | \"square_xs_orange\" | \"square_xs_red\" | \"square_xs_yellow\"",
                     "references": {
                         "TagName": {
                             "location": "import",
@@ -268,7 +268,7 @@ export class SdConfirmModal {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -276,7 +276,8 @@ export class SdConfirmModal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "tag-preset"
+                "attribute": "tag-preset",
+                "defaultValue": "'square_sm_grey'"
             },
             "tagLabel": {
                 "type": "string",

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

@@ -27,7 +27,7 @@ export class SdDatePicker {
         this.viewChange.emit(e.detail);
     };
     render() {
-        return (h("div", { key: '9f1e5b391dec4623e6f628449a459ab1a6f6ec7d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '5448efd4117535e96d1273395571e12bdf3063ea', 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: '97191fcbf8d9b1af8553ad867b38a189c480c6d8', 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: '945477bd6ef69263a9cefae982474d6889dd8d58', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '270188ccf5d174be496d31abcf9d8570e37a5ff0', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'f9d50e345744d0ce127028edba60ba4c17dba372', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
+        return (h("div", { key: '9f1e5b391dec4623e6f628449a459ab1a6f6ec7d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '8473fc052a8e61b1b403328046b984b858a69ccd', ref: el => (this.inputEl = el), value: this.value, addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'ccc4ac16bcb3e340e574d1098d229d93bba32671', 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: '9b85074b30fc5d6e8204c1e815fe325871e8205a', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'fff4a6d1d2b1c0923b74abcf453a32829ee5865a', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'f157822fca3dffb9fbbaa05e9d9ba67ba6a440bb', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
     }
     static get is() { return "sd-date-picker"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js

@@ -161,13 +161,13 @@ export class SdDateRangePicker {
         return (h("div", { key: 'd76c5830570b080fe07fc01e9a3ea8f09ec1bf40', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, h("sd-input", { key: '7f3683a35f770adb9a1539cbe9104fb06d5014d9', 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: 'b8dea54c60be95b925de1ba755bd1cad6bd844d9', 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: '3d0ff67c8f63d212543404d38d7ddfb553be05f8', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'f0f4f9ccd14f8a07c5ffad002da8e02d8dfb5f38', class: "sd-date-range-picker__menu" }, h("div", { key: '6f9363ff49c729138a0495d068a78102487bed27', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '3766e1aef6555d489cd38c067314ed9fa4ce49f5', type: "button", name: "prev", title: "Previous", onClick: () => {
+            } }, 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() }, 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 && (h("sd-portal", { key: 'f11baac3755a432b5c379a1b5a26590341136d68', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'c0cbd599dd4fac9970f3aa9bd84594fffb394533', class: "sd-date-range-picker__menu" }, h("div", { key: 'caaaa777a14f77d421b5d547ee45d71731390f74', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, 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 });
-            } }, h("sd-icon", { key: 'd824295817a8bba3a03bf6bfbb5f1f86b4fca84b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'fc2e01affb1605d5f9953e61f680cc2d35238f82', class: "header-label" }, this.prevYear), h("button", { key: '2b26023f4b2ea2aea17fe9b582363080a8203b08', type: "button", name: "next", title: "Next", onClick: () => {
+            } }, h("sd-icon", { key: '19a1d47598e047faa63ad230e5470421e71ecc66', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '8f6d4100f1de0b5c830cc2b7cf1479a7e87f77f5', class: "header-label" }, this.prevYear), 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 });
-            } }, h("sd-icon", { key: 'dd16365c56efd6d017727341737e448f998d1229', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '68a2c1a793d8ed74cfc9fbe8b840004a0a88bb3d', 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-icon", { key: '6d6faeb9a890643e8b4b79a40d5c71a4a0e488f6', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'a959a9309a6a6fe17f3cf4b813c865d0b0470722', 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)) }))))))))))))));
     }

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

@@ -33,7 +33,7 @@ sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control {
 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);
+  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;
@@ -47,20 +47,21 @@ sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text {
 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;
+sd-field .sd-field--has-addon .sd-field__control .sd-field__addon {
   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;
+  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-height);
+  height: var(--sd-system-size-field-sm-height);
   display: flex;
   align-items: center;
   flex-flow: row nowrap;
@@ -77,13 +78,9 @@ sd-field .sd-field__wrapper .sd-field__control {
   display: flex;
   flex: 1;
   border: 1px solid var(--sd-system-color-field-border-default);
-  border-radius: var(--sd-system-radius-field-default);
+  border-radius: var(--sd-system-radius-field-sm);
   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;
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import fieldTokens from "../../tokens/generated/component.field.json";
 const FORM_PARENT_TAGS = [
     'sd-select',
     'sd-select-multiple',
@@ -19,7 +20,7 @@ export class SdField {
     status;
     // props - label
     label = '';
-    insideLabel = false;
+    addonLabel = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -115,20 +116,32 @@ export class SdField {
         }
     }
     render() {
-        return (h("div", { key: 'a6b7771294f15396f8c59c5f39a461c43a69d0af', 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 (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,
-            } }, h("div", { key: 'e8da3299b3797130544b03c2ec835f0ae609b262', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '03bdbb8604468fde4c643418a67951fca6d73c70', class: {
+            }, style: addonCssVars }, h("div", { key: '7399b420af3adf54f3a1c7c3257e85453e17a9a1', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'db4915376244d14cfd63fcd07258de2c7d0e4c81', class: {
                 'sd-field__control': true,
-                'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, h("slot", { key: '1e3e62eb9184422a867730568397eebd1e777a41' }))), this.errorMsg && h("div", { key: 'cace55bf9fec37d973068b40a681f6167dc03ebd', class: "sd-field__error-message" }, this.errorMsg)));
+                'sd-field__control--has-addon': !!addon,
+            } }, addon && (h("div", { key: 'f1dde4b40f69fd14a625ff93146b0837d02b2a78', class: "sd-field__addon" }, addon)), h("slot", { key: '44d3d67efa90d71eb9868de9a8a7fcdd373dfff8' }))), this.errorMsg && h("div", { key: '2923e6fd9be55fe20489e7b1b164afa719d86dfa', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
             return null;
-        return (h("label", { class: { 'sd-field__label': true, 'sd-field__label-inside': this.insideLabel } }, this.icon && (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" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, h("div", { slot: "content" }, this.labelTooltip)))));
+        return (h("label", { class: "sd-field__label" }, this.icon && (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" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, h("div", { slot: "content" }, this.labelTooltip)))));
     }
     static get is() { return "sd-field"; }
     static get originalStyleUrls() {
@@ -307,12 +320,12 @@ export class SdField {
                 "attribute": "label",
                 "defaultValue": "''"
             },
-            "insideLabel": {
-                "type": "boolean",
+            "addonLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -324,8 +337,8 @@ export class SdField {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "inside-label",
-                "defaultValue": "false"
+                "attribute": "addon-label",
+                "defaultValue": "''"
             },
             "icon": {
                 "type": "unknown",

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

@@ -91,15 +91,15 @@ export class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: '598e284933fe6dbcbd1a1f77a8f530aa22be5456', class: {
+        return (h("div", { key: 'f1a0f3eaf06618eb5e4c08f465425eeb969fffaa', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '3f84b668c107219a3acecb32c8d473f12c162e3f', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: '0fcc77f108d858f0ede5043c4da71988e68d8bd0', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '5aeb75690a1922d765e19ada43cf7ab034f79979', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '759217d5121c7b97dab6c70516efbf79b836884e', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: '95f94370b7b64e16220b7e4a63d4613790bb6e28', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '1bae1466b85d68719bd558a67c64e86c6070b9d0', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '1da963ffaded05153eb72803b3ca4127e82b7386', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'd4fdd2e2ed990c17c35eca0164f93f3323ba728c', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: 'd45e9a39d8c2661f8e92bd7760c36b170c1a76c0', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '8bcd7f87363167c482f3b99d931443491eaa7bbe', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {

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

@@ -144,7 +144,7 @@ export class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'f2000891d7d3bd71982f591bf953d1421f67fb5e' });
+        return h("slot", { key: 'a49df03bd324a4d37ac077881c0df71603cd3c8f' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -47,9 +47,9 @@ export class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h("div", { key: '6160f0e15482053eadd72d57a15f3396541b083a', class: "sd-guide", style: {
+        return (h("div", { key: '9dc36025eb3c7571bda1eefaee5dafd1f040ff30', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: 'cec37bacab4a2f2e932db6e55674d63cb4203ffd', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: 'be8e6a105b6cadbdccabb76d48c8077957da3a37', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '321c6fd059d24d632b434abc77e19dfb552756a0', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '90e051c0c7609ba0b9cc5e654aba8d806b278b8a', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '58712e7346d7482d6495394e981df5bfc42e1cdc', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '55e4711ee0bee9a4fd11280aacee78a41e613f5b', class: "sd-guide__popup__header" }, h("sd-icon", { key: '461cea2bab8c257d192623068793af58f821d7c9', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '0240dc09042adef7da4c6c57f888e7e4923c595e', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '906c5ac6ef8532482014478d360bdf892764acb0', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, h("sd-button", { key: '8b64096d65f427d62b783903ed58d8569a8f60c1', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '255c720a0b9fe59e55bd53bd8463a18586b311c0', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '0b367183b33c6299afd7525b0ee09f342d1f3a53', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '2c8f947b3e127b968a62ad5965a040ae3f915484', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '856eba0563552527573e778cf26102a5bc47750c', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '4741f95d5b63475bafc6cc3cd78f675c68ea1dd7', class: "sd-guide__popup__header" }, h("sd-icon", { key: '1b2a1303d08fe08b362300a0565ded6bff897159', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '062bf0c82c7330cc93301d757316d6e691871c86', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'e2a239b690587639422d5d7a8dfeff2682198d27', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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

@@ -25,7 +25,7 @@ export class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '8897b6261f767e2e43a312bd0c828bb018bb79e4', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'fdd8cfaca6eb8ef7407a92a7fe0fb48468731cbf', color: this.resolvedColor })));
+        return (h("i", { key: '62de720d781da34b7939d1ed6c3260dba41f3bd2', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '5b4d068ad7db78ca7faee90e3712d383c9db3c49', color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get originalStyleUrls() {