@sellmate/design-system 1.0.16 → 1.0.18

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

@@ -1,157 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { d as defineCustomElement$2 } from './p-zvhzq4Sw.js';
-
-const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker{display:inline-flex;width:100%;align-items:center;max-width:var(--picker-width, 100%);height:28px;gap:8px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;background-color:#ffffff;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:12px;line-height:20px;color:#aaaaaa}.sd-file-picker__text--active{color:#222222}.sd-file-picker__text--placeholder{color:#aaaaaa}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#f6f6f6}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#ffffff}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text{color:#222222}.sd-file-picker--disabled:not(.sd-file-picker--inline){background-color:#eeeeee;border-color:#cccccc;cursor:not-allowed !important}.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text{color:#888888}.sd-file-picker--inline{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:#aaaaaa}.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text{color:#737373}.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active{color:#222222}.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text{color:#cccccc}`;
-
-const SdFilePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdFilePicker extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.update = createEvent(this, "sdUpdate");
-    }
-    get el() { return this; }
-    value = null;
-    placeholder = 'Click to upload';
-    disabled = false;
-    inline = false;
-    multiple = false;
-    accept;
-    internalValue = null;
-    hovered = false;
-    showTooltip = false;
-    fileInputRef;
-    fileNamesRef;
-    update;
-    valueChanged(newValue) {
-        this.internalValue = newValue;
-    }
-    componentDidLoad() {
-        this.checkOverflow();
-    }
-    componentDidUpdate() {
-        this.checkOverflow();
-    }
-    handleFileChange = (event) => {
-        const input = event.target;
-        const files = input.files;
-        if (!files || files.length === 0) {
-            return;
-        }
-        const fileArray = Array.from(files);
-        if (this.multiple) {
-            this.internalValue = fileArray;
-        }
-        else {
-            this.internalValue = fileArray[0];
-        }
-        this.value = this.internalValue;
-        this.update?.emit(this.value);
-    };
-    handleClear = (event) => {
-        event.stopPropagation();
-        const clearedValue = this.multiple ? [] : null;
-        this.value = clearedValue;
-        this.internalValue = clearedValue;
-        this.update?.emit(clearedValue);
-        if (this.fileInputRef) {
-            this.fileInputRef.value = '';
-        }
-    };
-    handleClick = () => {
-        if (this.disabled)
-            return;
-        this.fileInputRef?.click();
-    };
-    getStatusClass() {
-        if (this.disabled)
-            return 'sd-file-picker--disabled';
-        if (this.hasFiles())
-            return 'sd-file-picker--active';
-        return '';
-    }
-    hasFiles() {
-        if (!this.internalValue)
-            return false;
-        if (Array.isArray(this.internalValue)) {
-            return this.internalValue.length > 0;
-        }
-        return true;
-    }
-    getDisplayText() {
-        if (!this.hasFiles())
-            return this.placeholder;
-        if (Array.isArray(this.internalValue)) {
-            return this.internalValue.map(f => f.name).join(', ');
-        }
-        return this.internalValue?.name || this.placeholder;
-    }
-    checkOverflow() {
-        if (!this.fileNamesRef)
-            return;
-        const isOverflowing = this.fileNamesRef.scrollWidth > this.fileNamesRef.clientWidth;
-        this.showTooltip = isOverflowing;
-    }
-    getIconColor() {
-        if (this.disabled) {
-            return this.inline ? 'grey_45' : 'grey_55';
-        }
-        return 'grey_70';
-    }
-    render() {
-        const hasFiles = this.hasFiles();
-        const displayText = this.getDisplayText();
-        return (h("div", { key: '659ab6f0e1fedadfbef1838def391aab28ae6e62', class: {
-                'sd-file-picker': true,
-                [this.getStatusClass()]: true,
-                'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '55ffb6c1b3ff502b555cb48a31301ac9b30701a4', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: 'b7755876e0f327d15a886a86592cd59bd3435202', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'e1e2004c64166eb2b611c48ca51cc793fb90434c', ref: el => (this.fileNamesRef = el), class: {
-                'sd-file-picker__text': true,
-                'sd-file-picker__text--placeholder': !hasFiles,
-                'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '0a3c122382cab2148a88fbd4fdc9ff1f7cde757b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '628717309bf16c0906e9ac21ecbf14a416eea8d8', class: "sd-file-picker__tooltip" }, displayText))));
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
-    static get style() { return sdFilePickerCss(); }
-}, [768, "sd-file-picker", {
-        "value": [1040],
-        "placeholder": [1],
-        "disabled": [4],
-        "inline": [4],
-        "multiple": [4],
-        "accept": [1],
-        "internalValue": [32],
-        "hovered": [32],
-        "showTooltip": [32]
-    }, undefined, {
-        "value": ["valueChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-file-picker", "sd-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-file-picker":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdFilePicker$1);
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SdFilePicker = SdFilePicker$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdFilePicker, defineCustomElement };
-//# sourceMappingURL=sd-file-picker.js.map
-
-//# sourceMappingURL=sd-file-picker.js.map
+import{p as e,H as i,c as t,h as s,t as l}from"./p-4iQAU7kM.js";import{d as c}from"./p-Bxs0Hp4o.js";const r=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.update=t(this,"sdUpdate")}get el(){return this}value=null;placeholder="Click to upload";disabled=!1;inline=!1;multiple=!1;accept;internalValue=null;hovered=!1;showTooltip=!1;fileInputRef;fileNamesRef;update;valueChanged(e){this.internalValue=e}componentDidLoad(){this.checkOverflow()}componentDidUpdate(){this.checkOverflow()}handleFileChange=e=>{const i=e.target.files;if(!i||0===i.length)return;const t=Array.from(i);this.internalValue=this.multiple?t:t[0],this.value=this.internalValue,this.update?.emit(this.value)};handleClear=e=>{e.stopPropagation();const i=this.multiple?[]:null;this.value=i,this.internalValue=i,this.update?.emit(i),this.fileInputRef&&(this.fileInputRef.value="")};handleClick=()=>{this.disabled||this.fileInputRef?.click()};getStatusClass(){return this.disabled?"sd-file-picker--disabled":this.hasFiles()?"sd-file-picker--active":""}hasFiles(){return!!this.internalValue&&(!Array.isArray(this.internalValue)||this.internalValue.length>0)}getDisplayText(){return this.hasFiles()?Array.isArray(this.internalValue)?this.internalValue.map((e=>e.name)).join(", "):this.internalValue?.name||this.placeholder:this.placeholder}checkOverflow(){this.fileNamesRef&&(this.showTooltip=this.fileNamesRef.scrollWidth>this.fileNamesRef.clientWidth)}getIconColor(){return this.disabled?this.inline?"grey_45":"grey_55":"grey_70"}render(){const e=this.hasFiles(),i=this.getDisplayText();return s("div",{key:"6c96e930758e62d66cb0a9c4449e06592667d9dc",class:{"sd-file-picker":!0,[this.getStatusClass()]:!0,"sd-file-picker--inline":this.inline},onClick:this.handleClick,onMouseEnter:()=>this.hovered=!0,onMouseLeave:()=>this.hovered=!1},s("input",{key:"e611e2c14c312b053d645ea0e35cfda878ea382e",ref:e=>this.fileInputRef=e,type:"file",class:"sd-file-picker__input",disabled:this.disabled,multiple:this.multiple,accept:this.accept,onInput:this.handleFileChange,"aria-label":this.placeholder}),s("sd-icon",{key:"3733905eaea0203fb589858143c968850feae480",name:"attachFile",size:16,color:this.getIconColor(),class:"sd-file-picker__icon"}),s("div",{key:"b7dec66670f67e69248292265fbc80e00ffea0ff",ref:e=>this.fileNamesRef=e,class:{"sd-file-picker__text":!0,"sd-file-picker__text--placeholder":!e,"sd-file-picker__text--active":e}},i),!this.disabled&&e&&s("sd-icon",{key:"81452b84daadf7b51f8383b756d4773b9f38411b",name:"close",size:12,color:"#888888",class:"sd-file-picker__clear-icon",onClick:this.handleClear}),this.showTooltip&&e&&this.hovered&&s("div",{key:"8e19381802185684f4982c588085c7948222cd73",class:"sd-file-picker__tooltip"},i))}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return"sd-file-picker{display:inline-flex;width:100%}.sd-file-picker{display:inline-flex;width:100%;align-items:center;max-width:var(--picker-width, 100%);height:28px;gap:8px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;background-color:#ffffff;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:12px;line-height:20px;color:#aaaaaa}.sd-file-picker__text--active{color:#222222}.sd-file-picker__text--placeholder{color:#aaaaaa}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#f6f6f6}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#ffffff}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text{color:#222222}.sd-file-picker--disabled:not(.sd-file-picker--inline){background-color:#eeeeee;border-color:#cccccc;cursor:not-allowed !important}.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text{color:#888888}.sd-file-picker--inline{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:#aaaaaa}.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text{color:#737373}.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active{color:#222222}.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text{color:#cccccc}"}},[512,"sd-file-picker",{value:[1040],placeholder:[1],disabled:[4],inline:[4],multiple:[4],accept:[1],internalValue:[32],hovered:[32],showTooltip:[32]},void 0,{value:[{valueChanged:0}]}]),a=r,o=function(){"undefined"!=typeof customElements&&["sd-file-picker","sd-icon"].forEach((e=>{switch(e){case"sd-file-picker":customElements.get(l(e))||customElements.define(l(e),r);break;case"sd-icon":customElements.get(l(e))||c()}}))};export{a as SdFilePicker,o as defineCustomElement}

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

