@sellmate/design-system 1.28.0 → 1.31.0

package/dist/cjs/sd-table.config-DFy_S4bc.js

@@ -1,83 +0,0 @@
-'use strict';
-
-var component_table = require('./component.table-POXY492T.js');
-var system = require('./system-MjrAugX-.js');
-
-// ── Header Tokens ──
-const TABLE_HEADER_LAYOUT = {
-    height: component_table.tableTokens.table.header.height,
-    paddingX: component_table.tableTokens.table.header.paddingX,
-    gap: component_table.tableTokens.table.header.gap,
-};
-const TABLE_HEADER_TYPOGRAPHY = {
-    fontFamily: component_table.tableTokens.table.header.typography.fontFamily,
-    fontWeight: component_table.tableTokens.table.header.typography.fontWeight,
-    fontSize: component_table.tableTokens.table.header.typography.fontSize,
-    lineHeight: component_table.tableTokens.table.header.typography.lineHeight,
-    textDecoration: component_table.tableTokens.table.header.typography.textDecoration,
-};
-const TABLE_HEADER_COLORS = {
-    bg: component_table.tableTokens.table.header.bg,
-};
-const TABLE_HEADER_RESIZING_BAR = {
-    color: component_table.tableTokens.table.header.resizingBar.color,
-    height: component_table.tableTokens.table.header.resizingBar.height,
-};
-// ── Body Tokens ──
-const TABLE_BODY_LAYOUT = {
-    default: {
-        height: component_table.tableTokens.table.body.default.height,
-        paddingY: component_table.tableTokens.table.body.default.paddingY,
-    },
-    dense: {
-        height: component_table.tableTokens.table.body.dense.height,
-        paddingY: component_table.tableTokens.table.body.paddingY.dense,
-    },
-    paddingX: component_table.tableTokens.table.body.paddingX.wide,
-    densePaddingX: component_table.tableTokens.table.body.paddingX.default,
-    framePadding: component_table.tableTokens.table.body.paddingX.default,
-};
-const TABLE_BODY_TYPOGRAPHY = {
-    fontFamily: component_table.tableTokens.table.body.typography.fontFamily,
-    fontWeight: component_table.tableTokens.table.body.typography.fontWeight,
-    fontSize: component_table.tableTokens.table.body.typography.fontSize,
-    lineHeight: component_table.tableTokens.table.body.typography.lineHeight,
-    textDecoration: component_table.tableTokens.table.body.typography.textDecoration,
-};
-// ── Frame / Border Tokens ──
-const TABLE_BORDER = {
-    color: component_table.tableTokens.table.border.color,
-    width: component_table.tableTokens.table.border.width,
-};
-const TABLE_SEPARATOR = {
-    color: component_table.tableTokens.table.separator.color,
-    width: component_table.tableTokens.table.separator.width.default,
-    denseWidth: component_table.tableTokens.table.separator.width.dense,
-};
-const TABLE_RADIUS = component_table.tableTokens.table.radius;
-// ── Selectable Column ──
-const TABLE_SELECTABLE_COLUMN_WIDTH = 48;
-// ── Header Icon Color Defaults ──
-const ICON_DEFAULT_COLOR = {
-    pageEdit: system.systemTokens.color.darkblue.strong,
-    arrowDown: system.systemTokens.color.darkblue.strong,
-    arrowUp: system.systemTokens.color.darkblue.strong,
-    updown: system.systemTokens.color.grey.strong,
-    pageMove: system.systemTokens.color.darkblue.strong,
-    star: system.systemTokens.color.blue.strong,
-};
-const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
-const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
-
-exports.TABLE_BODY_LAYOUT = TABLE_BODY_LAYOUT;
-exports.TABLE_BODY_TYPOGRAPHY = TABLE_BODY_TYPOGRAPHY;
-exports.TABLE_BORDER = TABLE_BORDER;
-exports.TABLE_HEADER_COLORS = TABLE_HEADER_COLORS;
-exports.TABLE_HEADER_LAYOUT = TABLE_HEADER_LAYOUT;
-exports.TABLE_HEADER_RESIZING_BAR = TABLE_HEADER_RESIZING_BAR;
-exports.TABLE_HEADER_TYPOGRAPHY = TABLE_HEADER_TYPOGRAPHY;
-exports.TABLE_RADIUS = TABLE_RADIUS;
-exports.TABLE_SELECTABLE_COLUMN_WIDTH = TABLE_SELECTABLE_COLUMN_WIDTH;
-exports.TABLE_SEPARATOR = TABLE_SEPARATOR;
-exports.resolveSortIconName = resolveSortIconName;
-exports.resolveTableIconColor = resolveTableIconColor;

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

@@ -1,201 +0,0 @@
-'use strict';
-
-var index = require('./index-D12oddge.js');
-var constants = require('./constants-DJRV1upE.js');
-
-const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;
-
-const SdTd = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get el() { return index.getElement(this); }
-    /** 데이터 필드명 (슬롯 이름 생성에 사용) */
-    field;
-    /** 행 식별 키 */
-    rowKey;
-    /** 셀 내용 정렬 */
-    align;
-    /** 행 병합 수 */
-    rowspan;
-    /** 열 병합 수 */
-    colspan;
-    // sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
-    // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
-    // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
-    /** td에 병합할 사용자 클래스 */
-    sdClass;
-    /** 좌측 구분선 표시 여부 */
-    dividerLeft = false;
-    /** 우측 구분선 표시 여부 */
-    dividerRight = false;
-    // true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
-    /** frame 레이아웃 사용 여부 */
-    useFrame = false;
-    handleFieldChange(_newField, oldField) {
-        this.syncSlotName();
-        this.syncSpanRegistration();
-        this.syncCellClassRegistration(oldField);
-        this.syncUseFrameRegistration(oldField);
-    }
-    handleRowKeyChange(_newKey, oldKey) {
-        this.syncSlotName();
-        this.syncSpanRegistration();
-        this.syncCellClassRegistration(undefined, oldKey);
-        this.syncUseFrameRegistration(undefined, oldKey);
-    }
-    handleSpanChange() {
-        this.syncSpanRegistration();
-    }
-    handleSdClassChange() {
-        this.syncCellClassRegistration();
-    }
-    handleDividerChange() {
-        this.syncCellClassRegistration();
-    }
-    handleUseFrameChange() {
-        this.syncUseFrameRegistration();
-        this.requestParentTrUpdate();
-    }
-    componentWillLoad() {
-        this.syncSlotName();
-        this.syncSpanRegistration();
-        this.syncCellClassRegistration();
-        this.syncUseFrameRegistration();
-        // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
-        const parentTr = this.el.parentElement;
-        if (parentTr?.tagName?.toLowerCase() === 'sd-tr') {
-            index.forceUpdate(parentTr);
-        }
-    }
-    componentDidLoad() {
-        this.syncSlotName();
-        this.syncSpanRegistration();
-        this.syncCellClassRegistration();
-        this.syncUseFrameRegistration();
-    }
-    // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
-    // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
-    // 재연결 시점에도 등록 상태를 복구해야 rowspan/colspan이 유지된다.
-    connectedCallback() {
-        this.syncSpanRegistration();
-        this.syncCellClassRegistration();
-        this.syncUseFrameRegistration();
-    }
-    disconnectedCallback() {
-        const table = this.findTable();
-        if (table != null && this.field !== '' && this.rowKey != null) {
-            table.unregisterSpanSync?.(String(this.rowKey), this.field);
-            table.unregisterCellClassSync?.(String(this.rowKey), this.field);
-            table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
-            this.requestParentTrUpdate();
-        }
-    }
-    findTable() {
-        return this.el.closest('sd-table');
-    }
-    requestParentTrUpdate() {
-        const parentTr = this.el.parentElement;
-        if (parentTr?.tagName?.toLowerCase() !== 'sd-tr')
-            return;
-        const trAny = parentTr;
-        if (typeof trAny.bumpSpansVersion === 'function') {
-            trAny.bumpSpansVersion();
-        }
-        else {
-            index.forceUpdate(parentTr);
-        }
-    }
-    syncSpanRegistration() {
-        const table = this.findTable();
-        if (table?.registerSpanSync == null || this.field === '' || this.rowKey == null)
-            return;
-        const rs = Math.max(1, Math.floor(Number(this.rowspan) || 1));
-        const cs = Math.max(1, Math.floor(Number(this.colspan) || 1));
-        table.registerSpanSync(String(this.rowKey), this.field, rs, cs);
-        this.requestParentTrUpdate();
-    }
-    // field/rowKey가 바뀌면 이전 키에 등록된 클래스가 남으므로 먼저 해제하고 새 키로 등록한다.
-    syncCellClassRegistration(prevField, prevRowKey) {
-        const table = this.findTable();
-        if (!table)
-            return;
-        const oldField = prevField ?? this.field;
-        const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
-        if (oldField !== '' && oldRowKey != null) {
-            table.unregisterCellClassSync?.(oldRowKey, oldField);
-        }
-        if (!table.registerCellClassSync || this.field === '' || this.rowKey == null)
-            return;
-        const combinedClass = [
-            this.sdClass,
-            this.dividerLeft && 'td--divider-left',
-            this.dividerRight && 'td--divider-right',
-        ]
-            .filter(Boolean)
-            .join(' ') || undefined;
-        table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
-        this.requestParentTrUpdate();
-    }
-    syncUseFrameRegistration(prevField, prevRowKey) {
-        const table = this.findTable();
-        if (!table)
-            return;
-        const oldField = prevField ?? this.field;
-        const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
-        if (oldField !== '' && oldRowKey != null) {
-            table.unregisterUseFrameSync?.(oldRowKey, oldField);
-        }
-        if (this.field === '' || this.rowKey == null)
-            return;
-        if (this.useFrame) {
-            table.registerUseFrameSync?.(String(this.rowKey), this.field);
-        }
-        else {
-            table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
-        }
-    }
-    syncSlotName() {
-        const table = this.el.closest('sd-table');
-        const fromMethod = table?.getTableIdSync?.();
-        const fromAttr = table?.getAttribute(constants.TABLE_ID_ATTR);
-        const tableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
-            '';
-        if (this.field !== '' && this.rowKey !== undefined && tableId !== '') {
-            this.el.setAttribute('slot', `${tableId}-${this.field}-${this.rowKey}`);
-        }
-    }
-    render() {
-        return (index.h(index.Host, { key: 'b2037351ddf7c9a8998befd477ffb81b7f204c99', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'f9d2bd1433c737fc6cb209f45e773c5317cf3cde' })));
-    }
-    static get watchers() { return {
-        "field": [{
-                "handleFieldChange": 0
-            }],
-        "rowKey": [{
-                "handleRowKeyChange": 0
-            }],
-        "rowspan": [{
-                "handleSpanChange": 0
-            }],
-        "colspan": [{
-                "handleSpanChange": 0
-            }],
-        "sdClass": [{
-                "handleSdClassChange": 0
-            }],
-        "dividerLeft": [{
-                "handleDividerChange": 0
-            }],
-        "dividerRight": [{
-                "handleDividerChange": 0
-            }],
-        "useFrame": [{
-                "handleUseFrameChange": 0
-            }]
-    }; }
-};
-SdTd.style = sdTdCss();
-
-exports.sd_td = SdTd;

