@sellmate/design-system 1.0.46 → 1.0.47

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

@@ -1,158 +1,158 @@
-import * as Add from "./add/index";
-import * as Alert from "./alert/index";
-import * as AlignKorean from "./alignKorean/index";
-import * as Archive from "./archive/index";
-import * as Arrow2Down from "./arrow2Down/index";
-import * as Arrow2Left from "./arrow2Left/index";
-import * as Arrow2Right from "./arrow2Right/index";
-import * as Arrow2Up from "./arrow2Up/index";
-import * as Arrow2UpDown from "./arrow2UpDown/index";
-import * as ArrowDown from "./arrowDown/index";
-import * as ArrowLeft from "./arrowLeft/index";
-import * as ArrowLeftEnd from "./arrowLeftEnd/index";
-import * as ArrowRight from "./arrowRight/index";
-import * as ArrowRightEnd from "./arrowRightEnd/index";
-import * as ArrowUp from "./arrowUp/index";
-import * as AttachFile from "./attachFile/index";
-import * as BadgeNew from "./badgeNew/index";
-import * as Barcode from "./barcode/index";
-import * as Bell from "./bell/index";
-import * as Board from "./board/index";
-import * as Box from "./box/index";
-import * as Camera from "./camera/index";
-import * as CancelFilled from "./cancelFilled/index";
-import * as CancelOutline from "./cancelOutline/index";
-import * as CaretDown from "./caretDown/index";
-import * as CaretLeft from "./caretLeft/index";
-import * as CaretRight from "./caretRight/index";
-import * as CaretUp from "./caretUp/index";
-import * as Check from "./check/index";
-import * as CheckFilled from "./checkFilled/index";
-import * as CheckOutline from "./checkOutline/index";
-import * as ClockFilled from "./clockFilled/index";
-import * as ClockOutline from "./clockOutline/index";
-import * as Close from "./close/index";
-import * as Copy from "./copy/index";
-import * as Dashboard from "./dashboard/index";
-import * as Date from "./date/index";
-import * as Delete from "./remove/index";
-import * as Download from "./download/index";
-import * as Drag from "./drag/index";
-import * as Etc from "./etc/index";
-import * as Event from "./event/index";
-import * as Global from "./global/index";
-import * as HelpFilled from "./helpFilled/index";
-import * as HelpOutline from "./helpOutline/index";
-import * as History from "./history/index";
-import * as ImageFill from "./imageFill/index";
-import * as ImageLine from "./imageLine/index";
-import * as Inline from "./inline/index";
-import * as Line from "./line/index";
-import * as Location from "./location/index";
-import * as Logout from "./logout/index";
-import * as Minus from "./minus/index";
-import * as NotificationFilled from "./notificationFilled/index";
-import * as NotificationOutline from "./notificationOutline/index";
-import * as Notion from "./notion/index";
-import * as OutLine from "./outLine/index";
-import * as PageEdit from "./pageEdit/index";
-import * as PageEdit2 from "./pageEdit2/index";
-import * as PageMove from "./pageMove/index";
-import * as Pdf from "./pdf/index";
-import * as Print from "./print/index";
-import * as Reset from "./reset/index";
-import * as Robot from "./robot/index";
-import * as Row from "./row/index";
-import * as Save from "./save/index";
-import * as Search from "./search/index";
-import * as Setting from "./setting/index";
-import * as Star from "./star/index";
-import * as Synchronize from "./synchronize/index";
-import * as User from "./user/index";
-import * as VisibilityOff from "./visibilityOff/index";
-import * as VisibilityOn from "./visibilityOn/index";
-import * as WarehouseLine from "./warehouseLine/index";
-import * as WarehouseSolid from "./warehouseSolid/index";
-import * as WarningFilled from "./warningFilled/index";
-import * as WarningOutline from "./warningOutline/index";
-import * as Youtube from "./youtube/index";
+import { Add } from "./Add";
+import { Alert } from "./Alert";
+import { AlignKorean } from "./AlignKorean";
+import { Archive } from "./Archive";
+import { ArrowDown } from "./ArrowDown";
+import { ArrowLeft } from "./ArrowLeft";
+import { ArrowRight } from "./ArrowRight";
+import { ArrowUp } from "./ArrowUp";
+import { AttachFile } from "./AttachFile";
+import { Barcode } from "./Barcode";
+import { Bell } from "./Bell";
+import { Board } from "./Board";
+import { Box } from "./Box";
+import { Camera } from "./Camera";
+import { CancelFill } from "./CancelFill";
+import { CancelOutline } from "./CancelOutline";
+import { CaretDown } from "./CaretDown";
+import { CaretLeft } from "./CaretLeft";
+import { CaretRight } from "./CaretRight";
+import { CaretUp } from "./CaretUp";
+import { Check } from "./Check";
+import { CheckFill } from "./CheckFill";
+import { CheckOutline } from "./CheckOutline";
+import { ChevronDown } from "./ChevronDown";
+import { ChevronLeft } from "./ChevronLeft";
+import { ChevronLeftEnd } from "./ChevronLeftEnd";
+import { ChevronRight } from "./ChevronRight";
+import { ChevronRightEnd } from "./ChevronRightEnd";
+import { ChevronUp } from "./ChevronUp";
+import { ClockFill } from "./ClockFill";
+import { ClockOutline } from "./ClockOutline";
+import { Close } from "./Close";
+import { Copy } from "./Copy";
+import { Dashboard } from "./Dashboard";
+import { DateIcon } from "./Date";
+import { Download } from "./Download";
+import { Drag } from "./Drag";
+import { Edit } from "./Edit";
+import { Etc } from "./Etc";
+import { Event } from "./Event";
+import { Global } from "./Global";
+import { HelpFill } from "./HelpFill";
+import { HelpOutline } from "./HelpOutline";
+import { History } from "./History";
+import { ImageFill } from "./ImageFill";
+import { ImageOutline } from "./ImageOutline";
+import { Inline } from "./Inline";
+import { Line } from "./Line";
+import { Location } from "./Location";
+import { Logout } from "./Logout";
+import { Minus } from "./Minus";
+import { New } from "./New";
+import { NotificationFill } from "./NotificationFill";
+import { NotificationOutline } from "./NotificationOutline";
+import { Notion } from "./Notion";
+import { Outline } from "./Outline";
+import { PageEdit } from "./PageEdit";
+import { PageMove } from "./PageMove";
+import { Pdf } from "./Pdf";
+import { Print } from "./Print";
+import { Remove } from "./Remove";
+import { Reset } from "./Reset";
+import { Robot } from "./Robot";
+import { Row } from "./Row";
+import { Save } from "./Save";
+import { Search } from "./Search";
+import { Setting } from "./Setting";
+import { Star } from "./Star";
+import { Synchronize } from "./Synchronize";
+import { Updown } from "./Updown";
+import { User } from "./User";
+import { VisibilityOff } from "./VisibilityOff";
+import { VisibilityOn } from "./VisibilityOn";
+import { WarehouseFill } from "./WarehouseFill";
+import { WarehouseOutline } from "./WarehouseOutline";
+import { WarningFill } from "./WarningFill";
+import { WarningOutline } from "./WarningOutline";
+import { Youtube } from "./Youtube";
 export const Icons = {
-    ...Add,
-    ...Alert,
-    ...AlignKorean,
-    ...Archive,
-    ...Arrow2Down,
-    ...Arrow2Left,
-    ...Arrow2Right,
-    ...Arrow2Up,
-    ...Arrow2UpDown,
-    ...ArrowDown,
-    ...ArrowLeft,
-    ...ArrowLeftEnd,
-    ...ArrowRight,
-    ...ArrowRightEnd,
-    ...ArrowUp,
-    ...AttachFile,
-    ...BadgeNew,
-    ...Barcode,
-    ...Bell,
-    ...Board,
-    ...Box,
-    ...Camera,
-    ...CancelFilled,
-    ...CancelOutline,
-    ...CaretDown,
-    ...CaretLeft,
-    ...CaretRight,
-    ...CaretUp,
-    ...Check,
-    ...CheckFilled,
-    ...CheckOutline,
-    ...ClockFilled,
-    ...ClockOutline,
-    ...Close,
-    ...Copy,
-    ...Dashboard,
-    ...Date,
-    ...Delete,
-    ...Download,
-    ...Drag,
-    ...Etc,
-    ...Event,
-    ...Global,
-    ...HelpFilled,
-    ...HelpOutline,
-    ...History,
-    ...ImageFill,
-    ...ImageLine,
-    ...Inline,
-    ...Line,
-    ...Location,
-    ...Logout,
-    ...Minus,
-    ...NotificationFilled,
-    ...NotificationOutline,
-    ...Notion,
-    ...OutLine,
-    ...PageEdit,
-    ...PageEdit2,
-    ...PageMove,
-    ...Pdf,
-    ...Print,
-    ...Reset,
-    ...Robot,
-    ...Row,
-    ...Save,
-    ...Search,
-    ...Setting,
-    ...Star,
-    ...Synchronize,
-    ...User,
-    ...VisibilityOff,
-    ...VisibilityOn,
-    ...WarehouseLine,
-    ...WarehouseSolid,
-    ...WarningFilled,
-    ...WarningOutline,
-    ...Youtube,
+    add: Add,
+    alert: Alert,
+    alignKorean: AlignKorean,
+    archive: Archive,
+    arrowDown: ArrowDown,
+    arrowLeft: ArrowLeft,
+    arrowRight: ArrowRight,
+    arrowUp: ArrowUp,
+    attachFile: AttachFile,
+    barcode: Barcode,
+    bell: Bell,
+    board: Board,
+    box: Box,
+    camera: Camera,
+    cancelFill: CancelFill,
+    cancelOutline: CancelOutline,
+    caretDown: CaretDown,
+    caretLeft: CaretLeft,
+    caretRight: CaretRight,
+    caretUp: CaretUp,
+    check: Check,
+    checkFill: CheckFill,
+    checkOutline: CheckOutline,
+    chevronDown: ChevronDown,
+    chevronLeft: ChevronLeft,
+    chevronLeftEnd: ChevronLeftEnd,
+    chevronRight: ChevronRight,
+    chevronRightEnd: ChevronRightEnd,
+    chevronUp: ChevronUp,
+    clockFill: ClockFill,
+    clockOutline: ClockOutline,
+    close: Close,
+    copy: Copy,
+    dashboard: Dashboard,
+    date: DateIcon,
+    download: Download,
+    drag: Drag,
+    edit: Edit,
+    etc: Etc,
+    event: Event,
+    global: Global,
+    helpFill: HelpFill,
+    helpOutline: HelpOutline,
+    history: History,
+    imageFill: ImageFill,
+    imageOutline: ImageOutline,
+    inline: Inline,
+    line: Line,
+    location: Location,
+    logout: Logout,
+    minus: Minus,
+    new: New,
+    notificationFill: NotificationFill,
+    notificationOutline: NotificationOutline,
+    notion: Notion,
+    outline: Outline,
+    pageEdit: PageEdit,
+    pageMove: PageMove,
+    pdf: Pdf,
+    print: Print,
+    remove: Remove,
+    reset: Reset,
+    robot: Robot,
+    row: Row,
+    save: Save,
+    search: Search,
+    setting: Setting,
+    star: Star,
+    synchronize: Synchronize,
+    updown: Updown,
+    user: User,
+    visibilityOff: VisibilityOff,
+    visibilityOn: VisibilityOn,
+    warehouseFill: WarehouseFill,
+    warehouseOutline: WarehouseOutline,
+    warningFill: WarningFill,
+    warningOutline: WarningOutline,
+    youtube: Youtube,
 };

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

@@ -0,0 +1,26 @@
+import modalTokens from "../../tokens/generated/component.modal.json";
+const { modal } = modalTokens;
+const action = modal.action;
+export const ACTION_MODAL_LAYOUT = {
+    radius: Number(modal.radius),
+    bg: modal.bg,
+    headerPaddingX: Number(action.header.paddingX),
+    headerPaddingY: Number(action.header.paddingY),
+    headerGap: Number(action.header.gap),
+    bodyPaddingX: Number(action.body.paddingX),
+    bodyPaddingBottom: Number(action.body.paddingBottom),
+    footerPaddingX: Number(action.footer.paddingX),
+    footerPaddingY: Number(action.footer.paddingY),
+    footerGap: Number(action.footer.gap),
+    footerBg: action.footer.bg,
+    footerBorder: action.footer.border,
+};
+export const ACTION_MODAL_TITLE = {
+    color: action.title.color,
+    fontFamily: action.title.typography.fontFamily,
+    fontWeight: action.title.typography.fontWeight,
+    fontSize: Number(action.title.typography.fontSize),
+    lineHeight: Number(action.title.typography.lineHeight),
+};
+export const CLOSE_ICON_SIZE = Number(modal.close.size);
+export const CLOSE_ICON_COLOR = modal.close.color;

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

