@sellmate/design-system 0.0.55 → 1.0.0

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

@@ -0,0 +1,66 @@
+'use strict';
+
+var index = require('./index-D_J8ScR5.js');
+
+const sdTabsCss = () => `sd-tabs{display:inline-block}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:4px;border-bottom:1px solid #0075ff}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid #cccccc;border-bottom:none;border-radius:4px 4px 0 0;background-color:#f6f6f6;color:#888888;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.3s}sd-tabs .sd-tabs__tab--selected{border-color:#0075ff;color:#0075ff;background-color:white}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:700}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:#0075ff;opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:#888888;opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:700;visibility:hidden;position:relative}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:400;transition:font-weight 0.2s ease}sd-tabs .sd-tabs--md .sd-tabs__tab{padding:12px 32px;font-size:12px;line-height:20px}sd-tabs .sd-tabs--sm .sd-tabs__tab{padding:8px 20px;font-size:12px;line-height:16px}sd-tabs .sd-tabs--sub{gap:32px;border-bottom:none}sd-tabs .sd-tabs--sub .sd-tabs__tab{border:none;border-radius:0;background-color:transparent;color:#222222;font-weight:400;padding:0 0 2px 0;position:relative}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;width:100%;background-color:#0075ff;opacity:0;transition:opacity 0.2s ease}sd-tabs .sd-tabs--sub .sd-tabs__tab::after{font-weight:400}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:#0075ff;background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::after{font-weight:700}`;
+
+const SdTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.update = index.createEvent(this, "sdUpdate");
+    }
+    value;
+    tabs = [];
+    size = 'md';
+    isSub = false;
+    update;
+    componentWillLoad() {
+        if (this.value !== undefined && this.value !== null) {
+            this.value = this.value;
+        }
+    }
+    valueChanged(newValue) {
+        this.value = newValue;
+    }
+    handleTabClick = (tabValue) => {
+        this.value = tabValue;
+        this.value = tabValue;
+        this.update.emit(tabValue);
+    };
+    isTabSelected(tab) {
+        return this.value === tab.value;
+    }
+    getTabClasses(tab) {
+        const classes = [
+            'sd-tabs__tab',
+            this.isTabSelected(tab) ? 'sd-tabs__tab--selected' : 'sd-tabs__tab--unselected',
+        ];
+        return classes.join(' ');
+    }
+    getContainerClasses() {
+        const classes = ['sd-tabs', `sd-tabs--${this.size}`];
+        if (this.isSub) {
+            classes.push('sd-tabs--sub');
+        }
+        return classes.join(' ');
+    }
+    getBadgeColors(tab) {
+        if (this.isTabSelected(tab)) {
+            return { bgColor: '#E6F1FF', textColor: '#0075FF' };
+        }
+        return { bgColor: '#E5E5E5', textColor: '#737373' };
+    }
+    render() {
+        return (index.h("div", { key: '1f9b39d82a7a98bb9dffd522d9f703b41682ae71', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
+            const badgeColors = this.getBadgeColors(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", { size: this.size, label: tab.badge.toString(), bgColor: badgeColors.bgColor, textColor: badgeColors.textColor, rounded: false }))));
+        })));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+};
+SdTabs.style = sdTabsCss();
+
+exports.sd_tabs = SdTabs;
+//# sourceMappingURL=sd-tabs.entry.cjs.js.map

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

