wini-web-components 0.3.0 → 0.4.0

package/src/component/progress-circle/progress-circle.css

@@ -1,47 +0,0 @@
-.progress-bar-container {
-    row-gap: 1.2rem;
-    width: 38.2rem;
-}
-
-.progress-bar-container>.progress-bar-title {
-    justify-content: space-between;
-    width: 100%;
-}
-
-.progress-bar-container>.progress-bar-title>.heading-text {
-    font: 600 1.4rem/2.2rem 'Inter';
-    color: #00204D;
-}
-
-.progress-bar-container>.progress-bar-tile {
-    column-gap: 1.6rem;
-    width: 100%;
-    height: 2.2rem;
-}
-
-.progress-bar-container>.progress-bar-tile>.progress-bar-value {
-    border-radius: 10rem;
-    width: 100%;
-    flex: 1;
-    height: 0.6rem;
-    position: relative;
-    overflow: hidden;
-    background-color: var(--full-color);
-}
-
-.progress-bar-container>.progress-bar-tile>.progress-bar-value::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: var(--percent);
-    height: 0.6rem;
-    border-radius: 10rem;
-    background-color: var(--percent-color);
-    transition: width ease-in-out 1s;
-}
-
-.progress-bar-container>.progress-bar-tile>.text-value {
-    font: 400 1.4rem/2.2rem 'Inter';
-    color: #00204DE5;
-}

package/src/component/progress-circle/progress-circle.tsx

@@ -1,24 +0,0 @@
-import { CSSProperties } from 'react'
-import './progress-circle.css'
-import React from 'react'
-
-export function ProgressCircle({ percent, style, fillColor, percentColor, strokeWidth, strokeColor, textStyle }: {
-    /** value:  0 - 100 (%)*/
-    percent?: number,
-    style?: CSSProperties,
-    fillColor?: string,
-    percentColor?: string,
-    strokeWidth?: number,
-    strokeColor?: string,
-    textStyle?: CSSProperties
-}) {
-    const radius = 30 - (strokeWidth ?? 4)
-    const diameter = Math.PI * 2 * radius;
-    const strokeOffset = (1 - ((percent ?? 0) / 100)) * diameter;
-    return <svg width="100%" height="100%" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: 60, height: 60, ...(style ?? {}) }} >
-        <path d={`M 30,30 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`} style={{ fill: "none", stroke: strokeColor ?? "#E6EAF0", strokeWidth: strokeWidth ?? '4px', }} />
-        <path d={`M 30,30 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`} style={{ fill: fillColor ?? "none", stroke: percentColor ?? "var(--infor-color)", strokeWidth: strokeWidth ?? '4px', strokeLinecap: 'round', strokeDasharray: `${diameter}px ${diameter}px`, strokeDashoffset: `${strokeOffset}px` }} />
-        <text x="50%" y="50%" fill="#00204D" dy=".3em" textAnchor="middle" fontSize={16} fontWeight={'600'} style={textStyle}>{percent ?? 0}%</text>
-    </svg>
-}
-

package/src/component/radio-button/radio-button.css

@@ -1,49 +0,0 @@
-.radio-btn-container {
-    height: max(var(--size), 14px);
-    width: max(var(--size), 14px);
-    aspect-ratio: 1 / 1 !important;
-    border-radius: 50%;
-    box-sizing: border-box;
-    border: 2px solid var(--off-color);
-    background-color: transparent !important;
-    transition: border-color ease-in-out 0.5s;
-    justify-content: center;
-    cursor: pointer;
-}
-
-.radio-btn-container>input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-}
-
-.radio-btn-container>.checkmark {
-    height: calc(max(var(--size), 14px) / 2);
-    width: calc(max(var(--size), 14px) / 2);
-    border-radius: 50%;
-    aspect-ratio: 1 / 1;
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility, opacity ease-in-out 0.5s;
-}
-
-.radio-btn-container>input:checked~.checkmark {
-    visibility: visible;
-    opacity: 1;
-    background-color: var(--active-color);
-}
-
-.radio-btn-container:has(> input:checked) {
-    border-color: var(--active-color) !important;
-}
-
-.radio-btn-container:has(input:disabled) {
-    pointer-events: none !important;
-    border-color: var(--off-color) !important;
-    background-color: #0035800A !important;
-}
-
-.radio-btn-container>input:disabled~.checkmark {
-    display: block !important;
-    background-color: #00204D40;
-}

package/src/component/radio-button/radio-button.tsx

@@ -1,59 +0,0 @@
-import React, { CSSProperties } from 'react';
-import './radio-button.css';
-import { UseFormRegister } from 'react-hook-form';
-
-interface RadioButtonProps {
-    onChange?: React.ChangeEventHandler<HTMLInputElement>,
-    value?: string | number | readonly string[],
-    disabled: false,
-    style: CSSProperties,
-    size?: number | string,
-    defaultChecked?: boolean,
-    name?: string,
-    activeColor?: string,
-    offColor?: string,
-    className?: string,
-    register?: UseFormRegister<{}>,
-}
-
-
-export class RadioButton extends React.Component<RadioButtonProps> {
-    render(): React.ReactNode {
-        let convertStyle: CSSProperties = {
-            '--off-color': this.props.offColor ?? '#ccd7e6',
-            '--active-color': this.props.activeColor ?? 'var(--infor-color)',
-            '--size': this.props.size ? (typeof this.props.size === 'number') ? `${this.props.size}px` : this.props.size : '20px'
-        } as CSSProperties
-        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 className={`radio-btn-container row ${this.props.className ?? ''}`} style={convertStyle} >
-            {this.props.register ?
-                <input
-                    {...this.props.register}
-                    type="radio"
-                    value={this.props.value}
-                    disabled={this.props.disabled}
-                /> :
-                <input type="radio"
-                    name={this.props.name}
-                    value={this.props.value}
-                    defaultChecked={this.props.defaultChecked}
-                    disabled={this.props.disabled}
-                    onChange={this.props.onChange}
-                />
-            }
-            <span className="checkmark"></span>
-        </label>
-    }
-}

package/src/component/rating/rating.css

@@ -1,11 +0,0 @@
-.rating-container {
-    gap: 0.8rem;
-}
-
-.rating-container svg {
-    cursor: pointer;
-}
-
-.rating-container svg > * {
-    pointer-events: none !important;
-}

package/src/component/rating/rating.tsx

@@ -1,65 +0,0 @@
-import React, { CSSProperties } from "react"
-import './rating.css'
-
-interface RatingProps {
-    /**
-    value: 0-5
-    */
-    value?: number,
-    size?: number | string,
-    onChange?: (e: number) => {}
-    className?: string,
-    style?: CSSProperties,
-    strokeColor?: string,
-    fillColor?: string,
-}
-
-interface RatingState {
-    value: number,
-}
-
-const autoKeyId = () => (`${1e7 + -1e3 + -4e3 + -8e3 + -1e11}`).replace(/[018]/g, c =>
-    (parseFloat(c) ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (parseFloat(c) / 4)))).toString(16))
-
-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 className={`row 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%" stopColor={this.props.fillColor ?? '#FC6B03'} />
-                            <stop offset={`${stopValue}%`} stopColor={this.props.fillColor ?? '#FC6B03'} />
-                            <stop offset={`${stopValue}%`} 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" fill={this.props.strokeColor ?? '#667994'} />
-                    <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.css

@@ -1,155 +0,0 @@
-.select1-container {
-    border-radius: 0.4rem;
-    align-items: center;
-    justify-content: start;
-    width: 100%;
-    height: 4rem;
-    max-height: 100%;
-    box-sizing: border-box;
-    padding: 0.8rem;
-    gap: 0.8rem;
-    width: 16rem;
-    position: relative;
-    border: 0.5px solid #00358033;
-    cursor: context-menu;
-}
-
-.select1-container.disabled {
-    background-color: var(--disabled-background) !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: 400 1.2rem/1.6rem 'Inter';
-    transform: translate(-7.5%, 92.5%) scale(0.85);
-}
-
-.select1-container::-webkit-scrollbar {
-    display: none;
-}
-
-.selected-item-value>* {
-    pointer-events: none;
-}
-
-.select1-container>.select1-placeholder {
-    font: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-align: inherit;
-    text-overflow: inherit;
-    color: #c5c5c5 !important;
-    flex: 1;
-}
-
-.select1-container>.select1-value-name {
-    font: inherit;
-    color: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-align: inherit;
-    text-overflow: inherit;
-    flex: 1;
-}
-
-.select1-container>.selected-item-value {
-    border-radius: 4px;
-    padding: 4px 8px;
-    background-color: #c5c5c5;
-    column-gap: 4px;
-}
-
-.select1-container>.selected-item-value>.selected-value-title {
-    font: 400 1.2rem/1.6rem "Inter";
-    color: #1C2430;
-}
-
-.select1-popup {
-    position: absolute;
-    z-index: 10;
-    background-color: white;
-    border-radius: 8px;
-    height: fit-content;
-    box-shadow: 0 0 12px 0 #00204d1f;
-    align-items: center;
-    padding: 8px 0;
-    overflow: hidden;
-    /* border: 0.5px solid #00358033; */
-    box-shadow: -20px 20px 40px -4px rgba(145, 158, 171, 0.24), 0px 0px 2px 0px rgba(145, 158, 171, 0.24);
-}
-
-.select1-popup>.header-search {
-    width: 100%;
-    padding: 0.8rem 1.6rem;
-    box-sizing: border-box;
-    align-items: center;
-    border-bottom: var(--border-grey1);
-}
-
-.select1-popup>.header-search>input {
-    outline: none;
-    padding: 0;
-    border: 0;
-    font: 400 1.4rem/2.2rem "Inter";
-    color: #1C2430;
-    min-width: 0;
-    flex: 1;
-    max-width: 100%;
-}
-
-.select1-popup>.select1-body {
-    width: 100%;
-    align-items: start;
-    row-gap: 2px;
-    overflow: hidden;
-}
-
-.select1-popup>.select1-body>.select1-scroll-view {
-    overflow: hidden auto;
-    max-height: 26rem;
-    min-height: 8rem;
-    width: 100%;
-    align-items: start;
-}
-
-.select1-popup>.select1-body .select1-tile * {
-    pointer-events: none;
-}
-
-.select1-popup>.select1-body .select1-tile {
-    justify-content: start;
-    align-items: center;
-    padding: 1.2rem 1.6rem;
-    gap: 0.8rem;
-    width: 100%;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    text-align: start;
-}
-
-.select1-popup>.select1-body .select1-tile:hover {
-    background-color: var(--infor-color) !important;
-    color: white;
-}
-
-.no-results-found {
-    padding: 8px;
-    font: 400 1.4rem/2rem "Inter";
-    color: #1C2430;
-}

package/src/component/select1/select1.tsx

@@ -1,241 +0,0 @@
-import React, { CSSProperties, FocusEvent, ReactNode } from 'react'
-import {
-    faChevronDown,
-    faChevronUp,
-    faSearch,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import ReactDOM from 'react-dom'
-import './select1.css'
-
-interface OptionsItem {
-    id: string | number,
-    name: string | ReactNode,
-    title?: string | ReactNode
-}
-
-interface Select1Props {
-    value?: any,
-    options: Required<Array<OptionsItem>>,
-    onChange?: (value?: OptionsItem) => void,
-    placeholder?: string,
-    disabled?: boolean,
-    className?: string,
-    helperText?: string,
-    helperTextColor?: string,
-    style?: CSSProperties,
-    searchPlaceholder?: string,
-    hideSearch?: boolean,
-    handleSearch?: (e: string) => Promise<Array<OptionsItem>>
-};
-
-interface Select1State {
-    value?: string | number,
-    offset: DOMRect,
-    isOpen: boolean,
-    onSelect: any,
-    search?: Array<OptionsItem>,
-    style?: Object
-};
-
-export class Select1 extends React.Component<Select1Props, Select1State> {
-    constructor(props: Select1Props) {
-        super(props)
-        this.state = {
-            value: this.props.value,
-            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.parseValue = this.parseValue.bind(this)
-        this.onChangeValue = this.onChangeValue.bind(this)
-        this.search = this.search.bind(this)
-    }
-
-    private parseValue(value: any) {
-        if (value === null || value === undefined || value === '') {
-            return null
-        }
-        switch (typeof this.props.options[0].id) {
-            case 'number':
-                return parseFloat(value)
-            default:
-                return value
-        }
-    }
-
-    componentDidUpdate(prevProps: Select1Props, prevState: Select1State) {
-        if (prevProps.value !== this.props.value) {
-            this.setState({
-                ...this.state,
-                value: this.props.value
-            })
-        }
-        if (prevState.isOpen !== this.state.isOpen && this.state.isOpen) {
-            const thisPopupRect = document.body.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',
-                        width: `${this.state.offset.width}px`,
-                        right: document.body.offsetWidth - this.state.offset.right + 'px'
-                    }
-                }
-                if (thisPopupRect.bottom > document.body.offsetHeight) {
-                    style = style ? {
-                        ...style,
-                        top: undefined,
-                        bottom: document.body.offsetHeight - this.state.offset.bottom + 'px'
-                    } : {
-                        left: this.state.offset.x + 'px',
-                        width: `${this.state.offset.width}px`,
-                        bottom: document.body.offsetHeight - this.state.offset.bottom + 'px'
-                    }
-                }
-                if (style) this.setState({ ...this.state, style: style })
-            }
-        }
-    }
-
-    private onChangeValue(ev: FocusEvent) {
-        if (this.state.onSelect?.classList?.contains('select1-tile')) {
-            const item = this.props.options.find(e => e.id === this.parseValue(this.state.onSelect.id))
-            this.setState({
-                ...this.state,
-                isOpen: false,
-                onSelect: null,
-                value: item?.id
-            })
-            if (this.props.onChange) this.props.onChange(item)
-        } else if (this.state.onSelect) {
-            (ev.target as HTMLInputElement).focus()
-        } else {
-            this.setState({
-                ...this.state,
-                isOpen: false,
-                onSelect: null
-            })
-        }
-    }
-
-    private search(ev: React.ChangeEvent<HTMLInputElement>) {
-        if (ev.target.value.trim().length) {
-            if (this.props.handleSearch) {
-                this.props.handleSearch(ev.target.value.trim()).then(res => {
-                    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
-            })
-        }
-    }
-
-    render() {
-        const selectedValue: OptionsItem | undefined = (this.props.options ?? []).find(e => e.id === this.state.value)
-        return <div
-            className={`select1-container row ${this.props.className ?? 'placeholder-2'} ${this.props.disabled ? 'disabled' : ''} ${this.props.helperText?.length && 'helper-text'}`}
-            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={ev => {
-                if (!this.state.isOpen) {
-                    let _offset = ((ev.target as HTMLElement).closest('.select1-container') ?? (ev.target as HTMLElement)).getBoundingClientRect()
-                    if (_offset.bottom + 32 > document.body.offsetHeight) {
-                        this.setState({
-                            ...this.state,
-                            isOpen: true,
-                            offset: _offset,
-                            style: {
-                                left: _offset.x + 'px',
-                                bottom: (document.body.offsetHeight - _offset.y) + 'px',
-                                width: `${_offset.width / 10}rem`
-                            }
-                        })
-                    } else {
-                        this.setState({
-                            ...this.state,
-                            isOpen: true,
-                            offset: _offset,
-                            style: undefined
-                        })
-                    }
-                }
-            }}
-        >
-            {selectedValue?.name ? (<div className='select1-value-name'>{selectedValue.name}</div>) : (<div className='select1-placeholder'>{this.props.placeholder}</div>)}
-            <FontAwesomeIcon
-                icon={this.state.isOpen ? faChevronUp : faChevronDown}
-                style={{ fontSize: '1.2rem', color: '#888' }}
-            />
-            {this.state.isOpen &&
-                ReactDOM.createPortal(
-                    <div
-                        className='select1-popup col'
-                        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,
-                        }}
-                        onMouseOver={ev => {
-                            this.setState({
-                                ...this.state,
-                                onSelect: ev.target
-                            })
-                        }}
-                        onMouseOut={() =>
-                            this.setState({
-                                ...this.state,
-                                onSelect: null
-                            })
-                        }
-                    >
-                        <div className='row header-search' style={this.props.hideSearch ? { marginTop: '-4rem' } : undefined}>
-                            <input autoFocus={true} placeholder={this.props.searchPlaceholder ?? 'Tìm kiếm'}
-                                onChange={this.search}
-                                onBlur={ev => {
-                                    this.onChangeValue(ev)
-                                }}
-                            />
-                            <FontAwesomeIcon icon={faSearch} style={{ fontSize: '1.2rem', color: '#161D24D9' }} />
-                        </div>
-                        <div className='col select1-body'>
-                            <div className='col select1-scroll-view'>
-                                {(this.state.search ?? this.props.options).map(item => (
-                                    <button type='button' key={item.id} className='select1-tile label-3 row' id={`${item.id}`} style={{ backgroundColor: selectedValue?.id === item.id ? 'var(--selected-background)' : '#00000000' }}>
-                                        {item.title ?? item.name}
-                                    </button>
-                                ))}
-                                {(this.state.search?.length === 0 || this.props.options?.length === 0) && (
-                                    <div className='no-results-found'>No result found</div>
-                                )}
-                            </div>
-                        </div>
-                    </div>,
-                    document.body
-                )}
-        </div>
-    }
-}

package/src/component/slider/slider.css

@@ -1,16 +0,0 @@
-.custom-slider-container {
-    --content-background-color: #00000000 !important;
-}
-
-.custom-slider-container .awssld__content>* {
-    width: 100%;
-    height: 100%;
-}
-
-.custom-slider-container .awssld__controls button {
-    padding: 2.4rem;
-    width: fit-content;
-    height: fit-content;
-    top: 50%;
-    transform: translateY(-50%);
-}