@velumweb/ui-kit 1.0.1 → 1.0.2

package/public/assets/svg-lib/user-avatar-with-alert-svgrepo-com.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" id="_24x24_On_Light_User-Alert" data-name="24x24/On Light/User-Alert" xmlns="http://www.w3.org/2000/svg">
-  <rect id="view-box" width="24" height="24" fill="none"/>
-  <path id="Shape" d="M9.75,19.5A9.75,9.75,0,1,1,11.68.192,5.479,5.479,0,0,0,11,1.6,8.254,8.254,0,0,0,1.5,9.75a8.163,8.163,0,0,0,1.713,5.027A5.594,5.594,0,0,1,5.135,13.7c.141-.052.288-.1.475-.167l.443-.149c.855-.293,1.169-.481,1.244-.747l0-.009.005-.024a.771.771,0,0,0-.058-.519.907.907,0,0,0-.237-.271A4.359,4.359,0,0,1,5.5,8.417,4.29,4.29,0,0,1,9.75,4a4.1,4.1,0,0,1,1.072.143,5.505,5.505,0,0,0,.937,2.28A2.7,2.7,0,0,0,9.75,5.5,2.807,2.807,0,0,0,7,8.417a2.848,2.848,0,0,0,1,2.274,2.28,2.28,0,0,1,.571.695,2.208,2.208,0,0,1,.2,1.537,1.41,1.41,0,0,1-.045.171c-.244.9-.9,1.271-2.188,1.711l-.445.15c-.166.056-.3.1-.437.154a4.286,4.286,0,0,0-1.419.77,8.234,8.234,0,0,0,11.03,0,4.3,4.3,0,0,0-1.421-.751c-.112-.041-.229-.081-.377-.13l-.386-.13c-1.332-.45-2.015-.825-2.293-1.742a1.863,1.863,0,0,1-.055-.223,2.36,2.36,0,0,1,.138-1.4,2.122,2.122,0,0,1,.589-.795,2.815,2.815,0,0,0,1.042-2.3,3.018,3.018,0,0,0-.489-1.666A5.557,5.557,0,0,0,14,8.268q0,.074,0,.149a4.3,4.3,0,0,1-1.559,3.427.673.673,0,0,0-.194.255.92.92,0,0,0-.043.527c.006.031.01.046.013.055.08.26.431.461,1.342.769l.384.129c.147.05.279.095.408.141a5.6,5.6,0,0,1,1.935,1.058A8.169,8.169,0,0,0,18,9.75,8.308,8.308,0,0,0,17.9,8.5a5.478,5.478,0,0,0,1.4-.676A9.755,9.755,0,0,1,9.75,19.5ZM17.362,6.569h0a8.342,8.342,0,0,0-4.431-4.43,3.527,3.527,0,0,1,.782-1.3,9.774,9.774,0,0,1,4.946,4.945,3.525,3.525,0,0,1-1.3.781Z" transform="translate(2.25 2.25)" fill="#141124"/>
-  <path id="Shape-2" data-name="Shape" d="M3.5,7A3.5,3.5,0,1,1,7,3.5,3.5,3.5,0,0,1,3.5,7Z" transform="translate(15 2)" fill="#ff6359"/>
-</svg>