@@ -0,0 +1,57 @@
+'use strict';
+
+var index = require('./index-D_J8ScR5.js');
+
+const sdTagCss = () => `:host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}`;
+
+const TAG_COLORS = {
+    grey: 'bg-grey_20 text-grey_70',
+    red: 'bg-red_15 text-red_70',
+    orange: 'bg-orange_10 text-orange_65',
+    yellow: 'bg-yellow_10 text-yellow_70',
+    green: 'bg-green_15 text-green_75',
+    blue: 'bg-brilliantblue_20 text-brilliantblue_75',
+    darkblue: 'bg-oceanblue_15 text-oceanblue_70',
+    indigo: 'bg-brilliantblue_10 text-brilliantblue_85',
+};
+const SdTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    size = 'md';
+    color = 'grey';
+    rounded = false;
+    label = '';
+    bgColor;
+    textColor;
+    getTagClasses() {
+        const classes = ['sd-tag', `sd-tag--${this.size}`];
+        if (this.rounded) {
+            classes.push('sd-tag--rounded');
+        }
+        if (this.color && !this.bgColor && !this.textColor) {
+            classes.push(TAG_COLORS[this.color]);
+        }
+        if (this.bgColor || this.textColor) {
+            classes.push('sd-tag--custom-color');
+        }
+        return classes.join(' ');
+    }
+    renderContent() {
+        return [
+            index.h("span", { class: "sd-tag__content" }, index.h("slot", null, this.label)),
+        ];
+    }
+    render() {
+        const tagClasses = this.getTagClasses();
+        return (index.h("span", { key: '2a25443d15ad9d0c9205455e80cf236d02cec6d9', class: tagClasses, style: {
+                '--tag-bg-color': this.bgColor,
+                '--tag-text-color': this.textColor,
+            }, "aria-label": this.label || 'tag' }, this.renderContent()));
+    }
+};
+SdTag.style = sdTagCss();
+
+exports.sd_tag = SdTag;
+//# sourceMappingURL=sd-tag.entry.cjs.js.map

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

@@ -0,0 +1,61 @@
+'use strict';
+
+var index = require('./index-D_J8ScR5.js');
+var resolveColor = require('./resolveColor-B7Ku3IGq.js');
+
+const sdToastMessageCss = () => `.sd-toast-message.sc-sd-toast-message{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-message--hidden.sc-sd-toast-message{opacity:0;visibility:hidden;pointer-events:none}.sd-toast-message__icon.sc-sd-toast-message{display:flex;align-items:center;flex-shrink:0}.sd-toast-message__content.sc-sd-toast-message{display:flex;flex:1}.sd-toast-message__message.sc-sd-toast-message{font-size:14px;line-height:20px;font-weight:400}.sd-toast-message__link.sc-sd-toast-message{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-message__link.sc-sd-toast-message:hover{opacity:0.8}.sd-toast-message__button.sc-sd-toast-message{flex-shrink:0}.sd-toast-message__button.sc-sd-toast-message button.sc-sd-toast-message{color:var(--button-text-color, inherit) !important}.sd-toast-message__close.sc-sd-toast-message{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-message__close.sc-sd-toast-message:hover{opacity:0.7}.sd-toast-message__close.sc-sd-toast-message:active{opacity:0.5}`;
+
+const SdToastMessage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.close = index.createEvent(this, "sdClose");
+        this.buttonClick = index.createEvent(this, "sdButtonClick");
+    }
+    icon;
+    message;
+    link;
+    linkLabel;
+    buttonLabel;
+    useClose = false;
+    type = 'basicDark';
+    close;
+    buttonClick;
+    isVisible = true;
+    static COLOR_OF_TYPE = {
+        basicLight: { background: 'white', text: 'grey_95' },
+        basicDark: { background: 'steelblue_90', text: 'white' },
+        error: { background: 'red_70', text: 'white' },
+        caution: { background: 'yellow_40', text: 'grey_90' },
+        complete: { background: 'green_75', text: 'white' },
+        progress: { background: 'brilliantblue_80', text: 'white' },
+    };
+    handleClose = () => {
+        this.isVisible = false;
+        this.close.emit();
+    };
+    handleButtonClick = () => {
+        this.buttonClick.emit();
+    };
+    getContainerClasses() {
+        const classes = ['sd-toast-message', `sd-toast-message--${this.type}`];
+        if (!this.isVisible) {
+            classes.push('sd-toast-message--hidden');
+        }
+        return classes.join(' ');
+    }
+    render() {
+        const colorTokens = SdToastMessage.COLOR_OF_TYPE[this.type];
+        const colors = {
+            background: resolveColor.resolveColor(colorTokens.background),
+            text: resolveColor.resolveColor(colorTokens.text),
+        };
+        return (index.h(index.Host, { key: 'edd60b2a74bae15c88131baedaa3e913dc5326ae', style: {
+                '--sd-toast-bg': colors.background,
+                '--sd-toast-text': colors.text,
+            } }, index.h("div", { key: 'b41ad15e9fe7520ee8fbf683f6d95e327c59ac6c', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'def78fc8bc05ead9b97144dccc4f105fad953477', class: "sd-toast-message__icon" }, index.h("sd-icon", { key: 'a01368892d295aee0339fa027663bffe31fb2c2b', name: this.icon, size: 16, color: colors.text }))), index.h("div", { key: 'f0c6d32da360c2135aee2374b1091c27bddf4d22', class: "sd-toast-message__content" }, index.h("span", { key: '0f1f7d81154470ad9bcc3d8d4c1ed0c0994da7bb', class: "sd-toast-message__message" }, this.message)), this.link && (index.h("a", { key: '2a4f7b21940e2234653a18e8a677aba9586d18e3', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: 'd399961349429bee81fa395c555879fabef86136', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor.resolveColor('grey_95') } : {} })), this.useClose && (index.h("button", { key: '4bfae7573d5a5204c29d5ef0e2dc71e9a7622d62', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '7ac20a34965ee46c8af76c6c862a69269a73f1a2', name: "close", size: 12, color: colors.text }))))));
+    }
+};
+SdToastMessage.style = sdToastMessageCss();
+
+exports.sd_toast_message = SdToastMessage;
+//# sourceMappingURL=sd-toast-message.entry.cjs.js.map

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

