@sellmate/design-system 1.20.0 → 1.21.0

package/dist/cjs/sd-toast-container.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -21,15 +21,22 @@ const SdToastContainer = class {
         this.toastDismiss = index.createEvent(this, "sdToastDismiss", 7);
     }
     get el() { return index.getElement(this); }
+    /** 토스트 표시 위치 */
     position = 'bottom-center';
+    /** 동시에 표시할 최대 토스트 수 */
     maxVisible = DEFAULT_MAX_VISIBLE;
+    /** 자동 닫힘 지연 시간 (ms, 0이면 자동 닫힘 없음) */
     defaultDuration = DEFAULT_DURATION;
+    /** z-index */
     zIndex = DEFAULT_Z_INDEX;
     toasts = [];
     expanded = false;
     toastRefs = new Map();
+    /** 토스트가 표시될 때 발생합니다. */
     toastShow;
+    /** 토스트가 제거될 때 발생합니다. */
     toastDismiss;
+    /** 토스트를 생성하고 ID를 반환합니다. */
     async create(options) {
         const id = `toast-${++toastIdCounter}`;
         const entry = { id, options, state: 'entering' };
@@ -54,9 +61,11 @@ const SdToastContainer = class {
         this.toastShow.emit({ id });
         return id;
     }
+    /** 지정한 ID의 토스트를 닫습니다. */
     async dismiss(id) {
         this.startDismiss(id);
     }
+    /** 모든 토스트를 닫습니다. */
     async dismissAll() {
         (this.toasts || []).forEach(t => this.startDismiss(t.id));
     }
@@ -234,7 +243,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: 'f5b2cb8f4d1286bbd8f7cd648916294397ed4742', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: 'b75aeffdddcd16267169ae99305ef5f475f53950', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/cjs/sd-toast.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const toast = {
 	icon: "16",
@@ -68,14 +68,23 @@ const SdToast = class {
         this.close = index.createEvent(this, "sdClose", 7);
         this.buttonClick = index.createEvent(this, "sdButtonClick", 7);
     }
+    /** 좌측 아이콘명 */
     icon;
+    /** 표시할 메시지 */
     message;
+    /** 우측 링크 URL */
     link;
+    /** 링크 표시 레이블 (없으면 URL 표시) */
     linkLabel;
+    /** 우측 버튼 레이블 */
     buttonLabel;
+    /** 닫기 버튼 표시 여부 */
     useClose = false;
+    /** 토스트 타입 (색상/아이콘 프리셋) */
     type = 'default';
+    /** 닫기 버튼 클릭 또는 자동 닫힘 시 발생합니다. */
     close;
+    /** 우측 버튼 클릭 시 발생합니다. */
     buttonClick;
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
@@ -84,12 +93,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (index.h("div", { key: '45a278a76dde70b17794763fa35365ac8d634194', style: {
+        return (index.h("div", { key: 'ee54d9d9821821e0c422725c94d465f1e2df7bc6', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: 'eb00957c65514153867322942ed111d24622c75b', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'd30f442041ea963e86f8558f3ed07ceb28049ae9', class: "sd-toast__icon" }, index.h("sd-icon", { key: '04e57935a4fe4344f3eb1338cfc436bef449805e', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '02270cd25d409d44bbd1d7932b074494d2cbeca1', class: "sd-toast__content" }, index.h("span", { key: '5f180c70d130fc04b16901c69a399f6effa328b9', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '4fd2adab87dbdaae94c21483f66256ce773ae965', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '2c60553150114d6d5b99a2e86b35b4a85c4a34a4', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: 'c3e01391b713286b65a05352dd39ab98790564f8', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: 'b258e4b49fe530c778c0003516a2ad159805158a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '850a02dd996c7d1ca214b887e0d3d9899972e319', class: "sd-toast__icon" }, index.h("sd-icon", { key: '50d2817b160bd767a509956338347ee09a34a845', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '0200da1ef6cfa9fcafa4cacf08998a33847038dc', class: "sd-toast__content" }, index.h("span", { key: 'af039afb2f457acded350ae2323e0bc59765a09e', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '98fdcf360ca632e9f919e01ab0dce8369a1ebe79', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '45202c0f969ab64e50265ee81f34fc14def26ce2', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '48f30258527ae7a8a96db9609f096f5d216246ff', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/cjs/sd-toggle.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const toggle = {
 	height: "28",
@@ -76,9 +76,13 @@ const SdToggle = class {
         index.registerInstance(this, hostRef);
         this.change = index.createEvent(this, "sdUpdate", 7);
     }
+    /** 현재 선택 상태 */
     value = false;
+    /** 표시할 레이블 텍스트 */
     label = '';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 상태가 변경될 때 발생합니다. */
     change;
     get toggleClasses() {
         const classes = ['sd-toggle'];
@@ -120,7 +124,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: '9ef981165b998f43ec23f3bb1cf0ef385962d7fb', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '6b6d2a89f43036f624c7bc291b2c5aa7a93c8f0a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '1a03763c5cfcb5159b69e62a9db9893297082e2b', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '099cbbb02ebf283883ab7fe748f605491ae84808', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{tooltipArrow-D3P3JC08.js → tooltipArrow-26hYtSrD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/collection/components/assets/Close.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const Close = (props) => {
     const { size = 24, ...rest } = props;
-    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M20.0693 2.86969C20.3621 2.57688 20.837 2.57705 21.1299 2.86969C21.4228 3.16258 21.4228 3.63734 21.1299 3.93024L13.0596 11.9996L21.1299 20.0699C21.4228 20.3628 21.4228 20.8375 21.1299 21.1304C20.837 21.4232 20.3622 21.4233 20.0693 21.1304L12 13.0601L3.93067 21.1304C3.63785 21.4232 3.16303 21.4231 2.87012 21.1304C2.57723 20.8375 2.57723 20.3628 2.87012 20.0699L10.9395 11.9996L2.87012 3.93024C2.57728 3.63734 2.57725 3.16256 2.87012 2.86969C3.16303 2.57716 3.63789 2.57696 3.93067 2.86969L12 10.939L20.0693 2.86969Z", fill: "currentColor" })));
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M18.8281 4.11135C19.121 3.81849 19.5958 3.81854 19.8887 4.11135C20.1816 4.40424 20.1816 4.879 19.8887 5.1719L13.0596 12L19.8887 18.8291C20.1815 19.122 20.1815 19.5968 19.8887 19.8897C19.5958 20.1822 19.1209 20.1824 18.8281 19.8897L12 13.0606L5.17188 19.8897C4.87911 20.1823 4.40422 20.1821 4.11133 19.8897C3.81844 19.5968 3.81844 19.121 4.11133 18.8281L10.9385 12L4.11133 5.1719C3.81844 4.879 3.81844 4.40424 4.11133 4.11135C4.40424 3.8186 4.87903 3.81851 5.17188 4.11135L11.999 10.9395L18.8281 4.11135Z", fill: "currentColor" })));
 };

package/dist/collection/components/sd-action-modal/sd-action-modal.js

@@ -5,11 +5,17 @@ const DEFAULT_BUTTON_PROPS = {
     label: '확인',
 };
 export class SdActionModal {
+    /** 모달 헤더에 표시할 제목 */
     modalTitle = '';
+    /** 하단 확인 버튼의 props (없으면 footer 미표시) */
     buttonProps;
+    /** 모달 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width;
+    /** 모달 높이 (숫자면 px, 문자열이면 그대로 적용) */
     height;
+    /** 닫기 버튼 클릭 시 발생 */
     close;
+    /** 확인 버튼 클릭 시 발생 */
     ok;
     render() {
         const cssVars = {
@@ -39,7 +45,7 @@ export class SdActionModal {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (h("div", { key: '91a94a7058a38f4433809705cf2fefdc3bbaefa9', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: 'e47efbc4183c9cff34d0ed66aab69521efb9e9e5', class: "sd-action-modal__header" }, h("h2", { key: '7a54d5f4decb8d6d599808feafca68e548cf173e', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '621c4a86ef0ba69833b84515c74d4972f0a6cc42', class: "sd-action-modal__header-sub" }, h("slot", { key: 'f7453ed96822804094c239cef05638934aed288e', name: "header-sub-title" })), h("sd-ghost-button", { key: '29cee49b27b6f261d719e6856f8b38a9fa590bf4', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '610840c291b3a26a82146549220ff1be470eafc2', class: "sd-action-modal__body" }, h("slot", { key: '7d390550e2ba1ae27409fb64beccf4f33f744aad', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: 'c835a2fb96066b393a8833d492d03adc2806cb07', class: "sd-action-modal__footer" }, h("div", { key: 'b46ed9f18f9e760bd5159260e2cf4b3f27d8dd23', class: "sd-action-modal__footer-sub" }, h("slot", { key: '4b9cce3c5b44b7921e82cb813a87ca5e76cd4928', name: "bottom-sub-content" })), h("sd-button", { key: '6cf14c10ef064a1c5993a48ef9f921069d6d70f6', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (h("div", { key: '1bed831bf4534b5936d151d9cf085dda4657295f', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '2e5855be8128695e85e397acc91432d573572a12', class: "sd-action-modal__header" }, h("h2", { key: '1551d022b29288f38c1288c595d66acffb7cd81a', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '8d4ec549ebebc6b2d61ad3c9dc4808d0275d3c55', class: "sd-action-modal__header-sub" }, h("slot", { key: 'aac69288e31316de16c6cdd8a5b5641b5afc2f5a', name: "header-sub-title" })), h("sd-ghost-button", { key: 'd48d05b60cdc53e5d71e7694149b2e2e77c0cde8', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'abd5db2432dea9639bfa91fb3f3019105a47e409', class: "sd-action-modal__body" }, h("slot", { key: 'debfb64dd617e6d027b9acdea2081141ad78ff5d', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: '9cf1510e0ce5aea2e5b4e504e832073f533e166e', class: "sd-action-modal__footer" }, h("div", { key: '677d0e26fe8d416419fd247c808206955df82b16', class: "sd-action-modal__footer-sub" }, h("slot", { key: '24e400c96a0fec93ea76d2a037432901e3050618', name: "bottom-sub-content" })), h("sd-button", { key: 'b52c5c7837a06f25738533dc769f5daff1169696', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {
@@ -66,7 +72,7 @@ export class SdActionModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBAA8\uB2EC \uD5E4\uB354\uC5D0 \uD45C\uC2DC\uD560 \uC81C\uBAA9"
                 },
                 "getter": false,
                 "setter": false,
@@ -93,7 +99,7 @@ export class SdActionModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD558\uB2E8 \uD655\uC778 \uBC84\uD2BC\uC758 props (\uC5C6\uC73C\uBA74 footer \uBBF8\uD45C\uC2DC)"
                 },
                 "getter": false,
                 "setter": false
@@ -110,7 +116,7 @@ export class SdActionModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBAA8\uB2EC \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -129,7 +135,7 @@ export class SdActionModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBAA8\uB2EC \uB192\uC774 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -147,7 +153,7 @@ export class SdActionModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB2EB\uAE30 \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD"
                 },
                 "complexType": {
                     "original": "void",
@@ -162,7 +168,7 @@ export class SdActionModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD655\uC778 \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD"
                 },
                 "complexType": {
                     "original": "void",

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

@@ -1,10 +1,11 @@
 import { h } from "@stencil/core";
 import { BADGE_COLOR_MAP } from "./sd-badge.config";
 export class SdBadge {
+    /** 뱃지 색상 */
     color = 'blue';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '161a6ab81185300e392e2a8cd54146185a8a6216', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '30f9ed293d34e78caf0d832da0ea5f6ce2caf1c3', class: "sd-badge__dot" })));
+        return (h("div", { key: '72a1ff1775b431b12a0765416d50256a91e34180', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '427bc1c523aff73dc52edf729a414b26f52faf68', class: "sd-badge__dot" })));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {
@@ -38,7 +39,7 @@ export class SdBadge {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC43\uC9C0 \uC0C9\uC0C1"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -3,38 +3,66 @@ import { nanoid } from "nanoid/non-secure";
 import { BARCODE_INPUT_COLORS, BARCODE_INPUT_SIZE_MAP, } from "./sd-barcode-input.config";
 export class SdBarcodeInput {
     host;
+    /** 입력값 */
     value = null;
+    /** 입력 필드 크기 */
     size = 'sm';
+    /** 필드 우측 어드온 레이블 */
     addonLabel = '';
+    /** 어드온 정렬 방향 */
     addonAlign = 'start';
+    /** 입력 placeholder */
     placeholder = '입력해 주세요.';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 입력값 지우기 버튼 표시 여부 */
     clearable = false;
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width = '';
+    /** 유효성 검사 규칙 목록 */
     rules = [];
+    /** 마운트 시 자동 포커스 여부 */
     autoFocus = false;
+    /** 필드 상태 (없으면 rules 결과로 자동 결정) */
     status;
+    /** 필드 하단 힌트 텍스트 */
     hint = '';
+    /** 에러 메시지 */
     errorMessage = '';
+    /** 네이티브 input에 추가할 클래스 */
     inputClass = '';
+    /** 읽기 전용 여부 */
     readonly = false;
+    /** 에러 상태 여부 */
     error = false;
+    /** 포커스 상태 여부 */
     focused = false;
+    /** 호버 상태 여부 */
     hovered = false;
     // props - label
+    /** 레이블 텍스트 */
     label = '';
+    /** 레이블 너비 */
     labelWidth = '';
+    /** 레이블 영역 아이콘 */
     icon = undefined;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps = null;
     //  props - custom styles
+    /** 네이티브 input에 적용할 인라인 스타일 */
     inputStyle = {};
     internalValue = null;
     nativeEl = undefined;
     formField;
+    /** 폼 연동용 name 속성 */
     name = nanoid();
+    /** 입력값 변경 시 발생합니다. */
     input;
+    /** 포커스 진입 시 발생합니다. */
     focus;
+    /** 포커스 이탈 시 발생합니다. */
     blur;
     valueChanged(newValue) {
         this.internalValue = newValue;
@@ -45,18 +73,23 @@ export class SdBarcodeInput {
             this.input?.emit(this.value);
         }
     }
+    /** 네이티브 input 엘리먼트를 반환합니다. */
     async sdGetNativeElement() {
         return this.nativeEl || null;
     }
+    /** 유효성 검사를 실행합니다. */
     async sdValidate() {
         this.formField?.sdValidate();
     }
+    /** 입력값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         this.formField?.sdReset();
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidate() {
         this.formField?.sdResetValidation();
     }
+    /** 입력 필드에 포커스를 이동합니다. */
     async sdFocus() {
         this.formField?.sdFocus();
     }
@@ -102,7 +135,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: '453566ff018ea2131361fcc18d6094491d3b04dd', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '153174624e5ec10908df6f40711a7a37039ab67b', class: "sd-barcode-input__content" }, h("slot", { key: 'ce9326a5b3157ad511171f48ee95dd2ce6a6b5dd', name: "prefix" }), h("input", { key: '069c037e8c27575f70ebfed9c2b2e61817f202f5', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '7ba3162a850e8d3d787ee44aaa807bb5be54cddc', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'f12e8083d050d96b34cad2d332d5aeb08f4f3913', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '9f9831c9f39e4723cad6567b22155ab89856c9be', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '1da8ce2ef66e48f269b79f22e6751ccf18ca9cc0', class: "sd-barcode-input__content" }, h("slot", { key: '06850214ee5118ff3d13266c1ade37902c19f379', name: "prefix" }), h("input", { key: '0384b010946b635cc6b19ddb1a83be593ba5806b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '2bb5baed7b300014e52795d3a7665a580b7ff5a2', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'fc586fdb39a1dc25eeba32c76aa86a653416c38e', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
@@ -134,7 +167,7 @@ export class SdBarcodeInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825\uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -161,7 +194,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uD544\uB4DC \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -181,7 +214,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uC6B0\uCE21 \uC5B4\uB4DC\uC628 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -208,7 +241,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5B4\uB4DC\uC628 \uC815\uB82C \uBC29\uD5A5"
                 },
                 "getter": false,
                 "setter": false,
@@ -228,7 +261,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 placeholder"
                 },
                 "getter": false,
                 "setter": false,
@@ -248,7 +281,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -268,7 +301,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825\uAC12 \uC9C0\uC6B0\uAE30 \uBC84\uD2BC \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -288,7 +321,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -315,7 +348,7 @@ export class SdBarcodeInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uADDC\uCE59 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -333,7 +366,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB9C8\uC6B4\uD2B8 \uC2DC \uC790\uB3D9 \uD3EC\uCEE4\uC2A4 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -353,7 +386,7 @@ export class SdBarcodeInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uC0C1\uD0DC (\uC5C6\uC73C\uBA74 rules \uACB0\uACFC\uB85C \uC790\uB3D9 \uACB0\uC815)"
                 },
                 "getter": false,
                 "setter": false,
@@ -372,7 +405,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uD558\uB2E8 \uD78C\uD2B8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -392,7 +425,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uBA54\uC2DC\uC9C0"
                 },
                 "getter": false,
                 "setter": false,
@@ -412,7 +445,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB124\uC774\uD2F0\uBE0C input\uC5D0 \uCD94\uAC00\uD560 \uD074\uB798\uC2A4"
                 },
                 "getter": false,
                 "setter": false,
@@ -432,7 +465,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC77D\uAE30 \uC804\uC6A9 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -452,7 +485,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -472,7 +505,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uCEE4\uC2A4 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -492,7 +525,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD638\uBC84 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -512,7 +545,7 @@ export class SdBarcodeInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -532,7 +565,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -557,7 +590,7 @@ export class SdBarcodeInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uC601\uC5ED \uC544\uC774\uCF58"
                 },
                 "getter": false,
                 "setter": false,
@@ -575,7 +608,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -602,7 +635,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uC0C1\uC138 \uC635\uC158"
                 },
                 "getter": false,
                 "setter": false,
@@ -620,7 +653,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB124\uC774\uD2F0\uBE0C input\uC5D0 \uC801\uC6A9\uD560 \uC778\uB77C\uC778 \uC2A4\uD0C0\uC77C"
                 },
                 "getter": false,
                 "setter": false,
@@ -638,7 +671,7 @@ export class SdBarcodeInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3FC \uC5F0\uB3D9\uC6A9 name \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -662,7 +695,7 @@ export class SdBarcodeInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825\uAC12 \uBCC0\uACBD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "string | number | null",
@@ -677,7 +710,7 @@ export class SdBarcodeInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uCEE4\uC2A4 \uC9C4\uC785 \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "Event",
@@ -699,7 +732,7 @@ export class SdBarcodeInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uCEE4\uC2A4 \uC774\uD0C8 \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "Event",
@@ -734,7 +767,7 @@ export class SdBarcodeInput {
                     "return": "Promise<HTMLInputElement | null>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uB124\uC774\uD2F0\uBE0C input \uC5D8\uB9AC\uBA3C\uD2B8\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -751,7 +784,7 @@ export class SdBarcodeInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC\uB97C \uC2E4\uD589\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -768,7 +801,7 @@ export class SdBarcodeInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC785\uB825\uAC12\uACFC \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB97C \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -785,7 +818,7 @@ export class SdBarcodeInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -802,7 +835,7 @@ export class SdBarcodeInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC785\uB825 \uD544\uB4DC\uC5D0 \uD3EC\uCEE4\uC2A4\uB97C \uC774\uB3D9\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }