@sellmate/design-system 1.0.25 → 1.0.27

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

@@ -67,7 +67,7 @@ const SdForm = class {
         this.submitSuccess.emit();
     }
     render() {
-        return (index.h("form", { key: '3349166129fd2acb388221b61e1bd347a2dad6e0', onSubmit: e => this.onSubmit(e), class: this.formClass }, index.h("slot", { key: '5866b2d6764578dbf07a31c5d3dc6fa6a249f023' })));
+        return (index.h("form", { key: 'e25fc019fc77ec3cbd3968d1fbf0a8fdd3f47d68', onSubmit: e => this.onSubmit(e), class: this.formClass }, index.h("slot", { key: 'ffbba01d9883b0c4582ab62c6669a20fa093cb8c' })));
     }
 };
 

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

@@ -55,9 +55,9 @@ const SdGuide = class {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (index.h("div", { key: '69dc81c8fe0c5843e86709e72f0cdf3ecaf8c52a', class: "sd-guide", style: {
+        return (index.h("div", { key: 'b62d9fc6f84c65c42b946ac0ea118e0f760f872a', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, index.h("sd-button", { key: '254e03a9d2e4d36ca26a23158acc960dcfb90578', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: '701a049ebcabd0b29fa74fac246cecdedace2022', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: 'e8f8efcbcbe29d51a29a8ca3803ed0a754a42531', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: '5f54893503560535d6adedea41d81182c72b04e5', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '9747683a1123307a9e4214e0f4be63fd09af1fec', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: '9fb06eaeae5fc0a805855b78b8d67583183f7a8c', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: 'ad4b7e1e5740bbd32877efc0a5614b4e657aca8a', name: "helpOutline", size: 24, color: "green_65" }), index.h("h3", { key: '5cdf73e175a51b13ee2c5408014de27a9650ac20', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: 'f02a8cf5ffe831d2a466e4357f7721c5622d7bee', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, index.h("sd-button", { key: 'dc4b53179c77564bba799fd58d2b50a114251891', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: 'dce687813be45faa25e40c42ccef556a7b2b542b', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: 'ae4fcc94f70a90cbab678ff726b2b23462cd5581', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: '0a032605306affcc44645577a7f552c0fe9811df', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '137a92b36771d20b3594fe164e28a2be14bf423a', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: '25378aa790783504b82187328fef2cf955227d6a', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '5e133c603bb7ae7b041fd3196266890dafe9270f', name: "helpOutline", size: 24, color: "green_65" }), index.h("h3", { key: 'c6f86b1b2f848cda6fba5c9ffd4b8c87e947fbf7', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: 'b719cfbc9dfd61b7c03ed977e7ed72feb3d4e98b', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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

@@ -3,6 +3,16 @@
 var index = require('./index-Qvv0fGgj.js');
 var tooltipArrow = require('./tooltipArrow-Mb2Dhc7T.js');
 
+const popover = {
+	close: {
+		icon: "12",
+		color: "#888888"
+	},
+	bg: "#07284A"};
+var popoverTokens = {
+	popover: popover
+};
+
 const sdPopoverCss = () => `sd-popover{position:relative;cursor:pointer;display:inline-flex}`;
 
 const SdPopover = class {
@@ -38,11 +48,14 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (index.h(index.Fragment, { key: 'fae8880113285544053957bb096c6618dfddc7ec' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-floating-portal", { key: '45323134dcbce4014492dde03c1416deda339ee1', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: 'c662820224d2c90bb806d2ac010cc95a53308b3a', class: {
+        return (index.h(index.Fragment, { key: '4a9b669a48afd220b6f7cca0512704ffca7c853a' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-floating-portal", { key: '3a3a95c0ced8d5cc03c1c00a71455804b4ee2337', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: '45b78e84b9d6716b16c02868aadc0e03268d0d17', class: {
                 'sd-floating-menu': true,
+                'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, index.h("i", { key: '55bc21085df77a027d252d5c3ef6d665207c71f6', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'a9bb570b87481c0fe897e65ada655537dd4b8724' })), index.h("div", { key: '5f28d241157a9f5481fc7fa4e48fd00fac1def5a', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: 'cc1dcbe2703dca70004159aa9fe8b18b122d8dbc', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: 'f7b72df569c2dce9e6c85bcd9509e38ac9cbbb80', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: 'd01d2bc92e79454d747b2fd976bfeb431d4d90fe', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: '9cf8cbd72d5bec64636b778ea0642d56c3229590', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '6df940385a9472e73b408cc51c647c98c95a9af7', name: "close", size: "12", color: "gery_55" }))))))));
+            }, style: {
+                '--sd-floating-bg': popoverTokens.popover.bg,
+            } }, index.h("i", { key: 'dc459621c518762345e42fe201e25c18b00f71db', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '77b20a4f795453eba89230433204e43696d1572e' })), index.h("div", { key: '645010d9749bf039a15a3edb6ca8bac72b53a152', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '9c84f5ccf7353dca3c6e6978647c845832003361', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: 'd081317a32b5e5304d03deef7b3bcb441e4839c9', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: 'cf09426459cabbe4443608c9e5edda9e45c394f9', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: '0677f61f7faa27e10b39b5cce2e22a3eda15dc87', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '71e254dbc9b34f98e0bc41c378d33c733ce6b582', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
     }
     static get watchers() { return {
         "show": [{

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

@@ -41,10 +41,10 @@ const SdProgress = class {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (index.h("div", { key: 'a9b7c4a0bb44f7455ea21f632d3ec8edbcc97522', style: {
+        return (index.h("div", { key: '43da9dac67e760bfe53b8db11c27eef7ef0d8b3b', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: 'ff0dfde8b43315883d2e4f17aa5e426fb6bf54ee', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: 'af4b1c44f655546fede8ad548bddc6afb7810d2b', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (index.h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, index.h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

package/dist/cjs/sd-radio-button-group.cjs.entry.js

@@ -45,7 +45,7 @@ const SdRadioButtonGroup = class {
     }
     groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;
     render() {
-        return (index.h("div", { key: '97d7659b99c889fc9b6788f4cb9558e4c6305365', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map(option => {
+        return (index.h("div", { key: 'b29629556f8d8922e601feede89bd77bd783ded6', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (index.h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, index.h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && index.h("span", { class: "sd-radio-button-group__label" }, option.label)));

package/dist/cjs/sd-radio-group.cjs.entry.js

@@ -29,7 +29,7 @@ const SdRadioGroup = class {
         return classes.join(' ');
     }
     render() {
-        return (index.h("div", { key: '80b1a8d67acac65ffc753ababa5e48e80cacdfc2', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map(option => {
+        return (index.h("div", { key: '4f24a03003b9e21a7e7da81d70ab95a04551b694', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map(option => {
             return (index.h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: this.value, label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }

package/dist/cjs/sd-select-multiple-group.cjs.entry.js

@@ -396,7 +396,7 @@ const SdSelectMultipleGroup = class extends baseDropdownEvent.BaseDropdownEvent
         });
     }
     render() {
-        return (index.h("sd-field", { key: 'edcc86b68474b668acce13cd04cf2e75cdc3e5cc', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '13b3366af18b65ac30a9e1a9a295c486351f585e', class: {
+        return (index.h("sd-field", { key: '85f8cf143482bb054d2ce3c15c2028213c877daf', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '8c92a916b26f1e4935cefc3772ec655f1cd31083', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,

package/dist/cjs/sd-select-multiple.cjs.entry.js

@@ -152,7 +152,7 @@ const SdSelectMultiple = class extends baseDropdownEvent.BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (index.h("sd-field", { key: '9395a273b4205854e6fd7e96f26f93c201e6e959', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '451758e8c90b79e7ddb3b35226d28ee4a43a3832', class: {
+        return (index.h("sd-field", { key: 'e445d2c3f80d78be0e74b1f54371eb27d9c316e8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '9fad0ed744cafb9e1e5f16ee413f36edd8f2c1f3', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/cjs/sd-select-option-group.cjs.entry.js

@@ -48,7 +48,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (index.h("div", { key: '7581caff61d1257d653b6f58b8d76c21225b3cc5', class: {
+        return (index.h("div", { key: '8e88aacd2c3122a563fcf78bcbe9731b6a29d8c5', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -57,10 +57,10 @@ const SdSelectOptionGroup = class {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: 'ddb33f6afaa6bc6d6dd3dc494f6ec74b9c023a42', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '14f2c7fc347718d2909e5006bf2500a9a51b0a66', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: 'be4bc7f2867ea5c86505bc9284ac3de46f7077f9', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '00063ab3a6f1d4f44671ac82dd05524968bec668', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: '99415ed662cc2f8f29d31e3811eb4496f8fcac47', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'a3c7dc6455a94ecd4587f8b13b4d1f10e3b58819', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), index.h("span", { key: '802c908d44bf1c0db5d64bf4c8d4bab4ebe2b87c', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'efd26a2d6e4e2662410de3755b70a2a2585ad0c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();

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

@@ -49,7 +49,7 @@ const SdTabs = class {
         return `square_${this.size}_${color}`;
     }
     render() {
-        return (index.h("div", { key: 'bc86d4c1775bed6c2d323c9446e2c50631afed7c', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: 'c7e6f8385e395a8adc7605ce4a7ae32c25f83829', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && (index.h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));

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

@@ -2,8 +2,73 @@
 
 var index = require('./index-Qvv0fGgj.js');
 
+const tag = {
+	xs: {
+		paddingX: "6",
+		gap: "4",
+		icon: "12",
+		typography: {
+			fontSize: "11",
+			fontWeight: "500",
+			lineHeight: "18"}
+	},
+	sm: {
+		paddingX: "8",
+		gap: "4",
+		icon: "16",
+		typography: {
+			fontSize: "12",
+			fontWeight: "700",
+			lineHeight: "20"}
+	},
+	md: {
+		paddingX: "12",
+		gap: "6",
+		icon: "16",
+		typography: {
+			fontSize: "14",
+			fontWeight: "700",
+			lineHeight: "24"}
+	},
+	red: {
+		bg: "#FB4444",
+		content: "#FCEFEF"
+	},
+	orange: {
+		bg: "#FF6B00",
+		content: "#FEF1EA"
+	},
+	yellow: {
+		bg: "#916C0D",
+		content: "#FFF7DD"
+	},
+	green: {
+		bg: "#00973C",
+		content: "#E8F9EF"
+	},
+	blue: {
+		bg: "#0075FF",
+		content: "#E6F1FF"
+	},
+	darkblue: {
+		bg: "#006AC1",
+		content: "#EAF5FE"
+	},
+	indigo: {
+		bg: "#004290",
+		content: "#EFF6FF"
+	},
+	grey: {
+		bg: "#737373",
+		content: "#EEEEEE"
+	}
+};
+var tagTokens = {
+	tag: tag
+};
+
 const TAG_SHAPES = ['square', 'pill'];
-const TAG_SIZES = ['sm', 'md', 'lg'];
+const TAG_SIZES = ['xs', 'sm', 'md'];
 const TAG_COLORS = [
     'grey',
     'red',
@@ -15,48 +80,51 @@ const TAG_COLORS = [
     'indigo',
 ];
 const TAG_COLOR_CONFIG = {
-    grey: { background: '#EEEEEE', content: '#737373', icon: '#737373' },
-    red: { background: '#FCEFEF', content: '#FB4444', icon: '#FB4444' },
-    orange: { background: '#FEF1EA', content: '#FF6B00', icon: '#FF6B00' },
-    yellow: { background: '#FFF7DD', content: '#916C0D', icon: '#CA9611' },
-    green: { background: '#E8F9EF', content: '#00973C', icon: '#12B553' },
-    blue: { background: '#E6F1FF', content: '#0075FF', icon: '#0075FF' },
-    darkblue: { background: '#EAF5FE', content: '#006AC1', icon: '#006AC1' },
-    indigo: { background: '#EFF6FF', content: '#004290', icon: '#004290' },
+    grey: { background: tagTokens.tag.grey.content, content: tagTokens.tag.grey.bg, icon: tagTokens.tag.grey.bg },
+    red: { background: tagTokens.tag.red.content, content: tagTokens.tag.red.bg, icon: tagTokens.tag.red.bg },
+    orange: { background: tagTokens.tag.orange.content, content: tagTokens.tag.orange.bg, icon: tagTokens.tag.orange.bg },
+    yellow: { background: tagTokens.tag.yellow.content, content: tagTokens.tag.yellow.bg, icon: tagTokens.tag.yellow.bg },
+    green: { background: tagTokens.tag.green.content, content: tagTokens.tag.green.bg, icon: tagTokens.tag.green.bg },
+    blue: { background: tagTokens.tag.blue.content, content: tagTokens.tag.blue.bg, icon: tagTokens.tag.blue.bg },
+    darkblue: { background: tagTokens.tag.darkblue.content, content: tagTokens.tag.darkblue.bg, icon: tagTokens.tag.darkblue.bg },
+    indigo: { background: tagTokens.tag.indigo.content, content: tagTokens.tag.indigo.bg, icon: tagTokens.tag.indigo.bg },
 };
 const SQUARE_SIZE_CONFIG = {
-    sm: {
-        height: '20px',
-        paddingX: '6px',
-        gap: '4px',
-        fontSize: '11px',
-        fontWeight: '500',
-        iconSize: 12,
+    xs: {
+        height: `${Number(tagTokens.tag.xs.typography.lineHeight) + Number(tagTokens.tag.xs.paddingX) }px`,
+        paddingX: `${tagTokens.tag.xs.paddingX}px`,
+        gap: `${tagTokens.tag.xs.gap}px`,
+        fontSize: `${tagTokens.tag.xs.typography.fontSize}px`,
+        fontWeight: tagTokens.tag.xs.typography.fontWeight,
+        lineHeight: `${tagTokens.tag.xs.typography.lineHeight}px`,
+        iconSize: Number(tagTokens.tag.xs.icon),
         radius: '4px',
     },
-    md: {
-        height: '24px',
-        paddingX: '8px',
-        gap: '4px',
-        fontSize: '12px',
-        fontWeight: '700',
-        iconSize: 16,
+    sm: {
+        height: `${Number(tagTokens.tag.sm.typography.lineHeight) + Number(tagTokens.tag.sm.paddingX) }px`,
+        paddingX: `${tagTokens.tag.sm.paddingX}px`,
+        gap: `${tagTokens.tag.sm.gap}px`,
+        fontSize: `${tagTokens.tag.sm.typography.fontSize}px`,
+        fontWeight: tagTokens.tag.sm.typography.fontWeight,
+        lineHeight: `${tagTokens.tag.sm.typography.lineHeight}px`,
+        iconSize: Number(tagTokens.tag.sm.icon),
         radius: '4px',
     },
-    lg: {
-        height: '28px',
-        paddingX: '10px',
-        gap: '4px',
-        fontSize: '14px',
-        fontWeight: '700',
-        iconSize: 16,
+    md: {
+        height: `${Number(tagTokens.tag.md.typography.lineHeight) + Number(tagTokens.tag.md.paddingX) }px`,
+        paddingX: `${tagTokens.tag.md.paddingX}px`,
+        gap: `${tagTokens.tag.md.gap}px`,
+        fontSize: `${tagTokens.tag.md.typography.fontSize}px`,
+        fontWeight: tagTokens.tag.md.typography.fontWeight,
+        lineHeight: `${tagTokens.tag.md.typography.lineHeight}px`,
+        iconSize: Number(tagTokens.tag.md.icon),
         radius: '5px',
     },
 };
 const PILL_SIZE_CONFIG = {
+    xs: { ...SQUARE_SIZE_CONFIG.xs, radius: '999px' },
     sm: { ...SQUARE_SIZE_CONFIG.sm, radius: '999px' },
     md: { ...SQUARE_SIZE_CONFIG.md, radius: '999px' },
-    lg: { ...SQUARE_SIZE_CONFIG.lg, radius: '999px' },
 };
 const TAG_CONFIG = Object.fromEntries(TAG_SHAPES.flatMap(shape => TAG_SIZES.flatMap(size => TAG_COLORS.map(color => {
     const sizeConfig = shape === 'square' ? SQUARE_SIZE_CONFIG[size] : PILL_SIZE_CONFIG[size];
@@ -73,13 +141,13 @@ const TAG_CONFIG = Object.fromEntries(TAG_SHAPES.flatMap(shape => TAG_SIZES.flat
 }))));
 const isTagName = (value) => Object.prototype.hasOwnProperty.call(TAG_CONFIG, value);
 
-const sdTagCss = () => `sd-tag{display:inline-flex;width:fit-content;height:fit-content}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-tag-gap, 5px);min-height:var(--sd-tag-height, 24px);padding:0 var(--sd-tag-padding-x, 8px);border-radius:var(--sd-tag-radius, 4px);background:var(--sd-tag-background, #f3f3f3);color:var(--sd-tag-content, #7a7a7a);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-tag__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}.sd-tag__label{display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:var(--sd-tag-font-size, 12px);font-weight:var(--sd-tag-font-weight, 700);line-height:1}`;
+const sdTagCss = () => `sd-tag{display:inline-flex;width:fit-content;height:fit-content}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-tag-gap, 5px);min-height:var(--sd-tag-height, 24px);padding:0 var(--sd-tag-padding-x, 8px);border-radius:var(--sd-tag-radius, 4px);background:var(--sd-tag-background, #f3f3f3);color:var(--sd-tag-content, #7a7a7a);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-tag__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}.sd-tag__label{display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:var(--sd-tag-font-size, 12px);font-weight:var(--sd-tag-font-weight, 700);line-height:var(--sd-tag-line-height, 20px)}`;
 
 const SdTag = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
-    name = 'square_md_grey';
+    name = 'square_sm_grey';
     label = '';
     icon;
     isLeft = true;
@@ -97,7 +165,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: '5f9ee005b146997dd13bb3e6a06680ff8574bd14', class: "sd-tag", style: {
+        return (index.h("span", { key: 'c1c80bafa32e7c658780a8c214de97b9a7099697', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -105,8 +173,9 @@ const SdTag = class {
                 '--sd-tag-gap': config.gap,
                 '--sd-tag-font-size': config.fontSize,
                 '--sd-tag-font-weight': config.fontWeight,
+                '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: 'b123ab6ac015db640e4dc3edc5e2cf90ec5e0ecf', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '6a0d9ec74319a7cefd0ceae96ffed32c717000bb', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Qvv0fGgj.js');
-var resolveColor = require('./resolveColor-4RlaGD62.js');
+var resolveColor = require('./resolveColor-Di1RNekE.js');
 
 const sdToastCss = () => `sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:16px;padding:12px 24px;border-radius:4px;background-color:var(--sd-toast-bg);color:var(--sd-toast-text);transition:opacity 0.2s ease, visibility 0.2s ease;box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast--hidden{opacity:0;visibility:hidden;pointer-events:none}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:20px;font-weight:400}sd-toast .sd-toast__link{font-size:14px;line-height:20px;color:var(--sd-toast-text);text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__button button{color:var(--button-text-color, inherit) !important}sd-toast .sd-toast__close{display:flex;align-items:center;justify-content:center;padding:4px;background-color:transparent;border:none;cursor:pointer;transition:opacity 0.2s ease;flex-shrink:0}sd-toast .sd-toast__close:hover{opacity:0.7}sd-toast .sd-toast__close:active{opacity:0.5}`;
 
@@ -49,10 +49,10 @@ const SdToast = class {
             background: resolveColor.resolveColor(colorTokens.background),
             text: resolveColor.resolveColor(colorTokens.text),
         };
-        return (index.h("div", { key: '16579a21c0eec78e609b0cf82fcf2d040b8b3388', style: {
+        return (index.h("div", { key: '0e0643ca708f95b8b357a1e146343948366ca727', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, index.h("div", { key: '108e47983e1ad99ed462a4fa00c29aa9e3393b8b', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'd034c9aaafc272d51de96de6ccefe49208aba7e3', class: "sd-toast__icon" }, index.h("sd-icon", { key: '14b97c4cbe7134f67d919abcf4e10cf673dd909d', name: this.icon, size: 16, color: colors.text }))), index.h("div", { key: '1cecb89bdb19742a7df04625e8f070cd2c207b5e', class: "sd-toast__content" }, index.h("span", { key: '1daf2a2bea963b7b68c580b30c4c8fa2f3a26c8f', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '8f7961c2c14806aa1323e378f57d74e47614772c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '89cba5e58ff368aea05130b799d903d4cf85b120', class: `sd-toast__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor.resolveColor('grey_95') } : {} })), this.useClose && (index.h("button", { key: '0e7fc0737824b61166cbff82a410948ca1745842', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '82d203f6eb584cb04566e8f3b1bd7a86ca50bba4', name: "close", size: 12, color: colors.text }))))));
+            } }, index.h("div", { key: '366f178360029706f54bc44cc95d2807c374318e', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'c110b274a1929970bc818c8a41040b26656ba27e', class: "sd-toast__icon" }, index.h("sd-icon", { key: '7e71e2878f18c66d7ac4aa07d1e96eff74bea074', name: this.icon, size: 16, color: colors.text }))), index.h("div", { key: 'b1a3a86d65724b8bbe1ab131e289379451ea7ec4', class: "sd-toast__content" }, index.h("span", { key: '56ac68520c8be2541528c7ff3242d634f036aec0', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '5e93140dea3082f869a1263d0cb0574690173cc8', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '79e472c5f4b31e3df155bcf621a5b83345a62788', class: `sd-toast__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor.resolveColor('grey_95') } : {} })), this.useClose && (index.h("button", { key: 'fb3f5666b04fedf20b81235bb34c1c2d793aa1fa', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: 'dff68640b8f90dba0e2ee77c743e304bd5b80859', name: "close", size: 12, color: colors.text }))))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -41,7 +41,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '174a62904591e559232574d207ff4ad9c0113ad8', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '7bbd96a0563a8cadcfb7ab9d8e1fb3767508d6bf', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '765e1ec1a8ca7d55a1c8000044168c39032c649d', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: 'f3ea12b098b9bd5d50c626a3b0611457e580387c', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

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

@@ -37,7 +37,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '9a8a0221e093040e446bc193f682070aa1f95c6c', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: '4a2e3c626bfa4e439676cc40df619bd284d0178a', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '1eecfd810c17610604d6cf93c6f664690f17ff6a', class: "sd-toggle__label" }, this.label), index.h("div", { key: '9f082e2f6036e338f2afb6fb719b4ff8d3a01d99', class: "sd-toggle__track" }, index.h("div", { key: '1d8b1bd11b05091a368c681ead7e79a0e453d510', class: "sd-toggle__thumb" }))));
+        return (index.h("label", { key: '1b2a644cdf09cb16d77ecfe38be28b0fdcbf592a', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: '1f1f09c157fe0d8cab0dd5b45caa51b6418cf80f', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '0aedb28652224b3a51bd13b912d2d85a4adbaa12', class: "sd-toggle__label" }, this.label), index.h("div", { key: 'af31fa9a84bae6c4bb97e339f5a26678f1a951e7', class: "sd-toggle__track" }, index.h("div", { key: 'cade31468c32d0179d4db0473e66c89d8ac4119c', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/collection/collection-manifest.json

@@ -3,7 +3,6 @@
     "components/sd-button/sd-button.js",
     "components/sd-checkbox/sd-checkbox.js",
     "components/sd-date-box/sd-date-box.js",
-    "components/sd-tooltip/sd-tooltip.js",
     "components/sd-form/sd-form.js",
     "components/sd-modal-card/sd-modal-card.js",
     "components/sd-radio/sd-radio.js",
@@ -40,7 +39,8 @@
     "components/sd-tag/sd-tag.js",
     "components/sd-textarea/sd-textarea.js",
     "components/sd-toggle/sd-toggle.js",
-    "components/sd-toggle-button/sd-toggle-button.js"
+    "components/sd-toggle-button/sd-toggle-button.js",
+    "components/sd-tooltip/sd-tooltip.js"
   ],
   "mixins": [],
   "compiler": {

package/dist/collection/components/sd-badge/sd-badge.config.js

@@ -0,0 +1,12 @@
+import badgeTokens from "../../tokens/generated/component.badge.json";
+export const BADGE_COLORS = ['red', 'orange', 'yellow', 'green', 'blue', 'darkblue', 'indigo', 'grey'];
+export const BADGE_COLOR_MAP = {
+    red: badgeTokens.badge.red,
+    orange: badgeTokens.badge.orange,
+    yellow: badgeTokens.badge.yellow,
+    green: badgeTokens.badge.green,
+    blue: badgeTokens.badge.blue,
+    darkblue: badgeTokens.badge.darkblue,
+    indigo: badgeTokens.badge.indigo,
+    grey: badgeTokens.badge.grey,
+};

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

@@ -7,6 +7,11 @@ sd-badge .sd-badge {
   justify-content: center;
 }
 sd-badge .sd-badge .sd-badge__dot {
+  width: 6px;
+  height: 6px;
+  min-width: 6px;
+  min-height: 6px;
+  border-radius: 9999px;
   background: var(--sd-badge-color, #0075FF);
 }
 sd-badge .sd-badge .sd-badge__label {
@@ -15,18 +20,4 @@ sd-badge .sd-badge .sd-badge__label {
   font-weight: 500;
   line-height: 20px;
   color: #333333;
-}
-sd-badge .sd-badge--sm .sd-badge__dot {
-  width: 4px;
-  height: 4px;
-  min-width: 4px;
-  min-height: 4px;
-  border-radius: 2px;
-}
-sd-badge .sd-badge--md .sd-badge__dot {
-  width: 8px;
-  height: 8px;
-  min-width: 8px;
-  min-height: 8px;
-  border-radius: 4px;
 }

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

@@ -1,12 +1,11 @@
 import { h } from "@stencil/core";
-import { resolveColor } from "../../utils/color";
+import { BADGE_COLOR_MAP } from "./sd-badge.config";
 export class SdBadge {
-    size = 'md';
-    color = 'brilliantblue_75';
+    color = 'blue';
     label = '';
     render() {
-        const resolvedColor = resolveColor(this.color);
-        return (h("div", { key: 'a83ffeb7171c32bafc3312d95c9fed576d676a0d', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'b6d84b2391d0e03edcab957b4edf73c765c04c35', class: "sd-badge__dot" }), h("div", { key: 'f06b5639135d87d7346b46c90a28ddeb40b05c9f', class: "sd-badge__label" }, this.label)));
+        const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
+        return (h("div", { key: '2326b8dc9bf6da9ab601dced34113bc62e99c4de', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '40366f078c74d07515a456ae3dcd9bdb02fe5f7b', class: "sd-badge__dot" }), h("div", { key: 'b2e03701635521a46d5a0dda4b489800f6f92cf9', class: "sd-badge__label" }, this.label)));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {
@@ -21,33 +20,20 @@ export class SdBadge {
     }
     static get properties() {
         return {
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'sm' | 'md'",
-                    "resolved": "\"md\" | \"sm\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size",
-                "defaultValue": "'md'"
-            },
             "color": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "BadgeColor",
+                    "resolved": "\"blue\" | \"darkblue\" | \"green\" | \"grey\" | \"indigo\" | \"orange\" | \"red\" | \"yellow\"",
+                    "references": {
+                        "BadgeColor": {
+                            "location": "import",
+                            "path": "./sd-badge.config",
+                            "id": "src/components/sd-badge/sd-badge.config.ts::BadgeColor",
+                            "referenceLocation": "BadgeColor"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -59,7 +45,7 @@ export class SdBadge {
                 "setter": false,
                 "reflect": false,
                 "attribute": "color",
-                "defaultValue": "'brilliantblue_75'"
+                "defaultValue": "'blue'"
             },
             "label": {
                 "type": "string",

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

@@ -4,7 +4,6 @@ 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,
@@ -25,11 +24,6 @@ export const BUTTON_CONFIG = {
         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',
@@ -60,11 +54,6 @@ export const BUTTON_CONFIG = {
         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',
@@ -95,11 +84,6 @@ export const BUTTON_CONFIG = {
         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',
@@ -130,11 +114,6 @@ export const BUTTON_CONFIG = {
         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',
@@ -161,7 +140,6 @@ 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,
@@ -170,7 +148,6 @@ 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,
@@ -179,7 +156,6 @@ 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,