@@ -0,0 +1,50 @@
+'use strict';
+
+var index = require('./index-D_J8ScR5.js');
+
+const sdToggleButtonCss = () => `sd-toggle-button{display:inline-block;line-height:0}.sd-toggle-button{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:4px 12px;gap:6px;border-radius:14px;border:1px solid #888888;background-color:#ffffff;color:#737373;font-size:12px;line-height:20px;font-weight:400;cursor:pointer;transition:border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;white-space:nowrap;user-select:none;box-sizing:border-box}.sd-toggle-button--active{border-color:#0075ff;color:#0075ff}.sd-toggle-button--disabled{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed}.sd-toggle-button--disabled.sd-toggle-button--active{background-color:#eeeeee;border-color:#cccccc;color:#888888}.sd-toggle-button:hover:not(.sd-toggle-button--disabled):not(.sd-toggle-button--active){border-color:#737373}.sd-toggle-button:hover:not(.sd-toggle-button--disabled).sd-toggle-button--active{border-color:#005cc9;color:#005cc9}`;
+
+const SdToggleButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.change = index.createEvent(this, "sdUpdate");
+    }
+    value = false;
+    label = '';
+    disabled = false;
+    isActive = false;
+    change;
+    componentWillLoad() {
+        this.updateActiveState(this.value);
+    }
+    componentWillRender() {
+        this.updateActiveState(this.value);
+    }
+    updateActiveState(value) {
+        this.isActive = value;
+    }
+    get buttonClasses() {
+        const classes = ['sd-toggle-button'];
+        if (this.isActive) {
+            classes.push('sd-toggle-button--active');
+        }
+        if (this.disabled) {
+            classes.push('sd-toggle-button--disabled');
+        }
+        return classes.join(' ');
+    }
+    handleChange = () => {
+        if (this.disabled)
+            return;
+        const newValue = !this.value;
+        this.value = newValue;
+        this.change.emit(newValue);
+    };
+    render() {
+        return (index.h("label", { key: '9eb4abcfe8f3894198c8d8643150daa507e6f0e9', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: 'e3d952af461da0fac978b8ce6bd55a6990907fb3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+    }
+};
+SdToggleButton.style = sdToggleButtonCss();
+
+exports.sd_toggle_button = SdToggleButton;
+//# sourceMappingURL=sd-toggle-button.entry.cjs.js.map

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

@@ -0,0 +1,46 @@
+'use strict';
+
+var index = require('./index-D_J8ScR5.js');
+
+const sdToggleCss = () => `sd-toggle{display:inline-block;height:20px;line-height:0}sd-toggle .sd-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px}sd-toggle .sd-toggle>input{display:none}sd-toggle .sd-toggle__label{font-size:12px;color:#333333;line-height:20px}sd-toggle .sd-toggle__track{width:36px;height:20px;border-radius:12px;background:#cccccc;position:relative;transition:background-color 0.2s ease}sd-toggle .sd-toggle__thumb{width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;transition:transform 0.2s ease}sd-toggle .sd-toggle--checked .sd-toggle__track{background:#0075ff}sd-toggle .sd-toggle--checked .sd-toggle__thumb{transform:translateX(16px)}sd-toggle .sd-toggle--disabled{cursor:not-allowed}sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track{background:#bbdaff}sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track{background:#eeeeee}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track{background:#005cc9}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track{background:#bbbbbb}`;
+
+const SdToggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.change = index.createEvent(this, "sdUpdate");
+    }
+    value = false;
+    label = '';
+    disabled = false;
+    change;
+    componentWillLoad() {
+        this.updateCheckedState(this.value);
+    }
+    componentWillRender() {
+        this.updateCheckedState(this.value);
+    }
+    updateCheckedState(value) {
+        this.value = value;
+    }
+    get toggleClasses() {
+        const classes = ['sd-toggle', this.value ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];
+        if (this.disabled) {
+            classes.push('sd-toggle--disabled');
+        }
+        return classes.join(' ');
+    }
+    handleChange = () => {
+        if (this.disabled)
+            return;
+        const newValue = !this.value;
+        this.value = newValue;
+        this.change.emit(newValue);
+    };
+    render() {
+        return (index.h("label", { key: 'ca85bc0493aff9ff17108696ddb8af29734b00f5', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'b99a4fa0d557968e50b302332778faaf1b46f8cc', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: 'e62ca806b95463c7807f82ace61b4aa0affec962', class: "sd-toggle__label" }, this.label), index.h("div", { key: '6923da9a043df0d0d7fc0ecf2fe175857279e9b3', class: "sd-toggle__track" }, index.h("div", { key: '090dfbcf308f26b8e200d0e2cd69d44b0f5cb8bf', class: "sd-toggle__thumb" }))));
+    }
+};
+SdToggle.style = sdToggleCss();
+
+exports.sd_toggle = SdToggle;
+//# sourceMappingURL=sd-toggle.entry.cjs.js.map

package/dist/cjs/{tooltipArrow-8I9A3AOE.js → tooltipArrow-DU2DB2AD.js}

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

package/dist/cjs/{tooltipArrow-8I9A3AOE.js.map → tooltipArrow-DU2DB2AD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tooltipArrow-8I9A3AOE.js","sources":["src/components/assets/tooltipArrow.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\nexport const TooltipArrow = (props: SVGProps) => (\n <svg\n  width=\"16\"\n  height=\"12\"\n  viewBox=\"0 0 16 12\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  {...props}\n >\n  <path\n   d=\"M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z\"\n   fill=\"currentColor\"\n  />\n </svg>\n);\n"],"names":["h"],"mappings":";;;;AAEa,MAAA,YAAY,GAAG,CAAC,KAAe,MAC3CA,OACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,EAAA,EAETA,OACC,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,iHAAiH,EACnH,IAAI,EAAC,cAAc,EAAA,CAClB,CACG;;;;"}
+{"version":3,"file":"tooltipArrow-DU2DB2AD.js","sources":["src/components/assets/tooltipArrow.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\nexport const TooltipArrow = (props: SVGProps) => (\n <svg\n  width=\"16\"\n  height=\"12\"\n  viewBox=\"0 0 16 12\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  {...props}\n >\n  <path\n   d=\"M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z\"\n   fill=\"currentColor\"\n  />\n </svg>\n);\n"],"names":["h"],"mappings":";;;;AAEa,MAAA,YAAY,GAAG,CAAC,KAAe,MAC3CA,OACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,EAAA,EAETA,OACC,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,iHAAiH,EACnH,IAAI,EAAC,cAAc,EAAA,CAClB,CACG;;;;"}

package/dist/collection/collection-manifest.json

@@ -3,13 +3,14 @@
     "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-button-group/sd-radio-button-group.js",
     "components/sd-radio-group/sd-radio-group.js",
     "components/sd-select/sd-select.js",
     "components/sd-select-multiple-group/sd-select-multiple-group.js",
     "components/sd-table/sd-table.js",
-    "components/sd-table-backup/sd-table-backup.js",
     "components/sd-tabs/sd-tabs.js",
     "components/sd-tag/sd-tag.js",
     "components/sd-toast-message/sd-toast-message.js",
