wini-web-components 2.8.4 → 2.8.6

package/src/component/rating/rating.tsx

@@ -1,65 +0,0 @@
-import React, { CSSProperties } from "react"
-import styles from './rating.module.css'
-
-interface RatingProps {
-    id?: string,
-    /**
-    value: 0-5
-    */
-    value?: number,
-    size?: number | string,
-    onChange?: (e: number) => void
-    className?: string,
-    style?: CSSProperties,
-    strokeColor?: string,
-    fillColor?: string,
-}
-
-interface RatingState {
-    value: number,
-}
-
-const autoKeyId = () => window.crypto.randomUUID().replace(/-/g, '')
-
-export class Rating extends React.Component<RatingProps, RatingState> {
-    state: Readonly<RatingState> = {
-        value: this.props.value ?? 0
-    }
-
-    componentDidUpdate(prevProps: Readonly<RatingProps>): void {
-        if (prevProps.value !== this.props.value) {
-            this.setState({ value: this.props.value ?? 0 })
-        }
-    }
-    render(): React.ReactNode {
-        return <div id={this.props.id} className={`row ${styles['rating-container']} ${this.props.className ?? ''}`} style={this.props.style}>
-            {Array.from({ length: 5 }).map((_, i) => {
-                let uniqueId = 'rating-star-grad-0'
-                let stopValue = 0
-                if (this.state.value >= 5) {
-                    uniqueId = 'rating-star-grad-5'
-                    stopValue = 100
-                } else if (this.state.value >= i) {
-                    uniqueId = autoKeyId()
-                    stopValue = (this.state.value - i) * 100
-                }
-                return <svg onClick={() => {
-                    if (this.props.onChange) {
-                        this.setState({ value: i + 1 })
-                        this.props.onChange(i + 1)
-                    }
-                }} key={'rate-' + i} width={"100%"} height={"100%"} style={{ width: this.props.size ?? '2rem', height: this.props.size ?? '2rem' }} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <defs>
-                        <linearGradient id={uniqueId} x1="0%" x2="100%" y1="0%" y2="0%">
-                            <stop offset="0%" style={{ stopColor: this.props.fillColor ?? 'var(--secondary3-main-color,#FAAD1E)' }} />
-                            <stop offset={`${stopValue}%`} style={{ stopColor: this.props.fillColor ?? 'var(--secondary3-main-color,#FAAD1E)' }} />
-                            <stop offset={`${stopValue}%`} style={{ stopColor: '#00000000' }} />
-                        </linearGradient>
-                    </defs>
-                    <path fillRule="evenodd" clipRule="evenodd" d="M10 1.66667C10.2884 1.66667 10.5518 1.82993 10.6794 2.0878L12.844 6.46194L17.6847 7.16325C17.97 7.20459 18.2071 7.4039 18.2962 7.67736C18.3853 7.95082 18.311 8.25101 18.1045 8.45172L14.6018 11.8563L15.4285 16.6636C15.4772 16.947 15.3604 17.2334 15.127 17.4024C14.8937 17.5714 14.5844 17.5937 14.3292 17.4599L10 15.1897L5.67081 17.4599C5.41557 17.5937 5.10627 17.5714 4.87295 17.4024C4.63964 17.2334 4.52278 16.947 4.57151 16.6636L5.39815 11.8563L1.89545 8.45172C1.68896 8.25101 1.61465 7.95082 1.70377 7.67736C1.79288 7.4039 2.02996 7.20459 2.31533 7.16325L7.15599 6.46194L9.32063 2.0878C9.44825 1.82993 9.71162 1.66667 10 1.66667ZM10 4.12915L8.33846 7.48665C8.22811 7.70963 8.01479 7.86418 7.76802 7.89993L4.05223 8.43827L6.74094 11.0517C6.91947 11.2252 7.00094 11.4752 6.95881 11.7203L6.3243 15.4102L9.64738 13.6676C9.86813 13.5519 10.1319 13.5519 10.3526 13.6676L13.6757 15.4102L13.0412 11.7203C12.9991 11.4752 13.0805 11.2252 13.2591 11.0517L15.9478 8.43827L12.232 7.89993C11.9852 7.86418 11.7719 7.70963 11.6615 7.48665L10 4.12915Z" style={{ fill: this.props.strokeColor ?? 'var(--neutral-text-placeholder-color,#878792)' }} />
-                    <path d="M17.738 7.18949L12.8212 6.47499L10.6249 2.02268C10.5611 1.91426 10.47 1.82438 10.3608 1.76194C10.2515 1.6995 10.1279 1.66666 10.0021 1.66666C9.87623 1.66666 9.75259 1.6995 9.64335 1.76194C9.53411 1.82438 9.44306 1.91426 9.37921 2.02268L7.17875 6.47499L2.26191 7.18949C2.13368 7.208 2.0132 7.26201 1.91406 7.34542C1.81493 7.42882 1.74111 7.5383 1.70095 7.66147C1.66078 7.78463 1.65588 7.91658 1.68678 8.04239C1.71769 8.1682 1.78317 8.28286 1.87583 8.3734L5.43449 11.8411L4.59499 16.7385C4.57311 16.8662 4.58739 16.9975 4.63622 17.1175C4.68505 17.2375 4.76648 17.3414 4.8713 17.4175C4.97612 17.4937 5.10016 17.539 5.22938 17.5483C5.3586 17.5577 5.48785 17.5306 5.60252 17.4704L9.99998 15.1588L14.3974 17.4704C14.5121 17.5306 14.6414 17.5577 14.7706 17.5483C14.8998 17.539 15.0238 17.4937 15.1286 17.4175C15.2335 17.3414 15.3149 17.2375 15.3637 17.1175C15.4126 16.9975 15.4268 16.8662 15.405 16.7385L14.5655 11.8411L18.1241 8.3734C18.2168 8.28295 18.2823 8.16841 18.3132 8.0427C18.3442 7.91699 18.3394 7.78512 18.2994 7.66199C18.2594 7.53886 18.1858 7.42937 18.0868 7.34587C17.9879 7.26238 17.8675 7.20822 17.7394 7.18949H17.738Z" fill={`url(#${uniqueId})`} />
-                </svg>
-            })}
-        </div>
-    }
-}

