@sellmate/design-system 1.7.3 → 1.9.0

package/dist/esm/sd-text-link.entry.js

@@ -1,17 +1,17 @@
-import { r as registerInstance, c as createEvent, h } from './index-DNWwGHho.js';
+import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
 
 const textLink = {
-	gap: "4",
-	size: {
-		icon: "16"
-	},
-	typography: {
-		"default": {
-			fontSize: "12",
-			textDecoration: "none"},
-		underline: {
-			fontSize: "12",
-			textDecoration: "underline"}
+	sm: {
+		gap: "4",
+		icon: "16",
+		typography: {
+			"default": {
+				fontSize: "12",
+				textDecoration: "none"},
+			underline: {
+				fontSize: "12",
+				textDecoration: "underline"}
+		}
 	},
 	content: {
 		disabled: "#888888"
@@ -26,15 +26,15 @@ var textLinkTokens = {
 };
 
 const TEXT_LINK_LAYOUT = {
-    gap: textLinkTokens.textLink.gap,
-    iconSize: Number(textLinkTokens.textLink.size.icon),
+    gap: textLinkTokens.textLink.sm.gap,
+    iconSize: Number(textLinkTokens.textLink.sm.icon),
     arrowFrame: 16, // TODO: 토큰 반영 후 교체
     arrowIconSize: 12, // TODO: 토큰 반영 후 교체
     arrowColor: '#888888', // TODO: 토큰 반영 후 교체 (grey_65)
 };
 const TEXT_LINK_TYPOGRAPHY = {
-    default: textLinkTokens.textLink.typography.default,
-    underline: textLinkTokens.textLink.typography.underline,
+    default: textLinkTokens.textLink.sm.typography.default,
+    underline: textLinkTokens.textLink.sm.typography.underline,
 };
 const TEXT_LINK_COLORS = {
     content: textLinkTokens.textLink.content,
@@ -52,7 +52,7 @@ const SdTextLink = class {
     icon = '';
     iconColor = '';
     labelClass = '';
-    useArrow = false;
+    rightArrow = 'none';
     underline = false;
     disabled = false;
     click;
@@ -74,7 +74,7 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (h("span", { key: '23ddcce86220acc4e6c8a585e4240ecb7baee9f8', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("span", { key: '26955b1626c09a6712b42454c6fb057e3a28a5b5', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -82,13 +82,13 @@ const SdTextLink = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, this.icon && (h("sd-icon", { key: 'd265458a74db086efa270fd165fa5fa9855b708b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '9cb7e5909036aea5b70496fbe5ca69ce10ab3035', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '5ebe27c5929095d1799d81e930b2efa8d616f5bd', class: "sd-text-link__arrow", style: {
+            } }, this.icon && (h("sd-icon", { key: 'caa180d6b2cdc054c4c2becc486ac0bb5f1abdf7', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '65940e935169cfc2fabe1b52ec8a70111f726519', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (h("span", { key: 'e7c988784da2b38087f35a209f9bd912b742a688', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, h("sd-icon", { key: '5fc735391386ac733b77bfac6947cccc61fad198', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: '29da741e45513a6d33876c4ed4316cb6d6418266', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DNWwGHho.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -232,7 +232,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 (h("div", { key: '1de55d255b75842f52e3f0a147a69493ed1a7de5', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: 'b5847f65c728fb5f31bda0f6756118fa975e4987', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DNWwGHho.js';
+import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
 
 const toast = {
 	icon: "16",
@@ -82,12 +82,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 (h("div", { key: '735fa3f949ee4c7d0178f999c02e90c829c133b4', style: {
+        return (h("div", { key: '0073ea37731ad1d8a54cb45f0eee8103159cbd65', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, h("div", { key: '4e483d858c3268bde838ddc5c5c9cb5065855326', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '007eded85c508bdd2da05b1c9d489ff2d03a4df9', class: "sd-toast__icon" }, h("sd-icon", { key: '099d5556f4b0a11f5162cb76a6166a2d662d9590', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '3825916248bc2385fe87c8aeb6d741b59738246f', class: "sd-toast__content" }, h("span", { key: 'fba817baf33179296f50d3fe4147cc99c38fbb83', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '39667765a9a72c761f0b464f78c7652e60e6dd16', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '3da2f9a5daf53de4400bfec79654b5795c3b6af4', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '2578d35dc11e06178c6902cb358bcdb8ccabbf36', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: 'e14f7d2d5e15630989c4cb19ed375a704a8a783a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '72b20a3e5920cd173ea2fa05393d991d477e948b', class: "sd-toast__icon" }, h("sd-icon", { key: 'ac2c30b63ae84da53066ba0ddc2fb211ef6b8bbf', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '605dca0bcf05059e325f0c05800c11adc55d5da5', class: "sd-toast__content" }, h("span", { key: 'ba8d91256c01bd897b177a69372f813131bd4b03', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: 'a9283bacb928dc5d92ddc2e554967928035a5fab', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '87b7d6bae7f0321e9557967f856e1b5e17697d17', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: 'e89b2cdd29115e366bb5665a483433393eb1b420', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DNWwGHho.js';
+import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
 
 const toggle = {
 	height: "28",
@@ -118,7 +118,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: 'f1b1b68270d523f7f3e40c8145f35e93df269d73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '7e07c190916e19ffe8744f6b491e92e6bf8efd36', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '83b94f28bd8364edefcbfbadccb258b10d01df92', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '9becc0c6a5337c6d16301e998a9a5bbd92b198a6', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/{tooltipArrow-Cj3AqWK0.js → tooltipArrow-DrrY_fPj.js}

@@ -1,4 +1,4 @@
-import { h } from './index-DNWwGHho.js';
+import { h } from './index-BpO2YWvq.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, 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/esm/{useDatePicker-D5RmWGOp.js → useDatePicker-DoUg--aq.js}

@@ -1,4 +1,4 @@
-import { d as datepickerTokens } from './component.datepicker-BQn6le_Y.js';
+import { d as datepickerTokens } from './component.datepicker-laVsm9VM.js';
 
 const CALENDAR_LAYOUT = {
     bg: datepickerTokens.datepicker.calendar.bg,

package/dist/types/components/sd-barcode-input/sd-barcode-input.config.d.ts

@@ -25,8 +25,6 @@ export declare const BARCODE_INPUT_COLORS: {
         default: string;
         placeholder: string;
         disabled: string;
-        hint: string;
-        errorMessage: string;
     };
     icon: {
         default: string;

package/dist/types/components/sd-date-picker/sd-date-picker.config.d.ts

@@ -26,8 +26,8 @@ export declare const DATEPICKER_COLORS: {
         disabled: string;
     };
     text: {
-        default: string;
         hint: string;
+        default: string;
         disabled: string;
     };
 };

package/dist/types/components/sd-input/sd-input.config.d.ts

@@ -25,8 +25,6 @@ export declare const INPUT_COLORS: {
         default: string;
         placeholder: string;
         disabled: string;
-        hint: string;
-        errorMessage: string;
     };
     icon: {
         default: string;

package/dist/types/components/sd-number-input/sd-number-input.config.d.ts

@@ -43,7 +43,6 @@ export declare const NUMBER_INPUT_STEPPER: {
     };
 };
 export declare const NUMBER_INPUT_HINT: {
-    color: string;
     typography: {
         fontFamily: string;
         fontWeight: string;
@@ -51,9 +50,9 @@ export declare const NUMBER_INPUT_HINT: {
         lineHeight: string;
         textDecoration: string;
     };
+    color: string;
 };
 export declare const NUMBER_INPUT_ERROR_MESSAGE: {
-    color: string;
     typography: {
         fontFamily: string;
         fontWeight: string;
@@ -61,6 +60,7 @@ export declare const NUMBER_INPUT_ERROR_MESSAGE: {
         lineHeight: string;
         textDecoration: string;
     };
+    color: string;
 };
 export declare const NUMBER_INPUT_CONTENTS_GAP: string;
 export declare const NUMBER_INPUT_BORDER_WIDTH: string;

package/dist/types/components/sd-popover/sd-popover.d.ts

@@ -6,7 +6,7 @@ export type PopoverButton = Partial<Pick<SdButton, 'name' | 'icon' | 'rightIcon'
     label: string;
     onClick?: (e: Event) => void;
 };
-export type PopoverLink = Partial<Pick<SdTextLink, 'icon' | 'iconColor' | 'useArrow' | 'underline' | 'disabled'>> & {
+export type PopoverLink = Partial<Pick<SdTextLink, 'icon' | 'iconColor' | 'rightArrow' | 'underline' | 'disabled'>> & {
     label: string;
     onClick?: (e: Event) => void;
 };

package/dist/types/components/sd-select/sd-select.config.d.ts

@@ -93,5 +93,7 @@ export declare const SEARCH_THRESHOLD = 11;
 export declare const SEARCH_DEBOUNCE_MS = 1000;
 export declare const MAX_DROPDOWN_WIDTH = "640px";
 export declare const EMPTY_MESSAGE = "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.";
+export declare function isHtmlLabel(label: string): boolean;
+export declare function extractText(html: string): string;
 export declare function countLeaves(options: SelectOption[]): number;
 export declare function filterTree(options: SelectOption[], keyword: string): SelectOption[];

package/dist/types/components/sd-text-link/sd-text-link.d.ts

@@ -4,7 +4,7 @@ export declare class SdTextLink {
     icon: string;
     iconColor: string;
     labelClass: string;
-    useArrow: boolean;
+    rightArrow: 'none' | 'chevron' | 'caret';
     underline: boolean;
     disabled: boolean;
     click: EventEmitter<void>;

package/dist/types/components/sd-textarea/sd-textarea.config.d.ts

@@ -12,8 +12,6 @@ export declare const TEXTAREA_COLORS: {
         default: string;
         placeholder: string;
         disabled: string;
-        hint: string;
-        errorMessage: string;
     };
     bg: {
         default: string;

package/dist/types/components.d.ts

@@ -1705,13 +1705,13 @@ export namespace Components {
          */
         "labelClass": string;
         /**
-          * @default false
+          * @default 'none'
          */
-        "underline": boolean;
+        "rightArrow": 'none' | 'chevron' | 'caret';
         /**
           * @default false
          */
-        "useArrow": boolean;
+        "underline": boolean;
     }
     interface SdTextarea {
         /**
@@ -4690,13 +4690,13 @@ declare namespace LocalJSX {
         "labelClass"?: string;
         "onSdClick"?: (event: SdTextLinkCustomEvent<void>) => void;
         /**
-          * @default false
+          * @default 'none'
          */
-        "underline"?: boolean;
+        "rightArrow"?: 'none' | 'chevron' | 'caret';
         /**
           * @default false
          */
-        "useArrow"?: boolean;
+        "underline"?: boolean;
     }
     interface SdTextarea {
         /**
@@ -5379,7 +5379,7 @@ declare namespace LocalJSX {
         "icon": string;
         "iconColor": string;
         "labelClass": string;
-        "useArrow": boolean;
+        "rightArrow": 'none' | 'chevron' | 'caret';
         "underline": boolean;
         "disabled": boolean;
     }