@@ -17,7 +18,9 @@
     "components/sd-card/sd-card.js",
     "components/sd-date-picker/sd-date-picker.js",
     "components/sd-date-range-picker/sd-date-range-picker.js",
+    "components/sd-field/sd-field.js",
     "components/sd-file-picker/sd-file-picker.js",
+    "components/sd-floating-portal/sd-floating-portal.js",
     "components/sd-guide/sd-guide.js",
     "components/sd-icon/sd-icon.js",
     "components/sd-input/sd-input.js",
@@ -27,18 +30,14 @@
     "components/sd-popover/sd-popover.js",
     "components/sd-portal/sd-portal.js",
     "components/sd-progress/sd-progress.js",
+    "components/sd-select/sd-select-dropdown/sd-select-dropdown.js",
     "components/sd-select/sd-select-option/sd-select-option.js",
     "components/sd-select/sd-select-search-input/sd-select-search-input.js",
     "components/sd-select-multiple/sd-select-multiple.js",
     "components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js",
-    "components/sd-table/sd-tbody/sd-tbody.js",
-    "components/sd-table/sd-td/sd-td.js",
-    "components/sd-table/sd-th/sd-th.js",
-    "components/sd-table/sd-tr/sd-tr.js",
+    "components/sd-textarea/sd-textarea.js",
     "components/sd-toggle/sd-toggle.js",