package/src/component/select1/select1.module.css

@@ -1,108 +0,0 @@
-.select1-container {
-    border-radius: 0.8rem;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 0.8rem 1.6rem;
-    border: var(--neutral-bolder-border);
-    border-radius: 0.8rem;
-    gap: 0.8rem;
-    position: relative;
-    cursor: context-menu;
-}
-
-.select1-container:focus-within {
-    border-color: var(--primary-main-color);
-}
-
-.select1-container.disabled {
-    background-color: var(--neutral-disable-background-color) !important;
-    pointer-events: none !important;
-}
-
-.select1-container.helper-text {
-    overflow: visible !important;
-    border-color: var(--helper-text-color) !important;
-}
-
-.select1-container.helper-text::after {
-    content: attr(helper-text);
-    color: var(--helper-text-color);
-    position: absolute;
-    left: 0;
-    bottom: -0.4rem;
-    width: max-content;
-    font-size: 1.2rem;
-    line-height: 1.6rem;
-    font-family: inherit;
-    transform: translateY(100%);
-}
-
-.select1-container>input {
-    flex: 1;
-    width: 100%;
-    border: none;
-    outline: none;
-    padding: 0;
-    background-color: transparent !important;
-    font: inherit;
-    color: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-align: inherit;
-    text-overflow: inherit;
-}
-
-.select1-container input:read-only {
-    cursor: context-menu;
-}
-
-.select1-popup {
-    position: absolute;
-    z-index: 10;
-    background-color: var(--neutral-absolute-background-color);
-    border-radius: 0.8rem;
-    border: var(--neutral-main-border);
-    height: fit-content;
-    box-shadow: 0 0 12px 0 #00204d1f;
-    align-items: center;
-}
-
-.select1-popup>.select-body {
-    max-height: 100%;
-    flex: 1;
-    align-items: start;
-    max-height: 28rem;
-    min-height: 8rem;
-    width: 100%;
-    padding: 0.4rem 0;
-    overflow: hidden auto;
-}
-
-.select1-popup>.select-body .select-tile {
-    justify-content: start;
-    align-items: center;
-    padding: 0.8rem 1.6rem;
-    gap: 0.8rem;
-    width: 100%;
-    cursor: context-menu;
-}
-
-.select1-popup>.select-body .select-tile:hover {
-    background-color: var(--neutral-hover-background-color);
-}
-
-.select1-popup>.select-body .select-tile.disabled {
-    background-color: var(--neutral-disable-background-color) !important;
-}
-
-.select1-popup>.select-body .select-tile.disabled * {
-    color: var(--neutral-text-disabled-color) !important;
-}
-
-.no-results-found {
-    padding: 0.8rem;
-    font: 400 1.4rem/2rem "Inter";
-    color: var(--neutral-text-title-reverse-color);
-}

