@sellmate/design-system 0.0.21 → 0.0.23

package/dist/design-system/p-b13de8da.entry.js

@@ -1,2 +0,0 @@
-import{r as t,a as e,h as o,H as i}from"./p-Bknr-FpS.js";import{c as n}from"./p-CgyTlXBV.js";const s='@charset "UTF-8";.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}.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-block;height:fit-content}sd-guide .sd-guide{display:inline-block}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center}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}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__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 d={help:"활용 TIP",pdf:"PDF Guide",youtube:"Video Guide",notion:"사용 가이드",event:"Event Button"};const p={help:{name:"helpOutline",size:20,color:n.green_65},pdf:{name:"pdf",size:20,color:n.red_75},youtube:{name:"youtube",size:20,color:n.red_75},notion:{name:"notion",size:16,color:n.black},event:{name:"event",size:16,color:n.brilliantblue_70}};const r=class{constructor(e){t(this,e)}get el(){return e(this)}type="help";label="";message="";guideUrl="";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 t=["sd-guide",`sd-guide--${this.type}`];if(this.popupShow)t.push("sd-guide--active");return t.join(" ")}closeDropdown=()=>{this.popupShow=false};render(){const{name:t,size:e,color:s}=p[this.type];return o(i,{key:"6cb7472ea6718a325174a57d4de427e5d4fa6c52",style:{"--sd-guide-color":p[this.type].color}},o("sd-button",{key:"c4672172d4a2d1a24aea7876987bb28ac80fc374",ref:t=>this.guideRef=t,class:this.guideClass,variant:this.popupShow?"primary":"outline",label:d[this.type],size:"sm",color:this.popupShow?p[this.type].color:"grey_45",icon:t,iconColor:this.popupShow?"white":s,iconSize:e,noHover:this.popupShow,onSdClick:this.handleClickGuide}),this.type==="help"&&this.popupShow&&o("sd-portal",{key:"5b5767e9faefef34f885f2625428c2ca8d439435",open:this.popupShow,parentRef:this.guideRef,onSdClose:this.closeDropdown,offset:[0,4]},o("div",{key:"9ebbf396ef0fe7a189285e5c71aec2a5293e6406",class:"sd-guide__popup",style:{width:this.popupWidth?this.popupWidth+"px":"426px"}},o("sd-button",{key:"8d68bd99088adaf1b572dd2fa03047c9fa3d5887",class:"sd-guide__popup__close",icon:"close",color:n.grey_65,size:"md",variant:"ghost",noHover:true,onSdClick:this.closeDropdown}),o("div",{key:"bb58bbdc336075e4ef65ef7f16a6320303b41c30",class:"sd-guide__popup__header"},o("sd-icon",{key:"fd631d6e0631fb59b81d50d458b97b2725c0fafb",name:"helpOutline",size:24,color:n.green_65}),o("h3",{key:"0692203e362f4b6acb43c815a86d3ac64a8f036d",class:"sd-guide__popup__title"},this.label||d[this.type])),o("ul",{key:"9573043a5bd61ed040df3c09e42daca8a3f35b7a",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)=>{const i=t.replace(/ /gi," ");return o("li",{class:`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${e}`},o("p",{innerHTML:i}))}};r.style=s;export{r as sd_guide};
-//# sourceMappingURL=p-b13de8da.entry.js.map