@sellmate/design-system 0.0.35 → 0.0.36

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

@@ -31,11 +31,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'c589194a99064c6d4dcba4a3041fabc86e629190' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '8ad8df3d02c2889a404366a7a1486ee001415423', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'a45f59c40dfbdbe3ad70ea4733459841ddbd6ca2', class: {
+        return (h(Fragment, { key: 'a58d208a0a9ba1e954568512f1dbe0df88922623' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '7ffbc49de8f33edbc05beec6cb554820bdbde2b6', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'fcf1b9069831494c3c2ee5e274037c211f342993', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '37666b148d9638512cdcf9880b4d4f928c617398', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '34801580a143b2a9a0e4fd2a754e3b7df84715bb' })), h("div", { key: 'f6ed764d4c50b2573188164f387df4ec4df04430', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'd038bbede4912070b58772daac3f264908c7b0ef', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '0bc6407b1deb2fdc2194fe8b45af199c797ad9de', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '77f310b36aabbd66ed92cbf3caa9edf619875f0e', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'd48a8945ff2419ff4f45f62bddc4b56cccf608e2', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '821ce775843d2958b2288f7deba565b1b5aa4cda', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: 'e1bd244e2c8c2e1c8a4759f96ce44e5cdda41bcc', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '36cf86a871f7454f2916ce8157e7d9234d808666' })), h("div", { key: '8fcd872f31d3dfcad2b8b7d26c7956368289d8cf', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '435f956e668910900948999a2ae23a7ffbdf67cd', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '80eaa27446106e6380712fb00ad9df4752ebb70b', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'b4845d8ac339559c2b612a219517a6addb47aaca', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '56ab62d73d4e71d871165d28adf7ecd4efd92870', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: 'ea93c1a46baef7cb4b7a849b8744043afc11de79', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,7 +113,7 @@ export class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '00d9c45ad016f874250e3ca637abee455860d479' });
+        return h("slot", { key: 'f1445e7060928e48032fbed8f3b7604e626850c2' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

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

@@ -13,10 +13,10 @@ export class SdProgress {
         error: '#FB4444',
     };
     render() {
-        return (h(Host, { key: 'f086ff0b5357c038b83f8b8b457cd7aa3c99ba03', style: {
+        return (h(Host, { key: '5ac52da4809e45fc5bc69991aea3bd423b72ffdc', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '2e8ce5a1fe1206f95f4268eaa571264f7daa7b8f', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '7758a60580ab05cd2dd396b16cc4483d890e0498', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h(Host, { key: '87e4810a3c5058cc0969748d6cdf83b0fdcf9d8e' }, h("div", { key: '8d502e3a2ebdd8810abfdfd8ed317554e1e89f6f', class: {
+        return (h(Host, { key: '56d2ed3525521a59eb3f0d8231a53259ebd22424' }, h("div", { key: '200849af32a94d4c9aeb35760ce3d8396da45836', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

package/dist/collection/components/sd-select-multiple/sd-select-multiple.js

@@ -208,11 +208,11 @@ export class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '3c3cd8714a8d2a7e3f7ca5057c19b281488aa159', style: style }, h("div", { key: '877950e58b715002bb1976b11ead8abd41984534', class: {
+        return (h(Host, { key: '5dd79017c9796e6412984675fcd3ec2d03e32012', style: style }, h("div", { key: '777e5c8c777fb421c06ccc99ad114077918d3091', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '2839ca7bfa830226ace0a32e8deb62c03f1feb62', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '897dbc13dddd89e3bf3be9b77efe5aa04600ea1f', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: '4ce025571bbc415a03d2ec9a2c27d6867571bbe1', class: {
+        return (h("div", { key: 'e873486c47436a1cb2e3797dfe06b89874429e18', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'ea7682119a423a0a49fb69ef4ae775330552ffc5', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'd8ba6537c8ebdbc3b3a1a132b1c0d2e53a23aac1', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '7a54f43c2f654f26ff44cb039136488b17492336', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'ffe73a278e2e4869b3389b15268ab3c6d1117d47', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: 'd15d031152d6e10f47068567ab3fc954766a7557', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '82c8efa653a4b32a2991b2416996f67ea9b33bae', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: '7c05471592fd30b12b94d158b11c76e98f4634ef', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'd395b359af93878867f61990741d174bb81cd959', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTbody {
     render() {
-        return (h(Host, { key: '2db73c5270442ed9080a645fc6ec373764475993' }, h("slot", { key: '23199e678de6d2df0fd476b14da9eb9340ac040d' })));
+        return (h(Host, { key: 'fb4f565321e2f5308bdb5c318e385c4704730d16' }, h("slot", { key: '3ba442c1026ebbce4960031ed3113ebd16d949ec' })));
     }
     static get is() { return "sd-tbody"; }
     static get originalStyleUrls() {

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

@@ -5,11 +5,11 @@ export class SdTd {
     tdStyle;
     tdClass;
     render() {
-        return (h(Host, { key: '7c60c5073b921e3fc62d5738196f9b89710da055', role: "cell", class: {
+        return (h(Host, { key: 'b0d6911cd0c2da2999b3cc16b5014f95c6616cd2', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, h("slot", { key: 'af4093382842e7fafdd1d061e61e3a889237fab5' })));
+            }, style: this.tdStyle }, h("slot", { key: '93c9acb6c73c6dd4f9b6dcdfbed8bba000328e92' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTh {
     render() {
-        return (h(Host, { key: '8d7263800b22a88f28e8953827aaf69307ea28ef', role: "columnheader" }, h("slot", { key: '57151efcfb335814fc8d59a71496ea85cdc79ae9' })));
+        return (h(Host, { key: '98d5096b0d03db947da3ea0129b43a5d291d0ddd', role: "columnheader" }, h("slot", { key: '4ccaa018abd5915d2069adc01b802bb9392cc186' })));
     }
     static get is() { return "sd-th"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTr {
     render() {
-        return (h(Host, { key: 'a3a60dc016314ae086ccba52c4f1967db982553e', role: "row" }, h("slot", { key: 'ced44913de272afa61850e35b2a0d070d32b41ab' })));
+        return (h(Host, { key: 'f20a0bbaf94ce37ef8cbf4d59c24159549294ff2', role: "row" }, h("slot", { key: '8b5d3685c916a4ad8422c03e35f9b699961a1415' })));
     }
     static get is() { return "sd-tr"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,249 @@
+.sd-table__wrapper .sd-table__container .sd-table__middle {
+  overflow-y: auto;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar {
+  opacity: 0;
+  background: #e5e5e5;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal {
+  height: 8px;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical {
+  width: 8px;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb {
+  height: 80px;
+  background-color: #cccccc;
+  border-radius: 4px;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.sd-table__wrapper {
+  height: var(--table-height, auto);
+  width: var(--table-width, 100%);
+  color: #222222;
+}
+.sd-table__wrapper .sd-table__container {
+  width: 100%;
+  height: auto;
+  border: 1px solid #e1e1e1;
+  border-radius: 8px;
+  font-size: 12px;
+  overflow: hidden;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle {
+  overflow: auto;
+  position: relative;
+  will-change: scroll-position;
+  height: var(--table-height, auto);
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle--loading {
+  overflow: hidden !important;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table {
+  background-color: white;
+  display: table;
+  width: 100%;
+  height: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected {
+  width: 52px !important;
+  max-width: 52px !important;
+  min-width: 52px !important;
+  padding: 0 10px 0 24px;
+  text-align: left;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead {
+  position: sticky;
+  top: 0;
+  z-index: 120;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right {
+  position: sticky;
+  background-color: #f5faff;
+  z-index: 110 !important;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right {
+  position: sticky;
+  background-color: white;
+  z-index: 100 !important;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left {
+  left: var(--sticky-left-offset, 0);
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right {
+  right: var(--sticky-right-offset, 0);
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell {
+  position: sticky;
+  z-index: 102;
+  background-color: #f5faff;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell {
+  position: sticky;
+  z-index: 101;
+  background-color: white;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge {
+  overflow: visible;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left 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: 1;
+  pointer-events: none;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge {
+  overflow: visible;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right 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: 1;
+  pointer-events: none;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead {
+  opacity: 0.4;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th {
+  border-bottom: 1px solid rgba(225, 225, 225, 0.4) !important;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead {
+  height: 36px;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr {
+  width: 100%;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th {
+  background: #f5faff;
+  height: 36px;
+  padding: 0 16px;
+  font-weight: 500;
+  vertical-align: middle;
+  border-bottom: 1px solid #e1e1e1;
+  -webkit-user-select: none;
+  user-select: none;
+  position: relative;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 4px;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left {
+  justify-content: flex-start;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center {
+  justify-content: center;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right {
+  justify-content: flex-end;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 16px;
+  cursor: col-resize;
+  z-index: 3;
+  border-left: 1px solid #cccccc;
+  border-right: 1px solid #cccccc;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody {
+  flex-grow: 1;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  background: rgba(255, 255, 255, 0.6);
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__no-data-row td {
+  text-align: center;
+  color: #888888;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr:last-of-type td {
+  border-bottom: none;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td {
+  height: 44px;
+  padding: 0 16px;
+  border-bottom: 1px solid #e1e1e1;
+  background: white;
+  vertical-align: middle;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left {
+  text-align: left;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center {
+  text-align: center;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right {
+  text-align: right;
+}
+.sd-table__wrapper .sd-table__container .sd-table__bottom {
+  background: white;
+  text-align: center;
+}
+.sd-table__wrapper .sd-table__pagination {
+  position: relative;
+  background: #f9f9f9;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #e1e1e1;
+  border-top: none;
+  border-radius: 8px;
+}
+.sd-table__wrapper .sd-table__pagination sd-select {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+}