package/src/component/select1/select1.tsx

@@ -1,271 +0,0 @@
-import styles from './select1.module.css'
-import React, { createRef, CSSProperties, ReactNode, useState } from 'react'
-import { Winicon } from '../wini-icon/winicon'
-import { Text } from '../text/text'
-import { WithTranslation, withTranslation } from 'react-i18next';
-import { PopupOverlay } from '../popup/popup'
-
-export interface OptionsItem {
-    id: string | number,
-    parentId?: string,
-    name: string | ReactNode,
-    title?: string | ((onSelect: (e: OptionsItem) => void) => ReactNode),
-    disabled?: boolean
-}
-
-interface Select1Props extends WithTranslation {
-    id?: string,
-    value?: string | number,
-    options: Required<Array<OptionsItem>>,
-    onChange?: (v?: OptionsItem) => void,
-    placeholder?: string,
-    disabled?: boolean,
-    className?: string,
-    helperText?: string,
-    helperTextColor?: string,
-    style?: CSSProperties,
-    handleSearch?: (e: string) => Promise<Array<OptionsItem>>,
-    handleLoadmore?: (onLoadMore: boolean, ev: React.UIEvent<HTMLDivElement, UIEvent>) => void,
-    handleLoadChildren?: () => {}
-    readOnly?: boolean,
-    popupClassName?: string,
-    prefix?: ReactNode,
-    suffix?: ReactNode,
-    onOpenOptions?: (popupRef: HTMLDivElement) => void
-}
-
-interface Select1State {
-    value?: string | number,
-    options: Required<Array<OptionsItem>>,
-    offset: DOMRect,
-    isOpen: boolean,
-    onSelect: any,
-    selected?: string | number,
-    search?: Array<OptionsItem>,
-    style?: Object
-};
-
-class TSelect1 extends React.Component<Select1Props, Select1State> {
-    private containerRef = createRef<HTMLDivElement>()
-    private inputRef = createRef<HTMLInputElement>()
-    constructor(props: Select1Props) {
-        super(props)
-        this.state = {
-            value: props.value,
-            options: props.options,
-            offset: {
-                x: 0,
-                y: 0,
-                height: 0,
-                width: 0,
-                bottom: 0,
-                left: 0,
-                right: 0,
-                top: 0,
-                toJSON: function () {
-                    throw new Error('Function not implemented.')
-                }
-            },
-            isOpen: false,
-            onSelect: null,
-        }
-        this.search = this.search.bind(this)
-        this.onSelect = this.onSelect.bind(this)
-        this.onKeyDown = this.onKeyDown.bind(this)
-        if (this.inputRef.current) this.inputRef.current.value = `${this.state.options.find(e => e.id === this.state.value)?.name ?? ""}`
-    }
-
-    private async search(ev: React.ChangeEvent<HTMLInputElement>) {
-        if (ev.target.value.trim().length) {
-            if (this.props?.handleSearch) {
-                const res = await this.props.handleSearch(ev.target.value.trim())
-                this.setState({ ...this.state, search: res })
-            } else {
-                this.setState({
-                    ...this.state,
-                    search: this.props.options.filter(e => typeof e.name === "string" && e.name.toLowerCase().includes(ev.target.value.trim().toLowerCase()))
-                })
-            }
-        } else {
-            this.setState({ ...this.state, search: undefined })
-        }
-    }
-
-    private onSelect(item: OptionsItem) {
-        if (item.disabled) {
-            this.setState({ ...this.state, isOpen: false, onSelect: undefined, selected: undefined })
-            this.inputRef.current?.blur()
-        } else {
-            let newState = { ...this.state, isOpen: false, value: item.id, onSelect: undefined, selected: undefined }
-            if (!newState.options.some(e => e.id === item.id)) newState.options.push(item)
-            this.setState(newState)
-            this.inputRef.current?.blur()
-        }
-        if (this.props.onChange) this.props.onChange(item)
-    }
-
-    private onKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
-        if ((this.state.options?.length || this.state.search?.length) && this.state.isOpen) {
-            switch (ev.key.toLowerCase()) {
-                case "enter":
-                    ev.preventDefault()
-                    const _selectItem = (this.state.search ?? this.state.options).find(e => e.id === this.state.selected)
-                    if (_selectItem) this.onSelect(_selectItem)
-                    break;
-                case "arrowup":
-                    ev.preventDefault()
-                    if (this.state.selected) {
-                        let _index = (this.state.search ?? this.state.options).findIndex((e) => e.id === this.state.selected)
-                        _index = ((_index === 0) ? this.props.options.length : _index) - 1
-                        this.setState({ ...this.state, selected: this.props.options[_index]?.id })
-                    }
-                    break;
-                case "arrowdown":
-                    ev.preventDefault()
-                    if (this.state.selected) {
-                        let _index = (this.state.search ?? this.state.options).findIndex((e) => e.id === this.state.selected)
-                        _index = ((_index + 1 === this.props.options.length) ? -1 : _index) + 1
-                        this.setState({ ...this.state, selected: this.props.options[_index]?.id })
-                    }
-                    break;
-                default:
-                    break;
-            }
-        }
-    }
-
-    componentDidUpdate(prevProps: Select1Props, prevState: Select1State) {
-        if (prevProps.options !== this.props.options) {
-            this.setState({ ...this.state, options: this.props.options })
-            if (this.inputRef.current) this.inputRef.current.value = `${this.props.options.find(e => e.id === this.state.value)?.name ?? ""}`
-        }
-        if (prevProps.value !== this.props.value) this.setState({ ...this.state, value: this.props.value })
-        if (prevState.value !== this.state.value && this.inputRef.current) this.inputRef.current.value = `${this.state.options.find(e => e.id === this.state.value)?.name ?? ""}`
-        //
-        if (this.state.isOpen && prevState.isOpen !== this.state.isOpen) {
-            const thisPopupRect = this.containerRef.current!.querySelector(`.select1-popup`)?.getBoundingClientRect()
-            if (thisPopupRect) {
-                let style: { top?: string, left?: string, right?: string, bottom?: string, width?: string, height?: string } | undefined;
-                if (thisPopupRect.right > document.body.offsetWidth) {
-                    style = {
-                        top: this.state.offset.y + this.state.offset.height + 2 + 'px',
-                        right: document.body.offsetWidth - this.state.offset.right + 'px'
-                    }
-                }
-                let _bottom = thisPopupRect.bottom - 8
-                const thisContainerRect = this.containerRef.current?.getBoundingClientRect()
-                if (thisContainerRect) {
-                    if (_bottom > document.body.offsetHeight) {
-                        style = { ...(style ?? {}), top: `${thisContainerRect.y - 2 - thisPopupRect.height}px` }
-                    }
-                }
-                if (style) {
-                    style.left ??= (style.right ? undefined : `${this.state.offset.x}px`)
-                    style.width ??= `${this.state.offset.width}px`
-                    this.setState({ ...this.state, style: style })
-                }
-            }
-        }
-    }
-
-    componentDidMount(): void {
-        if (this.inputRef.current) this.inputRef.current.value = `${this.state.options.find(e => e.id === this.state.value)?.name ?? ""}`
-    }
-
-    render() {
-        const { t } = this.props;
-        const _value = this.state.options.find(e => e.id === this.state.value)
-        return <div
-            id={this.props.id}
-            ref={this.containerRef}
-            className={`${styles['select1-container']} row ${this.props.disabled ? styles['disabled'] : ''} ${this.props.helperText?.length && styles['helper-text']} ${this.props.className ?? 'body-3'}`}
-            helper-text={this.props.helperText}
-            style={this.props.style ? { ...({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties), ...this.props.style } : ({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties)}
-            onClick={() => {
-                if (!this.state.isOpen) {
-                    this.setState({
-                        ...this.state,
-                        isOpen: true,
-                        style: undefined,
-                        offset: this.containerRef?.current?.getBoundingClientRect() as any,
-                    })
-                    this.inputRef.current?.focus()
-                }
-            }}
-        >
-            {this.props.prefix}
-            {(!_value || typeof _value.name === "string" || typeof _value.name === "number") ? <input ref={this.inputRef} readOnly={this.props.readOnly} onChange={this.search} placeholder={this.props.placeholder}
-                onBlur={ev => {
-                    if (this.state.onSelect && !this.props.readOnly) ev.target.focus()
-                }}
-            /> : _value.name}
-            {this.props.suffix ?? <div ref={iconRef => {
-                if (iconRef?.parentElement && iconRef.parentElement.getBoundingClientRect().width < 88) iconRef.style.display = "none"
-            }} className='row' >
-                <Winicon src={this.state.isOpen ? "fill/arrows/up-arrow" : "fill/arrows/down-arrow"} size={"1.2rem"} />
-            </div>}
-            {this.state.isOpen && <PopupOverlay
-                onOpen={this.props.onOpenOptions}
-                className={`hidden-overlay`}
-                onClose={(ev) => {
-                    if (ev.target !== this.inputRef.current) this.setState({ ...this.state, isOpen: false })
-                }}
-            >
-                <div className={`${styles['select1-popup']} select1-popup col ${this.props.popupClassName ?? ""}`} style={this.state.style ?? {
-                    top: this.state.offset.y + this.state.offset.height + 2 + 'px',
-                    left: this.state.offset.x + 'px',
-                    width: this.state.offset.width,
-                }}>
-                    <div className={`col ${styles['select-body']}`} onScroll={this.props.handleLoadmore ? (ev) => {
-                        if (this.props.handleLoadmore) {
-                            let scrollElement = ev.target as HTMLDivElement
-                            this.props.handleLoadmore(Math.round(scrollElement.offsetHeight + scrollElement.scrollTop) >= (scrollElement.scrollHeight - 1), ev)
-                        }
-                    } : undefined}>
-                        {(this.state.search ?? this.state.options).filter(e => !e.parentId).map(item => {
-                            return <OptionsItemTile
-                                key={item.id}
-                                item={item}
-                                children={(this.state.search ?? this.state.options).filter(e => e.parentId === item.id)}
-                                selected={this.state.selected === item.id}
-                                onClick={this.onSelect}
-                                treeData={(this.state.search ?? this.state.options).some(e => e.parentId)}
-                            />
-                        })}
-                        {(!this.state.search?.length && !this.props.options?.length) && (
-                            <div className={styles['no-results-found']}>{t("noResultFound")}</div>
-                        )}
-                    </div>
-                </div>
-            </PopupOverlay>}
-        </div>
-    }
-}
-
-interface OptionTileProps {
-    item: OptionsItem,
-    children?: Array<OptionsItem>,
-    selected?: boolean,
-    onClick: (e: OptionsItem) => void,
-    treeData?: boolean
-}
-
-function OptionsItemTile({ item, children, selected, onClick, treeData }: OptionTileProps) {
-    const [isOpen, setIsOpen] = useState<boolean>(false)
-
-    return item.title && typeof item.title !== "string" ? <>{item.title(onClick)}</> : <div className='col' style={{ width: '100%' }}>
-        <div className={`${styles['select-tile']} row ${item.disabled ? styles["disabled"] : ""}`} style={{ paddingLeft: item.parentId ? '4.4rem' : undefined, backgroundColor: selected ? "var(--neutral-selected-background-color)" : undefined }} onClick={() => {
-            if (children?.length) {
-                setIsOpen(!isOpen)
-            } else onClick(item)
-        }}>
-            {treeData ? <div className='row' style={{ width: '1.4rem', height: '1.4rem' }}>
-                {children?.length ? <Winicon src={isOpen ? "fill/arrows/triangle-down" : "fill/arrows/triangle-right"} size={"1.2rem"} /> : null}
-            </div> : undefined}
-            {((item.title && typeof item.title === "string") || typeof item.name === "string") ? <Text className='body-3'>{item.title && typeof item.title === "string" ? item.title : item.name}</Text> : item.name}
-        </div>
-        {children?.length ? <div className='col' style={{ display: isOpen ? "flex" : "none", width: '100%' }}>{children.map(e => <OptionsItemTile key={e.id} item={e} onClick={onClick} />)}</div> : undefined}
-    </div>
-}
-
-export const Select1 = withTranslation()(TSelect1)

package/src/component/switch/switch.module.css

@@ -1,53 +0,0 @@
-.switch-container {
-    position: relative;
-    display: inline-block;
-    background-color: var(--off-bg) !important;
-    border-radius: 50vw !important;
-    border: none;
-    outline: none;
-}
-
-.switch-container>input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-    border: none;
-    outline: none;
-}
-
-.switch-container>.slider {
-    font-size: var(--size);
-    position: absolute;
-    height: calc(100% - 0.2em);
-    aspect-ratio: 1 / 1;
-    left: 0.1em;
-    top: 0.1em;
-    background-color: var(--dot-color);
-    transition: 0.4s;
-    border-radius: 50%;
-}
-
-.switch-container>input:checked+.slider {
-    -webkit-transform: translateX(calc(0.8 * (100% + 0.2em)));
-    -ms-transform: translateX(calc(0.8 * (100% + 0.2em)));
-    transform: translateX(calc(0.8 * (100% + 0.2em)));
-}
-
-.switch-container:has(> input:checked) {
-    background-color: var(--on-bg) !important;
-}
-
-.switch-container:has(> input:disabled:not(*:checked)) {
-    pointer-events: none;
-    border: var(--neutral-bolder-border);
-    background-color: var(--neutral-disable-background-color) !important;
-}
-
-.switch-container:has(> input:disabled:not(*:checked)) .slider {
-    background-color: var(--neutral-text-disabled-color) !important;
-}
-
-.switch-container:has(> input:disabled:checked) {
-    pointer-events: none;
-    background-color: var(--primary-lighter-color) !important;
-}

