@sellmate/design-system 1.0.62 → 1.0.64

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

@@ -14,6 +14,7 @@ export class SdFilePicker {
     // sd-field 패스스루 props
     name = '';
     label = '';
+    labelWidth = '';
     addonLabel = '';
     hint = '';
     errorMessage = '';
@@ -176,7 +177,7 @@ export class SdFilePicker {
                     'sd-file-picker--inline-disabled': this.disabled,
                 }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
         }
-        return (h("sd-field", { name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
+        return (h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {
@@ -230,7 +231,7 @@ export class SdFilePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "placeholder",
                 "defaultValue": "'Click to upload'"
             },
@@ -250,7 +251,7 @@ export class SdFilePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -270,7 +271,7 @@ export class SdFilePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "inline",
                 "defaultValue": "false"
             },
@@ -290,7 +291,7 @@ export class SdFilePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "multiple",
                 "defaultValue": "false"
             },
@@ -410,6 +411,26 @@ export class SdFilePicker {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": false,
@@ -701,7 +722,7 @@ export class SdFilePicker {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ files: File[]; reason: 'max-file-size' | 'max-total-size' | 'max-files' }",
+                    "original": "{\n    files: File[];\n    reason: 'max-file-size' | 'max-total-size' | 'max-files';\n  }",
                     "resolved": "{ files: File[]; reason: \"max-file-size\" | \"max-total-size\" | \"max-files\"; }",
                     "references": {
                         "File": {

package/dist/collection/components/sd-ghost-button/sd-ghost-button.config.js

@@ -22,7 +22,13 @@ export const GHOST_BUTTON_SIZES = {
         icon: Number(ghostButtonTokens.ghostButton.lg.icon),
     },
 };
-export const GHOST_BUTTON_RADIUS = Number(ghostButtonTokens.ghostButton.radius);
+export const GHOST_BUTTON_RADIUS = {
+    xxs: Number(ghostButtonTokens.ghostButton.radius.sm),
+    xs: Number(ghostButtonTokens.ghostButton.radius.sm),
+    sm: Number(ghostButtonTokens.ghostButton.radius.sm),
+    md: Number(ghostButtonTokens.ghostButton.radius.md),
+    lg: Number(ghostButtonTokens.ghostButton.radius.md),
+};
 export const GHOST_BUTTON_HOVER_OPACITY = ghostButtonTokens.ghostButton.hover.opacity;
 export const GHOST_BUTTON_CONTENT_COLORS = {
     default: ghostButtonTokens.ghostButton.default.content,

package/dist/collection/components/sd-ghost-button/sd-ghost-button.js

@@ -35,16 +35,16 @@ export class SdGhostButton {
             ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
             : GHOST_BUTTON_CONTENT_COLORS[this.intent];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (h("button", { key: '783888ed2c124bf8e08698de0bc2e904b86722e9', class: {
+        return (h("button", { key: 'eccb34969779d75bcd77dd6ae12cb99a419af121', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
-                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS}px`,
+                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: '4ae4347b169267e6964c461126b6c9a4281578bb', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: '4ae160e73b72b0b4aa40947c126419b1016c81d3', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {

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

@@ -17,7 +17,7 @@ sd-button {
   --sd-button-icon-only-size: var(--sd-button-height);
   text-decoration: none;
   cursor: pointer;
-  border-radius: var(--sd-button-radius-sm, 4px);
+  border-radius: var(--sd-button-button-radius-sm, 4px);
   transition: all 0.2s ease-in-out;
   position: relative;
   overflow: hidden;
@@ -38,51 +38,51 @@ sd-button {
   text-decoration: var(--sd-button-text-decoration);
 }
 .sd-button--xs {
-  --sd-button-height: var(--sd-button-xs-height, 24px);
-  --sd-button-padding-x: var(--sd-button-xs-padding-x, 8px);
-  --sd-button-gap: var(--sd-button-xs-gap, 4px);
-  --sd-button-font-family: var(--sd-button-xs-typography-font-family, inherit);
-  --sd-button-font-size: var(--sd-button-xs-typography-font-size, 12px);
-  --sd-button-font-weight: var(--sd-button-xs-typography-font-weight, 500);
-  --sd-button-text-decoration: var(--sd-button-xs-typography-text-decoration, none);
+  --sd-button-height: var(--sd-button-button-xs-height, 24px);
+  --sd-button-padding-x: var(--sd-button-button-xs-padding-x, 8px);
+  --sd-button-gap: var(--sd-button-button-xs-gap, 4px);
+  --sd-button-font-family: var(--sd-button-button-xs-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-button-xs-typography-font-size, 12px);
+  --sd-button-font-weight: var(--sd-button-button-xs-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-button-xs-typography-text-decoration, none);
   --sd-button-label-min-width: var(--sd-button-label-xs-min-width, auto);
-  --sd-button-icon-only-size: var(--sd-button-icon-only-xs-width, var(--sd-button-height));
+  --sd-button-icon-only-size: var(--sd-button-button-icon-only-xs-width, var(--sd-button-height));
   line-height: 20px;
 }
 .sd-button--sm {
-  --sd-button-height: var(--sd-button-sm-height, 28px);
-  --sd-button-padding-x: var(--sd-button-sm-padding-x, 12px);
-  --sd-button-gap: var(--sd-button-sm-gap, 6px);
-  --sd-button-font-family: var(--sd-button-sm-typography-font-family, inherit);
-  --sd-button-font-size: var(--sd-button-sm-typography-font-size, 12px);
-  --sd-button-font-weight: var(--sd-button-sm-typography-font-weight, 500);
-  --sd-button-text-decoration: var(--sd-button-sm-typography-text-decoration, none);
+  --sd-button-height: var(--sd-button-button-sm-height, 28px);
+  --sd-button-padding-x: var(--sd-button-button-sm-padding-x, 12px);
+  --sd-button-gap: var(--sd-button-button-sm-gap, 6px);
+  --sd-button-font-family: var(--sd-button-button-sm-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-button-sm-typography-font-size, 12px);
+  --sd-button-font-weight: var(--sd-button-button-sm-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-button-sm-typography-text-decoration, none);
   --sd-button-label-min-width: var(--sd-button-label-sm-min-width, auto);
-  --sd-button-icon-only-size: var(--sd-button-icon-only-sm-width, var(--sd-button-height));
+  --sd-button-icon-only-size: var(--sd-button-button-icon-only-sm-width, var(--sd-button-height));
   line-height: 20px;
 }
 .sd-button--md {
-  --sd-button-height: var(--sd-button-md-height, 34px);
-  --sd-button-padding-x: var(--sd-button-md-padding-x, 20px);
-  --sd-button-gap: var(--sd-button-md-gap, 8px);
-  --sd-button-font-family: var(--sd-button-md-typography-font-family, inherit);
-  --sd-button-font-size: var(--sd-button-md-typography-font-size, 16px);
-  --sd-button-font-weight: var(--sd-button-md-typography-font-weight, 500);
-  --sd-button-text-decoration: var(--sd-button-md-typography-text-decoration, none);
+  --sd-button-height: var(--sd-button-button-md-height, 34px);
+  --sd-button-padding-x: var(--sd-button-button-md-padding-x, 20px);
+  --sd-button-gap: var(--sd-button-button-md-gap, 8px);
+  --sd-button-font-family: var(--sd-button-button-md-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-button-md-typography-font-size, 16px);
+  --sd-button-font-weight: var(--sd-button-button-md-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-button-md-typography-text-decoration, none);
   --sd-button-label-min-width: var(--sd-button-label-md-min-width, auto);
-  --sd-button-icon-only-size: var(--sd-button-icon-only-md-width, var(--sd-button-height));
+  --sd-button-icon-only-size: var(--sd-button-button-icon-only-md-width, var(--sd-button-height));
   line-height: 26px;
 }
 .sd-button--lg {
-  --sd-button-height: var(--sd-button-lg-height, 62px);
-  --sd-button-padding-x: var(--sd-button-lg-padding-x, 28px);
-  --sd-button-gap: var(--sd-button-lg-gap, 12px);
-  --sd-button-font-family: var(--sd-button-lg-typography-font-family, inherit);
-  --sd-button-font-size: var(--sd-button-lg-typography-font-size, 18px);
-  --sd-button-font-weight: var(--sd-button-lg-typography-font-weight, 500);
-  --sd-button-text-decoration: var(--sd-button-lg-typography-text-decoration, none);
+  --sd-button-height: var(--sd-button-button-lg-height, 62px);
+  --sd-button-padding-x: var(--sd-button-button-lg-padding-x, 28px);
+  --sd-button-gap: var(--sd-button-button-lg-gap, 12px);
+  --sd-button-font-family: var(--sd-button-button-lg-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-button-lg-typography-font-size, 18px);
+  --sd-button-font-weight: var(--sd-button-button-lg-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-button-lg-typography-text-decoration, none);
   --sd-button-label-min-width: var(--sd-button-label-lg-min-width, auto);
-  --sd-button-icon-only-size: var(--sd-button-icon-only-lg-width, var(--sd-button-height));
+  --sd-button-icon-only-size: var(--sd-button-button-icon-only-lg-width, var(--sd-button-height));
   line-height: 30px;
 }
 .sd-button--has-label {
@@ -107,7 +107,7 @@ sd-button {
 }
 .sd-button--outline {
   background: white;
-  border: var(--sd-button-border-width-default, 1px) solid var(--button-color);
+  border: var(--sd-button-button-border-width-default, 1px) solid var(--button-color);
   color: var(--button-color);
 }
 .sd-button--outline::before {
@@ -148,9 +148,9 @@ sd-button {
   z-index: 1;
 }
 .sd-button--disabled {
-  border: var(--sd-button-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);
-  background: var(--sd-button-bg-disabled, #E1E1E1);
-  color: var(--sd-button-content-disabled, #888888);
+  border: var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-button-border-disabled, #CCCCCC);
+  background: var(--sd-button-button-bg-disabled, #E1E1E1);
+  color: var(--sd-button-button-text-disabled, #888888);
   cursor: not-allowed !important;
 }
 .sd-button--icon-only {

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

@@ -63,6 +63,9 @@ sd-input .sd-input__content .sd-input__native[disabled] {
   cursor: not-allowed;
   color: var(--sd-input-disabled-color);
 }
+sd-input .sd-input__content .sd-input__native[readonly] {
+  color: var(--sd-input-disabled-color);
+}
 sd-input .sd-input__content .sd-input__native::placeholder {
   color: var(--sd-input-placeholder-color);
 }

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

@@ -29,6 +29,7 @@ export class SdInput {
     hovered = false;
     // props - label
     label = '';
+    labelWidth = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -110,12 +111,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '16881490eb9d8d08aa0788be2dbb845b12f50269', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '04e71967c3b3f7bf4589a3aaf4505c5d67d615da', class: "sd-input__content" }, h("slot", { key: '18476a19c8825734e475116586bab2711c1d84e3', name: "prefix" }), h("input", { key: '7600e0ade86d1bca8ba6197d49bd72ef4d0778dd', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '5c98ef1acdb26a1c0f89fc04101c0315b017c08a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: 'f188270be3635c68d99a453eaba61f53d6bb2bc7', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'a72ce8674fb761de7cd188e99cc19d5f3731a899', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, 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 }, h("label", { key: 'e5cbdbc2b233bda57488ead19401d277891301ae', class: "sd-input__content" }, h("slot", { key: 'a327005770df94ef61f2e08071e77407a24b7b5c', name: "prefix" }), h("input", { key: '36301cd586151b8c607e14715b26fca467f68c13', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '532e201860db0709572502aa4275fc9251e1aeb1', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: 'cc6132852c65f0597cbe25751c7246b1cdad3096', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'cedaceae0b81e007e4672a57c950bd6b23d045cd', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'fd3d567346cf5771ec28c73f15cdf0db15835766', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;
@@ -641,6 +642,26 @@ export class SdInput {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "icon": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/sd-loading-container/sd-loading-container.config.js

@@ -0,0 +1 @@
+export const LOADING_CONTAINER_DEFAULT_Z_INDEX = 10000;

package/dist/collection/components/sd-loading-container/sd-loading-container.css

@@ -0,0 +1,40 @@
+sd-loading-container .sd-loading-container {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--sd-loading-container-z-index, 10000);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
+  pointer-events: none;
+}
+sd-loading-container .sd-loading-container--visible {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.2s ease, visibility 0s linear 0s;
+  pointer-events: auto;
+}
+sd-loading-container .sd-loading-container__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+sd-loading-container .sd-loading-container__content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+sd-loading-container .sd-loading-container__message {
+  margin: 0;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  text-align: center;
+  max-width: 400px;
+  word-break: keep-all;
+}

package/dist/collection/components/sd-loading-container/sd-loading-container.js

@@ -0,0 +1,83 @@
+import { h } from "@stencil/core";
+export class SdLoadingContainer {
+    visible = false;
+    message = '';
+    async show(options = {}) {
+        this.message = options.message ?? '';
+        this.visible = true;
+    }
+    async hide() {
+        this.visible = false;
+    }
+    render() {
+        return (h("div", { key: 'e4578e196ebd4ee69d424fe85c9bf651bc3382f7', class: {
+                'sd-loading-container': true,
+                'sd-loading-container--visible': this.visible,
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'ae9fae9408f9b69591554ca105abb2ece362db00', class: "sd-loading-container__backdrop" }), h("div", { key: '27d0c6518dacbb664cebb2fc76c9ceb14b2b3aac', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'ace74d2550a2ddb579c61e6f8daaaf64915e8666', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'af059ecdadf7b3b3c0a0437cbc4264ff550fa3c6', class: "sd-loading-container__message" }, this.message)))));
+    }
+    static get is() { return "sd-loading-container"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-loading-container.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-loading-container.css"]
+        };
+    }
+    static get states() {
+        return {
+            "visible": {},
+            "message": {}
+        };
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "(options?: SdLoadingShowArgs) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "SdLoadingShowArgs",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SdLoadingShowArgs": {
+                            "location": "import",
+                            "path": "./sd-loading-container.config",
+                            "id": "src/components/sd-loading-container/sd-loading-container.config.ts::SdLoadingShowArgs",
+                            "referenceLocation": "SdLoadingShowArgs"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/sd-loading-modal/sd-loading-modal.config.js

@@ -0,0 +1,31 @@
+import modalTokens from "../../tokens/generated/component.modal.json";
+import spinnerTokens from "../../tokens/generated/component.spinner.json";
+export const LOADING_MODAL_LAYOUT = {
+    minWidth: Number(modalTokens.modal.loading.width),
+    minHeight: Number(modalTokens.modal.loading.height),
+    gap: Number(modalTokens.modal.loading.gap),
+    contentSize: Number(modalTokens.modal.loading.content),
+    radius: Number(modalTokens.modal.radius),
+};
+export const LOADING_MODAL_COLORS = {
+    bg: modalTokens.modal.bg,
+    messageColor: modalTokens.modal.loading.message.color,
+    errorIcon: modalTokens.modal.confirm.negative.icon,
+    spinnerTrack: spinnerTokens.spinner.color.track,
+    spinnerArc: spinnerTokens.spinner.color.arc,
+};
+export const LOADING_MODAL_TYPOGRAPHY = {
+    fontFamily: modalTokens.modal.loading.message.typography.fontFamily,
+    fontSize: Number(modalTokens.modal.loading.message.typography.fontSize),
+    fontWeight: Number(modalTokens.modal.loading.message.typography.fontWeight),
+    lineHeight: Number(modalTokens.modal.loading.message.typography.lineHeight),
+};
+export const LOADING_MODAL_DEFAULT_MESSAGE = {
+    loading: '작업을 진행하고 있습니다. 잠시만 기다려 주세요.',
+    error: '작업에 실패하였습니다. 다시 시도해 주세요.',
+};
+export const LOADING_MODAL_DEFAULT_BUTTON_LABEL = {
+    loading: '작업 취소',
+    error: '다시 시도',
+};
+export const LOADING_MODAL_BUTTON_PRESET = 'neutral_outline_sm';

package/dist/collection/components/sd-loading-modal/sd-loading-modal.css

@@ -0,0 +1,37 @@
+sd-loading-modal {
+  display: inline-block;
+}
+sd-loading-modal .sd-loading-modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sd-loading-modal-gap);
+  min-width: var(--sd-loading-modal-min-width);
+  min-height: var(--sd-loading-modal-min-height);
+  width: var(--sd-loading-modal-width, auto);
+  height: var(--sd-loading-modal-height, auto);
+  border-radius: var(--sd-loading-modal-radius);
+  background: var(--sd-loading-modal-bg);
+  box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);
+}
+sd-loading-modal .sd-loading-modal__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sd-loading-modal-content-size);
+  height: var(--sd-loading-modal-content-size);
+}
+sd-loading-modal .sd-loading-modal__message {
+  margin: 0;
+  color: var(--sd-loading-modal-message-color);
+  font-family: var(--sd-loading-modal-message-font-family);
+  font-size: var(--sd-loading-modal-message-font-size);
+  font-weight: var(--sd-loading-modal-message-font-weight);
+  line-height: var(--sd-loading-modal-message-line-height);
+  text-align: center;
+}
+sd-loading-modal .sd-loading-modal__button {
+  display: flex;
+  justify-content: center;
+}