@sellmate/design-system 1.0.37 → 1.0.38

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

@@ -1,184 +0,0 @@
-import { r as registerInstance, h } from './index-B8tGP77V.js';
-
-const tag = {
-	xs: {
-		height: "20",
-		paddingX: "6",
-		gap: "4",
-		icon: "12",
-		typography: {
-			fontSize: "11",
-			fontWeight: "500",
-			lineHeight: "18"}
-	},
-	sm: {
-		height: "24",
-		paddingX: "8",
-		gap: "4",
-		icon: "16",
-		typography: {
-			fontSize: "12",
-			fontWeight: "700",
-			lineHeight: "20"}
-	},
-	md: {
-		height: "28",
-		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 = ['xs', 'sm', 'md'];
-const TAG_COLORS = [
-    'grey',
-    'red',
-    'orange',
-    'yellow',
-    'green',
-    'blue',
-    'darkblue',
-    'indigo',
-];
-const TAG_COLOR_CONFIG = {
-    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 = {
-    xs: {
-        height: `${tagTokens.tag.xs.height}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',
-    },
-    sm: {
-        height: `${tagTokens.tag.sm.height}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',
-    },
-    md: {
-        height: `${tagTokens.tag.md.height}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' },
-};
-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];
-    return [
-        `${shape}_${size}_${color}`,
-        {
-            shape,
-            size,
-            color,
-            ...sizeConfig,
-            ...TAG_COLOR_CONFIG[color],
-        },
-    ];
-}))));
-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:var(--sd-tag-line-height, 20px)}`;
-
-const SdTag = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    name = 'square_sm_grey';
-    label = '';
-    icon;
-    isLeft = true;
-    get resolvedConfig() {
-        if (!isTagName(this.name)) {
-            throw new Error(`Invalid sd-tag name: ${this.name}`);
-        }
-        return TAG_CONFIG[this.name];
-    }
-    renderIcon(color, size) {
-        if (!this.icon)
-            return null;
-        return h("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
-    }
-    render() {
-        const config = this.resolvedConfig;
-        const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: '60c7b64aeed525b55a070ee149aac1c613d43b40', class: "sd-tag", style: {
-                '--sd-tag-background': config.background,
-                '--sd-tag-content': config.content,
-                '--sd-tag-height': config.height,
-                '--sd-tag-padding-x': config.paddingX,
-                '--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, h("span", { key: '3b5f662e5e6af7d36800f1cdca6cc18a748b669c', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
-    }
-};
-SdTag.style = sdTagCss();
-
-export { SdTag as sd_tag };

package/dist/types/components/sd-modal-card/sd-modal-card.d.ts

@@ -1,25 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { ButtonSize, ButtonVariant } from '../sd-button/sd-button';
-export interface SdModalCardButtonProps {
-    label: string;
-    color: string;
-    size: ButtonSize;
-    variant?: ButtonVariant;
-    class?: string;
-    type?: 'confirm' | 'cancel';
-}
-export declare class SdModalCard {
-    type: 'info' | 'warning' | 'normal';
-    system: 'normal' | 'positive' | 'negative';
-    useCloseButton: boolean;
-    modalTitle: string;
-    buttonFlexDirection: 'row' | 'column';
-    buttonProps?: SdModalCardButtonProps[];
-    message: string[];
-    sdClass: string;
-    close: EventEmitter<MouseEvent>;
-    confirm: EventEmitter<MouseEvent>;
-    private get pointColor();
-    private get getModalClass();
-    render(): any;
-}