-    "components/sd-toggle-button/sd-toggle-button.js",
-    "components/sd-tooltip/sd-tooltip.js",
-    "components/sd-tooltip-portal/sd-tooltip-portal.js"
+    "components/sd-toggle-button/sd-toggle-button.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -1,30 +1,29 @@
-:host {
-  line-height: 0;
-}
-
-.sd-badge {
+sd-badge {
   display: inline-flex;
+}
+sd-badge .sd-badge {
+  display: flex;
   align-items: center;
   justify-content: center;
 }
-.sd-badge .sd-badge__dot {
+sd-badge .sd-badge .sd-badge__dot {
   background: var(--sd-badge-color, #0075ff);
 }
-.sd-badge .sd-badge__label {
+sd-badge .sd-badge .sd-badge__label {
   margin-left: 8px;
   font-size: 12px;
   font-weight: 500;
   line-height: 20px;
   color: #333333;
 }
-.sd-badge--sm .sd-badge__dot {
+sd-badge .sd-badge--sm .sd-badge__dot {
   width: 4px;
   height: 4px;
   min-width: 4px;
   min-height: 4px;
   border-radius: 2px;
 }
-.sd-badge--md .sd-badge__dot {
+sd-badge .sd-badge--md .sd-badge__dot {
   width: 8px;
   height: 8px;
   min-width: 8px;

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

@@ -6,10 +6,9 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (h(Host, { key: '7044001c3736a77e08fc7f6aea4ae887ea84c1ec', style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '5ba646343bf81ebfa2fb0d0fa42b4e1800b5595b', class: `sd-badge sd-badge--${this.size}` }, h("div", { key: '0e6c9ef82791eb9916dc64baf99233cb5644c4b9', class: "sd-badge__dot" }), h("div", { key: '37f3dc62507e7c2db7549bc3d2d7d72cc2fcb1e2', class: "sd-badge__label" }, this.label))));
+        return (h(Host, { key: '8e74db398e9dafb57d276ef22ee8ab5891526e15', style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '23d4800224630f028e26b43e672ec6a33b4d2f28', class: `sd-badge sd-badge--${this.size}` }, h("div", { key: '376446696e366a9b6e1f816a45fcf073ef967c6d', class: "sd-badge__dot" }), h("div", { key: '750ab1c9792fa8174cf5ecdeb0c709bfaff2294a', class: "sd-badge__label" }, this.label))));
     }
     static get is() { return "sd-badge"; }
-    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["sd-badge.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"sd-badge.js","sourceRoot":"","sources":["../../../src/components/sd-badge/sd-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,MAAM,OAAO,OAAO;IACX,IAAI,GAAgB,IAAI,CAAC;IACzB,KAAK,GAAW,kBAAkB,CAAC;IACnC,KAAK,GAAW,EAAE,CAAC;IAE3B,MAAM;QACL,MAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE/C,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,aAAa,EAAE;YACjD,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,IAAI,EAAE;gBAC5C,4DAAK,KAAK,EAAC,eAAe,GAAO;gBACjC,4DAAK,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC1C,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\n@Component({\n tag: 'sd-badge',\n styleUrl: 'sd-badge.scss',\n scoped: true,\n})\nexport class SdBadge {\n @Prop() size: 'sm' | 'md' = 'md';\n @Prop() color: string = 'brilliantblue_75';\n @Prop() label: string = '';\n\n render() {\n  const resolvedColor = resolveColor(this.color);\n\n  return (\n   <Host style={{ '--sd-badge-color': resolvedColor }}>\n    <div class={`sd-badge sd-badge--${this.size}`}>\n     <div class=\"sd-badge__dot\"></div>\n     <div class=\"sd-badge__label\">{this.label}</div>\n    </div>\n   </Host>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-badge.js","sourceRoot":"","sources":["../../../src/components/sd-badge/sd-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,MAAM,OAAO,OAAO;IACX,IAAI,GAAgB,IAAI,CAAC;IACzB,KAAK,GAAW,kBAAkB,CAAC;IACnC,KAAK,GAAW,EAAE,CAAC;IAE3B,MAAM;QACL,MAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE/C,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,aAAa,EAAE;YACjD,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,IAAI,EAAE;gBAC5C,4DAAK,KAAK,EAAC,eAAe,GAAO;gBACjC,4DAAK,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC1C,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\n@Component({\n tag: 'sd-badge',\n styleUrl: 'sd-badge.scss',\n})\nexport class SdBadge {\n @Prop() size: 'sm' | 'md' = 'md';\n @Prop() color: string = 'brilliantblue_75';\n @Prop() label: string = '';\n\n render() {\n  const resolvedColor = resolveColor(this.color);\n\n  return (\n   <Host style={{ '--sd-badge-color': resolvedColor }}>\n    <div class={`sd-badge sd-badge--${this.size}`}>\n     <div class=\"sd-badge__dot\"></div>\n     <div class=\"sd-badge__label\">{this.label}</div>\n    </div>\n   </Host>\n  );\n }\n}\n"]}

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

@@ -1,5 +1,5 @@
 sd-button {
-  display: inline-block;
+  display: inline-flex;
   width: fit-content;
   height: fit-content;
 }
@@ -18,6 +18,7 @@ sd-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  border: none;
 }
 .sd-button--xs {
   padding: 0 8px;

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { resolveColor } from "../../utils/color";
 const ICON_SIZES = {
     xs: 12,
@@ -20,15 +20,6 @@ export class SdButton {
     iconRight;
     noHover = false;
     class = '';
-    sdClick;
-    handleClick = (event) => {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        this.sdClick.emit(event);
-    };
     getButtonClasses() {
         const classes = ['sd-button'];
         classes.push(`sd-button--${this.variant}`);
@@ -49,7 +40,7 @@ export class SdButton {
         const buttonClasses = this.getButtonClasses();
         // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
         const resolvedColor = resolveColor(this.color);
-        return (h(Host, { key: '7ad8b189abbee6a59fee2ba3fc97dee48c5e3058', style: { '--button-color': resolvedColor }, disabled: this.disabled }, h("button", { key: 'd335be4ddcbc4f4d9908a1cdf20bfd94bbaff3e3', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, onClick: this.handleClick }, h("div", { key: '362c6bd73c38108058ea1cdb16149c1906588cbd', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '85d8ccc677e6cb633a35b2a2a76432ac7f67b807', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: 'fa51d7ab94e039ee52c122dc022429253bdca921', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: 'b4c0c866b86832146b8f156b68f931df280ec83a', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor }))))));
+        return (h("button", { key: '9b92f98528d06453492eab68bb6137bcaefbf656', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor } }, h("div", { key: 'a7dae76ec9112b95c2ee765cb2f9b0b4fe5f705a', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '71784bfcb2d08c77305a70311192dfc2c059ff0a', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: 'bc4b7dec430602765e98fa484d397b141686d8e7', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '26744c6ace43cbbfc9758a8fdf0174b49f24cd2c', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
     }
     static get is() { return "sd-button"; }
     static get originalStyleUrls() {
@@ -324,29 +315,6 @@ export class SdButton {
             }
         };
     }
-    static get events() {
-        return [{
-                "method": "sdClick",
-                "name": "sdClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "MouseEvent",
-                    "resolved": "MouseEvent",
-                    "references": {
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        }
-                    }
-                }
-            }];
-    }
     static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=sd-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sd-button.js","sourceRoot":"","sources":["../../../src/components/sd-button/sd-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Event, EventEmitter, Host } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\n xs: 12,\n sm: 16,\n md: 20,\n lg: 24,\n};\n\n@Component({\n tag: 'sd-button',\n styleUrl: 'sd-button.scss',\n})\nexport class SdButton {\n @Element() el!: HTMLElement;\n\n @Prop() variant?: ButtonVariant = 'primary';\n @Prop() size: ButtonSize = 'sm';\n @Prop() color: string = '#025497';\n @Prop() label: string = '';\n @Prop() disabled: boolean = false;\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n @Prop() icon?: IconName;\n @Prop() iconColor?: string;\n @Prop() iconSize?: number;\n @Prop() iconRight?: IconName;\n @Prop() noHover: boolean = false;\n @Prop() class: string = '';\n @Event() sdClick!: EventEmitter<MouseEvent>;\n\n private handleClick = (event: MouseEvent) => {\n  if (this.disabled) {\n   event.preventDefault();\n   event.stopPropagation();\n   return;\n  }\n  this.sdClick.emit(event);\n };\n\n private getButtonClasses(): string {\n  const classes = ['sd-button'];\n\n  classes.push(`sd-button--${this.variant}`);\n  classes.push(`sd-button--${this.size}`);\n  classes.push(`sd-button--color-${this.color}`);\n\n  if (this.disabled) {\n   classes.push('sd-button--disabled');\n  }\n\n  if (!this.label && (this.icon || this.iconRight)) {\n   classes.push('sd-button--icon-only');\n  }\n\n  if (this.noHover) {\n   classes.push('sd-button--no-hover');\n  }\n\n  return classes.join(' ');\n }\n\n render() {\n  const buttonClasses = this.getButtonClasses();\n  // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\n  const resolvedColor = resolveColor(this.color);\n\n  return (\n   <Host style={{ '--button-color': resolvedColor }} disabled={this.disabled}>\n    <button\n     class={`${buttonClasses} ${this.class}`}\n     type={this.type}\n     disabled={this.disabled}\n     onClick={this.handleClick}\n    >\n     <div class=\"sd-button__content\">\n      {this.icon && (\n       <sd-icon\n        class=\"sd-button__icon sd-button__icon--left\"\n        name={this.icon}\n        size={this.iconSize ?? ICON_SIZES[this.size!]}\n        color={\n         this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor)\n        }\n       ></sd-icon>\n      )}\n\n      {this.label && <div class=\"sd-button__label\">{this.label}</div>}\n\n      {this.iconRight && (\n       <sd-icon\n        class=\"sd-button__icon sd-button__icon--right\"\n        name={this.iconRight}\n        size={ICON_SIZES[this.size!]}\n        color={this.variant === 'primary' ? '#fff' : resolvedColor}\n       ></sd-icon>\n      )}\n     </div>\n    </button>\n   </Host>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-button.js","sourceRoot":"","sources":["../../../src/components/sd-button/sd-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\n xs: 12,\n sm: 16,\n md: 20,\n lg: 24,\n};\n\n@Component({\n tag: 'sd-button',\n styleUrl: 'sd-button.scss',\n})\nexport class SdButton {\n @Element() el!: HTMLElement;\n\n @Prop() variant?: ButtonVariant = 'primary';\n @Prop() size: ButtonSize = 'sm';\n @Prop() color: string = '#025497';\n @Prop() label: string = '';\n @Prop() disabled: boolean = false;\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n @Prop() icon?: IconName;\n @Prop() iconColor?: string;\n @Prop() iconSize?: number;\n @Prop() iconRight?: IconName;\n @Prop() noHover: boolean = false;\n @Prop() class: string = '';\n\n private getButtonClasses(): string {\n  const classes = ['sd-button'];\n\n  classes.push(`sd-button--${this.variant}`);\n  classes.push(`sd-button--${this.size}`);\n  classes.push(`sd-button--color-${this.color}`);\n\n  if (this.disabled) {\n   classes.push('sd-button--disabled');\n  }\n\n  if (!this.label && (this.icon || this.iconRight)) {\n   classes.push('sd-button--icon-only');\n  }\n\n  if (this.noHover) {\n   classes.push('sd-button--no-hover');\n  }\n\n  return classes.join(' ');\n }\n\n render() {\n  const buttonClasses = this.getButtonClasses();\n  // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\n  const resolvedColor = resolveColor(this.color);\n\n  return (\n   <button\n    class={`${buttonClasses} ${this.class}`}\n    type={this.type}\n    disabled={this.disabled}\n    style={{ '--button-color': resolvedColor }}\n   >\n    <div class=\"sd-button__content\">\n     {this.icon && (\n      <sd-icon\n       class=\"sd-button__icon sd-button__icon--left\"\n       name={this.icon}\n       size={this.iconSize ?? ICON_SIZES[this.size!]}\n       color={this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor)}\n      ></sd-icon>\n     )}\n\n     {this.label && <div class=\"sd-button__label\">{this.label}</div>}\n\n     {this.iconRight && (\n      <sd-icon\n       class=\"sd-button__icon sd-button__icon--right\"\n       name={this.iconRight}\n       size={ICON_SIZES[this.size!]}\n       color={this.variant === 'primary' ? '#fff' : resolvedColor}\n      ></sd-icon>\n     )}\n    </div>\n   </button>\n  );\n }\n}\n"]}

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

@@ -1,11 +1,9 @@
 sd-card {
   display: block;
   height: fit-content;
-}
-sd-card .sd-card {
   border-radius: 8px;
   background: white;
 }
-sd-card .sd-card.sd-card--bordered {
+sd-card.sd-card--bordered {
   border: 1px solid #e1e1e1;
 }

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

@@ -1,9 +1,9 @@
 import { Host, h } from "@stencil/core";
 export class SdCard {
     bordered = true;
-    class = '';
+    cardClassName = '';
     render() {
-        return (h(Host, { key: '902920358ec434881c5e8d1ec77758dd74dd4c31' }, h("div", { key: '9b2eb1ec45fc2345b30efe26a9aed2a44f39e0e1', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: 'd31d14e706a89d53d5915e0a411838ad5567fd20' }))));
+        return (h(Host, { key: 'f7012e01206131628820f41ede93ce68cb121fe4', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}` }, h("slot", { key: '5b978729afb2cf6fef8a8ad696029ef09dbb0dd9' })));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {
@@ -38,16 +38,16 @@ export class SdCard {
                 "attribute": "bordered",
                 "defaultValue": "true"
             },
-            "class": {
+            "cardClassName": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -55,7 +55,7 @@ export class SdCard {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "class",
+                "attribute": "card-class-name",
                 "defaultValue": "''"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"sd-card.js","sourceRoot":"","sources":["../../../src/components/sd-card/sd-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,MAAM;IACV,QAAQ,GAAY,IAAI,CAAC;IACzB,KAAK,GAAW,EAAE,CAAC;IAE3B,MAAM;QACL,OAAO,CACN,EAAC,IAAI;YACJ,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE;gBAC9E,8DAAa,CACR,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-card',\n styleUrl: 'sd-card.scss',\n})\nexport class SdCard {\n @Prop() bordered: boolean = true;\n @Prop() class: string = '';\n\n render() {\n  return (\n   <Host>\n    <div class={`sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}`}>\n     <slot></slot>\n    </div>\n   </Host>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-card.js","sourceRoot":"","sources":["../../../src/components/sd-card/sd-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,MAAM;IACV,QAAQ,GAAY,IAAI,CAAC;IACzB,aAAa,GAAY,EAAE,CAAC;IAEpC,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE;YACvF,8DAAa,CACP,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-card',\n styleUrl: 'sd-card.scss',\n})\nexport class SdCard {\n @Prop() bordered: boolean = true;\n @Prop() cardClassName?: string = '';\n\n render() {\n  return (\n   <Host class={`sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}`}>\n    <slot></slot>\n   </Host>\n  );\n }\n}\n"]}