@@ -0,0 +1,71 @@
+sd-action-modal {
+  display: block;
+  width: fit-content;
+  min-width: 520px;
+}
+sd-action-modal .sd-action-modal {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--sd-action-modal-radius);
+  background: var(--sd-action-modal-bg);
+  box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+}
+sd-action-modal .sd-action-modal__header {
+  display: flex;
+  align-items: center;
+  gap: var(--sd-action-modal-header-gap);
+  padding: var(--sd-action-modal-header-padding-y) calc(var(--sd-action-modal-header-padding-x) + 20px) var(--sd-action-modal-header-padding-y) var(--sd-action-modal-header-padding-x);
+}
+sd-action-modal .sd-action-modal__title {
+  margin: 0;
+  color: var(--sd-action-modal-title-color);
+  font-family: var(--sd-action-modal-title-font-family);
+  font-weight: var(--sd-action-modal-title-font-weight);
+  font-size: var(--sd-action-modal-title-font-size);
+  line-height: var(--sd-action-modal-title-line-height);
+  white-space: nowrap;
+}
+sd-action-modal .sd-action-modal__header-sub {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+sd-action-modal .sd-action-modal__header-sub:empty {
+  display: none;
+}
+sd-action-modal .sd-action-modal__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  cursor: pointer;
+}
+sd-action-modal .sd-action-modal__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 0 var(--sd-action-modal-body-padding-x) var(--sd-action-modal-body-padding-bottom);
+  overflow: auto;
+}
+sd-action-modal .sd-action-modal__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--sd-action-modal-footer-gap);
+  padding: var(--sd-action-modal-footer-padding-y) var(--sd-action-modal-footer-padding-x);
+  background: var(--sd-action-modal-footer-bg);
+  border-top: 1px solid var(--sd-action-modal-footer-border);
+}
+sd-action-modal .sd-action-modal__footer > sd-button-v2 {
+  margin-left: auto;
+}
+sd-action-modal .sd-action-modal__footer-sub {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+sd-action-modal .sd-action-modal__footer-sub:empty {
+  display: none;
+}

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

@@ -0,0 +1,118 @@
+import { h } from "@stencil/core";
+import { ACTION_MODAL_LAYOUT, ACTION_MODAL_TITLE, CLOSE_ICON_SIZE, CLOSE_ICON_COLOR, } from "./sd-action-modal.config";
+export class SdActionModal {
+    title = '';
+    buttonLabel = '확인';
+    close;
+    ok;
+    render() {
+        const cssVars = {
+            '--sd-action-modal-radius': `${ACTION_MODAL_LAYOUT.radius}px`,
+            '--sd-action-modal-bg': ACTION_MODAL_LAYOUT.bg,
+            '--sd-action-modal-header-padding-x': `${ACTION_MODAL_LAYOUT.headerPaddingX}px`,
+            '--sd-action-modal-header-padding-y': `${ACTION_MODAL_LAYOUT.headerPaddingY}px`,
+            '--sd-action-modal-header-gap': `${ACTION_MODAL_LAYOUT.headerGap}px`,
+            '--sd-action-modal-body-padding-x': `${ACTION_MODAL_LAYOUT.bodyPaddingX}px`,
+            '--sd-action-modal-body-padding-bottom': `${ACTION_MODAL_LAYOUT.bodyPaddingBottom}px`,
+            '--sd-action-modal-footer-padding-x': `${ACTION_MODAL_LAYOUT.footerPaddingX}px`,
+            '--sd-action-modal-footer-padding-y': `${ACTION_MODAL_LAYOUT.footerPaddingY}px`,
+            '--sd-action-modal-footer-gap': `${ACTION_MODAL_LAYOUT.footerGap}px`,
+            '--sd-action-modal-footer-bg': ACTION_MODAL_LAYOUT.footerBg,
+            '--sd-action-modal-footer-border': ACTION_MODAL_LAYOUT.footerBorder,
+            '--sd-action-modal-title-color': ACTION_MODAL_TITLE.color,
+            '--sd-action-modal-title-font-family': ACTION_MODAL_TITLE.fontFamily,
+            '--sd-action-modal-title-font-weight': ACTION_MODAL_TITLE.fontWeight,
+            '--sd-action-modal-title-font-size': `${ACTION_MODAL_TITLE.fontSize}px`,
+            '--sd-action-modal-title-line-height': `${ACTION_MODAL_TITLE.lineHeight}px`,
+        };
+        return (h("div", { key: 'cc0c490c9b3e37b9a18288a14b785b7f64ef1919', class: "sd-action-modal", style: cssVars }, h("header", { key: '4e524f80f672fadc8e77d04ee7dfed9b0721f6b5', class: "sd-action-modal__header" }, h("h2", { key: '60397117390570e7ec8a108f596cabda93ab44f8', class: "sd-action-modal__title" }, this.title), h("div", { key: 'da05416e56022bd18cb29c97bf1d55ff7be07d77', class: "sd-action-modal__header-sub" }, h("slot", { key: '33670524b174de4993c44e2db514e8ffd25467bc', name: "header-sub-title" })), h("sd-icon", { key: 'c3ef1195d48074da7c0212e5c73c90cc9c3474b7', class: "sd-action-modal__close", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() })), h("div", { key: '8f8b1ac7802beb1729c5c8a778b1c3cd214d07ce', class: "sd-action-modal__body" }, h("slot", { key: 'b6b4c8d4afbb28473a7ad4239a0ee3943a86003b', name: "body" })), h("footer", { key: 'd6a9bf66aa0c811ad4b05d1d2f1304d63a5ec1d7', class: "sd-action-modal__footer" }, h("div", { key: '155d6ac6a480599d0e0392e1bf9a3653e2ded01f', class: "sd-action-modal__footer-sub" }, h("slot", { key: '1908ad293c7f3e519520311d0d9365b101370ba8', name: "bottom-sub-content" })), h("sd-button-v2", { key: 'aef780d6118c0ceb202b46a7d776625a6b54606d', name: "primary_md", label: this.buttonLabel, onSdClick: () => this.ok.emit() }))));
+    }
+    static get is() { return "sd-action-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-action-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-action-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "''"
+            },
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-label",
+                "defaultValue": "'\uD655\uC778'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "sdClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "ok",
+                "name": "sdOk",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -5,7 +5,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '2326b8dc9bf6da9ab601dced34113bc62e99c4de', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '40366f078c74d07515a456ae3dcd9bdb02fe5f7b', class: "sd-badge__dot" }), h("div", { key: 'b2e03701635521a46d5a0dda4b489800f6f92cf9', class: "sd-badge__label" }, this.label)));
+        return (h("div", { key: '7535760a065f5b0afa35d58c6f3017cacb31f507', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '1a42bf60039e469b0676b0266f9cbde168e8c27e', class: "sd-badge__dot" }), h("div", { key: '2296c4187b5222849dbe0472d19669376b53350f', class: "sd-badge__label" }, this.label)));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

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

