@sellmate/design-system 1.28.0 → 1.31.0

package/dist/cjs/sd-circle-progress.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-D12oddge.js');
+var index = require('./index-Jr8OU0y9.js');
 var component_progress = require('./component.progress-DimGJZAd.js');
-var system = require('./system-MjrAugX-.js');
+var system = require('./system-B4KkVpu2.js');
 
 const CIRCLE_PROGRESS_LABEL_COLOR = component_progress.progressTokens.progress.color.label;
 const CIRCLE_PROGRESS_PERCENT_ZERO_COLOR = system.systemTokens.color.fg.tertiary;
@@ -30,7 +30,7 @@ const CIRCLE_PROGRESS_RADIUS = 34;
 const CIRCLE_PROGRESS_STROKE_WIDTH = 12;
 const CIRCLE_PROGRESS_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_PROGRESS_RADIUS;
 
-const sdCircleProgressCss = () => `@charset "UTF-8";sd-circle-progress{display:inline-flex;flex-direction:column;align-items:center;gap:8px}sd-circle-progress .sd-circle-progress{width:80px;height:80px}sd-circle-progress .sd-circle-progress__track{stroke:var(--sd-circle-progress-track)}sd-circle-progress .sd-circle-progress__arc{stroke:var(--sd-circle-progress-arc);transform:rotate(-90deg);transform-origin:center center;transition:stroke-dasharray 0.4s linear, stroke-dashoffset 0.4s linear}sd-circle-progress .sd-circle-progress__percent{text-align:center;color:var(--sd-circle-progress-percent-color);font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;font-size:16px;font-weight:700;line-height:26px}sd-circle-progress .sd-circle-progress__label{text-align:center;color:var(--sd-circle-progress-label-color);font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;font-size:12px;font-weight:400;line-height:20px}sd-circle-progress{}sd-circle-progress[inner-value]{position:relative}sd-circle-progress[inner-value] .sd-circle-progress__percent{position:absolute;top:40px;left:50%;transform:translate(-50%, -50%)}sd-circle-progress{}sd-circle-progress[indeterminate] .sd-circle-progress{animation:sd-circle-progress-spin 2s linear infinite;transform-origin:center center}sd-circle-progress[indeterminate] .sd-circle-progress__arc{transform:none;transition:none;animation:sd-circle-progress-spin-path 1.5s ease-in-out infinite}@keyframes sd-circle-progress-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes sd-circle-progress-spin-path{0%{stroke-dasharray:1, 340;stroke-dashoffset:0}50%{stroke-dasharray:151, 340;stroke-dashoffset:-60}100%{stroke-dasharray:151, 340;stroke-dashoffset:-211}}`;
+const sdCircleProgressCss = () => `@charset "UTF-8";sd-circle-progress{display:inline-flex;flex-direction:column;align-items:center;gap:8px}sd-circle-progress .sd-circle-progress{width:80px;height:80px}sd-circle-progress .sd-circle-progress__track{stroke:var(--sd-circle-progress-track)}sd-circle-progress .sd-circle-progress__arc{stroke:var(--sd-circle-progress-arc);transform:rotate(-90deg);transform-origin:center center;transition:stroke-dasharray 0.4s linear, stroke-dashoffset 0.4s linear}sd-circle-progress .sd-circle-progress__percent{text-align:center;color:var(--sd-circle-progress-percent-color);font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;font-size:16px;font-weight:700;line-height:26px}sd-circle-progress .sd-circle-progress__label{text-align:center;color:var(--sd-circle-progress-label-color);font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;font-size:12px;font-weight:400;line-height:20px}sd-circle-progress{}sd-circle-progress[inner-value]{position:relative}sd-circle-progress[inner-value] .sd-circle-progress__percent{position:absolute;top:40px;left:50%;transform:translate(-50%, -50%);line-height:normal}sd-circle-progress{}sd-circle-progress[indeterminate] .sd-circle-progress{animation:sd-circle-progress-spin 2s linear infinite;transform-origin:center center}sd-circle-progress[indeterminate] .sd-circle-progress__arc{transform:none;transition:none;animation:sd-circle-progress-spin-path 1.5s ease-in-out infinite}@keyframes sd-circle-progress-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes sd-circle-progress-spin-path{0%{stroke-dasharray:1, 340;stroke-dashoffset:0}50%{stroke-dasharray:151, 340;stroke-dashoffset:-60}100%{stroke-dasharray:151, 340;stroke-dashoffset:-211}}`;
 
 const SdCircleProgress = class {
     constructor(hostRef) {
@@ -68,7 +68,7 @@ const SdCircleProgress = class {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (index.h(index.Host, { key: '869ec15d8df4b3e240b70599d8ba72618cda4c87', style: hostStyle }, index.h("svg", { key: '446fa350f3c7e225e455f5f6c12b4aab45d20287', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: 'c3555674067f60ab1a1458d789d62fc9bbc8015f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), index.h("circle", { key: '62716c5645d957be08ea0e0818e47edda2c9e471', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (index.h("span", { key: 'b56d75c0c40cb82d4c4c87161913b28063a9d369', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && index.h("span", { key: '65cfb5cd0426c7cbf5ee7aefeaf675471abccaaf', class: "sd-circle-progress__label" }, this.label)));
+        return (index.h(index.Host, { key: '7458f47e0e621f2cead4d72618edcd2bdab4b923', style: hostStyle }, index.h("svg", { key: 'ca0b2b99ac2e1c4a6a51b509fa37292689f4f6ff', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '61d09511593f23d1e88712fa45c341a45e34589d', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), index.h("circle", { key: 'a4875d4001db2ee091a41c0afe7a4afb0062c610', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (index.h("span", { key: 'a49f13b27e1c8ee46370ff0fc7692e7d535ddca3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && index.h("span", { key: '0c76f052dbccb5f2e33511afb5ff5d325e36d697', class: "sd-circle-progress__label" }, this.label)));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D12oddge.js');
+var index = require('./index-Jr8OU0y9.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 var component_modal = require('./component.modal-CrZe2db_.js');
 
@@ -22,7 +22,7 @@ const CONFIRM_MODAL_ICON_COLOR = {
 const TITLE_ICON_SIZE = Number(component_modal.modalTokens.modal.confirm.title.icon);
 const SUB_BUTTON_PRESET = 'neutral_outline_md';
 
-const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:12px;right:12px}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:20px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:40px}`;
+const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:12px;right:12px}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:20px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__option{text-align:center}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:40px}`;
 
 const SdConfirmModal = class {
     constructor(hostRef) {
@@ -32,8 +32,8 @@ const SdConfirmModal = class {
         this.ok = index.createEvent(this, "sdOk", 7);
     }
     get el() { return index.getElement(this); }
-    hasSlottedContent = false;
-    customContentRef;
+    hasTagSlot = false;
+    hasOptionSlot = false;
     slotObserver;
     /** 모달 타입 (아이콘·버튼 색상 결정) */
     type = 'positive';
@@ -51,14 +51,12 @@ const SdConfirmModal = class {
     mainButtonLabel = '확인';
     /** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
     subButtonLabel = '';
-    /** 콘텐츠 박스에 표시할 태그 프리셋 */
+    /** 콘텐츠 박스 tag 슬롯 기본 태그 프리셋 (slot="tag" 미지정 시) */
     tagPreset = 'square_sm_grey';
-    /** 콘텐츠 박스에 표시할 태그 레이블 */
+    /** 콘텐츠 박스 tag 슬롯 기본 태그 레이블 (slot="tag" 미지정 시) */
     tagLabel = '';
-    /** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
+    /** 콘텐츠 박스 option 슬롯 기본 텍스트 (slot="option" 미지정 시) */
     slotLabel = '';
-    /** 콘텐츠 박스에 직접 삽입할 HTMLElement */
-    tagContents;
     /** 닫기 버튼 클릭 시 발생합니다. */
     close;
     /** 취소 버튼 클릭 시 발생합니다. */
@@ -77,17 +75,6 @@ const SdConfirmModal = class {
             characterData: true,
         });
     }
-    componentDidRender() {
-        if (this.customContentRef && this.tagContents instanceof HTMLElement) {
-            if (typeof this.customContentRef.replaceChildren === 'function') {
-                this.customContentRef.replaceChildren(this.tagContents);
-            }
-            else {
-                this.customContentRef.innerHTML = '';
-                this.customContentRef.appendChild(this.tagContents);
-            }
-        }
-    }
     disconnectedCallback() {
         this.slotObserver?.disconnect();
     }
@@ -97,29 +84,39 @@ const SdConfirmModal = class {
     get resolvedMainButton() {
         return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.resolvedType];
     }
-    get hasTagContent() {
-        return ((this.tagLabel !== undefined && this.tagLabel !== '') ||
-            (this.slotLabel !== undefined && this.slotLabel !== ''));
+    /** tag 위치 콘텐츠 박스 표시 여부 (tagLabel fallback 또는 slot="tag") */
+    get showTagBox() {
+        return this.tagLabel !== '' || this.hasTagSlot;
     }
-    get showContentBox() {
-        return this.tagContents != null || this.hasTagContent || this.hasSlottedContent;
+    /** option 위치(bottomMessage 아래) 표시 여부 (slotLabel fallback 또는 slot="option") */
+    get showOption() {
+        return this.slotLabel !== '' || this.hasOptionSlot;
     }
+    /** light-DOM 에 slot="tag" / slot="option" 콘텐츠가 있는지 감지 */
     syncHasSlottedContent() {
-        const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
-            node.classList.contains('sd-confirm-modal')) &&
-            (node.nodeType === Node.ELEMENT_NODE ||
-                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
-        if (hasSlottedContent !== this.hasSlottedContent) {
-            this.hasSlottedContent = hasSlottedContent;
-        }
+        let hasTagSlot = false;
+        let hasOptionSlot = false;
+        Array.from(this.el.children).forEach(node => {
+            if (!(node instanceof HTMLElement))
+                return;
+            if (node.classList.contains('sd-confirm-modal'))
+                return;
+            const slot = node.getAttribute('slot');
+            if (slot === 'tag')
+                hasTagSlot = true;
+            else if (slot === 'option')
+                hasOptionSlot = true;
+        });
+        if (hasTagSlot !== this.hasTagSlot)
+            this.hasTagSlot = hasTagSlot;
+        if (hasOptionSlot !== this.hasOptionSlot)
+            this.hasOptionSlot = hasOptionSlot;
     }
     render() {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (index.h("div", { key: '396bef971efaab6638586fa1a067eae54c1897f4', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: '4716168808371f4515bf763e77198386fc9fe7cf', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '1ab7ca2c5262374a0823a8e5c501758433c25051', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: 'a190f975d27153e4d928c95395f13ecd8ba0667a', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), index.h("div", { key: 'da7821097377b7a9781df87ae40b2439a103ff9b', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: 'ced23315888ad43b3d91b8bb5388b77e517dd52a', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml.sanitizeInlineHtml(msg) }))))), this.showContentBox && (index.h("div", { key: '5bdbe145bdb6639ebe582e7295f413a4b1990c15', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
-                this.customContentRef = el;
-            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (index.h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: 'e99adc95c95be16945407d54833164908aad0b50', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml.sanitizeInlineHtml(msg) })))))), index.h("div", { key: '20a6660323e1d9f4ee096f0c07bf0596f5a2445a', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button", { key: '73141dd6fc6f703bff11e71ca9820cf3e1045466', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button", { key: 'bed2d910b4b35d59897e14222f86f20a7e8c3bde', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+        return (index.h("div", { key: '8d84d72de4a8194100a22c2f19190d35da8ad9d0', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: '8d3c11e01819fc4b3a92ef2c00afab336b12a4d8', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: 'f5013d2753d946a46666c3fc4e7e5ec79ebb5bf3', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: '88ca2b2d80ec9dfe06aa6d9ae4d65a9bf365e52e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), index.h("div", { key: 'ab9ad0c312d4155a5d8985d43c31f4ab11fc9110', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '294bea4d946392e63ec152f4a109e75fd9c5a743', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml.sanitizeInlineHtml(msg) }))))), this.showTagBox && (index.h("div", { key: '6ab23578df59a6c29718087fda729a256f32e725', class: "sd-confirm-modal__content-box" }, index.h("slot", { key: '48c21c001a4608d1b36c4a8feee99d7ee05422c7', name: "tag", onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (index.h("sd-tag", { key: 'fb227ba974fc9b176e90bfa906c212099c23c98b', name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '665429ebae13b9c71e4eeaf372c45dbb98b71aa8', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml.sanitizeInlineHtml(msg) }))))), this.showOption && (index.h("div", { key: '589d730c0952cd6370f96984f2d0e3c9a9fe50e6', class: "sd-confirm-modal__option" }, index.h("slot", { key: '23a57ca4663436aabd4f606246c80d3c3aec1ecf', name: "option", onSlotchange: () => this.syncHasSlottedContent() }, this.slotLabel && (index.h("span", { key: '6dead5dc544f4f1ed68a50d2619a6c10f438ea67', class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), index.h("div", { key: '7156c27678f8f9a6de5afdbeed191a954420f1fa', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button", { key: '02a6b6ffe4218e93ceef0dad349cd122587864df', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button", { key: '6441fda6cebcc24fd48715ed85909b652725788f', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -218,7 +215,7 @@ const SdLoadingModal = class {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (index.h(index.Host, { key: '71bec4b63fc71720dfc10daecab4e63b8fc12b68', style: hostStyle }, index.h("div", { key: '20f67d5f61a7c7150b236ebe13fecb345b5a20be', class: "sd-loading-modal" }, this.resolvedState === 'error' && (index.h("sd-ghost-button", { key: '395097aa0cbf7c277f7669bdc01fe756316ba4a0', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), index.h("div", { key: '6942b24672bf59b7c7f34bab0cce38b3d0e477f7', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (index.h("sd-circle-progress", { value: this.progress })) : (index.h("sd-circle-progress", { indeterminate: true }))) : (index.h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), index.h("div", { key: '5dd0e24f06c8283b1baa7eeadf6547a96ecc784e', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (index.h("p", { class: "sd-loading-modal__message" }, message)))) : (index.h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.showButton && (index.h("div", { key: 'b686ab5f29a9a61520ba5a43f9d214f37c1a90d7', class: "sd-loading-modal__button" }, index.h("sd-button", { key: '2378b8f300538c9aab8775a526104acd6089b580', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (index.h(index.Host, { key: 'c6b6406cc751cfc007f6fbff72580a22b2975c03', style: hostStyle }, index.h("div", { key: '139b7397598768e526275dc8b508a333ba1e6058', class: "sd-loading-modal" }, this.resolvedState === 'error' && (index.h("sd-ghost-button", { key: '098c693d5da0c333fb06309be5371a5e8a6c3016', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), index.h("div", { key: 'f072a17c4c8e47e296cbf52d34414a32efa6aaa1', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (index.h("sd-circle-progress", { value: this.progress })) : (index.h("sd-circle-progress", { indeterminate: true }))) : (index.h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), index.h("div", { key: 'a2c501cfee2181b2a7dda2544e03bf1a709baaf3', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (index.h("p", { class: "sd-loading-modal__message" }, message)))) : (index.h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.showButton && (index.h("div", { key: 'e9d1beef80bf8fa4a0647802ce4a6e023e74bc12', class: "sd-loading-modal__button" }, index.h("sd-button", { key: '63a64f356fc09cbaf56ff715d04c97b208f63945', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();

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

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

package/dist/cjs/{component.datepicker-CUQbDSku.js → sd-date-picker.config-CgyNxY03.js}

@@ -1,5 +1,7 @@
 'use strict';
 
+var component_field = require('./component.field-C7it8cZm.js');
+
 const datepicker = {
 	sm: {
 		height: "28",
@@ -110,6 +112,32 @@ const datepicker = {
 			group: {
 				gap: "12"
 			}
+		},
+		time: {
+			bg: {
+				"default": "#F9F9F9",
+				selected: "#F5FAFF"
+			},
+			date: {
+				label: "#222222",
+				unit: "#888888",
+				gap: "6"
+			},
+			radius: "8",
+			paddingX: "16",
+			paddingY: "12",
+			gap: "12",
+			section: {
+				gap: "12"
+			},
+			unit: {
+				gap: "2"
+			},
+			typography: {
+				fontWeight: "500",
+				fontSize: "12",
+				lineHeight: "20"
+			}
 		}
 	}
 };
@@ -117,4 +145,40 @@ var datepickerTokens = {
 	datepicker: datepicker
 };
 
+const sm = datepickerTokens.datepicker.sm;
+const md = datepickerTokens.datepicker.md;
+const DATEPICKER_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        paddingX: sm.paddingX,
+        gap: sm.gap,
+        iconSize: sm.icon,
+        radius: sm.radius,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+    },
+    md: {
+        height: md.height,
+        paddingX: md.paddingX,
+        gap: md.gap,
+        iconSize: md.icon,
+        radius: md.radius,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+    },
+};
+const DATEPICKER_COLORS = {
+    border: datepickerTokens.datepicker.border,
+    bg: datepickerTokens.datepicker.bg,
+    icon: datepickerTokens.datepicker.icon,
+    text: {
+        ...datepickerTokens.datepicker.text,
+        hint: component_field.fieldTokens.field.hint.color,
+    },
+};
+
+exports.DATEPICKER_COLORS = DATEPICKER_COLORS;
+exports.DATEPICKER_SIZE_MAP = DATEPICKER_SIZE_MAP;
 exports.datepickerTokens = datepickerTokens;