@sellmate/design-system 1.0.21 → 1.0.22

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

@@ -0,0 +1,190 @@
+import buttonTokens from "../../tokens/generated/component.button.json";
+export const BUTTON_FOCUS_RING_COLOR = '#0075FF';
+const PRESET_DEFAULT_COLORS = {
+    primary: buttonTokens.brand.strong.bg.default,
+    secondary: buttonTokens.brand.subtle.bg.default,
+    primary_outline: buttonTokens.brand.outline.bg.default,
+    neutral: buttonTokens.neutral.subtle.bg.default,
+    neutral_outline: buttonTokens.neutral.outline.bg.default,
+    danger: buttonTokens.danger.strong.bg.default,
+    danger_outline: buttonTokens.danger.outline.bg.default,
+};
+export const BUTTON_CONFIG = {
+    primary_xs: {
+        variant: 'primary',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.primary,
+    },
+    secondary_xs: {
+        variant: 'primary',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.secondary,
+    },
+    primary_outline_xs: {
+        variant: 'outline',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.primary_outline,
+    },
+    neutral_xs: {
+        variant: 'primary',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.neutral,
+    },
+    neutral_outline_xs: {
+        variant: 'outline',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.neutral_outline,
+    },
+    danger_xs: {
+        variant: 'primary',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.danger,
+    },
+    danger_outline_xs: {
+        variant: 'outline',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.danger_outline,
+    },
+    primary_sm: {
+        variant: 'primary',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.primary,
+    },
+    secondary_sm: {
+        variant: 'primary',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.secondary,
+    },
+    primary_outline_sm: {
+        variant: 'outline',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.primary_outline,
+    },
+    neutral_sm: {
+        variant: 'primary',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.neutral,
+    },
+    neutral_outline_sm: {
+        variant: 'outline',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.neutral_outline,
+    },
+    danger_sm: {
+        variant: 'primary',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.danger,
+    },
+    danger_outline_sm: {
+        variant: 'outline',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.danger_outline,
+    },
+    primary_md: {
+        variant: 'primary',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.primary,
+    },
+    secondary_md: {
+        variant: 'primary',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.secondary,
+    },
+    primary_outline_md: {
+        variant: 'outline',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.primary_outline,
+    },
+    neutral_md: {
+        variant: 'primary',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.neutral,
+    },
+    neutral_outline_md: {
+        variant: 'outline',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.neutral_outline,
+    },
+    danger_md: {
+        variant: 'primary',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.danger,
+    },
+    danger_outline_md: {
+        variant: 'outline',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.danger_outline,
+    },
+    primary_lg: {
+        variant: 'primary',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.primary,
+    },
+    secondary_lg: {
+        variant: 'primary',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.secondary,
+    },
+    primary_outline_lg: {
+        variant: 'outline',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.primary_outline,
+    },
+    neutral_lg: {
+        variant: 'primary',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.neutral,
+    },
+    neutral_outline_lg: {
+        variant: 'outline',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.neutral_outline,
+    },
+    danger_lg: {
+        variant: 'primary',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.danger,
+    },
+    danger_outline_lg: {
+        variant: 'outline',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.danger_outline,
+    },
+};
+export const BUTTON_ICON_SIZES = {
+    xs: Number(buttonTokens.size.xs.icon),
+    sm: Number(buttonTokens.size.sm.icon),
+    md: Number(buttonTokens.size.md.icon),
+    lg: Number(buttonTokens.size.lg.icon),
+};
+export const PRESET_HOVER_BACKGROUNDS = {
+    primary: buttonTokens.brand.strong.bg.hover,
+    secondary: buttonTokens.brand.subtle.bg.hover,
+    primary_outline: buttonTokens.brand.outline.bg.hover,
+    neutral: buttonTokens.neutral.subtle.bg.hover,
+    neutral_outline: buttonTokens.neutral.outline.bg.hover,
+    danger: buttonTokens.danger.strong.bg.hover,
+    danger_outline: buttonTokens.danger.outline.bg.hover,
+};
+export const PRESET_CONTENT_COLORS = {
+    primary: buttonTokens.brand.strong.content,
+    secondary: buttonTokens.brand.subtle.content,
+    primary_outline: buttonTokens.brand.outline.content,
+    neutral: buttonTokens.neutral.subtle.content,
+    neutral_outline: buttonTokens.neutral.outline.content,
+    danger: buttonTokens.danger.strong.content,
+    danger_outline: buttonTokens.danger.outline.content,
+};
+export const PRESET_BORDER_COLORS = {
+    primary: 'transparent',
+    secondary: 'transparent',
+    primary_outline: buttonTokens.brand.outline.border,
+    neutral: 'transparent',
+    neutral_outline: buttonTokens.neutral.outline.border,
+    danger: 'transparent',
+    danger_outline: buttonTokens.danger.outline.border,
+};
+export const DISABLED_CONTENT = buttonTokens.content.disabled;
+const SIZE_SUFFIX_PATTERN = /_(xs|sm|md|lg)$/;
+export const isButtonV2Name = (value) => value in BUTTON_CONFIG;
+export const getPresetName = (value) => value.replace(SIZE_SUFFIX_PATTERN, '');