@@ -1,9 +1 @@
-import { S as SdFloatingPopover, d as defineCustomElement$1 } from './p-BdgLMKjb.js';
-
-const SdFloatingPortal = SdFloatingPopover;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdFloatingPortal, defineCustomElement };
-//# sourceMappingURL=sd-floating-portal.js.map
-
-//# sourceMappingURL=sd-floating-portal.js.map
+import{S as o,d as s}from"./p-BkU8yMUR.js";const p=o,r=s;export{p as SdFloatingPortal,r as defineCustomElement}

package/dist/components/sd-form.js

@@ -1,101 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-
-const SdForm$1 = /*@__PURE__*/ proxyCustomElement(class SdForm extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.submitSuccess = createEvent(this, "sdSubmit");
-        this.submitFail = createEvent(this, "sdValidationError");
-    }
-    formClass = '';
-    fields = [];
-    submitSuccess;
-    submitFail;
-    sortFieldsByDomOrder() {
-        this.fields.sort((a, b) => {
-            const elA = a.el;
-            const elB = b.el;
-            if (!elA || !elB)
-                return 0;
-            return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
-        });
-    }
-    async sdRegisterField(field) {
-        if (!field.name) {
-            console.warn('[sd-form] field.name is required');
-            return;
-        }
-        if (this.fields.find(f => f.name === field.name))
-            return;
-        this.fields.push(field);
-        this.sortFieldsByDomOrder();
-    }
-    async sdUnregisterField(name) {
-        this.fields = this.fields.filter(f => f.name !== name);
-    }
-    async sdValidate() {
-        const fieldValidationResults = await Promise.all(this.fields.map(async (field) => {
-            const valid = await field.sdValidate();
-            return {
-                field,
-                valid,
-            };
-        }));
-        const isInValid = fieldValidationResults.find(result => {
-            return !result.valid;
-        });
-        if (isInValid) {
-            isInValid.field.sdFocus();
-            isInValid.field.sdScrollIntoView?.();
-        }
-        return !isInValid;
-    }
-    async sdReset() {
-        this.fields.forEach(f => f.sdReset());
-    }
-    async sdResetValidation() {
-        this.fields.forEach(f => f.sdResetValidation());
-    }
-    async onSubmit(e) {
-        e.preventDefault();
-        const valid = await this.sdValidate();
-        if (!valid) {
-            this.submitFail.emit();
-            return;
-        }
-        this.submitSuccess.emit();
-    }
-    render() {
-        return (h("form", { key: '3349166129fd2acb388221b61e1bd347a2dad6e0', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: '5866b2d6764578dbf07a31c5d3dc6fa6a249f023' })));
-    }
-}, [772, "sd-form", {
-        "formClass": [1, "form-class"],
-        "sdRegisterField": [64],
-        "sdUnregisterField": [64],
-        "sdValidate": [64],
-        "sdReset": [64],
-        "sdResetValidation": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-form"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-form":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdForm$1);
-            }
-            break;
-    } });
-}
-
-const SdForm = SdForm$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdForm, defineCustomElement };
-//# sourceMappingURL=sd-form.js.map
-
-//# sourceMappingURL=sd-form.js.map
+import{p as s,H as t,c as e,h as i,t as d}from"./p-4iQAU7kM.js";const a=s(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.submitSuccess=e(this,"sdSubmit"),this.submitFail=e(this,"sdValidationError")}formClass="";fields=[];submitSuccess;submitFail;sortFieldsByDomOrder(){this.fields.sort(((s,t)=>{const e=s.el,i=t.el;return e&&i?e.compareDocumentPosition(i)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1:0}))}async sdRegisterField(s){s.name?this.fields.find((t=>t.name===s.name))||(this.fields.push(s),this.sortFieldsByDomOrder()):console.warn("[sd-form] field.name is required")}async sdUnregisterField(s){this.fields=this.fields.filter((t=>t.name!==s))}async sdValidate(){const s=(await Promise.all(this.fields.map((async s=>{const t=await s.sdValidate();return{field:s,valid:t}})))).find((s=>!s.valid));return s&&(s.field.sdFocus(),s.field.sdScrollIntoView?.()),!s}async sdReset(){this.fields.forEach((s=>s.sdReset()))}async sdResetValidation(){this.fields.forEach((s=>s.sdResetValidation()))}async onSubmit(s){s.preventDefault(),await this.sdValidate()?this.submitSuccess.emit():this.submitFail.emit()}render(){return i("form",{key:"3349166129fd2acb388221b61e1bd347a2dad6e0",onSubmit:s=>this.onSubmit(s),class:this.formClass},i("slot",{key:"5866b2d6764578dbf07a31c5d3dc6fa6a249f023"}))}},[772,"sd-form",{formClass:[1,"form-class"],sdRegisterField:[64],sdUnregisterField:[64],sdValidate:[64],sdReset:[64],sdResetValidation:[64]}]),r=a,o=function(){"undefined"!=typeof customElements&&["sd-form"].forEach((s=>{"sd-form"===s&&(customElements.get(d(s))||customElements.define(d(s),a))}))};export{r as SdForm,o as defineCustomElement}

