@sellmate/design-system 1.0.50 → 1.0.51

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 
 const sdToggleCss = () => `sd-toggle{display:inline-block;height:20px;line-height:0}sd-toggle .sd-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px}sd-toggle .sd-toggle>input{display:none}sd-toggle .sd-toggle__label{font-size:12px;color:#333333;line-height:20px}sd-toggle .sd-toggle__track{width:36px;height:20px;border-radius:12px;background:#CCCCCC;position:relative;transition:background-color 0.2s ease}sd-toggle .sd-toggle__thumb{width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;transition:transform 0.2s ease}sd-toggle .sd-toggle--checked .sd-toggle__track{background:#0075FF}sd-toggle .sd-toggle--checked .sd-toggle__thumb{transform:translateX(16px)}sd-toggle .sd-toggle--disabled{cursor:not-allowed}sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track{background:#BBDAFF}sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track{background:#EEEEEE}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track{background:#005CC9}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track{background:#BBBBBB}`;
 
 const SdToggle = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.change = index.createEvent(this, "sdUpdate");
+        this.change = index.createEvent(this, "sdUpdate", 7);
     }
     value = false;
     label = '';
@@ -37,7 +37,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '698daae860db5fbc4771e135ddc2bcb6b7401d3f', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'fe54c7e2ae289fc24dca6c33b7ceb16780bf249f', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '5063162161ebaa9d1d2773aac3fdf3d482f4219a', class: "sd-toggle__label" }, this.label), index.h("div", { key: 'f320af2c5a89fab80e5cc90cbbd0dd88dee93cea', class: "sd-toggle__track" }, index.h("div", { key: 'a96f3f836d11e3a24e78a580797dc03e92e335b6', class: "sd-toggle__thumb" }))));
+        return (index.h("label", { key: '2a50a4c8bd89f40db18b78ad5e5ed5885596f0d0', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'cfdea2ecd3d5946f3b4264d05da09af6e82ca4cd', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: 'f27cc85d92d47649f31e096ba09894c85a934c52', class: "sd-toggle__label" }, this.label), index.h("div", { key: '4a19cae7fdc7e3b12e03281e31b8b3a2a4cfc88b', class: "sd-toggle__track" }, index.h("div", { key: 'e99a72c39e20e8ea6b4d2df14e74c592b3b0eb22', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{tooltipArrow-Mb2Dhc7T.js → tooltipArrow-CRCpqOYA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

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

@@ -33,19 +33,24 @@ sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control {
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label {
   display: flex;
   align-items: center;
+  height: var(--sd-field-label-height);
   margin-right: var(--sd-system-space-field-sm-gap);
 }
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon {
-  margin-right: 6px;
+  margin-right: var(--sd-field-label-gap);
 }
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text {
-  font-size: 12px;
-  line-height: 20px;
+  font-size: var(--sd-field-label-font-size);
+  line-height: var(--sd-field-label-line-height);
+  font-weight: var(--sd-field-label-font-weight);
   color: var(--sd-system-color-field-text-default);
   white-space: nowrap;
 }
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip {
-  margin-left: 2px;
+  margin-left: var(--sd-field-label-gap);
+}
+sd-field .sd-field--has-addon .sd-field__control {
+  gap: var(--sd-field-addon-gap);
 }
 sd-field .sd-field--has-addon .sd-field__control .sd-field__addon {
   display: flex;
@@ -56,7 +61,7 @@ sd-field .sd-field--has-addon .sd-field__control .sd-field__addon {
   line-height: var(--sd-field-addon-line-height);
   font-weight: var(--sd-field-addon-font-weight);
   background: var(--sd-field-addon-bg);
-  border-right: 1px solid var(--sd-field-addon-border-color);
+  border-right: var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);
   border-radius: calc(var(--sd-system-radius-field-sm) - 1px) 0 0 calc(var(--sd-system-radius-field-sm) - 1px);
 }
 sd-field .sd-field__wrapper {
@@ -89,7 +94,7 @@ sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control, sd-fie
   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;
+  border: 1px solid var(--sd-system-color-field-border-success) !important;
 }
 sd-field .sd-field .sd-field__error-message {
   color: var(--sd-textinput-input-text-error-message);

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

@@ -9,6 +9,7 @@ const FORM_PARENT_TAGS = [
     'sd-textarea',
     'sd-number-input',
     'sd-select-v2',
+    'sd-file-picker',
 ];
 export class SdField {
     el;
@@ -122,32 +123,49 @@ export class SdField {
     render() {
         const addon = this.addonLabel;
         const addonTokens = fieldTokens.field.addonLabel;
-        const addonCssVars = addon ? {
-            '--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
-            '--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
-            '--sd-field-addon-line-height': `${addonTokens.typography.lineHeight}px`,
-            '--sd-field-addon-font-weight': addonTokens.typography.fontWeight,
-            '--sd-field-addon-bg': addonTokens.bg,
-            '--sd-field-addon-border-color': this.disabled
-                ? addonTokens.border.disabled
-                : addonTokens.border.default,
-        } : {};
-        return (h("div", { key: 'cb0844dfad82a3287253598ace0e70e761ca2cdd', class: {
+        const labelTokens = fieldTokens.field.label.sm;
+        const labelCssVars = this.label
+            ? {
+                '--sd-field-label-height': `${labelTokens.height}px`,
+                '--sd-field-label-gap': `${labelTokens.gap}px`,
+                '--sd-field-label-font-size': `${labelTokens.typography.fontSize}px`,
+                '--sd-field-label-line-height': `${labelTokens.typography.lineHeight}px`,
+                '--sd-field-label-font-weight': labelTokens.typography.fontWeight,
+            }
+            : {};
+        const addonCssVars = addon
+            ? {
+                '--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
+                '--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
+                '--sd-field-addon-line-height': `${addonTokens.typography.lineHeight}px`,
+                '--sd-field-addon-font-weight': addonTokens.typography.fontWeight,
+                '--sd-field-addon-bg': addonTokens.bg,
+                '--sd-field-addon-border-color': this.disabled
+                    ? addonTokens.border.disabled
+                    : addonTokens.border.default,
+                '--sd-field-addon-gap': `${addonTokens.gap}px`,
+                '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
+            }
+            : {};
+        return (h("div", { key: 'e37722a9afbd78654328954262d4bc458634170a', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: addonCssVars }, h("div", { key: '788b8352737f10eec26195931cd22a405607b2af', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'e3164e47bbeec19e7b150c3e2a7ef75a96896db4', class: {
+            }, style: { ...labelCssVars, ...addonCssVars } }, h("div", { key: '38440e5f21fba28ff49fd00bfd20189af9c43707', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'b6d65e0db6667cbe9b4dd85ec72f9ecd08afa291', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            }, style: this.width ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width, flex: 'none' } : {} }, addon && (h("div", { key: '12baae30b329494312e8fe3160556717f1f8d979', class: "sd-field__addon" }, addon)), h("slot", { key: 'f231342560a5b45448ddc6ad370cce414ca68052' }))), (this.errorMsg || this.errorMessage)
-            ? h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)
-            : this.hint && h("div", { class: "sd-field__hint" }, this.hint)));
+            }, style: this.width
+                ? {
+                    width: typeof this.width === 'number' ? `${this.width}px` : this.width,
+                    flex: 'none',
+                }
+                : {} }, addon && h("div", { key: '71a50d839dbbd7075c1f7f7b2daad0308ebc1225', class: "sd-field__addon" }, addon), h("slot", { key: '5c0696834e82eddde81c6603d26373a745a1febb' }))), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))));
     }
     renderLabel(label) {
         if (!label)
             return null;
-        return (h("label", { class: "sd-field__label" }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ?? 10, color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, h("div", { slot: "content" }, this.labelTooltip)))));
+        return (h("label", { class: "sd-field__label" }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ?? Number(fieldTokens.field.label.sm.icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
     }
     static get is() { return "sd-field"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,23 @@
+import filePickerTokens from "../../tokens/generated/component.filepicker.json";
+const fp = filePickerTokens.filepicker;
+export const FILE_PICKER_LAYOUT = {
+    height: fp.height,
+    paddingX: fp.paddingX,
+    gap: fp.gap,
+    radius: fp.radius,
+    borderWidth: fp.borderWidth,
+    fontSize: fp.typography.fontSize,
+    lineHeight: fp.typography.lineHeight,
+    fontWeight: fp.typography.fontWeight,
+    iconSize: fp.size.icon,
+    contentsGap: fp.contents.gap,
+};
+export const FILE_PICKER_COLORS = {
+    border: fp.border,
+    bg: fp.bg,
+    text: fp.text,
+    icon: {
+        default: '#888888', // TODO: 토큰 반영 후 교체
+        disabled: fp.icon.disabled,
+    },
+};

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

@@ -3,43 +3,42 @@ sd-file-picker {
   width: 100%;
 }
 
-.sd-file-picker {
-  display: inline-flex;
+.sd-file-picker__content {
   width: 100%;
+  height: 100%;
+  display: flex;
   align-items: center;
-  max-width: var(--picker-width, 100%);
-  height: 28px;
-  gap: 8px;
-  padding: 4px 8px;
-  border: 1px solid #AAAAAA;
-  border-radius: 4px;
-  background-color: #FFFFFF;
+  padding: 0 var(--sd-file-picker-padding-x);
+  gap: var(--sd-file-picker-gap);
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
   position: relative;
   vertical-align: middle;
 }
+
 .sd-file-picker__text {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
-  color: #AAAAAA;
+  font-weight: var(--sd-file-picker-font-weight);
+  font-size: var(--sd-file-picker-font-size);
+  line-height: var(--sd-file-picker-line-height);
+  color: var(--sd-file-picker-placeholder-color);
 }
 .sd-file-picker__text--active {
-  color: #222222;
+  color: var(--sd-file-picker-text-color);
 }
 .sd-file-picker__text--placeholder {
-  color: #AAAAAA;
+  color: var(--sd-file-picker-placeholder-color);
 }
+
 .sd-file-picker__icon {
   flex-shrink: 0;
 }
+
 .sd-file-picker__clear-icon {
   flex-shrink: 0;
   cursor: pointer;
@@ -48,9 +47,11 @@ sd-file-picker {
 .sd-file-picker__clear-icon:hover {
   opacity: 0.7;
 }
+
 .sd-file-picker__input {
   display: none;
 }
+
 .sd-file-picker__tooltip {
   position: absolute;
   top: calc(100% - 4px);
@@ -66,38 +67,32 @@ sd-file-picker {
   border-radius: 4px;
   pointer-events: none;
 }
-.sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) {
-  background-color: #F6F6F6;
-}
-.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) {
-  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;
-  cursor: not-allowed !important;
+
+.sd-field--disabled .sd-file-picker__content {
+  cursor: not-allowed;
 }
-.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text {
-  color: #888888;
+.sd-field--disabled .sd-file-picker__text {
+  color: var(--sd-file-picker-disabled-color);
 }
-.sd-file-picker--inline {
+
+.sd-file-picker--inline .sd-file-picker__content {
   border: none;
   background-color: transparent;
   padding: 0;
   height: auto;
 }
 .sd-file-picker--inline .sd-file-picker__text {
-  color: #AAAAAA;
+  color: var(--sd-file-picker-placeholder-color);
+}
+.sd-file-picker--inline:hover:not(.sd-file-picker--inline-disabled) .sd-file-picker__text {
+  color: var(--sd-file-picker-text-color);
 }
-.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text {
-  color: #737373;
+.sd-file-picker--inline .sd-file-picker__text--active {
+  color: var(--sd-file-picker-text-color);
 }
-.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active {
-  color: #222222;
+.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content {
+  cursor: not-allowed;
 }
-.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text {
-  color: #CCCCCC;
+.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text {
+  color: var(--sd-file-picker-disabled-color);
 }