package/public/assets/svg-lib/user-banned-svgrepo-com.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" id="_24x24_On_Light_User" data-name="24x24/On Light/User" xmlns="http://www.w3.org/2000/svg">
-  <rect id="view-box" width="24" height="24" fill="none"/>
-  <path id="Shape" d="M0,9.75A9.75,9.75,0,1,1,9.75,19.5,9.761,9.761,0,0,1,0,9.75ZM9.75,18a8.218,8.218,0,0,0,5.515-2.119,4.328,4.328,0,0,0-1.421-.75c-.112-.04-.229-.081-.377-.13l-.386-.13c-1.4-.471-2.023-.851-2.293-1.742a1.876,1.876,0,0,1-.055-.223,2.369,2.369,0,0,1,.138-1.4,2.123,2.123,0,0,1,.589-.795,2.823,2.823,0,0,0,1.042-2.3A2.832,2.832,0,0,0,9.75,5.5,2.8,2.8,0,0,0,7,8.417a2.843,2.843,0,0,0,1,2.274,2.278,2.278,0,0,1,.571.695,2.224,2.224,0,0,1,.2,1.537,1.152,1.152,0,0,1-.045.17c-.237.877-.847,1.254-2.188,1.712l-.445.15c-.173.059-.308.106-.437.154a4.312,4.312,0,0,0-1.419.771A8.216,8.216,0,0,0,9.75,18ZM14,8.417a4.32,4.32,0,0,1-1.559,3.427.672.672,0,0,0-.193.255.928.928,0,0,0-.043.527c.006.031.01.046.013.055.077.253.408.454,1.342.769l.384.129c.157.053.284.1.408.141a5.645,5.645,0,0,1,1.935,1.058,8.25,8.25,0,1,0-13.074,0A5.672,5.672,0,0,1,5.135,13.7c.144-.053.291-.1.475-.167l.443-.149c.863-.3,1.17-.484,1.244-.747,0,.006,0-.005.007-.033a.769.769,0,0,0-.058-.519.9.9,0,0,0-.237-.271A4.346,4.346,0,0,1,5.5,8.417,4.3,4.3,0,0,1,9.75,4,4.332,4.332,0,0,1,14,8.417Z" transform="translate(2.25 2.25)" fill="#abadb7"/>
-  <path id="Shape-2" data-name="Shape" d="M2.626.657.006,21.551a.75.75,0,0,0,1.488.187L4.115.843A.75.75,0,0,0,2.626.657Z" transform="translate(2.458 5.527) rotate(-45)" fill="#141124"/>
-</svg>

package/public/assets/svg-lib/user-svgrepo-com.svg

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" id="_24x24_On_Light_User" data-name="24x24/On Light/User" xmlns="http://www.w3.org/2000/svg">
-  <rect id="view-box" width="24" height="24" fill="none"/>
-  <path id="Shape" d="M0,9.75A9.75,9.75,0,1,1,9.75,19.5,9.761,9.761,0,0,1,0,9.75ZM9.75,18a8.218,8.218,0,0,0,5.515-2.119,4.328,4.328,0,0,0-1.421-.75c-.112-.04-.229-.081-.377-.13l-.386-.13c-1.4-.471-2.023-.851-2.293-1.742a1.876,1.876,0,0,1-.055-.223,2.369,2.369,0,0,1,.138-1.4,2.123,2.123,0,0,1,.589-.795,2.823,2.823,0,0,0,1.042-2.3A2.832,2.832,0,0,0,9.75,5.5,2.8,2.8,0,0,0,7,8.417a2.843,2.843,0,0,0,1,2.274,2.278,2.278,0,0,1,.571.695,2.224,2.224,0,0,1,.2,1.537,1.152,1.152,0,0,1-.045.17c-.237.877-.847,1.254-2.188,1.712l-.445.15c-.173.059-.308.106-.437.154a4.312,4.312,0,0,0-1.419.771A8.216,8.216,0,0,0,9.75,18ZM14,8.417a4.32,4.32,0,0,1-1.559,3.427.672.672,0,0,0-.193.255.928.928,0,0,0-.043.527c.006.031.01.046.013.055.077.253.408.454,1.342.769l.384.129c.157.053.284.1.408.141a5.645,5.645,0,0,1,1.935,1.058,8.25,8.25,0,1,0-13.074,0A5.672,5.672,0,0,1,5.135,13.7c.144-.053.291-.1.475-.167l.443-.149c.863-.3,1.17-.484,1.244-.747,0,.006,0-.005.007-.033a.769.769,0,0,0-.058-.519.9.9,0,0,0-.237-.271A4.346,4.346,0,0,1,5.5,8.417,4.3,4.3,0,0,1,9.75,4,4.332,4.332,0,0,1,14,8.417Z" transform="translate(2.25 2.25)" fill="#141124"/>
-</svg>

package/src/components/Button/Button.stories.ts

@@ -1,64 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Button } from './Button';
-
-const meta = {
-  title: 'Example Button',
-  component: Button,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => {
-      const script = document.createElement('script')
-      script.src = '/style_setter.js'
-      script.type = 'module'
-      document.head.appendChild(script)
-
-      return Story()
-    },
-  ],
-}
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const CustomButton: Story = {
-  args: {
-    text: 'Button Example',
-    type: 'primary',
-    size: 'medium',
-    corners: 'standard',
-    disabled: false,
-    cls: '',
-    onClick: () => console.log('CustomButton')
-  },
-};
-
-export const IconButton: Story = {
-  args: {
-    text: 'Exit',
-    type: 'secondary',
-    size: 'medium',
-    corners: 'standard',
-    disabled: false,
-    cls: '',
-    onClick: () => console.log('IconButton'),
-    iconPath: 'svg-lib/alert-square.svg',
-    labelAlign: 'bottom'
-  },
-};
-
-export const Icon: Story = {
-  args: {
-    onClick: () => console.log('Icon'),
-    iconPath: 'svg-lib/checkmark-svgrepo-com.svg',
-    type: 'transparent',
-    size: 'large',
-    corners: 'round',
-    disabled: false,
-    cls: '',
-    staticIcon: true
-  },
-};
-

package/src/components/Button/Button.tsx

@@ -1,99 +0,0 @@
-import React from 'react';
-import { Box } from "../Container";
-import './button.scss';
-
-/**
- * Компонент кнопки
- * - разные состояния
- * - разные типы
- * - разные размеры
- * - разные углы
- * - добавление иконки
- */
-
-export interface ButtonProps {
-    /** Основная / Только текст / Вспомогательная */
-    type: 'primary' | 'transparent' | 'secondary';
-
-    /** Маленькая / Средняя / Большая */
-    size?: 'small' | 'medium' | 'large';
-
-    /** Углы прямые / Закругленные / Круглые */
-    corners?: 'square' | 'standard' | 'round';
-
-    /** Доступность кнопки */
-    disabled?: boolean,
-
-    /** Текст кнопки */
-    text?: string;
-
-    /** Событие при нажатии */
-    onClick?: (e?: MouseEvent) => void;
-
-    /** Дополнительные классы */
-    cls?: string;
-
-    /** Путь до иконки из assets */
-    iconPath?: string;
-
-    /** Расположение текста относительно иконки */
-    labelAlign?: 'right' | 'left' | 'bottom' | 'top';
-
-    /** Это просто информационная иконка */
-    staticIcon?: boolean;
-}
-
-/** Элемент кнопки */
-export const Button = ({
-    type = 'primary',
-    size = 'medium',
-    corners = 'standard',
-    disabled = false,
-    staticIcon = false,
-    cls = '',
-    text = '',
-    iconPath = '',
-    labelAlign = '',
-    onClick,
-    ...props
-}: ButtonProps) => {
-    const isIconCls = iconPath != '' && text === '' ? 'kit-btn--icon' : '';
-
-    let Content;
-    const IconContainer = () => (iconPath ? <div
-        className='kit-btn--svg'
-        style={{
-            maskImage: `url(assets/${iconPath})`,
-            WebkitMaskImage: `url(assets/${iconPath})`
-        }}
-    /> : null);
-
-    /** текст + иконка */
-    switch(labelAlign) {
-        case 'right': Content = () => (<Box direction='row'><IconContainer />{text as string}</Box>); break;
-        case 'left': Content = () => (<Box direction='row'>{text as string}<IconContainer /></Box>); break;
-        case 'top': Content = () => (<Box direction='column'>{text as string}<IconContainer /></Box>); break;
-        case 'bottom': Content = () => (<Box direction='column'><IconContainer />{text as string}</Box>); break;
-        default: Content = () => (<Box direction='row'>{ isIconCls ? <IconContainer /> : text as string}</Box>); break;
-    }
-
-    return (
-        <button
-            type="button"
-            onClick={disabled || !onClick ? null : onClick}
-            className={[
-                'kit-btn',
-                `kit-btn--${size}`,
-                `kit-btn--${corners}`,
-                `kit-btn--${type}`,
-                disabled ? 'kit-btn--disabled' : '',
-                staticIcon ? 'kit-icon' : '',
-                isIconCls,
-                cls
-            ].join(' ')}
-            {...props}
-        >
-            <Content />
-        </button>
-    );
-};

package/src/components/Button/button.scss

@@ -1,147 +0,0 @@
-@import '../../main.scss';
-
-.kit-btn {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  font-weight: 700;
-  line-height: 1;
-  font-family: var(--font-family);
-  transition: background-color 0.3s ease;
-  padding: 8px 16px;
-  & > .kit-box {
-    width: fit-content;
-  }
-  &:active {
-    transform: translateY(0.5px);
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) inset;
-  }
-  &.kit-icon {
-    pointer-events: none;
-  }
-  &.kit-btn--disabled {
-    opacity: 0.5;
-    pointer-events: none;
-    user-select: none;
-  }
-}
-
-// type
-.kit-btn--primary {
-  background-color: var(--primary-btn-color);
-  color: var(--secondary-btn-color);
-  & > div > .kit-btn--svg {
-    background-color: var(--secondary-btn-color);
-  }
-  &:hover {
-    background-color: var(--hover-btn-color);
-  }
-}
-.kit-btn--secondary {
-  border: 1px var(--primary-btn-color) solid;
-  background-color: transparent;
-  color: var(--primary-btn-color);
-  & > div > .kit-btn--svg {
-    background-color: var(--primary-btn-color);
-  }
-  &:hover {
-    background-color: var(--hover-btn-color);
-    color: var(--secondary-btn-color);
-    border: 1px var(--hover-btn-color) solid;
-    & > div > .kit-btn--svg {
-      background-color: var(--secondary-btn-color);
-    }
-  }
-}
-.kit-btn--transparent {
-  border: none;
-  background-color: transparent;
-  color: var(--primary-btn-color);
-  & > div > .kit-btn--svg {
-    background-color: var(--primary-btn-color);
-  }
-  &:hover {
-    color: var(--hover-btn-color);
-    & > div > .kit-btn--svg {
-      background-color: var(--hover-btn-color);
-    }
-  }
-  &:active {
-    box-shadow: unset;
-  }
-}
-
-// size
-.kit-btn--small {
-  font-size: 12px;
-  & > div > .kit-btn--svg {
-    width: 20px;
-    height: 20px;
-  }
-  &:not(.kit-btn--icon) > .kit-container--h > .kit-btn--svg {
-    width: 16px;
-    height: 16px;
-  }
-  &:not(.kit-btn--icon) > .kit-container--v > .kit-btn--svg {
-    width: 24px;
-    height: 24px;
-  }
-}
-.kit-btn--medium {
-  font-size: 14px;
-  & > div > .kit-btn--svg {
-    width: 24px;
-    height: 24px;
-  }
-  &:not(.kit-btn--icon) > .kit-container--h > .kit-btn--svg {
-    width: 20px;
-    height: 20px;
-  }
-  &:not(.kit-btn--icon) > .kit-container--v > .kit-btn--svg {
-    width: 28px;
-    height: 28px;
-  }
-}
-.kit-btn--large {
-  font-size: 16px;
-  & > div > .kit-btn--svg {
-    width: 32px;
-    height: 32px;
-  }
-  &:not(.kit-btn--icon) > .kit-container--h > .kit-btn--svg {
-    width: 24px;
-    height: 24px;
-  }
-  &:not(.kit-btn--icon) > .kit-container--v > .kit-btn--svg {
-    width: 32px;
-    height: 32px;
-  }
-}
-
-// border-radius
-.kit-btn--standard {
-  border-radius: var(--corners-standard);
-}
-.kit-btn--round {
-  border-radius: var(--corners-round);
-}
-.kit-btn--square {
-  border-radius: var(--corners-square);
-}
-
-// icons
-.kit-btn--icon {
-  padding: 8px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.kit-btn--svg {
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  mask-size: contain;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: contain;
-  -webkit-mask-repeat: no-repeat;
-}

package/src/components/Button/index.ts

@@ -1 +0,0 @@
-export * from "./Button";

package/src/components/Container/Box.tsx

@@ -1,83 +0,0 @@
-import React, { ReactNode } from 'react';
-import './box.scss';
-
-/**
- * Компоненты контейнеры
- * - разные направления
- * - семантические обертки
- * - позиционирование
- */
-
-
-export interface BoxProps {
-    /** Направление строка или столбец */
-    direction?: 'row' | 'column';
-
-    /** Горизонтальное выравнивание **/
-    align?: 'top' | 'center' | 'bottom';
-
-    /** Горизонтальное распределение **/
-    justify?: 'start' | 'end' | 'center' | 'space';
-
-    /** Перенос блоков внутри контейнера **/
-    wrapContent?: boolean;
-
-    /** Дополнительные классы */
-    cls?: string;
-
-    /** Расстояние между дочерними элементами */
-    gap?: number;
-
-    /** Внешние отступы */
-    margin?: number[];
-
-    /** Внутренние отступы */
-    padding?: number[];
-
-    /** Родительский тег для семантики */
-    parent?: 'header' | 'footer' | 'article' | 'section' | 'main' | 'div';
-
-    /** Содержимое контейнера **/
-    children: ReactNode | string;
-
-    /** Маска загрузки **/
-    mask?: boolean
-}
-
-/** Элемент контейнера */
-export const Box = ({
-    direction = 'row',
-    align = 'center',
-    justify = 'center',
-    wrapContent = false,
-    cls = '',
-    gap = 8,
-    margin = [0],
-    padding = [0],
-    parent = 'div',
-    mask = false,           // TODO loader
-    children,
-    ...props
-}: BoxProps) => {
-    const Parent = parent;
-    const margins = margin?.map(m => m + 'px').join(' ');
-    const paddings = padding?.map(m => m + 'px').join(' ');
-
-    return(
-        <Parent
-            className={[
-                'kit-box',
-                `kit-box--${direction}`,
-                `kit-box--align-${align}`,
-                `kit-box--justify-${justify}`,
-                wrapContent && 'kit-box--wrap',
-                cls
-            ].join(' ')}
-            style={{ gap: `${gap}px`, margin: `${margins}`, padding: `${paddings}` }}
-            {...props}
-        >
-            {children}
-        </Parent>
-    )
-
-};

package/src/components/Container/box.scss

@@ -1,41 +0,0 @@
-.kit-box {
-  margin: 0;
-  padding: 0;
-  display: flex;
-  width: 100%;
-  flex-wrap: nowrap;
-}
-
-.kit-box--row {
-  flex-direction: row;
-}
-.kit-box--column {
-  flex-direction: column;
-}
-
-.kit-box--align-top {
-  align-items: flex-start;
-}
-.kit-box--align-center {
-  align-items: center;
-}
-.kit-box--align-bottom {
-  align-items: flex-end;
-}
-
-.kit-box--justify-start {
-  justify-content: flex-start;
-}
-.kit-box--justify-end {
-  justify-content: flex-end;
-}
-.kit-box--justify-center {
-  justify-content: center;
-}
-.kit-box--justify-space {
-  justify-content: space-between;
-}
-
-.kit-box--wrap {
-  flex-wrap: wrap;
-}

package/src/components/Container/index.ts

@@ -1 +0,0 @@
-export * from "./Box";

package/src/components/Input/Input.stories.ts

@@ -1,49 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Input } from './Input';
-
-const meta = {
-  title: 'Example Input',
-  component: Input,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => {
-      const script = document.createElement('script')
-      script.src = '/style_setter.js'
-      script.type = 'module'
-      document.head.appendChild(script)
-
-      return Story()
-    },
-  ],
-}
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const TextField: Story = {
-  args: {
-    label: 'Год вашего рождения',
-    value: '2026',
-    type: 'text',
-    bottomText: 'Пишите только цифры',
-    placeholder: 'Год в формате YYYY',
-    errorText: 'Допустимы только цифры',
-    mask: /^[0-9]+$/,
-    width: 300
-  },
-};
-
-export const Search: Story = {
-  args: {
-    value: '',
-    type: 'text',
-    placeholder: 'Найти по имени или году',
-    width: 250,
-    live: true,
-    isSearch: true
-  },
-};
-

package/src/components/Input/Input.tsx

@@ -1,172 +0,0 @@
-import React, {useState, useId} from 'react';
-import { Button } from "../Button";
-import './input.scss';
-
-/**
- * Компонент поля для ввода текста
- * - тип (текст, цифры, пароль)
- * - это поисковая строка (значок лупы)
- * - валидация
- */
-
-export interface InputProps {
-    /** Значение */
-    value?: string | number; 
-
-    /** Текстовое поле \ цифровое \ пароль \ textarea */
-    type?: 'text' | 'number' | 'password' | 'email' | 'date' | 'tel' | 'time' | 'textarea';
-
-    /** Углы прямые / Закругленные / Круглые */
-    corners?: 'square' | 'standard' | 'round';
-
-    /** Доступность поля */
-    disabled?: boolean,
-
-    /** Текст над полем */
-    label?: string;
-
-    /** Текст под полем */
-    bottomText?: string;
-
-    /** Плейсхолдер */
-    placeholder?: string;
-
-    /** Живой поиск */
-    live?: boolean;
-
-    /** Событие при изменении */
-    onChange?: (value?: string | number) => void;
-
-    /** Это поиск */
-    isSearch?: boolean;
-
-    /** Валидация */
-    mask?: RegExp;
-
-    /** Ошибки валидации */
-    errorText: string;
-
-    /** Ширина в px */
-    width?: number;
-
-    /** Дополнительные классы */
-    cls?: string;
-}
-
-/** Элемент кнопки */
-export const Input = ({
-    value='',
-    type='text',
-    corners='standard',
-    disabled=false,
-    label='',
-    bottomText='',
-    placeholder='',
-    errorText='',
-    live=false,
-    isSearch=false,
-    mask,
-    width,
-    onChange,
-    cls,
-    ...props
-}: InputProps) => {
-    const [internalValue, setInternalValue] = useState<string | number>(value);
-    const [error, setError] = useState<string>('');
-    const inputId = useId();
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        let val: string | number = e.target.value;
-
-        if (type === 'number') {
-            val = val.toString().replace(/\D/g, '');
-        }
-
-        if (mask && !mask.test(val.toString())) {
-            setError(errorText || 'Некорректное значение'); // TODO нормальные текстовки
-        } else {
-            setError('');
-        }
-
-        setInternalValue(val);
-
-        if (live && onChange) {
-            onChange(val);
-        }
-    };
-
-    const clearInput = () => {
-        setInternalValue('');
-    }
-
-    const handleBlur = (e: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        if (!live && onChange) {
-            onChange(internalValue);
-        }
-    };
-
-    const inputProps = {
-        value: internalValue,
-        placeholder,
-        onChange: handleChange,
-        onBlur: handleBlur,
-        className: [
-            'kit-input',
-            `kit-input--${corners}`,
-            disabled ? 'kit-input--disabled' : '',
-            error ? 'kit-input--error' : '',
-            cls
-        ].join(' ').trim()
-    };
-
-    return (
-        <div className="kit-input--wrapper">
-            { label && <div className='w5rem'>
-                <label
-                    for={ inputId }
-                    className="kit-input--label kit-input-secondary-text"
-                >
-                    { label }
-                </label>
-            </div> }
-            <div
-                className="kit-input--container"
-                style={{ 'width': width ? `${width}px` : 'auto' }}
-            >
-                { type === 'textarea' ? (
-                    <textarea
-                        id={ inputId }
-                        { ...inputProps }
-                    />
-                ) : (
-                    <input
-                        { ...inputProps }
-                        type={ type }
-                        id={ inputId }
-                    />
-                )}
-
-                <div className='kit-input--icon-container'>
-                    { internalValue && <Button
-                        type='transparent'
-                        iconPath='svg-lib/input-svgrepo-com.svg'
-                        size='small'
-                        onClick={clearInput}
-                        cls='kit-input--icon'
-                    /> }
-                    { isSearch && <Button
-                        type='transparent'
-                        iconPath='svg-lib/search-svgrepo-com.svg'
-                        size='small'
-                        staticIcon={live}
-                        onClick={() => onChange && onChange(internalValue)}
-                        cls='kit-input--icon'
-                    /> }
-                </div>
-            </div>
-
-            { !error && bottomText && <div className="kit-input-bottomtext kit-input-secondary-text">{bottomText}</div> }
-            { error && <div className="kit-input-errortext kit-input-secondary-text">{error}</div> }
-        </div>
-    );
-};

package/src/components/Input/index.ts

@@ -1 +0,0 @@
-export * from "./Input";