package/src/component/switch/switch.tsx

@@ -1,68 +0,0 @@
-import React, { CSSProperties } from 'react';
-import styles from './switch.module.css';
-
-interface SwitchProps {
-    id?: string,
-    onChange?: (value: boolean) => void,
-    value?: boolean,
-    disabled?: boolean,
-    className?: string,
-    style?: CSSProperties,
-    size?: number | string,
-    dotColor?: string,
-    onBackground?: string,
-    offBackground?: string,
-    name?: string,
-}
-
-interface SwitchState {
-    value?: boolean,
-}
-
-export class Switch extends React.Component<SwitchProps, SwitchState> {
-    state: Readonly<SwitchState> = {
-        value: this.props.value ?? false
-    }
-
-    componentDidUpdate(prevProps: Readonly<SwitchProps>): void {
-        if (prevProps.value !== this.props.value) {
-            this.setState({ value: this.props.value })
-        }
-    }
-
-    render() {
-        const propStyle = {
-            '--off-bg': this.props.offBackground ?? 'var(--neutral-main-background-color)',
-            '--on-bg': this.props.onBackground ?? 'var(--primary-main-color)',
-            '--dot-color': this.props.dotColor ?? '#ffffff',
-            '--size': this.props.size ? (typeof this.props.size === 'number') ? `${this.props.size}px` : this.props.size : '2rem'
-        }
-        let convertStyle: CSSProperties = {
-            height: this.props.size ?? '2rem',
-            width: `calc(${this.props.size ? (typeof this.props.size === 'number') ? `${this.props.size}px` : this.props.size : '2rem'} * 9 / 5)`,
-            ...propStyle
-        }
-        if (this.props.style) {
-            delete this.props.style.width
-            delete this.props.style.minWidth
-            delete this.props.style.maxWidth
-            delete this.props.style.height
-            delete this.props.style.minHeight
-            delete this.props.style.maxHeight
-            convertStyle = {
-                ...this.props.style,
-                ...convertStyle,
-            }
-        }
-        return <label id={this.props.id} className={`${styles['switch-container']} row ${this.props.className ?? ''}`} style={convertStyle} >
-            <input type="checkbox" checked={this.state.value} name={this.props.name} disabled={this.props.disabled}
-                onChange={() => {
-                    const newValue = !this.state.value
-                    this.setState({ value: newValue })
-                    if (this.props.onChange) this.props.onChange(newValue)
-                }}
-            />
-            <span className={styles['slider']}></span>
-        </label>
-    }
-}

package/src/component/table/table.css

@@ -1,74 +0,0 @@
-.custom-table {
-    border: none;
-    min-width: 100%;
-    border-collapse: collapse;
-}
-
-.custom-table>.tb-header {
-    top: -1px;
-    z-index: 4;
-    position: sticky;
-    background-color: #f9fafb;
-}
-
-.custom-table>.tb-header>tr {
-    border-top: var(--neutral-bolder-border);
-    border-bottom: var(--neutral-bolder-border);
-}
-
-.custom-table .tb-cell {
-    height: 4.4rem;
-    text-align: left;
-    padding: 0 2.4rem;
-    font: 400 1.4rem/2.2rem 'Inter';
-    color: #00204DCC;
-    vertical-align: middle;
-}
-
-.custom-table tr>td {
-    background-color: #ffffff;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 52rem;
-}
-
-.custom-table>.tb-header>tr>td {
-    font: 600 1.2rem/2rem 'Inter';
-    white-space: nowrap;
-    color: #00204D99;
-    background-color: #f9fafb;
-}
-
-.custom-table tr.selected {
-    background-color: #f5f7fa;
-}
-
-.custom-table tr.selected>td {
-    background-color: #f5f7fa;
-}
-
-.tb-row>.tb-cell.tb-cell-fixed {
-    z-index: 2;
-    position: sticky;
-    /* box-shadow: 1px 0px 6px 0px rgba(45, 50, 57, 0.06); */
-    background-color: #ffffff;
-}
-
-.tb-header .tb-cell.tb-cell-fixed {
-    z-index: 2;
-    position: sticky;
-    /* box-shadow: 1px 0px 6px 0px rgba(45, 50, 57, 0.06); */
-    background-color: #f9fafb;
-}
-
-.tb-cell[align-cell='start'] {
-    text-align: start;
-}
-
-.tb-cell[align-cell='center'] {
-    text-align: center;
-}
-
-.tb-cell[align-cell='end'] {
-    text-align: end;
-}