package/dist/components/sd-guide.js

@@ -1,126 +1 @@
-import { p as proxyCustomElement, H, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { d as defineCustomElement$4 } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$3 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$2 } from './p-D16-dM6f.js';
-
-const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}sd-guide .sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #00973c}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
-
-const GUIDE_LABEL = {
-    help: '활용 TIP',
-    pdf: 'PDF Guide',
-    youtube: 'Video Guide',
-    notion: '사용법 안내',
-    event: 'Event Button',
-};
-const GUIDE_ICON = {
-    help: {
-        name: 'helpOutline',
-        size: 20,
-        color: 'green_75',
-    },
-    pdf: { name: 'pdf', size: 20, color: 'red_75' },
-    youtube: { name: 'youtube', size: 20, color: 'red_75' },
-    notion: { name: 'notion', size: 16, color: 'black' },
-    event: { name: 'event', size: 16, color: 'brilliantblue_70' },
-};
-const SdGuide$1 = /*@__PURE__*/ proxyCustomElement(class SdGuide extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    get el() { return this; }
-    type = 'help';
-    label = '';
-    message = '';
-    guideUrl = '';
-    popupTitle = '';
-    popupWidth;
-    popupShow = false;
-    guideRef;
-    handleClickGuide = () => {
-        if (this.type === 'help') {
-            this.popupShow = !this.popupShow;
-            return;
-        }
-        if (this.guideUrl) {
-            window.open(this.guideUrl, '_blank');
-        }
-    };
-    get guideClass() {
-        const classes = ['sd-guide', `sd-guide--${this.type}`];
-        if (this.popupShow)
-            classes.push('sd-guide--active');
-        return classes.join(' ');
-    }
-    closeDropdown = () => {
-        this.popupShow = false;
-    };
-    render() {
-        const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h("div", { key: '2a7d3d040d3fbe7d0c22afc62d67a848fbae67d9', class: "sd-guide", style: {
-                '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '9130f229be86d72882a2f6e270ca33e2cebf859b', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '79f69b8923af6257fe456a8bed5411778c0ca46b', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'c4b798c0e3e66eb1abafa7c1aae7872c28b0be5b', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: 'ca09e67a231f8d1786d7b8ff410cdf38fb58a12c', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '800299db98f85865f808de807e44601819584a96', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onClick: this.closeDropdown }), h("div", { key: 'e907cf708ec51b3d0284afca4041915c03f2c8ee', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'f19b549aa7d30dd70bd679b01d448270b8621f11', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: 'abc78d35daea9bb4a974f05aed10e0bcc15444b7', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'cb20eda71c4173fd439f81767df734b33c5b6e09', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
-    }
-    // 현재 2depth까지만 스타일 적용
-    renderListItem(message, depth = 0) {
-        const listItems = [];
-        if (Array.isArray(message)) {
-            const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
-            listItems.push(...depthMsg.flat());
-        }
-        else {
-            listItems.push(this.renderLi(message, depth));
-        }
-        return listItems;
-    }
-    renderLi = (message, depth) => {
-        return (h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, h("p", { innerHTML: message })));
-    };
-    static get style() { return sdGuideCss(); }
-}, [768, "sd-guide", {
-        "type": [1],
-        "label": [1],
-        "message": [1],
-        "guideUrl": [1, "guide-url"],
-        "popupTitle": [1, "popup-title"],
-        "popupWidth": [2, "popup-width"],
-        "popupShow": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-guide", "sd-button", "sd-icon", "sd-portal"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-guide":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdGuide$1);
-            }
-            break;
-        case "sd-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "sd-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SdGuide = SdGuide$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdGuide, defineCustomElement };
-//# sourceMappingURL=sd-guide.js.map
-
-//# sourceMappingURL=sd-guide.js.map
+import{p as t,H as e,h as o,t as i}from"./p-4iQAU7kM.js";import{d as n}from"./p-B45-wHcP.js";import{d as s}from"./p-Bxs0Hp4o.js";import{d}from"./p-DojkP9rD.js";const p={help:"활용 TIP",pdf:"PDF Guide",youtube:"Video Guide",notion:"사용법 안내",event:"Event Button"},r={help:{name:"helpOutline",size:20,color:"green_75"},pdf:{name:"pdf",size:20,color:"red_75"},youtube:{name:"youtube",size:20,color:"red_75"},notion:{name:"notion",size:16,color:"black"},event:{name:"event",size:16,color:"brilliantblue_70"}},a=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost()}get el(){return this}type="help";label="";message="";guideUrl="";popupTitle="";popupWidth;popupShow=!1;guideRef;handleClickGuide=()=>{"help"!==this.type?this.guideUrl&&window.open(this.guideUrl,"_blank"):this.popupShow=!this.popupShow};get guideClass(){const t=["sd-guide","sd-guide--"+this.type];return this.popupShow&&t.push("sd-guide--active"),t.join(" ")}closeDropdown=()=>{this.popupShow=!1};render(){const{name:t,size:e,color:i}=r[this.type];return o("div",{key:"0b3cb2fd1bc331592f6f816aa729abce3fe7835e",class:"sd-guide",style:{"--sd-guide-color":r[this.type].color}},o("sd-button",{key:"42ef456f180a0ef5faef5524aca6707adfd0218b",ref:t=>this.guideRef=t,class:this.guideClass,variant:this.popupShow?"primary":"outline",label:this.label||p[this.type],size:"sm",color:this.popupShow?r[this.type].color:"grey_45",icon:t,iconColor:this.popupShow?"white":i,iconSize:e,noHover:this.popupShow,onSdClick:this.handleClickGuide}),"help"===this.type&&this.popupShow&&o("sd-portal",{key:"3820cd8e59c0609c32606339d51eb31e7981f551",open:this.popupShow,parentRef:this.guideRef,onSdClose:this.closeDropdown,offset:[0,4]},o("div",{key:"8c2be02160082b0c43b7b75edb3422135045b913",style:{position:"absolute",width:"0px",height:"0px"}},o("div",{key:"94d7de120549fa16952aacc08d6ba67b3542cbb9",class:"sd-guide__popup",style:{width:this.popupWidth?this.popupWidth+"px":"426px"}},o("sd-button",{key:"e1c0ac8509fc47e1afad3d9d898d95281cdd70c9",class:"sd-guide__popup__close",icon:"close",color:"grey_65",size:"md",variant:"ghost",noHover:!0,onSdClick:this.closeDropdown}),o("div",{key:"864c8082c9fe43ca9d68f64530eab8b7b38fd6cc",class:"sd-guide__popup__header"},o("sd-icon",{key:"db417ad8a23df1482d644f7fdee3ac60c86abf87",name:"helpOutline",size:24,color:"green_65"}),o("h3",{key:"1baa8e7c8beb29c5cb8c9226ba948023ef57d799",class:"sd-guide__popup__title"},this.popupTitle||p[this.type])),o("ul",{key:"6513c9fadbc0c9eeca432a16b28815aa2beb1004",class:"sd-guide__popup__list"},this.renderListItem(this.message))))))}renderListItem(t,e=0){const o=[];if(Array.isArray(t)){const i=t.map((t=>this.renderListItem(t,e+1)));o.push(...i.flat())}else o.push(this.renderLi(t,e));return o}renderLi=(t,e)=>o("li",{class:"sd-guide__popup__list__item sd-guide__popup__list__item--depth-"+e},o("p",{innerHTML:t}));static get style(){return'@charset "UTF-8";sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}sd-guide .sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #00973c}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}'}},[512,"sd-guide",{type:[1],label:[1],message:[1],guideUrl:[1,"guide-url"],popupTitle:[1,"popup-title"],popupWidth:[2,"popup-width"],popupShow:[32]}]),l=a,u=function(){"undefined"!=typeof customElements&&["sd-guide","sd-button","sd-icon","sd-portal"].forEach((t=>{switch(t){case"sd-guide":customElements.get(i(t))||customElements.define(i(t),a);break;case"sd-button":customElements.get(i(t))||n();break;case"sd-icon":customElements.get(i(t))||s();break;case"sd-portal":customElements.get(i(t))||d()}}))};export{l as SdGuide,u as defineCustomElement}

