@sellmate/design-system 0.0.56 → 1.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"sd-file-picker.js","sourceRoot":"","sources":["../../../src/components/sd-file-picker/sd-file-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ComponentInterface,\n Component,\n Element,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n h,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-file-picker',\n styleUrl: 'sd-file-picker.scss',\n})\nexport class SdFilePicker implements ComponentInterface {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value?: File[] | File | null = null;\n @Prop() placeholder: string = 'Click to upload';\n @Prop() disabled: boolean = false;\n @Prop() inline: boolean = false;\n @Prop() multiple: boolean = false;\n @Prop() accept?: string;\n @Prop() width?: number | string;\n\n @State() private internalValue: File[] | File | null = null;\n @State() private hovered: boolean = false;\n @State() private showTooltip: boolean = false;\n\n private fileInputRef?: HTMLInputElement;\n private fileNamesRef?: HTMLElement;\n\n @Event() sdChange!: EventEmitter<File[] | File | null>;\n\n @Watch('value')\n valueChanged(newValue: File[] | File | null) {\n  this.internalValue = newValue;\n }\n\n componentDidLoad() {\n  this.checkOverflow();\n }\n\n componentDidUpdate() {\n  this.checkOverflow();\n }\n\n private handleFileChange = (event: Event) => {\n  const input = event.target as HTMLInputElement;\n  const files = input.files;\n\n  if (!files || files.length === 0) {\n   return;\n  }\n\n  const fileArray = Array.from(files);\n\n  if (this.multiple) {\n   this.internalValue = fileArray;\n  } else {\n   this.internalValue = fileArray[0];\n  }\n  this.value = this.internalValue;\n  this.sdChange?.emit(this.value);\n };\n\n private handleClear = (event: Event) => {\n  event.stopPropagation();\n  const clearedValue = this.multiple ? [] : null;\n  this.value = clearedValue;\n  this.internalValue = clearedValue;\n  this.sdChange?.emit(clearedValue);\n\n  if (this.fileInputRef) {\n   this.fileInputRef.value = '';\n  }\n };\n\n private handleClick = () => {\n  if (this.disabled) return;\n  this.fileInputRef?.click();\n };\n\n private getStatusClass(): string {\n  if (this.disabled) return 'sd-file-picker--disabled';\n  if (this.hasFiles()) return 'sd-file-picker--active';\n  return '';\n }\n\n private hasFiles(): boolean {\n  if (!this.internalValue) return false;\n  if (Array.isArray(this.internalValue)) {\n   return this.internalValue.length > 0;\n  }\n  return true;\n }\n\n private getDisplayText(): string {\n  if (!this.hasFiles()) return this.placeholder;\n\n  if (Array.isArray(this.internalValue)) {\n   return this.internalValue.map(f => f.name).join(', ');\n  }\n\n  return this.internalValue?.name || this.placeholder;\n }\n\n private checkOverflow() {\n  if (!this.fileNamesRef) return;\n  const isOverflowing = this.fileNamesRef.scrollWidth > this.fileNamesRef.clientWidth;\n  this.showTooltip = isOverflowing;\n }\n\n private getIconColor(): string {\n  if (this.disabled) {\n   return this.inline ? 'grey_45' : 'grey_55';\n  }\n  return 'grey_70';\n }\n\n render() {\n  const hasFiles = this.hasFiles();\n  const displayText = this.getDisplayText();\n\n  return (\n   <div\n    class={{\n     'sd-file-picker': true,\n     [this.getStatusClass()]: true,\n     'sd-file-picker--inline': this.inline,\n    }}\n    onClick={this.handleClick}\n    onMouseEnter={() => (this.hovered = true)}\n    onMouseLeave={() => (this.hovered = false)}\n   >\n    <input\n     ref={el => (this.fileInputRef = el as HTMLInputElement)}\n     type=\"file\"\n     class=\"sd-file-picker__input\"\n     disabled={this.disabled}\n     multiple={this.multiple}\n     accept={this.accept}\n     onInput={this.handleFileChange}\n     aria-label={this.placeholder}\n    />\n\n    <sd-icon name=\"attachFile\" size={16} color={this.getIconColor()} class=\"sd-file-picker__icon\" />\n\n    <div\n     ref={el => (this.fileNamesRef = el as HTMLElement)}\n     class={{\n      'sd-file-picker__text': true,\n      'sd-file-picker__text--placeholder': !hasFiles,\n      'sd-file-picker__text--active': hasFiles,\n     }}\n    >\n     {displayText}\n    </div>\n\n    {!this.disabled && hasFiles && (\n     <sd-icon\n      name=\"close\"\n      size={12}\n      color=\"#888888\"\n      class=\"sd-file-picker__clear-icon\"\n      onClick={this.handleClear}\n     />\n    )}\n\n    {this.showTooltip && hasFiles && this.hovered && (\n     <div class=\"sd-file-picker__tooltip\">{displayText}</div>\n    )}\n   </div>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-file-picker.js","sourceRoot":"","sources":["../../../src/components/sd-file-picker/sd-file-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ComponentInterface,\n Component,\n Element,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n h,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-file-picker',\n styleUrl: 'sd-file-picker.scss',\n})\nexport class SdFilePicker implements ComponentInterface {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value?: File[] | File | null = null;\n @Prop() placeholder: string = 'Click to upload';\n @Prop() disabled: boolean = false;\n @Prop() inline: boolean = false;\n @Prop() multiple: boolean = false;\n @Prop() accept?: string;\n @Prop() width?: number | string;\n\n @State() private internalValue: File[] | File | null = null;\n @State() private hovered: boolean = false;\n @State() private showTooltip: boolean = false;\n\n private fileInputRef?: HTMLInputElement;\n private fileNamesRef?: HTMLElement;\n\n @Event({ eventName: 'sdUpdate' }) update!: EventEmitter<File[] | File | null>;\n\n @Watch('value')\n valueChanged(newValue: File[] | File | null) {\n  this.internalValue = newValue;\n }\n\n componentDidLoad() {\n  this.checkOverflow();\n }\n\n componentDidUpdate() {\n  this.checkOverflow();\n }\n\n private handleFileChange = (event: Event) => {\n  const input = event.target as HTMLInputElement;\n  const files = input.files;\n\n  if (!files || files.length === 0) {\n   return;\n  }\n\n  const fileArray = Array.from(files);\n\n  if (this.multiple) {\n   this.internalValue = fileArray;\n  } else {\n   this.internalValue = fileArray[0];\n  }\n  this.value = this.internalValue;\n  this.update?.emit(this.value);\n };\n\n private handleClear = (event: Event) => {\n  event.stopPropagation();\n  const clearedValue = this.multiple ? [] : null;\n  this.value = clearedValue;\n  this.internalValue = clearedValue;\n  this.update?.emit(clearedValue);\n\n  if (this.fileInputRef) {\n   this.fileInputRef.value = '';\n  }\n };\n\n private handleClick = () => {\n  if (this.disabled) return;\n  this.fileInputRef?.click();\n };\n\n private getStatusClass(): string {\n  if (this.disabled) return 'sd-file-picker--disabled';\n  if (this.hasFiles()) return 'sd-file-picker--active';\n  return '';\n }\n\n private hasFiles(): boolean {\n  if (!this.internalValue) return false;\n  if (Array.isArray(this.internalValue)) {\n   return this.internalValue.length > 0;\n  }\n  return true;\n }\n\n private getDisplayText(): string {\n  if (!this.hasFiles()) return this.placeholder;\n\n  if (Array.isArray(this.internalValue)) {\n   return this.internalValue.map(f => f.name).join(', ');\n  }\n\n  return this.internalValue?.name || this.placeholder;\n }\n\n private checkOverflow() {\n  if (!this.fileNamesRef) return;\n  const isOverflowing = this.fileNamesRef.scrollWidth > this.fileNamesRef.clientWidth;\n  this.showTooltip = isOverflowing;\n }\n\n private getIconColor(): string {\n  if (this.disabled) {\n   return this.inline ? 'grey_45' : 'grey_55';\n  }\n  return 'grey_70';\n }\n\n render() {\n  const hasFiles = this.hasFiles();\n  const displayText = this.getDisplayText();\n\n  return (\n   <div\n    class={{\n     'sd-file-picker': true,\n     [this.getStatusClass()]: true,\n     'sd-file-picker--inline': this.inline,\n    }}\n    onClick={this.handleClick}\n    onMouseEnter={() => (this.hovered = true)}\n    onMouseLeave={() => (this.hovered = false)}\n   >\n    <input\n     ref={el => (this.fileInputRef = el as HTMLInputElement)}\n     type=\"file\"\n     class=\"sd-file-picker__input\"\n     disabled={this.disabled}\n     multiple={this.multiple}\n     accept={this.accept}\n     onInput={this.handleFileChange}\n     aria-label={this.placeholder}\n    />\n\n    <sd-icon name=\"attachFile\" size={16} color={this.getIconColor()} class=\"sd-file-picker__icon\" />\n\n    <div\n     ref={el => (this.fileNamesRef = el as HTMLElement)}\n     class={{\n      'sd-file-picker__text': true,\n      'sd-file-picker__text--placeholder': !hasFiles,\n      'sd-file-picker__text--active': hasFiles,\n     }}\n    >\n     {displayText}\n    </div>\n\n    {!this.disabled && hasFiles && (\n     <sd-icon\n      name=\"close\"\n      size={12}\n      color=\"#888888\"\n      class=\"sd-file-picker__clear-icon\"\n      onClick={this.handleClear}\n     />\n    )}\n\n    {this.showTooltip && hasFiles && this.hovered && (\n     <div class=\"sd-file-picker__tooltip\">{displayText}</div>\n    )}\n   </div>\n  );\n }\n}\n"]}

