@sellmate/design-system 1.0.78 → 1.2.0

package/dist/cjs/{sd-button-v2_2.cjs.entry.js → sd-button_2.cjs.entry.js}

@@ -1,88 +1,8 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
-var sdButtonV2_config = require('./sd-button-v2.config-CnqCQQMi.js');
-var resolveColor = require('./resolveColor-LhfOKtTZ.js');
-require('./component.button-cqV-iCG5.js');
-
-const sdButtonV2Css = () => `sd-button-v2{display:inline-flex;width:fit-content;height:fit-content}.sd-button-v2{--sd-button-v2-height:36px;--sd-button-v2-padding-x:20px;--sd-button-v2-gap:8px;--sd-button-v2-font-family:inherit;--sd-button-v2-font-size:16px;--sd-button-v2-font-weight:500;--sd-button-v2-text-decoration:none;--sd-button-v2-label-min-width:auto;--sd-button-v2-icon-only-size:var(--sd-button-v2-height);--sd-button-v2-bg:#025497;--sd-button-v2-bg-hover:#004177;--sd-button-v2-border:transparent;--sd-button-v2-content:#FFFFFF;--sd-button-v2-current-content:var(--sd-button-v2-content);--sd-button-v2-current-icon:var(--sd-button-v2-content);display:inline-flex;align-items:center;justify-content:center;min-height:var(--sd-button-v2-height);min-width:var(--sd-button-v2-min-width, auto);padding:0 var(--sd-button-v2-padding-x);border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-v2-border);border-radius:var(--sd-button-button-radius-sm, 4px);background:var(--sd-button-v2-bg);color:var(--sd-button-v2-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-button-v2-font-family);font-size:var(--sd-button-v2-font-size);font-weight:var(--sd-button-v2-font-weight);line-height:1;text-decoration:var(--sd-button-v2-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-button-v2:hover:not(.sd-button-v2--disabled){background:var(--sd-button-v2-bg-hover)}.sd-button-v2:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-button-v2-accent)}.sd-button-v2--xs{--sd-button-v2-height:var(--sd-button-button-xs-height, 24px);--sd-button-v2-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-button-v2-gap:var(--sd-button-button-xs-gap, 4px);--sd-button-v2-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-button-v2-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-button-xs-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-xs-min-width, 36px);--sd-button-v2-icon-only-size:var(--sd-button-button-icon-only-xs-width, var(--sd-button-v2-height))}.sd-button-v2--sm{--sd-button-v2-height:var(--sd-button-button-sm-height, 28px);--sd-button-v2-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-button-v2-gap:var(--sd-button-button-sm-gap, 6px);--sd-button-v2-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-button-v2-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-button-sm-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-sm-min-width, 70px);--sd-button-v2-icon-only-size:var(--sd-button-button-icon-only-sm-width, var(--sd-button-v2-height))}.sd-button-v2--md{--sd-button-v2-height:var(--sd-button-button-md-height, 36px);--sd-button-v2-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-button-v2-gap:var(--sd-button-button-md-gap, 8px);--sd-button-v2-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-button-v2-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-md-min-width, 100px);--sd-button-v2-icon-only-size:var(--sd-button-button-icon-only-md-width, var(--sd-button-v2-height));border-radius:var(--sd-button-button-radius-md, 6px)}.sd-button-v2--lg{--sd-button-v2-height:var(--sd-button-button-lg-height, 62px);--sd-button-v2-padding-x:var(--sd-button-button-lg-padding-x, 28px);--sd-button-v2-gap:var(--sd-button-button-lg-gap, 12px);--sd-button-v2-font-family:var(--sd-button-button-lg-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-button-lg-typography-font-size, 18px);--sd-button-v2-font-weight:var(--sd-button-button-lg-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-button-lg-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-lg-min-width, 120px);--sd-button-v2-icon-only-size:var(--sd-button-button-icon-only-lg-width, var(--sd-button-v2-height));border-radius:var(--sd-button-button-radius-md, 6px)}.sd-button-v2--has-label{--sd-button-v2-min-width:var(--sd-button-v2-label-min-width, auto)}.sd-button-v2--icon-only{width:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));min-width:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));height:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));padding:0}.sd-button-v2--icon-only .sd-button-v2__content{gap:0}.sd-button-v2--disabled{border-color:var(--sd-button-button-border-disabled, #CCCCCC);background:var(--sd-button-button-bg-disabled, #E1E1E1);--sd-button-v2-current-content:var(--sd-button-button-text-disabled, #888888);--sd-button-v2-current-icon:var(--sd-button-button-icon-disabled, #BBBBBB);cursor:not-allowed}.sd-button-v2 .sd-button-v2__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-v2-gap)}.sd-button-v2 .sd-button-v2__label{font:inherit}`;
-
-const SdButtonV2 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.click = index.createEvent(this, "sdClick", 7);
-    }
-    name = 'primary_sm';
-    label = '';
-    icon;
-    rightIcon;
-    ariaLabel = '';
-    disabled = false;
-    type = 'button';
-    click;
-    hasWarnedMissingAriaLabel = false;
-    handleClick = (event) => {
-        if (this.disabled) {
-            event.preventDefault();
-            return;
-        }
-        this.click.emit(event);
-    };
-    get resolvedConfig() {
-        if (!sdButtonV2_config.isButtonV2Name(this.name)) {
-            throw new Error(`Invalid sd-button-v2 name: ${this.name}`);
-        }
-        const config = sdButtonV2_config.BUTTON_CONFIG[this.name];
-        const preset = sdButtonV2_config.getPresetName(this.name);
-        return {
-            config,
-            preset,
-        };
-    }
-    getButtonClasses(preset, size, hasLabel, iconOnly) {
-        const classes = ['sd-button-v2', `sd-button-v2--${preset}`, `sd-button-v2--${size}`];
-        if (this.disabled) {
-            classes.push('sd-button-v2--disabled');
-        }
-        if (iconOnly) {
-            classes.push('sd-button-v2--icon-only');
-        }
-        if (hasLabel) {
-            classes.push('sd-button-v2--has-label');
-        }
-        return classes.join(' ');
-    }
-    componentWillRender() {
-        this.warnIfMissingAriaLabel();
-    }
-    warnIfMissingAriaLabel() {
-        const iconOnly = !this.label && (Boolean(this.icon) || Boolean(this.rightIcon));
-        const missingAriaLabel = iconOnly && !this.ariaLabel.trim();
-        if (!missingAriaLabel) {
-            this.hasWarnedMissingAriaLabel = false;
-            return;
-        }
-        if (this.hasWarnedMissingAriaLabel) {
-            return;
-        }
-        console.warn(`[sd-button-v2] icon-only buttons require \`ariaLabel\`. Received name="${this.name}" icon="${this.icon ?? this.rightIcon}".`);
-        this.hasWarnedMissingAriaLabel = true;
-    }
-    render() {
-        const { config, preset } = this.resolvedConfig;
-        const hasLabel = Boolean(this.label);
-        const iconOnly = !this.label && Boolean(this.icon) !== Boolean(this.rightIcon);
-        const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        return (index.h("button", { key: 'e3e2074fbe2b48117d5834efac7ff3036757aab3', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
-                '--sd-button-v2-bg': config.color,
-                '--sd-button-v2-bg-hover': sdButtonV2_config.PRESET_HOVER_BACKGROUNDS[preset],
-                '--sd-button-v2-border': sdButtonV2_config.PRESET_BORDER_COLORS[preset],
-                '--sd-button-v2-content': sdButtonV2_config.PRESET_CONTENT_COLORS[preset],
-                '--sd-button-v2-accent': sdButtonV2_config.BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, index.h("span", { key: '90ea3bf42c9e16c836c6fdfdf26a74c8a848c31b', class: "sd-button-v2__content" }, this.icon && (index.h("sd-icon", { key: 'b9f4a1c42ae866aac1f65f4bbedb282ae0c10c72', class: "sd-button-v2__icon", name: this.icon, size: sdButtonV2_config.BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && index.h("span", { key: '5e5dfbabdbec86c2da625c6a70fcda10303d0e50', class: "sd-button-v2__label" }, this.label), this.rightIcon && (index.h("sd-icon", { key: 'f1c3a74b6d7e83fa755c97f83c6d97dea8411537', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: sdButtonV2_config.BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
-    }
-};
-SdButtonV2.style = sdButtonV2Css();
+var index = require('./index-Cw-78mnC.js');
+var sdButton_config = require('./sd-button.config-DH08UNfl.js');
+var resolveColor = require('./resolveColor-B0hzQNLG.js');
 
 const Add = (props) => {
     const { size = 24, ...rest } = props;
@@ -199,6 +119,16 @@ const CheckOutline = (props) => {
     return (index.h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, index.h("path", { d: "M17.0693 8.46973C17.3622 8.1769 17.837 8.17703 18.1299 8.46973C18.4228 8.76262 18.4228 9.23738 18.1299 9.53027L11.5195 16.1416C11.129 16.5321 10.495 16.5321 10.1045 16.1416L6.03906 12.0752C5.7464 11.7823 5.74625 11.3075 6.03906 11.0146C6.33191 10.7223 6.80684 10.7221 7.09961 11.0146L10.8125 14.7275L17.0693 8.46973Z", fill: "currentColor" }), index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 0.25C18.4893 0.25 23.75 5.51065 23.75 12C23.75 18.4893 18.4893 23.75 12 23.75C5.51065 23.75 0.25 18.4893 0.25 12C0.25 5.51065 5.51065 0.25 12 0.25ZM12 1.75C6.33908 1.75 1.75 6.33908 1.75 12C1.75 17.6609 6.33908 22.25 12 22.25C17.6609 22.25 22.25 17.6609 22.25 12C22.25 6.33908 17.6609 1.75 12 1.75Z", fill: "currentColor" })));
 };
 
+const CheckboxCheck = (props) => {
+    const { size = 12, ...rest } = props;
+    return (index.h("svg", { width: size, height: size, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, index.h("path", { d: "M10.5962 3.19751L5.02773 8.76598C4.97891 8.81479 4.89977 8.81479 4.85095 8.76598L1.40381 5.31883", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round" })));
+};
+
+const CheckboxIndeterminate = (props) => {
+    const { size = 12, ...rest } = props;
+    return (index.h("svg", { width: size, height: size, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, index.h("path", { d: "M2 6H10", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round" })));
+};
+
 const ChevronDown = (props) => {
     const { size = 24, ...rest } = props;
     return (index.h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, index.h("path", { d: "M20.676 6.96383C20.9721 6.6744 21.447 6.67953 21.7365 6.97555C22.0259 7.2716 22.0207 7.7465 21.7248 8.03609L12.6994 16.8652C12.3108 17.2453 11.6897 17.2452 11.301 16.8652L2.27559 8.03609C1.97951 7.74645 1.97425 7.27164 2.26388 6.97555C2.55352 6.67946 3.02833 6.6742 3.32442 6.96383L12.0002 15.4502L20.676 6.96383Z", fill: "currentColor" })));
@@ -498,6 +428,8 @@ const Icons = {
     check: Check,
     checkFill: CheckFill,
     checkOutline: CheckOutline,
+    checkboxCheck: CheckboxCheck,
+    checkboxIndeterminate: CheckboxIndeterminate,
     chevronDown: ChevronDown,
     chevronLeft: ChevronLeft,
     chevronLeftEnd: ChevronLeftEnd,
@@ -555,6 +487,91 @@ const Icons = {
     youtube: Youtube,
 };
 
+const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:36px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);--sd-button-bg:#025497;--sd-button-bg-hover:#004177;--sd-button-border:transparent;--sd-button-content:#FFFFFF;--sd-button-current-content:var(--sd-button-content);--sd-button-current-icon:var(--sd-button-content);display:inline-flex;align-items:center;justify-content:center;min-height:var(--sd-button-height);min-width:var(--sd-button-min-width, auto);padding:0 var(--sd-button-padding-x);border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-border);border-radius:var(--sd-button-button-radius-sm, 4px);background:var(--sd-button-bg);color:var(--sd-button-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);line-height:1;text-decoration:var(--sd-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-button:hover:not(.sd-button--disabled){background:var(--sd-button-bg-hover)}.sd-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-button-accent)}.sd-button--xs{--sd-button-height:var(--sd-button-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, 36px);--sd-button-icon-only-size:var(--sd-button-button-icon-only-xs-width, var(--sd-button-height))}.sd-button--sm{--sd-button-height:var(--sd-button-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, 70px);--sd-button-icon-only-size:var(--sd-button-button-icon-only-sm-width, var(--sd-button-height))}.sd-button--md{--sd-button-height:var(--sd-button-button-md-height, 36px);--sd-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, 100px);--sd-button-icon-only-size:var(--sd-button-button-icon-only-md-width, var(--sd-button-height));border-radius:var(--sd-button-button-radius-md, 6px)}.sd-button--lg{--sd-button-height:var(--sd-button-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, 120px);--sd-button-icon-only-size:var(--sd-button-button-icon-only-lg-width, var(--sd-button-height));border-radius:var(--sd-button-button-radius-md, 6px)}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.sd-button--icon-only{width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height));padding:0}.sd-button--icon-only .sd-button__content{gap:0}.sd-button--disabled{border-color:var(--sd-button-button-border-disabled, #CCCCCC);background:var(--sd-button-button-bg-disabled, #E1E1E1);--sd-button-current-content:var(--sd-button-button-text-disabled, #888888);--sd-button-current-icon:var(--sd-button-button-icon-disabled, #BBBBBB);cursor:not-allowed}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap)}.sd-button .sd-button__label{font:inherit}`;
+
+const isValidIcon = (icon) => icon != null && icon in Icons;
+const SdButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.click = index.createEvent(this, "sdClick", 7);
+    }
+    name = 'primary_sm';
+    label = '';
+    icon;
+    rightIcon;
+    ariaLabel = '';
+    disabled = false;
+    type = 'button';
+    click;
+    hasWarnedMissingAriaLabel = false;
+    handleClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.click.emit(event);
+    };
+    get resolvedName() {
+        const name = this.name || 'primary_sm';
+        if (!sdButton_config.isButtonName(name)) {
+            throw new Error(`Invalid sd-button name: "${name}"`);
+        }
+        return name;
+    }
+    get resolvedConfig() {
+        const name = this.resolvedName;
+        return {
+            config: sdButton_config.BUTTON_CONFIG[name],
+            preset: sdButton_config.getPresetName(name),
+        };
+    }
+    getButtonClasses(preset, size, hasLabel, iconOnly) {
+        const classes = ['sd-button', `sd-button--${preset}`, `sd-button--${size}`];
+        if (this.disabled) {
+            classes.push('sd-button--disabled');
+        }
+        if (iconOnly) {
+            classes.push('sd-button--icon-only');
+        }
+        if (hasLabel) {
+            classes.push('sd-button--has-label');
+        }
+        return classes.join(' ');
+    }
+    componentWillRender() {
+        this.warnIfMissingAriaLabel();
+    }
+    warnIfMissingAriaLabel() {
+        const iconOnly = this.label === '' && (isValidIcon(this.icon) || isValidIcon(this.rightIcon));
+        const missingAriaLabel = iconOnly && this.ariaLabel.trim() === '';
+        if (!missingAriaLabel) {
+            this.hasWarnedMissingAriaLabel = false;
+            return;
+        }
+        if (this.hasWarnedMissingAriaLabel) {
+            return;
+        }
+        console.warn(`[sd-button] icon-only buttons require \`ariaLabel\`. Received name="${this.name}" icon="${this.icon ?? this.rightIcon}".`);
+        this.hasWarnedMissingAriaLabel = true;
+    }
+    render() {
+        const { config, preset } = this.resolvedConfig;
+        const hasLabel = Boolean(this.label);
+        const validIcon = isValidIcon(this.icon) ? this.icon : undefined;
+        const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
+        const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
+        const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
+        return (index.h("button", { key: 'c9f4491915f6ba4fdbf54df19b008bd32edbf925', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
+                '--sd-button-bg': config.color,
+                '--sd-button-bg-hover': sdButton_config.PRESET_HOVER_BACKGROUNDS[preset],
+                '--sd-button-border': sdButton_config.PRESET_BORDER_COLORS[preset],
+                '--sd-button-content': sdButton_config.PRESET_CONTENT_COLORS[preset],
+                '--sd-button-accent': sdButton_config.BUTTON_FOCUS_RING_COLOR,
+            }, onClick: this.handleClick }, index.h("span", { key: '44fc95645e6eea6aecee9978887f4309d9d31342', class: "sd-button__content" }, validIcon && (index.h("sd-icon", { key: 'ae1d9a3e8eb40ed0aecac0e70af1341ac90767c8', class: "sd-button__icon", name: validIcon, size: sdButton_config.BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && index.h("span", { key: 'ab7bbf916c3b0432db6313050d7facfe919794de', class: "sd-button__label" }, this.label), validRightIcon && (index.h("sd-icon", { key: 'a533ef5439abe1729ccfacc9f8e44263b56434e5', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: sdButton_config.BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
+    }
+};
+SdButton.style = sdButtonCss();
+
 const sdIconCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}`;
 
 const SdIcon = class {
@@ -574,7 +591,7 @@ const SdIcon = class {
     iconStyle = {};
     getIconClasses() {
         const classes = ['sd-icon'];
-        if (this.rotate) {
+        if (this.rotate !== undefined && this.rotate !== 0) {
             classes.push(`sd-icon--rotate-${this.rotate}`);
         }
         return classes.join(' ');
@@ -592,5 +609,5 @@ const SdIcon = class {
 };
 SdIcon.style = sdIconCss();
 
-exports.sd_button_v2 = SdButtonV2;
+exports.sd_button = SdButton;
 exports.sd_icon = SdIcon;

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-Cw-78mnC.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
-var resolveColor = require('./resolveColor-LhfOKtTZ.js');
+var resolveColor = require('./resolveColor-B0hzQNLG.js');
 
 const sdCalendarCss = () => `.sd-calendar.sc-sd-calendar{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;background:white}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav.sc-sd-calendar,.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav.sc-sd-calendar{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav.sc-sd-calendar button.sc-sd-calendar,.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav.sc-sd-calendar button.sc-sd-calendar{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav__current.sc-sd-calendar{width:40px;text-align:center}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav__current.sc-sd-calendar{width:100px;text-align:center}.sd-calendar.sc-sd-calendar .sd-calendar__days.sc-sd-calendar{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-calendar.sc-sd-calendar .sd-calendar__days.sc-sd-calendar .day.sc-sd-calendar{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-calendar.sc-sd-calendar .sd-calendar__body.sc-sd-calendar{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));grid-auto-rows:min-content}.sd-calendar.sc-sd-calendar .sd-calendar__cell.sc-sd-calendar{display:flex;flex-direction:column;align-items:center}.sd-calendar.sc-sd-calendar .sd-calendar__dots.sc-sd-calendar{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;align-items:center;min-height:8px;max-width:28px}.sd-calendar.sc-sd-calendar .sd-calendar__dot.sc-sd-calendar{width:5px;height:5px;border-radius:50%;display:inline-block}.sd-calendar.sc-sd-calendar .sd-calendar__legend.sc-sd-calendar{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:16px;padding:12px 5px 0;border-top:1px solid #E5E5E5}.sd-calendar.sc-sd-calendar .sd-calendar__legend-item.sc-sd-calendar{display:flex;align-items:center;gap:4px}.sd-calendar.sc-sd-calendar .sd-calendar__legend-dot.sc-sd-calendar{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}.sd-calendar.sc-sd-calendar .sd-calendar__legend-label.sc-sd-calendar{font-size:11px;color:#888888;line-height:1}`;
 
@@ -57,29 +57,29 @@ const SdCalendar = class {
         this.viewChange.emit({ year: newYear, month: newMonth });
     }
     handleDateClick(day) {
-        if (!day)
+        if (day === 0)
             return;
         const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);
         this.value = date;
         this.select.emit(date);
     }
     isDisabledDate(date) {
-        if (!this.selectable)
+        if (this.selectable === undefined)
             return false;
         const [startSelectable, endSelectable] = this.selectable;
-        if (startSelectable && endSelectable) {
+        if (startSelectable !== '' && endSelectable !== '') {
             return date < startSelectable || date > endSelectable;
         }
-        if (startSelectable) {
+        if (startSelectable !== '') {
             return date < startSelectable;
         }
-        if (endSelectable) {
+        if (endSelectable !== '') {
             return date > endSelectable;
         }
         return false;
     }
     getEventColor(eventName) {
-        if (this.eventColors?.[eventName]) {
+        if (this.eventColors?.[eventName] !== undefined && this.eventColors[eventName] !== '') {
             return resolveColor.resolveColor(this.eventColors[eventName]);
         }
         const allEventNames = this.getAllEventNames();
@@ -107,24 +107,24 @@ const SdCalendar = class {
     }
     render() {
         const allEventNames = this.getAllEventNames();
-        return (index.h("div", { key: '149ca9ae588a7bd2d70ecf1bf13cc639c99f7da9', class: "sd-calendar" }, index.h("div", { key: '65f58d53fbaf35cee16007bad0b5e56dd208393e', class: "sd-calendar__header" }, index.h("div", { key: '76709fd094edaece5ede720a983d1103801ba76d', class: "year-nav" }, index.h("button", { key: '6d46cfa4cb1d12507ba7570cb6c0bb88bcba3402', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
+        return (index.h("div", { key: '3c3a6af518a3e96dd5d5d553ab2a00b9dd882221', class: "sd-calendar" }, index.h("div", { key: '660e96fcefe539b69ae7b69bb7a7eb209f40b02f', class: "sd-calendar__header" }, index.h("div", { key: '609b4d2e552adb526deefbf0719284c94ab01c21', class: "year-nav" }, index.h("button", { key: 'dc80f2e4fa441b9ed2e0a475f7982e7339c0cda7', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
                 this.currentYear = this.currentYear - 1;
                 this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, index.h("sd-icon", { key: '1319ec1fa0f2533a5d02853cb7638b1f1c10e050', name: "arrowLeft", size: "12", color: "grey_45" })), index.h("span", { key: '678b705cd95dc499975e071f1607f26bdd50c36d', class: "year-nav__current" }, this.currentYear), index.h("button", { key: '1f5c3a0cd6108da5ed1beb10bd6af4ea5f22cf4c', type: "button", name: "next-year", title: "Next Year", onClick: () => {
+            } }, index.h("sd-icon", { key: 'ff62edabb67364704a4bfbcfc6f1658ad3d72408', name: "arrowLeft", size: "12", color: "grey_45" })), index.h("span", { key: '0829c746b8537196652e7c40b3babea14ae8053e', class: "year-nav__current" }, this.currentYear), index.h("button", { key: '3d288e5091445f2ed429de4aebb0d03f29eb6cc8', type: "button", name: "next-year", title: "Next Year", onClick: () => {
                 this.currentYear = this.currentYear + 1;
                 this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, index.h("sd-icon", { key: '9dff93aef0996c3679a6a8c93c0fce1ea390f4aa', name: "arrowRight", size: "12", color: "grey_45" }))), index.h("div", { key: '9a6840420da580096fbf24d2c4df656114e23e6e', class: "month-nav" }, index.h("button", { key: '94bf7598e5b80d6deb407f607034ed6e9f88151f', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '4ab19da5f6a12bf37b3c4d9aac4e2283762799e8', name: "arrowLeft", size: "12", color: "grey_45" })), index.h("span", { key: 'c207959595c107cae05a7cbe1d169357b063a29d', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: 'fe319c8b26d9259bcba2b1f251bb827977e6afdc', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: 'af5bb1c06058b6ce22c8d7ffacace2f558bdb013', name: "arrowRight", size: "12", color: "grey_45" })))), index.h("div", { key: 'ca66c0d7744970364f7d5e11e61014471df3325b', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: '9d42c252b8b42754aedc64156ec1dbe45200cef0', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
+            } }, index.h("sd-icon", { key: '5546ced1930082c68035db8b506b6ef2e953e305', name: "arrowRight", size: "12", color: "grey_45" }))), index.h("div", { key: '1db95c9f31c1a11b58a6f1ce4a13b9d6388f7994', class: "month-nav" }, index.h("button", { key: '2c5659945f3e0807a57ba22eb34576184e6ebf50', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '7994e2bf63fc45ffb7d29b49ad279223a1a12a98', name: "arrowLeft", size: "12", color: "grey_45" })), index.h("span", { key: 'a8afd7592b3fba13a4560387bb759f4858273a85', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: 'b3d21b13823bd674c43c1782b66df38010fcfa59', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: '8605340fe8128b6a55328c97dc84481092009c76', name: "arrowRight", size: "12", color: "grey_45" })))), index.h("div", { key: '9312ff7f3af76aced7189f121c71ff252a92a71d', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: 'cb93d417204b3bad65074e06e491038fe06b1389', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,
         ].map((day, idx) => {
             const formattedDate = this.dateUtil.formatDate(this.currentYear, this.currentMonth, Number(day));
-            const dateEvents = day ? this.getEventsForDate(formattedDate) : [];
+            const dateEvents = day !== 0 ? this.getEventsForDate(formattedDate) : [];
             const uniqueEvents = [...new Set(dateEvents)];
-            return (index.h("div", { class: "sd-calendar__cell", key: `${day}_${idx}` }, index.h("sd-date-box", { date: !day ? '' : Number(day), selected: this.value === formattedDate, isToday: useDatePicker.today === formattedDate, disabled: !day ? true : this.isDisabledDate(formattedDate), onClick: !this.isDisabledDate(formattedDate) && day
+            return (index.h("div", { class: "sd-calendar__cell", key: `${day}_${idx}` }, index.h("sd-date-box", { date: day === 0 ? '' : Number(day), selected: this.value === formattedDate, isToday: useDatePicker.today === formattedDate, disabled: day === 0 ? true : this.isDisabledDate(formattedDate), onClick: !this.isDisabledDate(formattedDate) && day !== 0
                     ? () => this.handleDateClick(Number(day))
-                    : undefined }), this.events && (index.h("div", { class: "sd-calendar__dots" }, uniqueEvents.map(eventName => (index.h("span", { key: eventName, class: "sd-calendar__dot", style: { backgroundColor: this.getEventColor(eventName) } })))))));
-        })), allEventNames.length > 0 && (index.h("div", { key: 'dac97204484b1def1fd3d73939ef64ef6969bce2', class: "sd-calendar__legend" }, allEventNames.map(name => (index.h("div", { key: name, class: "sd-calendar__legend-item" }, index.h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), index.h("span", { class: "sd-calendar__legend-label" }, name))))))));
+                    : undefined }), this.events !== undefined && (index.h("div", { class: "sd-calendar__dots" }, uniqueEvents.map(eventName => (index.h("span", { key: eventName, class: "sd-calendar__dot", style: { backgroundColor: this.getEventColor(eventName) } })))))));
+        })), allEventNames.length > 0 && (index.h("div", { key: '0556e06bcd0bab75b61c60181d9b203cb6ad4741', class: "sd-calendar__legend" }, allEventNames.map(name => (index.h("div", { key: name, class: "sd-calendar__legend-item" }, index.h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), index.h("span", { class: "sd-calendar__legend-label" }, name))))))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #E1E1E1}`;
 
@@ -11,7 +11,7 @@ const SdCard = class {
     bordered = false;
     sdClass = '';
     render() {
-        return (index.h(index.Fragment, { key: 'ce09898d7396b093f0f292700d5d6bd8b6249ad3' }, index.h("div", { key: 'df584d42ecf16b8ea3618238fb58e77cb7e80d9e', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: 'e031effb829371ca8c001bcc5596b4c9d01c8951' }))));
+        return (index.h(index.Fragment, { key: '2700ffa3af5b6b35882c396a838d9da2e866ee4b' }, index.h("div", { key: '3d3aeaac318fc089c42ae4348bc72015d4476276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: 'e72f00bc8c209644baf5f431ce485fb5b691f354' }))));
     }
 };
 SdCard.style = sdCardCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const checkbox = {
 	size: "16",
@@ -190,13 +190,13 @@ const SdCheckbox = class {
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (index.h("label", { key: '0e4a142753f8ceda6356c184f1f227e9f11b8a43', class: this.checkboxClasses, style: cssVars }, index.h("input", { key: '53f7bac2fbc2c197ddcc2bb3cd0779598155af4c', type: "checkbox", ref: el => {
+        return (index.h("label", { key: '6b1ad950ce2f0b8e734efab6889a46064f7ef32a', class: this.checkboxClasses, style: cssVars }, index.h("input", { key: 'ee2fd70d61db2a5de6eab26dc07128e6158540e5', type: "checkbox", ref: el => {
                 this.inputEl = el;
-            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), index.h("div", { key: '0725d9e2ed16bec52b6340c9633ffed021558560', class: "sd-checkbox__bg" }, this.isChecked !== false ? (index.h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
+            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), index.h("div", { key: '234e0e4100da6f1a5f65fb4f32cb4d8e1ba018fd', class: "sd-checkbox__bg" }, this.isChecked !== false ? (index.h("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
                 ? CHECKBOX_COLORS.checked.iconDisabled
                 : this.inverse
                     ? CHECKBOX_COLORS.checked.iconInverse
-                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && index.h("span", { key: 'dcb8b972e88aa06d0a338ce8d2e2b86a0fbd8f3f', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && index.h("span", { key: '15afb8e3b31201febd15bb85d24ee9c9b246d1d0', class: "sd-checkbox__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const chip = {
 	height: "24",
@@ -253,7 +253,7 @@ const SdChip = class {
         });
     }
     unregisterFromForm() {
-        if (!this.name)
+        if (this.name === '')
             return;
         const formEl = this.el.closest('sd-form');
         formEl?.componentOnReady().then(form => {
@@ -291,12 +291,12 @@ const SdChip = class {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (index.h("span", { key: 'a821268b6bc2d04bd311b238009b750424e04e72', class: {
+        return (index.h("span", { key: '0addb8566b639d05921b9320b99abab7f1d67899', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,
                 'sd-chip--editable': !this.disabled,
-            }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled || this.isEditing ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, style: cssVars, onClick: this.handleChipClick, onKeyDown: this.handleChipKeyDown }, this.isEditing ? (index.h("span", { key: "chip-input", ref: el => (this.inputEl = el), class: "sd-chip__input", contentEditable: !this.disabled, "data-placeholder": this.placeholder, spellcheck: false, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onBlur: this.handleInputBlur, onPaste: this.handlePaste, onClick: event => event.stopPropagation() })) : ([
+            }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled || this.isEditing ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, style: cssVars, onClick: this.handleChipClick, onKeyDown: this.handleChipKeyDown }, this.isEditing ? (index.h("span", { key: "chip-input", ref: el => (this.inputEl = el), class: "sd-chip__input", role: "textbox", tabindex: this.disabled ? -1 : 0, contentEditable: !this.disabled, "data-placeholder": this.placeholder, spellcheck: false, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onBlur: this.handleInputBlur, onPaste: this.handlePaste, onClick: event => event.stopPropagation() })) : ([
             index.h("span", { key: "chip-label", class: "sd-chip__label" }, this.internalValue),
             !this.disabled && (index.h("sd-ghost-button", { key: "chip-remove", class: "sd-chip__remove", icon: "close", size: "xxs", ariaLabel: "remove", onClick: this.handleRemoveClick })),
         ])));

package/dist/cjs/sd-circle-progress.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-Cw-78mnC.js');
 var component_progress = require('./component.progress-Bmg3vAAy.js');
-var system = require('./system-DpTN1vBC.js');
+var system = require('./system-VmZRYp6V.js');
 
 const spinner = {
 	color: {
@@ -72,7 +72,7 @@ const SdCircleProgress = class {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (index.h(index.Host, { key: '9a4424e79b095c240b2dd53c8655b9a4cccaf581', style: hostStyle }, index.h("svg", { key: '37ca87d4c4aa6ab6b84a4301225d775f1998c0c1', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '372f7031310dddba431323b0527c273311a498e3', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), index.h("circle", { key: 'def6ff7573e4c4a08648f35f7cb545d6b8064f6d', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (index.h("span", { key: '13d6345672fdafaf6a1e1eef9f5987179a99c3ae', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && index.h("span", { key: 'c42e2fa2826284017e530e967975e45277ae9ee3', class: "sd-circle-progress__label" }, this.label)));
+        return (index.h(index.Host, { key: 'f92bf4d6e4f1133c4465a4fec7b2bad4549a6d06', style: hostStyle }, index.h("svg", { key: '669fa503cc6007f48f35474b08e4359de695026d', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '020c7d840a6592d7705b65b14d27e3b5752629bf', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), index.h("circle", { key: 'e409da4a5c34adcd8744f16040ae9d5d6019a415', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (index.h("span", { key: '91c0b91e69293b67c8a0ad67a6d4b9e9db5c6d4a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && index.h("span", { key: '03a5bee22a2e2f1b4ba75dbeca2ef5b4b9840aeb', class: "sd-circle-progress__label" }, this.label)));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();

package/dist/cjs/sd-confirm-modal_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-Cw-78mnC.js');
 var component_modal = require('./component.modal-BFelrSMx.js');
 
 const CONFIRM_MODAL_DEFAULT_BUTTON = {
@@ -75,14 +75,18 @@ const SdConfirmModal = class {
     disconnectedCallback() {
         this.slotObserver?.disconnect();
     }
+    get resolvedType() {
+        return this.type ?? 'positive';
+    }
     get resolvedMainButton() {
-        return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.type];
+        return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.resolvedType];
     }
     get hasTagContent() {
-        return !!(this.tagLabel || this.slotLabel);
+        return ((this.tagLabel !== undefined && this.tagLabel !== '') ||
+            (this.slotLabel !== undefined && this.slotLabel !== ''));
     }
     get showContentBox() {
-        return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
+        return this.tagContents != null || this.hasTagContent || this.hasSlottedContent;
     }
     syncHasSlottedContent() {
         const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
@@ -94,11 +98,12 @@ const SdConfirmModal = class {
         }
     }
     render() {
-        const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
-        const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (index.h("div", { key: '4ef44b1b2a86914eae3fc59e3c383b12646d1d0c', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: 'aa62624aaf76a23eb4f1d30b846e6054f3cf001c', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: 'd1329b8e71d455357790a4aa5f73547142830532', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: '2c5e0f902327c5eb663e6ccc5057e22e2be11c03', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: '1917ef85f9f06de3dd321d664d4022dd4a1524ff', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: 'afa7e6671f4849b7a90317664d07d3c04178c554', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: 'd4c06bfdd2222212b1cf8e3ec86ccaca4c394394', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        const type = this.resolvedType;
+        const iconName = CONFIRM_MODAL_ICON_MAP[type];
+        const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
+        return (index.h("div", { key: '234455d93cbf02e5e70f78803914a8d91fbc4506', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: '298f5279400b19159a8c08d2c739ab27cf88811c', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '41d01e92ff59cea05a367797ebde71cd13baed1f', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: 'd6b65e3a858a96f628602101adaaee2b62727df4', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), index.h("div", { key: 'ed708bffc95467faabf70a9c2beec46fc1ba090c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: 'e7a996bef926fa3741ed9f2ecc930a6961f4c6e4', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: 'b4ab9cc0cf91166d4e34a7b4726d62c3463a9766', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '8af201f6b6b08991ba31db2f2e59ee44a7b10d50', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '733f478a57a68bd9d4cc6563558bc0fafbfa5b9a', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: 'a7be74a833fbd012d14e79b570a4d97e3a495a52', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button-v2", { key: 'e09be98a918aafd291a7b12c221b70e72ba14ab9', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '1dd63a93ecd0eae9ecfb61a3b98f1e6d1ac2b4b3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: 'e22a5fc951054808bc70962e104eb3951b65ca61', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button", { key: 'c1f23f043eead651e71943c7e76585b9b7fe964a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button", { key: '63952e8b1c2d912fed6489760c97a787eaf2a90d', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -144,11 +149,14 @@ const SdLoadingModal = class {
     width;
     height;
     click;
+    get resolvedState() {
+        return this.state ?? 'loading';
+    }
     get resolvedMessage() {
-        return this.message || LOADING_MODAL_DEFAULT_MESSAGE[this.state];
+        return this.message || LOADING_MODAL_DEFAULT_MESSAGE[this.resolvedState];
     }
     get resolvedButtonLabel() {
-        return this.buttonLabel || LOADING_MODAL_DEFAULT_BUTTON_LABEL[this.state];
+        return this.buttonLabel || LOADING_MODAL_DEFAULT_BUTTON_LABEL[this.resolvedState];
     }
     handleClick = () => {
         this.click.emit();
@@ -178,7 +186,7 @@ const SdLoadingModal = class {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (index.h(index.Host, { key: '4245588093d82ec791b4ba7260eb3a1314c0e7a8', style: hostStyle }, index.h("div", { key: '4ad4c57bf68a5e33b453ed5ebb19f590f2ff8a9d', class: "sd-loading-modal" }, index.h("div", { key: 'bd45817bad45b9cffc9917d5f6570cb7409e8703', class: "sd-loading-modal__content" }, this.state === 'loading' ? (index.h("sd-circle-progress", { indeterminate: true })) : (index.h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), index.h("div", { key: '16a09029e732058a4cdf0330e4afaf7322a88f76', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (index.h("p", { class: "sd-loading-modal__message" }, message)))) : (index.h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (index.h("div", { key: 'cdf9a51d233efcc86fa2405960f2ed304a07127b', class: "sd-loading-modal__button" }, index.h("sd-button-v2", { key: '36cd4b36d92fb725eb35a9d6bee7fd0c8fcf3395', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (index.h(index.Host, { key: 'a653095ef804a24fbc3c4a0e65d22971b537a9bf', style: hostStyle }, index.h("div", { key: '38a1a83501a707de8a431b38cd3e5525565fca5d', class: "sd-loading-modal" }, index.h("div", { key: '81ddeebfffa70bcc84fc3b2a02fb3d70441645c4', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (index.h("sd-circle-progress", { indeterminate: true })) : (index.h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), index.h("div", { key: 'db87e7d46fcc6bfd07ce4191819e5e28051489b7', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (index.h("p", { class: "sd-loading-modal__message" }, message)))) : (index.h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (index.h("div", { key: '20134aca743319ea4e03e1b8a0359b92a3bdb0af', class: "sd-loading-modal__button" }, index.h("sd-button", { key: 'c6951624f69519d712bfdd619fd6b22216ecad87', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();

package/dist/cjs/sd-date-box.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
 
@@ -21,7 +21,7 @@ const SdDateBox = class {
     click;
     mouseOver;
     handleClickDate() {
-        if (this.disabled || !this.date)
+        if (this.disabled || this.date === undefined || this.date === '' || this.date === 0)
             return;
         if (typeof this.date === 'string')
             return;
@@ -33,7 +33,7 @@ const SdDateBox = class {
         this.mouseOver?.emit(this.date);
     }
     render() {
-        return (index.h("div", { key: 'b14dd7c9806828807cdfc232420a30c816ffbeb2', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h("div", { key: 'ce4341db137de36e872a0e166bd89c33ac1ba91b', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-box': true,
                 'sd-hoverable': !this.disabled || !this.selected || this.type === '',
                 'sd-date-box--disabled': this.disabled,
@@ -44,7 +44,12 @@ const SdDateBox = class {
                 'sd-date-box--in-range': this.inRange,
                 'sd-date-box--type-start': this.type === 'start',
                 'sd-date-box--type-end': this.type === 'end',
-            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, index.h("div", { key: 'acb1a2d51d018913e39f8fd1fc54ab85c4ce6957', class: "sd-date-box__content" }, index.h("div", { key: '8c9445e4268cd254d76297ac1e775697d889f721', class: "sd-date-box__label" }, this.date))));
+            }, onClick: () => this.handleClickDate(), onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClickDate();
+                }
+            }, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, index.h("div", { key: 'e641ed011f8e7e55cc589f566163899b26503717', class: "sd-date-box__content" }, index.h("div", { key: 'e15a5fce460757d5cf486ec0678c2e604beab4db', class: "sd-date-box__label" }, this.date))));
     }
 };
 SdDateBox.style = sdDateBoxCss();