@@ -100,7 +100,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: 'e600120b172ffacea3a2aa5a06316ee448193015', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: 'b4199792159ad2638e12fd5171b8a773baab69e5', class: "sd-barcode-input__content" }, h("slot", { key: '89ed4e66880446f620027c823f34e6d7e42ef2ab', name: "prefix" }), h("input", { key: 'faa6e87a724c70b8170596a58ea1723241775610', 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: 'b21ee05bfcef8cba3df94013ce1ae78c82d37bee', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'a83298bbbe51d08e63c9a3de53cf6d92d20d79e0', name: "close", color: BARCODE_INPUT_COLORS.icon.default, size: BARCODE_INPUT_ICON.iconSize, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'bf8a16c74a275b660b36fd7959ed77c08c067fe6', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '473ec98ef476f19a2d027682ccb36fd7904d8f1e', class: "sd-barcode-input__content" }, h("slot", { key: '45eb8852eb187d485af88b8f5a8552d37cb1159c', name: "prefix" }), h("input", { key: 'f521c19dbd8bab3bab44cca8dc71b04b3dcf2798', 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: 'b97b9fe1448b4bae027df77b2507e63680b9aef8', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '232f35a0a749b640027bace2b614e45b81bd8ea3', name: "close", color: BARCODE_INPUT_COLORS.icon.default, size: BARCODE_INPUT_ICON.iconSize, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
             } })))));

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

@@ -203,7 +203,7 @@ export class SdButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrow2Down\" | \"arrow2Left\" | \"arrow2Right\" | \"arrow2Up\" | \"arrow2UpDown\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"attachFile\" | \"badgeNew\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFilled\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFilled\" | \"checkOutline\" | \"clockFilled\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"etc\" | \"event\" | \"global\" | \"helpFilled\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageLine\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"notificationFilled\" | \"notificationOutline\" | \"notion\" | \"outLine\" | \"pageEdit\" | \"pageEdit2\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseLine\" | \"warehouseSolid\" | \"warningFilled\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -265,7 +265,7 @@ export class SdButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrow2Down\" | \"arrow2Left\" | \"arrow2Right\" | \"arrow2Up\" | \"arrow2UpDown\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"attachFile\" | \"badgeNew\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFilled\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFilled\" | \"checkOutline\" | \"clockFilled\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"etc\" | \"event\" | \"global\" | \"helpFilled\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageLine\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"notificationFilled\" | \"notificationOutline\" | \"notion\" | \"outLine\" | \"pageEdit\" | \"pageEdit2\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseLine\" | \"warehouseSolid\" | \"warningFilled\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",