package/dist/collection/components/sd-floating-portal/sd-floating-portal.css

@@ -0,0 +1,103 @@
+.sd-floating-menu {
+  width: fit-content;
+  padding: 12px 20px;
+  border-radius: 4px;
+  font-size: 12px;
+  position: relative;
+  box-sizing: border-box;
+  background: #07284a;
+  color: #ffffff;
+}
+.sd-floating-menu .sd-floating-menu__arrow {
+  color: #07284a;
+}
+.sd-floating-menu--default {
+  background: #07284a;
+  color: #ffffff;
+}
+.sd-floating-menu--default .sd-floating-menu__arrow {
+  color: #07284a;
+}
+.sd-floating-menu--caution {
+  background: #fce6e6;
+  color: #fb4444;
+}
+.sd-floating-menu--caution .sd-floating-menu__arrow {
+  color: #fce6e6;
+}
+.sd-floating-menu--notice {
+  background: #ffead7;
+  color: #ff6b00;
+}
+.sd-floating-menu--notice .sd-floating-menu__arrow {
+  color: #ffead7;
+}
+.sd-floating-menu--accent {
+  background: #e6f1ff;
+  color: #0075ff;
+}
+.sd-floating-menu--accent .sd-floating-menu__arrow {
+  color: #e6f1ff;
+}
+.sd-floating-menu__arrow {
+  position: absolute;
+  display: flex;
+  width: 9.6px;
+  height: 7.2px;
+}
+.sd-floating-menu__arrow svg {
+  width: 100%;
+  height: 100%;
+}
+.sd-floating-menu__arrow--top {
+  bottom: -7.2px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.sd-floating-menu__arrow--bottom {
+  top: -7.2px;
+  left: 50%;
+  transform: translateX(-50%) rotate(180deg);
+}
+.sd-floating-menu__arrow--left {
+  right: -7.2px;
+  top: 50%;
+  transform: translateY(-50%) rotate(-90deg);
+}
+.sd-floating-menu__arrow--right {
+  left: -7.2px;
+  top: 50%;
+  transform: translateY(-50%) rotate(90deg);
+}
+.sd-floating-menu__content {
+  font-size: 12px;
+  line-height: 20px;
+}
+.sd-floating-menu__content .sd-floating-menu__title {
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+.sd-floating-menu__content .sd-floating-menu__messages {
+  font-weight: 500;
+}
+.sd-floating-menu__content .sd-floating-menu__buttons {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.sd-floating-menu__content .sd-floating-menu__buttons--1 {
+  justify-content: flex-end;
+}
+.sd-floating-menu__content .sd-floating-menu__buttons--2 {
+  justify-content: space-between;
+}
+.sd-floating-menu__close-button {
+  position: absolute;
+  top: 16px;
+  right: 12px;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+}

package/dist/collection/components/{sd-tooltip-portal/sd-tooltip-portal.js → sd-floating-portal/sd-floating-portal.js}

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class SdTooltipPortal {
+export class SdFloatingPopover {
     el;
     to = 'body';
     parentRef = null;
@@ -7,7 +7,7 @@ export class SdTooltipPortal {
     zIndex = 9999;
     placement = 'bottom';
     open = false;
-    sdClose;
+    close;
     container;
     wrapper;
     rafId;
@@ -86,7 +86,7 @@ export class SdTooltipPortal {
             if (!rect.width && !rect.height)
                 return; // 요소가 보이지 않는 경우
             const [offsetX, offsetY] = this.offset;
-            const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;
+            const ARROW_SIZE = SdFloatingPopover.ARROW_SIZE;
             let top = 0;
             let left = 0;
             switch (this.placement) {
@@ -141,13 +141,22 @@ export class SdTooltipPortal {
         }
         if (this.wrapper?.contains(e.target))
             return;
-        this.sdClose.emit();
+        this.close.emit();
     }
     render() {
-        return h("slot", { key: 'f26d3228d5c0965c2303e599259a6e93307009dc' });
+        return h("slot", { key: 'f2000891d7d3bd71982f591bf953d1421f67fb5e' });
+    }
+    static get is() { return "sd-floating-portal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-floating-portal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-floating-portal.css"]
+        };
     }
-    static get is() { return "sd-tooltip-portal"; }
-    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "to": {
@@ -280,7 +289,7 @@ export class SdTooltipPortal {
     }
     static get events() {
         return [{
-                "method": "sdClose",
+                "method": "close",
                 "name": "sdClose",
                 "bubbles": true,
                 "cancelable": true,
@@ -325,4 +334,4 @@ export class SdTooltipPortal {
             }];
     }
 }
-//# sourceMappingURL=sd-tooltip-portal.js.map
+//# sourceMappingURL=sd-floating-portal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-floating-portal.js","sourceRoot":"","sources":["../../../src/components/sd-floating-portal/sd-floating-portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-floating-portal',\n styleUrl: 'sd-floating-portal.scss',\n})\nexport class SdFloatingPopover {\n @Element() el!: HTMLElement;\n @Prop() to: HTMLElement | string = 'body';\n @Prop() parentRef: HTMLElement | null = null;\n @Prop() offset: [number, number] = [0, 0];\n @Prop() zIndex: number = 9999;\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n @Prop() open: boolean = false;\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<void>;\n\n private container?: HTMLElement;\n private wrapper?: HTMLElement;\n private rafId?: number;\n private isInsideClick = false;\n\n private resizeObserver?: ResizeObserver;\n private mutationObserver?: MutationObserver;\n\n private static readonly ARROW_SIZE = 11.2;\n\n componentDidLoad() {\n  this.container = this.resolveContainer();\n  this.createWrapper();\n  this.moveSlotContent();\n\n  // DOM이 완전히 렌더링된 후 위치 계산\n  requestAnimationFrame(() => {\n   this.updatePosition();\n   if (this.wrapper) {\n    this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\n   }\n  });\n\n  this.observeParent();\n }\n\n componentDidRender() {\n  if (!this.wrapper) return;\n\n  // this.wrapper.style.display = this.open ? 'block' : 'none';\n  // if (this.open) this.updatePosition();\n\n  if (this.open) {\n   this.wrapper.style.display = 'block';\n   // RAF를 사용해서 다음 프레임에 위치 업데이트\n   requestAnimationFrame(() => {\n    this.updatePosition();\n    if (this.wrapper) {\n     this.wrapper.style.visibility = 'visible';\n    }\n   });\n  } else {\n   this.wrapper.style.display = 'none';\n   this.wrapper.style.visibility = 'hidden';\n  }\n }\n\n disconnectedCallback() {\n  if (this.rafId) cancelAnimationFrame(this.rafId);\n  this.unobserveParent();\n  this.wrapper?.remove();\n }\n\n private resolveContainer(): HTMLElement {\n  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\n  return el instanceof HTMLElement ? el : document.body;\n }\n\n private createWrapper() {\n  this.wrapper = document.createElement('div');\n  Object.assign(this.wrapper.style, {\n   position: 'absolute',\n   zIndex: this.zIndex.toString(),\n   transition: 'opacity 0.4s',\n   top: '-9999px',\n   left: '-9999px',\n  });\n  this.container!.appendChild(this.wrapper);\n }\n\n private moveSlotContent() {\n  if (!this.wrapper) return;\n  const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\n  nodes.forEach(n => this.wrapper!.appendChild(n));\n }\n\n // 위치 갱신 (scroll / resize)\n @Listen('scroll', { target: 'window' })\n @Listen('resize', { target: 'window' })\n updatePosition() {\n  if (this.rafId) cancelAnimationFrame(this.rafId);\n\n  this.rafId = requestAnimationFrame(() => {\n   if (!this.parentRef || !this.wrapper) return;\n\n   const rect = this.parentRef.getBoundingClientRect();\n   if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\n\n   const [offsetX, offsetY] = this.offset;\n   const ARROW_SIZE = SdFloatingPopover.ARROW_SIZE;\n\n   let top = 0;\n   let left = 0;\n\n   switch (this.placement) {\n    case 'top':\n     top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n     break;\n\n    case 'bottom':\n     top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n     break;\n\n    case 'left':\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n     left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\n     break;\n\n    case 'right':\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n     left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\n     break;\n   }\n\n   Object.assign(this.wrapper!.style, {\n    top: `${top}px`,\n    left: `${left}px`,\n   });\n  });\n }\n\n // parentRef의 이동 / 크기변경 감지\n private observeParent() {\n  if (!this.parentRef) return;\n\n  this.resizeObserver = new ResizeObserver(() => this.updatePosition());\n  this.resizeObserver.observe(this.parentRef);\n\n  this.mutationObserver = new MutationObserver(() => this.updatePosition());\n  this.mutationObserver.observe(document.body, {\n   childList: true,\n   subtree: true,\n  });\n }\n\n private unobserveParent() {\n  this.resizeObserver?.disconnect();\n  this.mutationObserver?.disconnect();\n }\n\n // 외부 클릭 감지\n @Listen('mousedown', { target: 'window' })\n handleMouseDown(e: MouseEvent) {\n  this.isInsideClick = !!(\n   (this.wrapper && this.wrapper.contains(e.target as Node)) ||\n   (this.parentRef && this.parentRef.contains(e.target as Node))\n  );\n }\n\n @Listen('click', { target: 'window' })\n handleWindowClick(e: MouseEvent) {\n  if (this.isInsideClick) {\n   this.isInsideClick = false;\n   return;\n  }\n  if (this.wrapper?.contains(e.target as Node)) return;\n  this.close.emit();\n }\n\n render() {\n  return <slot></slot>;\n }\n}\n"]}

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

@@ -0,0 +1,200 @@
+import { h } from "@stencil/core";
+export class SdForm {
+    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: '90203497cd0cb8910f35fd6ac91cb472f89a452f', onSubmit: e => this.onSubmit(e) }, h("slot", { key: '8776a3ecf66efffe1f01288e1e18b575d1778ef3' })));
+    }
+    static get is() { return "sd-form"; }
+    static get events() {
+        return [{
+                "method": "submitSuccess",
+                "name": "sdSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "submitFail",
+                "name": "sdValidationError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "sdRegisterField": {
+                "complexType": {
+                    "signature": "(field: ValidatableField) => Promise<void>",
+                    "parameters": [{
+                            "name": "field",
+                            "type": "ValidatableField",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ValidatableField": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-form/sd-form.tsx",
+                            "id": "src/components/sd-form/sd-form.tsx::ValidatableField"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdUnregisterField": {
+                "complexType": {
+                    "signature": "(name: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "name",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdValidate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdReset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdResetValidation": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=sd-form.js.map

package/dist/collection/components/sd-form/sd-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-form.js","sourceRoot":"","sources":["../../../src/components/sd-form/sd-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Method } from '@stencil/core';\nimport { Rule } from '../../components';\n\nexport interface ValidatableField {\n name: string;\n rules?: Rule[];\n sdValidate: () => Promise<boolean>;\n sdReset: () => void;\n sdResetValidation: () => void;\n sdFocus: () => void;\n}\n\n@Component({\n tag: 'sd-form',\n})\nexport class SdForm {\n private fields: ValidatableField[] = [];\n\n @Event({ eventName: 'sdSubmit' }) submitSuccess!: EventEmitter<void>;\n @Event({ eventName: 'sdValidationError' }) submitFail!: EventEmitter<void>;\n\n private sortFieldsByDomOrder() {\n  this.fields.sort((a, b) => {\n   const elA = (a as any).el;\n   const elB = (b as any).el;\n   if (!elA || !elB) return 0;\n   return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;\n  });\n }\n\n @Method()\n async sdRegisterField(field: ValidatableField) {\n  if (!field.name) {\n   console.warn('[sd-form] field.name is required');\n   return;\n  }\n\n  if (this.fields.find(f => f.name === field.name)) return;\n\n  this.fields.push(field);\n  this.sortFieldsByDomOrder();\n }\n\n @Method()\n async sdUnregisterField(name: string) {\n  this.fields = this.fields.filter(f => f.name !== name);\n }\n\n @Method()\n async sdValidate(): Promise<boolean> {\n  const fieldValidationResults = await Promise.all(\n   this.fields.map(async field => {\n    const valid = await field.sdValidate();\n    return {\n     field,\n     valid,\n    };\n   }),\n  );\n\n  const isInValid = fieldValidationResults.find(result => {\n   return !result.valid;\n  });\n\n  if (isInValid) {\n   isInValid.field.sdFocus();\n   (isInValid.field as any).sdScrollIntoView?.();\n  }\n\n  return !isInValid;\n }\n\n @Method()\n async sdReset() {\n  this.fields.forEach(f => f.sdReset());\n }\n\n @Method()\n async sdResetValidation() {\n  this.fields.forEach(f => f.sdResetValidation());\n }\n\n private async onSubmit(e: Event) {\n  e.preventDefault();\n\n  const valid = await this.sdValidate();\n  if (!valid) {\n   this.submitFail.emit();\n   return;\n  }\n\n  this.submitSuccess.emit();\n }\n\n render() {\n  return (\n   <form onSubmit={e => this.onSubmit(e)}>\n    <slot />\n   </form>\n  );\n }\n}\n"]}

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

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 sd-button {
-  display: inline-block;
+  display: inline-flex;
   width: fit-content;
   height: fit-content;
 }
@@ -19,6 +19,7 @@ sd-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  border: none;
 }
 .sd-button--xs {
   padding: 0 8px;
@@ -154,7 +155,7 @@ sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label {
   margin-left: 4px;
 }
 sd-guide .sd-guide--active .sd-button {
-  border: 1px solid #12b553;
+  border: 1px solid #00973c;
 }
 sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label {
   color: white !important;

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

@@ -1,5 +1,4 @@
 import { Host, h } from "@stencil/core";
-import colors from "../../styles/color.json";
 const GUIDE_LABEL = {
     help: '활용 TIP',
     pdf: 'PDF Guide',
@@ -11,12 +10,12 @@ const GUIDE_ICON = {
     help: {
         name: 'helpOutline',
         size: 20,
-        color: colors.green_75,
+        color: 'green_75',
     },
-    pdf: { name: 'pdf', size: 20, color: colors.red_75 },
-    youtube: { name: 'youtube', size: 20, color: colors.red_75 },
-    notion: { name: 'notion', size: 16, color: colors.black },
-    event: { name: 'event', size: 16, color: colors.brilliantblue_70 },
+    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' },
 };
 export class SdGuide {
     el;
@@ -48,9 +47,9 @@ export class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h(Host, { key: '73cc9c84ec4e921e83e9d0cde2971c5088cbb48f', style: {
+        return (h(Host, { key: 'a7a284528f1bf4c24cbf4c645c600bfdb8ac3397', style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '310afd874d062a91fab4b179a9a4e2f340a95175', 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, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '133bb71a98efd9a15407aad915937caec728aa38', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '4a39145ce20e1e37ebc3f639712f635231f34f2d', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: 'e71a8217b3969db9fadf9083835402cf69e62c3c', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'f035ca961013d99305b0409f406fdd3063e11155', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: 'a3d505a21abd77e85fac45a792ca7bb2b2448a6a', class: "sd-guide__popup__header" }, h("sd-icon", { key: '785bfbe594936b56f407edd2349e19076cf6ece9', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'da5dfaed05a11ccef574580a4c18341646d59e4f', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '0faa4a71c1d77d21490436323c2d80c792397991', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, h("sd-button", { key: '7a31bb752942f693d77e687b7ee433772f0fb968', 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: 'b90a2c0594d2b9a09aad39954400fc648b14b776', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '5f74f1b359de72ce3224a6d85971dc599e9eca11', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: 'c7f0fea72dec238904e6ec696f0de8d7b4d99139', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '91d375b51051cc6689d57a22615ece587592d4cd', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onClick: this.closeDropdown }), h("div", { key: '182d31b38da2082c18ed6d25d6879e8e5d5fc839', class: "sd-guide__popup__header" }, h("sd-icon", { key: '21a45f953f436528e8a5a0d08af988cb7cbbbf0c', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: 'f6f24e6584b585fb6719327fed01bff87df8b9b9', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '87fc85b3bb2bdd0e902bd7dc81cd6e36447d5241', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/collection/components/sd-guide/sd-guide.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-guide.js","sourceRoot":"","sources":["../../../src/components/sd-guide/sd-guide.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\nimport colors from '../../styles/color.json';\n\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\n\nconst GUIDE_LABEL = {\n help: '활용 TIP',\n pdf: 'PDF Guide',\n youtube: 'Video Guide',\n notion: '사용법 안내',\n event: 'Event Button',\n};\n\nconst GUIDE_ICON = {\n help: {\n  name: 'helpOutline',\n  size: 20,\n  color: colors.green_75,\n },\n pdf: { name: 'pdf', size: 20, color: colors.red_75 },\n youtube: { name: 'youtube', size: 20, color: colors.red_75 },\n notion: { name: 'notion', size: 16, color: colors.black },\n event: { name: 'event', size: 16, color: colors.brilliantblue_70 },\n} as const;\n\n@Component({\n tag: 'sd-guide',\n styleUrl: 'sd-guide.scss',\n})\nexport class SdGuide {\n @Element() el!: HTMLElement;\n\n @Prop() type: GuideType = 'help';\n @Prop() label: string = '';\n @Prop() message: string | string[] = '';\n @Prop() guideUrl: string = '';\n @Prop() popupTitle: string = '';\n @Prop() popupWidth?: number;\n\n @State() popupShow: boolean = false;\n\n private guideRef?: HTMLElement;\n\n private handleClickGuide = () => {\n  if (this.type === 'help') {\n   this.popupShow = !this.popupShow;\n   return;\n  }\n\n  if (this.guideUrl) {\n   window.open(this.guideUrl, '_blank');\n  }\n };\n\n private get guideClass(): string {\n  const classes = ['sd-guide', `sd-guide--${this.type}`];\n\n  if (this.popupShow) classes.push('sd-guide--active');\n\n  return classes.join(' ');\n }\n\n closeDropdown = () => {\n  this.popupShow = false;\n };\n\n render() {\n  const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];\n\n  return (\n   <Host\n    style={{\n     '--sd-guide-color': GUIDE_ICON[this.type].color,\n    }}\n   >\n    <sd-button\n     ref={el => (this.guideRef = el as unknown as HTMLElement)}\n     class={this.guideClass}\n     variant={this.popupShow ? 'primary' : 'outline'}\n     label={this.label || GUIDE_LABEL[this.type]}\n     size=\"sm\"\n     color={this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45'}\n     icon={iconName}\n     iconColor={this.popupShow ? 'white' : iconColor}\n     iconSize={iconSize}\n     noHover={this.popupShow}\n     onSdClick={this.handleClickGuide}\n    />\n    {this.type === 'help' && this.popupShow && (\n     <sd-portal\n      open={this.popupShow}\n      parentRef={this.guideRef}\n      onSdClose={this.closeDropdown}\n      offset={[0, 4]}\n     >\n      {/* \n       관련 일감: https://sellmate.atlassian.net/browse/SEL-6219\n       portal 위치 잡는 컨테이너 추가 개발 이후에 삭제 필요\n      */}\n      <div style={{ position: 'absolute', width: '0px', height: '0px' }}>\n       <div\n        class=\"sd-guide__popup\"\n        style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\n       >\n        <sd-button\n         class=\"sd-guide__popup__close\"\n         icon=\"close\"\n         color={colors.grey_65}\n         size=\"md\"\n         variant=\"ghost\"\n         noHover\n         onSdClick={this.closeDropdown}\n        />\n        <div class=\"sd-guide__popup__header\">\n         <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\n         <h3 class=\"sd-guide__popup__title\">{this.popupTitle || GUIDE_LABEL[this.type]}</h3>\n        </div>\n        <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\n       </div>\n      </div>\n     </sd-portal>\n    )}\n   </Host>\n  );\n }\n\n // 현재 2depth까지만 스타일 적용\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\n  const listItems: HTMLElement[] = [];\n\n  if (Array.isArray(message)) {\n   const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\n   listItems.push(...depthMsg.flat());\n  } else {\n   listItems.push(this.renderLi(message, depth));\n  }\n\n  return listItems;\n }\n\n renderLi = (message: string, depth: number) => {\n  return (\n   <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\n    <p innerHTML={message}></p>\n   </li>\n  );\n };\n}\n"]}
+{"version":3,"file":"sd-guide.js","sourceRoot":"","sources":["../../../src/components/sd-guide/sd-guide.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\n\nconst GUIDE_LABEL = {\n help: '활용 TIP',\n pdf: 'PDF Guide',\n youtube: 'Video Guide',\n notion: '사용법 안내',\n event: 'Event Button',\n};\n\nconst GUIDE_ICON = {\n help: {\n  name: 'helpOutline',\n  size: 20,\n  color: 'green_75',\n },\n pdf: { name: 'pdf', size: 20, color: 'red_75' },\n youtube: { name: 'youtube', size: 20, color: 'red_75' },\n notion: { name: 'notion', size: 16, color: 'black' },\n event: { name: 'event', size: 16, color: 'brilliantblue_70' },\n} as const;\n\n@Component({\n tag: 'sd-guide',\n styleUrl: 'sd-guide.scss',\n})\nexport class SdGuide {\n @Element() el!: HTMLElement;\n\n @Prop() type: GuideType = 'help';\n @Prop() label: string = '';\n @Prop() message: string | string[] = '';\n @Prop() guideUrl: string = '';\n @Prop() popupTitle: string = '';\n @Prop() popupWidth?: number;\n\n @State() popupShow: boolean = false;\n\n private guideRef?: HTMLElement;\n\n private handleClickGuide = () => {\n  if (this.type === 'help') {\n   this.popupShow = !this.popupShow;\n   return;\n  }\n\n  if (this.guideUrl) {\n   window.open(this.guideUrl, '_blank');\n  }\n };\n\n private get guideClass(): string {\n  const classes = ['sd-guide', `sd-guide--${this.type}`];\n\n  if (this.popupShow) classes.push('sd-guide--active');\n\n  return classes.join(' ');\n }\n\n closeDropdown = () => {\n  this.popupShow = false;\n };\n\n render() {\n  const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];\n\n  return (\n   <Host\n    style={{\n     '--sd-guide-color': GUIDE_ICON[this.type].color,\n    }}\n   >\n    <sd-button\n     ref={el => (this.guideRef = el as unknown as HTMLElement)}\n     class={this.guideClass}\n     variant={this.popupShow ? 'primary' : 'outline'}\n     label={this.label || GUIDE_LABEL[this.type]}\n     size=\"sm\"\n     color={this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45'}\n     icon={iconName}\n     iconColor={this.popupShow ? 'white' : iconColor}\n     iconSize={iconSize}\n     noHover={this.popupShow}\n     onClick={this.handleClickGuide}\n    />\n    {this.type === 'help' && this.popupShow && (\n     <sd-portal\n      open={this.popupShow}\n      parentRef={this.guideRef}\n      onSdClose={this.closeDropdown}\n      offset={[0, 4]}\n     >\n      {/* \n       관련 일감: https://sellmate.atlassian.net/browse/SEL-6219\n       portal 위치 잡는 컨테이너 추가 개발 이후에 삭제 필요\n      */}\n      <div style={{ position: 'absolute', width: '0px', height: '0px' }}>\n       <div\n        class=\"sd-guide__popup\"\n        style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\n       >\n        <sd-button\n         class=\"sd-guide__popup__close\"\n         icon=\"close\"\n         color=\"grey_65\"\n         size=\"md\"\n         variant=\"ghost\"\n         noHover\n         onClick={this.closeDropdown}\n        />\n        <div class=\"sd-guide__popup__header\">\n         <sd-icon name=\"helpOutline\" size={24} color=\"green_65\" />\n         <h3 class=\"sd-guide__popup__title\">{this.popupTitle || GUIDE_LABEL[this.type]}</h3>\n        </div>\n        <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\n       </div>\n      </div>\n     </sd-portal>\n    )}\n   </Host>\n  );\n }\n\n // 현재 2depth까지만 스타일 적용\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\n  const listItems: HTMLElement[] = [];\n\n  if (Array.isArray(message)) {\n   const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\n   listItems.push(...depthMsg.flat());\n  } else {\n   listItems.push(this.renderLi(message, depth));\n  }\n\n  return listItems;\n }\n\n renderLi = (message: string, depth: number) => {\n  return (\n   <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\n    <p innerHTML={message}></p>\n   </li>\n  );\n };\n}\n"]}

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

@@ -25,7 +25,7 @@ export class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '49cc8a7c8a0af18d920065232ef3e2127f6abb6c', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'cb8464e125ecfddc96621b57183fb26f37043f51', color: this.resolvedColor })));
+        return (h("i", { key: '851c9b6fd0ac6bc9393a21e95184e158bced5fe6', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'a10dcad82179ba12a9e9754b0b2cdd1ef548b4a5', color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get originalStyleUrls() {