@sellmate/design-system 1.0.66 → 1.0.68

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

@@ -0,0 +1,310 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BGyJgVXm.js';
+
+const chip = {
+	height: "24",
+	paddingX: "8",
+	gap: "4",
+	radius: "9999",
+	typography: {
+		"default": {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "500",
+			lineHeight: "20"
+		},
+		focus: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "400",
+			lineHeight: "20"
+		}
+	},
+	bg: {
+		"default": "#F6F6F6",
+		error: "#FCEFEF",
+		focus: "#FFFFFF"
+	},
+	content: {
+		"default": "#888888",
+		error: "#E30000",
+		focus: "#555555"
+	},
+	border: {
+		focus: "#E1E1E1",
+		width: "1"
+	}
+};
+var chipTokens = {
+	chip: chip
+};
+
+const CHIP_LAYOUT = {
+    height: `${chipTokens.chip.height}px`,
+    paddingX: `${chipTokens.chip.paddingX}px`,
+    gap: `${chipTokens.chip.gap}px`,
+    radius: `${chipTokens.chip.radius}px`,
+    borderWidth: `${chipTokens.chip.border.width}px`,
+};
+const CHIP_COLORS = {
+    bg: {
+        default: chipTokens.chip.bg.default,
+        error: chipTokens.chip.bg.error,
+        focus: chipTokens.chip.bg.focus,
+    },
+    content: {
+        default: chipTokens.chip.content.default,
+        error: chipTokens.chip.content.error,
+        focus: chipTokens.chip.content.focus,
+    },
+    border: {
+        focus: chipTokens.chip.border.focus,
+    },
+};
+const CHIP_TYPOGRAPHY = {
+    default: {
+        fontFamily: chipTokens.chip.typography.default.fontFamily,
+        fontSize: `${chipTokens.chip.typography.default.fontSize}px`,
+        fontWeight: chipTokens.chip.typography.default.fontWeight,
+        lineHeight: `${chipTokens.chip.typography.default.lineHeight}px`,
+    },
+    focus: {
+        fontFamily: chipTokens.chip.typography.focus.fontFamily,
+        fontSize: `${chipTokens.chip.typography.focus.fontSize}px`,
+        fontWeight: chipTokens.chip.typography.focus.fontWeight,
+        lineHeight: `${chipTokens.chip.typography.focus.lineHeight}px`,
+    },
+};
+
+const sdChipCss = () => `sd-chip{display:inline-flex;width:fit-content;height:fit-content}sd-chip .sd-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-chip-gap);height:var(--sd-chip-height);padding:0 var(--sd-chip-padding-x);border-radius:var(--sd-chip-radius);background:var(--sd-chip-bg);color:var(--sd-chip-content);border:var(--sd-chip-border-width) solid var(--sd-chip-border-color);font-family:var(--sd-chip-font-family);font-size:var(--sd-chip-font-size);font-weight:var(--sd-chip-font-weight);line-height:var(--sd-chip-line-height);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}sd-chip .sd-chip--editable:not(.sd-chip--focus){cursor:text}sd-chip .sd-chip--disabled{cursor:not-allowed;opacity:0.6}sd-chip .sd-chip__label{display:inline-flex;align-items:center;min-width:0}sd-chip .sd-chip__input{display:inline-block;min-width:1ch;outline:none;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:text}sd-chip .sd-chip__input:empty::before{content:attr(data-placeholder);color:inherit;opacity:0.6;pointer-events:none}sd-chip .sd-chip__remove{flex-shrink:0}`;
+
+const SdChip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.remove = createEvent(this, "sdRemove", 7);
+        this.focus = createEvent(this, "sdFocus", 7);
+        this.blur = createEvent(this, "sdBlur", 7);
+    }
+    get el() { return getElement(this); }
+    name = '';
+    value = '';
+    error = false;
+    disabled = false;
+    placeholder = '';
+    rules = [];
+    internalValue = '';
+    isEditing = false;
+    update;
+    remove;
+    focus;
+    blur;
+    inputEl;
+    draftValue = '';
+    shouldInitInput = false;
+    valueChanged(newValue) {
+        const nextValue = newValue ?? '';
+        const wasEditing = this.isEditing;
+        this.internalValue = nextValue;
+        this.draftValue = nextValue;
+        if (wasEditing) {
+            this.isEditing = false;
+            this.shouldInitInput = false;
+            this.inputEl?.blur();
+            this.blur.emit();
+        }
+    }
+    componentWillLoad() {
+        this.internalValue = this.value ?? '';
+    }
+    componentDidLoad() {
+        this.registerToForm();
+    }
+    disconnectedCallback() {
+        this.unregisterFromForm();
+    }
+    async sdValidate() {
+        if (!this.rules || this.rules.length === 0) {
+            this.error = false;
+            return true;
+        }
+        for (const rule of this.rules) {
+            const result = rule(this.internalValue ?? '');
+            if (result !== true) {
+                this.error = true;
+                return false;
+            }
+        }
+        this.error = false;
+        return true;
+    }
+    async sdReset() {
+        this.internalValue = '';
+        this.value = '';
+        this.error = false;
+        this.draftValue = '';
+        this.isEditing = false;
+        this.shouldInitInput = false;
+    }
+    async sdResetValidate() {
+        this.error = false;
+    }
+    async sdResetValidation() {
+        this.error = false;
+    }
+    async sdFocus() {
+        if (this.disabled)
+            return;
+        this.enterEditMode();
+    }
+    async sdGetNativeElement() {
+        return this.inputEl ?? null;
+    }
+    enterEditMode = () => {
+        if (this.disabled || this.isEditing)
+            return;
+        this.draftValue = this.internalValue;
+        this.shouldInitInput = true;
+        this.isEditing = true;
+        this.focus.emit();
+    };
+    commitEdit = async () => {
+        if (!this.isEditing)
+            return;
+        const next = (this.inputEl?.textContent ?? this.draftValue).trim();
+        const changed = next !== this.draftValue;
+        this.internalValue = next;
+        this.isEditing = false;
+        this.shouldInitInput = false;
+        this.value = next;
+        if (changed) {
+            this.update.emit(next);
+        }
+        await this.sdValidate();
+        this.blur.emit();
+    };
+    cancelEdit = () => {
+        if (!this.isEditing)
+            return;
+        this.internalValue = this.draftValue;
+        this.isEditing = false;
+        this.shouldInitInput = false;
+        this.blur.emit();
+    };
+    handleChipClick = () => {
+        if (this.disabled || this.isEditing)
+            return;
+        this.enterEditMode();
+    };
+    handleChipKeyDown = (event) => {
+        if (this.disabled || this.isEditing)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.enterEditMode();
+        }
+    };
+    handleInputChange = (event) => {
+        const target = event.target;
+        this.internalValue = target.textContent ?? '';
+    };
+    handleInputKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.commitEdit();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancelEdit();
+        }
+    };
+    handleInputBlur = () => {
+        this.commitEdit();
+    };
+    handlePaste = (event) => {
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text/plain') ?? '';
+        document.execCommand('insertText', false, text);
+    };
+    handleRemoveClick = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.remove.emit();
+    };
+    syncInputValue(value) {
+        if (!this.inputEl)
+            return;
+        this.inputEl.textContent = value;
+        const range = document.createRange();
+        range.selectNodeContents(this.inputEl);
+        range.collapse(false);
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+    }
+    registerToForm() {
+        const formEl = this.el.closest('sd-form');
+        if (!formEl || typeof formEl.componentOnReady !== 'function')
+            return;
+        formEl.componentOnReady().then(form => {
+            form.sdRegisterField(this);
+        });
+    }
+    unregisterFromForm() {
+        if (!this.name)
+            return;
+        const formEl = this.el.closest('sd-form');
+        formEl?.componentOnReady().then(form => {
+            form.sdUnregisterField(this.name);
+        });
+    }
+    componentDidUpdate() {
+        if (this.isEditing && this.inputEl && this.shouldInitInput) {
+            this.inputEl.focus();
+            this.syncInputValue(this.internalValue);
+            this.shouldInitInput = false;
+        }
+    }
+    resolveState() {
+        if (this.isEditing)
+            return 'focus';
+        if (this.error)
+            return 'error';
+        return 'default';
+    }
+    render() {
+        const state = this.resolveState();
+        const typography = state === 'focus' ? CHIP_TYPOGRAPHY.focus : CHIP_TYPOGRAPHY.default;
+        const cssVars = {
+            '--sd-chip-height': CHIP_LAYOUT.height,
+            '--sd-chip-padding-x': CHIP_LAYOUT.paddingX,
+            '--sd-chip-gap': CHIP_LAYOUT.gap,
+            '--sd-chip-radius': CHIP_LAYOUT.radius,
+            '--sd-chip-border-width': CHIP_LAYOUT.borderWidth,
+            '--sd-chip-bg': CHIP_COLORS.bg[state],
+            '--sd-chip-content': CHIP_COLORS.content[state],
+            '--sd-chip-border-color': state === 'focus' ? CHIP_COLORS.border.focus : 'transparent',
+            '--sd-chip-font-family': typography.fontFamily,
+            '--sd-chip-font-size': typography.fontSize,
+            '--sd-chip-font-weight': typography.fontWeight,
+            '--sd-chip-line-height': typography.lineHeight,
+        };
+        return (h("span", { key: 'ec814d57fb4032de1370e56d61cd51b6e831312a', class: {
+                'sd-chip': true,
+                [`sd-chip--${state}`]: true,
+                'sd-chip--disabled': this.disabled,
+                'sd-chip--editable': !this.disabled,
+            }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled || this.isEditing ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, style: cssVars, onClick: this.handleChipClick, onKeyDown: this.handleChipKeyDown }, this.isEditing ? (h("span", { key: "chip-input", ref: el => (this.inputEl = el), class: "sd-chip__input", contentEditable: !this.disabled, "data-placeholder": this.placeholder, spellcheck: false, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onBlur: this.handleInputBlur, onPaste: this.handlePaste, onClick: event => event.stopPropagation() })) : ([
+            h("span", { key: "chip-label", class: "sd-chip__label" }, this.internalValue),
+            !this.disabled && (h("sd-ghost-button", { key: "chip-remove", class: "sd-chip__remove", icon: "close", size: "xxs", ariaLabel: "remove", onClick: this.handleRemoveClick })),
+        ])));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+SdChip.style = sdChipCss();
+
+export { SdChip as sd_chip };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BqHL8W3c.js';
+import { r as registerInstance, h, H as Host } from './index-BGyJgVXm.js';
 
 const spinner = {
 	color: {
@@ -61,7 +61,7 @@ const SdCircleProgress = class {
             arcStyle.strokeDashoffset = '0';
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
-        return (h(Host, { key: 'fb876909febfc95bb69c58031ac37419baa07137', style: hostStyle }, h("svg", { key: '3bb8130bab317a74c1553dd2ceb52b8c0f65f69f', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '5904f93a6b1c333dbcbd805140d5e65b5af20080', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '4d8a1d352e4003a75dd63f67a66a05f595ae5700', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle }))));
+        return (h(Host, { key: '50b598305810f4f91c5afb7ede87c60178e4e6df', style: hostStyle }, h("svg", { key: '7edcf8a57bf5589910d08a47b64179222ce9c03b', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '43810b096bdd644e4b09bfd770de6b0194afe3c8', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '701cfdd0eadabea530d3a9deada993a568f3fb19', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle }))));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-BGyJgVXm.js';
 import { m as modalTokens } from './component.modal-DOXMJi-V.js';
 
 const CONFIRM_MODAL_DEFAULT_BUTTON = {
@@ -94,9 +94,9 @@ const SdConfirmModal = class {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (h("div", { key: 'c95e6e3992e9d63c19f27624e92c00b5046503e0', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'edab233c28ebcfc181062d78cb80ec27a3ace8b4', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '4ea2ef8ac6027a6455367b39b6d3cc6cf073f0a8', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '5a25a6f0812a6932949a2667db2af1b69d772293', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'b431572003c129a0d44095a317532b535753abd3', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'cd425d24bde982323a0156ff18f4dcdc81660dd5', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '9486cf19dc6692228f615112b0777b6167c1a8de', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '0ec5edeaef4920bb9193c225e5b39465e138eb25', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '78db09f415f399302048280a2d3eb6eb737c1d47', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '30921f2c1fc59b7baa608c5b270f45cced3b4a69', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'fdb1fa855a980ccad41101de0b1b0fc87a8a503b', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'e3539c1d7e82c957ba65e3d63e18e74108ed4ccc', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '010bb3a2918672714a664cc9afa561d82ea2af30', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '6501c456b1cac2fc14e62e8094c5996472eb10cc', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '7218d8bf72e26f36f88db68f57818911bb09056d', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: 'e16de1bb3c851988050b12ac07c7adcedab560da', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '8c14b099e6b8a93673ff3eb2f0931a45c98d620a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: 'fb9a3984f0476d2fceca98bac186d0a52a0ab206', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'fb38b92bc7ee05ede36eab14d65062a0b6289762', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '7834c5baf84a1537e511f77f1d2bb2c018b2e5df', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'ca7a8fa074bde0339052adbacb52a60459e3da23', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: '5e3238161e753a8ea2a0266d099ff03a89b63871', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -137,6 +137,7 @@ const SdLoadingModal = class {
     }
     state = 'loading';
     message = '';
+    useButton = false;
     buttonLabel = '';
     width;
     height;
@@ -175,7 +176,7 @@ const SdLoadingModal = class {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: 'dcc53b3421a88970ce4ad8258285a896da0e400c', style: hostStyle }, h("div", { key: 'bb2319b861392c8a88587b7654f2c6227b226cc7', class: "sd-loading-modal" }, h("div", { key: 'f3064846c06d2cd1e9d2474dc16fe80773c4a8f7', class: "sd-loading-modal__content" }, this.state === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("p", { key: '932c71930b4484d652266f85556e7eb2195a81c9', class: "sd-loading-modal__message" }, this.resolvedMessage), h("div", { key: 'e06cfa7729b72f881789d573f38116ac5086e062', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: '63684aa367e552df0e020ce4766d6c34c1361427', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick })))));
+        return (h(Host, { key: '8ecd5db2ffde201dd0c7d3c58b1da6b85b5a4116', style: hostStyle }, h("div", { key: '61f79b16b22d5ab4bb4dca03f88568174cfcfb1f', class: "sd-loading-modal" }, h("div", { key: 'bc373cfebab5949bee9c024bd86ca92d8294ff7b', class: "sd-loading-modal__content" }, this.state === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("p", { key: 'e9015b9c9813b1968c8ca7991d654761eb3ee9b3', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (h("div", { key: '4ed941961611fe9533bd2b989c9b68ef6c7ca741', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: '13f4c5ef5ad5285d846716e5dd72d9f2565c08f9', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, h } from './index-BGyJgVXm.js';
 
 const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
 

package/dist/esm/sd-date-picker-calendar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, h } from './index-BGyJgVXm.js';
 import { u as useDatePicker, t as today } from './useDatePicker-DTrMR0rx.js';
 import { W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './sd-date-picker.config-bYCOh35g.js';
 
@@ -140,7 +140,7 @@ const SdDatePickerCalendar = class {
             '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
             '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
         };
-        return (h("div", { key: '9e47bf6790f947639b1868a653c9d451905d4a49', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '641a9726b22aff0e465347bf3363fdd6f3110919', class: "sd-date-picker-calendar__header" }, h("div", { key: '71e4838be05148f989af7ccb692482db425c38d7', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: '060795c43807ee50b13448ac559fb7945a48d8be', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '5cf2c070134aa04dc5f9d506b91bdff759d9453b', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: 'dd3c9d26bc4b79673e12b90d2a7d563e4adda707', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '962ee5b8adbcbf988bc94b81b3dd0fe4e388a588', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: '54d1fcfbcbe1e232cbea5cdd9a948045207771c7', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: 'ff8011dbf88a257ba4b47dbcd1a3b8c414b4e7b5', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '2594eed1efacc8b3bdf648ab7527a81608e2321d', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: 'a83692da9caeaef4c02c777d43f769026182d5a2', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: 'bc131a11ed98ac84dee775090ca24be794fece55', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), h("div", { key: 'bc4deb734c9c01806ae7e75640f97d76c9e79f64', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
+        return (h("div", { key: 'd23c08b38605dad1e5b3266a7e1ad72e0aeb7eb9', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '1c25bd19272e1e7f4e81601a0ffa13d7b882e4e4', class: "sd-date-picker-calendar__header" }, h("div", { key: 'aed9a7ff3282d363c61b49dde6b6e9d6131a456c', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: '68ae361b1cc4bfd9351b093aee6d4193f2ac5549', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: 'e17d9a962faf96e8b70b0890e59e4c2e5ca515b0', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: 'ab65ce4f9f64fcc9f4084c073a0a0625ceeb9f2d', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: 'a01cb1691e9f112efdd6fd632c7594aa082d7f9f', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: '577085a6007e5e2c6b291bbe0a27c0ff4ec4ca78', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: 'c6b51b60d1bcc06e537800c10946ac49639fcb2c', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '836008030a0d66533ffba9392fee0234a9b0b425', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: 'a602cb65934157c171201f01699aacf1eeee8a57', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '0c1a368d4e878b2942f2b37ddff47ac13262c580', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), h("div", { key: '31cfa57cd8890a7cd70209c771598d6350009cc6', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
             const isToday = cell.inCurrentMonth && today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);

package/dist/esm/sd-date-picker-trigger.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, h } from './index-BGyJgVXm.js';
 import { a as DATEPICKER_SIZE_MAP, D as DATEPICKER_COLORS } from './sd-date-picker.config-bYCOh35g.js';
 
 const sdDatePickerTriggerCss = () => `sd-date-picker-trigger{display:block;width:100%;height:100%}sd-date-picker-trigger .sd-date-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-date-picker-trigger .sd-date-picker-trigger--disabled{cursor:not-allowed}sd-date-picker-trigger .sd-date-picker-trigger__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-date-picker-trigger .sd-date-picker-trigger__text{flex:1;min-width:0;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
@@ -38,10 +38,10 @@ const SdDatePickerTrigger = class {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: '5d8508069232bba144bfb9480b0befe420a3392b', class: {
+        return (h("div", { key: 'ebe886b3df3b50c53d31081f6ad7e251721b5cb1', class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, h("sd-icon", { key: '71131e34dd1225e9633395041f7a768c020343bd', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '192520646e181add5f87f6ce1d3a5caf8556b163', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            }, style: cssVars, onClick: this.handleClick }, h("sd-icon", { key: '563d3bb0221d5ba17788e1fa1e970fd2d702a4fd', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '3bfc4c6671e70571a4b71a62cf0fd78f0297027f', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
 };
 SdDatePickerTrigger.style = sdDatePickerTriggerCss();

package/dist/esm/sd-date-picker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BGyJgVXm.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-bYCOh35g.js';
 
@@ -100,9 +100,9 @@ const SdDatePicker = class {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '693c0c75e6b0a9ee8323f4be7ec101592e586372', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'ea7f506f0163119fac0c660ef1bef5781780a118', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: '1a84754cdc67bd6603e1fb48479f9d3ac6424d6a', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'e4d8e05b04ac7bd4f2f96809b33d67125fe7c6d8', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: '0109eb0326655018bc02cc373e766ffdada85ff0', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '65a628af43ae036a752f3511341fd8c9c82303a1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: '21f574fc9551f9aaccfcb5d49a81952dbba72d7a', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '244924af2c3ea207b2a90c5aef5064755da3ae52', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'f3d882d3450f629b6ed501b984d89ffd9633531f', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: 'a0f47851a27dd777f77da40f3258638a0fbc37a5', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/esm/sd-date-range-picker-calendar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-BGyJgVXm.js';
 import { u as useDatePicker, t as today } from './useDatePicker-DTrMR0rx.js';
 import { d as datepickerTokens, W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './sd-date-picker.config-bYCOh35g.js';
 
@@ -265,7 +265,7 @@ const SdDateRangePickerCalendar = class {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: '99b9de5fce7e4d039b40ed95b3451c28e7799dc8' }, h("div", { key: 'b55374e977f79e6dd7cd5d4af9df30bf41e40fba', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '6bd94cde83d82efc270148434dfb6410dc5f9634', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '9e179166ebad4cf295e831ef2e63fc9677f65b82', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '595c17bc338f96117d87c5ac3c2b26895b9e5283' }, h("div", { key: '39ce76545cc612422ab5024a2838fbc9faabb9a8', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '21764e31a3fbcfa8de22d1f243f5739fc02c38fd', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '402ea75f3bf8b58d30c34238285eef7099118e28', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{

package/dist/esm/sd-date-range-picker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BGyJgVXm.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-bYCOh35g.js';
 

package/dist/esm/sd-dropdown-button.entry.js

@@ -1,19 +1,8 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BGyJgVXm.js';
 import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
 import { B as BUTTON_CONFIG, g as getPresetName, c as PRESET_BORDER_COLORS$1, P as PRESET_CONTENT_COLORS$1, d as PRESET_HOVER_BACKGROUNDS$1, b as BUTTON_FOCUS_RING_COLOR } from './sd-button-v2.config-CV4xelxV.js';
 import { b as buttonTokens } from './component.button-B1XBwjCW.js';
-
-const color = {
-	bg: {
-		accent: {
-			"default": "#0075FF"}},
-	content: {
-		secondary: "#555555",
-		inverse: "#FFFFFF"
-	}};
-var systemTokens = {
-	color: color
-};
+import { s as systemTokens } from './system-C-txBx-h.js';
 
 const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
 const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, BUTTON_CONFIG[name]]));
@@ -255,7 +244,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: '1a6fa00329392de05526a50de55dcd620a43a2db', class: "sd-dropdown-button" }, h("button", { key: 'd73139863c8decca29079a8111e26ea5a2d21614', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (h("div", { key: '5493b94262ecdd20a5fbb7ad2993dd473b1ae9e3', class: "sd-dropdown-button" }, h("button", { key: 'a64187dec0d84dce3532f8b3d7112ed6d6ae8e0d', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -265,10 +254,10 @@ const SdDropdownButton = class extends BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, h("span", { key: '52e30c7d5f55b2ed974944b23880a42fdf941e31', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '8d693a472783e552613b0c0503b85dc9b5ce0343', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'e9f0fc3980400150c8808e569904bee6c4629dc7', class: {
+            } }, h("span", { key: '71ed27650dcb1beb1cfa4864a6449ab190f04829', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '6c34575c0587fb288165cf0e15db52ed6b3f50db', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '0544b9d36657a80b5f51b9c1849d55ab7a7dbdc2', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: '13fda88989885a9096ed6ecf211b3aadad3f128a', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, h("sd-icon", { key: 'cd73a4dffbe1fc31c76fea221cd080b455bb3131', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/esm/sd-file-picker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BGyJgVXm.js';
 
 const filepicker = {
 	height: "28",
@@ -43,7 +43,7 @@ const FILE_PICKER_COLORS = {
     },
 };
 
-const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;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: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:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.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);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.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: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 .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
+const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;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: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:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.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);left:50%;transform:translate(-50%);z-index:998;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.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: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 .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
 
 const SdFilePicker = class {
     constructor(hostRef) {
@@ -220,7 +220,7 @@ const SdFilePicker = class {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { icon: "close", size: "xxs", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { class: "sd-file-picker__tooltip" }, displayText))));
         if (this.inline) {
             return (h("div", { class: {
                     'sd-file-picker--inline': true,

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, h } from './index-BGyJgVXm.js';
 
 const SdForm = class {
     constructor(hostRef) {

package/dist/esm/sd-ghost-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, h } from './index-BGyJgVXm.js';
 
 const ghostButton = {
 	xxs: {
@@ -150,19 +150,19 @@ const SdGhostButton = class {
     render() {
         const sizeConfig = GHOST_BUTTON_SIZES[this.size];
         const contentColor = this.disabled
-            ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
-            : GHOST_BUTTON_CONTENT_COLORS[this.intent];
+            ? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
+            : GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (h("button", { key: 'eccb34969779d75bcd77dd6ae12cb99a419af121', class: {
+        return (h("button", { key: '690151271d15b4a3e07b47021f368647cc9daf62', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
                 '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
-                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
+                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: '4ae160e73b72b0b4aa40947c126419b1016c81d3', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: '9769fff9f694e7d1fa2cba94fa8e80498d0afe2e', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();