package/dist/components/sd-icon.js

@@ -1,9 +1 @@
-import { S as SdIcon$1, d as defineCustomElement$1 } from './p-zvhzq4Sw.js';
-
-const SdIcon = SdIcon$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdIcon, defineCustomElement };
-//# sourceMappingURL=sd-icon.js.map
-
-//# sourceMappingURL=sd-icon.js.map
+import{S as o,d as s}from"./p-Bxs0Hp4o.js";const p=o,r=s;export{p as SdIcon,r as defineCustomElement}

package/dist/components/sd-input.js

@@ -1,9 +1 @@
-import { S as SdInput$1, d as defineCustomElement$1 } from './p-xfqZA_70.js';
-
-const SdInput = SdInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdInput, defineCustomElement };
-//# sourceMappingURL=sd-input.js.map
-
-//# sourceMappingURL=sd-input.js.map
+import{S as o,d as s}from"./p-CIDMF6fj.js";const p=o,r=s;export{p as SdInput,r as defineCustomElement}

package/dist/components/sd-loading-spinner.js

@@ -1,9 +1 @@
-import { S as SdLoadingSpinner$1, d as defineCustomElement$1 } from './p-GS-rEltm.js';
-
-const SdLoadingSpinner = SdLoadingSpinner$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdLoadingSpinner, defineCustomElement };
-//# sourceMappingURL=sd-loading-spinner.js.map
-
-//# sourceMappingURL=sd-loading-spinner.js.map
+import{S as o,d as s}from"./p-Czdx4VDt.js";const t=o,p=s;export{t as SdLoadingSpinner,p as defineCustomElement}

