@sellmate/design-system 1.0.18 → 1.0.20

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

@@ -5,9 +5,18 @@ sd-button {
 }
 
 .sd-button {
+  --sd-button-height: 34px;
+  --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);
   text-decoration: none;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: var(--sd-button-radius-default, 4px);
   transition: all 0.2s ease-in-out;
   position: relative;
   overflow: hidden;
@@ -19,34 +28,64 @@ sd-button {
   align-items: center;
   justify-content: center;
   border: none;
+  padding: 0 var(--sd-button-padding-x);
+  min-width: var(--sd-button-min-width, auto);
+  min-height: var(--sd-button-height);
+  font-family: var(--sd-button-font-family);
+  font-size: var(--sd-button-font-size);
+  font-weight: var(--sd-button-font-weight);
+  text-decoration: var(--sd-button-text-decoration);
 }
 .sd-button--xs {
-  padding: 0 8px;
-  font-size: 12px;
-  font-weight: 500;
+  --sd-button-height: var(--sd-button-xs-height, 24px);
+  --sd-button-padding-x: var(--sd-button-xs-padding-x, 8px);
+  --sd-button-gap: var(--sd-button-xs-gap, 4px);
+  --sd-button-font-family: var(--sd-button-xs-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-xs-typography-font-size, 12px);
+  --sd-button-font-weight: var(--sd-button-xs-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-xs-typography-text-decoration, none);
+  --sd-button-label-min-width: var(--sd-button-label-xs-min-width, auto);
+  --sd-button-icon-only-size: var(--sd-button-icon-only-xs-width, var(--sd-button-height));
   line-height: 20px;
-  min-height: 24px;
 }
 .sd-button--sm {
-  padding: 0 12px;
-  font-size: 12px;
-  font-weight: 500;
+  --sd-button-height: var(--sd-button-sm-height, 28px);
+  --sd-button-padding-x: var(--sd-button-sm-padding-x, 12px);
+  --sd-button-gap: var(--sd-button-sm-gap, 6px);
+  --sd-button-font-family: var(--sd-button-sm-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-sm-typography-font-size, 12px);
+  --sd-button-font-weight: var(--sd-button-sm-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-sm-typography-text-decoration, none);
+  --sd-button-label-min-width: var(--sd-button-label-sm-min-width, auto);
+  --sd-button-icon-only-size: var(--sd-button-icon-only-sm-width, var(--sd-button-height));
   line-height: 20px;
-  min-height: 28px;
 }
 .sd-button--md {
-  padding: 0 20px;
-  font-size: 16px;
-  font-weight: 500;
+  --sd-button-height: var(--sd-button-md-height, 34px);
+  --sd-button-padding-x: var(--sd-button-md-padding-x, 20px);
+  --sd-button-gap: var(--sd-button-md-gap, 8px);
+  --sd-button-font-family: var(--sd-button-md-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-md-typography-font-size, 16px);
+  --sd-button-font-weight: var(--sd-button-md-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-md-typography-text-decoration, none);
+  --sd-button-label-min-width: var(--sd-button-label-md-min-width, auto);
+  --sd-button-icon-only-size: var(--sd-button-icon-only-md-width, var(--sd-button-height));
   line-height: 26px;
-  min-height: 34px;
 }
 .sd-button--lg {
-  padding: 0 28px;
-  font-size: 18px;
-  font-weight: 500;
+  --sd-button-height: var(--sd-button-lg-height, 62px);
+  --sd-button-padding-x: var(--sd-button-lg-padding-x, 28px);
+  --sd-button-gap: var(--sd-button-lg-gap, 12px);
+  --sd-button-font-family: var(--sd-button-lg-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-lg-typography-font-size, 18px);
+  --sd-button-font-weight: var(--sd-button-lg-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-lg-typography-text-decoration, none);
+  --sd-button-label-min-width: var(--sd-button-label-lg-min-width, auto);
+  --sd-button-icon-only-size: var(--sd-button-icon-only-lg-width, var(--sd-button-height));
   line-height: 30px;
-  min-height: 62px;
+}
+.sd-button--has-label {
+  --sd-button-min-width: var(--sd-button-label-min-width, auto);
 }
 .sd-button--primary {
   background-color: var(--button-color);
@@ -67,7 +106,7 @@ sd-button {
 }
 .sd-button--outline {
   background: white;
-  border: 1px solid var(--button-color);
+  border: var(--sd-button-border-width-default, 1px) solid var(--button-color);
   color: var(--button-color);
 }
 .sd-button--outline::before {
@@ -108,16 +147,16 @@ sd-button {
   z-index: 1;
 }
 .sd-button--disabled {
-  border: 1px solid #cccccc;
-  background: #e1e1e1;
-  color: #888888;
+  border: var(--sd-button-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);
+  background: var(--sd-button-bg-disabled, #E1E1E1);
+  color: var(--sd-button-content-disabled, #888888);
   cursor: not-allowed !important;
 }
 .sd-button--icon-only {
   padding: 0;
-  width: fit-content;
-  height: fit-content;
-  aspect-ratio: 1/1;
+  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));
 }
 .sd-button--no-hover:hover::before {
   opacity: 0 !important;
@@ -126,7 +165,7 @@ sd-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: var(--sd-button-gap);
   z-index: 1;
-  font-weight: 500;
+  font-weight: inherit;
 }

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

@@ -1,10 +1,11 @@
 import { h } from "@stencil/core";
+import buttonTokens from "../../tokens/generated/component.button.json";
 import { resolveColor } from "../../utils/color";
 const ICON_SIZES = {
-    xs: 12,
-    sm: 16,
-    md: 20,
-    lg: 24,
+    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 class SdButton {
     el;
@@ -35,6 +36,9 @@ export class SdButton {
         if (this.disabled) {
             classes.push('sd-button--disabled');
         }
+        if (this.label) {
+            classes.push('sd-button--has-label');
+        }
         if (!this.label && (this.icon || this.iconRight)) {
             classes.push('sd-button--icon-only');
         }
@@ -47,7 +51,7 @@ export class SdButton {
         const buttonClasses = this.getButtonClasses();
         // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
         const resolvedColor = resolveColor(this.color);
-        return (h("button", { key: '9ec771aafd98f10d37d2cb2f5e77c1a2a4e78f1f', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, h("div", { key: '0f58e79c1c12bf071ff839fdf3db7ddc09c71a67', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '6e4135d9c5315e1504ce6ae617f7eebe1f24b2d9', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: '6dbf55c9fbb992ddd85fec51777679c4fa03f67d', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '318d664ac5a689560b9aaa5ba43e2c5abb5f17ae', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
+        return (h("button", { key: 'b1436c0cdf0267446df9cd022df68a8a6c349ca5', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, h("div", { key: '70f9450410dbc7b2603679cda397bc8f211928b1', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: 'ab09632262d175e8dc9a31df4e673470d128b274', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: 'c33e565c9108996ab4a3d84b5beaf1d8acbd5700', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '112a9649b77e7eb67198d0bf7bf407e9f7f71cd5', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
     }
     static get is() { return "sd-button"; }
     static get originalStyleUrls() {
@@ -199,7 +203,7 @@ export class SdButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"CheckFilled\" | \"CheckOutline\" | \"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\" | \"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",
+                    "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",
@@ -261,7 +265,7 @@ export class SdButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"CheckFilled\" | \"CheckOutline\" | \"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\" | \"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",
+                    "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",

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

@@ -7,5 +7,5 @@ sd-card .sd-card {
   background: white;
 }
 sd-card .sd-card--bordered {
-  border: 1px solid #e1e1e1;
+  border: 1px solid #E1E1E1;
 }

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

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

package/dist/collection/components/sd-checkbox/sd-checkbox.css

@@ -15,16 +15,16 @@ sd-checkbox .sd-checkbox > input {
   display: none;
 }
 sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg, sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg {
-  border-color: #005cc9;
-  background: #005cc9;
+  border-color: #005CC9;
+  background: #005CC9;
 }
 sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg {
-  border: 1px solid #0075ff;
-  background: #d9eaff;
+  border: 1px solid #0075FF;
+  background: #D9EAFF;
 }
 sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg {
   border: 1px solid transparent;
-  background: #eeeeee;
+  background: #EEEEEE;
 }
 sd-checkbox .sd-checkbox__bg {
   width: 16px;
@@ -44,12 +44,12 @@ sd-checkbox .sd-checkbox__label {
   line-height: 20px;
 }
 sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg, sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg {
-  background: #eeeeee;
-  border: 1px solid #cccccc !important;
+  background: #EEEEEE;
+  border: 1px solid #CCCCCC !important;
 }
 sd-checkbox .sd-checkbox--checked .sd-checkbox__bg, sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg {
-  border: 1px solid #0075ff;
-  background: #0075ff;
+  border: 1px solid #0075FF;
+  background: #0075FF;
 }
 sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg {
   background: white;
@@ -58,6 +58,6 @@ sd-checkbox .sd-checkbox--disabled {
   cursor: not-allowed;
 }
 sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg {
-  background: #eeeeee;
-  border: 1px solid #cccccc !important;
+  background: #EEEEEE;
+  border: 1px solid #CCCCCC !important;
 }

package/dist/collection/components/sd-date-box/sd-date-box.css

@@ -25,7 +25,7 @@
   line-height: 28px;
 }
 .sd-date-box.sd-date-box--disabled {
-  color: #cccccc;
+  color: #CCCCCC;
   cursor: default !important;
   pointer-events: none;
 }
@@ -34,7 +34,7 @@
   cursor: pointer;
 }
 .sd-date-box.sd-hoverable:hover .sd-date-box__content {
-  background: #d9eaff;
+  background: #D9EAFF;
 }
 .sd-date-box.sd-date-box--in-range:not(.sd-date-box--disabled) .sd-date-box__content::before {
   content: "";
@@ -43,7 +43,7 @@
   left: -5px;
   width: calc(100% + 10px);
   height: 100%;
-  background: #d9eaff;
+  background: #D9EAFF;
 }
 .sd-date-box.sd-date-box--in-range.sd-date-box--type-start .sd-date-box__content::before {
   left: auto !important;
@@ -60,7 +60,7 @@
   content: "";
   position: absolute;
   inset: 0;
-  background: #0075ff;
+  background: #0075FF;
   border-radius: 14px;
   z-index: 1;
 }
@@ -79,6 +79,6 @@
   transform: translateX(-50%);
   width: 28px;
   height: 28px;
-  border: 1px solid #e1e1e1 !important;
+  border: 1px solid #E1E1E1 !important;
   border-radius: 14px;
 }

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: '48a0f667e32a558c3740a9a7c08c828bc6351526', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: 'dbb1aa3920825121c96b1b52b0426cd147dc5a9c', 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: '2239f7d145f74429e5281dd2375fa3d7653f526f', 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: '713321553ad27a17ab6d680230f983e0eb6147a4', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '5d76ddefb3832251708406deec1731a7d0708839', class: "sd-date-picker__menu" }, h("div", { key: '2a206d6f218f8076a3b40038e17ee51ea14f4209', class: "sd-date-picker__header" }, h("div", { key: '0986903e283c554d71be5dcae48858eab3909cde', class: "year-nav" }, h("button", { key: 'f9a047da8de609664b2a14f369cc3a56ee3e5d4b', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '967e915a3d5b6e2a394d6be2a5e482667bf3aa4e', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '3b732eee2b5db4bb56d1cd84887270c5dc57e249', class: "year-nav__current" }, this.currentYear), h("button", { key: 'a93b7f38a9c352120c9b3c4bc7cfb9461a546580', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'd4fc5451575d40a8d62d0b5cf6fb3cdd0e4a1cf7', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'de99ab843195d1c01e4af37a723ed0e101e84f7b', class: "month-nav" }, h("button", { key: '1b9cf039c53437ddd6d90489ca6d87f8a57e43f2', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '09908b70655302fe6de6b0bfb05488a0de3abf79', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '1ebb8e3bd6bfccabd9503b8837a59bd0f27e10c9', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'ae4ede6b4a01bbcb543f8964961e665ef82adc7c', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'f14772e18bbf68528a1b399ba058fcf1e25b40c9', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '7e699a1e5439c19ff78f311f90d31c246f67f6cb', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '86939550882e9b76c119480eb16f6e30c0b7ac3c', class: "sd-date-picker__body" }, [
+        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" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

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

@@ -90,5 +90,5 @@ sd-date-range-picker .sd-field .sd-input__native {
 }
 .sd-date-range-picker__menu .sd-date-range-picker__body .separator {
   width: 1px;
-  background-color: #d8d8d8;
+  background-color: #D8D8D8;
 }

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: 'ada8df3857c5eed11ea3fed9dbe366cae24d65d5', class: {
+        return (h("div", { key: '96cd4e99ae976517e7b24c5ff3046af976adc5cb', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, h("sd-input", { key: '7639d651fcd5e91ac6597d2e17a69f9bd81db566', 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: '4fec08e3f5197016bb93770c6bb91064ef10fa3f', 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: '62b921bdbbf811b9a284c14935f87f7ee1d8eac2', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: '93ffa95963c3622475722299a0d0472a2dd8a3a7', class: "sd-date-range-picker__menu" }, h("div", { key: 'd3150332edca90965753e86c93be4e98008482bb', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '19dfb8f00e7fa249db6b53e8a44e5bbfd4dbf92f', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '28298db1a3f389e03e135633711b57877d3d5068', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'c766b56b7cb60d4c8fd4197ae976c883edfdf1a6', class: "header-label" }, this.prevYear), h("button", { key: '30679ee6294a0fc1a9334086c758fa8087e35741', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '111feaca6378a929f84ef751bbf1d17a4ba98ed6', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '185b10c49244740b92f35319cdc1b1833753bdc7', 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: '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
             ? `${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)) }))))))))))))));
     }

package/dist/collection/components/sd-field/sd-field.css

@@ -10,7 +10,7 @@ sd-field .sd-field *:focus-within {
   outline: none !important;
 }
 sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control {
-  border: 1px solid #0075ff !important;
+  border: 1px solid #0075FF !important;
   box-shadow: 0px 0px 4px 0px rgba(0, 113, 255, 0.4);
 }
 sd-field .sd-field.sd-field--disabled {
@@ -20,13 +20,13 @@ sd-field .sd-field.sd-field--disabled .sd-field__wrapper {
   cursor: not-allowed !important;
 }
 sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside {
-  border-color: #cccccc;
+  border-color: #CCCCCC;
   color: #888888;
   cursor: not-allowed !important;
 }
 sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control {
-  background-color: #eeeeee;
-  border-color: #cccccc;
+  background-color: #EEEEEE;
+  border-color: #CCCCCC;
   color: #888888;
   cursor: not-allowed !important;
 }
@@ -53,11 +53,11 @@ sd-field .sd-field--has-label-inside .sd-field__wrapper .sd-field__label {
   align-items: center;
   justify-content: center;
   padding: 3px 12px;
-  border: 1px solid #cccccc;
+  border: 1px solid #CCCCCC;
   border-right: none;
   border-radius: 4px 0 0 4px;
-  border-color: #aaaaaa;
-  background-color: #f6f6f6;
+  border-color: #AAAAAA;
+  background-color: #F6F6F6;
 }
 sd-field .sd-field__wrapper {
   width: 100%;
@@ -77,7 +77,7 @@ sd-field .sd-field__wrapper .sd-field__control {
   height: 100%;
   display: flex;
   flex: 1;
-  border: 1px solid #aaaaaa;
+  border: 1px solid #AAAAAA;
   border-radius: 4px;
   background: white;
 }
@@ -86,14 +86,17 @@ sd-field .sd-field__wrapper .sd-field__control--label-inside {
   border-bottom-left-radius: 0px;
 }
 sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control {
-  border: 1px solid #fb4444 !important;
+  border: 1px solid #FB4444 !important;
 }
 sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control, sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control {
-  border: 1px solid #0075ff !important;
+  border: 1px solid #0075FF !important;
   box-shadow: 0px 0px 4px 0px rgba(0, 113, 255, 0.4);
 }
+sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control {
+  border: 1px solid #2BCE6C !important;
+}
 sd-field .sd-field .sd-field__error-message {
-  color: #fb4444;
+  color: #FB4444;
   font-size: 12px;
   line-height: 20px;
   margin-top: 4px;

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

@@ -114,15 +114,15 @@ export class SdField {
         }
     }
     render() {
-        return (h("div", { key: 'b5e9d5d8ba103c51326a794f456e525cd3f74932', class: {
+        return (h("div", { key: '3c69abe493110b5665795706a9ae0e525f213aca', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, h("div", { key: '5270c71b689766d3a3edb39afdd356a91f1cbf8b', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'ce6bd24750c5709f01c9b75eacd156f4f951bae3', class: {
+            } }, h("div", { key: 'decc6821b7172f5ecc2343472014c08674725904', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'ca5e93f049db10ecaaaab091fdf394ac4b55e292', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, h("slot", { key: '256ca195a91713bb16d2a0c4a95465319a72237b' }))), this.errorMsg && h("div", { key: 'fa5c5adf31a2d65d9518225186a72062d5104f08', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, h("slot", { key: '7ee38983d32985f4b4a035830bcdca0e14b2cf71' }))), this.errorMsg && h("div", { key: 'c2d6ef860ced48657b906806f2618594b094ea79', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)

package/dist/collection/components/sd-file-picker/sd-file-picker.css

@@ -11,9 +11,9 @@ sd-file-picker {
   height: 28px;
   gap: 8px;
   padding: 4px 8px;
-  border: 1px solid #aaaaaa;
+  border: 1px solid #AAAAAA;
   border-radius: 4px;
-  background-color: #ffffff;
+  background-color: #FFFFFF;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
@@ -29,13 +29,13 @@ sd-file-picker {
   font-weight: 400;
   font-size: 12px;
   line-height: 20px;
-  color: #aaaaaa;
+  color: #AAAAAA;
 }
 .sd-file-picker__text--active {
   color: #222222;
 }
 .sd-file-picker__text--placeholder {
-  color: #aaaaaa;
+  color: #AAAAAA;
 }
 .sd-file-picker__icon {
   flex-shrink: 0;
@@ -67,17 +67,17 @@ sd-file-picker {
   pointer-events: none;
 }
 .sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) {
-  background-color: #f6f6f6;
+  background-color: #F6F6F6;
 }
 .sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) {
-  background-color: #ffffff;
+  background-color: #FFFFFF;
 }
 .sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text {
   color: #222222;
 }
 .sd-file-picker--disabled:not(.sd-file-picker--inline) {
-  background-color: #eeeeee;
-  border-color: #cccccc;
+  background-color: #EEEEEE;
+  border-color: #CCCCCC;
   cursor: not-allowed !important;
 }
 .sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text {
@@ -90,7 +90,7 @@ sd-file-picker {
   height: auto;
 }
 .sd-file-picker--inline .sd-file-picker__text {
-  color: #aaaaaa;
+  color: #AAAAAA;
 }
 .sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text {
   color: #737373;
@@ -99,5 +99,5 @@ sd-file-picker {
   color: #222222;
 }
 .sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text {
-  color: #cccccc;
+  color: #CCCCCC;
 }

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

@@ -91,15 +91,15 @@ export class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: '6c96e930758e62d66cb0a9c4449e06592667d9dc', class: {
+        return (h("div", { key: '659ab6f0e1fedadfbef1838def391aab28ae6e62', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: 'e611e2c14c312b053d645ea0e35cfda878ea382e', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: '3733905eaea0203fb589858143c968850feae480', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'b7dec66670f67e69248292265fbc80e00ffea0ff', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '55ffb6c1b3ff502b555cb48a31301ac9b30701a4', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: 'b7755876e0f327d15a886a86592cd59bd3435202', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'e1e2004c64166eb2b611c48ca51cc793fb90434c', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '81452b84daadf7b51f8383b756d4773b9f38411b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '8e19381802185684f4982c588085c7948222cd73', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '0a3c122382cab2148a88fbd4fdc9ff1f7cde757b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '628717309bf16c0906e9ac21ecbf14a416eea8d8', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-floating-portal/sd-floating-portal.css

@@ -5,39 +5,39 @@
   font-size: 12px;
   position: relative;
   box-sizing: border-box;
-  background: #07284a;
-  color: #ffffff;
+  background: #07284A;
+  color: #FFFFFF;
 }
 .sd-floating-menu .sd-floating-menu__arrow {
-  color: #07284a;
+  color: #07284A;
 }
 .sd-floating-menu--default {
-  background: #07284a;
-  color: #ffffff;
+  background: #07284A;
+  color: #FFFFFF;
 }
 .sd-floating-menu--default .sd-floating-menu__arrow {
-  color: #07284a;
+  color: #07284A;
 }
 .sd-floating-menu--caution {
-  background: #fce6e6;
-  color: #fb4444;
+  background: #FCE6E6;
+  color: #FB4444;
 }
 .sd-floating-menu--caution .sd-floating-menu__arrow {
-  color: #fce6e6;
+  color: #FCE6E6;
 }
 .sd-floating-menu--notice {
-  background: #ffead7;
-  color: #ff6b00;
+  background: #FEF1EA;
+  color: #FF6B00;
 }
 .sd-floating-menu--notice .sd-floating-menu__arrow {
-  color: #ffead7;
+  color: #FEF1EA;
 }
 .sd-floating-menu--accent {
-  background: #e6f1ff;
-  color: #0075ff;
+  background: #E6F1FF;
+  color: #0075FF;
 }
 .sd-floating-menu--accent .sd-floating-menu__arrow {
-  color: #e6f1ff;
+  color: #E6F1FF;
 }
 .sd-floating-menu__arrow {
   position: absolute;

package/dist/collection/components/sd-floating-portal/sd-floating-portal.js

@@ -144,7 +144,7 @@ export class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'e66f9bf4a2e6e85be4e66660232e3dcf3c993e67' });
+        return h("slot", { key: '2f33d335a7cf00ace576aed610a0e77d711a5b10' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {