@epam/uui 5.3.0 → 5.4.0

package/components/inputs/TimePicker.module.scss

@@ -1,68 +0,0 @@
-.root {
-    --uui-time_picker-text: var(--uui-control-text);
-    --uui-time_picker-icon-clickable: var(--uui-icon);
-    --uui-time_picker-icon-clickable-hover: var(--uui-icon-hover);
-
-    &:global(.uui-timepicker-container) {
-        display: flex;
-        padding: 15px 12px;
-        justify-content: center;
-
-        :global(.uui-timepicker-input) {
-            &:global(.uui-input-box) {
-                margin: 6px 0;
-                width: 36px;
-                height: 36px;
-            }
-
-            > input {
-                text-align: center;
-                font-size: 24px;
-                line-height: 24px;
-                color: var(--uui-time_picker-text);
-                font-family: var(--uui-font);
-                font-weight: 400;
-
-                &::placeholder,
-                &::-webkit-input-placeholder {
-                    color: var(--uui-time_picker-text);
-                    opacity: 1; /* for Firefox */
-                }
-            }
-        }
-
-        :global(.uui-timepicker-item) {
-            position: relative;
-            padding: 9px 24px;
-        }
-
-        :global(.uui-timepicker-item:first-child) {
-            &::after {
-                content: ':';
-                position: absolute;
-                top: 35px;
-                left: 81px;
-                color: var(--uui-time_picker-text);
-                font-size: 24px;
-                line-height: 30px;
-            }
-        }
-
-        :global(.uui-timepicker-icon-up), :global(.uui-timepicker-icon-down) {
-            align-items: center;
-            fill: var(--uui-time_picker-icon-clickable);
-
-            &:hover {
-                fill: var(--uui-time_picker-icon-clickable-hover);
-            }
-        }
-
-        :global(.uui-timepicker-icon-up) {
-            transform: rotate(180deg);
-        }
-    }
-}
-
-.timepicker-input {
-    width: 100%;
-}

package/components/inputs/TimePicker.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import dayjs from 'dayjs';
-import { devLogger, DropdownBodyProps, IDropdownToggler } from '@epam/uui-core';
-import { BaseTimePickerProps, BaseTimePicker } from '@epam/uui-components';
-import { IHasEditMode, SizeMod, EditMode } from '../types';
-import { DropdownContainer } from '../overlays/DropdownContainer';
-import { TextInput } from './TextInput';
-import { TimePickerBody } from './TimePickerBody';
-import css from './TimePicker.module.scss';
-import customParseFormat from 'dayjs/plugin/customParseFormat.js';
-
-dayjs.extend(customParseFormat);
-
-const defaultMode = EditMode.FORM;
-export interface TimePickerProps extends BaseTimePickerProps, SizeMod, IHasEditMode {
-    minutesStep?: number;
-    format?: 12 | 24;
-}
-
-export class TimePicker extends BaseTimePicker<TimePickerProps> {
-    renderInput = (props: IDropdownToggler) => {
-        if (__DEV__) {
-            if (this.props.size === '48') {
-                devLogger.warnAboutDeprecatedPropValue<TimePickerProps, 'size'>({
-                    component: 'TimePicker',
-                    propName: 'size',
-                    propValue: this.props.size,
-                    propValueUseInstead: '42',
-                    condition: () => ['48'].indexOf(this.props.size) !== -1,
-                });
-            }
-        }
-        return (
-            <TextInput
-                { ...props }
-                onClick={ null }
-                size={ this.props.size || '36' }
-                isDisabled={ this.props.isDisabled }
-                isReadonly={ this.props.isReadonly }
-                isInvalid={ this.props.isInvalid }
-                cx={ [css.root, css.timepickerInput, this.props.inputCx] }
-                value={ this.state.value }
-                onValueChange={ this.handleInputChange }
-                onCancel={ this.onClear }
-                onFocus={ this.handleFocus }
-                onBlur={ this.handleBlur }
-                isDropdown={ false }
-                placeholder={ this.props.placeholder ? this.props.placeholder : this.getFormat() }
-                mode={ this.props.mode || defaultMode }
-                rawProps={ this.props.rawProps?.input }
-            />
-        );
-    };
-
-    renderBody = (props: DropdownBodyProps) => {
-        return (
-            !this.props.isDisabled && !this.props.isReadonly && (
-                <DropdownContainer { ...props } focusLock={ false }>
-                    <TimePickerBody
-                        { ...this.props }
-                        value={ this.props.value !== null ? this.props.value : { hours: null, minutes: null } }
-                        rawProps={ this.props.rawProps?.body }
-                        cx={ this.props.bodyCx }
-                    />
-                </DropdownContainer>
-            )
-        );
-    };
-}

package/components/inputs/TimePickerBody.tsx

@@ -1,10 +0,0 @@
-import { TimePickerBody as uuiTimePickerBody, TimePickerBodyProps } from '@epam/uui-components';
-import { withMods } from '@epam/uui-core';
-import css from './TimePicker.module.scss';
-import { ReactComponent as ArrowIcon } from './../../icons/folding-arrow-18.svg';
-
-export const TimePickerBody = withMods<TimePickerBodyProps>(
-    uuiTimePickerBody,
-    () => [css.root],
-    () => ({ addIcon: ArrowIcon, subtractIcon: ArrowIcon }),
-);

package/components/inputs/__tests__/Checkbox.test.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Checkbox } from '../Checkbox';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('Checkbox', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<Checkbox value={ null } onValueChange={ jest.fn } />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<Checkbox value={ null } onValueChange={ jest.fn } size="18" mode="cell" />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/inputs/__tests__/MultiSwitch.test.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { MultiSwitch } from '../MultiSwitch';
-import { renderer } from '@epam/uui-test-utils';
-
-it('should be rendered correctly', () => {
-    const tree = renderer
-        .create(
-            <MultiSwitch
-                value={ 1 }
-                onValueChange={ jest.fn }
-                items={ [{ id: 1, caption: 'On' }, { id: 2, caption: 'Off' }] }
-            />,
-        )
-        .toJSON();
-    expect(tree).toMatchSnapshot();
-});

package/components/inputs/__tests__/NumericInput.test.tsx

@@ -1,208 +0,0 @@
-import React from 'react';
-import { NumericInput, NumericInputProps } from '../NumericInput';
-import {
-    renderSnapshotWithContextAsync, setupComponentForTest, screen, fireEvent,
-} from '@epam/uui-test-utils';
-import { i18n } from '@epam/uui-core';
-
-async function setupNumericInput(params: Partial<NumericInputProps>) {
-    const { result, mocks } = await setupComponentForTest<NumericInputProps>(
-        (context) => {
-            return {
-                value: params.value,
-                min: params.min,
-                max: params.max,
-                step: params.step,
-                isReadonly: params.isReadonly,
-                isDisabled: params.isDisabled,
-                disableArrows: params.disableArrows,
-                disableLocaleFormatting: params.disableLocaleFormatting,
-                formatValue: params.formatValue,
-                formatOptions: params.formatOptions,
-                onValueChange: jest.fn().mockImplementation((newValue) => context.current.setProperty('value', newValue)),
-            };
-        },
-        (props) => <NumericInput { ...props } />,
-    );
-
-    const dom = {
-        input: screen.getByRole('spinbutton') as HTMLInputElement,
-    };
-
-    return { result, dom, mocks };
-}
-
-describe('NumericInput', () => {
-    describe('snapshots', () => {
-        it('should be rendered with minimum props', async () => {
-            const tree = await renderSnapshotWithContextAsync(<NumericInput value={ null } onValueChange={ jest.fn } min={ 0 } max={ 50 } />);
-            expect(tree).toMatchSnapshot();
-        });
-
-        it('should be rendered with maximum props', async () => {
-            const tree = await renderSnapshotWithContextAsync(<NumericInput value={ null } onValueChange={ jest.fn } min={ 0 } max={ 50 } size="36" mode="inline" />);
-            expect(tree).toMatchSnapshot();
-        });
-    });
-
-    describe('integer numbers', () => {
-        it('should change value by typing', async () => {
-            const res = await setupNumericInput({ value: 1000 });
-            expect(res.dom.input.placeholder).toEqual('1,000');
-            fireEvent.change(res.dom.input, { target: { value: 2000 } });
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(2000);
-            expect(res.dom.input.placeholder).toEqual('2,000');
-        });
-
-        it('should change value by keyboard arrow up/down', async () => {
-            const res = await setupNumericInput({ value: 1000, step: 10 });
-            expect(res.dom.input.placeholder).toEqual('1,000');
-            fireEvent.keyDown(res.dom.input, { key: 'ArrowUp' });
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1010);
-            expect(res.dom.input.placeholder).toEqual('1,010');
-            fireEvent.keyDown(res.dom.input, { key: 'ArrowDown' });
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1000);
-            expect(res.dom.input.placeholder).toEqual('1,000');
-        });
-
-        it('should invoke onValueChange on blur only when new value is different from current', async () => {
-            const res = await setupNumericInput({ value: 1000 });
-            expect(res.dom.input.placeholder).toEqual('1,000');
-            fireEvent.focusIn(res.dom.input);
-            expect(res.dom.input.value).toEqual('1000');
-            fireEvent.focusOut(res.dom.input);
-            expect(res.mocks.onValueChange).not.toHaveBeenCalled();
-        });
-
-        it('should change value by typing considering min/max specified', async () => {
-            const res = await setupNumericInput({ value: 10, min: -15, max: 15 });
-            expect(res.dom.input.placeholder).toEqual('10');
-            fireEvent.change(res.dom.input, { target: { value: 20 } });
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(20);
-            expect(res.dom.input.placeholder).toEqual('20');
-            fireEvent.change(res.dom.input, { target: { value: -20 } });
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(-20);
-            expect(res.dom.input.placeholder).toEqual('-20');
-            fireEvent.change(res.dom.input, { target: { value: -2 } });
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(-2);
-            expect(res.dom.input.placeholder).toEqual('-2');
-            fireEvent.change(res.dom.input, { target: { value: 2 } });
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(2);
-            expect(res.dom.input.placeholder).toEqual('2');
-        });
-
-        it('should change value by arrows considering min/max specified', async () => {
-            const res = await setupNumericInput({ value: 1, min: -2, max: 2 });
-            const [arrowUp, arrowDown] = screen.getAllByRole('button');
-            fireEvent.click(arrowUp);
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(2);
-            expect(res.dom.input.placeholder).toEqual('2');
-            fireEvent.click(arrowUp);
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(2);
-            expect(res.dom.input.placeholder).toEqual('2');
-            fireEvent.click(arrowDown);
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1);
-            expect(res.dom.input.placeholder).toEqual('1');
-            fireEvent.click(arrowDown);
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(0);
-            expect(res.dom.input.placeholder).toEqual('0');
-            fireEvent.click(arrowDown);
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(-1);
-            expect(res.dom.input.placeholder).toEqual('-1');
-            fireEvent.click(arrowDown);
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(-2);
-            expect(res.dom.input.placeholder).toEqual('-2');
-            fireEvent.click(arrowDown);
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(-2);
-            expect(res.dom.input.placeholder).toEqual('-2');
-        });
-
-        it('should render as readonly if isReadonly=true', async () => {
-            const res = await setupNumericInput({ value: 1, isReadonly: true });
-            expect(res.dom.input.readOnly).toBeTruthy();
-        });
-
-        it('should render as disabled if isDisabled=true', async () => {
-            const res = await setupNumericInput({ value: 1, isDisabled: true });
-            expect(res.dom.input).toBeDisabled();
-        });
-
-        it('should hide arrows when disableArrows=true', async () => {
-            await setupNumericInput({ value: 1, disableArrows: true });
-            const [arrowUp, arrowDown] = screen.queryAllByRole('button');
-            expect(arrowUp).not.toBeDefined();
-            expect(arrowDown).not.toBeDefined();
-        });
-
-        it('should format value using custom formatValue function', async () => {
-            const formatValue = (value: number) => {
-                return String(value).split('').join('|');
-            };
-            const res = await setupNumericInput({ value: 1000, formatValue });
-            expect(res.dom.input.placeholder).toEqual('1|0|0|0');
-        });
-
-        it('should not format value if disableLocaleFormatting=true', async () => {
-            const res = await setupNumericInput({ value: 1000000, disableLocaleFormatting: true });
-            expect(res.dom.input.placeholder).toEqual('1000000');
-        });
-
-        it('should display un-formatted value when focused', async () => {
-            const res = await setupNumericInput({ value: 1000000 });
-            expect(res.dom.input.placeholder).toEqual('1,000,000');
-            expect(res.dom.input).toHaveValue(null);
-            fireEvent.focusIn(res.dom.input);
-            expect(res.dom.input).toHaveValue(1000000);
-        });
-    });
-    describe('fractional numbers', () => {
-        it('should format value using custom formatValue function', async () => {
-            const formatValue = jest.fn().mockImplementation((value) => String(value).split('').join('|'));
-            const res = await setupNumericInput({
-                value: 1000.111,
-                formatOptions: { maximumFractionDigits: 3 },
-                formatValue,
-            });
-            expect(res.dom.input.placeholder).toEqual('1|0|0|0|.|1|1|1');
-            fireEvent.change(res.dom.input, { target: { value: 1000.2222222222 } });
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1000.222);
-            expect(res.dom.input.placeholder).toEqual('1|0|0|0|.|2|2|2');
-        });
-
-        it('should change value by arrows considering min/max specified and fractional step', async () => {
-            const res = await setupNumericInput({
-                value: 1199.09,
-                formatOptions: { maximumFractionDigits: 3, minimumFractionDigits: 2 },
-                step: 0.001,
-            });
-            expect(res.dom.input.placeholder).toEqual('1,199.09');
-            const [arrowUp, arrowDown] = screen.getAllByRole('button');
-            fireEvent.click(arrowUp);
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1199.091);
-            expect(res.dom.input.placeholder).toEqual('1,199.091');
-            fireEvent.click(arrowDown);
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1199.09);
-            expect(res.dom.input.placeholder).toEqual('1,199.09');
-        });
-
-        it('should change value by typing considering min/max specified', async () => {
-            const res = await setupNumericInput({
-                value: 1000.11,
-                formatOptions: { maximumFractionDigits: 3, minimumFractionDigits: 2 },
-            });
-            expect(res.dom.input.placeholder).toEqual('1,000.11');
-            fireEvent.change(res.dom.input, { target: { value: 1000.1116 } });
-            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1000.112);
-            expect(res.dom.input.placeholder).toEqual('1,000.112');
-        });
-
-        it('should display value using "de-DE" locale', async () => {
-            i18n.locale = 'de-DE';
-            const res = await setupNumericInput({
-                value: 1000.112,
-                formatOptions: { maximumFractionDigits: 3 },
-            });
-            expect(res.dom.input.placeholder).toEqual('1.000,112');
-        });
-    });
-});

package/components/inputs/__tests__/RadioInput.test.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { RadioInput } from '../RadioInput';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('RadioInput', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<RadioInput value={ null } onValueChange={ jest.fn } />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<RadioInput value={ null } onValueChange={ jest.fn } size="18" label="Open" />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/inputs/__tests__/Slider.test.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Slider } from '../Slider';
-import {
-    mockReactPortalsForSnapshots,
-    renderSnapshotWithContextAsync,
-} from '@epam/uui-test-utils';
-
-describe('Slider', () => {
-    it('should render with minimum props', async () => {
-        const { mockClear } = mockReactPortalsForSnapshots();
-        const tree = await renderSnapshotWithContextAsync(<Slider value={ null } onValueChange={ jest.fn } min={ 0 } max={ 50 } step={ 1 } />);
-        mockClear();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should render with maximum props', async () => {
-        const { mockClear } = mockReactPortalsForSnapshots();
-        const tree = await renderSnapshotWithContextAsync(<Slider value={ null } onValueChange={ jest.fn } min={ 0 } max={ 50 } step={ 1 } renderLabel={ (num) => `${num}` } />);
-        mockClear();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/inputs/__tests__/Switch.test.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Switch } from '../Switch';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('Switch', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<Switch value={ null } onValueChange={ jest.fn } />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<Switch value={ null } onValueChange={ jest.fn } size="18" label="Open" />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/inputs/__tests__/TextArea.test.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { TextArea } from '../TextArea';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('TextArea', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<TextArea value={ null } onValueChange={ jest.fn } />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<TextArea value={ null } onValueChange={ jest.fn } placeholder="Type here" size="36" maxLength={ 200 } rows={ 4 } mode="inline" />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/inputs/__tests__/TextInput.test.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { TextInput } from '../TextInput';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
-import { ReactComponent as CalendarIcon } from '../../../icons/calendar-18.svg';
-
-describe('TextInput', () => {
-    it('should be rendered correctly', async () => {
-        const tree = await renderSnapshotWithContextAsync(<TextInput value={ null } onValueChange={ jest.fn } />);
-
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <TextInput value={ null } onValueChange={ jest.fn } onAccept={ jest.fn } onCancel={ jest.fn } icon={ CalendarIcon } iconPosition="right" size="36" isDropdown isOpen />,
-        );
-
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/inputs/__tests__/TimePicker.test.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { TimePicker } from '../TimePicker';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
-
-describe('TimePicker', () => {
-    it('should be rendered correctly', async () => {
-        const tree = await renderSnapshotWithContextAsync(<TimePicker value={ null } onValueChange={ jest.fn } />);
-
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <TimePicker value={ { hours: 1, minutes: 5 } } onValueChange={ jest.fn } format={ 24 } minutesStep={ 5 } size="36" isDisabled />,
-        );
-
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/inputs/__tests__/TimePickerBody.test.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { TimePickerBody } from '../TimePickerBody';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
-import MockDate from 'mockdate';
-import { systemIcons } from '../../../icons/icons';
-
-const arrowIcon = systemIcons[30].foldingArrow;
-
-beforeEach(() => {
-    MockDate.set(new Date('2020-12-09T01:02:03+00:00'));
-});
-
-afterEach(() => {
-    MockDate.reset();
-});
-
-describe('TimePickerBody', () => {
-    it('should be rendered with minimum props', async () => {
-        const tree = await renderSnapshotWithContextAsync(<TimePickerBody value={ { hours: 12, minutes: 30 } } onValueChange={ jest.fn } />);
-
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered with maximum props', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <TimePickerBody
-                value={ { hours: 12, minutes: 30 } }
-                onValueChange={ jest.fn }
-                format={ 12 }
-                minutesStep={ 5 }
-                addIcon={ arrowIcon }
-                subtractIcon={ arrowIcon }
-            />,
-        );
-
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/inputs/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Checkbox should be rendered correctly 1`] = `
-<label
-  className="container uui-checkbox-container root size-18 mode-form uui-color-primary -clickable"
-  tabIndex={-1}
->
-  <div
-    className="uui-checkbox"
-  >
-    <input
-      aria-checked={false}
-      checked={false}
-      onChange={[Function]}
-      tabIndex={0}
-      type="checkbox"
-    />
-  </div>
-</label>
-`;
-
-exports[`Checkbox should be rendered correctly 2`] = `
-<label
-  className="container uui-checkbox-container root size-18 mode-cell uui-color-primary -clickable"
-  tabIndex={-1}
->
-  <div
-    className="uui-checkbox"
-  >
-    <input
-      aria-checked={false}
-      checked={false}
-      onChange={[Function]}
-      tabIndex={0}
-      type="checkbox"
-    />
-  </div>
-</label>
-`;

package/components/inputs/__tests__/__snapshots__/MultiSwitch.test.tsx.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should be rendered correctly 1`] = `
-<div
-  className="container root"
-  role="tablist"
->
-  <button
-    aria-current={true}
-    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-solid uui-color-primary uui-size-36"
-    onClick={[Function]}
-    role="tab"
-    tabIndex={0}
-    type="button"
-  >
-    <div
-      className="uui-caption"
-    >
-      On
-    </div>
-  </button>
-  <button
-    aria-current={false}
-    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-outline uui-color-primary uui-size-36"
-    onClick={[Function]}
-    role="tab"
-    tabIndex={0}
-    type="button"
-  >
-    <div
-      className="uui-caption"
-    >
-      Off
-    </div>
-  </button>
-</div>
-`;