package/dist/collection/components/sd-button-v2/sd-button-v2.css

@@ -0,0 +1,120 @@
+sd-button-v2 {
+  display: inline-flex;
+  width: fit-content;
+  height: fit-content;
+}
+
+.sd-button-v2 {
+  --sd-button-v2-height: 34px;
+  --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;
+  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-border-width-default, 1px) solid var(--sd-button-v2-border);
+  border-radius: var(--sd-button-radius-default, 4px);
+  background: var(--sd-button-v2-bg);
+  color: var(--sd-button-v2-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-xs-height, 24px);
+  --sd-button-v2-padding-x: var(--sd-button-xs-padding-x, 8px);
+  --sd-button-v2-gap: var(--sd-button-xs-gap, 4px);
+  --sd-button-v2-font-family: var(--sd-button-xs-typography-font-family, inherit);
+  --sd-button-v2-font-size: var(--sd-button-xs-typography-font-size, 12px);
+  --sd-button-v2-font-weight: var(--sd-button-xs-typography-font-weight, 500);
+  --sd-button-v2-text-decoration: var(--sd-button-xs-typography-text-decoration, none);
+  --sd-button-v2-label-min-width: var(--sd-button-label-xs-min-width, auto);
+  --sd-button-v2-icon-only-size: var(--sd-button-icon-only-xs-width, var(--sd-button-v2-height));
+}
+.sd-button-v2--sm {
+  --sd-button-v2-height: var(--sd-button-sm-height, 28px);
+  --sd-button-v2-padding-x: var(--sd-button-sm-padding-x, 12px);
+  --sd-button-v2-gap: var(--sd-button-sm-gap, 6px);
+  --sd-button-v2-font-family: var(--sd-button-sm-typography-font-family, inherit);
+  --sd-button-v2-font-size: var(--sd-button-sm-typography-font-size, 12px);
+  --sd-button-v2-font-weight: var(--sd-button-sm-typography-font-weight, 500);
+  --sd-button-v2-text-decoration: var(--sd-button-sm-typography-text-decoration, none);
+  --sd-button-v2-label-min-width: var(--sd-button-label-sm-min-width, auto);
+  --sd-button-v2-icon-only-size: var(--sd-button-icon-only-sm-width, var(--sd-button-v2-height));
+}
+.sd-button-v2--md {
+  --sd-button-v2-height: var(--sd-button-md-height, 34px);
+  --sd-button-v2-padding-x: var(--sd-button-md-padding-x, 20px);
+  --sd-button-v2-gap: var(--sd-button-md-gap, 8px);
+  --sd-button-v2-font-family: var(--sd-button-md-typography-font-family, inherit);
+  --sd-button-v2-font-size: var(--sd-button-md-typography-font-size, 16px);
+  --sd-button-v2-font-weight: var(--sd-button-md-typography-font-weight, 500);
+  --sd-button-v2-text-decoration: var(--sd-button-md-typography-text-decoration, none);
+  --sd-button-v2-label-min-width: var(--sd-button-label-md-min-width, auto);
+  --sd-button-v2-icon-only-size: var(--sd-button-icon-only-md-width, var(--sd-button-v2-height));
+}
+.sd-button-v2--lg {
+  --sd-button-v2-height: var(--sd-button-lg-height, 62px);
+  --sd-button-v2-padding-x: var(--sd-button-lg-padding-x, 28px);
+  --sd-button-v2-gap: var(--sd-button-lg-gap, 12px);
+  --sd-button-v2-font-family: var(--sd-button-lg-typography-font-family, inherit);
+  --sd-button-v2-font-size: var(--sd-button-lg-typography-font-size, 18px);
+  --sd-button-v2-font-weight: var(--sd-button-lg-typography-font-weight, 500);
+  --sd-button-v2-text-decoration: var(--sd-button-lg-typography-text-decoration, none);
+  --sd-button-v2-label-min-width: var(--sd-button-label-lg-min-width, auto);
+  --sd-button-v2-icon-only-size: var(--sd-button-icon-only-lg-width, var(--sd-button-v2-height));
+}
+.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-border-disabled, #CCCCCC);
+  background: var(--sd-button-bg-disabled, #E1E1E1);
+  color: var(--sd-button-content-disabled, #888888);
+  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;
+}

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

@@ -0,0 +1,249 @@
+import { h } from "@stencil/core";
+import { BUTTON_CONFIG, BUTTON_FOCUS_RING_COLOR, BUTTON_ICON_SIZES, DISABLED_CONTENT, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_HOVER_BACKGROUNDS, getPresetName, isButtonV2Name, } from "./sd-button-v2.config";
+export class SdButtonV2 {
+    name = 'primary_sm';
+    label = '';
+    icon;
+    ariaLabel = '';
+    disabled = false;
+    type = 'button';
+    click;
+    hasWarnedMissingAriaLabel = false;
+    handleClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.click.emit(event);
+    };
+    get resolvedConfig() {
+        if (!isButtonV2Name(this.name)) {
+            throw new Error(`Invalid sd-button-v2 name: ${this.name}`);
+        }
+        const config = BUTTON_CONFIG[this.name];
+        const preset = 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);
+        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.hasWarnedMissingAriaLabel = true;
+    }
+    render() {
+        const { config, preset } = this.resolvedConfig;
+        const hasLabel = Boolean(this.label);
+        const iconOnly = !this.label && Boolean(this.icon);
+        const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
+        const iconColor = this.disabled ? DISABLED_CONTENT : PRESET_CONTENT_COLORS[preset];
+        return (h("button", { key: 'f1c9355390568831fa0c4c7289e62e701e0174c2', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+                '--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
+                '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
+                '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
+                '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
+                '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
+            }, onClick: this.handleClick }, h("span", { key: '2845fbd556f326db93a27b802faa96ec60345f63', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '5d90b15cbcd0c1cea10a5dc251fd13e6a0099fb0', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: iconColor })), this.label && h("span", { key: '76facbfe83402fd0e5b17c1b7d4132665d8aaf5b', class: "sd-button-v2__label" }, this.label))));
+    }
+    static get is() { return "sd-button-v2"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-button-v2.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-button-v2.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonV2Name",
+                    "resolved": "\"danger_lg\" | \"danger_md\" | \"danger_outline_lg\" | \"danger_outline_md\" | \"danger_outline_sm\" | \"danger_outline_xs\" | \"danger_sm\" | \"danger_xs\" | \"neutral_lg\" | \"neutral_md\" | \"neutral_outline_lg\" | \"neutral_outline_md\" | \"neutral_outline_sm\" | \"neutral_outline_xs\" | \"neutral_sm\" | \"neutral_xs\" | \"primary_lg\" | \"primary_md\" | \"primary_outline_lg\" | \"primary_outline_md\" | \"primary_outline_sm\" | \"primary_outline_xs\" | \"primary_sm\" | \"primary_xs\" | \"secondary_lg\" | \"secondary_md\" | \"secondary_sm\" | \"secondary_xs\"",
+                    "references": {
+                        "ButtonV2Name": {
+                            "location": "import",
+                            "path": "./sd-button-v2.config",
+                            "id": "src/components/sd-button-v2/sd-button-v2.config.ts::ButtonV2Name",
+                            "referenceLocation": "ButtonV2Name"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "'primary_sm'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "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\" | \"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\" | \"pageMove\" | \"pdf\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseLine\" | \"warehouseSolid\" | \"warningFilled\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "references": {
+                        "IconName": {
+                            "location": "global",
+                            "id": "global::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonV2Type",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "ButtonV2Type": {
+                            "location": "import",
+                            "path": "./sd-button-v2.config",
+                            "id": "src/components/sd-button-v2/sd-button-v2.config.ts::ButtonV2Type",
+                            "referenceLocation": "ButtonV2Type"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "click",
+                "name": "sdClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: '155504b50cb1c21fc1f847af8a9e8b685f7881ef' }, h("div", { key: 'c461e3e40da44586da5e02ad508bf59942a9e82a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: '0c0ee023155c08c565c3496c44699a900666b084' }))));
+        return (h(Fragment, { key: 'a4f5635186614df68acf04c502f804c9f0c77df5' }, h("div", { key: '99af2c33f69d069e108f7f122a6e7762ea918276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: '287c27708b9b80a9f04bfff87abdb65022762a6d' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-picker/sd-date-picker.js

@@ -76,7 +76,7 @@ export class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (h("div", { key: 'bb17d32f08d998e599c90cf1a7a35b17e19d3dc4', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: 'ae028d5999a8df40a83b0d77d2dd5c2e0d0d8eb0', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'fbb954703d19161ab4507696a21278d5b4962b25', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'a335d5d317718e30be14fdb4aa1a63cb1347b929', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '38deef7127db10c91a51b8d6cb017d85fce25888', class: "sd-date-picker__menu" }, h("div", { key: 'f2ef8eb33086103df65b434360ecc1aac2949bf9', class: "sd-date-picker__header" }, h("div", { key: '8b949551a157de1e2ded7f1de621ccacd136126e', class: "year-nav" }, h("button", { key: 'b1bbd712094885223c21f030c32914d14f3904c2', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '7bb6f5f216d02cde59eff87fcaebc32eccbaac25', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '645c12556fe1b9f1d1c8f7c4cfe73c3b65ad7431', class: "year-nav__current" }, this.currentYear), h("button", { key: 'f6cb58c23effd1aa0566aaacf41170482f03df51', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'e92ef17b8d50e5115a159d2dd984e738a920f065', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '73018a9ca04929f4be017631e8e49a73cef71855', class: "month-nav" }, h("button", { key: '0983ca35486b8ad29c09740848b4288b602d0cd9', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '2c9257564786287f825c83391f3e05745c23cf9a', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '0b9e048eeea62c452671b74db468aa5587e8ddbf', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '3ead15a341d5e361e7fb9b1cb2842e5a38b0e03c', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'a3dbd8606dd51f72f1c315f2eea7ff089a95e6fa', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '6bbadc79157ae64bf492a965b78d014dcd968ea6', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '972c00769b40eff8015b68e0a9479a6c7c6009db', class: "sd-date-picker__body" }, [
+        return (h("div", { key: '97baf5202e2702032b5d9035c5b07b3dafa658fa', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: 'bba605148eec6f88829bcfff21cb1ac6efae815d', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '4c927154407efd9319b56327d83ee2012206b216', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'edc06ceeead0cab9ee3b2394097838e03aeb8703', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'cb71ba6e5517afa0e1e0477599449101b21ece65', class: "sd-date-picker__menu" }, h("div", { key: 'bdace5b8e99cbd4271ba76dace05f2af4d059d37', class: "sd-date-picker__header" }, h("div", { key: '3fc557c6119af299b813610e9b6ef6cd9104a302', class: "year-nav" }, h("button", { key: '82b7928c460b6bb3a163cf576977d4694fa63fdc', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'b0eda3985494f99de52c85714b13ef45b90ef9db', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '24245489b718b3fb15603e9da628651b1af8b752', class: "year-nav__current" }, this.currentYear), h("button", { key: '458570d7e08af35d2c467398b89a9cb9c200141f', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '5f01f94d7499b0c79f2936249a295b92dfa1476d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '5d1551a4149998430fd5c0262000c21e8de76a9b', class: "month-nav" }, h("button", { key: '0690296a789d67e5dc1b1ce7b882a261f1724a46', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '3ed6809573e28c9a40a4f26331669ce66245c076', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '5ae4ed6249269ba5a1d24ab986ec7c371fa356f4', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '7bada1fba8abf6e483969cc5388cd333b03e8e19', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '559eec3f67ff8b47f601928d5bb9ca2064cb1c6a', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '5191a48970a3e9f044eaf4851e2e5d507763fe71', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'c124a70d9e1c3dd73c63c8ef3fd513a9cb6c24c8', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js

@@ -155,10 +155,10 @@ export class SdDateRangePicker {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (h("div", { key: '96cd4e99ae976517e7b24c5ff3046af976adc5cb', class: {
+        return (h("div", { key: 'e0eaf7463e91d3afed6ff977deb20d122e837fd4', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, h("sd-input", { key: 'a84838a1a84d990b289f0b753ccf3e2f45da4770', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'd926c672dcf457a68ebe644b32c90a03ba29b175', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '0af519c7ac2ade00972e23b9ecb0344989d87f51', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'd9109e573215092c6b386ae27ac7377c4347df4c', class: "sd-date-range-picker__menu" }, h("div", { key: 'ca4743a26ed0571bc3b63218a32a113e50dbd81a', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '6f0fe1ede6d171e749a241fbeec32056250709b9', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '821526a069a845f271b0e5db607f747efe4e610c', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'e9402009c8b034953d7ff4be5a4eea64d7fed21d', class: "header-label" }, this.prevYear), h("button", { key: 'b752631ab64e32a4a39c13898cc3db5e25897c4b', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '62c6e0004ff1a0d8f260e11b9d17ea7ccca942ee', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '3a05a7e02664be8d9dfb85d0bada03a2d352af12', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            } }, h("sd-input", { key: '301a5133f5a6bcb5bd66fed546528808a96b822a', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'ef7e9e74957d994a2e7a374f849ef1a5f03fe501', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '0eb793bbc67d0da80bfdbb9d5e8c89857a9bd13d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: '6e7f6d3c0ba5d60cec929ff87f2b16c6fd1123ae', class: "sd-date-range-picker__menu" }, h("div", { key: 'bbc3b2117e226e86ad18e90d9549dfa33b8faa18', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'e5246cbd684096c113a9568d42a4a86555fd55b0', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '84281ab72847d7fe9352be583465b810854f2cfb', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '9d9394eea9a82bdcdc7918af50e98909610ab5e2', class: "header-label" }, this.prevYear), h("button", { key: '6f05a7477293b129561b1bdaa5fca46224f41af9', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '746bc40e5d0bb72e9aa712012d411f20b459b80a', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '96a2c1674152f5ee31b29734b1471940b4d0f4b4', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }