@sellmate/design-system 1.0.75 → 1.0.77

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

@@ -1,171 +0,0 @@
-'use strict';
-
-var index = require('./index-Dptupbm0.js');
-var constants = require('./constants-DJRV1upE.js');
-
-const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.td{display:table-cell;height:44px;padding:0 16px;border-bottom:1px solid #E1E1E1;background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}`;
-
-const SdTr = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get el() { return index.getElement(this); }
-    columns;
-    selectable;
-    stickyColumn;
-    rowKey = '';
-    row = {};
-    tableId = '';
-    columnWidths = [];
-    isVisible = true;
-    _columns = [];
-    _selectable = false;
-    _stickyColumn = { left: 0, right: 0 };
-    _scrolledLeft = false;
-    _scrolledRight = false;
-    tableEl = null;
-    componentWillLoad() {
-        this.syncTableContext();
-        this.columnWidths = this.columnWidths ?? [];
-        this.resolveConfig();
-        this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
-        this.updateVisibilitySync();
-    }
-    componentDidLoad() {
-        this.syncTableContext();
-    }
-    syncTableContext() {
-        const table = this.el.closest('sd-table');
-        this.tableEl = table;
-        const fromMethod = table?.getTableIdSync?.();
-        const fromAttr = table?.getAttribute(constants.TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
-            '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
-            this.tableId = resolvedTableId;
-        }
-    }
-    resolveConfig() {
-        const config = this.tableEl?.getConfigSync?.();
-        this._columns = this.columns ?? config?.columns ?? [];
-        this._selectable = this.selectable ?? config?.selectable ?? false;
-        this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
-        this._scrolledLeft = config?.scrolledLeft ?? false;
-        this._scrolledRight = config?.scrolledRight ?? false;
-        if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = [...config.columnWidths];
-        }
-    }
-    async refreshConfig() {
-        this.resolveConfig();
-    }
-    async updateVisibility() {
-        this.updateVisibilitySync();
-    }
-    updateVisibilitySync() {
-        const rowIndex = parseInt(this.rowKey, 10);
-        const pageInfo = this.tableEl?.getPaginationInfoSync?.();
-        if (!pageInfo) {
-            this.isVisible = true;
-            return;
-        }
-        this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
-    }
-    async setColumnWidths(widths) {
-        this.columnWidths = widths;
-    }
-    async refreshSelection() {
-        const checkbox = this.el.querySelector('sd-checkbox');
-        if (checkbox) {
-            checkbox.value = this.isSelected();
-        }
-    }
-    get visibleColumns() {
-        return this._columns.filter(col => col.visible !== false);
-    }
-    formatValue(value) {
-        if (value === null || value === undefined) {
-            return '';
-        }
-        if (typeof value === 'number') {
-            return value.toLocaleString();
-        }
-        return String(value);
-    }
-    getCellValue(column) {
-        const { field, format, name } = column;
-        const value = typeof field === 'function' ? field(this.row) : field ? this.row[field] : this.row[name];
-        return format ? format(value, this.row) : this.formatValue(value);
-    }
-    getStickyStyle(colIdx) {
-        if (this.tableEl?.getStickyStyleSync) {
-            return this.tableEl.getStickyStyleSync(colIdx);
-        }
-        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
-        const rightOffset = this.columnWidths
-            .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
-            .reduce((a, b) => a + b, 0);
-        return {
-            '--sticky-left-offset': `${leftOffset}px`,
-            '--sticky-right-offset': `${rightOffset}px`,
-            'width': `${this.columnWidths[colIdx]}px`,
-            'minWidth': `${this.columnWidths[colIdx]}px`,
-            'maxWidth': `${this.columnWidths[colIdx]}px`,
-        };
-    }
-    isSelected() {
-        if (this.tableEl?.isRowSelectedSync) {
-            return this.tableEl.isRowSelectedSync(this.row);
-        }
-        return false;
-    }
-    handleSelect() {
-        if (this.tableEl?.updateRowSelectSync) {
-            this.tableEl.updateRowSelectSync(this.row);
-        }
-    }
-    render() {
-        const stickyLeftCount = this._stickyColumn.left || 0;
-        const stickyRightCount = this._stickyColumn.right || 0;
-        const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
-        const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
-        const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        return (index.h(index.Host, { key: 'd6259e5c87cce0fa70f1d849e11416ad69b0cac1', style: { display: this.isVisible ? '' : 'none' } }, index.h("tr", { key: '90e36c39bede0e07fc1c4d90183a73ebc99b6ed8', class: "tr" }, this._selectable && (index.h("td", { key: '601f1747063d8e73803304abc2cd767f420f359c', class: {
-                'td': true,
-                'td--selected': true,
-                'sticky-left': true,
-                'sticky-left-edge': stickyLeftCount === 0,
-                'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '97068a623d3b7876c7e6392e3f5ed81cfc60d592', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (index.h("td", { key: col.name, class: {
-                'td': true,
-                [`td--${col.align || 'left'}`]: true,
-                'sticky-left': true,
-                'sticky-left-edge': idx === stickyLeftCount - 1,
-                'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-                [`${col.tdClass}`]: Boolean(col.tdClass),
-            }, style: this.getStickyStyle(idx) }, index.h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))))), middleCols.map((col, relativeIdx) => {
-            const actualColIdx = stickyLeftCount + relativeIdx;
-            const fieldName = typeof col.field === 'string' ? col.field : col.name;
-            return (index.h("td", { key: col.name, class: {
-                    td: true,
-                    [`td--${col.align || 'left'}`]: true,
-                    [`${col.tdClass}`]: Boolean(col.tdClass),
-                }, style: this.getStickyStyle(actualColIdx) }, index.h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))));
-        }), stickyRightCols.map((col, relativeIdx) => {
-            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
-            const fieldName = typeof col.field === 'string' ? col.field : col.name;
-            return (index.h("td", { key: col.name, class: {
-                    'td': true,
-                    [`td--${col.align || 'left'}`]: true,
-                    'sticky-right': true,
-                    'sticky-right-edge': relativeIdx === 0,
-                    'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                    [`${col.tdClass}`]: Boolean(col.tdClass),
-                }, style: this.getStickyStyle(actualColIdx) }, index.h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))));
-        }))));
-    }
-};
-SdTr.style = sdTrCss();
-
-exports.sd_tr = SdTr;

