@sellmate/design-system 1.32.0 → 1.33.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cg7X15Hq.js');
+var index = require('./index-PIjvNamO.js');
 
 const tab = {
 	main: {
@@ -207,7 +207,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'c88c2d10181fd02076ac9c0ecdb6d3e95bd727c3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '814a74aa2e17e22e2c8ea8fbd22be4505940e2b0', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {

package/dist/cjs/sd-text-link.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cg7X15Hq.js');
+var index = require('./index-PIjvNamO.js');
 
 const textLink = {
 	sm: {
@@ -173,7 +173,7 @@ const SdTextLink = class {
         };
         const tooltipText = (this.tooltipText ?? '').trim();
         const hasTooltip = tooltipText.length > 0;
-        return (index.h("span", { key: '363829c6d53fc3df03dee7ddd290ca078c255039', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h("span", { key: '93860b9f84f8234a39b47ce75c9f9a3d4ac0088a', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -181,13 +181,13 @@ const SdTextLink = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (index.h("sd-portal", { key: '4dcb8ca39f7b9627b5f77885c0823848d0aa5a5f', parentRef: this.hostEl, open: true, offset: [this.hostEl.offsetWidth / 2, 4], placement: "top" }, index.h("div", { key: '7bbcabbd9d9bb3594d8c4817dbbb922018bbbd19', class: "sd-text-link__tooltip-inner", "aria-hidden": "true" }, index.h("sd-tag", { key: '313c23dc9caf81d885ebf288c475ebe01bd24515', name: "square_xs_grey", label: tooltipText })))), this.icon && (index.h("sd-icon", { key: '2668c579bc22547b542ca2045f9af0fad25a5ee7', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '28246109bab90175498e841ecb02ac4a53a992b8', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (index.h("span", { key: 'c157788957cbba17a1411ebb329897fc6524171d', class: "sd-text-link__arrow", style: {
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (index.h("sd-portal", { key: '13fb262c32c6d915ed1e8b18bde36583ab474cf9', parentRef: this.hostEl, open: true, offset: [this.hostEl.offsetWidth / 2, 4], placement: "top" }, index.h("div", { key: '6b142c5005d96de09c28a85787277e11d9d97166', class: "sd-text-link__tooltip-inner", "aria-hidden": "true" }, index.h("sd-tag", { key: '488b146e3bb668b8ae0e806f33ec4fbd59015b06', name: "square_xs_grey", label: tooltipText })))), this.icon && (index.h("sd-icon", { key: '95d09755d74b541b93d76f87889b28a9e1cf06d5', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'db7e9655587951dcb9f614dd8e8b49a7a2a9de2c', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (index.h("span", { key: '5b97b910f0e5e650712a1b3ee4c1bcdf701049eb', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 height: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: 'b74ca3398a1dd74ac5a9f7a16c872d313882fd4d', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: 'b4407d744efb69994b18f7eaa61bd69be6773f82', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

package/dist/cjs/sd-time-picker-selector.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Cg7X15Hq.js');
-var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
-require('./component.field-C7it8cZm.js');
+var index = require('./index-PIjvNamO.js');
+var sdTimePicker_config = require('./sd-time-picker.config-BR3hVQiH.js');
+require('./component.field-TjxaMQMn.js');
 
 const sdTimePickerSelectorCss = () => `sd-time-picker-selector{display:block}sd-time-picker-selector .sd-time-picker-selector{display:flex;flex-direction:column;align-items:stretch;justify-content:center;overflow:hidden;background:var(--selector-bg);border-radius:var(--selector-radius);box-shadow:4px 8px 16px -4px rgba(34, 34, 34, 0.1), 0 0 24px -6px rgba(34, 34, 34, 0.12)}sd-time-picker-selector .sd-time-picker-selector__meridiem{display:flex;align-items:center;justify-content:center;padding:var(--selector-section-padding-y) var(--selector-section-padding-x);background:var(--selector-bg)}sd-time-picker-selector .sd-time-picker-selector__meridiem-group{display:flex;isolation:isolate}sd-time-picker-selector .sd-time-picker-selector__meridiem-button{width:61px;height:28px;border:1px solid #ccc;background:#fff;color:#555;font-size:12px;line-height:20px;font-weight:500;cursor:pointer}sd-time-picker-selector .sd-time-picker-selector__meridiem-button--first{border-radius:4px 0 0 4px;margin-right:-1px}sd-time-picker-selector .sd-time-picker-selector__meridiem-button--end{border-radius:0 4px 4px 0}sd-time-picker-selector .sd-time-picker-selector__meridiem-button--selected{z-index:1;border-color:#0075ff;color:#0075ff}sd-time-picker-selector .sd-time-picker-selector__divider{height:1px;width:100%;background:#e1e1e1}sd-time-picker-selector .sd-time-picker-selector__time{display:flex;align-items:center;justify-content:center;gap:var(--selector-time-gap);padding:var(--selector-section-padding-y) var(--selector-section-padding-x);background:var(--selector-bg)}sd-time-picker-selector .sd-time-picker-selector__column{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--selector-time-column-gap)}sd-time-picker-selector .sd-time-picker-selector__input{width:var(--selector-input-width);height:28px;box-sizing:border-box;border:1px solid #aaa;border-radius:4px;background:#fff;color:#222;font-size:12px;line-height:20px;text-align:center;outline:none}sd-time-picker-selector .sd-time-picker-selector__colon{width:var(--selector-colon-size);color:#555;font-size:16px;line-height:16px;text-align:center}`;
 
@@ -166,7 +166,7 @@ const SdTimePickerSelector = class {
             '--selector-input-width': `${sdTimePicker_config.TIMEPICKER_SELECTOR.inputWidth}px`,
             '--selector-colon-size': `${sdTimePicker_config.TIMEPICKER_SELECTOR.colonSize}px`,
         };
-        return (index.h("div", { key: '9bf6683c63cf784bba552872b00b53a19e7bd77d', class: "sd-time-picker-selector", style: cssVars }, this.useMeridiem && (index.h("div", { key: '096e30217c77ab8faf305965528f97026eefee85', class: "sd-time-picker-selector__meridiem" }, index.h("div", { key: '4931f8e17bfb1cb356e1d713dfdf1635ced0429a', class: "sd-time-picker-selector__meridiem-group" }, this.renderMeridiemButton('오전', 'AM', 'first'), this.renderMeridiemButton('오후', 'PM', 'end')))), this.useMeridiem && index.h("div", { key: 'a69fcd7379092069faaa556e7dc6649c46072314', class: "sd-time-picker-selector__divider" }), index.h("div", { key: '620e20c888b254533c34d626eac5012456b76052', class: "sd-time-picker-selector__time" }, this.renderColumn('hour'), index.h("span", { key: '483fc0afbbaf8faae65012bcead48a04bce6b446', class: "sd-time-picker-selector__colon" }, ":"), this.renderColumn('minute'))));
+        return (index.h("div", { key: '690a2ee3a338498102444cd3ffb2442e84d1e5c5', class: "sd-time-picker-selector", style: cssVars }, this.useMeridiem && (index.h("div", { key: '29acf35f8b8081f074dd081762e798247da1ca0b', class: "sd-time-picker-selector__meridiem" }, index.h("div", { key: 'b115a20d0214e1180c17c59f3a8aad3b3d730466', class: "sd-time-picker-selector__meridiem-group" }, this.renderMeridiemButton('오전', 'AM', 'first'), this.renderMeridiemButton('오후', 'PM', 'end')))), this.useMeridiem && index.h("div", { key: '2a3c9f4b16521af48544fb430a2572b066a20647', class: "sd-time-picker-selector__divider" }), index.h("div", { key: '46e80292e25405564861cd75fdfc661fba93a5b1', class: "sd-time-picker-selector__time" }, this.renderColumn('hour'), index.h("span", { key: '48629faacd39b228deb0b29647500d3c5667d941', class: "sd-time-picker-selector__colon" }, ":"), this.renderColumn('minute'))));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-time-picker-trigger.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Cg7X15Hq.js');
-var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
-require('./component.field-C7it8cZm.js');
+var index = require('./index-PIjvNamO.js');
+var sdTimePicker_config = require('./sd-time-picker.config-BR3hVQiH.js');
+require('./component.field-TjxaMQMn.js');
 
 const sdTimePickerTriggerCss = () => `sd-time-picker-trigger{display:block;width:100%;height:100%}sd-time-picker-trigger .sd-time-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-time-picker-trigger .sd-time-picker-trigger--disabled{cursor:not-allowed}sd-time-picker-trigger .sd-time-picker-trigger__icon,sd-time-picker-trigger .sd-time-picker-trigger__clear{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-time-picker-trigger .sd-time-picker-trigger__text{flex:1;min-width:var(--trigger-text-min-width, 80px);font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
 
@@ -59,7 +59,7 @@ const SdTimePickerTrigger = class {
                 ? sdTimePicker_config.TIMEPICKER_COLORS.icon.disabled
                 : sdTimePicker_config.TIMEPICKER_COLORS.icon.default,
         };
-        return (index.h("div", { key: '4cd9086e21a7e7fedb6601c163dcf9c5c8f374d1', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h("div", { key: '3671871d1abb524d7e76eaf0e902a1081d340ebb', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-time-picker-trigger': true,
                 'sd-time-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -67,7 +67,7 @@ const SdTimePickerTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, index.h("sd-icon", { key: 'c38c13b3dc8c072430bb5b40765b96582696e04c', name: "clockOutline", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-time-picker-trigger__icon" }), index.h("span", { key: '245e636a0645d97c825a44607516d8821cc533f9', class: "sd-time-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder), this.clearable && hasValue && !this.disabled && (index.h("sd-ghost-button", { key: 'fa740470bf8b798fcf0863ba9e7822e496e8e841', class: "sd-time-picker-trigger__clear", icon: "close", size: "xs", ariaLabel: "\uC2DC\uAC04 \uC9C0\uC6B0\uAE30", onSdClick: this.handleClear }))));
+            } }, index.h("sd-icon", { key: 'a522d81a6af432b758a16f785ca8b96110589ae6', name: "clockOutline", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-time-picker-trigger__icon" }), index.h("span", { key: '3c4f96441cb01e9e94ae4e5294fb032e160bcde9', class: "sd-time-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder), this.clearable && hasValue && !this.disabled && (index.h("sd-ghost-button", { key: '7133f68a7c73e12e4aaa1f49652c06836ed2d465', class: "sd-time-picker-trigger__clear", icon: "close", size: "xs", ariaLabel: "\uC2DC\uAC04 \uC9C0\uC6B0\uAE30", onSdClick: this.handleClear }))));
     }
 };
 SdTimePickerTrigger.style = sdTimePickerTriggerCss();

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Cg7X15Hq.js');
+var index = require('./index-PIjvNamO.js');
 var index$1 = require('./index-BUvXpPc3.js');
-var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
-require('./component.field-C7it8cZm.js');
+var sdTimePicker_config = require('./sd-time-picker.config-BR3hVQiH.js');
+require('./component.field-TjxaMQMn.js');
 
 const sdTimePickerCss = () => `sd-time-picker{display:inline-flex}sd-time-picker sd-portal{display:none}sd-time-picker .sd-time-picker{position:relative;min-width:var(--sd-time-picker-min-width);width:100%;height:100%}`;
 
@@ -155,9 +155,9 @@ const SdTimePicker = class {
             '--sd-system-color-field-border-focus': sdTimePicker_config.TIMEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': sdTimePicker_config.TIMEPICKER_COLORS.bg.default,
         };
-        return (index.h("sd-field", { key: '77b2d4c36e19481ccb6a3d0cef288fe9eb902330', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, status: this.status, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '2d25872f4d1253faf85384030de21ef283e0696d', class: "sd-time-picker", ref: el => {
+        return (index.h("sd-field", { key: '4891d77f0e98a9028fff6fcf720144f6d84e527e', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, status: this.status, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '86f2c4975ffb9ce8e9644e0e70fc9386266d6d71', class: "sd-time-picker", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-time-picker-trigger", { key: 'fe4a4611216642bcee5632c2202dec0058cc6898', displayText: sdTimePicker_config.formatTimeDisplay(this.value, this.effectiveUseMeridiem ? 'midday' : 'default'), placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, size: this.size, onSdTriggerClick: this.handleTriggerClick, onSdClear: this.handleClear })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'd2f921b2eee8d3cc33c52c6eb06f24188f18a78a', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-time-picker-selector", { key: 'd53c348ef16a1ddac731a49d0aafe64931007d32', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, onSdUpdate: this.handleSelect })))));
+            } }, index.h("sd-time-picker-trigger", { key: '6df1aa71c8f94ca5191e61c79125c90ff56124d9', displayText: sdTimePicker_config.formatTimeDisplay(this.value, this.effectiveUseMeridiem ? 'midday' : 'default'), placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, size: this.size, onSdTriggerClick: this.handleTriggerClick, onSdClear: this.handleClear })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'ffe406dc3b6e076fea9890ae1433bf11e2a9ca3e', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-time-picker-selector", { key: '523d6e6bb0fb8abf830d29086c7b2e48cbb5bdc9', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, onSdUpdate: this.handleSelect })))));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/cjs/{sd-time-picker.config-C7REB08L.js → sd-time-picker.config-BR3hVQiH.js}

@@ -1,13 +1,26 @@
 'use strict';
 
-var component_field = require('./component.field-C7it8cZm.js');
+var component_field = require('./component.field-TjxaMQMn.js');
 
 const timepicker = {
+	sm: {
+		height: "28",
+		paddingX: "12",
+		gap: "8",
+		icon: "16",
+		radius: "4"
+	},
+	md: {
+		height: "36",
+		paddingX: "16",
+		gap: "12",
+		icon: "20",
+		radius: "6"
+	},
 	border: {
+		width: "1",
 		"default": "#AAAAAA",
-		focus: "#0075FF",
-		width: "1"
-	},
+		focus: "#0075FF"},
 	bg: {
 		"default": "#FFFFFF",
 		disabled: "#E1E1E1"
@@ -22,17 +35,6 @@ const timepicker = {
 	},
 	selector: {
 		bg: "#FFFFFF",
-		range: {
-			heading: {
-				color: "#555555",
-				gap: "16"
-			},
-			paddingXY: "24",
-			panelGap: "24",
-			section: {
-				gap: "12"
-			}
-		},
 		radius: "8",
 		section: {
 			paddingX: "16",
@@ -49,21 +51,18 @@ const timepicker = {
 		},
 		colon: {
 			size: "16"
+		},
+		range: {
+			paddingXY: "24",
+			panelGap: "24",
+			heading: {
+				color: "#555555",
+				gap: "16"
+			},
+			section: {
+				gap: "12"
+			}
 		}
-	},
-	sm: {
-		height: "28",
-		paddingX: "12",
-		gap: "8",
-		icon: "16",
-		radius: "4"
-	},
-	md: {
-		height: "36",
-		paddingX: "16",
-		gap: "12",
-		icon: "20",
-		radius: "6"
 	}
 };
 var timepickerTokens = {

package/dist/cjs/sd-time-range-picker-selector.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Cg7X15Hq.js');
-var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
-require('./component.field-C7it8cZm.js');
+var index = require('./index-PIjvNamO.js');
+var sdTimePicker_config = require('./sd-time-picker.config-BR3hVQiH.js');
+require('./component.field-TjxaMQMn.js');
 
 const sdTimeRangePickerSelectorCss = () => `sd-time-range-picker-selector{display:block}sd-time-range-picker-selector .sd-time-range-picker-selector{display:flex;align-items:flex-start;justify-content:center;gap:var(--selector-range-panel-gap);padding:var(--selector-range-padding);overflow:hidden;background:var(--selector-bg);border-radius:var(--selector-radius);box-shadow:var(--sd-system-shadow-spread-sm-x) var(--sd-system-shadow-spread-sm-y) var(--sd-system-shadow-spread-sm-blur) var(--sd-system-shadow-spread-sm-spread) var(--sd-system-shadow-spread-sm-color), var(--sd-system-shadow-spread-md-x) var(--sd-system-shadow-spread-md-y) var(--sd-system-shadow-spread-md-blur) var(--sd-system-shadow-spread-md-spread) var(--sd-system-shadow-spread-md-color)}sd-time-range-picker-selector .sd-time-range-picker-selector__panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--selector-range-section-gap)}sd-time-range-picker-selector .sd-time-range-picker-selector__heading{display:flex;flex-direction:column;align-items:center;gap:var(--selector-range-heading-gap)}sd-time-range-picker-selector .sd-time-range-picker-selector__heading-text{color:var(--selector-range-heading-color);font-size:12px;line-height:20px;font-weight:700;text-align:center;white-space:nowrap}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-group{display:flex;isolation:isolate}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button{width:61px;height:28px;border:var(--selector-border-width) solid var(--selector-border-default);background:var(--selector-bg);color:var(--selector-range-heading-color);font-size:12px;line-height:20px;font-weight:500;cursor:pointer}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--first{border-radius:4px 0 0 4px;margin-right:-1px}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--end{border-radius:0 4px 4px 0}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--selected{z-index:1;border-color:var(--selector-border-focus);color:var(--selector-border-focus)}sd-time-range-picker-selector .sd-time-range-picker-selector__divider{align-self:stretch;width:1px;background:var(--selector-bg-disabled)}sd-time-range-picker-selector .sd-time-range-picker-selector__time{display:flex;align-items:center;justify-content:center;gap:var(--selector-time-gap);padding:0 16px;background:var(--selector-bg)}sd-time-range-picker-selector .sd-time-range-picker-selector__column{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--selector-time-column-gap)}sd-time-range-picker-selector .sd-time-range-picker-selector__input{width:var(--selector-input-width);height:28px;box-sizing:border-box;border:var(--selector-border-width) solid var(--selector-border-default);border-radius:4px;background:var(--selector-bg);color:var(--selector-text-default);font-size:12px;line-height:20px;text-align:center;outline:none}sd-time-range-picker-selector .sd-time-range-picker-selector__colon{width:var(--selector-colon-size);color:var(--selector-range-heading-color);font-size:16px;line-height:16px;text-align:center}`;
 
@@ -211,7 +211,7 @@ const SdTimeRangePickerSelector = class {
             '--selector-bg-disabled': sdTimePicker_config.TIMEPICKER_COLORS.bg.disabled,
             '--selector-text-default': sdTimePicker_config.TIMEPICKER_COLORS.text.default,
         };
-        return (index.h("div", { key: 'd62a959d611bd9379c0f07cd29cea18cda66b1f6', class: "sd-time-range-picker-selector", style: cssVars }, this.renderPanel('start', '시작 시간'), index.h("div", { key: '23e668d0bae4a16fdc8af3be4a2c40bec2d7f1cd', class: "sd-time-range-picker-selector__divider" }), this.renderPanel('end', '종료 시간')));
+        return (index.h("div", { key: 'eceb5c9016499ae57fe40ec65a9c0066ba6509b1', class: "sd-time-range-picker-selector", style: cssVars }, this.renderPanel('start', '시작 시간'), index.h("div", { key: 'ce5d81d905de10a507fa3dfeda1c98ebbaace906', class: "sd-time-range-picker-selector__divider" }), this.renderPanel('end', '종료 시간')));
     }
 };
 SdTimeRangePickerSelector.style = sdTimeRangePickerSelectorCss();

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Cg7X15Hq.js');
+var index = require('./index-PIjvNamO.js');
 var index$1 = require('./index-BUvXpPc3.js');
-var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
-require('./component.field-C7it8cZm.js');
+var sdTimePicker_config = require('./sd-time-picker.config-BR3hVQiH.js');
+require('./component.field-TjxaMQMn.js');
 
 function getTimeMinutes(value) {
     const { hour, minute } = sdTimePicker_config.parseTimeValue(value);
@@ -183,9 +183,9 @@ const SdTimeRangePicker = class {
             '--sd-system-color-field-border-focus': sdTimePicker_config.TIMEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': sdTimePicker_config.TIMEPICKER_COLORS.bg.default,
         };
-        return (index.h("sd-field", { key: 'b709c0fe129ab899b60aa75e41bc949cb82184d7', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, status: this.status, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '7fffb9bb91a0fa8a8fdce7704c47aea2de0b509a', class: "sd-time-range-picker", ref: el => {
+        return (index.h("sd-field", { key: '4259e2257aa9edccd9c567f57ec18837fa831281', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, status: this.status, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'e1412d82e5eae70bbdb140f6bf06c0867f75c35c', class: "sd-time-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-time-picker-trigger", { key: 'b1f42c77070fc46da93aa66e681ee9504c999d11', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, size: this.size, onSdTriggerClick: this.handleTriggerClick, onSdClear: this.handleClear })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'ad91d531c8326a7e977f8c576e1026c4d6d0115c', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-time-range-picker-selector", { key: '0df138447c01169ea3e0462d012c4917ac7f904b', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, "range-order": this.rangeOrder, onSdUpdate: this.handleSelect })))));
+            } }, index.h("sd-time-picker-trigger", { key: '719492ec16aaba4a05cf97348c6c9179238b6b09', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, size: this.size, onSdTriggerClick: this.handleTriggerClick, onSdClear: this.handleClear })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '13ddc4c3a22661bdc170d47a533e36ada9c431c6', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-time-range-picker-selector", { key: 'e5423e09b2c7282b8c59cfac2ebd9de9c7a3d091', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, "range-order": this.rangeOrder, onSdUpdate: this.handleSelect })))));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/cjs/sd-toast-container.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cg7X15Hq.js');
+var index = require('./index-PIjvNamO.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -243,7 +243,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '166ac21503b08853631fddaed047ab108a99570a', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '7a69bd0ea72cfb94e4e78287f6d6a0ea1a1a60a9', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cg7X15Hq.js');
+var index = require('./index-PIjvNamO.js');
 
 const toast = {
 	icon: "16",
@@ -93,12 +93,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (index.h("div", { key: '5d7511c3fe5a5ef828986ff624af7c52ff087cfa', style: {
+        return (index.h("div", { key: 'c9e3741a53f59d37f2b384379aa6adef9cf3bb4b', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: 'c35b42d7ece2030ed0e27abb0059f9b09c4edb9e', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '015223ab3e9d4296d3782afc0c6cfd60e54289c7', class: "sd-toast__icon" }, index.h("sd-icon", { key: '6d8e5d73fc026df0d8f75439b926bd027ca6a008', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: 'b601081818d66910d9d2f9984bfb9a473237b065', class: "sd-toast__content" }, index.h("span", { key: '6a17766f5a337cbc85179dc310fb400186f35ac6', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '80abceec8d37905073c9a8e43fcdd1a78978b5f6', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '212516f32c46938d405e68dbb156cf139b39ffd8', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '9fd34f93f46d9a5a25ec52e0d164bbcaf4297e2e', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: '6340355a0ffa73765040930cca2e742427d796e2', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '2b2b03b9e7d46a71f7178b4e45f0fe3b383abc49', class: "sd-toast__icon" }, index.h("sd-icon", { key: '641a3f15b31009e81d590ca8dc7318c55c773e22', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: 'ec6396936145b1fb7e1071221de0d67a3415ab77', class: "sd-toast__content" }, index.h("span", { key: '0cc6791d14db783003c1aaefaa32757f39a7f043', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '19989545eb1f2d6f984565314de3da581ef666e4', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '3ca5c3b9d77a04c2c4d70a48641c51053794bd33', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: 'd5daf926f8a23f9d6bbec06cc560afc6c89aa064', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cg7X15Hq.js');
+var index = require('./index-PIjvNamO.js');
 
 const toggle = {
 	height: "28",
@@ -123,7 +123,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: 'f78d58c01b943a5f22ace9cb14e50b0098cc8206', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '8b8d8e09b322a5093c57129f94c49f6951d78df7', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: 'f1e459f54be93de764c504b9719db5f4754c07d9', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: 'b0ab7d28248db1286eaf4da5d93adc1fc93a155c', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{tooltipArrow-CZff77W-.js → tooltipArrow-BUV7X2B8.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cg7X15Hq.js');
+var index = require('./index-PIjvNamO.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/cjs/{useDatePicker-j06ymWZ_.js → useDatePicker-D4fa6SZx.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var sdDatePicker_config = require('./sd-date-picker.config-CgyNxY03.js');
+var sdDatePicker_config = require('./sd-date-picker.config-CvdiwEii.js');
 
 const CALENDAR_LAYOUT = {
     bg: sdDatePicker_config.datepickerTokens.datepicker.calendar.bg,

package/dist/collection/collection-manifest.json

@@ -29,6 +29,7 @@
     "components/sd-field/sd-field.js",
     "components/sd-divider/sd-divider.js",
     "components/sd-dropdown-button/sd-dropdown-button.js",
+    "components/sd-expansion-item/sd-expansion-item.js",
     "components/sd-file-picker/sd-file-picker.js",
     "components/sd-floating-portal/sd-floating-portal.js",
     "components/sd-input/sd-input.js",

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

@@ -7,7 +7,7 @@ export class SdDivider {
         const hostStyle = {
             '--sd-divider-color': DIVIDER_COLORS.default,
         };
-        return (h(Host, { key: '5e25f94dbe34f19280f6952e0a1bfbf4e4816264', style: hostStyle }, h("hr", { key: 'a47f51ba0dfc15819cd5cda169554433b978eb15', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+        return (h(Host, { key: '22df8aed1422f827eb82dbabf044ce2ed8943895', style: hostStyle }, h("hr", { key: '72ce366b0ecb69db905544867990c8fc9580ccf3', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
     }
     static get is() { return "sd-divider"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-expansion-item/sd-expansion-item.config.js

@@ -0,0 +1,2 @@
+import expansionItemTokens from "../../tokens/generated/component.expansionItem.json";
+export const EXPANSION_ITEM = expansionItemTokens.expansionItem;

package/dist/collection/components/sd-expansion-item/sd-expansion-item.css

@@ -0,0 +1,61 @@
+sd-expansion-item {
+  display: block;
+}
+
+.sd-expansion-item {
+  overflow: hidden;
+  background: var(--cmp-expansionItem-title-bg-default, #fff);
+}
+.sd-expansion-item__header {
+  display: flex;
+  width: 100%;
+  min-height: 40px;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sd-expansion-item-gap);
+  padding: var(--sd-expansion-item-padding-y) var(--sd-expansion-item-padding-x);
+  padding-left: calc(var(--sd-expansion-item-padding-x) + var(--sd-expansion-item-indent));
+  border: 0;
+  border-bottom: 0;
+  background: transparent;
+  color: var(--sys-color-fg-primary, #222);
+  font: 700 14px/24px "Pretendard Variable", sans-serif;
+  text-align: left;
+  cursor: pointer;
+}
+.sd-expansion-item__header:hover:not(:disabled) {
+  background: var(--cmp-expansionItem-title-bg-hover, #f9f9f9);
+}
+.sd-expansion-item__header:focus-visible {
+  outline: 2px solid var(--sys-color-border-accent, #0075ff);
+  outline-offset: -2px;
+}
+.sd-expansion-item--expanded .sd-expansion-item__header {
+  border-bottom: 1px solid var(--cmp-expansionItem-title-border, #e1e1e1);
+}
+.sd-expansion-item--dense .sd-expansion-item__header {
+  min-height: 32px;
+}
+.sd-expansion-item--expanded .sd-expansion-item__header {
+  background: var(--cmp-expansionItem-title-bg-expanded, #eff6ff);
+  color: var(--cmp-expansionItem-title-text-expanded, #005cc9);
+}
+.sd-expansion-item--expanded .sd-expansion-item__header:hover:not(:disabled) {
+  background: var(--cmp-expansionItem-title-bg-expanded, #eff6ff);
+}
+.sd-expansion-item--disabled .sd-expansion-item__header {
+  color: var(--sys-color-disabled-text, #888);
+  cursor: not-allowed;
+}
+.sd-expansion-item__body {
+  background: var(--cmp-expansionItem-body-bg, #fff);
+}
+.sd-expansion-item__content {
+  padding: var(--cmp-expansionItem-body-padding, 16px);
+}
+.sd-expansion-item__title {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+}