package/dist/components/sd-modal-card.js

@@ -1,89 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { r as resolveColor } from './p-DcGvp3RM.js';
-import { d as defineCustomElement$3 } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$2 } from './p-zvhzq4Sw.js';
-
-const sdModalCardCss = () => `sd-modal-card{display:block}sd-modal-card .sd-modal-card{position:relative;padding:40px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:white}sd-modal-card .sd-modal-card__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-modal-card .sd-modal-card sd-icon.sd-modal-card__icon{display:block;width:32px;height:32px;margin:0 auto 12px auto}sd-modal-card .sd-modal-card__title{color:var(--point-color);font-size:18px;font-weight:700;line-height:30px;text-align:center;margin:0 0 20px 0}sd-modal-card .sd-modal-card__message{color:#222222;font-weight:400;font-size:12px;line-height:22px;text-align:center;margin:0}sd-modal-card .sd-modal-card__button-container{display:flex;margin:32px auto 0 auto;justify-content:center;align-items:center;gap:8px}sd-modal-card .sd-modal-card__button-container.flex-column{flex-direction:column}sd-modal-card .sd-modal-card__button-container button.sd-modal-card__button{width:89px}`;
-
-const SdModalCard$1 = /*@__PURE__*/ proxyCustomElement(class SdModalCard extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.close = createEvent(this, "sdClose");
-        this.confirm = createEvent(this, "sdConfirm");
-    }
-    type = 'info';
-    system = 'normal';
-    useCloseButton = true;
-    modalTitle = 'normal';
-    buttonFlexDirection = 'row';
-    buttonProps;
-    message = [];
-    modalClass = '';
-    close;
-    confirm;
-    get pointColor() {
-        if (this.type !== 'normal') {
-            return 'grey_95';
-        }
-        switch (this.system) {
-            case 'positive':
-                return resolveColor('brilliantblue_75');
-            case 'negative':
-                return resolveColor('red_75');
-            default:
-                return resolveColor('grey_95');
-        }
-    }
-    get getModalClass() {
-        let modalClass = `sd-modal-card ${this.modalClass}`;
-        modalClass += ' ' + `sd-modal-card-${this.system}`;
-        return modalClass;
-    }
-    render() {
-        return (h("div", { key: '7374943ac733d43b7d6c027f074c2dfdfd859e51', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (h("sd-icon", { key: '75fd15b1241d8b4829372377a8212556828ef2f9', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (h("sd-icon", { key: '54619f342718bb9dd0589d5963ad390f1b792843', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '4197761d82baa632c67ff238388aa3162592d9ed', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '586ee3e295b2091d657d54f17945d4ac12541932' }, h("div", { key: 'dad5890bd4d0dfcfca45811ae58fe3e67d29e226', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: '3af309aaa37574e5a3e74cbb3c9047216c1b74a8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (h("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) }))))));
-    }
-    static get style() { return sdModalCardCss(); }
-}, [772, "sd-modal-card", {
-        "type": [1],
-        "system": [1],
-        "useCloseButton": [4, "use-close-button"],
-        "modalTitle": [1, "modal-title"],
-        "buttonFlexDirection": [1, "button-flex-direction"],
-        "buttonProps": [16],
-        "message": [16],
-        "modalClass": [1, "modal-class"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-modal-card", "sd-button", "sd-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-modal-card":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdModalCard$1);
-            }
-            break;
-        case "sd-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SdModalCard = SdModalCard$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SdModalCard, defineCustomElement };
-//# sourceMappingURL=sd-modal-card.js.map
-
-//# sourceMappingURL=sd-modal-card.js.map
+import{p as s,H as t,c as o,h as a,t as e}from"./p-4iQAU7kM.js";import{r as d}from"./p-DcGvp3RM.js";import{d as i}from"./p-B45-wHcP.js";import{d as c}from"./p-Bxs0Hp4o.js";const l=s(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.close=o(this,"sdClose"),this.confirm=o(this,"sdConfirm")}type="info";system="normal";useCloseButton=!0;modalTitle="normal";buttonFlexDirection="row";buttonProps;message=[];sdClass="";close;confirm;get pointColor(){if("normal"!==this.type)return"grey_95";switch(this.system){case"positive":return d("brilliantblue_75");case"negative":return d("red_75");default:return d("grey_95")}}get getModalClass(){let s="sd-modal-card "+this.sdClass;return s+=" sd-modal-card-"+this.system,s}render(){return a("div",{key:"0390932a29db512f09a47fbb030b1140410b6a73",class:this.getModalClass,style:{"--point-color":this.pointColor}},this.useCloseButton&&a("sd-icon",{key:"338844b48a075507352a72a6f8784d912e1f51a0",class:"sd-modal-card__close-button",name:"close",size:"20",color:"grey_65",onClick:()=>this.close.emit()}),"normal"!==this.type&&a("sd-icon",{key:"5209a86ad65c6f255a37691897940d50b15d59e8",class:"sd-modal-card__icon",name:"info"===this.type?"notificationOutline":"warningOutline",size:"32",color:"info"===this.type?"brilliantblue_75":"red_75"}),a("h2",{key:"5586e88dd9882f89ccd3aff047435c7dc821cebc",class:"sd-modal-card__title"},this.modalTitle),a("slot",{key:"0f12630ca6434885e4efc0810ae552dc0f0433b5"},a("div",{key:"04af07e88d2b65274a3ca28b3975d496917f1139",class:"sd-modal-card__message-container"},this.message.map((s=>a("p",{class:"sd-modal-card__message"},s))))),a("div",{key:"b81e9fae8781fe8e57c54c0b51adc141c13c7ba8",class:"sd-modal-card__button-container flex-"+this.buttonFlexDirection},this.buttonProps?.map((s=>a("sd-button",{sdClass:"sd-modal-card__button "+(s.class||""),variant:s.variant?s.variant:"outline",label:s.label,color:s.color,size:s.size,onSdClick:()=>s.type&&"confirm"!==s.type?this.close.emit():this.confirm.emit()})))))}static get style(){return"sd-modal-card{display:block}sd-modal-card .sd-modal-card{position:relative;padding:40px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:white}sd-modal-card .sd-modal-card__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-modal-card .sd-modal-card sd-icon.sd-modal-card__icon{display:block;width:32px;height:32px;margin:0 auto 12px auto}sd-modal-card .sd-modal-card__title{color:var(--point-color);font-size:18px;font-weight:700;line-height:30px;text-align:center;margin:0 0 20px 0}sd-modal-card .sd-modal-card__message{color:#222222;font-weight:400;font-size:12px;line-height:22px;text-align:center;margin:0}sd-modal-card .sd-modal-card__button-container{display:flex;margin:32px auto 0 auto;justify-content:center;align-items:center;gap:8px}sd-modal-card .sd-modal-card__button-container.flex-column{flex-direction:column}sd-modal-card .sd-modal-card__button-container button.sd-modal-card__button{width:89px}"}},[772,"sd-modal-card",{type:[1],system:[1],useCloseButton:[4,"use-close-button"],modalTitle:[1,"modal-title"],buttonFlexDirection:[1,"button-flex-direction"],buttonProps:[16],message:[16],sdClass:[1,"sd-class"]}]),r=l,n=function(){"undefined"!=typeof customElements&&["sd-modal-card","sd-button","sd-icon"].forEach((s=>{switch(s){case"sd-modal-card":customElements.get(e(s))||customElements.define(e(s),l);break;case"sd-button":customElements.get(e(s))||i();break;case"sd-icon":customElements.get(e(s))||c()}}))};export{r as SdModalCard,n as defineCustomElement}