package/dist/cjs/select-keyboard-navigation-CErfIrGV.js

@@ -1,27 +0,0 @@
-'use strict';
-
-class SelectKeyboardNavigation {
-    isSearchable;
-    filteredOptions;
-    constructor(isSearchable, filteredOptions) {
-        this.isSearchable = isSearchable;
-        this.filteredOptions = filteredOptions;
-    }
-    getNavigationBounds() {
-        return {
-            minIndex: this.isSearchable ? -1 : 0,
-            maxIndex: this.filteredOptions.length - 1,
-        };
-    }
-    getNextIndex(currentIndex, direction) {
-        const { minIndex, maxIndex } = this.getNavigationBounds();
-        if (direction === 'ArrowUp') {
-            return currentIndex > minIndex ? currentIndex - 1 : maxIndex;
-        }
-        else {
-            return currentIndex < maxIndex ? currentIndex + 1 : minIndex;
-        }
-    }
-}
-
-exports.SelectKeyboardNavigation = SelectKeyboardNavigation;

package/dist/cjs/table-test.cjs.entry.js

@@ -1,96 +0,0 @@
-'use strict';
-
-var index = require('./index-Dptupbm0.js');
-
-const tableTestCss = () => `:host{display:block}.table-wrapper{width:100%;overflow-x:auto}.templates-slot{display:none}.data-table{width:100%;border-collapse:collapse;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;font-size:14px}.data-table th,.data-table td{padding:12px 16px;text-align:left;vertical-align:middle}.data-table th{font-weight:600;background-color:#f8f9fa;color:#333}.data-table.bordered th,.data-table.bordered td{border:1px solid #dee2e6}.data-table.striped tbody tr:nth-child(odd){background-color:#f8f9fa}.data-table tbody tr:hover{background-color:#e9ecef}.data-table .cell-flex{display:flex;align-items:center;gap:8px}.data-table .cell-image{width:24px;height:16px;object-fit:cover;border-radius:2px}`;
-
-const DataTable = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.tableReady = index.createEvent(this, "tableReady", 7);
-    }
-    get el() { return index.getElement(this); }
-    /** Column definitions array */
-    columns = [];
-    /** Row data array */
-    rows = [];
-    /** Show cell borders */
-    bordered = true;
-    /** Alternate row colors */
-    striped = false;
-    cellRenderers = new Map();
-    headerRenderers = new Map();
-    tableReady;
-    dataChanged() {
-        this.tableReady.emit();
-    }
-    componentDidLoad() {
-        this.tableReady.emit();
-    }
-    async setCellRenderer(field, renderer) {
-        this.cellRenderers = new Map(this.cellRenderers).set(field, renderer);
-    }
-    async setHeaderRenderer(field, renderer) {
-        this.headerRenderers = new Map(this.headerRenderers).set(field, renderer);
-    }
-    async removeCellRenderer(field) {
-        const newMap = new Map(this.cellRenderers);
-        newMap.delete(field);
-        this.cellRenderers = newMap;
-    }
-    async clearAllRenderers() {
-        this.cellRenderers = new Map();
-        this.headerRenderers = new Map();
-    }
-    renderCellContent(column, row, rowIndex) {
-        const value = row[column.field];
-        const renderer = this.cellRenderers.get(column.field);
-        if (renderer) {
-            const html = renderer({ field: column.field, value, row, rowIndex });
-            return index.h("span", { class: "cell-content", innerHTML: html });
-        }
-        const template = this.el.querySelector(`[slot="cell-${column.field}"]`);
-        if (template) {
-            const html = this.processTemplate(template.innerHTML, { value, row, rowIndex });
-            return index.h("span", { class: "cell-content", innerHTML: html });
-        }
-        return index.h("span", { class: "cell-content" }, value);
-    }
-    renderHeaderContent(column) {
-        const renderer = this.headerRenderers.get(column.field);
-        if (renderer) {
-            const html = renderer({ field: column.field, column });
-            return index.h("span", { innerHTML: html });
-        }
-        const template = this.el.querySelector(`[slot="header-${column.field}"]`);
-        if (template) {
-            return index.h("span", { innerHTML: template.innerHTML });
-        }
-        return column.header || column.field;
-    }
-    processTemplate(html, data) {
-        return html
-            .replace(/\{\{value\}\}/g, this.escapeHtml(String(data.value ?? '')))
-            .replace(/\{\{rowIndex\}\}/g, String(data.rowIndex))
-            .replace(/\{\{row\.(\w+)\}\}/g, (_, prop) => this.escapeHtml(String(data.row[prop] ?? '')));
-    }
-    escapeHtml(str) {
-        const el = document.createElement('div');
-        el.textContent = str;
-        return el.innerHTML;
-    }
-    render() {
-        return (index.h("div", { key: 'a34267f6b11cdd0dff53bfa3da62b7a47934c73b', class: "table-wrapper" }, index.h("table", { key: 'b23ac2cd9a785d8fc89c09a04a6aa29a63e6d2b4', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, index.h("thead", { key: 'e08ff945e40f3ec6db10285840d4185d110a1dc0' }, index.h("tr", { key: 'ffe2e7253865f5a650611e2859f979d0204fca2a' }, this.columns.map(column => (index.h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), index.h("tbody", { key: '2d47105abba4eecad71b549282650b7f2b056b4c' }, this.rows.map((row, rowIndex) => (index.h("tr", { key: rowIndex }, this.columns.map(column => (index.h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), index.h("div", { key: '99fe2715e69abf50f69a844e76a3ad422f5b870b', class: "templates-slot", hidden: true }, index.h("slot", { key: '8c56201e8edb251c5f7494e00acdc5e5fbb67d00' }))));
-    }
-    static get watchers() { return {
-        "columns": [{
-                "dataChanged": 0
-            }],
-        "rows": [{
-                "dataChanged": 0
-            }]
-    }; }
-};
-DataTable.style = tableTestCss();
-
-exports.table_test = DataTable;

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

@@ -1,63 +0,0 @@
-sd-progress {
-  display: block;
-}
-sd-progress .sd-progress__bar {
-  position: relative;
-  width: 100%;
-  height: 20px;
-  overflow: hidden;
-  border-radius: 4px;
-  background-color: #EEEEEE;
-  text-align: center;
-}
-sd-progress .sd-progress__bar__percent {
-  width: var(--progress-percentage);
-  height: 100%;
-  border-radius: 4px;
-  background-color: var(--progress-color, #0075FF);
-  transition: all 0.5s;
-}
-sd-progress .sd-progress__bar__percent.proceed {
-  border-top-right-radius: 50%;
-}
-sd-progress .sd-progress__bar__indicator {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 20px;
-  width: 100%;
-  background-color: #EEEEEE;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 20px;
-  z-index: 1;
-}
-sd-progress .sd-progress__bar__indicator--left {
-  color: var(--progress-color, #0075FF);
-  clip-path: inset(0 0 0 var(--progress-percentage));
-}
-sd-progress .sd-progress__bar__indicator--right {
-  color: white;
-  background-color: var(--progress-color, #0075FF);
-  clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);
-}
-sd-progress .sd-progress__spinner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-sd-progress .sd-progress__spinner svg {
-  transform: rotate(-90deg);
-}
-sd-progress .sd-progress__spinner__label {
-  margin-top: 8px;
-  font-size: 16px;
-  color: var(--progress-color, #0075FF);
-}
-sd-progress .sd-progress__label {
-  margin-top: 4px;
-  font-size: 12px;
-  color: #222222;
-  text-align: center;
-}

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

@@ -1,186 +0,0 @@
-import { h } from "@stencil/core";
-export class SdProgress {
-    type = 'bar';
-    error = false;
-    percentage = 0;
-    size = 80;
-    strokeWidth = 12;
-    label;
-    statusColor = {
-        default: '#aaaaaa',
-        progress: '#0075ff',
-        complete: '#12B553',
-        error: '#FB4444',
-    };
-    get progressPercentage() {
-        if (this.error)
-            return 100;
-        return this.percentage;
-    }
-    get progressStatus() {
-        if (this.error)
-            return 'error';
-        switch (this.percentage) {
-            case 100:
-                return 'complete';
-            case 0:
-                return 'default';
-            default:
-                return 'progress';
-        }
-    }
-    get progressColor() {
-        return this.statusColor[this.progressStatus];
-    }
-    render() {
-        return (h("div", { key: '34c1ecf23c120f53595529004ed3d6818896e816', style: {
-                '--progress-color': this.progressColor,
-                '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '29461b9428416262c10b1917eaee4e0091d290dc', class: "sd-progress__label" }, this.label)));
-    }
-    renderBarProgress() {
-        return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));
-    }
-    renderSpinnerProgress() {
-        const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
-        const circumference = 2 * Math.PI * radius; // 원의 둘레
-        const offset = circumference - (this.progressPercentage / 100) * circumference; // 진행률에 따른 offset
-        const progressBgSize = `${this.size}px`;
-        const progressSize = `${this.size / 2}px`;
-        return (h("div", { class: `sd-progress__spinner sd-progress__spinner--${this.progressStatus}` }, h("svg", { width: progressBgSize, height: progressBgSize }, h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.progressColor, "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), h("strong", { class: "sd-progress__spinner__label" }, this.progressPercentage, " %")));
-    }
-    static get is() { return "sd-progress"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["sd-progress.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["sd-progress.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'bar' | 'spinner'",
-                    "resolved": "\"bar\" | \"spinner\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type",
-                "defaultValue": "'bar'"
-            },
-            "error": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "error",
-                "defaultValue": "false"
-            },
-            "percentage": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "percentage",
-                "defaultValue": "0"
-            },
-            "size": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size",
-                "defaultValue": "80"
-            },
-            "strokeWidth": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "stroke-width",
-                "defaultValue": "12"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
-            }
-        };
-    }
-}

package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.css

@@ -1,30 +0,0 @@
-.sd-select-dropdown .sd-select-option-placeholder {
-  height: 48px;
-  display: flex;
-  align-items: center;
-  padding: 8px 16px;
-  font-size: 12px;
-  line-height: 0;
-  text-align: left;
-  color: #888888;
-}
-
-.sd-select-dropdown {
-  overflow: auto;
-  min-width: fit-content;
-  width: var(--select-dropdown-width, 200px);
-  max-height: var(--select-dropdown-height, 260px);
-  padding-bottom: 2px;
-  background-color: white;
-  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  overflow-y: auto;
-  color: #333333;
-  display: flex;
-  flex-direction: column;
-  opacity: 0.5;
-  transition: opacity 0.15s ease-in;
-}
-.sd-select-dropdown--ready {
-  opacity: 1;
-}