package/dist/cjs/useDatePicker-iMd6WToc.js

@@ -1,103 +0,0 @@
-'use strict';
-
-var component_datepicker = require('./component.datepicker-CUQbDSku.js');
-
-const CALENDAR_LAYOUT = {
-    bg: component_datepicker.datepickerTokens.datepicker.calendar.bg,
-    paddingXY: component_datepicker.datepickerTokens.datepicker.calendar.paddingXY,
-    gap: component_datepicker.datepickerTokens.datepicker.calendar.gap,
-    radius: component_datepicker.datepickerTokens.datepicker.calendar.radius,
-    header: {
-        gap: component_datepicker.datepickerTokens.datepicker.calendar.header.gap,
-        divider: component_datepicker.datepickerTokens.datepicker.calendar.header.divider,
-        fontSize: component_datepicker.datepickerTokens.datepicker.calendar.header.typography.fontSize,
-        lineHeight: component_datepicker.datepickerTokens.datepicker.calendar.header.typography.lineHeight,
-        fontWeight: component_datepicker.datepickerTokens.datepicker.calendar.header.typography.fontWeight,
-    },
-    week: {
-        fontSize: component_datepicker.datepickerTokens.datepicker.calendar.week.typography.fontSize,
-        lineHeight: component_datepicker.datepickerTokens.datepicker.calendar.week.typography.lineHeight,
-        fontWeight: component_datepicker.datepickerTokens.datepicker.calendar.week.typography.fontWeight,
-        color: component_datepicker.datepickerTokens.datepicker.calendar.week.color,
-    },
-    grid: {
-        rowGap: component_datepicker.datepickerTokens.datepicker.calendar.grid.rowGap,
-    },
-    day: {
-        size: component_datepicker.datepickerTokens.datepicker.calendar.day.width,
-        circleSize: component_datepicker.datepickerTokens.datepicker.calendar.day.circle.size,
-        circleRadius: component_datepicker.datepickerTokens.datepicker.calendar.day.circle.radius,
-        defaultText: component_datepicker.datepickerTokens.datepicker.calendar.day.default.text,
-        hoverText: component_datepicker.datepickerTokens.datepicker.calendar.day.hover.text,
-        hoverBorder: component_datepicker.datepickerTokens.datepicker.calendar.day.hover.border,
-        selectBg: component_datepicker.datepickerTokens.datepicker.calendar.day.select.bg,
-        selectText: component_datepicker.datepickerTokens.datepicker.calendar.day.select.text,
-        disabledText: component_datepicker.datepickerTokens.datepicker.calendar.day.disabled.text,
-        fontSize: component_datepicker.datepickerTokens.datepicker.calendar.day.typography.default.fontSize,
-        lineHeight: component_datepicker.datepickerTokens.datepicker.calendar.day.typography.default.lineHeight,
-        fontWeight: component_datepicker.datepickerTokens.datepicker.calendar.day.typography.default.fontWeight,
-        boldFontWeight: component_datepicker.datepickerTokens.datepicker.calendar.day.typography.bold.fontWeight,
-        dot: {
-            size: component_datepicker.datepickerTokens.datepicker.calendar.day.dot.size,
-            gap: component_datepicker.datepickerTokens.datepicker.calendar.day.dot.gap,
-            paddingY: component_datepicker.datepickerTokens.datepicker.calendar.day.dot.paddingY,
-        },
-    },
-    legend: {
-        fontSize: component_datepicker.datepickerTokens.datepicker.calendar.legend.typography.fontSize,
-        lineHeight: component_datepicker.datepickerTokens.datepicker.calendar.legend.typography.lineHeight,
-        fontWeight: component_datepicker.datepickerTokens.datepicker.calendar.legend.typography.fontWeight,
-        gap: component_datepicker.datepickerTokens.datepicker.calendar.legend.gap,
-        groupGap: component_datepicker.datepickerTokens.datepicker.calendar.legend.group.gap,
-    },
-};
-const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
-
-const daysInMonth = (date) => {
-    const year = Number(date.split('-')[0]);
-    const month = Number(date.split('-')[1]);
-    const daysInMonth = new Date(year, month, 0).getDate(); // month에 0을 전달하면 전달의 마지막 날짜를 반환
-    return Array.from({ length: daysInMonth }, (_, i) => i + 1);
-};
-
-const getToday = () => {
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = String(today.getMonth() + 1).padStart(2, '0');
-    const day = String(today.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-};
-const today = getToday();
-
-const useDatePicker = () => {
-    const formatDate = (year, month, day) => {
-        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
-    };
-    const createCalendar = (year, month) => {
-        const days = daysInMonth(`${year}-${String(month).padStart(2, '0')}-01`);
-        const firstDayIndex = new Date(year, month - 1, 1).getDay();
-        const prevMonthDays = Array.from({ length: firstDayIndex });
-        const remainingDays = (7 - ((days.length + firstDayIndex) % 7)) % 7;
-        const afterMonthDays = Array.from({ length: remainingDays });
-        return { days, prevMonthDays, afterMonthDays };
-    };
-    const calculateYearMonth = (year, month, type) => {
-        let newYear = year;
-        let newMonth = type === 'prev' ? month - 1 : month + 1;
-        if (newMonth < 1) {
-            newYear = year - 1;
-            newMonth = 12;
-        }
-        else if (newMonth > 12) {
-            newYear = year + 1;
-            newMonth = 1;
-        }
-        return { newYear, newMonth };
-    };
-    return { formatDate, createCalendar, calculateYearMonth };
-};
-
-exports.CALENDAR_LAYOUT = CALENDAR_LAYOUT;
-exports.WEEK_LABELS = WEEK_LABELS;
-exports.today = today;
-exports.useDatePicker = useDatePicker;

package/dist/collection/components/sd-table/constants.js

@@ -1 +0,0 @@
-export const TABLE_ID_ATTR = 'table-id';

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

@@ -1,88 +0,0 @@
-import tableTokens from "../../tokens/generated/component.table.json";
-import systemTokens from "../../tokens/generated/system.json";
-// ── Header Tokens ──
-export const TABLE_HEADER_LAYOUT = {
-    height: tableTokens.table.header.height,
-    paddingX: tableTokens.table.header.paddingX,
-    gap: tableTokens.table.header.gap,
-};
-export const TABLE_HEADER_TYPOGRAPHY = {
-    fontFamily: tableTokens.table.header.typography.fontFamily,
-    fontWeight: tableTokens.table.header.typography.fontWeight,
-    fontSize: tableTokens.table.header.typography.fontSize,
-    lineHeight: tableTokens.table.header.typography.lineHeight,
-    textDecoration: tableTokens.table.header.typography.textDecoration,
-};
-export const TABLE_HEADER_COLORS = {
-    bg: tableTokens.table.header.bg,
-};
-export const TABLE_HEADER_RESIZING_BAR = {
-    color: tableTokens.table.header.resizingBar.color,
-    height: tableTokens.table.header.resizingBar.height,
-};
-// ── Body Tokens ──
-export const TABLE_BODY_LAYOUT = {
-    default: {
-        height: tableTokens.table.body.default.height,
-        paddingY: tableTokens.table.body.default.paddingY,
-    },
-    dense: {
-        height: tableTokens.table.body.dense.height,
-        paddingY: tableTokens.table.body.paddingY.dense,
-    },
-    paddingX: tableTokens.table.body.paddingX.wide,
-    densePaddingX: tableTokens.table.body.paddingX.default,
-    framePadding: tableTokens.table.body.paddingX.default,
-};
-export const TABLE_BODY_TYPOGRAPHY = {
-    fontFamily: tableTokens.table.body.typography.fontFamily,
-    fontWeight: tableTokens.table.body.typography.fontWeight,
-    fontSize: tableTokens.table.body.typography.fontSize,
-    lineHeight: tableTokens.table.body.typography.lineHeight,
-    textDecoration: tableTokens.table.body.typography.textDecoration,
-};
-// ── Frame / Border Tokens ──
-export const TABLE_BORDER = {
-    color: tableTokens.table.border.color,
-    width: tableTokens.table.border.width,
-};
-export const TABLE_SEPARATOR = {
-    color: tableTokens.table.separator.color,
-    width: tableTokens.table.separator.width.default,
-    denseWidth: tableTokens.table.separator.width.dense,
-};
-export const TABLE_RADIUS = tableTokens.table.radius;
-// ── Content Tokens ──
-export const TABLE_CONTENT = {
-    gap: tableTokens.table.content.gap,
-};
-// ── Bar Tokens ──
-export const TABLE_BAR_LAYOUT = {
-    height: tableTokens.table.bar.height,
-    sectionGap: tableTokens.table.bar.section.gap,
-    dividerHeight: tableTokens.table.bar.divider.height,
-};
-export const TABLE_BAR_COLORS = {
-    count: {
-        total: tableTokens.table.bar.count.total,
-        null: tableTokens.table.bar.count.null,
-    },
-};
-// ── KeyValue Tokens ──
-export const TABLE_KEY_VALUE = {
-    bodyPadding: tableTokens.table.keyValue.body.paddingY,
-    height: tableTokens.table.keyValue.height,
-};
-// ── Selectable Column ──
-export const TABLE_SELECTABLE_COLUMN_WIDTH = 48;
-// ── Header Icon Color Defaults ──
-const ICON_DEFAULT_COLOR = {
-    pageEdit: systemTokens.color.darkblue.strong,
-    arrowDown: systemTokens.color.darkblue.strong,
-    arrowUp: systemTokens.color.darkblue.strong,
-    updown: systemTokens.color.grey.strong,
-    pageMove: systemTokens.color.darkblue.strong,
-    star: systemTokens.color.blue.strong,
-};
-export const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
-export const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';

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

@@ -1,180 +0,0 @@
-sd-table,
-:host {
-  display: block;
-  width: 100%;
-  height: var(--table-host-height);
-  max-width: 100%;
-  min-width: 0;
-}
-sd-table *,
-:host * {
-  box-sizing: border-box;
-}
-
-.sd-table__container {
-  height: 100%;
-  width: var(--table-width, 100%);
-  max-width: 100%;
-  min-width: 0;
-  color: #222222;
-  display: flex;
-  flex-direction: column;
-}
-
-.sd-table__wrapper {
-  width: 100%;
-  min-width: 0;
-  height: calc(100% - var(--pagination-height, 0px));
-  border: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
-  border-radius: var(--table-radius, 8px);
-  overflow: hidden;
-}
-.sd-table__wrapper--radius-useTop {
-  border-radius: 0 0 var(--table-radius, 8px) var(--table-radius, 8px);
-}
-.sd-table__wrapper--radius-full {
-  border-radius: 0;
-}
-
-.sd-table__scroll-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  font-family: var(--table-body-font-family, inherit);
-  font-weight: var(--table-body-font-weight, 400);
-  font-size: var(--table-body-font-size, 12px);
-  line-height: var(--table-body-line-height, 20px);
-  text-decoration: var(--table-body-text-decoration, none);
-  overflow: auto;
-  background: #FFFFFF;
-}
-.sd-table__scroll-container::-webkit-scrollbar {
-  opacity: 0;
-  width: 8px;
-  background: #E5E5E5;
-}
-.sd-table__scroll-container::-webkit-scrollbar:horizontal {
-  height: 8px;
-}
-.sd-table__scroll-container::-webkit-scrollbar-thumb {
-  height: 80px;
-  background-color: #CCCCCC;
-  border-radius: 4px;
-}
-.sd-table__scroll-container::-webkit-scrollbar-track {
-  background-color: #E5E5E5;
-}
-.sd-table__scroll-container--loading {
-  overflow: hidden !important;
-  pointer-events: none;
-}
-.sd-table__scroll-container--no-data {
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.sd-table__no-data {
-  position: absolute;
-  top: 36px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--table-body-font-size, 12px);
-  color: #888888;
-  pointer-events: none;
-  z-index: 200;
-  background: rgba(255, 255, 255, 0.6);
-}
-
-.sd-table__no-data-header-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 36px;
-  background: rgba(255, 255, 255, 0.6);
-  z-index: 210;
-  pointer-events: none;
-}
-
-.sd-table__no-data-content {
-  pointer-events: auto;
-  min-height: 60px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.sd-table__loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(255, 255, 255, 0.6);
-  z-index: 200;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-
-.sd-table {
-  background-color: white;
-  display: table;
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  table-layout: fixed;
-}
-.sd-table--selectable sd-thead,
-.sd-table--selectable sd-tbody {
-  --selectable: true;
-}
-.sd-table--sticky-header sd-thead thead {
-  position: sticky;
-  top: 0;
-  z-index: 120;
-}
-.sd-table--sticky-column sd-thead,
-.sd-table--sticky-column sd-tbody {
-  --sticky-column: true;
-}
-.sd-table--scrolled-left sd-thead,
-.sd-table--scrolled-left sd-tbody {
-  --scrolled-left: true;
-}
-.sd-table--scrolled-right sd-thead,
-.sd-table--scrolled-right sd-tbody {
-  --scrolled-right: true;
-}
-.sd-table--resizable sd-thead {
-  --resizable: true;
-}
-.sd-table--no-data sd-thead {
-  opacity: 0.4;
-}
-
-.sd-table__pagination {
-  position: relative;
-  background: #F9F9F9;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
-  margin-top: -1px;
-  border-radius: var(--table-radius, 8px);
-}
-.sd-table__pagination sd-select {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-}